Anyone notice that some of the challenges don't demonstrate best practices?

1

Here’s one example.

In the Create a Set of Radio Buttons challenge of the HTML5 and CSS section (https://www.freecodecamp.org/challenges/create-a-set-of-radio-buttons), it states:

Here’s an example of a radio button:

<label><input type="radio" name="indoor-outdoor"> Indoor</label>

Yet, in more official Mozilla documentation (How to structure a web form - Learn web development | MDN), it states:

Note that a widget can be nested inside its element, like so:

<label for="name">
  Name: <input type="text" id="name" name="user_name">
</label>

Even in such cases however, it is considered best practice to set the for attribute because some assistive technologies do not understand implicit relationships between labels and widgets.

I’ve noticed other cases like this as well in various challenges. Is anyone else concerned about this and how it might impact newer learners? I worry that I’ll learn something in FCC that’ll I’ll later be told is wrong.

Also, for those who would justify this type of FCC inconsistency with best practices, what is your reasoning?

1 Like
2

I agree that it’s best to follow best practices, particularly if it’s recommended by a trustworthy source.

Do note that freeCodeCamp is a non-profit mostly run by volunteers—if you notice things like this and have documentation to support your argument, it would be absolutely fantastic if you could open an issue on GitHub so that future Campers can benefit from any changes made. :slight_smile:

3 Likes
3

@honmanyau Cool. I guess my concern is larger than this example and specific code.

If I’m the first to notice this one example (and presumably the other issues I’ve noticed), that means many people have already been learning something that’s not considered best practices.

I’m worried that when I get to stuff I don’t know, I, too, will learn something from FCC that’s not the recommended best practice. In some sense, that’s a waste of my limited time, especially if I have to change code in many portfolio projects.

The overall questions are:

  • How does FCC keep up with best practices?

  • Are best practices important to teach and demonstrate?

  • If the process up to this point is letting too many non-best practices slip through, what needs to change?

One solution might be to cite code in demos and examples by linking to Mozilla and other official sources.

4

By you (and everyone else who sees room for improvement) creating an issue and, if possible, fixing the issue.

Unless you are a pro, I can guarantee that such little things will be the least of your worries when it comes to creating clean and good code.

fCC is not wrong in what it teaches. As you mentioned it could be improved, but it is valid code that will work for everyone except for probably a few screen readers.

I would also like to point out that fCC’s code is easier for beginners. By putting the input inside the label you don’t have to worry about some attributes (for, id).

6 Likes
5

Expanding on @BenGitter’s second point—I think your concerns are perfectly valid but because of the nature of how fCC is structured and directs you to learn, it will become progressively less of an issue. For example, you will find that there are a lot of references to MDN in the JavaScript algorithm section of the curriculum.

The above may sound like a bit of a cop out, but the fCC curriculum really isn’t meant to be self-contained and is there mostly to provide guidance and directions—I personally still check relevant documentations as often as possible (which you seem to be doing, too); and when I notice something that I think isn’t quite right I simply open a ticket after fact-checking.

As for coming back to change codes in your projects—even if you have done everything according to best practices, you will most likely end up changing codes in your project. It could be replacing animated <div>s with SVG animation; it could be replacing Bootstrap with a light-weight library; it could be visual adjustments because you have learned something new about typography and colours. I think you get the idea by now, so I’ll stop the examples there!

If you choose to continue to learn with fCC (I hope you do!), I strongly recommend following the beta curriculum instead. I completed the current curriculum about three weeks ago (except for one project that requires a bit of visual touchups), the biggest issues I find with the current curriculum is that the JavaScript section in outdated—it doesn’t mention anything about the fantastic ES6 and it teaches you jQuery before JavaScript (I’m of the opinion that jQuery really shouldn’t be taught anymore).

Ehh… this is turning out to be longer than intended. I hope that helps! :slight_smile:

4 Likes
6

Don’t. Even if what you learn here is less than the totality of everything involved in web development, none of the curriculum is “wrong”. Do be prepared to continue learning things after you’ve completed the course, though.

1 Like
7

I worry that I’ll learn something in FCC that’ll I’ll later be told is wrong.

First of all, “best practices” is often a moving target. When the person that wrote that learned, that my have been the best practice. Best practice can also sometimes be subjective. I don’t know this topic very well, just in general.

Second, sometimes in teaching you need to withhold information to make it easier for the student to digest with the understanding that the more complex understanding will come later. The example I like is that Bohr model of the atom we’re taught in school is nothing like it is in real life (to the best of our knowledge) but a junior high school student isn’t ready for calculus and quantum mechanics.

Lastly, as suggested, you can raise the issue and/or make the code adjustments yourself.

I think it’s important that it’s easy to bike-shed and nitpick over issues, but the larger issue is that a lot of people are learning web development. Yes, they need to learn some other things and maybe a few things need adjustment, but people are learning, including you. Having to readjust a few details isn’t going to be that much of a deal.

1 Like
8

@honmanyau Thanks for your answer! I created an issue on GitHub about this particular challenge: https://github.com/freeCodeCamp/freeCodeCamp/issues/15946.

1 Like