Me

Today I went back to my project and realised something weird — I genuinely thought I had already finished most of my HTML, but when I opened the file, almost everything was gone. I don’t know if I forgot to save or if VS Code just didn’t keep it, but I had to rewrite the whole structure again.I rebuilt my Qur’an quote section, added my About Me text and list, set up the tab buttons in the header, and recreated the Projects section. While doing that, I ran into a few small mistakes: mixing up selectors (#about, #projects h2 instead of #about h2, #projects h2), letting my mobile‑only CSS rules sit outside the media query, and classic typos like heade and max-width: 100.I also started adding tab elements, but they’re not finished yet — they still need proper styling and behaviour.Next, I want to fix the media query nesting, test the responsive layout with the device toolbar, and add a small hover effect on the project images. Once everything feels stable, I’ll call this v1 done 🎉

I mixed up compound selectors a few times — like writing #about, #projects h2 when I actually meant #about h2, #projects h2. I also accidentally left most of my mobile‑only CSS rules outside the media query’s closing brace, which made those styles apply to every screen size instead of just phones. I ran into a few small typos too (like heade instead of header, missing semicolons, and max-width: 100 instead of 100%). I also started adding tab-style navigation elements, but I’m not done with them yet — they still need proper styling and behavior. Next, I need to fix the media query nesting so the mobile-only styles actually stay inside the mobile block, then test the responsive layout properly using the browser’s device toolbar. After that, I want to add a hover effect (maybe a small zoom or glow) on the project images for a bit more polish. Once the responsive design feels solid, I’ll call this v1 complete 🎉

I began working on responsive design today. I added a @media (max-width: 600px) query and started adjusting the quote’s font size for smaller screens — it’s not finished yet, but it’s a start. While going through my file, I realised a bunch of the mobile‑only styles accidentally ended up outside the media query’s closing brace at line 67.

I added proper styling for my quote section, fixed the spacing, and made the text look more readable. I also added a clean line-height to my list in the About section so it doesn’t look cramped anymore. Then I updated the Projects section so my Hackpad screenshots have consistent sizing, margins, and a soft shadow to make them stand out.While doing this, I realized I had accidentally deleted my in the HTML earlier, so I rebuilt it and made sure it matched the CSS selector. After fixing the typos and reconnecting everything, the page finally looks structured and smooth. Next: I want to finish styling the header, add animations to the nav links, and keep improving the aesthetic of the whole site.

Today I spent time cleaning up my website and fixing some mistakes that were breaking parts of my layout. I started by going through my HTML and found a few small typos that were causing issues — things like tytle instead of title, herf instead of href, and scr instead of src. After correcting those, my images finally started showing up properly.I also redid my entire CSS file from scratch. I reorganized everything, added an animated gradient background, and made sure the header matched the animation so the whole site feels connected. I added glass‑effect sections using backdrop-filter, fixed my color palette, and cleaned up the spacing so everything looks smoother.My project folder is now properly structured with an images folder containing all my Hackpad screenshots, and my style.css file is finally readable and not chaotic. Seeing the animated background working in VS Code made me feel like the site is actually coming together.Next: I want to keep improving the aesthetic, maybe add glowing text or animated nav links, and continue documenting my Hackpad build with more screenshots.

Today I worked on my personal website again and rewrote my About and Projects sections from scratch. I fixed a bunch of small mistakes, including spelling errors, messy tags, and sections that were in the wrong place. I’m trying to make my layout cleaner and more readable as I learn HTML and CSS.I added a proper About Me section with a short intro and a small list of personal details. I also started the Projects section and wrote a bit about my Hackpad build so I can add progress images later.School has been taking up most of my time, so I haven’t been able to do as much Hack Club stuff recently, but I’m still trying to make progress whenever I get a moment.I’m open to any criticism or help — if anyone sees something I can improve, feel free to tell me. I’m still learning through trial and error and trying to build my own style as I go.Next: finish styling these sections and keep improving the structure of the page.

Today I went back into my website project and re‑did my HTML sections from scratch. I realised some of my tags were out of place and the structure wasn’t making sense, so I restarted the layout to make it cleaner. I added my quote section again, fixed my header/nav placement, and tried to make the page flow better before I keep building more parts.I haven’t been able to do much Hack Club stuff this week because of school — homework and lessons have been draining me — but I’m still trying to make progress whenever I get a bit of time.I’m open to any criticism or help if anyone sees something I can improve. I’m still learning HTML/CSS slowly, so feedback actually helps me understand things better.Next step: finish the About section and start organising my CSS properly.

For the past few days I’ve been learning how to build a website. I’m still new to coding but I’m slowly understanding things and fixing my mistakes. it’s actually fun even though it takes time.