I am revising my frontend skills and this is the first project on Front-End Mentor that I have attempted. I have tried to recreate the design using barebone tools - HTML, CSS and JS.
Please let me know if I can improve on any areas. I think I could have been more smooth while ensuring the page's responsiveness. If anyone thinks the same, please feel free to write about it or any other demerit that you can see such that I can improve my front end skills.
First and foremost great job! Everything looks really clean and well thought out!
Took a brief look at your code too and it looks clean.
As far as improvements go a few things I noticed. It's always the little details that can make the final product that much better.
the spacing on the right where the image is would look better if it matched the spacing on the top and bottom of the image
make everything just a little bit larger, particularly the font size. It looks like you took it all down to 0.8rem computed to 12.8px. This is pretty small, I'd move it all up to 16px or 1rem in your case. This will help with visibility and reduce eye strain
on both buttons I'd add a small 200ms or 300ms transition to give it more a natural feel when hovering over a button.
on the submission page, there is more white space on the right than there is on the left. Even those out and you'll be chilling.
Again great job! I think those changes will take it to another level of perfection! Have a great day!
Shane! Bro this is good! Well done.
I love looking at ones like yours because there isn't much to change which means you have a pretty good attention to detail. Which is really important in front end work.
Couple easy changes that I think could add to what's already there
add a 200-300ms transition when you hover over the add to cart button so that the color change isn't as instant and feels more natural.
Change the font size for the "Add to Cart" text the same size at the description text so 1rem I believe.
Hey Karam! Nice work. I can tell you spent a lot of time to make sure that things looked good at both the 1440 screen size and the 375 screen size. I noticed that there was't much time spent on the in between screen sizes reducing how responsive of a landing page it really is.
Something I'd say that could be an area of improvement would be the use of Flexbox and/or Grid. There are so wonderful CSS properties in those tools that make spacing and centering html element really easy. When I looked closer at your code you used a lot of margins, gaps and padding to make it look visually correct but in the end was probably tedious to do and doesn't help with the need for responsiveness.
Hope this is helpful as you continue to grow as a frontend developer!
Hey! Overall well done.
You did a good job paying attention to how things look at the two specified screen sizes (1440 & 375). Where that is a negative is at screen sizes beyond 1440 and in-between the two there are noticeable design issues. At your media queries it seems that you address some design issues but not all of them. Items go off center and the entire design isn't consistent across the screen.
Ultimately I think some more attention to your media queries would take this to the next level.
Hope this is helpful!
