Learn JavaScript from scratch

Build anything you want with JavaScript

Have you tried learning JavaScript for a while now, but feel that you’re not making progress?

You freeze at a blank JavaScript file

You twiddle your thumbs as you watch the blinking cursor on your screen. Everything you learned about JavaScript seemed to disappear into thin air…

What should you write first?

Should you write variables or functions first? How do you use objects, arrays, and loops? When do you use Object Oriented Programming?

You’re not sure, so you Google.

You look for plugins. If plugins don’t exist, you look for tutorials. If tutorials don’t exist, you look for code written by others on Stack Overflow.

You copy-paste the code you found. Most of the time, you don’t understand what you copied. You can modify the code to your needs when you’re lucky, but that doesn’t happen often.

What if you can’t find the answer when every link on Google turned purple?

You lack confidence in JavaScript

You get nervous when you’re asked to build things that require JavaScript. Your hands begin to sweat. Your mind goes blank.

You feel this way because you don’t know how to code from scratch.

You hesitate to say “yes”. You don’t know if you can pull it off. What if you cannot deliver what you promised?

You don’t want to say “no”. You feel guilty for turning people away when your skills are lacking. If you turn them away, will they look down on you for not being able to build that simple thing?

Deep down, you feel like a fraud for not being good enough.

What if you knew how to think like a developer?

You can solve any JavaScript problem you encounter if you can think like a developer. You can build anything you want. You won’t freeze up. You won’t copy-paste from google either.

The process to think like a developer:

  1. Identify the problem you need to solve
  2. Break the problem down into smaller problems
  3. Figure out how to solve each small problem
  4. Assemble your tiny solutions into the final solution.

That’s it.

Sounds simple, but not easy.

Being able to think like a developer requires practice and experience. The hardest part is knowing how to break large problems into tiny ones.

How will your career be different if you knew how to think like a developer?

Become a real developer and build anything you want.

I’ve built many crazy things with JavaScript.

The craziest thing I built was a static-site generator. I even used this static site-generator to run my blog for over two years!

Can you imagine yourself doing this?

I couldn’t, not before I became confident at JavaScript. I took a while to get to this point.

I want to show you another example. I built this modal animation with a huggy-emoji. It brings a smile to my face whenever I see it 🤗🤗🤗.

Don’t give up learning JavaScript

Maybe you’re like me.

  1. You don’t believe you can learn JavaScript
  2. Your mind blanks out when you try to code JavaScript
  3. You can’t remember anything you learned about JavaScript
  4. You want to give up.

Don’t give up.

I understand how you feel.

It’s hard.

But whatever you do, don’t give up.

Persist.

I’m glad I persisted at learning JavaScript. I became comfortable with writing JavaScript. I can build anything I want.

Let me show you another crazy thing I built.

This component that lets people view an artwork on a wall. Users can switch between different furniture scenes.

Watch out for two things:

  1. How the artwork zooms into the furniture setting
  2. How furniture get switched with other furniture

The lesson plan

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

—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

—JavaScript Basics

  1. Linking your JavaScript file
  2. Preparing your text editor
  3. The console
  4. Comments
  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

—Building simple components

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

—Arrays and loops

  1. Intro to arrays
  2. For loops
  3. The forEach loop
  4. Selecting multiple elements
  5. Node vs Elements
  6. Hands on: Building an accordion

—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. Hands on: Building a Tabbed Companent
  8. Hands on: Carousel: HTML and CSS
  9. Hands on: Carousel: Switching slides with JavaScript
  10. Hands on: Carousel: Working the dots
  11. Hands on: Carousel: Positioning slides with JavaScript

I am so grateful that I found Learn JavaScript. I think I would have given up otherwise. Learn JavaScript puts JavaScript within my reach.

The course deconstructs JavaScript in a logicaleasy to understand, and concise manner. It highlights the most important points and puts into practice the latest methods.

For example, in a previous course that I took, var was used 40% of the way through, and finally let and const were presented. Zell’s course went straight to let and const, mentioning var briefly. In one sentence, he said it was not a best practice, and should no longer be used. Done. I am not wasting my time learning irrelevant or outdated concepts. Zell’s course is a clear and direct path to learning JavaScript.

