Skip to content
Submitted 3 months ago

Recipe Page Solution

Tina Wang•140
@tina801005
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?

This was my first challenge and I'm proud that I completed it on my own. I am a stay-at-home mother who uses her spare time to teach herself front-end technology. Completing this challenge is a great encouragement to me. It also lets me know where I am and where I need to improve.

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

The biggest challenge I encountered was making a responsive layout. But through constant experimentation, reading technical articles and YouTube videos, I finally overcame the difficulties and made a responsive layout that satisfied me.

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

I am a newbie, and when I write code, there may be some redundant words that are not applicable in the industry. If you find anything that can be changed please let me know, thank you. In addition, I am Taiwanese and my English expression ability is weak. Please forgive me if my sentences don't flow well.

Community feedback

  • JOSIANE FERMAO•170
    @josifermaodevPosted 3 months ago

    Congratulations, your code is very good!

    Analyzing your code, I realized that to create the nutritional table you used tags and markings that would not be semantically correct.

    here is an example explaining the correct way to form a table:

    <table class="nutrition-table">
    <caption>Nutritional Information</caption>
    <thead>
        <tr>
            <th>Component</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Calories</td>
            <td>277kcal</td>
        </tr>
        <tr>
            <td>Carbs</td>
            <td>0g</td>
        </tr>
        <tr>
            <td>Protein</td>
            <td>20g</td>
        </tr>
        <tr>
            <td>Fat</td>
            <td>22g</td>
        </tr>
    </tbody>
</table>

    <table class="nutrition-table">: Defines a table and applies the nutrition-table class for styling with CSS.

    <caption>: Provides a descriptive title for the table, useful for accessibility and understanding the table contents.

    <thead>: Contains the table header.

    <tr>: Defines a row in the table.

    <th>: Defines a header cell, which by default is styled in bold and centered. Header cells are important for accessibility, as they help assistive technologies describe the table contents.

    <tbody>: Contains the body of the table, where the data is actually listed.

    <td>: Defines a data cell in the table.

    Reasons for this Structure:

    Semantics:

    Using <table>, <thead>, <tbody>, <th>, <td>, and <caption> ensures that the table is interpreted correctly by browsers and assistive technologies.

    Elements such as <caption> and <th> improve accessibility by allowing screen reader users to better understand the table's contents.

    Clarity and Organization:

    Separating <thead> and <tbody> improves code readability and makes it easier to maintain and style.

    Stylization:

    Applying a class to the table (class="nutrition-table") makes it easier to style with CSS, allowing you to customize the appearance of the table without affecting other tables on the page.

    ATTENTION

    In this project it is not necessary to use the tags <caption>, <thead>, <tr>, <th>, because the design does not present these elements.

    Marked as helpful
    1
    Tina Wang•140
    @tina801005Posted 3 months ago

    @josifermaodev Wow!! Thank you for the compliments and advice!! This comment made my day :) I will try your suggestions to make this work more perfect. Thank you.

    0
    Tina Wang•140
    @tina801005Posted 3 months ago

    @josifermaodev Wow!! Thank you for the compliments and advice!! This comment made my day :) I will try your suggestions to make this work more perfect. Thank you.

    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