The aim was to start practicing all things CSS such as Flexbox and Grid, while also getting familiar with the process of pushing and committing to GitHub. We worked individually on this project in the weeks before the official start of the bootcamp.
Your task is to create a classic magazine or newspaper site. The site should contain a header with the name of the site, a logo and a navbar. This should also change depending on if you visit the site from a mobile, tablet or desktop. Further, the site should have a big news section and a grid of cards with other news. On desktop-sized screens, there should be four cards in a row, two in a row on tablets and on mobile, there should just be one card on each row.
We suggest that you start thinking about what your page will look like. Have a look at the design sketch below and create your own one, in a jamboard, a figjam or simply on paper. Remember that you can always go back and change your sketch along the way.
What you need to do
✓ Style your page.
✓ Use CSS Grid and Flexbox to layout the page.
✓ Create a responsive design with the following views; Desktop 4 columns, tablet 2 columns, mobile 1 column.
✓ The site should have a header, a main news article, a grid of news articles.
✓ Play around with hover effects, i.e. change colors, add or remove borders or flip the image upside down.