Day 1: The Web is Magic (And Loaded with Meaning)

Today's Mission: Understand what the web actually is, write your first HTML, style it with CSS, get it live on the internet, AND start thinking critically about design choices.

Critical Concept: Design is not neutral. Every choice you make serves someone or something. Today we start asking: Who does my design serve?

🌍 Part 1: What IS The Web? (And Who Gets to Make It?)

The web is NOT:

❌ An app store
❌ Social media
❌ Google
❌ A shopping mall
❌ Something owned by corporations

The web IS:

✅ Documents that link to each other
✅ Anyone can make a page
✅ Anyone can host a page
✅ No one owns it (seriously!)
✅ Your browser requests pages, servers send them

The Technical Flow

When you type a URL:

Your browser asks a server "Can I have this page?"
The server sends back text (HTML, CSS, JS)
Your browser reads it and draws what you see
That's it. Really.

No app required. No company in the middle. Just requests and responses.

The Political Answer

But wait—if "anyone can make a page," why does the web feel so corporate?

The reality:

Big tech controls the platforms (Google, Meta, Amazon)
Most people only visit 5-10 sites
Design trends homogenize ("looks professional" = looks corporate)
Dark patterns manipulate users everywhere
Accessibility often ignored

This course teaches you to:

Build OUTSIDE the walled gardens
Recognize manipulative design
Make conscious, ethical choices
Create space for different voices
Question who "professional" design serves

Design is not neutral. The web you build reflects your values (whether you realize it or not).

🤯 Part 2: Wait, Show Me The Web Can Be Amazing

Before we code anything, let's see why this matters.

Case Study 1: The Pudding - "Film Dialogue"

What it does:

Interactive data visualization about gender in film scripts
Scroll-based storytelling
Custom graphics, animations
Made with HTML/CSS/JS

Why it matters:

Complex storytelling IN THE BROWSER
Not a video, not a PDF - interactive
You could build something like this (eventually!)

View it, then "View Source" (right-click → View Page Source)
→ See? It's just text files. HTML, CSS, JavaScript.

Case Study 2: Hundred Rabbits

What it does:

Portfolio site for artists living on a sailboat
Hand-coded, minimal, fast
Works offline, low bandwidth
Personal, unique, memorable

Why it matters:

Not built from a template
Loads instantly (small files!)
Reflects who they are
You could build this in Week 1

Case Study 3: Lynn Fisher's Annual Portfolio

What it does:

Every year, she redesigns her ENTIRE site with a theme
Past themes: Paper cutouts, video game, Simpsons
Same content, wildly different presentations
All CSS art, no images

Why it matters:

Shows CSS can do ANYTHING
Personal expression through code
Your portfolio doesn't have to be boring
She owns it completely (not on a platform)

Case Study 4: Neocities Featured Sites

What it does:

Regular people making weird, personal sites
Chaotic, creative, alive
No ads, no tracking, no algorithms
Just humans being human

Why it matters:

This is the real web
Your site will live here
You're joining a community
No one can delete your work (you host it)

💻 Part 3: HTML - The Skeleton

What is HTML?

HTML = HyperText Markup Language

Translation: Text with links that describes meaning

It's not a programming language. It's a way of saying "this is a heading" or "this is a paragraph" so browsers know what to display.

Your First HTML

Open your text editor. Create a file called index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Site</title>
</head>
<body>
    <h1>Hello, I am on the internet</h1>
    <p>This is my first website. I made it myself.</p>
</body>
</html>

Save it. Open it in a browser. You're officially a web developer.

Breaking It Down

<!DOCTYPE html>

→ "Hey browser, this is HTML5"

<html lang="en">

→ Everything goes inside here. lang="en" = English content (helps screen readers)

<head>

→ Invisible stuff: metadata, page title, links to CSS

<meta charset="UTF-8">

→ Use UTF-8 characters (emojis, international characters)

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

→ Make it work on phones (don't skip this!)

<title>My First Site</title>

→ Shows in browser tab

<body>

→ Everything you SEE goes here

<h1>Hello, I am on the internet</h1>

→ Main heading (h1 = biggest, h6 = smallest)

<p>This is my first website.</p>

→ Paragraph text

🏗️ Part 4: HTML Tags You'll Use Constantly

Headings (Hierarchy Matters!)

<h1>Page Title - Only One Per Page</h1>
<h2>Section Heading</h2>
<h3>Sub-section</h3>
<h4>Smaller heading</h4>
<!-- h5 and h6 exist but rarely needed -->

Rule: h1 = most important. Use heading levels in order. Screen readers use these to navigate.

Text & Formatting

<p>This is a paragraph.</p>

<p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>

<p>You can <br> force a line break like this.</p>

<blockquote>
    "This is a quote from someone smart."
</blockquote>

Note: <strong> = important, <em> = emphasis. They're not just "bold" and "italic" - they have meaning for screen readers.

Links (The Soul of the Web!)

<!-- Link to another site -->
<a href="https://example.com">Click here to go somewhere</a>

<!-- Link to another page on your site -->
<a href="about.html">About Me</a>

<!-- Link to a section on the same page -->
<a href="#contact">Jump to Contact</a>

<!-- Open in new tab (use sparingly) -->
<a href="https://example.com" target="_blank" rel="noopener">External Link</a>

The href attribute = where the link goes

Images

<!-- Image on your site -->
<img src="images/cat.jpg" alt="A fluffy orange cat sleeping">

<!-- Image from elsewhere -->
<img src="https://example.com/image.jpg" alt="Description of image">

Critical: ALWAYS write alt text. Screen readers need it. Search engines use it. It's not optional.

Lists

<!-- Unordered list (bullets) -->
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

<!-- Ordered list (numbers) -->
<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

Containers (For Organization)

<!-- Generic container (no meaning, just for styling) -->
<div class="project">
    <h2>Project Title</h2>
    <p>Project description</p>
</div>

<!-- Semantic containers (have meaning!) -->
<header>
    <h1>My Site</h1>
    <nav>
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
    </nav>
</header>

<main>
    <article>
        <h2>Blog Post Title</h2>
        <p>Content goes here...</p>
    </article>
</main>

<footer>
    <p>&copy; 2025 Your Name</p>
</footer>

Semantic HTML = Using tags that describe what they contain
→ Better for accessibility, SEO, and future you reading your code

🎨 Part 5: CSS - Making It Beautiful

What is CSS?

CSS = Cascading Style Sheets

Translation: Instructions for how HTML should look

HTML = structure/meaning
CSS = appearance/layout

Three Ways to Add CSS

1. Inline (DON'T DO THIS - hard to maintain)

<p style="color: blue; font-size: 20px;">Blue text</p>

2. Internal (OK for learning, not great for real sites)

<head>
    <style>
        p {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>

3. External (THE RIGHT WAY - separate CSS file)

index.html:

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

style.css:

p {
    color: blue;
    font-size: 20px;
}

Why external? Change one CSS file → updates every page. Separation of concerns. Easier to read.

CSS Syntax

selector {
    property: value;
    another-property: value;
}

Example:

h1 {
    color: darkblue;
    font-size: 48px;
    font-family: Arial, sans-serif;
}

→ "Make all h1 elements dark blue, 48px size, Arial font"

Selectors: Targeting What to Style

/* Select by tag name */
p {
    color: gray;
}

/* Select by class (can use multiple times) */
.project {
    border: 1px solid black;
    padding: 20px;
}

/* Select by ID (only use once per page) */
#header {
    background-color: lightblue;
}

/* Select descendants */
nav a {
    text-decoration: none;
    color: black;
}

/* Select with multiple classes */
.project.featured {
    background-color: yellow;
}

Common CSS Properties

Colors

.element {
    color: red;                    /* text color */
    background-color: lightblue;   /* background */
    
    /* Different ways to specify colors: */
    color: #ff0000;                /* hex */
    color: rgb(255, 0, 0);         /* RGB */
    color: rgba(255, 0, 0, 0.5);   /* RGB with transparency */
    color: hsl(0, 100%, 50%);      /* HSL */
}

Typography

.text {
    font-family: Arial, sans-serif;    /* Font (with fallback) */
    font-size: 18px;                   /* Size */
    font-weight: bold;                 /* or normal, 100-900 */
    font-style: italic;                /* or normal */
    line-height: 1.6;                  /* Space between lines */
    letter-spacing: 0.5px;             /* Space between letters */
    text-align: center;                /* left, right, center, justify */
    text-decoration: underline;        /* or none */
    text-transform: uppercase;         /* or lowercase, capitalize */
}

Spacing

.element {
    /* Padding = space INSIDE element */
    padding: 20px;                     /* All sides */
    padding: 10px 20px;                /* Top/bottom left/right */
    padding: 10px 20px 30px 40px;      /* Top right bottom left */
    
    /* Margin = space OUTSIDE element */
    margin: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
    
    /* Width & Height */
    width: 50%;
    max-width: 800px;
    height: 300px;
}

The Box Model:

┌─────────────── MARGIN ───────────────┐
│ ┌─────────── BORDER ─────────────┐   │
│ │ ┌───────── PADDING ─────────┐  │   │
│ │ │                            │  │   │
│ │ │        CONTENT             │  │   │
│ │ │                            │  │   │
│ │ └────────────────────────────┘  │   │
│ └─────────────────────────────────┘   │
└───────────────────────────────────────┘

Borders & Backgrounds

.element {
    border: 2px solid black;           /* width style color */
    border-radius: 10px;               /* Rounded corners */
    
    background-color: lightblue;
    background-image: url('pattern.png');
    background-size: cover;            /* or contain */
    background-position: center;
}

🚀 Part 6: Your First Complete Page

Create these two files:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name - Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Your Name</h1>
        <p>Designer • Artist • Human</p>
    </header>
    
    <nav>
        <a href="#about">About</a>
        <a href="#work">Work</a>
        <a href="#contact">Contact</a>
    </nav>
    
    <main>
        <section id="about">
            <h2>About Me</h2>
            <p>I'm a third-year student learning to build for the web. This is my space to share projects and experiments.</p>
        </section>
        
        <section id="work">
            <h2>My Work</h2>
            
            <div class="project">
                <h3>Project One</h3>
                <p>Description of something you made.</p>
            </div>
            
            <div class="project">
                <h3>Project Two</h3>
                <p>Another thing you're proud of.</p>
            </div>
        </section>
        
        <section id="contact">
            <h2>Get In Touch</h2>
            <p>Email: <a href="mailto:your@email.com">your@email.com</a></p>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2025 Your Name. Built by hand.</p>
    </footer>
</body>
</html>

style.css:

/* Reset some defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

header {
    text-align: center;
    padding: 40px 0;
    border-bottom: 2px solid #333;
    margin-bottom: 30px;
}

header h1 {
    font-size: 48px;
    margin-bottom: 10px;
}

header p {
    font-size: 18px;
    color: #666;
}

nav {
    text-align: center;
    margin-bottom: 50px;
}

nav a {
    text-decoration: none;
    color: #333;
    margin: 0 20px;
    font-weight: bold;
}

nav a:hover {
    color: #666;
}

section {
    margin-bottom: 60px;
}

h2 {
    font-size: 32px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.project {
    background-color: #f5f5f5;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 4px solid #333;
}

.project h3 {
    margin-bottom: 10px;
}

footer {
    text-align: center;
    padding-top: 30px;
    border-top: 2px solid #333;
    color: #666;
    font-size: 14px;
}

a {
    color: #0066cc;
}

a:hover {
    text-decoration: underline;
}

🌐 Part 7: Getting It Live on Neocities

Why Neocities?

Free forever
No ads, no tracking
Community-driven (like old-school GeoCities)
You own your content
Supports custom HTML/CSS/JS
Built-in editor if needed

Steps to Launch

Go to neocities.org
Create an account (username becomes your URL)
Delete the template files (index.html, style.css, etc.)
Upload YOUR files (drag and drop into browser)
Visit your site: username.neocities.org

YOU'RE LIVE. On the actual internet. You did that.

🧠 Part 8: Critical Concepts - Design is Not Neutral

Now that you've built something, let's talk about what your choices mean.

Every Design Decision Serves Someone

Look at your site. You made choices:

Background color → Affects readability, mood, accessibility
Font size → Who can read it? (Hint: not everyone has perfect vision)
Link styling → Can people tell it's clickable?
Language → Who do you assume reads English?

None of these are "neutral" choices. They include or exclude people.

Introduction to Dark Patterns

Dark Pattern = Design that tricks users into doing things they didn't intend

Common Examples You've Seen:

1. Forced Continuity

<!-- DARK PATTERN: Hidden subscription -->
<button>Start Free Trial</button>
<!-- (Fine print: auto-charges $99/month after 7 days) -->

2. Confirmshaming

<!-- DARK PATTERN: Guilt-trip buttons -->
<button>Yes, I want to save money</button>
<a href="#">No, I prefer paying full price</a>

3. Hidden Costs

Price looks low
Checkout reveals fees, shipping, "convenience charges"
You're already invested, so you pay anyway

4. Roach Motel

Easy to get IN (sign up in 30 seconds!)
Nearly impossible to get OUT (delete account hidden in settings)

Why This Matters for YOUR Site

You will NOT use dark patterns. Ever. Here's why:

Ethics → People deserve respect
Trust → Manipulation destroys relationships
Community → The web should be better than this
Your values → Your site reflects who you are

Visual Rhetoric: Your Design Speaks

Every visual choice communicates something:

Choice	What It Signals
Bright colors, rounded fonts	Friendly, casual, playful
Dark theme, sharp edges	Serious, technical, modern
Lots of white space	Minimal, expensive, exclusive
Dense text, many links	Information-rich, DIY, chaotic
Sans-serif fonts	Contemporary, clean
Serif fonts	Traditional, literary, formal

Question to ask yourself:

What do my design choices communicate?
Who feels welcome on my site?
Who might feel excluded?
Am I copying corporate aesthetics? (Why?)

Today's Ethical Checklist

Look at your site and verify:

☐ Readable text (not too small, good contrast)
☐ Links are obvious (underlined or clearly styled)
☐ No manipulative language (honest, clear communication)
☐ Semantic HTML (helps screen readers)
☐ Fast loading (respects people's time/data)
☐ No tracking (Neocities doesn't track, keep it that way)

Good design = accessible + honest + intentional

Reflection Questions (Discuss or Journal)

What sites do you trust? What makes them trustworthy?
What's a dark pattern you've fallen for? How did it make you feel?
Who is your site FOR? (Be specific)
What do you want people to feel when they visit?
Are your design choices conscious or just copying trends?

This Week's Critical Thinking

As we learn more techniques (typography, layout, JavaScript), keep asking:

Who does this serve?
Who might this exclude?
Is this ethical?
What am I communicating?

Design is power. Use it consciously.

🎯 Today's Exercise

Build This:

Create index.html with:
- Your name as h1
- A short bio paragraph
- A list of 3 interests
- At least one link
Create style.css with:
- A custom background color
- Custom font sizes for headings
- Padding/margin to make it breathable
- Different color for links
Upload to Neocities
Complete the ethical checklist (from Part 8)
Share your URL with the class and answer: "What feeling did you want to create?"

💡 Key Takeaways

Technical

✅ The web is just text files sent from servers to browsers
✅ HTML describes structure and meaning
✅ CSS describes appearance
✅ You can build anything with these tools
✅ Your site is live and you own it
✅ View source is your superpower - use it!

Critical

✅ Design is not neutral - every choice has consequences
✅ Dark patterns manipulate users - we don't do that
✅ Visual rhetoric means your design communicates values
✅ Accessibility and ethics are not optional
✅ You're building the web you want to see

Next Up: Day 2: Visual Language & Cultural Specificity

Questions? Stuck? That's normal. Debugging is learning. Ask for help.