@sorin7345
Latest solutions
Audiophile: Fullstack e-commerce store using Next.js and Swell
#next#react#storybook#tailwind-css#typescriptSubmitted about 2 years ago
Latest comments
- @ayouchane
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 helpful - @dannxvc@ayouchane
I 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!
- @Olanrewaju-Ak@ayouchane
Hey 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!
