Missing Info for Site and Code Examples in Lectures

freeCodeCamp Support
1

Hi, I am working through the FSD program and I’ve noticed a few confusing things.

  1. While there are many code examples, one can’t actually see what’s happening without using an IDE. I copy and paste into VSCode when I want to see what’s going on, but for complete beginners I didn’t see any instruction on doing so, which I think could be confusing for beginners especially since the course is centered around the in-browser IDE.
  2. I noticed in some lectures (currently referencing User Interface Design Fundamentals: How Do You Create Good Background and Foreground Contrast in Your Designs?) there’s reference to using the inspector or example sites, but the sites or full directions are not shown? Am I missing something?

Let’s open the developer tools and inspect the text elements of the example site.

The black text on a white background has a contrast ratio of 21:1, which more than meets the AAA standard. The purple text on a blue background, however, has a contrast ratio of 1.48:1, which does not even meet the AA standard.

How can you fix this? Well, there are three aspects that impact the contrast ratio.

The first is the hue, which represents the general color type, like red, blue, orange. Let’s shift to a hue that is further away from blue. In this case, let’s use red.

Unfortunately, this change only brought the contrast ratio to 1.49:1, which means you need to change the saturation, or the “amount” of color present. Let’s increase the amount of red in the text. That brings us much closer to the goal, with a 3.54:1 contrast ratio.

If I am not understanding fully, thanks for any explanations!

2

we are working on improving the lectures, I have linked the issues below that track the work we are doing, but this “Let’s open the developer tools and inspect the text elements of the example site.” may need a bigger adjustment. Would you mind opening an issue yourself specifically for this lecture?

1 Like
3

I see, thanks for the reply! I sure can, would this best fall under a User Interface or Content issue?

4

this would be a content issue.

If you need help using the developer tools, there are some great tutorials offered by google chrome’s browser on this.

1 Like