Learn JavaScript from scratch with learnjavascript.today

Learn JavaScript from scratch with learnjavascript.today

Learn JavaScript from scratch with learnjavascript.today

Learn JavaScript from scratch with learnjavascript.today is the best course to learn JavaScript quickly.  JavaScript is one of the most popular programming languages in the world. Millions of developers use JavaScript to create amazing things on the web. JavaScript is a universal language used on a website’s frontend and backend. It is also one of the most commonly used programming languages globally.

You don’t have to spend hours researching and modifying pre-existing elements if you have enough JavaScript knowledge. To help you land the frontend development job of your dreams, you can feel confident in JavaScript interviews.

However, despite your best efforts, you find yourself baffled by the material as you work your way through JavaScript tutorials. You begin to lose faith in yourself. There is a good chance you will feel terrified, stupid, and befuddled. You may end up wondering, “Can I really learn JavaScript?”.

Only the Learn JavaScript online course enables students to grasp the complexities of JavaScript. JavaScript is explained in great detail, with numerous examples throughout. It also taught me how to think like a developer, which was a big help.

Learn JavaScript from scratch: The lesson plan

Here’s a quick table of contents for your viewing pleasure:

Module 1: JavaScript and its Ecosystem

  1. How to use this course
  2. What is JavaScript used for?
  3. The JavaScript ecosystem
  4. Varying versions of JavaScript

Module 2: JavaScript Basics

  1. Linking your JavaScript file
  2. Preparing your text editor
  3. The console
  5. You don’t need semicolons
  6. Strings, numbers, and booleans
  7. Declaring variables
  8. Functions
  9. Arrow functions
  10. Intro to objects
  11. If/else statements
  12. The NOT operator
  13. Null and undefined
  14. The BOM and the DOM
  15. Selecting an element
  16. Changing classes
  17. Listening to events
  18. Callbacks

Module 3: Building simple components

  1. How to think like a developer
  2. How to use the starter template
  3. Do this for every component
  4. Building an off-canvas menu
  5. Building a modal window
  6. Lessons from the building process
  7. Debugging errors
  8. How to use a linter

Module 4: Arrays and loops

  1. Introduction to arrays
  2. Array methods
  3. For loops
  4. The forEach loop
  5. Selecting multiple elements
  6. Node vs Elements
  7. Building an accordion

Module 5: DOM basics

  1. Id, classes, tags, and attributes
  2. Changing CSS with JavaScript
  3. Getting CSS with JavaScript
  4. Changing attributes
  5. Finding an element’s size and position
  6. DOM Traversals
  7. Building a Tabbed Component
  8. Carousel: HTML and CSS
  9. Carousel: Switching slides with JavaScript
  10. Carousel: Working the dots
  11. Carousel: Positioning slides with JavaScript

Module 6: Events deep dive

  1. The listening element
  2. Default behaviors
  3. Event propagation
  4. Event delegation
  5. Removing event listeners
  6. Modal: Closing the modal
  7. Accordion: Event delegation
  8. Tabby: Event delegation
  9. Carousel: Event delegation

Module 7: Transitions and Animations

  1. CSS transitions
  2. CSS animations
  3. Silky-smooth animations
  4. Integrating CSS transitions and animations with Javascript
  5. JavaScript animations
  6. The Greensock Animation API (GSAP)
  7. Modal: Animating the modal
  8. Modal: Animating the pointing hand
  9. Modal: Animating the waving hand
  10. Modal: Modal: Wave hand animation with JavaScript (using GSAP)
  11. Modal: Wave hand animation with JavaScript (using GSAP)
  12. Accordion: Animations
  13. Carousel: Animations

Module 8: Useful JavaScript features

  1. Ternary operators
  2. And and OR operators
  3. Early returns
  4. Template literals
  5. Destructuring
  6. Default parameters
  7. Enhanced object literals
  8. Rest and spread operators
  9. Useful array methods
  10. Reduce
  11. Looping through objects
  12. Returning objects with an implicit return
  13. Accordion: Using useful JavaScript features
  14. Tabby: Using useful JavaScript features
  15. Carousel: Useful JavaScript features

Module 9: JavaScript best practices

  1. Write declarative code
  2. Functions with a purpose
  3. Manage scope
  4. Reduce state changes
  5. Don’t reassign
  6. Don’t mutate
  7. Preventing Objects from mutating
  8. Preventing Arrays from mutating
  9. Write pure functions
  10. Accordion: Refactor
  11. Carousel: First refactor
  12. Carousel: Refactoring the dots part
  13. Carousel: Previous and next buttons
  14. Carousel: Second refactor

Module 10: Text and Content

  1. Changing text and HTML
  2. Creating HTML elements
  3. Adding multiple elements to the DOM
  4. Removing elements from the DOM
  5. Carousel: Creating dots with JavaScript
  6. Calculator: HTML and CSS
  7. Calculator: Happy Path
  8. Calculator: Testing the Happy Path Path
  9. Calculator: Easy Edge Cases
  10. Calculator: Difficult Edge Cases Cases
  11. Calculator: Refactoring
  12. The Switch Statement
  13. Calculator: Refactoring part 2
  14. Popover: Making one popover
  15. Popover: Making four popovers
  16. Popover: Making popovers with JavaScript

