All solutions

All feedback is welcome, thanks!!

I welcome all feedback for this project. This was my first project using all three HTML, CSS and JS in one component. I also added some accessibility features but would like feedback on that as well.

Thanks!

I would love people to take a hard look at my code and give me as much feedback as possible. :) This one gave me some trouble, and I tried a few things for the first time. Particular items I would especially love feedback on are:

1. My usage of the BEM naming system
2. My attempt at making my HTML more accessible
3. How I can improve the responsiveness and overall style of the hero images. I initially used HTML image elements but switched to background images in CSS since I couldn't get the HTML elements version to work.
4. The overall responsiveness of the page. I used the Chrome developer tools to design it using mobile, tablet and desktop views, but it looks awkward when resizing the page between those points. Also, I don't like how the hero image is also re-sizing within the div; I feel like it should be one size, then at the breakpoint change to the next hero image.
5. I never got the shading on the gradient to work properly.
6. The way I used CSS variables for colors and font styling. This is the first time I actually used Figma so I used the actual pixel sizes instead of having a base size and using rems to size different elements.

Any and all feedback is welcome, including for anything I didn't mention. Thanks!

I have not been able to figure out how to overlay the view icon onto the main picture while having the view icon centered on top as well. Any feedback on this would be highly appreciated!

I was a little confused by the desktop vs. mobile because it seemed to look similar to me when using the device view in the Chrome DevTools, so I didn't write any media queries to change the design based on the screen size. However, I could be misinterpreting the designs, so feel free to share thoughts on that.

Also, any general feedback on my HTML/CSS code and any best practice recommendations are very welcome.

Thanks!

1. A had challenges getting the image and container in the Desktop version to adjust together. I used a simple div container to contain the image and that seemed to work better, but the transition between mobile and desktop is rough. I would love feedback on my CSS and any suggestions, thanks!

2. What are some best practices for component class names? Is it better to name them based on functionality or what they are? For example, for the "Add to Cart' button, is it better to name it something like "buy", "button", or something else? I'm mainly concerned when this is at scale, and there are several buttons/pages. Thanks!

I used a mix of units, between "em" and "px". What are some best practices when it comes to using "px" as opposed to more relative units such as "em" and "rem", especially when dealing with sizing in margins/padding?

Thanks!