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

Responsive Card Using HTML and CSS

@EduardoSaavedraQ

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


This was the second challenge I tried from frontendmentor.io

This time I was doubtful about how I built the html. I've tried to make it as semantic as possible.

Community feedback

@mikestopcontinues

Posted

Nice work. Here's some suggestions:

  1. Designers are picky. Pay closer attention to the font-weight, line-height, border-radius, and so on. They should be nearly pixel-perfect to the design before you bring it to them for feedback.

  2. Your design becomes responsive at the wrong time. In the real world, you only want elements to shrink when they must shrink. Similarly, you don't really want them to shrink to another specific size, because your user's screen can be any size and there are often many elements on the screen at once that interact in different ways. Instead, prioritize max-width and drop width or min-width wherever possible. This will make your element naturally elastic. Do it well, and this element won't need any media queries at all to shrink as the browser window shrinks. Give it a try!

  3. Go back to the design spec for the active state. Something other than the font-color changes. (Hint: It's not the text at all!)

  4. Lastly, don't include your name or any additional elements in your results. Attribution can go in your git repo and your name already appears on this page.

Anyway, your work is pretty darn good. Keep going!

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