Free JavaScript Learning Tutorial

Welcome to the 30-Days JavaScript Learning Journey! This plan will take you from the basics of JavaScript to more advanced concepts, with practical examples and mini-projects along the way.

Table of contents

Day 1-5: Basics of JavaScript

Day 1: Introduction to JavaScript
  • What is JavaScript?
  • Setting up the development environment (Node.js, VS Code)
  • Writing your first JavaScript program (Hello, World!)
  • Basic syntax and comments
  • Example: Displaying “Hello, World!” in the console
Day 2: Variables and Data Types
  • Variables: var, let, and const
  • Data types: Number, String, Boolean, Null, Undefined, Object
  • Example: Creating variables of different types and logging them
Day 3: Operators
  • Arithmetic operators
  • Comparison operators
  • Logical operators
  • Assignment operators
  • Example: Simple calculator using arithmetic operators
Day 4: Conditional Statements
  • if, else if, else
  • switch statement
  • Example: Program to check if a number is positive, negative, or zero
Day 5: Loops
  • for loop
  • while loop
  • do...while loop
  • Example: Printing numbers from 1 to 10 using different loops

Day 6-10: Functions and Arrays

Day 6: Functions
  • Declaring and invoking functions
  • Parameters and return values
  • Arrow functions
  • Example: Function to calculate the sum of two numbers
Day 7: Scope and Hoisting
  • Local and global scope
  • Hoisting
  • Example: Demonstrating scope with nested functions
Day 8: Arrays
  • Creating and accessing arrays
  • Array methods: push, pop, shift, unshift, length
  • Example: Managing a list of favorite movies
Day 9: Array Iteration
  • for loop for arrays
  • forEach method
  • map, filter, reduce
  • Example: Filtering an array of numbers to get only even numbers
Day 10: Objects
  • Creating and accessing objects
  • Object methods
  • this keyword
  • Example: Creating an object to store user information

Day 11-15: Intermediate Concepts

Day 11: Strings
  • String properties and methods
  • Template literals
  • Example: Manipulating and formatting strings
Day 12: Date and Time
  • Date object
  • Methods for getting and setting date values
  • Example: Displaying the current date and time
Day 13: Math Object
  • Common Math methods
  • Example: Creating a random number generator
Day 14: Events
  • Event listeners (addEventListener)
  • Event object
  • Example: Handling button click events to change text on the page
Day 15: DOM Manipulation
  • Selecting elements (getElementById, querySelector)
  • Modifying elements (innerHTML, style)
  • Example: Changing the content and style of a web page element

Day 16-20: Advanced Topics

Day 16: JSON
  • JSON format
  • Parsing JSON
  • Stringifying JSON
  • Example: Working with JSON data
Day 17: Error Handling
  • try...catch statement
  • Throwing errors
  • Example: Error handling in a simple calculator
Day 18: Asynchronous JavaScript
  • Callbacks
  • Promises
  • async and await
  • Example: Fetching data from an API using Promises and async/await
Day 19: Fetch API
  • Using the Fetch API
  • Handling responses and errors
  • Example: Making a GET request to an API
Day 20: Local Storage
  • Storing data in local storage
  • Retrieving data from local storage
  • Example: Storing and retrieving user preferences

Day 21-25: Projects

Day 21: To-Do List App (Part 1)
  • Setting up the project
  • HTML structure and basic CSS
  • Adding tasks
Day 22: To-Do List App (Part 2)
  • Marking tasks as complete
  • Deleting tasks
  • Example: Building a functional to-do list app
Day 23: Weather App (Part 1)
  • Setting up the project
  • Fetching weather data from an API
  • Displaying weather information
Day 24: Weather App (Part 2)
  • Handling user input (city name)
  • Updating the UI with fetched data
  • Example: Building a weather app that shows current weather for a city
Day 25: Quiz App (Part 1)
  • Setting up the project
  • HTML structure and basic CSS
  • Creating and displaying questions

Day 26-30: Final Touches and Deployment

Day 26: Quiz App (Part 2)
  • Handling user answers
  • Calculating and displaying scores
  • Example: Building a functional quiz app
Day 27: Debugging
  • Debugging techniques
  • Using browser developer tools
  • Example: Debugging common issues in a web app
Day 28: Performance Optimization
  • Tips for optimizing JavaScript performance
  • Example: Improving the performance of the to-do list app
Day 29: ES6+ Features
  • New features in ES6 and beyond (e.g., destructuring, modules, classes)
  • Example: Refactoring code to use modern JavaScript features
Day 30: Deployment
  • Hosting a website on GitHub Pages
  • Example: Deploying the to-do list app

 

How to Use This Guide

  1. Follow the day-by-day plan to learn JavaScript.
  2. Implement the examples and mini-projects to practice what you’ve learned.
  3. Adjust the pace based on your learning needs and prior knowledge.

Happy Learning!