The assignment was to create a news site using flexbox and css-grid and also have it be responsive and look good on all types of devices (phone, tablet and desktop).
I started by creating the over all layout placing out empty divs in different colors. I also decided to create a separate div for the bigger news and another for the smaller news. I also decided to have another section for the header. I don't know if this only made is more advanced, but i figured the approach would be good do be able to have it as flexible as possible. I also started with making it look good on small screens and the adapted the css using media-queries to make it adjust nicely to tablets and dekstops. To do that I made the divs change color when passing the breakpoints. That way i could clearly see how the page behaved. When it behaved like i wanted it to a started making the colors,containers, links and headers look good aestheticly.
I wanted to practice both css-grid and flexbox so therefore I decided to use both techniques. If I had more time I would add time-stamps to all news and also figure out why the bigger news divs won't remain the same size when minimizing the screen from full screen to smaller size.
https://dainty-lily-7cc7b2.netlify.app/
Enjoy :)