Responsive Recipe Card made with HTML and Css

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  @DoneWithWork

  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 🎉

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

  Things you could improve ✍️

  • Add a bit of padding to your body element so the card has room to breath on smaller viewports.

  • Remove the border-radius of the image on smaller viewports so it's more in line with the design.

  • Remove the wrapper <div> of the image, you can style the image directly if you want.

  • You can write this padding: 20px 20px 20px 20px; as padding: 20px; it's shorthand for the same thing.

  • You could remove the <thead> element as it's empty.

  • Try setting the font-family on the body. Other elements will inherit the font-family from their parent due to the CSS cascade. If you want to have a different font-family for the headings you can select h1, h2, h3, h4, h5, h6 and give them that font-family instead.

  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