I am stuck in this challenge

HTML-CSS
1

My answer to the challenge.

<style>
  :root {
    --red-color: red;
  }
  .red-box {
    
    background: var(--red-color, red);
    height: 200px;
    width:200px;
  }
</style>
<div class="red-box"></div>

Link to the challenge (Please delete the @ for the address, since I am a newbie here the system is not allowing me to include links) :
“https@@://learn.freecodecamp.org/@@@responsive-web-design/@@basic-css/improve-compatibility-with-browser-fallbacks@@@”

Also the Hint option is also not working.
I have searched for the solution here and there but did not find any.

1 Like
2

You just need to add a normal background: red; declaration before the one using the variable (on the empty line above background: var(--red-color, red);).

2 Likes
3

You just need to add a background declaration to give a background color in the way you would do if you didn’t know about variables

2 Likes
4

I did a search of the FCC forums on June 18, 2019 for .red-box fallback and I got 125 results. There is obviously a problem with the lesson since most responses try to give the answer but most fail. FCC, for some unknown reason, is being very terse here. The CSS lessons start out using attributes like background-color but when one begins learning CSS variables FCC begins to use the shorthand background without warning or explanation. It is used and the tests expect you to use it the same way. In the real world background-color will work as an acceptable fallback. The syntax for the shorthand background follows. Note that background has been shortened to bg.

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

It is not necessary to use every attribute.

1 Like
5

I think part of the problem is also that there is no video or hint for the challenge. Which I’m guessing a lot of people at this point in the learning process still partially depend on. It looks like there is a guide article but the challenge does not link to it.

I will say the property the challenge is asking for is clearly marked, both in the challenge text and test output.

Having a challenge with a short mention of shorthand properties might work.

The fallback challenge test can be changed to check for both properties (background/background-color). Unfortunately, we can’t just use the computed property value for the background color for the test, because we are testing for a fallback, and as long as the browser supports variables the background will be red. But it isn’t much extra code.

The question is, is part of the challenge also to learn how to follow requirement instructions and if so should we keep the test more strict to help teach this.

I guess these are two separate issues that can be opened at the repo.

6

@lasjorg I’m not new to HTML and CSS, but am a student for much of the rest of the curriculum. Install git, clone the repo, search the source locally, then submit a pull request seems an awful lot for a student to accomplish to positively affect the course. So, I thought I’d post so maybe if someone actually searched first they’d get an answer.
Do you know what one has to do to get cleared to use FCC logos in a video? I see a lot of independent videos on Youtube that look FCC branded.

7

It doesn’t have to be you that makes the PR.

If you open an issue often someone will take on the task if the issue raised is deemed worth a fix. Issues can be used just to raise awareness or gather opinions on something. I will say it is a great learning opportunity if you want to learn about git and GitHub workflow.

I don’t know about the logo, but I think most if not all the videos for the challenges are made by Beau Carnes, he also does a lot of the youtube videos.

8

Thanks for the PR clarification. Here’s a google SR link for Dylan Israel:
Dylan Israel FCC videos
I’ve probably watched too much youtube. I know I’ve seen others that appear to be branded.

9

Right, I think FCC has a fair bit of guest presenters. I’m guessing it works much like writing articles for FCC does, I’m sure there are both official and back channels to get your videos either on the FCC channel or have some videos on your own channel. I don’t really know anything about it, try posting on the contributors part of the forum if you have any specific questions about this.