In this project I've built a news site about a dear friend of mine; Alva (dog).

The main task was to build a news site with a responsive design containing one section with one big article and a grid section with a few other articles. The tools/techniques used for this project was HTML, CSS (general styling, flexbox, responsive design) and Javascript.

First I did a general sketch on paper of how I wanted the layout to look like on different devices. After that I started coding and began with the general layout for the mobile device first. With the basic HTML-structure in place I started adding styling and content, which I continuously adjusted throughout the whole project with the help of the dev tools in Chrome. In this process I also added the media query to be able to make the site responsive and look different on the devices mobile, tablet and desktop.

If I had more time I would have tried to use CSS-grid instead of flexbox to solve the structure of the news articles. Using CSS-grid for the section with other news might have made the responsive design easier to adjust when considering the different desktop sizes, but my solution works OK in my opinion. Regarding my menu animation in mobile view, I would have maybe changed the animation to come from the top instead of right. One last thing is that I could have added more css styling to the main news article in the mobile view in such a way to make it stand out more in relation to the other news articles.

To view the site I've created, check it out here: https://wonderful-wozniak-f94705.netlify.app/