Module 11: Forms

  1. Intro to forms
  2. Selecting form fields with JavaScript
  3. Form fields and their events
  4. Sanitize your output
  5. Generating unique IDs
  6. Popover: Dynamic ID
  7. Todolist: The HTML and CSS
  8. Todolist: Creating tasks with JavaScript
  9. Todolist: Deleting tasks with JavaScript
  10. Typeahead: The HTML and CSS
  11. Typeahead: Displaying predictions
  12. Typeahead: Selecting a prediction
  13. Typeahead: Bolding search terms

Module 12: Dates

  1. The Date Object
  2. Getting a formatted date
  3. Getting the time
  4. Local time and UTC Time
  5. Setting a specific date
  6. Setting a date with Date methods
  7. Adding (or subtracting) date and time
  8. Comparing Dates and times
  9. Datepicker: Initial HTML and CSS
  10. Datepicker: Building the calendar
  11. Datepicker: Building the date picker with JavaScript
  12. Datepicker: Previous and next buttons
  13. Datepicker: Selecting a date
  14. Datepicker: Positioning the date picker
  15. Datepicker: Showing and hiding
  16. Formatting a date with toLocaleString
  17. setTimeout
  18. setInterval
  19. Countdown: The HTML and CSS
  20. Countdown: The JavaScript
  21. Countdown: Counting months
  22. Countdown: Daylight Saving Time
  23. Countdown: Counting years

Module 13: Asynchronous JavaScript

  1. Introduction to Ajax
  2. Understanding JSON
  3. The Fetch API
  4. Possible data types
  5. JavaScript Promises
  6. Requests and responses
  7. Sending a POST request
  8. Authentication
  9. Handling errors
  10. Viewing response headers
  11. CORS and JSONP
  12. XHR vs Fetch
  13. Using an Ajax library
  14. Reading API documentation
  15. Understanding curl
  16. Todolist: The Todolist API
  17. Todolist: Fetching tasks
  18. Todolist: Creating tasks
  19. Todolist: Editing tasks
  20. Todolist: Deleting tasks
  21. Todolist: Creating tasks with Optimistic UI
  22. Todolist: Handling Optimistic UI errors
  23. Todolist: Editing tasks with Optimistic UI
  24. Todolist: Deleting tasks with Optimistic UI
  25. Todolist: Refactor
  26. Typeahead: How to add Ajax
  27. Typeahead: Adding Ajax
  28. Typeahead: Handling errors
  29. Google Maps Clone: Creating your first Google Map
  30. Google Maps Clone: Fetching JSONP via JavaScript
  31. Google Maps Clone: Drawing directions
  32. Google Maps Clone: Driving directions
  33. Google Maps Clone: Handling errors
  34. Google Maps Clone: Adding stopovers
  35. Google Maps Clone: Refactor


Module 14: Advanced Asynchronous JavaScript

  1. Requesting many resources at once New
  2. Asynchronous functions New
  3. Handling multiple awaits New
  4. Asynchronous loops New
  5. Dota Heroes: Listing heroes
  6. Dota Heroes: Filtering heroes (Part 1)
  7. Dota Heroes: Filtering heroes (Part 2)
  8. Dota Heroes: Refactoring
  9. Dota Heroes: Hero Page New
  10. Dota Heroes: Making the hero page robust New
  11. Dota Heroes: Heroes page refactor

Module 15: Keyboard

  1. Keyboard users
  2. Handling commonly used keys
  3. Keyboard events
  4. Understanding Tabindex
  5. Detecting the focused element
  6. Directing focus
  7. Preventing people from tabbing into elements
  8. How to choose keyboard shortcuts
  9. Creating single-key shortcuts
  10. Off-canvas: Adding keyboard interaction
  11. Modal: Adding keyboard interaction
  12. Accordion: Adding keyboard interaction
  13. Tabby: Adding keyboard interaction
  14. Tabby: Refactoring
  15. Carousel: Adding keyboard interaction
  16. Carousel: Displaying the help text
  17. Calculator: Adding keyboard interaction
  18. Popover: Keyboard
  19. Popover: Refactor
  20. Keyboard shortcuts with Command and Control modifiers
  21. Todolist: Keyboard
  22. Typeahead: Keyboard
  23. Typeahead: Selecting a prediction with the keyboard
  24. Google Maps Clone: Keyboard
  25. Dota Heroes: Keyboard
  26. Datepicker: Tabbing in and out
  27. Datepicker: Keyboard shortcuts


