Build an Availability Table - Build an Availability Table

MoneyManwill · August 14, 2026, 3:28pm

Tell us what’s happening:

I am on step 13 adding a --color0 variable in the root selector. I believe I have all I need but I am getting an error message saying I am not defining the variable.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Availability Table</title>
</head>

<body>
    <table>
        <tr>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
        </tr>
        <tr class="sharp">
            <th class="time">9am</th>
            <td class ="available-0"></d>
            <td class ="available-1"></td>
            <td class ="available-2"></td>
            <td class ="available-3"></td>
            <td class ="available-4"></td>
            <td class ="available-5"></td>
        </tr>
        <tr class="half">
            <th class="time">9:30am</th>
            <td class ="available-0"></d>
            <td class ="available-1"></td>
            <td class ="available-2"></td>
            <td class ="available-3"></td>
            <td class ="available-4"></td>
            <td class ="available-5"></td>
        </tr>
        <tr class="sharp">
            <th class="time">10:0 am</th>
            <td class ="available-0"></d>
            <td class ="available-1"></td>
            <td class ="available-2"></td>
            <td class ="available-3"></td>
            <td class ="available-4"></td>
            <td class ="available-5"></td>
        </tr>
        <tr class="half">
            <th class="time">10:30am</th>
            <td class ="available-0"></d>
            <td class ="available-1"></td>
            <td class ="available-2"></td>
            <td class ="available-3"></td>
            <td class ="available-4"></td>
            <td class ="available-5"></td>
        </tr>
        
    </table>

</body>

</html>

/* file: styles.css */
:root {
  --color0: red;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36

Challenge Information:

Build an Availability Table - Build an Availability Table

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-availability-table/66b36358ed4f261d64840c24.md at main · freeCodeCamp/freeCodeCamp · GitHub

dhess · August 14, 2026, 4:16pm

Hi @MoneyManwill,

Did you link your stylesheet in index.html?

Happy coding

MoneyManwill · August 17, 2026, 3:15pm

Yes I did and I still get the same error

ILM · August 17, 2026, 3:20pm

can you post your updated code please?

MoneyManwill · August 17, 2026, 3:24pm

How do I add my updated code?

ILM · August 17, 2026, 3:26pm

There are two ways you can format your code to make it easier to read and test:

After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

MoneyManwill · August 17, 2026, 3:29pm

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Availability Table</title>

<link rel="stylesheet" href="style.css">

<table>

    <tr>

        <th>Monday</th>

        <th>Tuesday</th>

        <th>Wednesday</th>

        <th>Thursday</th>

        <th>Friday</th>

    </tr>

    <tr class="sharp">

        <th class="time">9am</th>

        <td class ="available-0"></d>

        <td class ="available-1"></td>

        <td class ="available-2"></td>

        <td class ="available-3"></td>

        <td class ="available-4"></td>

        <td class ="available-5"></td>

    </tr>

    <tr class="half">

        <th class="time">9:30am</th>

        <td class ="available-0"></d>

        <td class ="available-1"></td>

        <td class ="available-2"></td>

        <td class ="available-3"></td>

        <td class ="available-4"></td>

        <td class ="available-5"></td>

    </tr>

    <tr class="sharp">

        <th class="time">10:0 am</th>

        <td class ="available-0"></d>

        <td class ="available-1"></td>

        <td class ="available-2"></td>

        <td class ="available-3"></td>

        <td class ="available-4"></td>

        <td class ="available-5"></td>

    </tr>

    <tr class="half">

        <th class="time">10:30am</th>

        <td class ="available-0"></d>

        <td class ="available-1"></td>

        <td class ="available-2"></td>

        <td class ="available-3"></td>

        <td class ="available-4"></td>

        <td class ="available-5"></td>

    </tr>

    

</table>

:root {

–color0: red;

}

There is my updated code.

ILM · August 17, 2026, 3:30pm

please try again, it is not properly formatted

MoneyManwill · August 17, 2026, 3:31pm

Sorry I am confused on what I need to do to get it formatted the correct way.

ILM · August 17, 2026, 3:32pm

can you say which part of the message above is not clear?

MoneyManwill · August 17, 2026, 3:35pm

<!DOCTYPE html>

<html lang="en">




<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Availability Table</title>

    <link rel="stylesheet" href="style.css">

</head>




<body>

    <table>

        <tr>

            <th>Monday</th>

            <th>Tuesday</th>

            <th>Wednesday</th>

            <th>Thursday</th>

            <th>Friday</th>

        </tr>

        <tr class="sharp">

            <th class="time">9am</th>

            <td class ="available-0"></d>

            <td class ="available-1"></td>

            <td class ="available-2"></td>

            <td class ="available-3"></td>

            <td class ="available-4"></td>

            <td class ="available-5"></td>

        </tr>

        <tr class="half">

            <th class="time">9:30am</th>

            <td class ="available-0"></d>

            <td class ="available-1"></td>

            <td class ="available-2"></td>

            <td class ="available-3"></td>

            <td class ="available-4"></td>

            <td class ="available-5"></td>

        </tr>

        <tr class="sharp">

            <th class="time">10:0 am</th>

            <td class ="available-0"></d>

            <td class ="available-1"></td>

            <td class ="available-2"></td>

            <td class ="available-3"></td>

            <td class ="available-4"></td>

            <td class ="available-5"></td>

        </tr>

        <tr class="half">

            <th class="time">10:30am</th>

            <td class ="available-0"></d>

            <td class ="available-1"></td>

            <td class ="available-2"></td>

            <td class ="available-3"></td>

            <td class ="available-4"></td>

            <td class ="available-5"></td>

        </tr>

        

    </table>




</body>




</html>

ILM · August 17, 2026, 3:35pm

which file do you have?

MoneyManwill · August 17, 2026, 3:36pm

:root {

–color0: red;

}

There is my CSS

ILM · August 17, 2026, 3:37pm

which name does that file have?

MoneyManwill · August 17, 2026, 3:37pm

On the window it says styles.css

ILM · August 17, 2026, 3:37pm

and is that what you have written?

MoneyManwill · August 17, 2026, 3:38pm

Yes I used

MoneyManwill · August 17, 2026, 3:39pm

Sorry I am an idiot. I just figured what you were saying. I missed the s on styles

ILM · August 17, 2026, 3:40pm

no don’t call yourself names, typos are quite common

MoneyManwill · August 17, 2026, 3:41pm

Thank you for your help and sticking with me

Build an Availability Table - Build an Availability Table

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics