Skip to content
Submitted 10 months ago

HTML,CSS,and text editor VSCODE

Rafi Rachmawan•210
@rafirachmawan
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

learn more about responsive and improve my knowledge in the frontend field

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

the challenges I face are a little more difficult on the layout of text images and responsiveness

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

in terms of distance and layout because I didn't get the figma design

Code

Please log in to post a comment

Log in

Community feedback

  • Karen Robertson•190
    @indigorose

    This is a really nice solution to this challenge.

    The HTML is easy to read, however for the next challenge try to extend your use of semantics, such <main> or <section> rather than <div>.

    It helps us to see the flow of the page better and improve accessibility.

    Most use the cheat sheet from the Mozilla MDN site MDN Web Docs Cheat Sheet.

    For the text responsiveness, the clamp() css function has been helpful with sizing responsive text MDN description.

    There is also letter-spacing and line-height in css that will also help with the text design requirements.

    Even without the Figma files, the site is still impressive and meets the responsive requirements.

    Hope to see your other solutions soon.

    Marked as helpful
  • P
    Jose•160
    @josenegrete123

    Great work! For your @media section of the CSS, you don't need to change the font-size around because per the figma documents, they are all the same font-size, from mobile-version to desktop. Also the h1 and the first span should be in a different font. But that was given in the style-guide. The line-height in the h1 could also be change to 0.

    Marked as helpful

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