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 using flexbox with vanila CSS and HTML

Juan 480

@JEWebDev

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?

I'm very proud that i finished this challenge. I still have lots to learn but it was very fun.

What challenges did you encounter, and how did you overcome them?

I didn't knew how to use media queries and downloaded fonts. I searched web.dev page for learning responsive design and MDN for how to use downloaded fonts.

What specific areas of your project would you like help with?

Any feedback is appreciated. Have a nice day!

Community feedback

@DylandeBruijn

Posted

@JEWebDev

Hiya! 👋

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

Things I like about your solution 🎉

  • Use of semantic HTML elements
  • Clear descriptive CSS classes
  • Use of CSS custom properties
  • Responsive

Things you could improve ✍️

  • You could add a min-height: 100vh to your body element so it takes up the full height of the viewport while still being able to grow when the content inside it grows.

I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was! 🌟

Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

Happy coding! 😎

Marked as helpful

0

Juan 480

@JEWebDev

Posted

@DylandeBruijn

Thank you for your feedback, feels great to know what you liked about the solution and helps me know that i implemented it well.

I will make the changes to the body as you suggested.

0
Ham 340

@hmac100

Posted

Hi Juan - Well done 👍 With the ingredients list you can do ** list-style: disc **; to get it closer to the design - if that's what you want to do. Still looks ok the way you have it. I found the Instruction list the trickiest to try styling the numbers by adding the colour. I ended up using a thing called my-awesome-counter which is a free 3rd party bit of css that helps you style the numbers. There's bound to be another way to do it but that really helped me out. All the best :)

0

Juan 480

@JEWebDev

Posted

@hmac100

Hello!

Thanks for your tips, i think i will try and style the numbers with the li::marker property. I linked an useful article in my github repo of this solution if you want to check it out. Have a nice day!

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