# wesbos/javascript30

**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-javascript30).**

29,165 stars · 42,019 forks · HTML

## Links

- GitHub: https://github.com/wesbos/JavaScript30
- Homepage: https://JavaScript30.com
- awesome-repositories: https://awesome-repositories.com/repository/wesbos-javascript30.md

## Description

This project is a structured educational curriculum designed to build proficiency in vanilla JavaScript through hands-on, project-based learning. It provides a series of coding exercises that focus on core language fundamentals and the direct manipulation of the document object model, enabling developers to create interactive web interfaces without relying on external frameworks or dependencies.

The curriculum distinguishes itself by emphasizing direct integration with browser-native APIs. Participants learn to build hardware-aware applications by accessing device sensors, cameras, and microphones, as well as implementing custom controls for multimedia streams. These exercises demonstrate how to synchronize application state with the user interface and manage complex interactions through event-driven patterns.

Beyond core scripting, the project covers a broad range of frontend development techniques, including dynamic styling through CSS variable injection and the design of reusable interface components. The instructional materials guide users through practical demonstrations that combine scripting logic with modern web technologies to produce responsive and functional browser experiences.

## Tags

### Education & Learning Resources

- [JavaScript Skill Building](https://awesome-repositories.com/f/education-learning-resources/javascript-skill-building.md) — Provides a comprehensive set of hands-on coding challenges for mastering vanilla JavaScript.
- [Web Development Curricula](https://awesome-repositories.com/f/education-learning-resources/web-development-curricula.md) — Offers a structured collection of hands-on coding exercises designed to teach core web development concepts through practical, project-based learning.
- [JavaScript Learning Modules](https://awesome-repositories.com/f/education-learning-resources/javascript-learning-modules.md) — Provides instructional modules focusing on building interactive web features using standard browser APIs without external dependencies.
- [Frontend Development Workshops](https://awesome-repositories.com/f/education-learning-resources/frontend-development-workshops.md) — Demonstrates how to manipulate the document object model and integrate browser hardware capabilities into interfaces through guided training.
- [JavaScript Tutorials](https://awesome-repositories.com/f/education-learning-resources/javascript-tutorials.md) — Demonstrates DOM interaction techniques through a practical checkbox selection exercise. ([source](https://JavaScript30.com))

### Web Development

- [DOM Manipulation](https://awesome-repositories.com/f/web-development/dom-manipulation.md) — Core focus on dynamically updating web page content and handling user events.
- [Browser Hardware APIs](https://awesome-repositories.com/f/web-development/browser-hardware-apis.md) — Provides examples of accessing device sensors and peripherals like webcams and microphones.
- [Browser API Integrations](https://awesome-repositories.com/f/web-development/browser-api-integrations.md) — Provides direct access to hardware and media capabilities like cameras and geolocation via native browser interfaces.

### User Interface & Experience

- [Interactive UI Components](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components.md) — Provides implementations for common interactive UI elements like dropdowns and sliders.
- [DOM Manipulation Libraries](https://awesome-repositories.com/f/user-interface-experience/dom-manipulation-libraries.md) — Updates user interface elements directly by selecting and modifying properties through standard browser APIs.
- [UI State Management](https://awesome-repositories.com/f/user-interface-experience/ui-state-management.md) — Maintains visual consistency by manually updating the DOM in response to underlying data changes.

### Graphics & Multimedia

- [Cross-Platform Media Frameworks](https://awesome-repositories.com/f/graphics-multimedia/media-processing-analysis/cross-platform-media-frameworks.md) — Provides custom controls and interactive experiences for audio, video, and camera streams within modern web browser environments.