Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

E-Commerce-Product-Page Built with HTML, CSS and ReactJS

#react#semantic-ui
Emmanuel Oloke• 320

@EmmanuelOloke

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I particularly chose this challenge to push my skills to the edge, I used the project to learn ReactJS, after watching numerous tutorials of course. It seemed like a small project, but I really learned a lot from it.

I decided not to use any UI library for styling as I wanted to test my CSS skills, but this decision led to me not being able to implement the mobile view menu, and image navigation for now. I will definitely make an update soon enough once I've learned even more ways to get it done.

One particular question I have for the community is, are there other ways to style SVG icons without directly manipulating them in the HTML code. Like changing the size (width and height), colour and adding state behaviours. I think having to write them directly into the HTML is a bit messy and if anyone has a clean and simple way to do this, I'm open to learning.

Over 10,000 people have started this challenge, and I'm glad I'm part of the 500+ people that have completed it.

As always, any other feedback will be really appreciated, Thanks.

Community feedback

Adrian• 280

@Adrian397

Posted

To manipulate svgs through CSS you can use e.g. fill, stroke-width, stroke (css properties). But before that i believe you have to delete them from html code (if there are any) to prioritize them in your's CSS code.

1

Emmanuel Oloke• 320

@EmmanuelOloke

Posted

@Adrian397 Yeah, I had to remove the fill attribute from the SVG and added it via CSS for it to work, then manipulated the size with viewBox attribute also. Just looking for a much cleaner way to handle the whole thing. I guess I'll continue searching.

Thanks for the comment.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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