Skip to content
Submitted 4 months ago

i completed this code.

Mo Shanib•40
@shanib-code
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)
Code

Please log in to post a comment

Log in

Community feedback

  • Cornelio R. Llagas Jr.•140
    @Cornelio-II

    Congrats! for completing this challenge** I have some suggestions

    in your html docs use this syntax to fix the issue(s) on your backgroud-color if turn it on the dark theme.

    html, body {
margin: 0;
padding: 0;
}

    Lastly! try conducting a lighthouse assessment using Google Chrome's developer tools to evaluate Accessibility, SEO, Best practices, and Performance. For a perfect shot in your app(s)😉😊✨.

    Happy coding! 🚀

  • Shashank Gupta•40
    @Shashank23codes

    🌟 Strengths

    Project Structure: The repository is well-organized with separate directories for assets and design files. This separation enhances readability and maintainability.​

    Semantic HTML: The use of semantic HTML elements like <main>, <section>, and <ul> improves accessibility and SEO.​

    Responsive Design: The inclusion of the viewport meta tag (<meta name="viewport" content="width=device-width, initial-scale=1.0">) indicates an intention for responsive design, ensuring the layout adapts to different screen sizes.​

    Consistent Styling: The CSS appears to be organized, and classes are used consistently across the HTML elements, which aids in maintaining a uniform design.​

    🛠️ Areas for Improvement

    README File: The README.md is currently a template. Filling it out with details about the project, installation instructions, and any other relevant information would provide context to other developers and users.​

    Accessibility Enhancements: Adding alt attributes to images (e.g., the recipe image) is essential for screen readers and improves accessibility for users with visual impairments.​

    External Stylesheet: While there's a <style> block in the <head>, it's good practice to keep all CSS in external stylesheets to maintain separation of concerns and simplify maintenance.​

    ✅ Suggestions

    Enhance Accessibility: Ensure all images have descriptive alt attributes.​

    Update README: Provide a comprehensive README.md with project details, which can be beneficial for collaboration and showcasing your work.​

    Optimize CSS: Move all inline styles to the external style.css file to maintain a clean HTML structure.​

    Overall, this project demonstrates a solid foundation in HTML and CSS. Addressing the areas mentioned above will enhance the project's functionality, accessibility, and maintainability. Keep up the good work!​

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