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

blog-preview-card

P

@ElviCanelaH

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Lo haré en display grip

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

todo se me movia

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

Responsive

Community feedback

@DanCodeCraft

Posted

Hey @ElviCanelaH, good job overall.

I can point out a few things you could consider working on:

Design:

  • Take care of the hierarchy of the elements (font color, weight, and size matter when you want to direct the user through the element being displayed.
  • The learning button should not have a border, and the letter is too thick for such a small element. Imagine this being a side element, not a whole page.
  • The shadow on the card when hovering it, is missing.
  • You could use the transition effect to make the experience a bit more smooth.
  • The project does not fit a cellphone screen.
  • Minor, but important: you're missing spaces in your footer.

Code:

  • Use a CSS reset when you start a project, so your page is a good experience across different browsers.
  • You do not need to, and should not set a height and width on HTML and body. Save that for specific elements, if ever needed to.
  • Learn about different units for CSS. The font, for example, should be set in rem, never in pixels.
  • Your CSS file is repeating itself twice within the same file.

Keep up the good work!

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