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)

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.

All about scope and Closures....

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, ...

write the project........

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

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

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.

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??)

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

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?

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

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)

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

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 😃

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.

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

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.

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.

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.

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.

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.

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

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.

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

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

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

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

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.

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.