Design comparison
Solution retrospective
This project was interesting CSS wise. But first let's talk HTML. For the rating stars, I was looking for a way to duplicate the icons without duplicating the HTML code, I found the background-image
and background-repeat: space
properties in CSS but I couldn't find a way to add custom spacing. The mobile version wasn't as hard as the desktop one though, also this is the first time I've implemented the workflow of doing the mobile design then the desktop one, and it's much easier to do !
For CSS, it was a bit difficult to align the rating cards and its content the same way they are in the design, other than that everything else was a bit easier to do.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @mdaifi1337, Congratulations on completing this challenge!
Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:
You did a really good work here putting everything together, something you can improve its your code html markup and semantics. You can replace the
<div>
that wraps each card with<article>
you can wrap the paragraph with the quote with the tag<blockquote>
this way you'll wrap each block of element with the best tag in this situation. Pay attention that<div>
is only a block element without meaning.This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/
✌️ I hope this helps you and happy coding!
Marked as helpful1@mdaifi1337Posted about 2 years ago@correlucas Thanks for the advices. I'm not that good with using the "right" HTML tags so I just use
<div>
s and style them. I'll try from now on to use the most suitable tags.0 - @al-ameen36Posted about 2 years ago
Hello Med Daifi.
For my solution i used CSS variables and the CSS calc function to align the cards.
my CSS
.card{ margin-right: calc(var(--mr) * 50px); }
my HTML
<div class="card" style="--mr: 2;">...</div> <div class="card" style="--mr: 1;">...</div> <div class="card" style="--mr: 0;">...</div>
for example if "--mr" is 2, then
margin-right: calc(2 * 50px);
Hope this was helpful
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