Skip to content
Submitted about 2 months ago

Blog preview card solution - using flexbox

ayx•60
@ayx234
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 challenges did you encounter, and how did you overcome them?

The article's image stretches vertically on the mobile version of the design. I searched for a dynamic solution and was introduced to CSS aspect-ratio.

Github didn't initially show the images or the correct font because I used src="/folder-name.../" Github needs a dot before the forward slash for relative paths src="./folder-name/..."

What specific areas of your project would you like help with?
  • How do I make my HTML more semantic and accessible ?
  • How can I improve my CSS ?

Community feedback

  • Huy Phan•2,060
    @huyphan2210Posted about 2 months ago

    Hi, @ayx234

    I took a look at your solution and have some thoughts:

    • Semantic HTML: I think your .card could be an article element, or you could make the card itself the main element instead of using main as a wrapper. Also, the .attribute section might work better as a footer element below the main rather than a div inside it.
    • CSS: You've done a great job styling the card! My recommendation would be to reorganize your CSS file. Consider placing @font-face at the beginning and moving all @media queries to the end. I also noticed that you're styling the body in two places, so merging those would improve clarity.

    Hope this helps!

    Marked as helpful
    1
    ayx•60
    @ayx234Posted about 2 months ago

    Hello @huyphan2210,

    Thank you for your feedback!

    • I updated my HTML file with your semantic suggestions.
    • I have a CSS reset section at the beginning of my CSS file. I didn't want to mix that with my CSS and that's why there are two @media queries and two body selectors. Isn't it better to make a reset distinguishable from a project's specific styles?

    Best regards

    1
    Huy Phan•2,060
    @huyphan2210Posted about 2 months ago

    Hi @ayx234,

    I see what you're aiming for—you're trying to separate the reset styles from the custom styles within the same style.css file.

    That said, why not simplify things by creating two separate files? You could have reset-style.css for the reset section and style.css for your specific styles.

    This approach could reduce the number of comments in your original style.css. Personally, I don't rely on comments much, as I believe names (whether for files, functions, or variables) should be clear and self-explanatory. Comments should only be necessary when something is complex. And if it’s too complex, wouldn’t it be better to break it down into simpler, more manageable parts?

    Hope this helps!

    Marked as helpful
    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