Freecodecamp: First jQuery challenge should mention linking to library + HEAD

Created on 29 May 2016 · 12Comments · Source: freeCodeCamp/freeCodeCamp

Challenge Name

"Learn how Script Tags and Document Ready Work":
https://www.freecodecamp.com/challenges/learn-how-script-tags-and-document-ready-work

Issue Description

This is a text/content suggestion.
The very first jQuery challenge doesn't in any way mention that an HTML page needs to actually link to the jQuery library.
Beginners really need to know/learn that all the effects don't just come out of nowhere. This type of linking to a library (CSS) is explained in the Bootstrap introduction so why not do this for the jQuery introduction as well?

_Additionally: it doesn't mention that these particular exercises also make use of another totally different JS library. This really frustrated me when I implemented the code in SublimeText for extra testing and playing around with the basics. (In this case it also uses https://daneden.github.io/animate.css/ but that isn't necessary to know for beginners so this doesn't need to be addressed in this issue_).

Suggestion

I would suggest to add this text to this challenge:

You can add jQuery to any page just by including it by adding the following code to the head of your HTML:
<script src="http://code.jquery.com/jquery-1.12.4.min.js" ></script>
In this case, we've already added it for you to this page behind the scenes.

This means that the concept of the <HEAD> tag needs to be explained somewhere as well! At this moment I haven't seen any mentioning of the <head> anywhere on FCC. I know that is a separate issue though.

Example:

Here's how the FCC Bootstrap intro does it clear enough for beginners (except for choosing the word 'app' instead of page):
https://www.freecodecamp.com/challenges/use-responsive-design-with-bootstrap-fluid-containers

learn discussing

Source

jolarti

👍1

Most helpful comment

@jolarti this seems like a subject that could be covered better in a wiki article or in a video challenge, rather than a challenge in FCC's curriculum. The reason is this isn't a good interactive lesson.

As you can see here, Chrome parses my raw HTML (without any of those tags you mentioned) just fine:

Yes - this is important to understand what goes in the head and what goes in the body, and that there's a title tag (though all of these things are handled by all major web frameworks for you). Campers probably won't encounter it early on unless they download a static HTML template.

Would you be interested in creating a wiki article explaining the structure of an HTML page, and we can look into creating a video challenge about this?

QuincyLarson on 31 May 2016

👍4

All 12 comments

@jolarti thanks for the feedback. I like the addition of informing people of some of the behind the scenes code. I can see how this could frustrate someone copying the code locally and failing to create the webpage.

As far as the introduction of <HEAD> tags, I think we could put in the beginning of the Bootstrap section, in front of "Use Responsive Design with Bootstrap Fluid Containers".

cc/ @FreeCodeCamp/issue-moderators

erictleung on 29 May 2016

👍1

Agreed.

raisedadead on 29 May 2016

👍1

Sounds good 👍

ghost on 30 May 2016

The rather more serious issue underlying this is that FCC doesn't explain what an HTML file looks like. It doesn't even start with the usual oldschool basics of, well you know:

<html>
<head>
  <title></title>
</head>
<body>
...
</body>
</html>

This is probably because of the way the code editor in browser works at FCC? This doesn't show the head - but that would not be a good reason for any curriculum to be trimmed down I'd say.

jolarti on 31 May 2016

I think this information does warrant inclusion. Not only "Hey this is the basic overall structure of an HTML file", but also a quick explanation of why our in browser editor, along with Codepen and others, doesn't include certain structural markup.

terakilobyte on 31 May 2016

As you can see here, Chrome parses my raw HTML (without any of those tags you mentioned) just fine:

Would you be interested in creating a wiki article explaining the structure of an HTML page, and we can look into creating a video challenge about this?

QuincyLarson on 31 May 2016

👍4

One other note is that soon we will have multi-flie editor (@berkeleytrue is almost done reactifying our existing courseware framework and will then build this). It might make sense to introduce these additional HTML structural tags once we have that live.

QuincyLarson on 31 May 2016

@QuincyLarson, it's bad practice however if you don't use head tags etc.

ghost on 31 May 2016

👍1

@doctordotsconn looks like you may have accidentally subscribed to all notifications for the FreeCodeCamp repository. To stop receiving notifications please visit the subscriptions page and select "Not watching".

We are sorry for your inconvenience!

erictleung on 31 May 2016

@QuincyLarson when you say "Campers probably won't encounter it early on..." this worries me. I'm a beginner and all I do is just do the challenges, assuming it will teach me the fundamentals I need to know. I would think that most beginning campers will do and think the same.

Now I am worried if there is more that I am missing out of, when only doing the challenges.
If not, there should be a disclaimer that says something like "_Don't just do the challenges, make sure to check out all introductory pages on our wiki here (+ a link to it)_"

jolarti on 4 Jun 2016

👍1

@QuincyLarson I like @jolarti suggestion at the very least of mentioning that you can add the Animate library using a link element.

So the first lesson in the jQuery sequence, we can have the text

I would suggest to just add @jolarti's suggested text to this challenge:

You can add jQuery to any page just by adding the following code to the head of your HTML:
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
In this case, we've already added it for you to this page behind the scenes.

I actually forgot about this when debugging someone else's code until I realized I was missing a library so at the very least, I think this should be added to the challenge instructions.

But I agree that teaching about the head code block is not very interactive and can possibly be put into a Wiki article.

erictleung on 17 Jul 2016

I believe our expanded challenges cover how the head element works and show included libraries, so I'm closing this issue.

QuincyLarson on 4 Jan 2017

Was this page helpful?

0 / 5 - 0 ratings