Question CSS Variables

sascha.r.klement · April 29, 2025, 1:17pm

Dear All,

I am stuck with the very last test in the CSS variables section ( test no 35, “Building an Availability Table.” The linear gradient simply won’t pass, and I have no idea why. I tried all sorts of changes, asked AI and a friend, but the system wouldn’t let my code pass. What’s wrong here?

Thanks a million!

Sascha

seopostexpert · April 29, 2025, 2:17pm

Hi there!

Please share your code (both HTML and CSS), and also include the link to the specific lesson you’re working on — this will help us understand the issue better and guide you correctly.

Also, don’t forget:

You can click the “Help” button inside the lesson and choose “Create a help post on the forum” — it will automatically copy your current code and lesson info to the forum, making it easier for others to assist you.

Let us know once done!

sascha.r.klement · April 29, 2025, 2:26pm

Hello,

Thank you very much for your response!

Here is the link to the lesson I am struggling with: Variables

Here’s my 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>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
  <table>
      <thead>
        <tr>
          <th class="time">8 am</th>
          <th>Monday</th>
          <th>Tuesday</th>
          <th>Wednesday</th>
          <th>Tursday</th>
          <th>Friday</th>
        </tr>  
      </thead>

      <tbody>
          <tr class="sharp">
            <th class="time">9 am</th>
            <td class="available-1"></td>
            <td class="available-5"></td>  
          </tr>

          <tr class="half"> 
            <th class="time">10 am</th>
            <td class="available-1"></td>
            <td class="available-2"></td>
          </tr>

          <tr class="sharp">
            <th class="time">11 am</th>
            <td class="available-4"></td>
            <td class="available-3"></td>
          </tr>

          <tr class="half">
            <th class="time">12 noon</th>
            <td class="available-2"></td>
            <td class="available-0"></td>
          </tr>

          <tr>
            <th class="time"> 1 pm</th>
            <td class="available-2"></td>
            <td class="available-3"></td>    
          </tr>

      </tbody>
  </table>

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

</body>

</html>
``|
Here's my CSS:

:root {
–color0: #FFC0CB;
–color1: #A8E6CF;
–color2: #4CAF50;
–color3: #2E7D32;
–color4: #3B5998;
–color5: #DC143C;
–solid-border: 2px solid #000;
–dashed-border: 4px dashed #333;

}

.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: 20px;
}

#legend-gradient {
width: 100%;
height: 20px;
border: 1px solid #000;
background-image: linear-gradient(
to right,
var(–color0) 0%, var(–color0) 16.66%,
var(–color1) 16.66%, var(–color1) 33.33%,
var(–color2) 33.33%, var(–color2) 50%,
var(–color3) 50%, var(–color3) 66.66%,
var(–color4) 66.66%, var(–color4) 83.33%,
var(–color5) 83.33%, var(–color5) 100%
);
}

seopostexpert · April 29, 2025, 2:29pm

Brother, your HTML file seems incomplete — it’s missing essential elements like <head>, <body>, and <meta>, as well as the CSS file link.
Please add those required parts and then re-send your full code so we can help you properly.

sascha.r.klement · April 29, 2025, 2:36pm

Sorry! Here is the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Availability Schedule</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table>
    <tr>
      <th></th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
    </tr>
    <tr class="sharp">
      <th class="time">9:00 AM</th>
      <td class="available-3"></td>
      <td class="available-2"></td>
      <td class="available-5"></td>
      <td class="available-1"></td>
      <td class="available-4"></td>
    </tr>
    <tr class="half">
      <th class="time">10:00 AM</th>
      <td class="available-1"></td>
      <td class="available-4"></td>
      <td class="available-2"></td>
      <td class="available-5"></td>
      <td class="available-0"></td>
    </tr>
    <tr class="sharp">
      <th class="time">11:00 AM</th>
      <td class="available-0"></td>
      <td class="available-3"></td>
      <td class="available-1"></td>
      <td class="available-2"></td>
      <td class="available-5"></td>
    </tr>
    <tr class="half">
      <th class="time">12:00 PM</th>
      <td class="available-4"></td>
      <td class="available-2"></td>
      <td class="available-3"></td>
      <td class="available-0"></td>
      <td class="available-1"></td>
    </tr>
    <tr class="sharp">
      <th class="time">1:00 PM</th>
      <td class="available-5"></td>
      <td class="available-1"></td>
      <td class="available-4"></td>
      <td class="available-3"></td>
      <td class="available-2"></td>
    </tr>
  </table>

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

