Learn & Theory - Web Dev Learning Path

💾 L1: Understanding HTML Structure

Learn what HTML is, how it structures content, and why semantic HTML matters. We'll build a simple page and understand how browsers render it.

Core Concepts

HTML (HyperText Markup Language) provides the structure and content of web pages. Think of it as the skeleton of your application.

Tags: Elements that mark up content (like <h1>, <button>)
Elements: Opening tag + content + closing tag (e.g., <p>Hello</p>)
Semantic HTML: Using elements that convey their meaning (like <nav>, <article>)

HTML alone gives us structure but no styling or interactivity. We need CSS for appearance and JavaScript for behavior.

Theory → Code Example

<!-- Simple webpage structure -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"></meta>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>This is my first element.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </body>
</html>
        

Exercise 1.1: Modify This Code

Try changing the <h1> text and adding your own content. See how the browser displays your changes.

💡 Tip: HTML is case-insensitive, but conventions use lowercase. Always close your tags!

🎨 L2: Understanding CSS Styling

Learn how CSS makes our HTML look beautiful. We'll explore selectors, properties, and the box model.

Core Concepts

CSS (Cascading Style Sheets) controls the appearance of web content. Without CSS, the web would look like documents from 1995.

Selectors: Choose which elements to style (e.g., h1, .class, #id)
Properties & Values: Define styles (e.g., color: red, margin: 20px)
Box Model: Content → Padding → Border → Margin

CSS separates concerns: structure (HTML), style (CSS), behavior (JavaScript).

Theory → Code Example

/* Basic CSS styling */
h1 {
  color: #e34c26;
  text-align: center;
  margin-bottom: 1rem;
}

.container {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border-radius: 8px;
  padding: 2rem;
}

#primary-button {
  background: #10b981;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}
        

Exercise 2.1: Style This Element

Select h1 and change its color and text-align. Experiment with different font sizes.

💡 Tip: CSS properties are case-insensitive, but convention uses lowercase. Use browser DevTools (F12) to inspect and live-edit styles.

⚡ L3: Understanding JavaScript Logic

JavaScript brings your web pages to life with interactivity. We'll explore variables, functions, DOM manipulation, and event handling.

Core Concepts

JavaScript is the language of interactivity on the web. Without it, buttons don't work, pages don't respond, and apps feel "dead."

Variables: Store data (let, const)
Functions: Reusable blocks of code
DOM Manipulation: Access and modify HTML elements
Event Handling: Respond to user actions (clicks, input)

JavaScript runs in the browser, making the DOM interactive.

Theory → Code Example

// Add a task button click handler
const addButton = document.querySelector('#add-btn');

addButton.addEventListener('click', () => {
  // Get input value
  const input = document.querySelector('#task-input').value;
  
  // Validate input
  if (input.trim() === '') {
    // Do nothing
    return;
  }
  
  // Create new list item
  const li = document.createElement('li');
  li.innerHTML = <span>${input}</span>;
  
  // Add to list
  document.querySelector('ul').appendChild(li);
  
  // Clear input
  document.querySelector('#task-input').value = '';
});
        

Exercise 3.1: Make Buttons Work

Add an addEventListener to a button that logs a message to the console when clicked. See how the page responds.

💡 Tip: Use console.log() to see what's happening in the browser. Common errors: forgetting querySelector, wrong selector syntax.

⚛️ L4: Understanding React Components

React simplifies complex UIs with a component-based architecture. Learn about declarative UI, props, and state management.

Core Concepts

React is a JavaScript library for building user interfaces. It uses JSX to write HTML-like syntax in JavaScript, emphasizing declarative programming over imperative.

Components: Reusable UI building blocks
Props: Read-only data passed to components
State: Mutable data managed by React
Declarative UI: Describe what should appear, not how to build it

React manages complexity by breaking UIs into manageable components.

Theory → Code Example

// Simple React component
import React, { useState } from 'react';

const TodoItem = ({ text, completed }) => {
  // Destructure props
  const { text, completed } = props;

  // Track completion state
  const [isDone, setIsDone] = useState(completed);

  // Handle toggle
  const toggle = () => {
    setIsDone(!isDone);
  };

  // Return JSX
  return (
    <div style={styles.item}>
      <input type=checkbox checked={isDone} onChange={toggle} />
      <span style={{ textDecoration: isDone ? 'line-through' : 'none' }}>
        {text}
      </span>
      <button onClick={() => setIsDone(true)}>
        Delete
      </button>
    </div>
  );
};
        

Exercise 4.1: Build a Component

Create a reusable Greeting component that accepts a name prop and displays Hello, {name}!.

💡 Tip: Start with a simple component and add features incrementally. React's dev tools help inspect component state and props.

💙 L5: Understanding TypeScript Types

TypeScript adds type safety to JavaScript. We'll explore interfaces, types, and how they prevent bugs before runtime.

Core Concepts

TypeScript is JavaScript with syntax for types. It catches mistakes at compile time rather than runtime, improving reliability and developer experience.

Interfaces: Define shapes for objects and functions
Types: Fundamental building blocks (string, number, boolean)
Generics: Create reusable components with type parameters
Type Safety: Catch errors before they reach production

TypeScript scales better with large codebases. It's becoming standard for modern development.

Theory → Code Example

// Define interface for TodoItem
interface TodoItem {
  id: number;
  text: string;
  completed: boolean;
}

// Function with typed parameters
const createItem = (item: TodoItem): TodoItem => {
  return { ...item };
};

// Generic component
interface GreetingProps {
  name: string;
  greet?: (text: string) => string;;
}

const Greeting = ({ name, greet }: GreetingProps) => {
  const text = greet ? greet(name) : 'Hello, ' + name + '!';
  return <div>{text}</div>;
};
        

Exercise 5.1: Add Types

Add type definitions to a function that accepts a name (string) and returns Greeting (string). See TypeScript errors resolved.

💡 Tip: TypeScript errors are suggestions from your IDE. Trust them—they help prevent runtime issues.

🎓 Learn & Theory

Your Learning Journey

Core Concepts

Exercise 1.1: Modify This Code

Core Concepts

Exercise 2.1: Style This Element

Core Concepts

Exercise 3.1: Make Buttons Work

Core Concepts

Exercise 4.1: Build a Component

Core Concepts

Exercise 5.1: Add Types

💙 Tips & Tricks