Skip to content
Submitted 20 days ago

Responsive recipe page using HTML, CSS

Suhas Patnaik•120
@SuhasPatnaik
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?

Made the website fully responsive across smaller devices (tablets, mobiles, etc) using responsive units, flexible images and media queries for the first time.

Possible Improvement:

I personally feel like there’s a more efficient approach to making a website fully responsive. For instance, I’d like to break slightly complex components into flexboxes and grids wherever possible to build fluid layouts from the start.

What challenges did you encounter, and how did you overcome them?
  • Figuring out the approaches to manipulate the stylings of a list item and choosing the more suitable one for my use case (used ::marker instead of ::before)
  • Learning about table border manipulations, on how it is designed for table cells by default but I had to adapt it to table row instead to fit the design requirements.
What specific areas of your project would you like help with?

In terms of accessibility and ways to achieve responsiveness.

Community feedback

  • Teodor Jenkler•3,820
    @TedJenklerPosted 20 days ago

    Hi @SuhasPatnaik,

    To improve the semantic quality of your HTML, consider making <section> and <article> tags fully accessible landmarks. For each of these elements to function correctly, ensure they include:

    Labeling with aria-labelledby or aria-label: Use aria-labelledby to link to a heading within the section, making it clear and navigable for screen readers. If no heading is present, use aria-label to describe the section directly.

    Descriptive Heading or aria-label: A heading (or aria-label when a visible heading isn’t feasible) defines the section’s purpose and improves accessibility. In your case, simply link the semantic tag with the heading.

    Nice job on the heading structure! Your overall HTML structure is solid, and the site is fully responsive. Keep up the great work!

    Best, Teodor

    Marked as helpful
    0
  • Martin Liesche•570
    @marliedevPosted 20 days ago

    Great work! Looks and feels well!

    Regarding your question to accessibility improvements:

    • Add ARIA Landmarks: Use <main> and <footer> tags ind this case to help screen readers understand page structure better.
    • You could add Table Headers: Add <th> elements in the nutrition table for column headers (e.g., “Nutrient” and “Value”) to aid screen readers. This could affects the design, but you can also define elements that only are visible for screen readers
    • You could add a button for Print Option: use an <a> or <button> with aria-label="Print Recipe" to improve navigation.
    • Add srcset to <img> tags for responsive image sizes, improving load speed on smaller screens.
    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