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 using SASS / SCSS

@ClementBartholome

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


This project was my first time using SASS / SCSS. Any feedback on it would be welcome !

Community feedback

Panji 2,110

@pperdana

Posted

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <main> tag as semantic HTML in code

  • The <main> tag is a semantic HTML element that is used to define the main content of a web page.

  • The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main>
  <div class='container'>
    <h1>Article Title</h1>
    <p>Article content goes here...</p>
    .......................
  </div>
</main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖

Marked as helpful

1

@dimar-hanung

Posted

Hi.. 👋, Congratulations on completing the challenge 🎉 .

I have some interest and feedback with your code

That i like:

  1. I appreciate the similarity of your results with the design, a bit different in width but still good
  2. html is pretty good, not too nested 👍
  3. SCSS Naming is also good, represent what is it for, like <div class="prices"> for prices section
  4. SCSS folder well structured too, i like it, but my opinion you can build scss into assets to, example to /assets/style.css

My Feedback:

  • Maybe you can set width:50% to > md screen in .left , to make sure width is still 50% in any browser, because sometime each browser have different characteristic
  • I suggest you use html semantic convention, for example <div class="container"> to <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here
  • Maybe you can use tools like prettier to format your code to be more beautiful ( TIP: set prettier configuration to format on save, make it easier )

anyways overall is good, nice solution, hope it's helpful 🙌

Marked as helpful

1

@ClementBartholome

Posted

Thank you for your helpful feedback and for the tip about Prettier !

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