Picture of Lisa Drevillon

Lisa Drevillon

—Events deep dive

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

—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. Hands on: Modal: Animating the modal
  8. Hands on: Modal: Animating the pointing hand
  9. Hands on: Modal: Animating the waving hand
  10. Hands on: Modal: Modal: Wave hand animation with JavaScript (using GSAP)
  11. Hands on: Modal: Wave hand animation with JavaScript (using GSAP)
  12. Hands on: Accordion: Animations
  13. Hands on: Carousel: Animations

—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 implicit return
  13. Hands on: Accordion: Using useful JavaScript features
  14. Hands on: Tabby: Using useful JavaScript features
  15. Hands on: Carousel: Useful JavaScript features

—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. Hands on: Accordion: Refactor
  11. Hands on: Carousel: First refactor
  12. Hands on: Carousel: Refactoring the dots part
  13. Hands on: Carousel: Previous and next buttons
  14. Hands on: Carousel: Second refactor

—Creating HTML Elements*

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

At first, I didn’t know if Learn JavaScript was worth it. I was familiar with the first ten modules already. But now, I’m halfway into the course and I totally love it.

Learn JavaScript gave me a deep understanding of the language and it’s capabilities. I gained new perspectives on things I already know, and I learned new things like Forms and APIs.

Picture of Maxim Konoval

Maxim Konoval

—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. Hands on: Popover: Dynamic ID
  7. Hands on: Todolist: The HTML and CSS
  8. Hands on: Todolist: Creating tasks with JavaScript
  9. Hands on: Todolist: Deleting tasks with JavaScript
  10. Hands on: Typeahead: The HTML and CSS
  11. Hands on: Typeahead: Displaying predictions
  12. Hands on: Typeahead: Selecting a prediction
  13. Hands on: Typeahead: Bolding search terms

—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 post requests
  8. Authentication
  9. Handling errors
  10. Viewing response headers
  11. CORS and JSONP
  12. XHR or Fetch
  13. Using an Ajax library
  14. Understanding API Documentations
  15. Understanding CURL
  16. Hands on: Todolist: The Todolist API
  17. Hands on: Todolist: Fetching tasks
  18. Hands on: Todolist: Creating tasks
  19. Hands on: Todolist: Editing tasks
  20. Hands on: Todolist: Deleting tasks
  21. Hands on: Todolist: Creating tasks with Optimistic UI
  22. Hands on: Todolist: Handling Optimistic UI errors
  23. Hands on: Todolist: Editing tasks with Optimistic UI
  24. Hands on: Todolist: Deleting tasks with Optimistic UI
  25. Hands on: Todolist: Refactor
  26. Hands on: Typeahead: How to add Ajax
  27. Hands on: Typeahead: Adding Ajax
  28. Hands on: Typeahead: Handling errors
  29. Hands on: Google Maps Clone: Creating your first Google Map
  30. Hands on: Google Maps Clone: Fetching JSONP via JavaScript
  31. Hands on: Google Maps Clone: Drawing directions
  32. Hands on: Google Map Clone: Driving directions
  33. Hands on: Google Map Clone: Handling errors
  34. Hands on: Google Map Clone: Adding stopovers
  35. Hands on: Google Map Clone: Refactor
  36. Hands on: Dota Heroes: Listing heroes
  37. Hands on: Dota Heroes: Filtering heroes (Part 1)
  38. Hands on: Dota Heroes: Filtering heroes (Part 2)
  39. Hands on: Dota Heroes: Refactoring

—Advanced asynchronous JavaScript

  1. Requesting many resources at once
  2. Getting Response headers in JavaScript
  3. Dealing with paginated responses (part 1)
  4. Dealing with paginated responses (part 2)
  5. Async and await
  6. Timeouts
  7. Async loops
  8. Recursive XHR

