Technical Lessons

Hands-on lessons from HTML to full-stack AI applications. Build real projects step by step.

Phase 1: The Workbench (Environment Setup)

Install the tools before the first cut

A craftsman prepares the workbench before starting the first piece

T01

Environment Setup

Install VS Code, Node.js, Git, and a browser. Verify with the terminal. Write hello.html and see it run.

Phase 2: The Command Line (Terminal)

Direct line to the machine - text beats clicks at scale

Buttons are for tourists. Commands are for residents

T02

Terminal Basics

Navigate, create, delete files. Read the manual. Learn the PATH and speed tricks.

 T03

Pipes & Power Tools

stdin/stdout/stderr, pipes, grep/find/sed/awk, chaining, small shell scripts.

Phase 3: The Book (HTML/CSS)

Structure and decoration, no JavaScript at all

Like building a book: skeleton (HTML) and design (CSS)

T04

Hello World

Your first webpage. Create a file, open it in a browser.

 T05

HTML Tags

The building blocks: headings, paragraphs, lists, links, images.

 T06

HTML Forms & Blocks

Interactive HTML: input, select, textarea, validation, details/summary.

 T07

CSS Basics

Making things look good: selectors, colors, fonts, box model.

 T08

CSS Layout

Organizing the page: flexbox, grid, responsive design, media queries.

 T09

CSS to the Limit

Pure CSS interactivity: animations, transitions, :target, accordion/tabs.

Phase 4: The Brain (JavaScript)

Adding thinking and interaction to the page

Like adding muscles and a brain to your book

T10

JavaScript Intro

First steps with JS: console.log, variables, types, functions.

 T11

DOM Manipulation

Controlling the page: querySelector, createElement, events.

 T12

Forms & Dialog

Handling user input: JS form validation, dialog element.

 T13

Data Structures

Organizing information: arrays, objects, loops, dynamic lists.

 T14

Persistence

Remembering data: localStorage, JSON parse/stringify.

 T15

Fetch API

Talking to servers: HTTP requests, async/await, promises.

 T16

Dynamic Site: Routing

One page, many views: hash routing, components, state.

 T17

Dynamic Site: Offline

Works without internet: service workers, PWA, caching.

 T18

Dynamic Site: Polish

Production quality: performance, lazy loading, error handling.

Phase 5: The Time Machine (Git & GitHub)

Track every change, collaborate without stepping on each other

Git is your time machine. GitHub is the shared workshop where time travelers meet

T19

Git Basics

The time machine: three areas, commits, branches, undo without fear.

 T20

GitHub & Collaboration

The shared workshop: remotes, push/pull, GitHub Flow, pull requests.

Phase 6: The Kitchen (Backend)

Servers, APIs, and databases

Building the restaurant kitchen that prepares the food

T21

Node.js Server

Building the kitchen: HTTP server, serving files, request handling.

 T22

API Endpoints

The menu: REST design, JSON responses, routing.

 T23

JSON Database

The recipe book: read/write files, CRUD with JSON.

 T24

SQLite

The filing cabinet: SQL, tables, CRUD, schema, foreign keys.

 T25

Authentication

The ID check: sessions, cookies, password hashing, login/logout.

Phase 7: The Robot Chef (AI)

Integrating artificial intelligence

Hiring a robot that read millions of books to help in your kitchen

T26

Ollama & Chat

The robot chef: local LLM setup, chat API, chat interface.

 T27

Full Stack AI App

The whole restaurant: connect frontend, backend, AI, and database.

Phase 8: The Franchise Kit (Frontend Frameworks)

Component-based UI and type-safe JavaScript

Upgrading from a hand-drawn menu to a professional POS system

T28

React Foundations

Component thinking: JSX, props, event handling, rendering lists.

 T29

React State & Effects

Interactive UIs: useState for memory, useEffect for side effects.

 T30

TypeScript

Type safety: annotations, interfaces, typing React components.

 T31

Next.js: Routing & Rendering

File-based routing, server vs client components, layouts.

 T32

Next.js: Data & API

Data fetching in server components, API routes, building a full page.

Phase 9: The Headquarters (Backend Frameworks)

Enterprise-grade backend architecture with Nest.js

Building the corporate kitchen that manages all your franchise branches

T33

Nest.js: Architecture

Modules, controllers, services, and dependency injection.

 T34

Nest.js: Data & Auth

DTOs, validation, database integration, authentication guards.

Phase 10: The Lego Kit (Web Components)

Invent your own HTML tags - platform-native components that work in any framework

Lego bricks built into the browser. Snap together, no framework required

T35

Web Components I

Invent your own tags: Custom Elements, Shadow DOM, :host and ::part.

 T36

Web Components II

Templates, slots, lifecycle callbacks, and Lit as the sugar layer.

Phase 11: The Blueprint (System Design)

Architect large systems: scale, storage, caching, trade-offs

Architects draw blueprints before anyone pours concrete

T37

System Design: The Framework

Requirements, entities, API, high-level design, deep dives, trade-offs.

 T38

System Design: Scale & Storage

Vertical vs horizontal, SQL vs NoSQL, replication, sharding, CAP theorem.

 T39

System Design: Caching, Queues & Patterns

Cache-aside, queues, load balancers, CDNs, monolith vs microservices, numbers to know.