Skip to content
Submitted over 2 years ago

More CSS Practice and Yay for Sass

sass/scss
P
madosy•180
@madosy
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

More CSS practice!

I tried using sass. It was pretty easy to learn and to organize. I really liked that you can change the value of variables using darken() lighten(). Will definitely use for future projects.

Code

Please log in to post a comment

Log in

Community feedback

  • C H A R A N 🎯•2,670
    @0xabdul

    Hello Developer well congratulations on Completing the Product preview card component

    • A Some suggestions for improve your code
    • In Html 📃 :
    • LANDMARK 🚀
    • The main landmark role is used to indicate the primary content of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the main function of an application.
    • The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
    • To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
    • Note This Elements are don't sikp
    • semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..
    • non- semantic elements : <div> , <span> ect ...
    • for easy way to clear the Accessibility reports using non semantic elements Ex :
    <body>
<div class="container" role="main">
//Html code here
</div>
</body>
    • Or
    • using semantic elements
    • Ex :
    <header>
should be put heading or logo📸
</header>
<nav>
//Links here
</nav>
<main>
Main of the contents 📃
</main>
<footer>
©copy right  here📍
</footer>
    • I Hope you find the solution and it's useful comment for you your Product preview card component project is great 😊 Happy Coding Developer

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