And here is the CSS:

:root {
  --color0: #ff0000;
  --color1: #ff9900;
  --color2: #ffff00;
  --color3: #00ff00;
  --color4: #0099ff;
  --color5: #9900ff;
  --solid-border: 2px solid #333;
  --dashed-border: 2px dashed #666;
}

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
}

table th, table td {
  padding: 10px;
  text-align: center;
}

.time {
  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 {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

#legend span {
  margin-right: 10px;
  font-weight: bold;
}

#legend-gradient {
  width: 300px;
  height: 20px;
  background-image: linear-gradient(
    to right,
    var(--color0) 0%, var(--color0) 16.6%,
    var(--color1) 16.6%, var(--color1) 33.2%,
    var(--color2) 33.2%, var(--color2) 49.8%,
    var(--color3) 49.8%, var(--color3) 66.4%,
    var(--color4) 66.4%, var(--color4) 83%,
    var(--color5) 83%, var(--color5) 100%
  );
}

seopostexpert · April 29, 2025, 2:36pm

Brother, you can use the following to share your code:

Use backticks (``) or triple backticks (``````) to format your code.

image808×271 7.98 KB
Use the highlighted button and paste your code there.

Once you share the code, we can proceed with the next steps!

sascha.r.klement · April 29, 2025, 2:39pm

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Availability Schedule</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table>
    <tr>
      <th></th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
    </tr>
    <tr class="sharp">
      <th class="time">9:00 AM</th>
      <td class="available-3"></td>
      <td class="available-2"></td>
      <td class="available-5"></td>
      <td class="available-1"></td>
      <td class="available-4"></td>
    </tr>
    <tr class="half">
      <th class="time">10:00 AM</th>
      <td class="available-1"></td>
      <td class="available-4"></td>
      <td class="available-2"></td>
      <td class="available-5"></td>
      <td class="available-0"></td>
    </tr>
    <tr class="sharp">
      <th class="time">11:00 AM</th>
      <td class="available-0"></td>
      <td class="available-3"></td>
      <td class="available-1"></td>
      <td class="available-2"></td>
      <td class="available-5"></td>
    </tr>
    <tr class="half">
      <th class="time">12:00 PM</th>
      <td class="available-4"></td>
      <td class="available-2"></td>
      <td class="available-3"></td>
      <td class="available-0"></td>
      <td class="available-1"></td>
    </tr>
    <tr class="sharp">
      <th class="time">1:00 PM</th>
      <td class="available-5"></td>
      <td class="available-1"></td>
      <td class="available-4"></td>
      <td class="available-3"></td>
      <td class="available-2"></td>
    </tr>
  </table>

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

:root {
  --color0: #ff0000;
  --color1: #ff9900;
  --color2: #ffff00;
  --color3: #00ff00;
  --color4: #0099ff;
  --color5: #9900ff;
  --solid-border: 2px solid #333;
  --dashed-border: 2px dashed #666;
}

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
}

table th, table td {
  padding: 10px;
  text-align: center;
}

.time {
  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 {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

#legend span {
  margin-right: 10px;
  font-weight: bold;
}

#legend-gradient {
  width: 300px;
  height: 20px;
  background-image: linear-gradient(
    to right,
    var(--color0) 0%, var(--color0) 16.6%,
    var(--color1) 16.6%, var(--color1) 33.2%,
    var(--color2) 33.2%, var(--color2) 49.8%,
    var(--color3) 49.8%, var(--color3) 66.4%,
    var(--color4) 66.4%, var(--color4) 83%,
    var(--color5) 83%, var(--color5) 100%
  );
}

JuniorQ · April 29, 2025, 2:55pm

Hi,
The main issue is that you’re using decimal values for the percentage. Do not use deciaml values.
Good luck!

