Skip to content
Submitted about 1 year ago

Responsive Recipe Page built with HTML & CSS

bem
Bruno Aviles•20
@bruno-aviles
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Being organized with the styles by using CSS variables. By using CSS variables, I am able style my elements proficiently and make changes quickly.

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

My biggest challenge was to make sure I was using the correct spacing. Since I do not have a Frontend Mentor Pro account, I used Photoshop to figure out what my spacing should be.

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

Any input on improving the way I write my code would be helpful!

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • P
    Daniel 🛸•44,760
    @danielmrz-dev

    Hello @bruno-aviles!

    Your solution looks excelent!

    I have just one suggestion:

    📌 To improve semantic clarity, try to maintain the titles hierarchy with <h1>, <h2> <h3>, and so on.

    It's more than just text size — it's about structuring your content effectively:

    • <h1> to <h6> are used to define HTML headings, with <h1> being the most significant.

    While these adjustments might not alter the visual appearance much, they significantly enhance semantic clarity, SEO optimization, and accessibility.

    Hope this suggestion proves helpful! Keep up the great work!

    Marked as helpful

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