Not a major personal project, only tutorial purposes project test, no framework task
(old project, it's nice it's still here)
How I did the process?
1.Measuring the product-preview-card-component
-What I did here is I did download the design and used an online platform to measure the centimeter by cropping and getting it's width and height using photopea.com, and then I converted centimeter to rem, because rem is always recommended to use to modify the size of html element of your choice instead of using "px"
width's rem: 50 height's rem: 37
2.Measuring the image-product-desktop image and putting it inside the box
-Same procedure to number 1
width: 25 rem; height: 37 rem;
- I used a border temporarily 1px black in id "product-preview-card-component-main" for just a guide while resizing and measuring the elements that will be contained inside of it.
4.Picking the right color according to design given
- I used some website to upload your image and hover to whatever part of image you want to provide the color hex you decide
5.About the shopping cart icon
-
The design I implement to shopping cart icon to my webpage looks good and it's similar to the design provided in front end mentor challenge but it's not as accurate as you can see, I think I might figure that thing out soon.
-
I did get the template for making that using this website as a source: credit: https://www.w3schools.com/icons/tryit.asp?filename=tryicons_fa-shopping-cart
-
I learned an html tag that is new to me it's called "strike" it's useful for a part of e-commerce websites like I am making right now.
-
I did some css responsive layout for mobile, mobile screen width should be at 375px to make it work
All in all for me this is a very challenging front end mentor challenge but it was fun coding and looking forward for more