JavaScript: From First Steps to Professional

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
14 hours, 19 minutes CC
JavaScript: From First Steps to Professional

Course Description

Take your first steps into the wide world of JavaScript and walk away with the core skills needed to become a professional JavaScript programmer! Through a series of hands-on projects, you’ll learn the building blocks to write dynamic websites. Modify web pages on the fly, write reusable code with functions, react to user events, make decisions with conditionals, and fetch data from APIs! Everything you need to continue your journey to become effective at JavaScript.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: November 15, 2022

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 28 minutes
  • Introduction
    Anjana Vakil introduces the course by providing some personal background and answering a student's questions regarding how Anjana discovered JavaScript and why they like it.
  • Course Overview
    Anjana provides an overview of the material covered in the course, including the DOM, data types, arrays, objects, functions, events, branches, loops, fetching data, and real-world JavaScript. A student's question regarding how much time will be spent writing code is also covered in this segment.
  • What is JavaScript
    Anjana discusses what JavaScript is and what it can do some examples include the language of the web, a programming language, and something that lets people modify and add functionality to a website.
  • Where to Write JavaScript
    Anjana discusses the relationship between HTML, CSS, and JavaScript and the places JavaScript can be written. The browser's JavaScript console, local text files in editors, and online playgrounds are some examples discussed. A brief demonstration of using the console is also provided in this segment.

DOM

Section Duration: 1 hour, 12 minutes

Values & Data Types

Section Duration: 57 minutes

Operators

Section Duration: 27 minutes

Expressions

Section Duration: 1 hour, 9 minutes

Arrays

Section Duration: 1 hour, 2 minutes

Objects

Section Duration: 58 minutes
  • Objects & Property Access
    Anjana introduces JavaScript objects and demonstrates how to access the values of an object's properties. A student's question regarding if there can be multiple properties or values on a single line is also covered in this segment.
  • Visualizing Object Access
    Anjana walks through a whiteboard visualization of what happens when creating and accessing information in a JavaScript object. A student's question regarding if an array that acts like an object can be created is also covered in this segment.
  • Objects Exercise
    Anjana provides an exercise to practice creating objects and adding properties. A student's question regarding creating sub-objects within objects is also covered in this segment.
  • Object Methods
    Anjana discusses properties on objects that point to functions, also known as methods, and briefly discusses the .this method. Nested objects and objects in arrays and objects are also demonstrated in this segment.
  • Object Methods Exercise
    Anjana provides an exercise to practice retrieving data from objects. Students are instructed to retrieve "Girl Power", the object representing Ginger Spice, "Spiceworld", and "Victoria" from the spiceGirls object.
  • Built-In Objects
    Anjana demonstrates predefined objects in JavaScript, including document, console, Math, and String. A brief review of some of the methods that can be performed on these built-in objects is also provided in this segment.
  • Tic Tac Toe Demo
    Anjana walks through playing a tic tac toe game using the material covered thus far. Creating a players array that contains objects for each player with the player's name, symbol (X or O), and score (0 initially), displaying each player's name in the appropriate element on the page, and playing the game by placing symbols on the board are all covered in this segment.

Quiz Project

Section Duration: 34 minutes

Quiz Project Functions

Section Duration: 1 hour, 41 minutes
  • Functions, Parameters, & Arguments
    Anjana discusses declaring and calling functions, the difference between function parameters and arguments, and what happens when a function receives an incorrect argument. A function's parameters are the expected inputs, while the arguments are the actual values the function is called with.
  • Function Return Values
    Anjana demonstrates specifying the output value of a function in a return statement and what happens when there is no return. A student's question regarding if a return statement functions similarly to console.log is also covered in this segment.
  • Creating Functions Exercise
    Anjana provides an exercise to practice declaring functions and walks through the solution to each function. Students are instructed to declare three functions: multiply, given two numbers, return their product; yell, given a lowercase string, log it in all caps to the console; and longerThan, given two arrays, return whether the first is longer than the second.
  • Arrow Functions
    Anjana discusses creating unnamed functions using the arrow syntax to declare the function. More complicated arrow functions can be made by utilizing curly braces to define a function body, but a return statement is still required.
  • Arrow Functions Exercise
    Anjana provides an exercise to practice writing arrow functions by refactoring the previously written functions in the creating functions exercise as arrow functions.
  • Quiz Project Functions Exercise
    Anjana provides an exercise to practice declaring functions in the JavaScript quiz project. Students are instructed to declare functions that disable or enable a button and declare an isCorrect(guess) function that compares the given string to the previously created fact's answer string.
  • Quiz Project Disable & Enable Solution
    Anjana walks through the solution to TODO number four of declaring functions that disable or enable a button.
  • Quiz Project isCorrect Solution
    Anjana walks through the solution to TODO number five of declaring an isCorrect(guess) function that compares the given argument string to the previously defined fact's answer string.
  • Boolean Q&A
    Anjana answers a student's question regarding how fact.answer works since it compares a string to a boolean and demonstrates how to convert a non-string value into a string using toString.
  • Scope
    Anjana discusses the meaning of scope in JavaScript, when the scope of a function is determined, and how to determine which variables can be accessed in a given scope. Within each scope, variables declared on the broader scope can be accessed, but variables declared in a narrower scope cannot be accessed.
  • let & Scope
    Anjana demonstrates the ability to allow variables from a narrower scope to be accessed in a broader scope using the let keyword. A student's question regarding how the scope changed when strings are immutable is also covered in this segment.
  • var vs let
    Anjana discusses the differences between the var and let keywords. The var statement declares a function-scoped or globally-scoped variable while the let declaration declares a block-scoped local variable.

Events & Handlers

Section Duration: 26 minutes
  • Event Listeners
    Anjana provides a brief overview of the quiz project and discusses detecting events on the DOM with the method .addEventListener. The event listener method takes in two parameters, the name of the event being listened for and a handler function to run when that event is detected.
  • Event Object
    Anjana demonstrates the properties contained within the event object and how they are used to describe the event that occurred. Events are fired to notify code of "interesting changes" that may affect code execution.
  • Events Exercise
    Anjana provides an exercise to practice adding event listeners in the console and walks through the solutions. The events click, mouseover, and mouseout are demonstrated in this segment.

Conditionals

Section Duration: 1 hour, 10 minutes

Map & Filter

Section Duration: 24 minutes

Doggos Quiz Game

Section Duration: 50 minutes

Data Fetching & Promises

Section Duration: 29 minutes

Destructuring Data

Section Duration: 40 minutes

Async

Section Duration: 33 minutes

Modules

Section Duration: 1 hour, 1 minute

Wrapping Up

Section Duration: 10 minutes
  • Wrapping Up
    Anjana wraps up the course by answering student questions regarding how to think about programming paradigms in JavaScript and if companies are more often using pure JavaScript or JavaScript with a framework such as React.
Anjana Vakil's course on Frontend Masters, JavaScript: From First Steps to Professional, was the exact JS refresher I needed. Thoroughly enjoyed her teaching style, GIFs and jokes. 😂
Esther 🥑

Esther 🥑

_estheradebayo

I just completed "JavaScript: From First Steps to Professional" by Anjana Vakil on Frontend Masters! Such an amazing course, thank you so much.
Ahmed Hlilioune 🇲🇦

Ahmed Hlilioune 🇲🇦

a7lilion3

I just completed "JavaScript: From First Steps to Professional" by Anjana Vakil on Frontend Masters! Anjana is such a fun teacher.
Isaac Agboola

Isaac Agboola

the_isaacagbola

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now