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

Pure HTML+CSS

@alexsanderBDS

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@rostyslav-nazarenko

Posted

Hi, Alexsander!

  • HTML
    • wrap your code in main tags or change div class="container" to main="container
    • I personally wouldn't exclude P E R F U M E text from HTML as it provides additional information to people who use screen readers, but that is definitely a cool example of using ::before pseudo-selector 👍
    • use h1 instead of h2
    • I don't know a lot about accessibility but use del or s for the old price, plus some read-only text to provide more information
    • use the `picture`` element for providing two images that will change if the viewport gets to a certain width. Read this article it has great examples for different use cases
  • CSS
    • it is not recommended to set font-size: 62.5%; read about it here
    • use min-height: 100vh on the body element to allow scrolling, if you try to resize the window you will see that
    • I wouldn't separate CSS in two different files only if you use media queries in the head element so there wouldn't be additional calls to the server

Keep it up! Can wait for your next solutions!

Marked as helpful

1

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