Skip to main content

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โ€‹

WebDevSketchNote


Lesson Plansโ€‹

Topic / LinkDescription
1. Intro to Programming Languages and Tools of the TradeLearn the basic underpinnings behind most programming languages and about software that helps professional developers do their jobs
2. Intro to GitHubHow to use GitHub in your project, how to collaborate with others on a code base
3. Accessibility FundamentalsLearn the basics of web accessibility
4. Data TypesThe basics of JavaScript data types
5. Functions and MethodsLearn about functions and methods to manage an application's logic flow
6. Making DecisionsLearn how to create conditions in your code using decision-making methods
7. Arrays and LoopsWork with data using arrays and loops in JavaScript
8. Introduction to HTMLBuild the HTML to create an online terrarium, focusing on building a layout
9. Introduction to CSSBuild the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive
10. JavaScript Closures, DOM manipulationBuild the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation
11. JavaScript Closures, DOM manipulationLearn how to use keyboard events to drive the logic of your JavaScript app
12. About BrowsersLearn how browsers work, their history, and how to scaffold the first elements of a browser extension
13. APIs, Forms, and Local StorageBuild the JavaScript elements of your browser extension to call an API using variables stored in local storage
14. Background Tasks and PerformanceUse 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 DevelopmentLearn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game
16. Drawing to CanvasLearn about the Canvas API, used to draw elements to a screen
17. Moving Elements AroundDiscover how elements can gain motion using the cartesian coordinates and the Canvas API
18. Collision DetectionMake elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game
19. Keeping ScorePerform math calculations based on the game's status and performance
20. The Ending ConditionLearn about ending and restarting the game, including cleaning up assets and resetting variable values
21. HTML Templates and RoutesLearn how to create the scaffold of a multipage website's architecture using routing and HTML templates
22. FormsLearn about building forms and handing validation routines
23. DataHow data flows in and out of your app, how to fetch it, store it, and dispose of it
24. State MangementLearn how your app retains state and how to manage it programmatically

Meet The Teamโ€‹