This site was the first individual assignment during the Technigo Bootcamp fall 2020. We were asked to make a news-site with a focus on responsiveness, layout with columns and rows, and navbar.
I picked Climate Change as a theme and have a focus on one big news articles in the top (changing layout depending on screen resolution) and small cards with smaller articles underneath, tagged with a specific category.
I started by drawing up a quick mockup and then built it mobile-first, mostly using flexbox for layout and semantic HMTL for structure. I added a few CSS animations to try it out but wanted to keep them simple to go with the rest of the design and not be disturbing for the user. I tried to keep the design serious considering the topic and looked at other news-sites for inspiration yet with a touch of the specific topic, which I used colors and big images to emphasize.
If I had more time I would make the smaller news to always have the same size as each other, no matter the content, and maybe add an extra media query to differentiate smaller and bigger desktop resolutions.
Here you can see the project live via Netlify: https://cornelia-news-site.netlify.app/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent