sofie212 / project-news-site Goto Github PK

This is a project made when attending Technigo Bootcamp. This project was to learn about layout with Flexbox and creating responsive webpages.

This week’s project is to create a classic magazine or newspaper site. The site should contain a header with a 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.

I used VS-code to created the html code (dislpay desktop) and made sure to add code to make the webpage responsive. In order to create the design I wanted, I stucturted the layout using CSS flex-box-model by dividing the code into boxes acting as parents and children. Added the responsive styling and layout for mobile and tablet version. To get a good overview I used LiveServer and DevTools to diagnos problems and coding errors and to make improvements. I also added some animation at the bottom om the webpage.

If I had more time I would have elaborated more with the animation-part at teh bottom of the page and would have added an effect chancing images when hoovering over the big news picture.