SDEV-1150

This January 2026 is the first time I am teaching the SDEV-1150 course. While I’m familiar with JavaScript, I’m still discovering how the material is organized/prioritized in this course.

In each of the upcoming lessons, I will include the posted Learning Outcome Guides (LOGs). In this first delivery, I might also lean on the agenda on my Instructor Workbook. In the past, I used agendas like these as a reference for what we will be covering in class and as a simplified way of grabbing the starter kits to use in your student workbook.

Student Textbook

This course uses a textbook which is available free online to NAIT students.

1. Visit the O’Reilly website.

2. Choose the “Affiliated with a school or institution” option.

   

3. Enter your school name.

   

4. Follow the remaining login with your school email account.

JavaScript from Beginner to Professional

Chapter titles include:

1. Getting Started with JavaScript
2. JavaScript Essentials
3. JavaScript Multiple Values
4. Logic Statements
5. Loops
6. Functions
7. Classes
8. Built-In JavaScript Methods
9. The Document Object Model
10. Dynamic Element Manipulation Using the DOM
11. Interactive Content and Event Listeners
12. Intermediate JavaScript
13. Concurrency
14. HTML5, Canvas, and JavaScript

Scheduled Lessons

The following are the planned lessons in the curriculum. They roughly correspond to the class periods that we have (though I may take the first two classes to get you familiar with the software and your student workbook).

1. Introduction to Front End Development
2. Foundations (HTML, CSS, JS, Build Tools)
3. Intro to JavaScript: Types, Variables, Built-in Functions
4. Flow and Debugging in the Browser
5. Introduction to the Document Object Model (DOM)
6. Dynamic content
7. DOM Exercises
8. Intro to Event-Driven Applications
9. Event-driven UI
10. Form Event Handling
11. HTML Form Validation
12. Event and Form Exercises
13. Intro to package management
14. Building with Packages
15. HTTP and Server-side API Endpoints
16. Async JavaScript and the Fetch API
17. API and Fetch Exercises
18. Debugging Front-End Async Applications
19. Building components
20. Styling components
21. Component communication and State
22. Web component basics exercises
23. Component Lifecycle and State Management
24. Testing Web Components
25. Front-End application Troubleshooting
26. Exploring advanced DevTools features
27. Deploying Web Applications
28. Front-end application deployment exercises
29. Introduction to React: Components & JSX
30. React State & Event Handling

---

JavaScript QuickStarts

You can explore JavaScript without any other web files (HTML/CSS) or even a web server! This is possible by using NodeJS.

To run a single JavaScript file in your student workbook using Node, do the following:

1. Open a new terminal in VS Code.
2. Change to this directory: cd src/js-quickstart
3. Run your script in watch mode. For example, if you have a file named sandbox.js, you can run it by entering node --watch sandbox.js.
4. Now, you can position your terminal and your JavaScript file side-by side and watch what happens as you edit and save your code!

Debugging

You can also open a JavaScript Debug Terminal and use breakpoints along with VS Code’s built-in debugging tools. It’s the same steps as above, but you begin with selecting JavaScript Debug Terminal from the terminal’s drop-down.

To put a breakpoint on a line of code, simply click on the left of any line number of your code (this area is called the gutter) to toggle breakpoints on and off.

To learn more about debugging, see Debug code with Visual Studio Code and Node.js debugging in VS Code.