The project involves creating a responsive news or magazine website. The site must include a header with the site's name, logo, and a navbar that adapts to mobile, tablet, and desktop views.
The layout should feature a main news section and a grid of news cards, which adjusts the number of cards per row based on screen size: four on desktop, two on tablets, and one on mobile. The project requires using CSS Grid and Flexbox for layout, adhering to responsive design principles, and deploying the final site on Netlify.
I started out by searching for some inspiration for the layout. I then sketched out a rough idea in Figma on how I wanted it to look. I chose my theme based on the fact that birds are pretty and that finding good, free images of them is quite easy.
My next step was to plan out my HTML structure and what decide which parts were going to be CSS Grid and Flexbox. I decided to try creating a standard 12 column grid using CSS Grid and using Flexbox for different elements within my grid.
I used ChatGPT to create topics for me and also preambles for each article. I found images on Unsplash.
If I would have more time I would look into the sizing of the cards on mobile. The flamingo story got very tall on mobile due to the image size.