Majoirty of Basic CSS course is incompletable

HTML-CSS
1

So this is making it difficult to learn CSS as I have to hop in and out of tutorials, often losing track of what i just completed.

The issue is that with both Firefox and Chrome (OSX 10.13) do not recognize appropriate code. If this issue was confined to Firefox, then it would be understandable, but chrome uses Webkit and shouldn’t fall into the same error that Firefox apparently does.

Can we get someone to actually fix this problem? It just makes it harder to learn CSS and appears to be completely unnecessary. I have copied and pasted several solutions but it can not recognize that h2 IS red. It just won’t accept any answer.

Why is this not fixed? This seems to be a systemic issue that the end-user can not fix, and appears to effect the entire course. Additionally, many similar posts on this forum and stack overflow exist and remain unanswered.

This is a REALLY bad look as things stand.

2

Most times when people have issues with color related challenges, it is because of some extension installed that changes the look. Like dark mode/reader extension.

1 Like
3

Hello and welcome to the forum :partying_face:!

Where are You having problems?

I know there are some issues with some tutorials (usually they expect the syntax to be exact, whereas we know it’s right regardless), but I (among others) was able to finish the Responsive Web Design Certification on Firefox.

Maybe we can help You here :slight_smile:.

4

Can you please provide an example of the full code you think should work that does not pass the challenge tests? Also, please provide the url of the challenge.

Thank you.

5

The first 4 appear to not work. I checked a little further ahead and it was still outputting issues. The code is correct. I understand that each tutorial doesn’t have to be completed, but you lose all of your progress every tutorial, which makes things very hard if you have ADHD, like I do. I just want to follow along like the tutorials want me to, but it is impossible as things stand.

https://www.freecodecamp.org/learn/responsive-web-design/basic-css/change-the-color-of-text is the first one, and it is impossible. The following 3 follow suit. I didn’t bother to check all of them because this isn’t my job, but they do not work on firefox and chrome - at least on osx 10.13, which really shouldn’t matter given that this is a web application.

<h2 style="color: red;">CatPhotoApp</h2>

and later on…

<style>
  .red-text {
    color: red;
  }
</style>

I can copy and paste in verified answers and they refuse to work.

6

Again, if you can answer both questions in my last reply, we can begin to help you more.

7

I’m literally repeating myself now. It’s not like I’m the only one with these issues.

8

Thank you for posting your code. I assume the following code was used for the Change the Color of Text chalelnge?

<h2 style="color: red;">CatPhotoApp</h2>

Are all the tests failing or only certain ones? Also, can you tell us if there are any errors showing in your browser console (Ctrl+Shft+J in Chrome)? If so, can you please post a screenshot of the console error messages in a reply?

9

The challenge you linked to and the three that follows it are all color related challenges.

Again, do you have some extension installed that changes the colors in the browser. Like a dark mode extension? If you do you need to disable it. You can use the fCC dark mode instead, it is under the profile settings.

10

@lasjorg You were actually helpful, thank you. This was the issue.

I have dark reader installed on both firefox and chrome, yet i do not understand why these interfere with the test to begin with? Shouldn’t the input text just be parsed, instead of relying on rendering the page? That just seems like introducing a point of failure that will be continually broken as more extensions do similar things, in addition to browsers supporting ‘dark-mode’ webpage rendering. That may break things too…

@RandellDawson, I already gave you all relevant information. Continuing to ask for the same information didn’t help me at all. Take notes, you just agitated someone who was already aggravated. Enough said.

TL;DR
[Solved]
Don’t use Darkreader, or any other extension that changes how pages are rendered. For some bewildering reason it seems to break all CSS-related challenges. If you find this via google, please spread the word as many instances of this exact question remain unanswered.

11

@nonamehomie Sorry that you felt so agitated with my replies. I was only trying to help you as I do with all of the thousands of users I have helped over the past few years. I asked to see what code you actually had tried and the challenge url. Until, you posted the code and the challenge url, there was no way to no for sure what the issue was. It could have been you merely had a typo. @lasjorg’s response was a guess that was only validated once you posted the code.

The majority of the Free Code Camp curriculum is created and updated by volunteers. The volunteers do their best to make the tests as flexible as possible. When users use browser extensions, we have no way to control what that extension may do to our site.
Because of this, it is not feasibly create workaround solutions to work with every possible browser extension out there.

3 Likes
12