Build an Availability Table - Build an Availability Table

hisaankhan113 · August 7, 2026, 12:33pm

Tell us what’s happening:

My issue is that I can’t pass the step 35 I have tried all things change the scope to row or column or place td but can’t fix it . can anyone help me fix this step 35 I have even used Ai but nothing worked.

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>Weekly Meeting Availability</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <main>
    <h1>Team Meeting Planner</h1>

    <table>
      <caption>Weekly Meeting Availability Schedule</caption>

      <thead>
        <tr>
          <th scope="col">Time</th>
          <th scope="col">Monday</th>
          <th scope="col">Tuesday</th>
          <th scope="col">Wednesday</th>
          <th scope="col">Thursday</th>
          <th scope="col">Friday</th>
        </tr>
      </thead>

      <tbody>

        <tr class="sharp">
          <th class="time" scope="row">9:00 AM</th>
          <td class="available-5" aria-label="5+ available">5+</td>
          <td class="available-4" aria-label="4 available">4</td>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-2" aria-label="2 available">2</td>
          <td class="available-1" aria-label="1 available">1</td>
        </tr>

        <tr class="half">
          <th class="time" scope="row">10:00 AM</th>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-5" aria-label="5+ available">5+</td>
          <td class="available-4" aria-label="4 available">4</td>
          <td class="available-1" aria-label="1 available">1</td>
          <td class="available-2" aria-label="2 available">2</td>
        </tr>

        <tr class="sharp">
          <th class="time" scope="row">11:00 AM</th>
          <td class="available-2" aria-label="2 available">2</td>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-5" aria-label="5+ available">5+</td>
          <td class="available-4" aria-label="4 available">4</td>
          <td class="available-0" aria-label="0 available">0</td>
        </tr>

        <tr class="half">
          <th class="time" scope="row">1:00 PM</th>
          <td class="available-1" aria-label="1 available">1</td>
          <td class="available-2" aria-label="2 available">2</td>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-5" aria-label="5+ available">5+</td>
          <td class="available-4" aria-label="4 available">4</td>
        </tr>

        <tr class="sharp">
          <th class="time" scope="row">2:00 PM</th>
          <td class="available-4" aria-label="4 available">4</td>
          <td class="available-1" aria-label="1 available">1</td>
          <td class="available-2" aria-label="2 available">2</td>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-5" aria-label="5+ available">5+</td>
        </tr>

      </tbody>
    </table>

    <div id="legend">
      <span>Availability</span>
      <div id="legend-gradient"></div>
    </div>

  </main>

</body>
</html>

/* file: styles.css */
:root {
  --color0: #f4cccc;
  --color1: #fce5cd;
  --color2: #fff2cc;
  --color3: #d9ead3;
  --color4: #b6d7a8;
  --color5: #76a5af;

  --solid-border: 2px solid #333;
  --dashed-border: 2px dashed #333;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
  background-color: #f5f7fa;
  color: #222;
}

main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
}

caption {
  font-size: 1.4rem;
  font-weight: bold;
  padding: 15px;
}

th,
td {
  padding: 15px;
  text-align: center;
  border: 1px solid #ccc;
}

thead th {
  background-color: #243447;
  color: white;
}

.time {
  background-color: #e9ecef;
  font-weight: bold;
}

.available-0 {
  background-color: var(--color0);
}

.available-1 {
  background-color: var(--color1);
}

.available-2 {
  background-color: var(--color2);
}

.available-3 {
  background-color: var(--color3);
}

.available-4 {
  background-color: var(--color4);
}

.available-5 {
  background-color: var(--color5);
}

.sharp td {
  border-bottom: var(--solid-border);
}

.half td {
  border-bottom: var(--dashed-border);
}

#legend {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: bold;
}

#legend-gradient {
  height: 25px;
  flex: 1;
  border: 1px solid #333;

  background-image: linear-gradient(
    to right,
    var(--color0) 0%,
    var(--color0) 16%,
    var(--color1) 16%,
    var(--color1) 33%,
    var(--color2) 33%,
    var(--color2) 50%,
    var(--color3) 50%,
    var(--color3) 66%,
    var(--color4) 66%,
    var(--color4) 83%,
    var(--color5) 83%,
    var(--color5) 100%
  );
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.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 7, 2026, 1:45pm

Hi @hisaankhan113,

Shouldn’t this look like your other .time headers?

Happy coding

hisaankhan113 · August 7, 2026, 2:40pm

i isnt fix it now comes step 10 again can you provide me full code i cant understand it will be helpful and also can you check my code why does it comes