Module 16: Accessibility

  1. What is accessibility?
  2. How to use a screen reader
  3. Using NVDA
  4. Using Voiceover
  5. Aria roles
  6. Landmark roles
  7. Document structure roles
  8. Live region roles
  9. Widget roles
  10. Window and Abstract roles
  11. Accessible names and descriptions
  12. Hiding content
  13. ARIA properties and ARIA states
  14. ARIA for expandable widgets
  15. Off-canvas: Accessibility
  16. ARIA for modal dialogs
  17. Modal: Screen reader accessibility
  18. Accordion: Screen reader accessibility
  19. ARIA for Tabbed components
  20. Tabby: Screen reader accessibility
  21. Tabby: Refactor
  22. Carousel: Screen reader accessibility
  23. Roles that trigger Forms and Application modes
  24. What’s next for accessibility

Module 17: Handling Scroll

  1. The Scroll event
  2. Auto-hiding Sticky-nav: HTML and CSS
  3. Auto-hiding Sticky-nav: JavaScript
  4. Auto-hiding Sticky-nav: Natural reveal
  5. Intersection Observer API
  6. Intersection Observer Options
  7. Slide & Reveal
  8. Slide & Reveal: Always fade in when you scroll down
  9. Slide & Reveal: Fine-tuning the animation
  10. Infinite Scroll: Anatomy
  11. Infinite Scroll: Infinite load
  12. Infinite Scroll: Refactor
  13. Infinite Scroll: Implementing the Infinite Scroll

Module 18: Mouse, Touch, and Pointers

  1. Mouse Events
  2. Spinning Pacman: HTML and CSS
  3. Spinning Pacman: JavaScript
  4. Touch events
  5. Pointer events
  6. Touch-action
  7. Spinning Pacman: Supporting Touch
  8. Cloning elements
  9. DragDrop: HTML and CSS
  10. DragDrop: JavaScript
  11. DragDrop: Creating a drop preview
  12. DragDrop: Sortable drop preview
  13. DragDrop: Robustness
  14. DragDrop: Refactor


Module 19: Object-oriented programming

  1. Before we begin
  2. What Is Object-Oriented Programming?
  3. Four Flavours of Object-Oriented Programming
  4. Inheritance
  5. This in JavaScript
  6. Call, bind, apply
  7. Creating Derivative Objects
  8. Composition vs Inheritance
  9. Polymorphism
  10. Encapsulation
  11. Closures
  12. Encapsulation in Object-Oriented Programming
  13. Getters and Setters
  14. What OOP flavor to use
  15. When to use Object-Oriented Programming

Module 20: Writing reusable code

  1. Creating reusable code by writing libraries
  2. Two Types of libraries Updated
  3. Including libraries with Script tags
  4. Including libraries with ES6 Modules
  5. Dynamic imports
  6. Off-Canvas: Building a Library Updated
  7. Modal: Library setup
  8. Modal: Opening the Modal
  9. Modal: Closing the modal
  10. Modal: Inheritance and Polymorphism
  11. Modal: Resolving differences between subclasses
  12. Modal: Exposing properties and methods
  13. Accordion: Building a library
  14. Tabby: Building a library
  15. Carousel: Building a library
  16. Calculator: Library
  17. Calculator: Fixing the Clear Key
  18. Calculator: Handling other keys
  19. Calculator: State
  20. Popover: Library
  21. Popover: Adding event listeners
  22. Typeahead: Library
  23. DatePicker: Library

Module 21: Vanilla JS to Frameworks

  1. Building a Tiny framework
  2. Tiny: Add event listeners
  3. Tiny: Updating state
  4. Tiny: Rendering Child Components
  5. Tiny: Changing Parent State
  6. Tiny: Passing Props
  7. Tiny: Multiple Props
  8. Tiny: Passing values from sibling components
  9. Tiny: Mounting
  10. Tiny: Passing props to descendants
  11. Tiny: A tiny refactor

Module 22: Single page applications

  1. What is a Single Page App?
  2. Simple SPA using only CSS
  3. The Location Interface
  4. The History Interface
  5. Minimum viable server for a SPA
  6. Dota SPA: Introduction
  7. Dota SPA: Building The Heroes List
  8. Dota SPA: Building the filters
  9. Dota SPA: Filtering heroes
  10. Dota SPA: Displaying filtered heroes
  11. Dota SPA: Getting Ready to build the Hero Page
  12. Dota SPA: Building the hero page
  13. Dota SPA: Lore and abilities
  14. Dota SPA: Routing for Single-page apps


Learn to build 20 components with Learn JavaScript from scratch

Here are the 20 components you’ll build:

  1. Off-canvas Menu
  2. Modal Window
  3. Accordion
  4. Tabbed Component
  5. Carousel
  6. Calculator
  7. Popover
  8. Todolist
  9. Typeahead
  10. Datepicker
  11. Countdown Timer
  12. Google Maps Clone
  13. Dota Heroes Page
  14. Auto-hiding Sticky Nav
  15. Slide & Reveal
  16. Infinite Scroll
  17. Spinning Pacman
  18. Drag and Drop
  19. A Tiny Framework
  20. Dota Heroes SPA


Enroll in Learn JavaScript

Learn JavaScript batch to begin on 1st August 2022. Click here to enroll


You might be interested in