theodinproject / javascript_curriculum

THIS REPO IS ARCHIVED

Please submit your solutions to the TheOdinProject/curriculum repo

The Odin Project - Javascript Curriculum

Mission statement

Our main focus is the cultivation and sequencing of best free resources around the internet. We believe wholeheartedly that everything one needs to know to become employed can be found for free online, but for the average new learner, the vast amount (and widely varying quality) of resources makes it difficult to make a meaningful progress. We have devised a three basic steps to fix this.

1. We have created a curriculum that attempts to find the optimal sequencing of information. This curriculum is intended to take someone from knowing literally nothing about Web Development to a point where they could be employed as a Junior Developer.
2. For each topic in the curriculum we try to find the best free resources on the internet to teach that topic. We will often link multiple resources, thereby not relying too much on a single source of information. If good resources can not be found, we write our own, but we definitely prefer primary link to external sites.
3. We invent and cultivate projects that give learners a chance to practice what they have learned and integrate skills along the way, which increases information retention, giving the learner a chance to experiment and allows the learner to build an impressive portfolio.

Additionally, we have made our learning materials completely open-source. This means that if anyone comes across a resource that is better than what we currently have included in our lessons, that person is free (and encouraged!) to add them, which improves our curriculum over time, and helps it to stay up-to-date.

Contributing

If you would like to contribute to this project please contact us here. For the moment, the project leader on this is Cody Loyd (@codyloyd in the gitter room) so feel free to ping him if you have any questions.

javascript_curriculum's Issues

DOM manipulation - onload event is not explained.

In the second practice of the DOM manipulation lesson, students are expected to make a GUI for their console game, but the window.onload event (or its equivalent) is not mentioned here, or in the previous lessons if i'm not missing anything. As a result, DOM selector methods execute before the page loads and the students are left confused as to why their code isn't selecting anything :) I was able to realize and fix this because I did the older course with the jQuery some time ago, where this concept was explained, but a first-time javascript user wouldn't know this.

Objects/this lesson

Before properly getting into OOP students should have a good grasp of Objects and scope/this

Much of this lesson could be handled elsewhere(Fundamentals 3 in JS101, Call/Apply/Bind, OOP)..but I'm leaving it as an issue for now in case there are issues we aren't covering

It could be that these get pulled into a series of 'OOP in JS' lessons

JS101 - DOM manipulation

Here's where we introduce putting JS and HTML together. DOM Manipulation with Javascript.

It could be that this needs to be split into multiple lessons.. that'll depend on how it plays out once we start writing it.

we should 100% definitely stick to PLAIN JS. Not jQuery. might even be worth mentioning that this is the type of stuff that many people rely on jQuery for.

concepts to be covered:

1. querySelector (querySelectorAll)
2. classList.add/remove/toggle etc.
3. innerHtml/textContent
4. events/eventListeners
5. appendChild etc.

this would be a great place to include and recommend JS30.. most of those lessons are just simple DOM-manipulation projects with vanilla JS.

should do some simple example project. Something simple that requires some user interaction like a tip calculator or something (put in the cost and the tip percentage and have it display the amount onscreen)

JS101 - Second Steps Lesson

cover further JS stuff that wasn't covered in first-steps

1. Operators/Comparisons (from Javascript.info)
2. if/else
3. loops
4. functions
5. objects
6. advanced array functions (maybe??)

Headings for Lesson Navigation

The lesson navigation feature will use headings that are common to most lessons, these are as follows:

• Introduction
• Learning Outcomes
• Assignment
• Additional Resources

Each of these headings need to be h3's

I'm aware that a lot of the lessons in the JS course do not currently have these sections. But we should put the headings in for the sections that do exist in the lessons currently. For example most lessons will have an Introduction and an Assignment.

JS101 - points to ponder

This issue entails going through the lessons in the JS101 course, reading or skimming through the resources and populating the "points to ponder" section of each lesson.

The idea behind this section of the lesson is to give students a chance to self-reflect on the things they've learned and make sure they've picked up everything they need from the materials. Here's an example of the format from the "Fundamentals 1" lesson:

Points to Ponder

Use this section to quiz yourself. If you know all these answers then you can comfortably skip, or at least skim through this lesson. After the lesson, come on back here and read these again to make sure you haven't missed anything crucial.

• What are the 7 basic types in Javascript?
• What is a variable, and how do you declare one in Javascript?
• Can you name all 3 ways to declare a variable in Javascript and when would you want to use each one?

test-first-JS

a series of javascript exercises that models the format of the test-first ruby stuff and exercism... basically each one is a series of tests that students should make pass one-by-one.

I'm envisioning a pretty lengthy list of them that get broken up and assigned one by one throughout the course.

Missing Image

https://www.theodinproject.com/courses/javascript/lessons/working-with-apis?ref=lnav

There is a missing image under the 'response' section.

Pages missing 'Next Lesson' button

Two pages have been found to be lacking the 'Next Lesson' button to go on to the next page.

javascript_curriculum/JS101/fundamentals/fundamentals-5.md
https://www.theodinproject.com/courses/web-development-101/lessons/fundamentals-part-5

&
javascript_curriculum/JS101/final-project.md
https://www.theodinproject.com/courses/web-development-101/lessons/calculator

webpack

We don't need to go TOOO far into this... but once we start really digging into OOP and Babel and other things it will be useful to know how to compile/transpile your code so you can write with multiple files and use new features in older browsers etc.

Also, just about all the front end frameworks use webpack to run these days, so this will be important prereq for that stuff if we ever get there.

Scope/Closures lesson

All about scope and Closures....

JavaScript Testing

Students will have had exposure to TDD by doing our JS exercises, so they should already have some idea of the process although they will not have written any of their own tests at this point.

This lesson should reiterate the importance/usefulness of TDD in general and then discuss the syntax for writing tests. We're using Jasmine, though it might be useful to at least mention the other big frameworks (Mocha, Chai, Jest) . They all do more or less the same thing with very similar syntax even.

Should have a relatively simple project where students are encouraged to TDD their code.

Add a Link to File on Github on Projects

On chat we've seen some students confused about what repo they should submit thier solution to for a project.

A quick and easy solution to this problem we have done on the ruby course is to add this kind of line below the "Student Solutions" heading:

Submit a link below to this [file](https://github.com/TheOdinProject/ruby_course/blob/master/ruby_programming/basic_ruby/advanced_building_blocks_project.md) on the ruby course github repo with your files in it by using a pull request.  See the section on [Contributing](http://github.com/TheOdinProject/curriculum/blob/master/contributing.md) for how.

JS101 Dom Manipulation Project

write the project........

Incorrect webpack syntax

The webpack tutorial uses npx webpack rather than just webpack, so this page as well as the restaurant assignment page may need to be updated. In addition, the bundle file is called main.js now.

are-you-beta-testing-for-us

Hey Cody,

Where should people go to beta test the content? Is it live yet on your website or should they go through this repo?
I'll be getting some new students soon and I'd like to send them here to get more contribution activity for you.

If you could put links in this are-you-beta-testing and some more specific instructions for following it, that'd be helpful.

I'm also willing to join the new chatroom for testing it if that would help.

Evan

Gitbooks link sends to legacy gitbooks and returns a 401 error

https://the-odin-project.gitbooks.io/javascript-curriculum/ in the root README sends to a legacy login and when you sign in with your github account it gives this error

Weird JS

JS is full of wierd quirks. would you like to have a lesson (sort of a side resource, not central necessarily) that covers some of the primary ones?
type conversion, ...

JS101 - DOM Manipulation Project

Pick a project... I like the classic etch-a-sketch. No reason we shouldn't keep it.... note that we're losing jQuery so we should make sure that the DOM-manipulation lessons cover enough material to make it possible.

Up for suggestions though 😃

JS101 - Using DevTools

this lesson is all about what you can do with chrome's devtools to debug and work with Javascript

shouldn't be tooo long... maybe jsut a couple of vids to watch.

es6 lesson

I am hoping that we will not have to cover too much here.. Presumably many of the syntax things and features will be covered in earlier lessons.. however there are a few little details that need covered, including a section on transpilers. things to cover include:

Babel! (maybe we should write our own.. but this tutorial is pretty hip https://github.com/verekia/js-stack-from-scratch)
Destructuring
Arrow Functions
??? probably something else I'm forgetting

Probably don't need projects here.. students can just start working this stuff into their current work. Might suggest students go back to a previous project and look for ways they could use these techniques

Final JS101 projects

The project is already decided, just need to write the lesson.

2 projects =>
on screen calculator
more JS test-first exercises

PROOOFREADING

Read some lessons... fix my bad grammar. 🍡

JS101 - Running Javascript

this lesson describes how to run javascript code in various contexts including online (repl.it, codepen, jsbin), included in an HTML file (on the page and included as a script), in the browser (devtools) and in a terminal (node)

All of these JS environments are useful in their own ways so the lesson should highlight when and why each is appropriate.

JS101 - What the Javascript?

I'm still not completely convinced that we need this lesson, but it might be a good idea to include it. The idea would be a bit about what JS is, how it works and maybe a bit of history as a good intro to the course before diving directly in the code.

Call/Apply/Bind lesson

These are important for a deeper understanding of how JavaScript actually works.

JS101 - Second Steps Project

more advanced problems to solve... should probably look/work just like the first-steps project.

might want to refer students to the FCC algorithm scripting lessons as a test of their own skill.

If we do, we should go through the FCC algorithm scripting and make sure that we've covered everything students need to do them. (even if we don't that would be a good idea... just to make sure we haven't unintentionally skipped anything)

OOP (Prototypal inheritance) lesson

Discuss Object Oriented Programming in JavaScript

JS DOES NOT HAVE CLASSES. This section is important.. crucial even because students will may be coming from Ruby or Java or any other language that handles inheritance differently

Prototypal Inheritance:
What/How
WHY.
Prototypes vs. Classes

Projects may include anything.. will have to brainstorm on that... some sort of game like connect-four or battleship. Maybe tictactoe if we haven't hit it yet.