—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. Hands on: Datepicker: Initial HTML and CSS
  10. Hands on: Datepicker: Building the calendar
  11. Hands on: Datepicker: Building the datepicker with JavaScript
  12. Hands on: Datepicker: Previous and next buttons
  13. Hands on: Datepicker: Selecting a date
  14. Hands on: Datepicker: Positioning the datepicker
  15. Hands on: Datepicker: Showing and hiding
  16. Formatting a date with toLocaleString
  17. setTimeout
  18. setInterval
  19. Hands on: Countdown: The HTML and CSS
  20. Hands on: Countdown: The JavaScript
  21. Hands on: Countdown: Counting months
  22. Hands on: Countdown: Daylight Saving Time
  23. Hands on: Countdown: Counting years

—Scroll, mouse and resize events*

  1. Handling Scroll events
  2. Handling Mouse events
  3. Handling Touch events
  4. Hands on: Building an auto-hiding sticky nav
  5. Hands on: Building a same-page-scroll link
  6. Hands on: Building an infinite-scrolling page
  7. Hands on: Building a scrollspy
  8. Hands on: Building a drag & drop component
  9. Hands on: Improving the carousel
  10. Hands on: Improving the date picker

Learn JavaScript is right for you if you want to build exciting UI components you always wanted to build.

The course cleared up many questions I had about JavaScript. I saved lots of time from googling, and I became more confident as a developer.

Picture of Israel Obiagba

Israel Obiagba

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. Keyboard shortcuts with Command and Control modifiers
  11. Hands on: Off-canvas: Adding keyboard interaction
  12. Hands on: Modal: Adding keyboard interaction
  13. Hands on: Accordion: Adding keyboard interaction
  14. Hands on: Tabby: Adding keyboard interaction — updated!
  15. Hands on: Tabby: Refactoring
  16. Hands on: Carousel: Adding keyboard interaction — updated!
  17. Hands on: Carousel: Displaying help text
  18. Hands on: Calculator: Adding keyboard interaction
  19. Hands on: Popover: Keyboard
  20. Hands on: Popover: Refactor
  21. Hands on: Todolist: Keyboard
  22. Hands on: Typeahead: Keyboard
  23. Hands on: Typeahead: Selecting a prediction with the keyboard
  24. Hands on: Typeahead: Selecting a prediction with the keyboard
  25. Hands on: Google Maps Clone: Keyboard
  26. Hands on: Dota Heroes: Keyboard
  27. Hands on: Datepicker: Tabbing in and out
  28. Hands on: Datepicker: Keyboard shortcuts

—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. How CSS affects ARIA
  14. ARIA properties and ARIA states
  15. ARIA for expandable widgets
  16. Hands on: Off-canvas: Accessibility
  17. ARIA for modal dialogs
  18. Hands on: Modal: Screen reader accessibility
  19. Hands on: Accordion: Screen reader accessibility
  20. ARIA for Tabbed components
  21. Hands on: Tabby: Screen reader accessibility
  22. Hands on: Tabby: Refactor
  23. Hands on: Carousel: Screen reader accessibility
  24. Roles that trigger Forms and Application modes
  25. Hands on: Calculator: Screen reader accessibility
  26. Hands on: Popover: Screen reader accessibility
  27. Hands on: Todolist: Screen reader accessibility
  28. Hands on: Todolist: Error handling and status updates
  29. Hands on: Datepicker: Screen reader accessibility

—Progressive Enhancement*

  1. The progressive enhancement mindset
  2. What if there’s no JavaScript?
  3. Feature detection and polyfilling
  4. Vendor prefixing
  5. Hands on: Enhancing every component you’ve built

—Object-oriented programming

  1. What is Object Oriented Programming?
  2. This in Javascript
  3. Javascript Classes
  4. Inheritance
  5. Prototype in Javascript
  6. Inheritance with Prototype
  7. Constructing objects
  8. Composition and inheritance
  9. Private and public variables
  10. Call, bind and apply

—Single page applications*

  1. The foundation to frontend frameworks
  2. The MVC Architecture
  3. Hands on: building the card generator
  4. Routing
  5. Hands on: adding routing to the card generator
  6. Data flow with vanilla-style flux/redux
  7. Authentication
  8. Hands on: adding authentication to the card generator
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *