Lessons · Coding · beginner · Programming with Mosh

JavaScript Course for Beginners – Your First Step to Web Development

The video “JavaScript Course for Beginners – Your First Step to Web Development” by Programming with Mosh as 9 lessons, with the idea explained, the code from the screen, steps to try in the practice terminal, practice problems with solutions and a quiz that leads back to the moment.

9lessons
16pieces of code
1formula
21exercises
48min of video
Open the lessons →Lesson 1 is free · Beyond Pass opens all
JavaScript Course for Beginners – Your First Step to Web Development, video by Programming with Mosh▶ 48:16 · Programming with Mosh
123456789
0:009 lessons across the whole video48:16

You will be able to

  • Write JavaScript variables, constants, and data types to store and manipulate values
  • Use conditionals, loops, and functions to control program flow and reuse logic
  • Work with arrays and objects to organize related data
  • Run and debug JavaScript code in the browser console and in a simple HTML page

Good to know first

  • Basic comfort using a computer and a text editor
  • A general understanding of what a web page is

Syllabus

9 lessons and a final project

  1. 1

    Course setup and running your first JavaScript Free

    0:00–4:004 min of video

    You learn where JavaScript runs (inside browsers, through a JavaScript engine) and how the JavaScript version history shapes what you will learn. You then open the browser's developer console and run your first line of JavaScript.

    3 build steps3 exercises3 questions
  2. 2

    Declaring variables and constants Beyond Pass

    4:00–9:005 min of video

    You will learn what a variable is and how to declare one with let, and how a constant with const differs. You will also see how a value is stored and reused in JavaScript code.

    1 code4 build steps3 exercises3 questions
  3. 3

    Your first JavaScript code: console.log and the script tag Beyond Pass

    9:00–14:005 min of video

    You learn how to run JavaScript inside an HTML page, print a message to the browser console with console.log, and move the code into its own index.js file linked by a script tag. The chapter introduces the basic setup you need before learning primitive types and operators.

    3 code5 build steps2 exercises3 questions
  4. 4

    Working with strings and template literals Beyond Pass

    14:00–18:004 min of video

    You will learn what a string is in JavaScript and how to write text with quotes. You will also learn template literals, which let you put values inside text with backticks and ${...}.

    2 code2 build steps3 exercises3 questions
  5. 5

    Naming variables and the const/let difference Beyond Pass

    18:00–23:205 min of video

    This lesson shows the rules for naming variables in JavaScript, including what is allowed, what is forbidden, and why names are case-sensitive. It also shows the difference between let (can be reassigned) and const (cannot be reassigned), with an error you will see when you try.

    2 code3 build steps1 exercise3 questions
  6. 6

    Repeating code with loops Beyond Pass

    23:20–29:006 min of video

    This lesson covers the difference between primitive (value) types and reference types in JavaScript, and how variables hold values of these types. It also shows how JavaScript's dynamic typing lets a variable change what kind of value it holds.

    2 code3 build steps2 exercises3 questions
  7. 7

    Writing and calling functions Beyond Pass

    29:00–35:006 min of video

    This lesson covers objects as a way to group related values, and how to read and change their properties with dot and bracket notation. The video's chapter is titled "Writing and calling functions", but the transcript and frames in this segment only show objects, so this lesson covers what is actually shown.

    2 code3 build steps2 exercises3 questions
  8. 8

    Storing data in arrays and objects Beyond Pass

    35:00–40:205 min of video

    This lesson shows how a JavaScript array stores a list of values in one variable, how to read and change items by their index, and how to check the type of a value with typeof. It also shows why an array is an object, and what happens when you put a value of the wrong kind into it.

    3 code4 build steps3 exercises3 questions
  9. 9

    Functions with Parameters, Return Values and a Small Project Beyond Pass

    40:20–48:168 min of video

    This lesson shows how to write functions that take inputs (parameters) and give back results (return values), and how to use them to build a small project. You will see the difference between a function that performs a task and one that calculates a value.

    1 code1 formula4 build steps2 exercises3 questions

Final project

Console Shopping Cart: a small JavaScript project

Build a small shopping cart program that runs from an HTML page and prints a receipt to the browser console. It uses variables, constants, template literals, arrays, objects, a loop and functions with return values. You write one bigger program instead of many separate snippets.

Its 8 tasks open with Beyond Pass.

Free preview · Lesson 1 in full

Course setup and running your first JavaScript

You learn where JavaScript runs (inside browsers, through a JavaScript engine) and how the JavaScript version history shapes what you will learn. You then open the browser's developer console and run your first line of JavaScript.

0:00 to 4:00 in the video

Practice terminal

Type the lesson's commands, break things, and see why.

Scratchpad

Draw and write next to the video.

