Product preview card using Sass CSS preprocessor and media queries

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

In this project, I have learned the basics of Sass and I was able to implement it in the project. With Sass, I was able to create CSS variables and nest CSS selectors to target specific html elements. It made my CSS code shorter than using CSS only.

I think I need to dig deeper into Sass by reading the entire documentation and hopefully, be able to write CSS codes with Sass preprocessor in accordance to the best practices.

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

This project recommended me to use a CSS preprocessor and I chose to use Sass. I wasn't really familiar with using Sass but with a little bit of reading its documentation, I was able to apply it to this project.

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

I wanted to know if my SCSS code follows the best practices. Is my nesting of CSS selectors just right or too deep? Did I use media queries and pseudo-classes correctly in SCSS? What else I can improve on the code?

I wanted to know how to use icons properly in HTML. How should I import it in my HTML because instead of importing it using the img element, I just copy pasted the SVG markup to the html just like this:

          
          Add to Cart
        

I didn't use the img tag because I wasn't able to fix the size of the icon using it. It appeared bigger using the img tag but when I use the svg markup with the width and height already specified, it fits correctly in the button.