Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Css , BootStrap

Elzehiri 30

@Mohamed-Elzehiri

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Francisco 140

@antoniomontoia

Posted

Hey Elzehiri!

You achieved the objectives for the most part, great job! I like how you added a navbar and tried to go the extra mile.

However, there are a few adjustments to be made. Regarding your HTML code, you are missing a few elements:

The <header> tag is missing a closing angle bracket (>). It should be <header>. Consider wrapping the <nav> element inside the <header> tag for better semantic structure.

Ensure that the alt attributes for images are descriptive. For example, instead of just "card," you might use something like "Illustration of a learning card" for the main image.

The <h4> tag for should ideally be a <h1> or <h2> depending on the hierarchy of your headings. You also put a <h5> before a <h4>, which should ideally be the opposite.

I recommend taking a bit more time to thoroughly review the challenge requirements, style guide, and design files: the Figma file can prove itself quite useful.

It looks like there were some discrepancies with the font requirements, including font-weight, font-color, and font-size, and I also I noticed that responsiveness was not implemented in the design. The hover state for interactive elements is currently missing.

While you included a <nav> element and Bootstrap, these were not required for this challenge. It might be beneficial to focus on the core requirements first before adding additional features.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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