How do I data types and operators?

## Handle Core Data and Math 1. In console: Experiment with types - `typeof 42`, `typeof 'hello'`, `null`, `undefined`. 2. Operators: `let x = 5 + 3 * 2; console.log(x);` (15) 3. Comparisons: `5 === '5' // false`, `5 == '5' // true`. 4. Strings: `'Hello'.toUpperCase()`, `'abc'.length`. Follow [MDN Numbers/Strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) or [javascript.info basics](https://javascript.info/basic-js). Solve 5-10 tasks on types/operators.

How do I control flow and functions?

## Add Logic and Reusability 1. Conditionals: ```js let age = 20; if (age >= 18) { console.log('Adult'); } else { console.log('Minor'); } ``` 2. Loops: `for (let i=0; i<5; i++) console.log(i);` 3. Functions: ```js function greet(name) { return 'Hi, ' + name; } console.log(greet('JS')); ``` Study [MDN Control Flow](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling), [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions). Write 3 functions with loops.

How do I arrays, objects, and dom basics?

## Work with Data Structures and Web 1. Arrays: `let arr = [1,2,3]; arr.push(4); console.log(arr.length);` 2. Objects: `let person = {name: 'Ana', age: 25}; console.log(person.name);` 3. DOM: In HTML add ` Click `, script: ```js document.getElementById('btn').addEventListener('click', () => alert('Clicked!')); ``` Read [MDN Indexed/Keyed Collections](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide), [javascript.info objects/arrays](https://javascript.info/array, https://javascript.info/object). Manipulate DOM elements.

How do I build and debug projects?

## Apply Skills in Mini-Projects 1. Build 'Guess the Number' game (MDN [tutorial](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash)). 2. Silly Story Generator: Use arrays/strings/random. 3. Debug: Use `console.error()`, breakpoints in DevTools. 4. Enhance with functions, loops, events. Follow MDN [Troubleshooting](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong), complete 2-3 challenges on javascript.info. Share on GitHub.

Master JavaScript Fundamentals in 5 Steps

Q: How do I setup environment and basics?

## Get Started with JavaScript 1. Open Google Chrome, press F12 to open DevTools, go to Console tab. 2. Type `console.log('Hello, JavaScript!');` and press Enter. See output. 3. Install [VS Code](https://code.visualstudio.com/). Create `index.html`: ```html console.log('Hello from HTML!'); let name = 'Learner'; console.log('Hi, ' + name); ``` 4. Open in browser. Read MDN [Introduction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction) and [Grammar](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types). Practice `let`, `const`, basic types.

Q: How do I arrays, objects, and dom basics?

## Work with Data Structures and Web 1. Arrays: `let arr = [1,2,3]; arr.push(4); console.log(arr.length);` 2. Objects: `let person = {name: 'Ana', age: 25}; console.log(person.name);` 3. DOM: In HTML add ` Click `, script: ```js document.getElementById('btn').addEventListener('click', () => alert('Clicked!')); ``` Read [MDN Indexed/Keyed Collections](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide), [javascript.info objects/arrays](https://javascript.info/array, https://javascript.info/object). Manipulate DOM elements.

🧰

Instant Toolkit

2 artifacts

📋
Step-by-Step Guide

1

Get Started with JavaScript

Open Google Chrome, press F12 to open DevTools, go to Console tab.
Type console.log('Hello, JavaScript!'); and press Enter. See output.
Install VS Code. Create index.html:

<!DOCTYPE html>
<html>
<body>
<script>
  console.log('Hello from HTML!');
  let name = 'Learner';
  console.log('Hi, ' + name);
</script>
</body>
</html>

Open in browser. Read MDN Introduction and Grammar.

Practice let, const, basic types.

Why this step matters:

-Builds confidence with immediate feedback in console
-Enables writing and running code for real-world web interactivity

1-2 hours

Google Chrome DevTools, VS Code, MDN Web Docs

$0

Definition of Done

•Successfully log messages to console
•Declare variables with let/const and perform basic output
•Explain difference between let and var

Common Mistakes to Avoid

❌ Using var instead of let/const

→Prefer let for reassigned vars, const for constants per modern standards

❌ Not using strict mode

→Add 'use strict'; at top of scripts for better error catching

2

Following along, or just reading? 👀

Spin up a personalized “learn JavaScript” plan you can save, check off, and return to anytime — unlimited on the free trial.

Start free trial →

3

4

5

🎥
Suggested Videos

Learn JavaScript - Full Course for Beginners (freeCodeCamp)

JavaScript Full Course for Beginners

📚
Learning Resources

📖 Online Courses

JavaScript Algorithms and Data Structures

beginner

freeCodeCamp

JavaScript Basics

beginner

The Odin Project

📖 Recommended Books

Eloquent JavaScript (4th Edition)

beginner

by Marijn Haverbeke

🌐 Helpful Websites

MDN Web Docs - JavaScript

documentation

Official reference and guides

javascript.info

tutorial

Modern tutorial with interactive tasks

W3Schools JavaScript

tutorial

Try-it-yourself examples

🛠️ Useful Tools

Visual Studio Code

Editor

Powerful editor with JS extensions

Chrome DevTools

Debugger

Console, debugger, inspector

Node.js

Runtime

Server-side JS runtime

Master JavaScript Fundamentals in 5 Steps