CS Logo

Web Coding Camp

Day 1 — HTML: Structure & Content

Tags · Headings · Images · Links · Lists · A first taste of CSS

⬇ Today's slides (PDF)

Step 1 — Set Up Your Editor

You'll write your code in VS Code and preview it in the browser with a tool called Live Server that auto-refreshes every time you save. Get set up before you write any code:

  1. Open VS Code (already installed on the lab machines).
  2. Click the Extensions icon in the left sidebar (the four-squares icon), or press Ctrl+Shift+X.
  3. Search for Live Server (by Ritwick Dey) and click Install.
  4. Make a folder for your project (e.g. my-site) and open it in VS Code: File → Open Folder.
  5. Create a new file called index.html inside it.
  6. Once it has some HTML, right-click index.html and choose "Open with Live Server" — your page opens in the browser.
The magic: leave the Live Server browser tab open while you work. Every time you save (Ctrl+S), the page refreshes automatically. Edit, save, look — that's the whole loop.

Step 2 — Pick Your Theme

You'll build one website all week. Pick a theme now and stick with it. Every theme uses the exact same tags — only your words and pictures change.

Can't decide? Start a fan page. Everyone's a fan of something, and it's easy to fill with images and lists.

Schedule

TimeActivity
0:00 – 0:15Setup: VS Code + Live Server, pick your theme
0:15 – 0:40Lecture: what is a webpage? tags, elements, view-source
0:40 – 1:20Project: build your page skeleton
1:20 – 1:30Break
1:30 – 2:00Lecture: links, images, and lists
2:00 – 3:00Project: fill in real content for your theme

How HTML Works

An HTML page is built out of tags. Most tags come in pairs — an opening tag and a closing tag — with your content in between. The closing tag has a slash.

<h1>This is a big heading</h1>
<p>This is a paragraph of text.</p>

Tags can go inside other tags. This is called nesting, and it's how you build structure:

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
See it live: Right-click any webpage and choose "View Page Source" to see the HTML that built it. Every site on the internet starts here.

Quick Reference — Tags You'll Use Today

Every HTML tag, in one place: w3schools.com/tags lists every tag — click any one for an example you can try. MDN's element reference is the deeper version.

The Page Skeleton

Every HTML file starts with this structure. The <head> holds settings (like the title), and the <body> holds everything you actually see.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>      <!-- shows in the browser tab -->
</head>
<body>
  <!-- your visible content goes here -->
</body>
</html>

Headings and Text

<h1>Biggest heading</h1>    <!-- use ONE h1 per page -->
<h2>Section heading</h2>
<h3>Smaller heading</h3>
<p>A paragraph of normal text.</p>
<strong>bold text</strong> and <em>italic text</em>

Images

The <img> tag has no closing tag. src is the file name, alt is a text description (shown if the image fails to load).

<img src="hero.jpg" alt="A description of the picture">

Links

The href is where the link goes when clicked.

<a href="https://developer.mozilla.org/">Click here</a>

Lists

<ul>                    <!-- ul = unordered (bullets) -->
  <li>Apples</li>
  <li>Oranges</li>
</ul>

<ol>                    <!-- ol = ordered (numbered) -->
  <li>First step</li>
  <li>Second step</li>
</ol>

Project — Build Your Page Skeleton

Every theme uses the same four pieces: a heading, an image, an intro paragraph, and a list. Here's the worked example as a fan page — copy it, then swap in your own theme.

Starter Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ultimate Fan Page</title>
</head>
<body>
  <h1>The Ultimate Zelda Fan Page</h1>
  <img src="hero.jpg" alt="Screenshot from the game">
  <p>The Legend of Zelda is my favorite game series. Here's why it's the best.</p>

  <h2>My Top 3 Games</h2>
  <ul>
    <li>Breath of the Wild</li>
    <li>Ocarina of Time</li>
    <li>Majora's Mask</li>
  </ul>

  <a href="https://zelda.nintendo.com/">Official site</a>
</body>
</html>

Your Theme Fits the Same Shape

Theme<h1><img><p><ul>
RecipeDish namePhoto of the dishWhy you love itIngredients
Review site"My Top 5 Movies"Poster of #1What the list isThe ranked items
Fake businessBusiness nameLogo / hero photoWhat you offerServices
EventEvent namePoster / venue photoThe pitchSchedule / details
Tip: Save your file as index.html. Right-click it and open with your browser (or use the Live Server button in VSCode) to see your page.

Stretch Goals

  1. Add a table (games with a rating column, a menu with prices, etc.)
  2. Add a second page and link the two together
  3. Embed a YouTube video with an <iframe>
  4. Use a <details> / <summary> collapsible section
  5. Look up 3 tags you've never seen on MDN and use them

A First Taste of CSS

HTML is your content; CSS is how it looks. The quickest way to try it is a <style> block inside your <head>. Each rule picks a tag, then sets what to change:

<head>
  <title>My Page</title>
  <style>
    body { background: #f4f4f8; }
    h1   { color: purple; }
  </style>
</head>

Three properties get you a long way. Try changing the values:

body {
  background: #f4f4f8;   /* page background */
  color: #222;           /* text color */
  font-family: sans-serif;
}
Pick colors: grab a #hex code from a color picker like htmlcolorcodes.com/color-picker and paste it into your CSS. Tomorrow (Day 2): classes, ids, the box model, and more advanced CSS.

Add a Second Page (Stretch)

Want an "About" page too? Make a second file — about.html — in the same folder, give it the same skeleton, then link the two together. A link to your own page just uses the file name (no https://):

<!-- put this on both pages so you can jump back and forth -->
<a href="index.html">Home</a>
<a href="about.html">About</a>
Rule of thumb: linking to another website needs the full https://... address. Linking to a file you made yourself just needs the file name.

Save Your Work with Git & GitHub

A version control system saves snapshots of your project as you work, so a bad edit can never wipe out your progress. Git is the tool that takes the snapshots; GitHub is the website that stores them online. Almost every programmer uses both.

The Workflow, Start to Finish

Step 1 — create the repo. Make a free account at github.com, click New repository, and give it a name (e.g. my-site).

Heads up — 2FA is required: GitHub makes everyone who pushes code turn on two-factor authentication. Set it up (an authenticator app or your phone number) right after you make the account, or you'll be blocked at your first push.

Step 2 — clone it. Copy the repo's URL, then clone to pull a copy down onto your computer. Cloning makes a folder that's already linked to GitHub — no other setup needed:

git clone https://github.com/you/my-site.git

Step 3 — go in and make changes. Step into the folder (open it in VS Code) and edit your files:

cd my-site                     # step into your project folder
# ...edit index.html, add images...

Step 4 — save a snapshot and upload it. A commit is one saved snapshot with a short message; push sends it up to GitHub:

git add .                      # gather up all your changes
git commit -m "My first web page"   # save a snapshot
git push                       # upload it to GitHub

Repeat steps 3–4 every time you get something working.

Looking ahead: on Day 5 you'll use GitHub to publish your finished site to the real web with GitHub Pages.

Common Mistakes

Everyone hits these on Day 1 — here's how to spot and fix them.