/* Html.css */ 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weekly Meeting Availability</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <main>
    <h1>Team Meeting Planner</h1>

    <table>
      <caption>Weekly Meeting Availability Schedule</caption>

     <thead>
    <tr>
    <th class="time" scope="col">Time</th>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
    </tr>
    </thead>

      <tbody>

        <tr class="sharp">
          <th class="time" scope="row">9:00 AM</th>
          <td class="available-5" aria-label="5+ available">5+</td>
          <td class="available-4" aria-label="4 available">4</td>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-2" aria-label="2 available">2</td>
          <td class="available-1" aria-label="1 available">1</td>
        </tr>

        <tr class="half">
          <th class="time" scope="row">10:00 AM</th>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-5" aria-label="5+ available">5+</td>
          <td class="available-4" aria-label="4 available">4</td>
          <td class="available-1" aria-label="1 available">1</td>
          <td class="available-2" aria-label="2 available">2</td>
        </tr>

        <tr class="sharp">
          <th class="time" scope="row">11:00 AM</th>
          <td class="available-2" aria-label="2 available">2</td>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-5" aria-label="5+ available">5+</td>
          <td class="available-4" aria-label="4 available">4</td>
          <td class="available-0" aria-label="0 available">0</td>
        </tr>

        <tr class="half">
          <th class="time" scope="row">1:00 PM</th>
          <td class="available-1" aria-label="1 available">1</td>
          <td class="available-2" aria-label="2 available">2</td>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-5" aria-label="5+ available">5+</td>
          <td class="available-4" aria-label="4 available">4</td>
        </tr>

        <tr class="sharp">
          <th class="time" scope="row">2:00 PM</th>
          <td class="available-4" aria-label="4 available">4</td>
          <td class="available-1" aria-label="1 available">1</td>
          <td class="available-2" aria-label="2 available">2</td>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-5" aria-label="5+ available">5+</td>
        </tr>

      </tbody>
    </table>

    <div id="legend">
      <span>Availability</span>
      <div id="legend-gradient"></div>
    </div>

  </main>

</body>
</html>

CSS

:root {
  --color0: #f4cccc;
  --color1: #fce5cd;
  --color2: #fff2cc;
  --color3: #d9ead3;
  --color4: #b6d7a8;
  --color5: #76a5af;

  --solid-border: 2px solid #333;
  --dashed-border: 2px dashed #333;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
  background-color: #f5f7fa;
  color: #222;
}

main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
}

caption {
  font-size: 1.4rem;
  font-weight: bold;
  padding: 15px;
}

th,
td {
  padding: 15px;
  text-align: center;
  border: 1px solid #ccc;
}

thead th {
  background-color: #243447;
  color: white;
}

.time {
  background-color: #e9ecef;
  font-weight: bold;
}

.available-0 {
  background-color: var(--color0);
}

.available-1 {
  background-color: var(--color1);
}

.available-2 {
  background-color: var(--color2);
}

.available-3 {
  background-color: var(--color3);
}

.available-4 {
  background-color: var(--color4);
}

.available-5 {
  background-color: var(--color5);
}

.sharp td {
  border-bottom: var(--solid-border);
}

.half td {
  border-bottom: var(--dashed-border);
}

#legend {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: bold;
}

#legend-gradient {
  height: 25px;
  flex: 1;
  border: 1px solid #333;

  background-image: linear-gradient(
    to right,
    var(--color0) 0%,
    var(--color0) 16%,
    var(--color1) 16%,
    var(--color1) 33%,
    var(--color2) 33%,
    var(--color2) 50%,
    var(--color3) 50%,
    var(--color3) 66%,
    var(--color4) 66%,
    var(--color4) 83%,
    var(--color5) 83%,
    var(--color5) 100%
  );
}

2332

Capture

these are the issue

dhess · August 7, 2026, 2:53pm

I can’t provide solution code, but I can guide you so you can fix your code yourself.

does this header:
<th class="time" scope="col">Time</th>

look like this header?
<th class="time" scope="row">9:00 AM</th>

Happy coding

hisaankhan113 · August 7, 2026, 3:08pm

<thead>
    <tr>
    <th scope="row">Time</th>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
    </tr>
    </thead>

the step 39 is solved but the step 38 is remove when i remove scope=col from time

dhess · August 7, 2026, 3:30pm

Aren’t you missing something?

hisaankhan113 · August 7, 2026, 3:59pm

I don’t understand what do you mean I am already tired figuring out

ILM · August 7, 2026, 4:21pm

All table header cells in the first column (the time cells) should have a scope attribute with the value row.

what makes a cell a “time cell”?

hisaankhan113 · August 7, 2026, 4:28pm

Thanks for your reply. I’m still confused. My first-column time cells already have class=“time” and scope=“row”, and the Monday–Friday headers have scope=“col”. Could you please tell me exactly which cell is incorrect or what I’m missing?

ILM · August 7, 2026, 4:41pm

if you wait a few days it will be fixed

to pass now you need this

to have the correct class

hisaankhan113 · August 7, 2026, 4:45pm

I have done it but there are bugs I would wait for few days for it.

Let me know when you guys fix it because I am already a small step away from completing responsive web design certificate.

Please let me know when you fix it .

ILM · August 7, 2026, 6:02pm

you don’t need to wait to complete the certification, this is not one of the 5 required certification projects

once you do the 5 certification projects, you are then eligible to take the exam

Build an Availability Table - Build an Availability Table

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics