SESSION PLAN
Five parts
PART 1
Git basics
Why version control exists and what a commit actually is, and the commands that carry work between your laptop and GitHub: clone, commit, push, pull.
PART 2
The terminal
A terminal is a text-based interface that lets you interact with your computer using typed commands instead of clicking with a mouse.
PART 3
HTML/CSS/JavaScript basics
The three layers of a webpage — HTML is what things are, CSS is what they look like, JavaScript is what happens. Plus Tailwind, which is the same CSS written as classes on the element, and the lucide icon set.
PART 4
Setup: Git, VS Code, and an agent
Install Git and VS Code, add GitLens, clone your repository into it, and get a command-line agent ready for Week 3. Warp, if you want it, first.
PART 5
Week 2 exercises and submission
Accept the assignment, then follow the README instructions. Commit with a message that says what changed and push to main.
PART 1 · GIT BASICS
LECTUREGit basics
Why version control exists
Say you have a folder with the following files: poster_v2.ai, poster_v2_FINAL.ai, poster_FINAL_v3.ai, poster_v2_FINAL_fixed.ai. Which one goes to the printer?
That folder is a version control system — a bad one. It cannot tell you what changed between two files, it cannot merge two people’s work, and the filenames are lies. Git replaces it with one file and a list of named changes to it.
A commit is not a save
You already saved while you were working — that was Cmd-S. A commit is you deciding that a particular save is worth naming, and the message is a note to yourself in three weeks: “update” tells that person nothing. main is a label on the newest commit, not a folder and not a place.
Your laptop vs GitHub
Your laptop and GitHub are two different computers, and nothing moves between them unless you say so.
clone
Cloning is the first move — it copies GitHub’s line down onto your laptop.
commit
You add one dot to your own line. Nothing has left your laptop yet.
push
Your new dots travel up to GitHub. Now everyone else can see them.
pull
GitHub is two commits ahead of you — someone else pushed while you were away. Pulling brings their dots down onto your line.
WORD
WHAT IT DOES
clone
copies GitHub’s line down onto your laptop
commit
adds one dot to your line
push
sends your new dots up to GitHub
pull
brings GitHub’s new dots down to you
branch
starts a second line from the dot you’re on
merge
joins a second line back into the first
Branch, merge, and the pull request
A branch is a second line to try something on. The dot you branched from stays where it is, so the version that works keeps working while you experiment. A pull request asks for that line to be merged back: here is what is different from what you approved — sign off before I make it the master.
Where is my file right now?
Four places, and your work moves through them in that order. Most of the confusion in the first few weeks is really this question — knowing which of the four your file is sitting in answers it.
you edit it
saved on your disk
you stage it
picked for the next snapshot
you commit
a dot on your line
you push
it exists on the internet
KEY TERMS
Five words you will use every week
TERM
WHAT IT MEANS
Repository
The project folder Git is tracking. In this course, one assignment is one repository.
Commit
A named snapshot of your work at a moment in time.
Push / pull
Sending your commits up to GitHub, and bringing changes back down.
Branch
A separate lane, so work-in-progress does not disturb the version that works.
Pull request
Where a set of changes gets reviewed. It is where your feedback arrives all semester.
Where is my file?
Where Is My File? is an AI generated game that lets you practice some of the git concepts in a more visual way.
Want the expanded version? Learn Git Branching is the full interactive course — it draws the commit graph as you type real Git commands, and goes well past what we cover tonight.
learngitbranching.js.org (opens in a new tab)PART 2 · THE TERMINAL
LECTUREThe terminal
Terminal commands
A terminal is a text-based interface that lets you interact with your computer using typed commands instead of clicking with a mouse.
COMMAND
WHAT IT DOES
pwd
Where am I? Prints the folder you are standing in.
ls
What is in here? Lists the contents.
ls -a
The same, including hidden files — like .git
cd folder
Go into a folder.
cd ..
Go up one level.
cd ~
Go home, from anywhere.
cat file
Print a file to the screen.
mkdir name
Make a folder.
touch name
Make an empty file.
clear
Wipe the screen. Nothing is deleted.
Terminal shortkeys
These are utility keys that help you navigate the terminal faster. They are not commands, so they do not get typed into the prompt.
KEY
WHAT IT DOES
↑
Brings back the last thing you typed.
Tab
Finishes a name you started typing. Never type a long folder name by hand, and never misspell one.
Ctrl + C
Stops whatever is running. When something has hung and you do not know why, this is the way out.
Ctrl + R
Searches your history. Type a few letters of a command you ran before, and it will appear.
VS Code terminal
VS Code has a built-in terminal. It opens in the folder you have open in the editor.
The same on macOS, Windows and Linux. The key is the backtick above Tab, not the apostrophe.
Warp
If you want to try a standalone terminal, the one we recommend is Warp — free, and on macOS, Windows and Linux. You can think of it as a nicer UI on top of the PowerShell, bash or zsh that is already on your computer.
WHY
WHAT IT MEANS
It edits like a text box
Click where you want the cursor. Select with the mouse. Most terminals give you arrow keys and nothing else, which is the most alienating thing about them if you have spent your life in design tools.
Commands come in blocks
Each command and everything it printed stay one grouped unit, so you can copy just the error. That is exactly what you want when you paste it to an agent, or into a question for me.
It finishes your commands
Completions and syntax highlighting are built in, so a typo shows up before you press Enter instead of after.
Your history is searchable
Across sessions. The command you ran in week four is still findable in week ten.
Warp also has AI features on a credit system, and paid tiers above that. You don't need these: the terminal itself is free, and since late 2024 it does not make you create an account.
warp.dev/terminal (opens in a new tab)Terminal Quest
Try out the commands in a AI generated game. You will be given a series of tasks to complete using the terminal commands you have learned.
PART 3 · HTML/CSS/JAVASCRIPT BASICS
LECTUREHTML/CSS/JavaScript basics
What makes a webpage
A webpage is three layers stacked in one file. HTML is what things are — a heading is a heading because it is an h1, not because it is big. CSS is what they look like. JavaScript is what the page does after it has loaded.
LAYER
WHAT IT DOES
HTML
What things are — a heading, a paragraph, a list, a link
CSS
What they look like — size, colour, spacing, position
JavaScript
What the page does after it loads — responds to clicks, typing and scrolling, and changes what is on screen
Structure
HTML says what things are, not what they look like.
<!DOCTYPE html><html lang="en"> <head> <title>HTML/CSS/Javascript Basics</title> </head> <body> <h1>HTML/CSS/Javascript Basics</h1> <h2>Background color</h2> <p>This box is dark, and still readable.</p> </body></html>Styling
A rule is a selector and a set of declarations. .color-box picks the element; each line inside says one thing about how it looks.
<section class="color-box"> <h2>Background color</h2></section><style> .color-box { background-color: #1e293b; color: #ffffff; padding: 24px; }</style>Tailwind CSS
That rule above is CSS written the traditional way: a selector in a <style> block, pointing at a class in the markup, somewhere else in the file. Tailwind collapses the two into one. Each Tailwind class is a single CSS declaration under a short name — bg-white is background: white, p-6 is padding: 24px, rounded-xl is border-radius: 12px. That is the whole idea: what an element looks like is readable on the element. The one line from the CDN is the development build; we will install it properly through npm later in the course.
<!-- The traditional way --><div class="card">…</div><style> .card { background: white; padding: 24px; border-radius: 12px; }</style> <!-- The same card, in Tailwind --><script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script><div class="bg-white p-6 rounded-xl">…</div>Why the course uses it
Tailwind is everywhere in the training data, and the class name is the design decision, so an agent can be told “make the hero taller and the body text smaller” and change two strings. Ordinary CSS makes it hunt through a stylesheet for a rule that may be overridden somewhere else. This is the practical reason the course standardizes on it.
Default spacing and color scales
Tailwind provides a set of default spacing and color tokens so that you don’t have to come up with these every time. The following pages have details on the defaults as well as instructions on how to customize them.
v2.tailwindcss.com/docs/customizing-spacing (opens in a new tab)v2.tailwindcss.com/docs/customizing-colors (opens in a new tab)CSS Positioning
Everything on a page sits in a flow: blocks stack top to bottom, in the order you wrote them. position is how an element opts out of that flow.
VALUE
WHAT IT DOES
static
The default. Sits where it lands in the flow.
relative
Keeps its space in the flow, then shifts away from it.
absolute
Leaves the flow. Pins to its nearest positioned parent.
sticky
Scrolls with its box, pins at an edge — then leaves when the box ends.
fixed
Leaves the flow and pins to the window. Never leaves.
static
Sits where it lands. The box below starts where this one ends.
relative
Keeps its space — the dashed gap stays open — then shifts away from it. Nothing else moves.
absolute
Leaves the flow. The gap closes, the box below moves up, and this one pins to a corner.
Sticky and fixed
For most of a page, sticky and fixed behave identically — both labels just sit there while everything scrolls past. They stop matching in exactly one place: the end of the box.
sticky
Follows you as far as its box goes, and no further.
fixed
The window never scrolls away, so neither does it.
JavaScript
JavaScript is a mechanism by which interactivity and functionality can be added to websites. A click is also just one event of many.
<button onclick="sayHello()">Say hello</button><p id="message"></p><script> function sayHello() { document.getElementById("message").textContent = "Hello!"; }</script>EVENT
FIRES WHEN
onclick
someone clicks or taps the element
oninput
someone types into a field — fires on every keystroke
onsubmit
a form is sent
onmouseenter
the pointer moves onto it
onkeydown
a key goes down — Escape to close, Enter to send
onload
the page has finished loading
onscroll
the page or a scrollable box is scrolled — fires the whole way down
Lucide icons
The same open-source set the class Figma file uses. An agent may sometimes invent icon names, so confirm visually whenever you add one.
lucide.dev/icons/ (opens in a new tab)<i data-lucide="book-open"></i> <script src="https://unpkg.com/lucide@latest"></script><script>lucide.createIcons();</script>Repaint
Repaint is an AI generated game that lets you practice some of the CSS concepts above — position, flex, grid, and one line of JavaScript. Every level has a CSS mode and a Tailwind mode, so you can see the two ways of writing the same rule next to each other.
PART 4 · SETUP: GIT, VS CODE, AND AN AGENT
LABSetup: Git, VS Code, and an agent
1
Install Warp (optional)
Warp is the standalone terminal — free, on macOS, Windows and Linux, and a gentler first terminal than the one your computer ships with. It is not required, but if you want to try it, install it now.
warp.dev/terminal (opens in a new tab)2
Install Git
In order to use Git, you will need to install it first. Follow the instructions below for your operating system.
git-scm.com/downloads (opens in a new tab)Windows
macOS
Open Git Bash/PowerShell (Windows) or Terminal (Mac) and run the following to confirm it worked:
git --versionYou should see something like git version 2.x.x. The exact number does not matter.
Then tell Git who you are — once per computer
git config --global user.name "Your Name"git config --global user.email "you@example.com"Use the email on your GitHub account. This is what stamps every commit with your name, so your work shows up as yours.
Installing Git and checking the version
3
Install VS Code
Download VS Code at code.visualstudio.com, install it, and add the GitLens extension. This is the editor for the rest of the semester — once you have accepted the assignment, you clone the repository straight into it with File → Clone Repository.
code.visualstudio.com (opens in a new tab)Cloning your repo in VS Code
4
Install an agent CLI — Claude Code or Codex
Agents don't just run from the browser or desktop apps - they can also run on the command line. Claude Code is Anthropic’s; Codex is OpenAI’s. You only need one — pick whichever account you already have.
code.claude.com/docs/en/quickstart (opens in a new tab)learn.chatgpt.com/docs/codex/cli (opens in a new tab)Installation instructions
PART 5 · WEEK 2 EXERCISES AND SUBMISSION
LABWeek 2 exercises and submission
Accept the Week 2 assignment
Week 2 assignment (opens in a new tab)1
Play the browser games
Work through the games below. When you're done, click “Download badge” in the top right of each game, type your name, and save the SVG it hands you. Move both files into the /games folder of your repository.
Play Terminal Quest (opens in a new tab)Play Where Is My File? (opens in a new tab)Play Repaint (optional - play if step 2 is giving you trouble) (opens in a new tab)2
Build a game or study guide of your own
Make one thing of your own that expands on a topic from tonight — Git, HTML/CSS, or the terminal. A small browser game like the three you played, or a study guide you would actually use. Work with an agent to refine and build your idea.
One index.html
3
Commit and push
Commit from the VS Code Source Control panel with a message that describes the change, then push to main. That is the submission: there is no upload button and no separate submit step. Submitting more than once is normal and expected; the last push is what counts.
Committing and pushing in VS Code
The standing convention
commit
with a message that says what changed
push to main
that is the submission
Feedback PR
where comments land
push again
the last one before the deadline counts
DELIVERABLES