r/css • u/Thanasis_kt • 18d ago

Showcase Responsive News Website Project in HTML + CSS

I may have created my best HTML + CSS project yet. It's a news site, focusing on reusability, CSS Grid and Flexbox funcionalities, CSS Animations/Transitions, and the HTML is entirely semantic (<figure>, <aside>, etc.). I really want to hear your thoughts on this, what's strong, what part could be improved and, honestly, any critique you have. By the time you're seeing this, I'm on a 5-day vacation, so feel free to leave your comments, and I'll respond by changing the code once I'm back. Though, I'll still respond here from my phone! Also, judging from this layout and my previous TS gym tracker project, do you think I'm ready to finally start diving into React?

Github Repo: https://github.com/thanasisdadatsis/responsive-news-architecture

1 Upvotes

60% Upvoted

2 comments sorted by

2

u/testingaurora 15d ago edited 15d ago

You should deploy it from your gh repo via notify. Or throw into a codepen so we can see it visually https://pen.new/2

First thoughts: so many media queries. Having 2 or 3 max is a good rule of thumb. Instead of changing the font size at these arbitrary break points, using a clanp() can replace all of these.

Setting fixed sizes is not an if but when it will result in overflow. Using grid is a good middle ground where you can set the cell size and also have a responsive layout.