# wesbos/beginner-javascript **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/wesbos-beginner-javascript).** 6,771 stars · 1,654 forks · HTML ## Links - GitHub: https://github.com/wesbos/beginner-javascript - Homepage: https://BeginnerJavaScript.com - awesome-repositories: https://awesome-repositories.com/repository/wesbos-beginner-javascript.md ## Description This is a video course that teaches JavaScript from scratch, covering fundamentals like variables, functions, scope, closures, and data types through 88+ lessons organized into 15 modules. The course uses a live-coding pedagogy where students code alongside pre-recorded video lessons, with each lesson providing starter and solution files for self-paced practice. The curriculum focuses on browser-native APIs, teaching DOM manipulation, event handling, and data fetching without external frameworks. Students build real-world projects like image galleries, drawing tools, and audio visualizers through 30+ hands-on exercises that reinforce concepts through progressive complexity scaffolding. The course covers program flow control, working with data types and structures, managing application state with local storage, and organizing code with ES modules bundled through build tools. It also includes practice with asynchronous HTTP requests to fetch data from external APIs. ## Tags ### Education & Learning Resources - [JavaScript Fundamentals Courses](https://awesome-repositories.com/f/education-learning-resources/javascript-fundamentals-courses.md) — Teaches core JavaScript concepts including variables, functions, scope, closures, and data types through structured video modules and exercises. - [JavaScript Learning Modules](https://awesome-repositories.com/f/education-learning-resources/javascript-learning-modules.md) — Teaches core JavaScript concepts through 88+ videos, 30+ exercises, and 15 modules covering basics to advanced topics. ([source](https://BeginnerJavaScript.com)) - [Curriculum Modules](https://awesome-repositories.com/f/education-learning-resources/curriculum-modules.md) — Organizes 88+ videos into 15 sequential modules covering fundamentals through advanced topics. - [Video-Based Lessons](https://awesome-repositories.com/f/education-learning-resources/deep-learning-curriculum/go-learning-curricula/live-code-lessons/video-based-lessons.md) — Teaches by having students code alongside pre-recorded video lessons with matching starter and solution files. - [Video Courses](https://awesome-repositories.com/f/education-learning-resources/educational-resources/reference-and-media/tutorials-media-curated-lists/interactive-learning-media/video-courses.md) — Uses starter files and solution code for each lesson to code alongside the instructor. ([source](https://cdn.jsdelivr.net/gh/wesbos/beginner-javascript@master/README.md)) - [Hands-on Projects](https://awesome-repositories.com/f/education-learning-resources/hands-on-projects.md) — Reinforces concepts through 30+ hands-on exercises building real-world projects like image galleries and drawing tools. - [Free JavaScript Courses](https://awesome-repositories.com/f/education-learning-resources/online-courses/free-javascript-courses.md) — Provides an interactive video course teaching JavaScript fundamentals through 88+ lessons, exercises, and real-world projects. - [Complexity Progression](https://awesome-repositories.com/f/education-learning-resources/spaced-repetition-systems/learning-step-configurations/complexity-progression.md) — Introduces concepts from variables and functions to closures and modules in a carefully ordered learning path. - [Exercise-Solution Pairings](https://awesome-repositories.com/f/education-learning-resources/curricula-instructional-design/instructional-design/exercise-solution-pairings.md) — Each lesson provides a starting code file and a completed solution file for self-paced practice and verification. - [Async HTTP Request Exercises](https://awesome-repositories.com/f/education-learning-resources/javascript-language-internals-practice/async-http-request-exercises.md) — Provides practice exercises for making asynchronous HTTP requests and fetching data from external APIs using fetch and AJAX. ### Part of an Awesome List - [Guided Project Tutorials](https://awesome-repositories.com/f/awesome-lists/devtools/real-world-applications/guided-project-tutorials.md) — Guides learners through building real-world applications like image galleries, sliders, modals, and drawing tools. ### DevOps & Infrastructure - [Guided Project Tutorials](https://awesome-repositories.com/f/devops-infrastructure/config-driven-image-building/interactive-build-configuration/guided-project-tutorials.md) — Builds real-world projects like an Etch-a-Sketch, image gallery, audio visualizer, and face detection app. ([source](https://BeginnerJavaScript.com)) ### Programming Languages & Runtimes - [JavaScript Data Types and Structures](https://awesome-repositories.com/f/programming-languages-runtimes/javascript-data-types-and-structures.md) — Teaches using strings, numbers, objects, arrays, maps, and their methods for storing and transforming data. ([source](https://BeginnerJavaScript.com)) - [Execution Flow Control](https://awesome-repositories.com/f/programming-languages-runtimes/execution-flow-control.md) — Uses conditionals, loops, intervals, timers, and array iteration methods like forEach, map, filter, and reduce. ([source](https://BeginnerJavaScript.com)) - [ES Module Bundling](https://awesome-repositories.com/f/programming-languages-runtimes/module-organization/es-module-bundling.md) — Teaches organizing JavaScript into reusable ES modules and bundling them with build tools like Parcel. ### User Interface & Experience - [Browser Event Listeners](https://awesome-repositories.com/f/user-interface-experience/browser-event-listeners.md) — Listens for user interactions, manages event propagation, and prevents default behaviors on form and keyboard events. ([source](https://beginnerjavascript.com/)) ### Web Development - [Browser APIs](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-apis.md) — Teaches DOM manipulation, event handling, and data fetching using built-in browser APIs without external frameworks. - [DOM & Event Handling](https://awesome-repositories.com/f/web-development/browser-integration-utilities/dom-event-handling.md) — Teaches selecting, creating, modifying HTML elements and handling user interactions, event propagation, and form events. - [DOM Manipulation](https://awesome-repositories.com/f/web-development/dom-manipulation.md) — Teaches selecting, creating, modifying, and removing HTML elements using native browser DOM methods. ([source](https://beginnerjavascript.com/)) - [DOM Manipulation Guides](https://awesome-repositories.com/f/web-development/dom-manipulation-guides.md) — Provides a hands-on tutorial covering selecting, creating, and modifying HTML elements using the Document Object Model. - [Event Handling](https://awesome-repositories.com/f/web-development/event-handling.md) — Provides a practical guide to listening for user interactions, managing event propagation, and handling form and keyboard events. - [ES Module Bundling Workshops](https://awesome-repositories.com/f/web-development/es-module-support/es-module-bundling-workshops.md) — Provides a workshop on organizing JavaScript code into reusable ES modules and bundling them with build tools like Parcel. ### Data & Databases - [Application State Management](https://awesome-repositories.com/f/data-databases/application-state-management.md) — Stores and retrieves data using local storage, custom events, and delegation for persistent user interfaces. ([source](https://beginnerjavascript.com/)) - [Asynchronous Data Fetching](https://awesome-repositories.com/f/data-databases/asynchronous-data-fetching.md) — Includes practice with asynchronous HTTP requests to fetch data from external APIs using Ajax and fetch. ### Development Tools & Productivity - [Module Organization](https://awesome-repositories.com/f/development-tools-productivity/node-js-dependency-managers/module-organization.md) — Structures larger apps using ES modules, bundles them with Parcel, and manages dependencies with npm packages. ([source](https://BeginnerJavaScript.com)) ### Networking & Communication - [External API Data Fetching](https://awesome-repositories.com/f/networking-communication/external-api-data-fetching.md) — Fetches data from external services like dad jokes and currency converters using AJAX and APIs. ([source](https://BeginnerJavaScript.com)) ### Software Engineering & Architecture - [ES Module Isolation](https://awesome-repositories.com/f/software-engineering-architecture/pluggable-module-loading/es-module-isolation.md) — Organizes JavaScript into reusable ES modules and bundles them with build tools for larger applications. ([source](https://beginnerjavascript.com/))