Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 8 months ago

Blog preview card solution

Ricardo Alberto Carrero Bator•160
@rc-0105
A solution to the Blog preview card challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

Im proud that i could center correctly the main container, also doing the hover and the box shadows make me be more aware of the things that could be done.

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

I didnt know how to make the main container flex work the right way, all the content where overflowing so i had to see some tutorials to get in the mood.

What specific areas of your project would you like help with?

I am new to this kind of development so if you have comments ill be greatfull to know.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • xNyfPtx•1,260
    @xNyfPtx
    Posted 8 months ago

    CSS

    1. Use a css reset. You shouldnt really be manually applying box-sizing: border-box on each element. I reccomend using Josh Comeau's or Andy Bell's css reset for this.
    2. Never ever set font-sizes in rem. See why
    3. Consider using the rem unit in place of the px unit. The rem unit is generally better since it scales with the user's set font-size in the browser's setting. You would generally use px for decoration like outlines, borders, shadows, filters and etc. There's more to it but I won't dive more deeper than that since the effect is very minimal.
    4. Never ever set fixed-widths. Fixed-widths are like width: 365px. They arent responsive most of the time and you should really be using max-width instead. The only exceptions I see are small icons and profile pictures.
    5. No need for the .blog-card wrapper, just apply the styles directly on the body element.
    6. No need for the sections either, just use divs instead. It just adds more semantic noise. You would typically use sections for larger stuff of a page aswell
    7. Wrap the .blog-card-link class inside a <h2>. You could also wrap it inside an h1 but it a real site, there would be an h1 already here.
    8. No need for the alt text on the profile picture image, its decorational anyways.
    9. Replace the .attribution div with a <footer> tag instead. About the footer tag

    Update your code and I will continue with more feedback later.

    Marked as helpful

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub