Need more practice
Design Comparison
SolutionDesign
Report
0Accessibility
issues0HTML
issues
Nduduzo's questions for the community
Any feedback will be appreciated
Community Feedback
- 0
- 2
Nice work on this challenge! I'd recommend spending some time refining it just to get it looking as good as possible. With these challenges, it's much better to take your time and focus on quality as opposed to completing lots of them but not refining them.
Here are some tips on how you could improve this solution:
- Review the responsiveness of your site at tablet sizes. You'll see the illustration overlaps content making the text unreadable.
- Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for the purpose of styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.
- As a rule, I would recommend only using
vhunits in very rare and very specific instances. This is because you're sizing the element based on the viewport instead of the height of the content inside, which can lead to unintended UI issues. As an example, if you look at your preview, keep the width of the browser at full-width but start reducing the height you'll see the second section starts to overlap the top section. Instead, don't set an explicitheighton the parent and then just usepaddingandmarginto space out the content within it. This way the height of the parent will be flexible based on the height of the content.
The
vhunit will also be what's messing up the screenshot. Once you've removed it you can take a new one and it should look fine.Keep it up and let me know if you have any questions ๐
- 0
@mattstuddert Thanks a lot. Your feedback is detailed... Very helpful! Thank you I'll get to refining right away.
- 1
@lifeoncode youโre welcome! Happy to help ๐
- 0
This is great
- 0
@frankiefab100 thank you!
P
Give some feedback to lifeoncode about their solution
Join our Slack community
Join over 40,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!