Skip to content
Submitted 7 months ago

recipe page

accessibility, airtable, angular, angular-material, anime-js
EDWINTOAPANTA02•120
@EDWINTOAPANTA02
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?

I am proud to have reached this point, I would investigate more about media queries

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

use the div, the flex, @media queries, the measurements like vh vw, 100% rem

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

use the div, the flex, @media queries, the measurements like vh vw, 100% rem

Code

Please log in to post a comment

Log in

Community feedback

  • Abdulgafar-Riro•250
    @Abdulgafar-Riro

    Feedback on Solution:

    1. Semantic HTML Usage:

    The solution employs semantic elements like <header>, <ul>, <ol>, and <table>, which enhance readability and accessibility. However, the container <div>s for various sections (e.g., .time_container, .nutrition_container) could be replaced with more meaningful tags like <section> or <aside> to improve semantics.

    1. Accessibility Improvements:

    Ensure the image has an alt attribute that accurately describes the content for visually impaired users. While "plato" works as a placeholder, a more descriptive text like "A simple omelette served on a plate" would be better.

    Add aria-labels or aria-describedby for complex sections like the nutrition table to provide more context.

    The contrast ratio for some text colors (e.g., hsl(332, 51%, 32%) on a white background) could be improved for better readability.

    1. Responsive Design:

    The layout adapts well to smaller screens, but the absolute positioning of the .img_container in the media query could lead to overlapping content if the title length increases. Consider using flexbox or grid for a more dynamic layout.

    Ensure the font sizes scale appropriately across all screen sizes, especially for mobile devices.

    1. Code Structure and Reusability:

    The CSS is well-organized, but you could make use of utility classes for common styles (e.g., margins, padding, text alignment) to reduce redundancy.

    Consider extracting repetitive styles (like font-family for headings) into a base class or global reset.

    1. Design Consistency:

    The solution closely matches the design intent, with clear sectioning and good alignment. Adding a hover effect for links and buttons could improve interactivity.

    The text justification (text-justify: distribute;) might lead to uneven spacing, which can make reading harder. Consider using text-align: left or justify instead.

    Suggestions for Improvement:

    Add more descriptive comments in your CSS for better maintainability.

    Include a favicon in the <head> for a complete branding experience.

    Use a CSS preprocessor like SCSS to modularize styles for better scalability in larger projects.

    Overall, this is a solid solution with great attention to detail and a clear understanding of responsive design principles. Keep iterating on semantic enhancements and accessibility features to make it even better!

  • Zakir Mustafa•160
    @kmrzakir

    good

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