JavaScript Beginner Course - JL Solutions Academy

Welcome to Your Coding Journey! 🚀

This course is designed for absolute beginners. You don't need to know anything about coding, HTML, CSS, or GitHub. We'll teach you everything from scratch!

🎯

Learn by Doing

Build real projects from day one. No boring theory!

🎮

Gamified Learning

Play games while you learn. Make coding fun!

💼

Job Ready

Skills that employers actually want. Real-world projects.

Your Learning Path

📚

Week 1-2

Basics & Setup

What is coding?
Setting up your tools
Your first program
Variables & data

🎲

Week 3-4

Logic & Games

Making decisions
Loops & repetition
Number Guessing Game
Rock Paper Scissors

🎨

Week 5-6

Functions & Projects

Reusable code
Building functions
Calculator Project
Todo List App

🌐

Week 7-8

Web & APIs

HTML basics
Making web pages
Working with data
Weather App

Lesson 1: What is Coding? 🤔

Before we write code, let's understand what coding actually is!

💡 Think of coding like giving instructions: Just like you'd tell someone how to make a sandwich step-by-step, coding is telling a computer what to do, step-by-step.

Your First Program

Let's write your very first line of code! Type this in the box below and click "Run":

console.log("Hello, I'm learning to code!");

Output will appear here...

What just happened? console.log() is like telling the computer "print this message". It's how we see what our code is doing!

Try It Yourself!

Change the message inside the quotes. Try: "I'm going to be a developer!" or "Coding is fun!"

Lesson 2: Variables - The Memory Game 🧠

Variables are like boxes where we store information. Let's play a game to understand them!

🎮 Variable Memory Game

In this game, you'll learn how variables work by storing and using information.

Step 1: Create a variable

Type this code to create a variable called playerName:

let playerName = "Sierra";
console.log("Welcome, " + playerName + "!");

Output will appear here...

💡 What's happening?
• let creates a new variable (a box to store things)
• playerName is the name of our variable
• = "Sierra" puts the value "Sierra" into the box
• We can use the variable later by typing its name!

Step 2: Change your score

Now let's create a score variable and change it:

let score = 0;
console.log("Starting score: " + score);

score = score + 10;
console.log("After earning points: " + score);

score = score + 5;
console.log("Final score: " + score);

Output will appear here...

🎯 Challenge: Create Your Own Variables

Create three variables:

favoriteColor - store your favorite color
age - store your age (as a number, no quotes!)
isLearning - store true (because you are learning!)

Then print them all out using console.log()

// Your code here!

Output will appear here...

Lesson 3: Build Your First Game! 🎲

Let's build a Number Guessing Game! This will teach you about making decisions in code.

🎮 Number Guessing Game

Step 1: The Game Logic

First, let's understand how the game works. Read through this code:

// The secret number (between 1 and 10)
let secretNumber = 7;

// The player's guess - Try changing this number!
let playerGuess = 5;

// Check if the guess is correct
if (playerGuess === secretNumber) {
    console.log("🎉 You win! The number was " + secretNumber);
} else if (playerGuess < secretNumber) {
    console.log("📈 Too low! Try a higher number.");
} else {
    console.log("📉 Too high! Try a lower number.");
}

Output will appear here...

💡 Understanding the Code:
• if checks a condition - "Is the guess equal to the secret number?"
• === means "is equal to" (three equals signs!)
• else if checks another condition if the first one is false
• else handles everything else
• Try changing playerGuess to different numbers and run it again!

Step 2: Make It Interactive

Now let's make a version you can actually play! Click the button below to start:

Click the button above to start playing!

Lesson 4: Rock Paper Scissors Game 🪨📄✂️

Let's build a complete game! This teaches you about arrays, random numbers, and more complex logic.

🎮 Rock Paper Scissors

Step 1: Understanding Arrays

An array is like a list. Let's create one with our game options:

let choices = ["rock", "paper", "scissors"];

console.log("Available choices: " + choices);
console.log("First choice: " + choices[0]);
console.log("Second choice: " + choices[1]);
console.log("Third choice: " + choices[2]);

