This was the pre-course project for Technigo's spring 2024 web development bootcamp. The project brief was to create a responsive news site, using HTML and CSS. It should contain a logo, a navbar, a big news section and a grid of cards with other news.
I started by sketching out how the site would look for mobile, tablet, and desktop. Then, I designed a logo and a title in Figma. Two days into the project, I changed the concept, finding one that conceptually worked better. That became "The Daily Sleep – Sleepy News when you can't sleep."
I started with the mobile layout, using HTML and CSS; flexbox, grid, Google Fonts, and so on. Along the way, I explored many dead-ends and discovered a lot of useful information that helped me to progress. One notable thing I learned was the aspect ratio when I tried to adjust my images in the news feed, which were distorted. I searched for code snippets demonstrating what I wanted to achieve, mainly on W3Schools, CSS Tricks, MDN, and Stack Overflow. I got to know the Terminal and used it, for example when launching my HTTP server. I also looked at other sites, finding inspiration by inspecting their code. I discovered that I saved a lot of time and headaches by changing the code in Inspect Element BEFORE writing the code in VS Code. I also used Chat GPT when I needed inspiration for news content for my site.
Most importantly, I made extensive use of Technigo's Pre Course material, which had a clear checklist of what the site needed to include. I went back and read articles and watched videos, especially on media queries, flexbox and grid.
I used Chrome’s lighthouse audits to check my site’s performance and accessibility. It turned out my images were too big, so I resized them to make my site load faster. I also added alt text and my lighthouse score went from 62 to 90.
If I had more time, I would have added more pages. I would also have tried to incorporate more interactive elements, perhaps even started experimenting with Javascript, for example, creating a hamburger menu!