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 component

@luisgustavogorniak

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 challenges did you encounter, and how did you overcome them?

I'm having trouble adjusting the font and creating media query for mobile view

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

adjusting the font and creating media query for mobile view

Community feedback

@KingAndre13

Posted

Hello there! Well your solution has positive points such as the positioning of the card in relation to the original design, the right size of the fonts, the use of the :root pseudo-class to organize the colors and the use of flexbox( which i am still learning about) but, there are some points that can be improved. You said that you had difficulty adapting the size to mobile devices using media-queries, well this can be improved with a technique that I used in my project, it is called mobile-first, in short it is a technique that consists of starting with the mobile version and then moving on to more other versions (research about it). Another point complements the other, your card was a little bigger than the proposed design. Third point, you forgot to put :hover on the h1 so that when the mouse passes over the title it changes color and changes the cursor to pointer and the last point and the original design had a 1px border around the card. but it's ok, you showed me with your code that you can use flexbox to align the elements within the card, that's really cool. well that's it, keep learning and never give up.

Marked as helpful

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