Output will appear here...

💡 Arrays Explained:
• Arrays store multiple values in a list
• Use [ ] to create an array
• Access items by their position: choices[0] gets the first item
• Arrays start counting at 0, not 1!

Step 2: Play the Game!

Click the buttons below to play Rock Paper Scissors against the computer:

Choose your move above!

Score: 0 wins

Lesson 5: Functions - Reusable Code 🛠️

Functions let you write code once and use it many times. Think of them as recipes!

Step 1: Your First Function

Functions are like creating your own command. Let's make one that greets someone:

// Create a function called "greet"
function greet(name) {
    console.log("Hello, " + name + "! Welcome to coding!");
}

// Use the function
greet("Sierra");
greet("Jess");
greet("World");

Output will appear here...

💡 Function Breakdown:
• function - keyword to create a function
• greet - the name of our function
• (name) - parameter (information the function needs)
• { } - the code inside runs when we call the function
• We can call it multiple times with different values!

Step 2: Math Function

Let's create a function that does math:

// Function to add two numbers
function add(a, b) {
    return a + b;
}

// Use it
let result1 = add(5, 3);
let result2 = add(10, 20);

console.log("5 + 3 = " + result1);
console.log("10 + 20 = " + result2);

Output will appear here...

💡 Return Statement:
• return sends a value back from the function
• We can store that value in a variable
• Functions can take multiple parameters: add(a, b)

🎯 Project 1: Build a Calculator!

Now let's build something real! A calculator that can add, subtract, multiply, and divide.

Step 1: Create Calculator Functions

Write functions for each operation:

// Calculator functions
function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

function multiply(a, b) {
    return a * b;
}

function divide(a, b) {
    return a / b;
}

// Test them
console.log("10 + 5 = " + add(10, 5));
console.log("10 - 5 = " + subtract(10, 5));
console.log("10 * 5 = " + multiply(10, 5));
console.log("10 / 5 = " + divide(10, 5));

Output will appear here...

Step 2: Interactive Calculator

Try the calculator below! Enter two numbers and choose an operation:

Result will appear here...

🎉 Congratulations! You just built a working calculator! This is real code that you could use in a real application.

🎉 You're Making Progress!

You've learned the fundamentals of JavaScript! Here's what's next:

📚 Continue Learning

Move on to the full Training Modules to learn more advanced topics.

🛠️ Build Projects

Check out the Projects page for more things to build!

📊 Track Progress

Mark your progress on the Progress Tracker!

What You've Learned So Far:

✅ What coding is and how it works
✅ Variables (storing information)
✅ Making decisions with if/else
✅ Arrays (lists of data)

✅ Functions (reusable code)
✅ Building interactive games
✅ Creating a calculator
✅ Running and testing code

Welcome to Your Coding Journey! 🚀

Learn by Doing

Gamified Learning

Job Ready

Your Learning Path

Week 1-2

Basics & Setup

Week 3-4

Logic & Games

Week 5-6

Functions & Projects

Week 7-8

Web & APIs

Lesson 1: What is Coding? 🤔

Your First Program

Try It Yourself!

Lesson 2: Variables - The Memory Game 🧠

🎮 Variable Memory Game

Step 1: Create a variable

Step 2: Change your score

🎯 Challenge: Create Your Own Variables

Lesson 3: Build Your First Game! 🎲

🎮 Number Guessing Game

Step 1: The Game Logic

Step 2: Make It Interactive

Lesson 4: Rock Paper Scissors Game 🪨📄✂️

🎮 Rock Paper Scissors

Step 1: Understanding Arrays

Step 2: Play the Game!

Lesson 5: Functions - Reusable Code 🛠️

Step 1: Your First Function

Step 2: Math Function

🎯 Project 1: Build a Calculator!

Step 1: Create Calculator Functions

Step 2: Interactive Calculator

🎉 You're Making Progress!

📚 Continue Learning

🛠️ Build Projects

📊 Track Progress

What You've Learned So Far:

Keep Going, Sierra! 🚀