Code-Alongs

Practice coding with guided exercises and examples. These code-alongs are step-by-step guides to help you build and understand JavaScript concepts.

JavaScript Basics Code-Along

In this code-along, you'll practice creating variables, working with different data types, and using basic JavaScript operations.

What You'll Learn

Example Code

// Variables and data types
let name = "Taylor";
const age = 25;
let isProgrammer = true;

// Basic operations
console.log("My name is " + name);
console.log("I am " + age + " years old");
console.log("In 5 years, I will be " + (age + 5) + " years old");

// Boolean expressions
console.log("Am I a programmer? " + isProgrammer);
console.log("Am I not a programmer? " + !isProgrammer);
            

HTML & CSS Introduction Code-Along

Learn how to create a simple web page using HTML and style it with CSS.

What You'll Learn

Example Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
        }
        p {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
</body>
</html>
            

JavaScript Functions Code-Along

Practice creating and using functions in JavaScript.

What You'll Learn

Example Code

// Function declaration
function greet(name) {
    return "Hello, " + name + "!";
}

// Function call
console.log(greet("Alex"));  // Outputs: "Hello, Alex!"

// Function with multiple parameters
function add(a, b) {
    return a + b;
}

console.log(add(5, 3));  // Outputs: 8

// Arrow function
const multiply = (a, b) => a * b;

console.log(multiply(4, 2));  // Outputs: 8
            

Additional Resources