Share Description
In this course, you will:
- Use real projects to solidify your JavaScript foundations! Real-world tasks include designing a dark mode switcher, constructing a modal dialog component, and integrating everything into a comprehensive camera app.
- Throughout the course, you'll learn about asynchronous JavaScript, the DOM, and how to use JavaScript outside of the browser with Node.js. To put your project into production, use contemporary JavaScript tooling and GitHub Actions!
Syllabus:
1. Review
- The DOM
- Dark Mode Switcher Exercise
- Dark Mode Switcher Solution
- Asynchronous JS
- Browser APIs
- Dates & Times
- Clock Exercise
- Clock Solution: Displaying Time
- Clock Solution: Random Position & Color
2. Object Oriented Programming
- Functions
- Scope & Closure
- Functional & Object Oriented Programming
- IFFEs & Functional Q&A
- Object prototype
- Object hasOwnProperty
3. Iteration
- Iterable Objects
- Generators
- Date & Iterators Summary
4. Classes & Browser APIs
- new Operator & Constructors
- Class Constructor & Properties
- Class Inheritance
- Dark Modal Exercise
- Dark Modal: Form Constructor
- Dark Modal: Submit Button
- Dark Modal: Final Code
- Dark Modal: preventDefault Method
5. JavaScript Outside the Browser
- Introduction to Node.js
- Running Node Scripts
- Node Packages & npm
- Creating a Node Package
- Creating Custom Scripts
- Installing Dependencies
6. Modern JavaScript Development
- Importing Modules
- Using Modules
- Evolution of JS Tooling
- Introduction to Vite
- Creating a Vite Project
- Exploring the Vite Project Code
- Vite Selfie Cam Project
- Using the Canvas API
- Accessing the Camera
- Refactoring the UI
- drawVideo Method
- Using the Video Element
- Scaling the Canvas
- Building for Production
7. Source Control, Linting, & Formatting
- Tooling Setup for Hackathon
- ESLint
- Prettier
- VS Code Tooling
8. Deployment
- Deployment & Configuring Vite
- Configuring GitHub Actions
- Viewing GitHub Actions
- Project Code Tour: Modal and Form
- Project Code Tour: Camera and Text
- Hackathon: Fork the Project
- Community Projects
- Q&A
