Learning JavaScript from Scratch

Scrimba Discount!

• Learn to code using Scrimba with their interactive follow along code editor
• Join their exclusive discord communities and network to find your first job!
• Use this URL to get 10% off on all their paid plans: https://tinyurl.com/ScrimbaHATT

Topics

Stop! If you're brand new to web development, we recommend you go back and listen to episode 248 "Become a Junior Developer, Learn Web Development from Scratch" where we discuss how to get started learning HTML and CSS - what we consider the first two web technologies that you should learn. If you're not sure which learning pathway is right for you (ie self-taught, traditional school, bootcamps etc.) we also discussed this at length in episode 248, only touching on it briefly in this JavaScript episode (episode 251).

Why do you need JavaScript?

• In terms of UI:
  - HTML provides the structure (skeleton)
  - CSS provides the styles
  - JavaScript provides the functionality and interactivity (frontend and backend)
• In this episode we'll focus on what JavaScript was created for, the frontend
• Examples of interactivity that JavaScript can provide:
  - Toggle switch for light and dark modes
  - Dynamically displaying weather as it changes in real-time
  - Realtime chat using web sockets
  - Complex animations w/ a JS animation API, or in cooperation with CSS animations
  - Audio/video playback (getUserMedia API)

How do you learn JavaScript from scratch?

• Start with courses to get fundamentals and a good foundation/path
  - Learn JavaScript from Scrimba (free)
  - Beginner JavaScript from Wes Bos (paid)
• These courses get you to build projects
  - With project-building experience under your belt you will soon start to figure out ways you'd like to improve, build upon, and modify your projects
• Taking course projects and altering them in some way is a great way to test the boundaries of your knowledge and start the process of learning how to google
• Once you can do that try to start a project from scratch that you’re interested in and build it
  - Use additional courses and resources to fill in knowledge gaps
  - Don’t be afraid to use AI (ChatGPT) and open-source projects to add functionality
  - Make sure you understand at least at a high level the code you are copy pasting
  - Learn to debug, if something goes wrong don’t give up, keep trying until you find a solution

JavaScript core concepts you need to know

1. Syntax and Basic Constructs: Understanding how JavaScript is written and structured, including variables, data types, operators, and control flow structures like loops and conditional statements.
2. Functions: The ability to define and call functions, understand scope, and use different types of functions like arrow functions.
3. Objects and Arrays: Understanding how to create and use objects and arrays, including their methods and properties.
4. JavaScript DOM Manipulation: Learning how to interact with the Document Object Model (DOM), which allows JavaScript to change the content and appearance of a webpage.
5. Event Handling: Understanding how to create and respond to events, such as user interactions.
6. Asynchronous JavaScript: This includes concepts like callbacks, promises, and async/await, which are used for handling operations that take some time to complete, like fetching data from a server.
7. ES6+ Features: Familiarity with newer features of JavaScript introduced in ES6 and beyond, such as `let` and `const`, template literals, destructuring, default parameters, spread and rest operators and modules.
8. Error Handling: Understanding how to catch and handle errors using `try...catch` statements.
9. Testing and Debugging: Learning how to write tests for your code, use console methods for debugging, and use browser developer tools.
10. Functional Programming Concepts: Understanding functional programming principles can be useful, such as immutability, pure functions, and higher-order functions.