Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
It was completely horrible, I need to learn the fundamentals of CSS better
What challenges did you encounter, and how did you overcome them?The most difficult was setting the list bulletpoints and numbers which I couldn't do so I gave up.
Also sizing anything was horrible and the responsive is inconsistent.
What specific areas of your project would you like help with?Overall review of my weaknesses, why do I think my code is a pile of garbage.
Why it feels like I don't know CSS.
Community feedback
- @Adhi-S12Posted 5 months ago
Hey your solution is good, here are a few things that you can change/improve:
- If you want to make only a certain parts of the text to be bold, you <strong> tag around them. Don't use
<b>tag as it is not semantic HTML. - Don't set height on image containers, instead use the
object-fit: coverorobject-fit:containproperty on the image element to fit the image inside the container. - In the top of the page, you've given an height for the image container, since the image's width is 100%, there is some empty white space in the container. Also you've given a gap property which give some space, And use used margin top on the heading too, this is the reason there is so much space between the image container and the h1 heading.
- You forgot to use the fonts for
preperation-block__headerclass and a few other elements.
Other than this, your solution is actually good
0 - If you want to make only a certain parts of the text to be bold, you <strong> tag around them. Don't use
Please log in to post a comment
Log in with GitHub
Join 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