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

Product preview card

@djacsons

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I was unsure of how to create the mobile view, I think I sort of got it right but some of the placements were off. Also, I couldn't get the correct font. Flexbox was also a problem for me. I kinda got it to work but I have to look at more examples.

Community feedback

@lpzisaias

Posted

You did a good job despite the drawbacks you mention! Some recommendations:

  • It is good practice to start with mobile views first.
  • With flexbox, put in the body tag, min-height: 100vh; to center the elements.
  • To use Google fonts, go to the file link and first select the font and its weight, once selected (click on the "+" button to select) copy the generated code in the header of your html file, example:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet">

And below it generates the css code to use: body{ font-family: 'Roboto', sans-serif; }

  • Finally You can try flex-direction: column and row for mobile and desktop view

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