šŸš€ LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
šŸŽ“ COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
JS MASTER CLASS /// MASTER THE ENGINE /// BUILD LOGIC /// ASYNC PATTERNS /// JS MASTER CLASS /// MASTER THE ENGINE ///
. It keeps your HTML clean, lets the browser cache the script independently, and makes the code easier to maintain as your project grows."}}]}

First Steps in JavaScript: Web Development - In-Depth Guide

Learn about First Steps in this comprehensive JavaScript tutorial for web development. Learn to execute your first lines of code. Master the <script> tag, understand the difference between blocking alerts and silent logging, and discover the power of the developer console.

āš” Total XP: 0|šŸ’» javascript XP: 0

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

System Hub

Core logic.

Quick Quiz //

What is the primary advantage discussed here?

šŸš€ LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
šŸŽ“ COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

This lesson writes your very first JavaScript, straight in the browser. You'll learn how to embed code with the script tag, trigger a blocking alert() popup, print silent messages with console.log(), understand strings, and link an external JS file with the src attribute.

1First Steps in JavaScript Part 1

Welcome to your First Steps in JavaScript. Today, you'll stop being a spectator and start being an engineer. We're going to write our very first instructions.

āœ•
ā€”
+
// First Steps: Writing your first code
localhost:3000
Terminal
Code executed.

2First Steps in JavaScript Part 2

To write JS inside an HTML file, we use the <script> tag. The browser executes anything inside these tags as code, not text.

āœ•
ā€”
+
<script>
  // Code goes here
</script>
localhost:3000
Terminal
Code executed.

3First Steps in JavaScript Part 3

Our first command is alert(). This 'Statement' tells the browser to display a popup. Note the parentheses and the semicolon at the end.

āœ•
ā€”
+
<script>
  alert('Hello!');
</script>
localhost:3000
Terminal
Code executed.

4First Steps in JavaScript Part 4

The text inside alert('...') is called a 'String'. Strings must always be wrapped in single or double quotes.

āœ•
ā€”
+
alert('This is a String');
alert("So is this");
localhost:3000
Terminal
Code executed.

5First Steps in JavaScript Part 5

Popups are annoying. For debugging, we use console.log(). This prints messages to the 'Developer Tools', a hidden area just for programmers.

āœ•
ā€”
+
console.log('System initialized.');
localhost:3000
Terminal
System initialized.

6First Steps in JavaScript Part 6

JS executes 'Sequentially'. This means it runs the first line, then the second, then the third. Top-to-bottom order is absolute.

āœ•
ā€”
+
console.log('1');
console.log('2');
console.log('3');
localhost:3000
Terminal
1
2
3

7First Steps in JavaScript Part 7

Watch the render. See how 'alert' stops the page execution until you click 'OK', while 'console.log' runs silently in the background.

āœ•
ā€”
+
localhost:3000
Terminal
Code executed.

8First Steps in JavaScript Part 8

To run an external file, we use the 'src' attribute. This is the best way to organize your code as your app grows.

āœ•
ā€”
+
<script src='app.js'></script>
localhost:3000
Terminal
Code executed.

9First Steps in JavaScript Part 9

You've successfully taken your first steps. You can now communicate with the browser and output data like a pro developer.

āœ•
ā€”
+
console.log('Level 1 Complete');
localhost:3000
Terminal
Level 1 Complete

10First Steps in JavaScript Part 10

First steps complete! Now let's master the rules of the language in Basic Syntax.

āœ•
ā€”
+
localhost:3000
Terminal
Code executed.

11Step-by-Step Breakdown

Welcome to your First Steps in JavaScript. Today, you'll stop being a spectator and start being an engineer. We're going to write our very first instructions.

To write JS inside an HTML file, we use the <script> tag. The browser executes anything inside these tags as code, not text.

Our first command is alert(). This 'Statement' tells the browser to display a popup. Note the parentheses and the semicolon at the end.

Checkpoint: Which HTML tag is used to embed JavaScript code?

  • ā†’<style>
  • ā†’<script>

The text inside alert('...') is called a 'String'. Strings must always be wrapped in single or double quotes.

Popups are annoying. For debugging, we use console.log(). This prints messages to the 'Developer Tools', a hidden area just for programmers.

JS executes 'Sequentially'. This means it runs the first line, then the second, then the third. Top-to-bottom order is absolute.

Watch the render. See how 'alert' stops the page execution until you click 'OK', while 'console.log' runs silently in the background.

Checkpoint: Where do 'console.log()' messages appear?

  • ā†’Directly on the webpage
  • ā†’In the Developer Console

