How do I set up environment and master basics?

# Set Up Your JavaScript Environment 1. Download and install [Visual Studio Code](https://code.visualstudio.com/) - a free code editor. 2. Open Google Chrome, press F12 to access DevTools, and go to the Console tab. 3. Create a new file `basics.js` in VS Code. # Learn Core Concepts Follow [javascript.info fundamentals](https://javascript.info/first-steps): - Hello World: `console.log('Hello, JavaScript!');` - Variables: `let name = 'Learner'; const pi = 3.14;` - Data types: numbers, strings, booleans, null, undefined. - Operators: arithmetic (`+`, `-`), comparison (`===`, `!==`). Paste code into console or save as HTML file with ` ` and open in browser. ```javascript let message = 'Hello'; console.log(message + ' World!'); ```

How do I control flow and loops?

# Conditionals and Loops Use [MDN Control flow guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling): - If/else: ```javascript if (age >= 18) { console.log('Adult'); } else { console.log('Minor'); } ``` - Switch, ternary `condition ? true : false`. - Loops: for, while, for...of. ```javascript for (let i = 0; i < 5; i++) { console.log(i); } ``` Practice on [JSFiddle](https://jsfiddle.net/) - write a loop to sum numbers 1-10.

How do I functions and data structures?

# Functions, Arrays, Objects From [javascript.info functions](https://javascript.info/function-basics) and [objects](https://javascript.info/object): - Declare: `function greet(name) { return 'Hi ' + name; }` - Arrow: `const add = (a, b) => a + b;` Arrays: `let arr = [1,2,3]; arr.push(4);` Objects: `let user = {name: 'Alex', age: 30}; console.log(user.name);` Practice destructuring: `const {name} = user;` Build a function to calculate average of array.

How do I dom manipulation and events?

# Interact with Web Pages Follow [MDN first steps](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps) and [DOM](https://javascript.info/document): - Select: `document.querySelector('.class')` - Change: `element.textContent = 'New text';` Events: ```html Click document.getElementById('btn').addEventListener('click', () => alert('Clicked!')); ``` Create HTML file, add script to change button text on click.

How do I async js and build a todo project?

# Asynchronous Code and Project Intro to Promises/async from [javascript.info async](https://javascript.info/async): ```javascript fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(data => console.log(data)); ``` # Todo List Project 1. Create HTML with input, button, ul list. 2. Add event to input todo. 3. Use localStorage to persist: `localStorage.setItem('todos', JSON.stringify(todos));` 4. Load on page load. Follow [30 Days of JS Day 21-23](https://github.com/Asabeneh/30-Days-Of-JavaScript) for DOM/events inspiration. Test fully functional.

Learn JavaScript: Basics to Projects in 5 Steps

Q: How do I functions and data structures?

# Functions, Arrays, Objects From [javascript.info functions](https://javascript.info/function-basics) and [objects](https://javascript.info/object): - Declare: `function greet(name) { return 'Hi ' + name; }` - Arrow: `const add = (a, b) => a + b;` Arrays: `let arr = [1,2,3]; arr.push(4);` Objects: `let user = {name: 'Alex', age: 30}; console.log(user.name);` Practice destructuring: `const {name} = user;` Build a function to calculate average of array.

🧰

Instant Toolkit

2 artifacts

📋
Step-by-Step Guide

1

Set Up Your JavaScript Environment

Download and install Visual Studio Code - a free code editor.
Open Google Chrome, press F12 to access DevTools, and go to the Console tab.
Create a new file basics.js in VS Code.

Learn Core Concepts

Follow javascript.info fundamentals:

Hello World: console.log('Hello, JavaScript!');
Variables: let name = 'Learner'; const pi = 3.14;
Data types: numbers, strings, booleans, null, undefined.
Operators: arithmetic (+, -), comparison (===, !==).

Paste code into console or save as HTML file with <script src="basics.js"></script> and open in browser.

let message = 'Hello';
console.log(message + ' World!');

Why this step matters:

-Establishes essential syntax for all future coding
-Allows immediate experimentation and confidence building

3-5 hours

VS Code, Chrome DevTools Console, javascript.info

$0

Definition of Done

•Run 'Hello World' in browser console
•Declare variables with let/const and log different data types
•Perform basic operations and see results

Common Mistakes to Avoid

❌ Confusing `=` assignment with `==` comparison

→Use `let x = 5;` for assignment, `x == 5` to compare

❌ Ignoring strict mode

→Add '"use strict";' at top of scripts

❌ Not checking typeof

→Use `typeof variable` to verify data types

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

JavaScript Programming - Full Course

JavaScript Full Course 2026 | Tutorial For Beginners

📚
Learning Resources

📖 Online Courses

JavaScript Algorithms and Data Structures

beginner

freeCodeCamp

JavaScript First Steps

beginner

MDN Web Docs

The Modern JavaScript Tutorial

beginner

javascript.info

📖 Recommended Books

Eloquent JavaScript

beginner

by Marijn Haverbeke

🌐 Helpful Websites

MDN JavaScript Guide

documentation

Comprehensive official reference and tutorials

30 Days of JavaScript

tutorial

Daily lessons with exercises and projects

javascript.info

tutorial

Modern tutorial with examples and tasks

🛠️ Useful Tools

Visual Studio Code

Editor

Powerful free code editor with JS extensions

JSFiddle

Playground

Online playground for HTML/CSS/JS

CodePen

Playground

Collaborative JS playground for pens

Learn JavaScript: Basics to Projects in 5 Steps