My task was to create a one page responsive news site containing a navigation bar with a logo in it, one large feature article and a few more smaller articles as well. The smaller articles had to be displayed the following way: one column on mobile, two on tablet, and four on desktop.

I began by using Balsamic to create wireframes, which I then printed and planned out the elements and their class names on. Once I had that done, I went on to writing the basic HTML structure and CSS. After that I went on to turning some elements into flex-boxes and CSS grids. The last thing was adding all the content and fine tuning the styling such as font sizes and element spacing.

If I had more time, I would look into how to write the code is such a way that it required less media queries but still had the same (or higher) level of responsiveness.

• HTML

• CSS

• Flexbox

• CSS Grid

• Prettier for code linting

• Netlify for deployment

You can find a live version of the project here:

https://catnews.netlify.app/