The idea

JavaScript is the programming language of the web. Every modern browser, such as Chrome or Firefox, can run JavaScript code. Inside each browser there is a piece of software called a JavaScript engine that reads your code and carries out its instructions. Firefox uses an engine called SpiderMonkey, and Chrome uses one called V8.

JavaScript was first released in 1997 as version 1, and it has grown since then. A major update came in 2015, called ES2015 or ES6, and newer yearly versions followed in 2016 and after. The language you learn in this course is the modern version, so the features you use will work in current browsers.

You do not need to install anything to start. Open your browser, press F12 (or right-click the page and choose Inspect, then the Console tab) to open the developer tools. The Console is a box where you type JavaScript and press Enter, and the browser runs it immediately. Whatever your code produces is shown right below what you typed.

Your first program can be a single line. Type the line in the console and press Enter. If the browser shows the result below your line, you have just run JavaScript. This is the fastest way to test an idea, and it is the first tool you will use throughout the course.

Key points

  • JavaScript runs inside the browser, using the browser's JavaScript engine (SpiderMonkey in Firefox, V8 in Chrome). 2:00
  • JavaScript started in 1997 as version 1; the ES2015/ES6 update and yearly releases after it added the modern features you will learn. 3:00
  • The browser's developer console lets you run JavaScript with no installation: open it, type a line, and press Enter. 3:50

Build along in the practice terminal

  1. Open a new browser tab (Chrome or Firefox). Open the developer tools with F12, or with right-click then Inspect. 3:50You should see: A panel opens at the bottom of the page with tabs such as Elements, Console and Sources.
  2. Click the Console tab. You should see a prompt symbol (>) where you can type. 3:50You should see: The Console tab is selected and a blinking cursor waits after the > symbol.
  3. Click next to the > symbol and type a simple line, for example: 2 + 3 , then press Enter. 
    $ 2 + 3
5
    You should see: The console prints 5 below your line, showing the browser ran your JavaScript.

Practice

Calculate Solution checked

In the console you type 7 * 6 and press Enter. What number does the console print? Give the number only.

Hint

Multiply 7 by 6.

Solution
  1. Multiplication is done first: 7 times 6 equals 42.
  2. The console prints the result of the expression.

42

Explain Solution checked

In your own words, explain what the JavaScript engine does and why different browsers have different engines.

Solution
  1. The engine is the part of the browser that reads JavaScript code and runs it.
  2. Each browser company builds its own engine (Firefox uses SpiderMonkey, Chrome uses V8), so the code is run by different software that follows the same language rules.

The JavaScript engine is the part of the browser that reads and runs JavaScript. Firefox uses SpiderMonkey and Chrome uses V8, so each browser has its own engine that runs the same language.

Do it Solution checked

Open the Console in your browser, type 10 - 4 and press Enter. Then type a line of your own choice and check that the console answers it.

Solution
  1. Press F12 and open the Console tab.
  2. Type 10 - 4 and press Enter; the console prints 6.
  3. Type any other simple sum and check the printed result.

The console prints 6 for 10 - 4, and your own line also prints a result.

On your scratchpad

Draw a box for the browser, put a small circle inside it labelled JavaScript Engine, and draw an arrow from the code to the engine. Write Chrome: V8 and Firefox: SpiderMonkey beside it.

Quiz

  1. Which part of the browser actually reads and runs JavaScript code?

    1. The address bar
    2. The JavaScript engine
    3. The bookmarks bar
    4. The tab title
    Show the answer

    B. The JavaScript engine · Each browser contains a JavaScript engine, such as SpiderMonkey in Firefox or V8 in Chrome, which runs the code.

    2:00 watch the moment

  2. In which year was JavaScript first released as version 1?

    1. 1995
    2. 1997
    3. 2015
    4. 2016
    Show the answer

    B. 1997 · JavaScript v1 is shown on the timeline at 1997. The 2015 ES2015/ES6 update came later.

    3:00 watch the moment

  3. What is the quickest way to run a line of JavaScript with no installation?

    1. Install a compiler
    2. Open the browser's developer console and type the line
    3. Restart the computer
    4. Create a new folder
    Show the answer

    B. Open the browser's developer console and type the line · The browser's Console tab runs JavaScript as soon as you press Enter.

    3:50 watch the moment

Open lesson 1, with the video →

Lessons 2–9 and the final project

They open with Beyond Pass: every lesson of every course, in full. One payment: $14.99 for 90 days or $29 for a year. No subscription.

Get Beyond Pass →Start lesson 1 free

Made by Beyond from the video “JavaScript Course for Beginners – Your First Step to Web Development” by Programming with Mosh. The video plays in YouTube's own player. Watch it on YouTube · All lessons