JavaScript for Beginners to Advanced – Full Coding Guide

Week 1 — JavaScript basics

Day 1: What is JavaScript ? let/const/var. Create variables.

Day 2: Data types — string, number, boolean, null, undefined, bigint, symbol.

Day 3: Type conversion, typeof, template strings.

Day 4: Arithmetic, assignment, comparison operators.

Day 5: Logical operators (&&, ||, !).

Day 6: Conditionals: if, else if, else, ternary operator.

Day 7: Small challenge: build a temperature converter (C ↔ F) + logging.

Week 2 — Loops & collections

Day 8: for loop, while, do...while.

Day 9: Arrays basics, indexing, length.

Day 10: Array methods: push, pop, shift, unshift.

Day 11: forEach, map, filter.

Day 12: Objects — key/value, accessing properties.

Day 13: for...in, for...of.

Day 14: Mini project: TODO list (array of tasks) in console.

Week 3 — Function & Scope

Day 15: Function declarations vs expressions.

Day 16: Arrow functions.

Day 17: Parameters, default params, rest ...args.

Day 18: Return values & early returns.

Day 19: Scope: global vs local.

Day 20: Hoisting basics.

Day 21: Challenge: build a sum(...numbers) and average function.

Week 4 — Advanced arrays & objects

Day 22: Deep dive map, reduce, find, some, every.

Day 23: Spread operator ..., destructuring.

Day 24: Object methods, this (intro).

Day 25: Immutable patterns, copying arrays/objects.

Day 26: JSON: JSON.stringify, JSON.parse.

Day 27: Practice exercise: transform a list of users — filter, map, reduce.

Day 28: Small project: contact list in console (CRUD operations).

Week 4 — Advanced arrays & objects

Day 29: What is DOM? document, selecting elements (getElementById, querySelector).

Day 30: Changing content and styles, textContent, innerHTML, classList.

Day 31: Creating & removing elements (createElement, appendChild, remove).

Day 32: Event listeners: addEventListener.

Day 33: Event object, event delegation.

Day 34: Form inputs & preventing default.

Day 35: Project: interactive TODO app in browser (add/remove items).

Week 6 — DOM continued + CSS interaction

Day 36: Traversing DOM, parent/children, sibling access.

Day 37: Animations basics with CSS classes toggled by JS.

Day 38: Debouncing and throttling (why and when).

Day 39: Accessibility basics (aria attributes) and focus management.

Day 40: Project enhancements: edit & persist TODOs in localStorage.

Day 41: Clean-up & polish UI.

Day 42: Refactor your TODO app into functions/modules.

Week 7 — Asynchronous JS (part 1)

Day 43: Callbacks & callback hell.

Day 44: Promises: new Promise, .then, .catch.

Day 45: fetch API basics — GET requests.

Day 46: Fetch POST, headers, JSON body.

Day 47: Async/await syntax.

Day 48: Error handling in async code.

Day 49: Project: fetch and display data from a public API (e.g., random user) — show list in page.

Week 8 — Asynchronous JS (part 2) + patterns

Day 50: Parallel requests (Promise.all, Promise.race).

Day 51: Retry logic and timeouts (basic).

Day 52: Web APIs overview (LocalStorage, SessionStorage, IndexedDB intro).

Day 53: Modules: ES modules (import/export) in browser.

Day 54: Bundlers intro (what are they: webpack, parcel) — conceptual.

Day 55: Unit testing intro (Jest conceptually).

Day 56: Mid-capstone: small single-page app using fetched data + basic routing (hash-based).

Weeks 9–10 — Advanced JS

Day 57: Closures — patterns and memory.

Day 58: Prototypes and prototype chain.

Day 59: Classes and OOP in JS.

Day 60: this deep dive and binding (call, apply, bind).

Day 61: Higher-order functions and functional programming basics.

Day 62: Modules & package.json basics (npm).

Day 63: Error objects and custom errors.

Day 64: Performance tips (reflow, repaint basics).

Leave a Reply

Your email address will not be published. Required fields are marked *