We are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics. Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment, slides for instructors and a video going over the lesson concepts.
We have chosen two pedagogical tenets while building this curriculum: ensuring that it is project-based and that it includes frequent quizzes. By the end of this series, students will have built two games, a business app, a browser extension, and an art app, and will have learned the basics of JavaScript, HTML, and CSS along with the modern toolchain of today's web developer. By ensuring the content aligns with projects, the process is made more engaging for students and retention of concepts will be augmented. In addition, a low-stakes quiz before a class sets the intention of the student towards learning a topic, while a second quiz after class ensures further retention. This curriculum was designed to be flexible and fun and can be taken in whole or in part.
| Project Name | Concepts Taught | Learning Objectives | Linked Lesson | Written Lesson | Sketchnote | Assignment | Starting Quiz | Ending Quiz | Slides | Video | Author | Date for completion of Lesson text and Quizzes | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Jasmine | ||||||||||
| 02 | Getting Started | Basics of GitHub, includes working with a team | How to use GitHub in your project, how to collaborate with others on a code base | Floor | end Sept | ||||||||
| 03 | Getting Started | Accessibility | Learn the basics of web accessibility | Accessibility Fundamentals | ✅ | ✅ | ✅ | ✅ | ✅ | Christopher | |||
| 04 | JS Basics | JavaScript Data Types | The basics of JavaScript data types | Data Types | ✅ | ✅ | ✅ | ✅ | Jasmine | ||||
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an application's logic flow | Functions and Methods | Jasmine | ||||||||
| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions in your code using decision-makinig methods | Making Decisions | Jasmine | ||||||||
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | Arrays and Loops | Jasmine | ||||||||
| 08 | Terrarium | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | Introduction to HTML | ✅ | ✅ | ✅ | ✅ | ✅ | Jen | end Sept | ||
| 09 | Terrarium | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | Introduction to CSS | ✅ | ✅ | ✅ | ✅ | Jen | end Sept | |||
| 10 | Terrarium | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | JavaScript Closures, DOM manipulation | ✅ | ✅ | ✅ | ✅ | Jen | end Sept | |||
| 11 | Typing Game Final Project | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | Event-Driven Programming | Christopher | end Sept | |||||||
| 12 | Green Browser Extension | Working with Browsers | Jen | mid Oct | |||||||||
| 13 | Green Browser Extension | Working with an API, building a Form | Jen | mid Oct | |||||||||
| 14 | Green Browser Extension | Methods and Functions | Jen | mid Oct | |||||||||
| 15 | Space Game | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game | Introduction to Advanced Game Development | ✅ | ✅ | ✅ | ✅ | Chris | early Oct | |||
| 16 | Space Game | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | Drawing to Canvas | ✅ | ✅ | ✅ | ✅ | Chris | early Oct | |||
| 17 | Space Game | Moving elements around the screen | Discover how elements can gain motion using the cartesian coordinates and the Canvas API | Moving Elements Around | ✅ | ✅ | ✅ | ✅ | Chris | early Oct | |||
| 18 | Space Game | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | Collision Detection | ✅ | ✅ | ✅ | ✅ | Chris | early Oct | |||
| 19 | Space Game | Keeping score | Perform math calculations based on the game's status and performance | Keeping Score | Chris | early Oct | |||||||
| 20 | Space Game | Ending and restarting the game | Learn about ending and restarting the game, including cleaning up assets and resetting variable values | The Ending Condition | Chris | early Oct | |||||||
| 21 | Banking App | Layout and Route a Web Site | |||||||||||
| 22 | Banking App | Build a Login and Registration Form | |||||||||||
| 23 | Banking App | Concepts of State Management | |||||||||||
| 24 | Banking App | Methods of Fetching and Using Data |