Responsive recipe page using flexbox with vanila CSS and HTML

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  @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

  ---

  

  P

  Juan•480

  @JEWebDevPosted 4 months ago

  @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

  @hmac100Posted 4 months ago

  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

  ---

  

  P

  Juan•480

  @JEWebDevPosted 4 months ago

  @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