Web Development
MIT-LICENSED, AVAILABLE ON GITHUB
For Beginners, 12 weeks, 24 lessons: Explore Curriculum Contents
Web Development for beginners is a curated curriculum developed with teachers in mind (for a semester-long course) but also suitable for self-paced learning. The content is open-source and MIT-licensed for convenience.
- Covers HTML, CSS and JavaScript
- Pre- and Post- quizzes to reinforce concepts
- Assignments to validate understanding
- 5 hands-on projects to learn-by-doing
Illustrated Guide
Lesson Plans
| Topic / Link | Description |
|---|---|
| 1. Intro to Programming Languages and Tools of the Trade | Learn the basic underpinnings behind most programming languages and about software that helps professional developers do their jobs |
| 2. Intro to GitHub | How to use GitHub in your project, how to collaborate with others on a code base |
| 3. Accessibility Fundamentals | Learn the basics of web accessibility |
| 4. Data Types | The basics of JavaScript data types |
| 5. Functions and Methods | Learn about functions and methods to manage an application's logic flow |
| 6. Making Decisions | Learn how to create conditions in your code using decision-making methods |
| 7. Arrays and Loops | Work with data using arrays and loops in JavaScript |
| 8. Introduction to HTML | Build the HTML to create an online terrarium, focusing on building a layout |
| 9. Introduction to CSS | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive |
| 10. JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation |
| 11. JavaScript Closures, DOM manipulation | Learn how to use keyboard events to drive the logic of your JavaScript app |
| 12. About Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension |
| 13. APIs, Forms, and Local Storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage |
| 14. Background Tasks and Performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make |
| 15. Introduction to Advanced Game Development | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game |
| 16. Drawing to Canvas | Learn about the Canvas API, used to draw elements to a screen |
| 17. Moving Elements Around | Discover how elements can gain motion using the cartesian coordinates and the Canvas API |
| 18. Collision Detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game |
| 19. Keeping Score | Perform math calculations based on the game's status and performance |
| 20. The Ending Condition | Learn about ending and restarting the game, including cleaning up assets and resetting variable values |
| 21. HTML Templates and Routes | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates |
| 22. Forms | Learn about building forms and handing validation routines |
| 23. Data | How data flows in and out of your app, how to fetch it, store it, and dispose of it |
| 24. State Mangement | Learn how your app retains state and how to manage it programmatically |