Design comparison
Solution retrospective
First one I've completed on this site. Enjoyable start - One issue I had was figuring out how to center align icons and text. Almost got it
Community feedback
- @rsrclabPosted almost 3 years ago
Hi, @thomasjfcaldwell ~
Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.
Here are some of the tips I like to provide.
- Please try BEM for naming element classes. It will help you a lot on bigger projects.
- There is no hover effects on image and other elements. It's also one of challenging part here.
- Font sizes and spacings aren't the same with design. As a front-end developer, it's important to meet pixel-perfect requirements.
https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH
Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.
Cheers ~
Marked as helpful0 - @darryncodesPosted almost 3 years ago
Hi Thomas,
Welcome to FEM, good to see you've completed your 1st challenge.
I think you've nailed the centre align icons and text.
display: flex
andalign-items: center;
usually does the trick. I thinkmargin-bottom: 0.7em;
on.equilibrium + .days
in your.cost
div is messing up the alignment there.You should swap
<div class="container">
with<main class="container">
to clear your accessibility report. Using descriptive/semantic html is really importantHappy coding!
0
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