Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Recipe page

P

@Bamo-D-Abdallah

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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 240

@Adhi-S12

Posted

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: cover or object-fit:contain property 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__header class and a few other elements.

Other than this, your solution is actually good

0

Please log in to post a comment

Log in with GitHub
Discord logo

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