Vanilla JS: You Might Not Need a Framework

• Master Vanilla JavaScript: Learn to build web applications using core JavaScript, avoiding reliance on external libraries and frameworks.
• Understand the DOM API: Gain proficiency in manipulating the Document Object Model (DOM) by selecting, modifying, and managing elements and events.
• Develop a SPA with Routing: Create a single-page application (SPA) with custom routing, enhancing the user experience without frameworks.
• Implement Web Components: Utilize Web Components and Shadow DOM to create reusable, encapsulated UI elements for scalable web apps.
• Explore Reactive Programming: Implement reactive programming techniques with JavaScript proxies to create dynamic and responsive web applications.
• Build a Real Web App: Develop a complete web application, "Coffee Masters," applying all the concepts learned throughout the course.

In this course, Maximiliano Firtman guides you through the world of Vanilla JavaScript, showing how you can create powerful and efficient web applications without relying on libraries or frameworks. You'll start with the basics of the DOM API and progress to building a real-world app, "Coffee Masters," which incorporates advanced topics like single-page application routing, web components, and reactive programming. This course emphasizes the simplicity and speed of using core JavaScript features, providing you with a deeper understanding of how web applications work under the hood.

• Web developers looking to deepen their understanding of core JavaScript.
• Frontend developers interested in building web applications without frameworks.
• Software engineers seeking to enhance their skills in DOM manipulation and event handling.
• Anyone curious about how popular JavaScript libraries and frameworks function internally.

• Basic JavaScript Knowledge: Familiarity with JavaScript syntax and basic programming concepts is recommended.
• Interest in Web Development: A desire to learn about the capabilities of Vanilla JavaScript and its practical applications.

Vanilla JavaScript

• What is Vanilla JavaScript: Understand the concept of Vanilla JavaScript and its benefits compared to using frameworks.
• Why Vanilla JavaScript: Explore reasons to use Vanilla JavaScript, including performance benefits and a deeper understanding of how libraries function.

The DOM

• The DOM API: Learn how to interact with the DOM to select and modify elements using core JavaScript methods.
• Finding Elements in the DOM: Explore techniques for selecting elements and managing DOM references efficiently.
• Modifying the DOM: Manipulate DOM elements using properties, attributes, and event listeners.

Building the Coffee Masters App

• Course Project Overview: Get an introduction to the "Coffee Masters" project and its features as a progressive web app.
• Scoping querySelector: Utilize the querySelector and querySelectorAll methods for precise DOM element selection.
• Adding Scripts async & defer: Understand how to load scripts efficiently using async and defer attributes.
• Main Script Setup: Set up the main script and differentiate between Load and DOMContentLoaded events.

Event Handling

• Event Binding & Handlers: Learn to bind functions to events and handle user interactions.
• Advanced Event Handling: Discover techniques for managing multiple event handlers and custom events.
• Helpful Shorthand Methods: Use shorthand methods to simplify code and improve readability.

Data Fetching and SPA Routing

• Fetching Data: Create services to fetch data for the application and manage it efficiently.
• Loading Menu Data: Implement API calls to load menu data and integrate it into the app.
• Browser Routing & History API: Use the History API for navigation and manage page states.
• SPA Router from Scratch: Build a custom single-page application router to manage navigation and deep linking.

Web Components

• Overview & Custom Elements: Understand Web Components standards, including custom elements and lifecycle hooks.
• HTML Templates: Create reusable HTML templates for dynamic content rendering.
• Shadow DOM: Utilize the Shadow DOM to encapsulate styles and functionality.
• Creating Web Components: Develop web components for the Coffee Masters app and integrate them into the DOM.

Reactive Programming with Proxies

• Creating a Proxy: Use proxies to implement reactive programming and manage state changes dynamically.
• Rendering the Menu: Implement reactive data binding to update the UI based on data changes.
• ProductItem Component: Develop the ProductItem component to manage product interactions.

Building and Displaying Orders

• Adding Items to the Order: Implement functionality to add items to the cart and manage multiple quantities.
• Displaying Items in the Cart: Create the CartItem component to display cart contents.
• Binding Form Data: Bind form inputs to data models and manage user interactions.