This media is not supported in your browser
VIEW IN TELEGRAM
11. Wrapping Up
Lydia wraps up the course by emphasizing that the goal was to remind students of certain concepts and provide resources for further learning. The instructor also encourages participants to reach out with any additional questions or concerns.
#lesson
Lydia wraps up the course by emphasizing that the goal was to remind students of certain concepts and provide resources for further learning. The instructor also encourages participants to reach out with any additional questions or concerns.
#lesson
Title: Vanilla JavaScript Projects
Description: Put your fundamental JavaScript knowledge into practice through hands-on web projects. Use browser APIs, asynchronous programming, Node.js, and modern tooling to build and deploy web apps, all with vanilla JavaScript!
Link: https://frontendmasters.com/courses/javascript-projects/
Time: 9 hours, 0 minutes
Lessons: 60 / 60
Tags: #course #frontendmasters #720p
Description: Put your fundamental JavaScript knowledge into practice through hands-on web projects. Use browser APIs, asynchronous programming, Node.js, and modern tooling to build and deploy web apps, all with vanilla JavaScript!
Link: https://frontendmasters.com/courses/javascript-projects/
Time: 9 hours, 0 minutes
Lessons: 60 / 60
Tags: #course #frontendmasters #720p
Frontendmasters
Advance Your JavaScript Skills with Practical Web Projects
Put your fundamental JavaScript knowledge into practice through hands-on web projects. Use browser APIs, asynchronous programming, Node.js, and modern tooling to build and deploy web apps, all with vanilla JavaScript!
Media is too big
VIEW IN TELEGRAM
1. Introduction
Anjana Vakil introduces the course and explains that it will cover more advanced features of JavaScript, functional programming, object-oriented programming, and working with browser APIs. Several projects will be created throughout the course to practice and reinforce the advanced concepts presented.
- https://anjana.dev/vanilla-js-projects/
- https://github.com/vakila/vanilla-js-projects
#lesson
Anjana Vakil introduces the course and explains that it will cover more advanced features of JavaScript, functional programming, object-oriented programming, and working with browser APIs. Several projects will be created throughout the course to practice and reinforce the advanced concepts presented.
- https://anjana.dev/vanilla-js-projects/
- https://github.com/vakila/vanilla-js-projects
#lesson
Media is too big
VIEW IN TELEGRAM
2. The DOM
Anjana reviews the Document Object Model (DOM) and explains how it's a way for JavaScript to understand and interact with the HTML document being browsed. Getting and setting element attributes is discussed along with handling events. The browser's console can provide some tips and warnings about working with these APIs.
#lesson
Anjana reviews the Document Object Model (DOM) and explains how it's a way for JavaScript to understand and interact with the HTML document being browsed. Getting and setting element attributes is discussed along with handling events. The browser's console can provide some tips and warnings about working with these APIs.
#lesson
Media is too big
VIEW IN TELEGRAM
3. Dark Mode Switcher Exercise
Students are instructed to implement a dark-mode toggle switch. The HTML and CSS are provided below. When the toggle switch is clicked, the value of a custom data element should alternate between light and dark.
- https://anjana.dev/vanilla-js-projects/dark-mode/index.html
#lesson
Students are instructed to implement a dark-mode toggle switch. The HTML and CSS are provided below. When the toggle switch is clicked, the value of a custom data element should alternate between light and dark.
- https://anjana.dev/vanilla-js-projects/dark-mode/index.html
#lesson
Media is too big
VIEW IN TELEGRAM
4. Dark Mode Switcher Solution
Anjana live-codes the solution to the Dark Mode Switcher exercise.
- https://github.com/vakila/vanilla-js-projects/tree/main/dark-mode
#lesson
Anjana live-codes the solution to the Dark Mode Switcher exercise.
- https://github.com/vakila/vanilla-js-projects/tree/main/dark-mode
#lesson
Media is too big
VIEW IN TELEGRAM
5. Asynchronous JS
Anjana introduces the concept of time in JavaScript and explains the challenges of asynchronous programming. The browser's event loop is discussed, and examples of how it schedules tasks to ensure the browser remains responsive to user interactions are shared.
#lesson
Anjana introduces the concept of time in JavaScript and explains the challenges of asynchronous programming. The browser's event loop is discussed, and examples of how it schedules tasks to ensure the browser remains responsive to user interactions are shared.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
6. Browser APIs
Anjana shares examples of a few Browser APIs and recommends using MDN (Mozilla Developer Network) as a resource. The window and document objects are discussed, and the importance of exploring and understanding browser APIs is emphasized.
#lesson
Anjana shares examples of a few Browser APIs and recommends using MDN (Mozilla Developer Network) as a resource. The window and document objects are discussed, and the importance of exploring and understanding browser APIs is emphasized.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
7. Dates & Times
Anjana explores the Date object and its various methods for representing and manipulating time. The setTimeout and setInterval functions create delays and intervals in code execution. Questions about how the event loop handles the execution of async code, setTimeout, and setInterval are also discussed.
#lesson
Anjana explores the Date object and its various methods for representing and manipulating time. The setTimeout and setInterval functions create delays and intervals in code execution. Questions about how the event loop handles the execution of async code, setTimeout, and setInterval are also discussed.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
8. Clock Exercise
Students are instructed to create a randomly moving clock. The paragraph element in the starter file will hold the current time. Random styles should be applied for the top, left, and color properties every three seconds.
- https://anjana.dev/vanilla-js-projects/clock/index.html
#lesson
Students are instructed to create a randomly moving clock. The paragraph element in the starter file will hold the current time. Random styles should be applied for the top, left, and color properties every three seconds.
- https://anjana.dev/vanilla-js-projects/clock/index.html
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
9. Clock Solution: Displaying Time
Anjana begins coding the solution to the Clock exercise. The current time is displayed and updated every three seconds.
- https://github.com/vakila/vanilla-js-projects/blob/main/clock/finished.html
#lesson
Anjana begins coding the solution to the Clock exercise. The current time is displayed and updated every three seconds.
- https://github.com/vakila/vanilla-js-projects/blob/main/clock/finished.html
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
10. Clock Solution: Random Position & Color
Anjana continues the solution to the Clock exercise. Random values are generated and applied to the displayed time using the top, left and color CSS styles.
#lesson
Anjana continues the solution to the Clock exercise. Random values are generated and applied to the displayed time using the top, left and color CSS styles.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
11. Functions
Anjana discusses functions in JavaScript and explains how they can be used as first-class data. Higher-order functions are introduced, and an example of creating a higher-order logging function is shared.
#lesson
Anjana discusses functions in JavaScript and explains how they can be used as first-class data. Higher-order functions are introduced, and an example of creating a higher-order logging function is shared.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
12. Scope & Closure
Anjana explains the scope in JavaScript. Closure, where a function can "remember" values from its parent scope, is also discussed. Understanding these concepts can help developers avoid unexpected behavior in code.
#lesson
Anjana explains the scope in JavaScript. Closure, where a function can "remember" values from its parent scope, is also discussed. Understanding these concepts can help developers avoid unexpected behavior in code.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
13. Functional & Object Oriented Programming
Anjana discusses two programming paradigms: functional programming (FP) and object-oriented programming (OOP). Examples of both paradigms are shared and the benefits of writing code using a functional style are explained.
#lesson
Anjana discusses two programming paradigms: functional programming (FP) and object-oriented programming (OOP). Examples of both paradigms are shared and the benefits of writing code using a functional style are explained.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
14. IFFEs & Functional Q&A
Anjana demonstrates Immediately Invoked Function Expressions (IIFE) in JavaScript. When using an IIFE, the function is evaluated and invoked immediately without needing a separate function call. They can be helpful in certain situations, such as when working with async and await in JavaScript. Pure functions in functional programming are also discussed.
#lesson
Anjana demonstrates Immediately Invoked Function Expressions (IIFE) in JavaScript. When using an IIFE, the function is evaluated and invoked immediately without needing a separate function call. They can be helpful in certain situations, such as when working with async and await in JavaScript. Pure functions in functional programming are also discussed.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
15. Object prototype
Anjana explains that every object in JavaScript has a prototype. Prototypes are the mechanism by which JavaScript objects inherit features from one another. The prototype chain can be followed to examine an object's inheritance.
#lesson
Anjana explains that every object in JavaScript has a prototype. Prototypes are the mechanism by which JavaScript objects inherit features from one another. The prototype chain can be followed to examine an object's inheritance.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
16. Object hasOwnProperty
Anjana demonstrates how to access properties and methods from an object's prototype. The hasOwnProperty method can determine if a property belongs to the object or if it's inherited through the prototype chain.
#lesson
Anjana demonstrates how to access properties and methods from an object's prototype. The hasOwnProperty method can determine if a property belongs to the object or if it's inherited through the prototype chain.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
17. Iterable Objects
Anjana defines the requirements for an object to be iterable. There are many ways to iterate over objects, such as using map, for of/in loops, filter, and forEach. An object becomes iterable by implementing the iterator and the next methods on the returned object.
#lesson
Anjana defines the requirements for an object to be iterable. There are many ways to iterate over objects, such as using map, for of/in loops, filter, and forEach. An object becomes iterable by implementing the iterator and the next methods on the returned object.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
18. Generators
Anjana compares iterable objects with generator functions. The yield keyword in generator functions allows the function to pause and resume execution. Generator functions can be used to implement iterables, and an example of using a generator as an iterator in a for-of loop is shared.
#lesson
Anjana compares iterable objects with generator functions. The yield keyword in generator functions allows the function to pause and resume execution. Generator functions can be used to implement iterables, and an example of using a generator as an iterator in a for-of loop is shared.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
19. Date & Iterators Summary
Anjana discusses the limitations and problems with the JavaScript Date object and mentions that the TC39 standards body is working on a new alternative to address these issues. A few additional examples of iterable objects in JavaScript are also shared.
#lesson
Anjana discusses the limitations and problems with the JavaScript Date object and mentions that the TC39 standards body is working on a new alternative to address these issues. A few additional examples of iterable objects in JavaScript are also shared.
#lesson