
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I'm most proud of coding this component fairly quickly.
What challenges did you encounter, and how did you overcome them?I slowed down when attempting to style the 'Learning' heading with a background color. Originally I used an h3
element but realized I needed to use a span so the background color wouldn't stretch the entire width of the div. I learned the difference between block elements (most common) and inline elements (like span). The solution was to use inline-block
Tailwind CSS.
I could use more help translating the Figma design to css, specifically how to use 'rem' and the association with Tailwind classes.
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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