Skip to content
Submitted 2 months ago

Recipe page using only HTML and CSS

thetinyelephant85•70
@thetinyelephant85
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I was able to build the html structure faster than before and next time I will try to experiment more with different methods, BEM or writing more accessible HTML.

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

I struggled to organise the structure of the html to be able to style the img full width for mobile and within the main structure for other breakpoints. I am not quite sure about the final solution but it works so I am happy.

I also struggled with vertically centering the bullet point but I was not convinced with the solution I find around using span, flex and so on so I give up.

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

Generic feedback on the code and how to approach the vertical alignment of the bullet points

Community feedback

  • Steven Stroud•11,910
    @StroudyPosted 2 months ago

    Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…

    • I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,
    • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

    You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

    Marked as helpful
    0

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