Skip to content
Submitted about 1 month ago

Responsive Blog preview card with Flexbox

nodegreecode•100
@nodegreecode
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I've built the component with div ,p ,h2 and a only, but fortunately recognized, that it was an invalid HTML structure for a blog card. The news feed on the home page of Firefox helped me a lot with it. Next time, I would try to find a better implementation of the blog card title, as my solution is far a way from the original one in terms of size and probably semantic as well. So basically, there are different ways of building and structuring a blog card with HTML and I would probably build it completely differently.

What challenges did you encounter, and how did you overcome them?

The most challenging was to implement a fluent font-size without media-queries, though there are actually a lot of techniques to do it. My problem was the wrong embedded svg graphic, which didn't let my component change fluently with the viewport size. For my component, I've chosen the clamp() function, and I am happy with that. Less challenging was adding fonts, I had actually done this in an HTML,CSS course, but I should search first to refresh my knowledge.

Community feedback

  • Huy Phan•2,300
    @huyphan2210Posted about 1 month ago

    Hi, @nodegreecode

    I checked out your solution and I have some thoughts:

    • Your current HTML structure is definitely more semantic compared to just using div, p, h2, and a for building a blog card. That said, I don't think using those elements alone is necessarily wrong. I’m curious about the news you mentioned—what was it that led you to think this approach was invalid?
    • You pointed out that "the wrong embedded svg graphic, which didn't let my component change fluently with the viewport size." (I assume you meant responsiveness). SVGs are designed to be scalable by nature. Could you explain what specific issue you encountered with it.
    • Nice work using clamp instead of media queries, but I’d suggest applying it to specific elements rather than globally on the body. Since your HTML includes elements like h2 and p, they should have individual font-size values rather than being uniformly sized.
    • I think you could push your HTML's semantics further. However, ask yourself first: why do we aim for more semantic HTML? What purpose does it serve? While external sources like the news you mentioned can be informative, developing your own reasoning will make you a stronger developer.

    Hope this helps!

    Marked as helpful
    1
    nodegreecode•100
    @nodegreecodePosted about 1 month ago

    Hi, @huyphan2210

    • Unfortunately I cannot load a screenshot of that feed, which I mentioned, but basically it was build with article, header, p and a. This fact forced me to study resources about how to structure the typical blog card with HTML. And I found out that the blog card should be built like I built it at the end.
    • Yes, this is actually embarrassingly, but I just pasted the content of the svg file in the HTML directly, wrapping it just with a div. That's why the whole layout didn't change itself while resizing.
    • This was my first thought as well, but however I followed the DRY principal, what probably not applicable here. Thank you for empowering me, I already adjusted CSS file.
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord