Web Development - Ahmad Hurayarah

Session 1 · HTML

What is the Web + Your First HTML Page

By the end of this session, you can:

Explain the basic request-and-response path of a webpage.
Create a valid HTML document with headings and paragraphs.
Use the document skeleton and place visible content inside <body>.

Part 1 - Theory

How a webpage gets to your screen

You type an addressgoogle.com

→

Browser sends a request"I want this page"

→

Server finds the filea computer far away

→

Server sends back HTMLthe raw content

→

Browser paints the pagewhat you finally see

That whole trip takes under a second - every single time you open a website.

The three languages of the web

HTML - the structure. The skeleton, the bones.
CSS - the styling. The skin, clothes, makeup. Colors and layout.
JavaScript - the behavior. The muscles. Makes things move and react.

Part 2 - Demonstration

Open VS Code, create index.html, and type this live while explaining each line. Don't paste - type it so you see it built piece by piece.

The page skeleton as a tree

<html>the root - wraps everything

↓

<head>behind the scenes

<body>everything visible

<title>My First Website</title>the browser tab text

<h1> + <p>your visible content

head and body are SIBLINGS - both children of html. Content never goes directly inside html.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my very first webpage.</p>
  </body>
</html>

Explain each part as you type:

<!DOCTYPE html> → "Tells the browser: this is a modern HTML page. Always the first line."
<html> → "Wraps EVERYTHING. The container for the whole page."
<head> → "Behind-the-scenes area. Info the visitor doesn't see on the page body."
<title> → "The text on the browser TAB, not on the page. Watch the tab when I save."
<body> → "Where everything visible lives."
<h1> → "The biggest heading, like a newspaper headline."
<p> → "A paragraph of text."

Part 3 - Practice

"Create about.html and make a page about yourself. Type everything - no copy-paste."

Add the DOCTYPE, html, head, body structure
Give it a title "About Me"
Add an <h1> with their name
Add a <p> introducing themselves
Add another <h1> saying "My Hobbies"
Add a <p> about their hobbies

Answer key:

<!DOCTYPE html>
<html>
  <head>
    <title>About Me</title>
  </head>
  <body>
    <h1>Ahmad Ali</h1>
    <p>Hi! I am learning web development and this is my second webpage ever.</p>

    <h1>My Hobbies</h1>
    <p>I enjoy playing cricket, reading books, and learning new things.</p>
  </body>
</html>

Common mistakes:

Forgot a closing tag → the page breaks; learn to spot it
Nothing shows → check if they wrote it inside <body>
Show indentation - nesting tags with spaces makes code readable

Part 4 - Mini Challenge

"Last task - no help. Add these to your About Me page:"

A third heading using <h2> instead of <h1> - notice h2 is smaller
Three paragraphs about three things you want to learn
Change the browser tab title to your name

Wrap Up

Practice: Build a page about your favorite movie or game. One h1 title, one h2 "Why I Like It", three+ paragraphs. Type it yourself.

Next session: Links to click through to other sites, and images.

Quick Reference - Session 1

THE SKELETON (memorize this):
<!DOCTYPE html>
<html>
  <head>
    <title>Tab title here</title>
  </head>
  <body>
    Everything visible goes here
  </body>
</html>

TAGS LEARNED:
<h1> to <h6>   headings (big to small)
<p>            paragraph
<title>        browser tab text

REMEMBER:
- Most elements have an opening tag and a closing tag
- Void elements such as <img>, <br>, and <input> have no closing tag
- Visible content goes inside <body>
- Save, then Live Server to see changes

Session 2 · HTML

Links & Images

By the end of this session, you can:

Create links to external websites and other local pages.
Use attributes such as href, target, and alt.
Add accessible images and explain why alternative text matters.

Part 1 - Theory

Concept 1 - Links (the "HyperText" in HTML)

Links connect documents and let visitors move through the web. The <a> element wraps the text or content that should be clickable.

Concept 2 - Attributes (new, important concept)

Attributes add extra information to an element. They are written inside the opening tag as name="value"; the href attribute tells a link where to go.

Anatomy of a link

<a href="...">opening tag + the destination

→

Click me!the visible, clickable text

→

</a>closing tag

href says WHERE to go · the text between the tags is WHAT you click.

Concept 3 - Images

Images are embedded resources rather than text content. Use src for the image location and write useful alt text so the content remains understandable when the image cannot be seen.

Anatomy of an image

<img>the image tag

→

src="photo.jpg"where the picture file lives

→

Picture appears on screenplus alt text if it can't load

One tag does everything - that's why img needs no closing tag.

Part 2 - Demonstration

First, links:

<!DOCTYPE html>
<html>
  <head>
    <title>Links and Images</title>
  </head>
  <body>
    <h1>Learning Links</h1>

    <a href="https://www.google.com">Go to Google</a>

  </body>
</html>

<a> → "the anchor tag, creates a link"
href="..." → "hypertext reference - the destination. This is the attribute."
Go to Google → "the clickable text the user sees"

Now teach `target="_blank"`:

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Go to Google (new tab)</a>

Now images:

<h1>Learning Images</h1>

<img src="https://picsum.photos/400/300" alt="A random photo">

<img> → "the image tag - NO closing tag"
src="..." → "source - the web address. picsum.photos gives random photos. 400/300 = 400 wide, 300 tall."
alt="..." → "alternative text. Shows if the image fails, AND screen readers read it aloud. ALWAYS include it."

Bonus - a clickable image:

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
  <img src="https://picsum.photos/200" alt="Click me">
</a>

Part 3 - Practice

"Create favorites.html. Build a page of your favorite things with links and images."

Full HTML skeleton, title "My Favorites"
An <h1> "My Favorite Website"
A link to their favorite website, opening in a new tab
An <h1> "A Random Picture"
An image using https://picsum.photos/500/300 with proper alt text

Answer key:

<!DOCTYPE html>
<html>
  <head>
    <title>My Favorites</title>
  </head>
  <body>
    <h1>My Favorite Website</h1>
    <a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">Visit YouTube</a>

    <h1>A Random Picture</h1>
    <img src="https://picsum.photos/500/300" alt="A beautiful random landscape">
  </body>
</html>

Common mistakes:

Forgetting https:// in href → link breaks
Forgetting quotes around attribute values → show how it breaks
Forgetting alt → remind them it's not optional
Broken image src → show how alt text appears in its place (why alt matters)

Part 4 - Mini Challenge

"Build a mini link menu - a homepage linking to 3 websites, each opening in a new tab, with a small image at the top." (No help.)

Solution:

<!DOCTYPE html>
<html>
  <head>
    <title>My Link Menu</title>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <img src="https://picsum.photos/600/200" alt="Banner image">

    <h2>My Links</h2>
    <a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">YouTube</a>
    <br>
    <a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google</a>
    <br>
    <a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">Wikipedia</a>
  </body>
</html>

Wrap Up

Practice: Build a page about your hometown. A title, 2 paragraphs, one image, and 2 links to sites about your city/country, all opening in new tabs.

Next session: Lists (bullets and numbers), and containers to group content - the foundation of every real layout.

Quick Reference - Session 2

LINKS:
<a href="https://site.com">Click text</a>
<a href="https://site.com" target="_blank" rel="noopener noreferrer">New tab</a>

IMAGES (void element, no </img>):
<img src="image-url.jpg" alt="description">

LINE BREAK (void element):
<br>

NEW CONCEPT - ATTRIBUTES:
Extra info inside opening tag: name="value"
  href    link destination
  src     image source
  alt     image description (accessibility)
  target="_blank"   open in new tab (add rel="noopener noreferrer")

REMEMBER:
- External links need https:// at the front
- Always add alt text to images
- Tags can have multiple attributes (space-separated)
- <img> and <br> have NO closing tag

Session 3 · HTML

Lists & Structure

By the end of this session, you can:

Choose between unordered and ordered lists.
Group related content with containers.
Use semantic elements such as header, nav, main, and footer.

Part 1 - Theory

Concept 1 - Two kinds of lists

Use an unordered list when the order does not matter, such as ingredients. Use an ordered list when the sequence matters, such as instructions or rankings.

ul vs ol at a glance

ulunordered - bullets

→

li items in any ordera shopping list

olordered - numbers

→

li items in exact orderrecipe steps

Both use li for every item - only the list wrapper changes.

Concept 2 - Containers

Containers group related content so you can structure it and style it as a unit. The generic <div> is useful when no more meaningful element fits.

Concept 3 - Semantic containers

Semantic containers describe the purpose of their content. Elements such as <header>, <nav>, <main>, and <footer> help browsers, screen readers, and future developers understand the page.

A real page layout in boxes

<header>top: site name + nav

↓

<main>the actual content

↓

<footer>bottom: credits

The nav lives INSIDE the header - that's how real pages arrange it.

Part 2 - Demonstration

Lists first:

<h2>My Shopping List</h2>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

<h2>How to Make Tea</h2>
<ol>
  <li>Boil water</li>
  <li>Add tea leaves</li>
  <li>Add milk and sugar</li>
  <li>Pour and enjoy</li>
</ol>

Now page structure:

<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
    </nav>
  </header>

  <main>
    <h2>Welcome</h2>
    <p>This is the main content of the page.</p>
  </main>

  <footer>
    <p>Made by Ahmad - 2026</p>
  </footer>
</body>

Part 3 - Practice

"Create recipe.html - a recipe page for a dish you love, with proper structure."

A <header> with an h1 of the dish name
A <main> containing: an h2 "Ingredients" + a ul of at least 4 ingredients
An h2 "Steps" + an ol of at least 4 steps
A <footer> with their name

Answer key:

<!DOCTYPE html>
<html>
  <head>
    <title>Chicken Biryani Recipe</title>
  </head>
  <body>
    <header>
      <h1>Chicken Biryani</h1>
    </header>
    <main>
      <h2>Ingredients</h2>
      <ul>
        <li>Rice</li>
        <li>Chicken</li>
        <li>Yogurt</li>
        <li>Biryani masala</li>
      </ul>
      <h2>Steps</h2>
      <ol>
        <li>Marinate the chicken</li>
        <li>Boil the rice</li>
        <li>Layer rice and chicken</li>
        <li>Steam on low heat</li>
      </ol>
    </main>
    <footer>
      <p>Recipe by Ahmad</p>
    </footer>
  </body>
</html>

Part 4 - Mini Challenge

"Add a nav to your recipe page with 2 links: one to your about.html from Session 1, and one to your favorites.html from Session 2. Then click between your pages - you now have a real multi-page website."

Wrap Up

Practice: Build a "My Top 5 Movies" page: header with title, main with an ol of 5 movies, each li containing the movie name, and a footer. Bonus: add nav links to your other pages.

Quick Reference - Session 3

LISTS:
<ul> <li>item</li> </ul>   bullets (unordered)
<ol> <li>item</li> </ol>   numbers (ordered)

CONTAINERS:
<div>     invisible grouping box
<header>  top of page
<nav>     navigation links
<main>    main content
<footer>  bottom of page

LINKING YOUR OWN PAGES:
<a href="about.html">About</a>   (no https:// needed)

Session 4 · HTML

Forms

By the end of this session, you can:

Build forms with labels, inputs, textareas, buttons, and select fields.
Group radio buttons and checkboxes correctly.
Use native browser validation with appropriate input types and required fields.

Part 1 - Theory

The cast of characters

<form> - the container that wraps all the fields
<input> - a single-line field. It is a void element, so it has no closing tag. Its type attribute changes what it accepts: text, email, password, checkbox, radio
<label> - the text describing a field ("Your name:")
<textarea> - a big multi-line box for messages
<button> - the submit button

How a form works

User types into fieldsname, email, message...

→

Clicks the buttonSubmit

→

Browser packs it upinto a request

→

Sent to a serverthat's a later course!

Focus on building the fields and interaction first; sending data to a server comes later.

Part 2 - Demonstration

<form action="/contact" method="post">
  <label for="name">Your Name:</label>
  <input id="name" name="name" type="text" placeholder="Enter your name" required>
  <br><br>

  <label for="email">Your Email:</label>
  <input id="email" name="email" type="email" placeholder="you@example.com" required>
  <br><br>

  <label for="password">Password:</label>
  <input id="password" name="password" type="password" required>
  <br><br>

  <button>Submit</button>
</form>

Demo these live:

Type in the password field → dots appear. "Same input tag, different type - the browser handles the hiding."
placeholder → "the grey hint text that disappears when you type. Another attribute!"
Type "hello" in the email field and click Submit → the browser complains. "type='email' gives us free validation."

Checkboxes and radios:

<fieldset>
  <legend>Your skills</legend>
  <label><input type="checkbox" name="skills" value="html"> HTML</label>
  <label><input type="checkbox" name="skills" value="css"> CSS</label>
</fieldset>
<br><br>

<fieldset>
  <legend>Your level</legend>
  <label><input type="radio" name="level" value="beginner"> Beginner</label>
  <label><input type="radio" name="level" value="expert"> Expert</label>
</fieldset>
<br><br>

<label for="message">Your message:</label>
<textarea id="message" name="message" rows="4" cols="40"></textarea>

The name attribute links radios

Radio: Beginnername="level"

Radio: Expertname="level" - same group!

→

Only ONE can be selectedthe shared name groups them

Different names = different groups = both selectable. Same name = pick one.

Part 3 - Practice

"Create contact.html - a complete contact form."

Full skeleton with header (h1 "Contact Me") and main
Inside main, a form with: name (text), email (email), subject (text)
A radio pair: "Project" or "Question" (same name!)
A textarea for the message
A Submit button

Answer key:

<!DOCTYPE html>
<html>
  <head>
    <title>Contact Me</title>
  </head>
  <body>
    <header>
      <h1>Contact Me</h1>
    </header>
    <main>
      <form>
        <label for="contact-name">Name:</label>
        <input id="contact-name" name="name" type="text" placeholder="Your name" required>
        <br><br>
        <label for="contact-email">Email:</label>
        <input id="contact-email" name="email" type="email" placeholder="you@email.com" required>
        <br><br>
        <label for="subject">Subject:</label>
        <input id="subject" name="subject" type="text" required>
        <br><br>
        <fieldset>
          <legend>Reason</legend>
          <label><input type="radio" name="reason" value="project" required> Project</label>
          <label><input type="radio" name="reason" value="question"> Question</label>
        </fieldset>
        <br><br>
        <label for="contact-message">Message:</label><br>
        <textarea id="contact-message" name="message" rows="5" cols="40" required></textarea>
        <br><br>
        <button>Submit</button>
      </form>
    </main>
  </body>
</html>

Part 4 - Mini Challenge

"Add a checkbox group 'How did you find me?' with 3 options (Google, Friend, Social Media), and a dropdown using this NEW tag you have to figure out from my example:"

<select>
  <option>Pakistan</option>
  <option>Qatar</option>
  <option>UAE</option>
</select>

Wrap Up

Practice: Build a "pizza order form": name, phone (type="tel"), size (radio: small/medium/large), toppings (3+ checkboxes), special instructions (textarea), and an Order button.

Quick Reference - Session 4

FORM STRUCTURE:
<form> ...fields... <button>Submit</button> </form>

INPUT TYPES (void element):
<input type="text">      one-line text
<input type="email">     validates email format
<input type="password">  hides characters
<input type="checkbox">  pick many
<input type="radio" name="group">  pick ONE (shared name)

OTHER FIELDS:
<label>Field name:</label>
<textarea rows="4" cols="40"></textarea>
<select><option>A</option></select>

USEFUL ATTRIBUTE:
placeholder="hint text"

Session 5 · CSS

Intro to CSS

By the end of this session, you can:

Write CSS rules using selectors, properties, and values.
Connect an external stylesheet to an HTML page.
Use element, class, and ID selectors appropriately.

Part 1 - Theory

The rule pattern (the heart of all CSS)

selector {
  property: value;
}

How one CSS rule works

selectorWHICH elements? - h1

→

propertyWHAT to change? - color

→

valuechange it TO - red

The browser reads the rule, finds every h1, and repaints them all.

Three ways to add CSS - but only one right way

Inline - style="..." attribute on a tag. Messy, avoid.
Internal - a <style> block in the head. OK for tiny tests.
External - a separate .css file linked in the head. A maintainable approach for most websites.

Part 2 - Demonstration

Step 1 - create and link the stylesheet:

Create style.css in the same folder, then add this line inside the HTML head:

<link rel="stylesheet" href="style.css">

HTML pageindex.html

→

link tag in the headpoints at the css file

→

style.cssall your rules live here

Two separate files, one connection. No link tag = no styling, ever.

Step 2 - first rule in style.css:

h1 {
  color: red;
}

Step 3 - the problem, then classes:

<!-- HTML -->
<p class="warning">This is important!</p>
<p>This is a normal paragraph.</p>

/* CSS - the dot means "class" */
.warning {
  color: red;
}

Step 4 - ids for one-of-a-kind elements:

<!-- HTML -->
<h1 id="main-title">My Website</h1>

/* CSS - the hash means "id" */
#main-title {
  color: darkblue;
}

Part 3 - Practice

"Take your recipe page from Session 3. Create style.css, link it, and style it:"

All h2 elements → green
Give the ingredients ul a class "ingredients" → make its text brown
Give the h1 an id "dish-name" → make it dark red
All p elements → grey

Answer key (style.css):

h2 {
  color: green;
}

.ingredients {
  color: brown;
}

#dish-name {
  color: darkred;
}

p {
  color: grey;
}

Common mistakes:

Forgetting the dot before a class name in CSS → nothing happens
Forgetting the link tag → CSS file exists but nothing applies. "First thing to check, always."
Missing semicolon → the NEXT line silently breaks too

Part 4 - Mini Challenge

"One selector I haven't taught: body { }. Figure out what styling the body does. Try giving it a background-color: lightyellow; and a color: darkslategray; and explain to me what happened."

Wrap Up

Practice: Style your contact form page: pick colors for the h1, labels, and give the body a light background color.

Quick Reference - Session 5

THE PATTERN (all CSS ever):
selector {
  property: value;
}

CONNECT CSS (in the head):
<link rel="stylesheet" href="style.css">

SELECTORS:
h1 { }        every h1 (element)
.warning { }  everything with class="warning"
#title { }    the one element with id="title"
body { }      the whole page

CLASS vs ID:
class = uniform (many can wear it)  → use mostly
id    = CNIC (exactly one)          → unique elements

Session 6 · CSS

Colors, Fonts & Text

By the end of this session, you can:

Read and choose hex colors.
Build reliable font fallback stacks.
Control readability with font size, line height, alignment, and text styling.

Part 1 - Theory

Hex colors

A six-digit hex color describes red, green, and blue light: #RRGGBB. Each pair ranges from 00 to ff, from none of that color to the maximum amount.

Reading a hex color

#f5693cthe full code

→

f5 - REDalmost max red light

69 - GREENmedium green light

3c - BLUEsome blue light

→

= orange!red + some green, no blue

This example shows how to read any six-digit hex color.

Font stacks

A font stack gives the browser several choices. Put your preferred font first, then include familiar fallbacks and finish with a generic family such as sans-serif.

The font fallback chain

Arialtry this first - available?

→

Helveticano? try this one

→

any sans-serifstill no? use any similar font

The browser walks the list and stops at the first font it finds on the device.

Part 2 - Demonstration

body {
  background-color: #f4f4f4;
  font-family: Arial, Helvetica, sans-serif;
  color: #333333;
}

h1 {
  color: #f5693c;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

.highlight {
  background-color: #fff3cd;
  font-weight: bold;
  font-style: italic;
}

a {
  color: #0066cc;
  text-decoration: none;
}

Explain the new properties as each takes effect:

font-size: 18px → "pixels - bigger number, bigger text"
line-height: 1.6 → "space BETWEEN lines. 1.6 = comfortable reading. Change to 1 and show how cramped it gets."
text-align: center → "also try left and right"
text-transform: uppercase → "capitalizes without retyping the HTML"
font-weight: bold / font-style: italic → "the CSS versions of strong and em"
text-decoration: none → "removes the underline from links - every modern site does this"

Part 3 - Practice

"Take your About Me page from Session 1, link a stylesheet, and style it into something that looks designed:"

body: a light background hex color, a font-family with fallbacks, dark grey text
h1: a bold color of choice (hex, from the color picker), centered
p: 18px, line-height 1.6
Add class "highlight" to one important sentence and style it with a background color

Part 4 - Mini Challenge

"Google 'Google Fonts', pick any font you like, and figure out from their instructions how to add it to your page. They give you a link tag and a CSS rule - you know what both of those are now."

Wrap Up

Practice: Restyle your recipe page completely: custom hex palette, a Google Font, comfortable line-height, and centered headings.

Quick Reference - Session 6

COLORS:
color: #f5693c;              text color (hex)
background-color: #f4f4f4;   background
#000000 black · #ffffff white · #RRGGBB

TEXT:
font-family: Arial, sans-serif;   (always a fallback)
font-size: 18px;
line-height: 1.6;
text-align: center;    (left / right)
text-transform: uppercase;
font-weight: bold;
font-style: italic;
letter-spacing: 2px;
text-decoration: none;   (removes link underline)

TOOL: Google "color picker" for hex codes

Session 7 · CSS

The Box Model

By the end of this session, you can:

Explain content, padding, border, and margin.
Use box-model properties and shorthand values.
Inspect spacing problems with the DevTools box diagram.

Part 1 - Theory

The four layers (inside → out)

Content - the text or image itself
Padding - space INSIDE the box, between content and border
Border - the box's edge line
Margin - space OUTSIDE the box, pushing other boxes away

The box model - layers from inside out

Contentthe text itself

→

Paddingspace INSIDE the box

→

Borderthe edge line

→

Marginspace OUTSIDE, pushes others away

padding hugs the content · margin keeps other boxes at a distance.

Part 2 - Demonstration

Build a visible box, one layer at a time:

<div class="box">Hello, I am a box</div>

.box {
  background-color: #dbeafe;
  width: 300px;

  padding: 20px;                 /* add 2nd: space inside */
  border: 3px solid #1e40af;     /* add 3rd: the edge */
  margin: 40px;                  /* add 4th: space outside */
}

The DevTools reveal:

Open DevTools, select the element, and inspect the Box Model panel. The diagram shows content, padding, border, and margin; hover each region to see which pixels belong to it.

Individual sides + the shorthand:

.box2 {
  padding-top: 10px;
  padding-left: 30px;
  margin-bottom: 50px;

  /* shorthand: top right bottom left (clockwise) */
  padding: 10px 30px 10px 30px;
  /* two values: vertical | horizontal */
  padding: 10px 30px;
}

Border variations:

border: 2px dashed red;
border: 1px solid #cccccc;
border-radius: 10px;    /* rounded corners! */

Part 3 - Practice

"Build cards.html - three 'profile cards' using the concepts from this lesson:"

Three divs, each with class "card", each containing an h2 name and a p description
Each card: width 250px, white background, 20px padding, a subtle solid border, 10px border-radius, 20px margin
Give the body a grey background (#f4f4f4) so the white cards pop

Answer key (style.css):

body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}

.card {
  width: 250px;
  background-color: #ffffff;
  padding: 20px;
  border: 1px solid #dddddd;
  border-radius: 10px;
  margin: 20px;
}

Part 4 - Mini Challenge

"Open any big website - YouTube, Wikipedia - press F12, and inspect three different elements. For each, tell me its padding and margin from the diagram. Then change something live: set YouTube's background to red from DevTools."

Wrap Up

Practice: Restyle the recipe page: put the ingredients list inside a padded, bordered, rounded box with a soft background color.

Quick Reference - Session 7

THE BOX (inside → out):
content → padding → border → margin

PROPERTIES:
width: 300px;
padding: 20px;             inside space
border: 2px solid black;   edge (size style color)
margin: 40px;              outside space
border-radius: 10px;       rounded corners

SHORTHAND (clockwise from top):
padding: top right bottom left;
padding: 10px 30px;   (vertical horizontal)

PER SIDE:
padding-top / margin-bottom / border-left ...

X-RAY VISION: F12 → inspect → box diagram

Session 8 · CSS

Flexbox & Layout

By the end of this session, you can:

Create one-dimensional layouts with Flexbox.
Control the main and cross axes.
Build a basic responsive navigation bar and card row.

Part 1 - Theory

The flex relationship

Parent containerdisplay: flex

→

child 1now in a row

child 2side by side

child 3no more stacking

ONE line on the parent rearranges ALL its children.

Part 2 - Demonstration

Step 1 - the transformation:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;        /* the magic line */
  gap: 20px;            /* space between items */
}

.item {
  background-color: #f5693c;
  color: white;
  padding: 30px;
  border-radius: 8px;
}

Step 2 - justify-content (change it live, one by one):

justify-content: flex-start;     /* default, packed left */
justify-content: center;         /* centered */
justify-content: space-between;  /* pushed to edges, space in middle */
justify-content: space-around;   /* equal air around each */

Step 3 - align-items (give the container a height first):

.container {
  display: flex;
  height: 200px;
  border: 2px dashed grey;
  align-items: center;     /* try flex-start, flex-end too */
}

Step 4 - the real thing, a navbar:

<nav class="navbar">
  <div class="logo">MySite</div>
  <div class="links">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;  /* logo left, links right */
  align-items: center;
  background-color: #1a1a1a;
  padding: 15px 30px;
}

.logo { color: white; font-weight: bold; font-size: 20px; }

.links {
  display: flex;    /* flex inside flex! */
  gap: 25px;
}

.links a { color: white; text-decoration: none; }

Anatomy of the navbar

<nav> = flex containerjustify-content: space-between

→

.logoleft child

.links = another flex containergap: 25px

space-between pushes the two children to opposite edges - logo left, links right.

Part 3 - Practice

"Fix your cards page from Session 7 - put the three cards in a row, then add a navbar above them."

Wrap the three cards in a div class "card-row"; give it display flex, gap 20px, justify-content center
Build the navbar from the demo above, with your own site name
Bonus: center the whole card row vertically on screen

Answer key (added CSS):

.card-row {
  display: flex;
  gap: 20px;
  justify-content: center;
}

Part 4 - Mini Challenge

"One property, no explanation: add flex-direction: column; to your card-row. Tell me what happened and when this might be useful. Then find out what flex-wrap: wrap; does when you shrink the browser window."

Wrap Up

Practice: Build a page footer with flex: your name on the left, three social links on the right (space-between, dark background, padded).

Quick Reference - Session 8

ON THE PARENT (not the items!):
display: flex;            children go in a row
gap: 20px;                space between children
flex-direction: column;   stack vertically instead

MAIN AXIS (justify-content):
flex-start | center | space-between | space-around

CROSS AXIS (align-items):
flex-start | center | flex-end

With flex-direction: row, the main axis is horizontal.
With flex-direction: column, the main axis is vertical.

CLASSIC NAVBAR:
display: flex;
justify-content: space-between;
align-items: center;

flex-wrap: wrap;   items flow to next line if tight

Session 9 · CSS

Responsive Design

By the end of this session, you can:

Use flexible widths and maximum widths.
Write media queries for smaller screens.
Test a layout at phone, tablet, and desktop sizes.

Part 1 - Theory

Problem 1 - fixed pixels

Fixed vs flexible width

300pxfixed - same on every screen

→

90% + max-width: 300pxshrinks with the screen, never exceeds

Desktop: both look the same · Phone: only the flexible one fits.

.card {
  width: 90%;          /* flexes with the screen */
  max-width: 300px;    /* but never wider than this */
}

Problem 2 - one design for all sizes

@media (max-width: 600px) {
  /* rules here ONLY apply when screen ≤ 600px */
}

How a media query decides

Screen width changesthe visitor resizes

→

Is it ≤ 600px?the condition

→

YES - apply phone rulescards stack

NO - keep desktop rulescards stay in a row

Every pixel of resize re-checks the condition - that's why layouts "snap" at breakpoints.

The one required tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Part 2 - Demonstration

Make the cards page responsive, live in the device toolbar:

/* Desktop-first styles (what we already have) */
.card-row {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.card {
  width: 90%;
  max-width: 300px;
}

/* Phone rules */
@media (max-width: 600px) {
  .card-row {
    flex-direction: column;   /* stack the cards */
    align-items: center;
  }

  h1 {
    font-size: 24px;          /* smaller heading on phone */
  }

  .navbar {
    flex-direction: column;   /* stack logo above links */
    gap: 10px;
  }
}

Part 3 - Practice

"Make your whole cards page + navbar responsive:"

Add the viewport meta tag to the head
Change fixed card widths to width 90% + max-width 300px
Write a media query at max-width 600px: stack the card row, stack the navbar, shrink the h1
Test by dragging the device toolbar width back and forth across 600px

Checklist to verify:

No horizontal scrollbar at any width
Cards readable on iPhone SE size (375px)
Navbar usable on phone

Part 4 - Mini Challenge

"Add a SECOND media query for tablets: between 601px and 900px, show the cards in a row but make them narrower (max-width 200px). Hint: @media (min-width: 601px) and (max-width: 900px) - figure out the rest."

Wrap Up

Practice: Make your recipe page and contact form fully responsive. Test both at 375px width - no horizontal scrolling allowed.

Quick Reference - Session 9

REQUIRED IN EVERY <head>:
<meta name="viewport"
  content="width=device-width, initial-scale=1.0">

FLEXIBLE SIZING:
width: 90%;         relative to parent
max-width: 300px;   upper limit

MEDIA QUERIES (IF for CSS):
@media (max-width: 600px) {
  .card-row { flex-direction: column; }
}

@media (min-width: 601px) and (max-width: 900px) {
  /* tablet rules */
}

TEST: F12 → device toolbar → drag width across
your breakpoint and watch the layout snap

Final Project

Personal Portfolio Page

By the end of this project, you can:

Plan a complete multi-section portfolio page.
Combine semantic HTML, CSS, Flexbox, forms, and responsive rules.
Evaluate and present your work using a quality checklist.

The Brief

Build a one-page portfolio that proves you can structure, style, and make a small website responsive. Use your own name, writing, colors, image, and project links so the final result feels personal rather than copied.

Requirements Checklist

The portfolio site map

<header> = navbarlogo left · section links right

↓

<section id="hero">name + tagline + photo

↓

<section id="about">paragraphs + skills list

↓

<section id="projects">3 cards, one per course project

↓

<section id="contact">the Session 4 form

↓

<footer>name, year, social links

One long page, six sections - the navbar jumps between them.

Structure (HTML - Sessions 1–4)

Proper skeleton with viewport meta tag and a real title
Navbar - site name/logo left, links right (Home, About, Projects, Contact) linking to page sections using href="#about" style anchors
Hero section - their name in a big h1, a one-line tagline, one image
About section - 2–3 paragraphs + a ul of skills they've learned
Projects section - 3 cards for the recipe page, cards page, and contact form, each with a heading, short description, and link to the actual file
Contact section - the full form from Session 4
Footer - name, year, and social links

Styling (CSS - Sessions 5–8)

External stylesheet, no inline styles
A consistent color palette (3–4 hex colors max) and one Google Font
Cards use the full box model: padding, border, border-radius, margin
Navbar and card row built with flexbox
Comfortable line-height and font sizes

Responsive (Session 9)

Media query at 600px: navbar stacks, cards stack, headings shrink
Zero horizontal scrolling at 375px width

New Trick to Teach - Section Anchors

<!-- Nav link -->
<a href="#about">About</a>

<!-- The section it jumps to -->
<section id="about">
  <h2>About Me</h2>
</section>

How section anchors work

Click "About" in the nav<a href="#about">

→

Browser finds id="about"the matching section

→

Page scrolls to itsmooth jump, no reload

The # link and the id must match EXACTLY - that's the whole trick.

How to Build It

Step 1: full HTML structure, no CSS. Structure first, exactly like the course taught.
Step 2: all styling - colors, fonts, boxes, flexbox.
Step 3: responsive pass + polish + "launch" (open it full-screen and show it off like a demo).
When you're stuck, check what DevTools shows and which session's reference card covers it.
Check your work with the checklist above, ticking items off out loud.

Where They Go Next

JavaScript - making the form actually respond, dark-mode toggles, interactivity (the natural next course)
Deployment - putting the portfolio on the real internet free with GitHub Pages, Netlify, or Vercel
CSS Grid - flexbox's sibling for two-dimensional layouts

Course Extensions

From Beginner to Builder

Use these extensions after the core lessons to test understanding, improve quality, add JavaScript, and publish the finished portfolio.

Knowledge Checks

Quick questions

1. Where does visible page content belong?

Inside the <body> element.

2. What is the difference between ul and ol?

ul is unordered and normally uses bullets; ol is ordered and normally uses numbers.

3. What does padding control?

The space inside an element, between its content and border.

4. Which Flexbox property controls the main axis?

justify-content.

5. Why do radio buttons share the same name?

A shared name groups them so the user can select one option from that group.

6. What problem does a media query solve?

It applies different CSS rules when the viewport matches a condition such as a maximum width.

Accessibility Essentials

Accessibility means making the page usable by people with different abilities, devices, and input methods. Treat it as part of the HTML structure, not as a final decoration.

Use semantic elements before reaching for generic div elements.
Keep a logical heading order and provide one clear page heading.
Label every form control and group related controls with fieldset and legend.
Write meaningful image alternative text; use empty alt="" for decorative images.
Make every interactive feature usable with a keyboard and show a visible focus state.
Check color contrast and never communicate meaning by color alone.

Practice: Turn off your mouse and navigate the portfolio using Tab, Shift+Tab, Enter, and Escape.

JavaScript Next

JavaScript adds behavior to a page. Start with variables, functions, events, DOM selection, and updating text or classes.

const button = document.querySelector('#theme-button');
const status = document.querySelector('#status');

button.addEventListener('click', function () {
  document.body.classList.toggle('dark');
  status.textContent = 'Theme changed';
});

Select an element with querySelector.
Listen for an event such as click or submit.
Change text, classes, attributes, or styles in response.
Keep behavior in JavaScript instead of putting large inline scripts in HTML.

Real Form Handling and Validation

HTML validation protects the first layer of user experience. JavaScript can provide clearer feedback, but the server must validate again because browser code can be bypassed.

const form = document.querySelector('#contact-form');
const message = document.querySelector('#form-message');

form.addEventListener('submit', async function (event) {
  event.preventDefault();
  message.textContent = '';

  if (!form.checkValidity()) {
    form.reportValidity();
    return;
  }

  const response = await fetch('/api/contact', {
    method: 'POST',
    body: new FormData(form)
  });

  message.textContent = response.ok
    ? 'Thanks! Your message was sent.'
    : 'Something went wrong. Please try again.';
});

Give controls stable name values so the server can read them.
Use required, input types, length limits, and clear error messages.
Disable or guard duplicate submissions while a request is in progress.
Never trust client-side validation as a security boundary.

Git and GitHub Basics

Git records project history. GitHub stores that history online and makes collaboration and deployment easier.

git init
git add index.html
git commit -m "feat: add portfolio page"
git branch -M main
git remote add origin https://github.com/USERNAME/REPOSITORY.git
git push -u origin main

Make one focused change.
Review git diff.
Commit with a descriptive conventional message such as fix: improve mobile navigation.
Push regularly so the remote repository is a backup.

Deploy with Vercel

Push the project to a GitHub repository.
Sign in at Vercel and choose Add New → Project.
Import the GitHub repository.
For this plain HTML project, leave the build command empty and use the repository root as the output location.
Click Deploy and open the generated URL.

Deployment checklist: confirm index.html is at the repository root, test the production URL on mobile, and verify that every internal anchor still works.

Final Project Rubric

Area	Excellent	Needs work
HTML structure	Semantic sections, valid nesting, meaningful headings.	Mostly generic containers, broken nesting, or unclear hierarchy.
Accessibility	Labels, alt text, keyboard access, focus states, strong contrast.	Missing labels, inaccessible controls, or color-only meaning.
CSS and layout	Consistent system, box model, Flexbox, and clean responsive behavior.	Inconsistent spacing, overflow, or repeated emergency overrides.
Interaction	Navigation, form feedback, and JavaScript behavior work reliably.	Broken links, silent errors, or confusing feedback.
Polish and deployment	Personal content, tested production URL, and clear README.	Placeholder content, untested deployment, or no project explanation.

Debugging with Browser DevTools

Open DevTools with F12 or right-click and choose Inspect.
Use the Elements panel to confirm the element exists and has the expected class or ID.
Use the Styles panel to find crossed-out declarations and identify which rule wins.
Use the Console to read JavaScript errors from top to bottom.
Use the Network panel to find missing files, failed requests, and incorrect paths.
Test responsive layouts with the device toolbar at 375px, 768px, and desktop widths.

/* Debug temporarily: reveal every element's boundary */
* { outline: 1px solid rgba(245, 105, 60, 0.25); }

Debugging loop: reproduce the problem → inspect evidence → form one hypothesis → change one thing → test again.

Answer-Free Practice Mode

Attempt each challenge before opening any reference card. Explain your decisions out loud and keep the final answer in your own words.

Build a semantic article page with a header, navigation, main content, aside, and footer.
Create an accessible signup form with inline error messages and a success state.
Add a dark-mode button using JavaScript and save the preference in localStorage.
Make a three-card project grid that changes from three columns to one column at 600px.
Deploy the result and ask another person to complete three tasks using only the keyboard.

Reflection: Write down what failed, what evidence you found, and what change fixed it. That log becomes your personal debugging reference.

What is the Web + Your First HTML Page

By the end of this session, you can:

Part 1 - Theory

How a webpage gets to your screen

The three languages of the web

Part 2 - Demonstration

The page skeleton as a tree

Explain each part as you type:

Part 3 - Practice

Answer key:

Common mistakes:

Part 4 - Mini Challenge

Wrap Up

Quick Reference - Session 1

Links & Images

By the end of this session, you can:

Part 1 - Theory

Concept 1 - Links (the "HyperText" in HTML)

Concept 2 - Attributes (new, important concept)

Anatomy of a link

Concept 3 - Images

Anatomy of an image

Part 2 - Demonstration

First, links:

Now teach target="_blank":

Now images:

Bonus - a clickable image:

Part 3 - Practice

Answer key:

Common mistakes:

Part 4 - Mini Challenge

Solution:

Wrap Up

Quick Reference - Session 2

Lists & Structure

By the end of this session, you can:

Part 1 - Theory

Concept 1 - Two kinds of lists

ul vs ol at a glance

Concept 2 - Containers

Concept 3 - Semantic containers

A real page layout in boxes

Part 2 - Demonstration

Lists first:

Now page structure:

Part 3 - Practice

Answer key:

Part 4 - Mini Challenge

Wrap Up

Quick Reference - Session 3

Forms

By the end of this session, you can:

Part 1 - Theory

The cast of characters

How a form works

Part 2 - Demonstration

Demo these live:

Checkboxes and radios:

The name attribute links radios

Part 3 - Practice

Answer key:

Part 4 - Mini Challenge

Wrap Up

Quick Reference - Session 4

Intro to CSS

By the end of this session, you can:

Part 1 - Theory

The rule pattern (the heart of all CSS)

How one CSS rule works

Three ways to add CSS - but only one right way

Part 2 - Demonstration

Step 1 - create and link the stylesheet:

Step 2 - first rule in style.css:

Step 3 - the problem, then classes:

Step 4 - ids for one-of-a-kind elements:

Part 3 - Practice

Answer key (style.css):

Common mistakes:

Part 4 - Mini Challenge

Wrap Up

Now teach `target="_blank"`: