freeCodeCamp: Semicolon missing in example code

@shubhshrma : Eric wanted to mention you! Good luck and happy fixing!

Thanks @erictleung , that explains a lot about backup/master to me. 👍

Though I agree on it being a good habit (one I apply myself without exception), since we’re making an exception to the unspoken rule of ‘not doing inline styling unless absolutely necessary’ for the sake of simplicity in learning, we should also not add seemingly complex concepts like ending a phrase with a semicolon. It is obvious to us because we know it’s a good idea, but a beginner wouldn’t know what that is for or why this new language requires it at all.

At that stage of the curriculum (first example of styling in the whole map) it is an unnecessary element, which could add daunting syntax complexity to absolute beginners, and would possibly require an explanation as to why there’s some seemingly random punctuation mark right before closing a set of quotes. This explanation would lengthen the instructions and increase the already steep learning curve far too early in the process.

Again, I do not ever write my styles without those pretty semicolons (I like them, visually), but for the sake of ease in onboarding: My vote, no. This challenge is fine as is.

It seems like the example technically isn’t wrong. I would vouch to update it and add a semicolon. It could help prevent confusion and mistakes. It adds value, and doesn’t take any away. Seems like a good idea to me!

As someone who used FCC and other online tutorials to learn HTML and CSS and currently works in email design, that missing semicolon would cause ALL KINDS of issues that are especially hard to debug because every HTML element in an email contains inline-styles, so good luck finding where you left out that semi-colon.

More generally, if I were writing this out as I might in a stylesheet, wouldn’t you typically include a semi-colon after each style regardless of whether there was one or more styles?:

<style>
  p {
    font-size: 16px;
  }
</style>

Why wouldn’t you do the same for inline-styles?

@shubheksha yes, the three things that should be added are:

1. Add semicolon to example code in challenge description
2. Add a note about adding semicolons (search around other challenges in the source code to see how to add notes in the right format)
3. Add test to check for semicolon

Please first read the contributing guidelines before taking care of this issue. And feel free to visit the Contributors Help chat room if you have any questions about helping. We’re there to help.

@MontanaWebmaster-Nora my two cents on the matter is that you should use classes when possible. As it is pointed out, FCC is a learning environment and so here we wanted to teach about how to style elements using inline style elements. But in the future and in production systems, you might go with classes rather than inline style elements because of extensibility and portability.

Here’s a discussion on using inline style versus classes that goes along with my thoughts.

So all in all, I don’t feel there should be a semi-colon at the end of the example inline styling.

If we were talking about CSS rule declarations rules as @BKinahan has brought up, then I would always have trailing semi-colons even for one style in a class.

It might be worth adding a semicolon to make sure our campers don’t fall into that mistake with multiple styles in the future? cc/ @FreeCodeCamp/Issue-Moderators