Skip to content
Submitted 4 months ago

recipe-page-main using HTML and CSS

13073398•10
@13073398
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

Community feedback

  • Joe-FE•50
    @Joe-FEPosted 4 months ago

    Hi, My friend

    Congratulations on completing your recipe page project! It's evident that you’ve put in significant effort, and your work showcases your growing skills.

    Project Summary

    Your recipe page is clean and well-structured, demonstrating good command of HTML and CSS. The visual design is appealing and easy to navigate, making it user-friendly.

    Tips you can use to improve your code:👇

    HTML

    1. Semantic Tags: Consider using more semantic tags like <header>, <article>, and <footer> to enhance accessibility.
    2. Image Alt Text: Ensure all images have descriptive alt attributes to improve accessibility.

    CSS

    1. Responsiveness: The layout is responsive, but consider using CSS Grid for more complex layouts.
    2. Styling Consistency: Consider using CSS variables for colors and font sizes to maintain consistency and simplify updates.

    Detailed Suggestions

    1. HTML Enhancements:

      • Use semantic tags to structure content meaningfully.
      • Improve accessibility with descriptive alt text.

    2. CSS Improvements:

      • Implement CSS variables for better maintainability.
      • Add comments to clarify the purpose of specific styles.

    Example Improvements

    HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Delicious Recipes</h1>
    </header>
    <main>
        <article class="recipe">
            <img src="recipe.jpg" alt="Picture of the recipe dish">
            <h2>Recipe Name</h2>
            <p>Ingredients and instructions...</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2024 Recipe Page</p>
    </footer>
</body>
</html>

    CSS:

    :root {
    --primary-color: #FF6347;
    --secondary-color: #4CAF50;
    --font-size: 16px;
}

body {
    font-size: var(--font-size);
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: var(--primary-color);
    padding: 20px;
    text-align: center;
    color: white;
}

footer {
    background-color: var(--secondary-color);
    text-align: center;
    padding: 10px;
    color: white;
}

    Conclusion

    Your recipe page is a strong foundation, and with a few tweaks, it can become even more polished and professional. Keep up the great work and continue honing your skills!

    Best regards,
    Youssef Salem

    0
    13073398•10
    @13073398Posted 4 months ago

    Thank you for your advices @Joe-FE

    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