/* Change code below this line */ /* Change code above this line */

Asking question concerns with Basic CSS

Hello! Everyone… I want to know about this statement.

/* Change code below this line /
/
Change code above this line */

Where and why is it used for? I found it in CSS variables.

I mean Sometimes, the additional code is written between these two statements.

/* Change code below this line /
/
Change code above this line */

Sometimes, the extra code is written under class in CSS style block.

I am confused now. Please help me. Thank you so much.^-^

Title: Basic CSS: Use a custom CSS Variable

.penguin { --penguin-skin: gray; position: relative; margin: auto; display: block; margin-top: 5%; width: 300px; height: 300px; } .penguin-top { top: 10%; left: 25%; /* Change code below this line */ background: black; /* Change code above this line */ width: 50%; height: 45%; border-radius: 70% 70% 60% 60%; } .penguin-bottom { top: 40%; left: 23.5%; /* Change code below this line */ background: black; /* Change code above this line */ width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; } .right-hand { top: 0%; left: -5%; /* Change code below this line */ background: black; /* Change code above this line */ width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(45deg); z-index: -1; } .left-hand { top: 0%; left: 75%; /* Change code below this line */ background: black; /* Change code above this line */ width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; } .right-cheek { top: 15%; left: 35%; background: white; width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .left-cheek { top: 15%; left: 5%; background: white; width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .belly { top: 60%; left: 2.5%; background: white; width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; } .right-feet { top: 85%; left: 60%; background: orange; width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(-80deg); z-index: -2222; } .left-feet { top: 85%; left: 25%; background: orange; width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(80deg); z-index: -2222; } .right-eye { top: 45%; left: 60%; background: black; width: 15%; height: 17%; border-radius: 50%; } .left-eye { top: 45%; left: 25%; background: black; width: 15%; height: 17%; border-radius: 50%; } .sparkle { top: 25%; left: 15%; background: white; width: 35%; height: 35%; border-radius: 50%; } .blush-right { top: 65%; left: 15%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .blush-left { top: 65%; left: 70%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .beak-top { top: 60%; left: 40%; background: orange; width: 20%; height: 10%; border-radius: 50%; } .beak-bottom { top: 65%; left: 42%; background: orange; width: 16%; height: 10%; border-radius: 50%; } body { background:#c6faf1; } .penguin * { position: absolute; }


**Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36</code>.

**Challenge:** Use a custom CSS Variable

**Link to the challenge:**
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-a-custom-css-variable
/* CSS */
/*Change code below this line */

#element:hover{
    color: black;
}

/*Change code above this line */

Observe the above snippet…
Did you see some difference between the lines between /* and other in code… These lines are comments.

Comments are left by the developer to understand what the code does either when he revisits the code or when other people read the code…

If I failed to explain then you can read about comments at w3Schools`

In the challenges comments are left as to tell us the learners to edit or enter the code inside this two lines only. So that rest of the code doesn’t break. Hope it’s clear.

1 Like

To not mess up the whole code, they kinda instruct you where to write the code…
and when a code is enclosed between /* and */, it is called a comment, it is ignored by the console (i.e. doesn’t have an effect in the code).

2 Likes

Thank you so much @mukeshgurpude ^-^

Thank you so much @bedward I got it now. Your explanation is clear to understand well ^-^