Blog preview card solution - using flexbox

Community feedback

• 

  Huy Phan•2,300

  @huyphan2210Posted 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 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,300

  @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