sascha.r.klement · April 29, 2025, 2:57pm

Thank you very much for your response.

JeremyLT · April 29, 2025, 2:58pm

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

sascha.r.klement · April 29, 2025, 3:02pm

Thank you very much!

sascha.r.klement · April 29, 2025, 4:17pm

The decimal numbers were NOT the issue. There must be some other problem. I pass all tests but the last one.

seopostexpert · April 29, 2025, 4:19pm

Can you share your updated code?

sascha.r.klement · April 29, 2025, 4:21pm

#legend-gradient {
  height: 30px;
  border-radius: 5px;
  border: 1px solid #ccc;
  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%
  );
}

This is the updated CSS for the last user story.

sascha.r.klement · April 29, 2025, 4:24pm

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Availability Schedule</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Weekly Availability Schedule</h1>
  
  <table>
    <tr>
      <th></th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
    </tr>
    <tr class="sharp">
      <th class="time">9:00 AM</th>
      <td class="available-2"></td>
      <td class="available-3"></td>
      <td class="available-4"></td>
      <td class="available-1"></td>
      <td class="available-0"></td>
    </tr>
    <tr class="half">
      <th class="time">11:00 AM</th>
      <td class="available-5"></td>
      <td class="available-4"></td>
      <td class="available-3"></td>
      <td class="available-2"></td>
      <td class="available-1"></td>
    </tr>
    <tr class="sharp">
      <th class="time">1:00 PM</th>
      <td class="available-0"></td>
      <td class="available-1"></td>
      <td class="available-2"></td>
      <td class="available-3"></td>
      <td class="available-4"></td>
    </tr>
    <tr class="half">
      <th class="time">3:00 PM</th>
      <td class="available-5"></td>
      <td class="available-2"></td>
      <td class="available-3"></td>
      <td class="available-4"></td>
      <td class="available-5"></td>
    </tr>
  </table>

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

:root {
  --color0: #ff4c4c;
  --color1: #ff9f40;
  --color2: #ffdd4a;
  --color3: #b0ff60;
  --color4: #60ddff;
  --color5: #9b60ff;

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

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

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

table {
  width: 80%;
  margin: 0 auto;
  border-collapse: collapse;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

th, td {
  padding: 12px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.time {
  text-align: right;
  width: 100px;
}

.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: 30px auto;
  width: 300px;
  text-align: center;
}

#legend span {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

#legend-gradient {
  height: 30px;
  border-radius: 5px;
  border: 1px solid #ccc;
  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%
  );
}

seopostexpert · April 29, 2025, 4:26pm

The gradient direction should not be to right — check the lesson, it uses a different format (hint: maybe an angle).
Your color stops need adjustment:

--color0 should start at 16% with one stop only.
--color1 to --color4 each need two stops (start and end).
--color5 is the last one, so only one stop at 83%.

You’re repeating each var(--colorX) twice — but for cleaner, more readable code, try using each only once where possible.

sascha.r.klement · April 29, 2025, 4:40pm

I tried again, but it doesn’t pass. Is this supposed to be some rite of passage? I seriously don’t understand the issue here.

seopostexpert · April 29, 2025, 4:44pm

Can you share your updated code?

JuniorQ · April 29, 2025, 4:57pm

Okay, then here’s the real issue:
You need to use two color stops for each variable. That means each variable should be used once. And there should be two percentages used within each color. Try that and hopefully you’ll pass.

sascha.r.klement · May 2, 2025, 8:26am

Hi there,

I tried that, and it still doesn’t pass. Am I supposed to use black magic here?

Topic		Replies	Views
I'm currently working on Step 35 of the "Build an Availability Table" project in freeCodeCamp's Full Stack Certification. The task requires me to create a linea HTML-CSS	6	47	April 3, 2025
Build an Availability Table - Build an Availability Table HTML-CSS	6	29	April 25, 2025
Build an Availability Table - Build an Availability Table HTML-CSS	6	47	April 11, 2025
CSS Variables - Lab(Build an Availability Table) - Step 11 HTML-CSS	6	98	February 3, 2025
Build an Availability Table HTML-CSS	5	102	March 11, 2025

Question CSS Variables

Related topics