To run an external file, we use the 'src' attribute. This is the best way to organize your code as your app grows.

You've successfully taken your first steps. You can now communicate with the browser and output data like a pro developer.

Checkpoint: What is the text data wrapped in quotes called in JavaScript?

  • ā†’Boolean
  • ā†’String

First steps complete! Now let's master the rules of the language in Basic Syntax.

Level Up šŸš€

Advanced cheat sheets, SEO tricks, and interview prep for this topic.

Browser Support

ChromeSupported

Fully supported.

FirefoxSupported

Fully supported.

SafariSupported

Fully supported.

EdgeSupported

Fully supported.

Accessibility (A11y)

1alert() Dialogs Are Disruptive and Poorly Announced by Some Screen Readers

A native alert() blocks the entire page and can be jarring for assistive technology users, since it interrupts whatever the screen reader was reading. Prefer accessible, dismissible custom dialogs with proper ARIA roles (`role="alertdialog"`) for anything users will encounter regularly.

SEO Implications

  • 1

    Inline vs. External Scripts Affect Page Load and Rendering Speed

    A large inline `<script>` block in the `<head>` can block HTML parsing until it finishes executing, delaying when content becomes visible. Loading JavaScript via an external file with the `defer` or `async` attribute lets the browser parse the rest of the page while the script downloads, which can improve perceived load speed and Core Web Vitals.

Best Practices

Prefer console.log Over alert() for Debugging

alert() halts all JavaScript execution and blocks user interaction with the page until dismissed, which makes it disruptive for both development and any user who encounters it. console.log() prints the same information to the Developer Tools without interrupting anything.

Load JavaScript with an External File and the src Attribute

Writing all your code inline inside `<script>` tags scattered through the HTML makes it hard to reuse, cache, or maintain. Linking a `.js` file with `src` lets the browser cache it separately from the HTML and keeps logic out of your markup.

Frequent Bugs

THE BUG

`ReferenceError: X is not defined` when logging a plain word instead of a string.

THE FIX

Writing `console.log(Hello World)` instead of `console.log('Hello World')` makes JavaScript try to interpret `Hello` as a variable name rather than text. Since no such variable exists, it throws a ReferenceError ā€” wrapping the text in quotes turns it into a string literal instead.

Real-World Examples

Linking an External Script and Logging a Startup Message

A new project needed to confirm that its JavaScript file was correctly linked to the HTML page before building out real features, so a simple console.log() was used as a sanity check.

<!-- index.html -->
<script src="app.js"></script>

// app.js
console.log('App initialized successfully.');

Interview Prep

?Frequently Asked Questions

Pascual Vila

Pascual Vila

Frontend Instructor // Code Syllabus

Common Pitfalls & Errors

The Error //

Mutating arrays while iterating over them

// Wrong items.forEach((item, index) => { if (item === 'remove') items.splice(index, 1); }); // Correct const newItems = items.filter(item => item !== 'remove');

The Solution //

Modifying an array's length or contents while looping through it (with a for loop or forEach) can cause elements to be skipped. Use methods like filter() or map() instead.

The Error //

Forgetting to await asynchronous functions

// Wrong const data = fetch('api/data'); console.log(data.json()); // Error // Correct const response = await fetch('api/data'); const data = await response.json();

The Solution //

If a function returns a Promise, you must use 'await' (or .then) to get its resolved value. Otherwise, your variable will hold a Promise object instead of the data.

Lesson Glossary

[01]Script Tag

The HTML container used to embed or reference JavaScript code.

Code Preview
<script>

[02]Statement

A single instruction in JavaScript that performs an action.

Code Preview
alert('Hi');

[03]String

A sequence of characters used to represent text, wrapped in quotes.

Code Preview
'Hello'

[04]Alert

A blocking function that shows a modal dialog with a message.

Code Preview
alert()

[05]Console.log

A non-blocking function that prints data to the developer console.

Code Preview
console.log()

[06]Sequential

The top-to-bottom order in which the browser executes JavaScript statements.

Code Preview
Line 1 -> Line 2

Continue Learning

Javascript

JavaScript Fetch API for HTTP request (GET, POST)

Read lessonā†’
Javascript

javascript fetch

Read lessonā†’
Javascript

JavaScript Functions

Read lessonā†’
Javascript

JS History | JavaScript Tutorial - In-Depth Guide

Read lessonā†’
Javascript

javascript array methods

Read lessonā†’
Javascript

JavaScript Arrays and Objects

Read lessonā†’