Skip to content
Submitted 5 months ago

Omelette recipe page

PastaSus•360
@PastaSus
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?

this code was fixed/refactored

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

bad code, study and get help

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

any room for improvements on this?

Code

Please log in to post a comment

Log in

Community feedback

  • Gwenaël Magnenat•1,540
    @gmagnenat

    Hi, congratulations on your effort with this challenge! You've done great work, but there are some areas where improvements can enhance the accessibility, maintainability, and overall quality of your code. Here's a review with some recommendations:

    Semantic HTML and Accessibility

    • Load your stylesheet after Google Fonts. Make sure your stylesheet is loaded after Google Fonts in the <head> of your document. This avoids styles being applied without the correct fonts, which can cause layout shifts.
    • Avoid using words like "image," "photo," or "picture" in your alt attributes. Screen readers already announce that the element is an image. Focus on describing the content of the image succinctly and meaningfully.
    • Use <strong> instead of <span> in lists when emphasizing important text. <strong> has semantic meaning, indicating importance, and acts as a label for the list items, improving accessibility.

    CSS and Layout Improvements

    • Use a single image for the omelette picture and adjust its styling within a media query. This approach reduces unnecessary HTTP requests and improves page load performance.
    • Remove unnecessary comments in your stylesheet. Cleaning up your stylesheet makes it easier to navigate and helps during code reviews.
    • Use padding in sections to create spacing instead of applying margin-top on titles. This makes the design more adaptable across layouts and projects. Check out this article for more insight: Padding vs. Margin.
    • Follow a mobile-first approach by designing for mobile as the default layout and then using media queries with min-width for larger screens. This ensures better performance across different devices.
    • Use rem units in media queries instead of pixels. This respects users who adjust their browser's default font size, ensuring your design remains accessible and scalable.

    Update your README. A well-structured README helps others understand your project better. Use the provided template, remove unnecessary sections, and add details about the challenges you faced and the solutions you implemented. This will make your GitHub profile stronger and more professional.

    These changes will not only improve the accessibility and maintainability of your code but also help you develop solid practices for future projects.

    Let me know if you have any questions or need help implementing any of these suggestions.

    Happy coding!

    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