@sorin7345Submitted over 1 year ago
Lots of thanks to anyone who might be taking a bit amount of time to review or to leave any precious piece of advice for this enthusiastic beginner. :)
And as always, big thumbs up for the community! :D
Ayoub Ahabchane
@ayouchaneAll comments
- @ayouchanePosted over 1 year ago
Hey Sorin, Congrats on finishing the challenge!
Regarding the positioning of your elements, opting for a Flex or Grid display algorithm can give you more control over the positioning of your elements. I strongly urge you to start looking into CSS Flex first and then CSS Grid. These two come with CSS out of the box.
As for the icons, it's going to be an svg element that you get from somewhere like Heroicons, Font Awesome or Google Icons.
I hope this helps.
Marked as helpful0 - @dannxvcSubmitted over 2 years ago
Hi! I just developed this interactive rating component with vanilla JavaScript, and I learnt a lot about accessibility, I read some articles related to this so I decided to use radio buttons for the options and I used css without losing accessibility. This article helped me through this, and I hope it can help more people as well.
I appreciate any feedback about my code. Thank you.
@ayouchanePosted over 2 years agoI like that you chose to mark it up it as a form. That makes a lot of sense actually. It was my initial intention, but then I gave up on it and went for a list instead because I wasn't sure how much time the trial and error process is gonna take me had I went down that path, especially when it comes to overriding the styling of native browser element. But Now I can look at the implementation of someone who actually took the time to do it so thank you! And you got the design on lock too, awesome work!
1 - @Olanrewaju-AkSubmitted over 2 years ago
Hi guys, After my first challenge I decided to try another one , using some of the advise I got from you. This challenge was pretty interesting for me. I initially tried using flexbox to get the layout, it worked but it did not quite divide the card into equal halves, so I settled for CSS-Grid instead. I hope that is good practice? Also i had quite a challenge controlling the product image and making it fit the container well. If you see my solution I have a bit of container overflow at the bottom. I'll appreciate a critic of my codes and how I can do it better.
Thank you for your help.
@ayouchanePosted over 2 years agoHey there 👋 I'm in no position to instruct or suggest best practices as I'm just a beginner, but I looked into that margin issue and kept messing with the code until i found something that worked; you don't need to nest the left image inside of a <div>, just make it a direct child of the grid and the margin will cease to exist.
Also, it's always good practice if you try and substitute <div> tags for more semantic markup; if you look at the report, the absence of the <main> tag counts as an accessibility issue.
Other than that, you're doing awesome work over there. You got the layout on lock, Keep it up!
0
