Front-End Web Architecture

Week 3: HTML & CSS Fundamentals

INFO 153A/253A
UC Berkeley School of Information

Part I: Web Architecture Fundamentals

Understanding the Client-Server Model

The Journey of a Web Request

What happens when you type "berkeley.edu" and hit Enter?

1. CLIENT
Your Browser
Chrome, Firefox, Safari

2. DNS
Domain Name System
"Phone book of the internet"

3. SERVER
Web Server
Hosts website files

4. RESPONSE
HTML + Assets
CSS, JS, Images

Key Insight: Every website interaction follows this pattern - Request → Processing → Response → Rendering

HTTP: The Language of the Web

HTTP Fundamentals

Protocol: Rules for communication
Stateless: Each request is independent
Request/Response: Always paired
Status Codes: Communication results

                                Common Status Codes:

                                200 - Success ✅

                                404 - Not Found ❌

                                500 - Server Error ⚠️

Request Methods

                                GET: Retrieve data

                                Visiting a webpage

                                POST: Send data

                                Submitting a form

                                PUT: Update data

                                Editing profile info

                                DELETE: Remove data

                                Deleting a post

Professional Insight: Understanding HTTP is crucial for debugging, API work, and performance optimization. When your web app "isn't working," checking the Network tab reveals the truth.

Modern Web Architecture Patterns

Traditional Web Architecture

Server-Rendered Pages
Client → Server → Full HTML → Client

Examples: Wikipedia, traditional blogs, university websites

Pros: Fast initial load, SEO-friendly
Cons: Page refreshes, less interactive

Modern SPA Architecture

Single Page Applications
Client ← → API (JSON data)

Examples: Gmail, Twitter, Netflix, modern task managers

Pros: Highly interactive, app-like feel
Cons: Complex, requires JavaScript

Course Progression: We'll start with traditional HTML/CSS (Weeks 1-7), then build SPAs with React (Weeks 8-13). Understanding both approaches makes you a versatile developer.

Part II: HTML Foundations Review

Building on Week 2 Prep Work

HTML Document Structure: The Foundation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager - Organize Your Life</title>
    <meta name="description" content="A simple task management app">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Your content here -->
</body>
</html>

Critical Elements:

DOCTYPE html - Tells browser to use HTML5
lang="en" - Accessibility and SEO
charset="UTF-8" - Character encoding (emojis, international text)
viewport - Essential for mobile responsiveness
title and description - SEO and browser tabs

Semantic HTML: Meaning Over Appearance

❌ Non-Semantic Approach

<div class="header">
    <div class="logo">Task Manager</div>
    <div class="menu">
        <div>Home</div>
        <div>About</div>
    </div>
</div>
<div class="main-content">
    <div class="task-card">
        <div class="task-title">Buy groceries</div>
    </div>
</div>

Problems: No meaning, poor accessibility, hard to maintain

✅ Semantic Approach

<header>
    <h1>Task Manager</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
</header>
<main>
    <article class="task-card">
        <h2>Buy groceries</h2>
    </article>
</main>

Benefits: Clear meaning, accessible, SEO-friendly

HTML5 Semantic Elements Hierarchy

Typical Page Structure

<header> - Site branding, main navigation

<nav> - Primary navigation menu

<main> - Primary content area

<section> - Thematic grouping

<article> - Independent content (tasks, blog posts)

<aside> - Sidebar, related content

<footer> - Site info, secondary links

Decision Guide: Use <article> for content that makes sense alone (task items), <section> for thematic groups (completed tasks section), <aside> for supplementary info (task statistics).

Heading Hierarchy: The Content Outline

Logical Structure

<h1>Task Manager Dashboard</h1>

<section>
  <h2>Today's Tasks</h2>
  
  <article>
    <h3>Morning Routine</h3>
    <h4>Exercise</h4>
    <h4>Breakfast</h4>
  </article>
  
  <article>
    <h3>Work Projects</h3>
    <h4>Code Review</h4>
    <h4>Team Meeting</h4>
  </article>
</section>

Why Hierarchy Matters

Accessibility: Screen readers navigate by headings
SEO: Search engines understand content structure
CSS: Easier styling with proper hierarchy
Maintenance: Clear document outline

Rule: Only one <h1> per page. Don't skip levels (h2 → h4). Headings describe content, not appearance.

Forms: Capturing User Input

<form action="/add-task" method="POST">
  <div class="form-group">
    <label for="task-title">Task Title</label>
    <input type="text" id="task-title" name="title" required 
           placeholder="Enter task title...">
  </div>
  
  <div class="form-group">
    <label for="task-priority">Priority</label>
    <select id="task-priority" name="priority">
      <option value="low">Low</option>
      <option value="medium" selected>Medium</option>
      <option value="high">High</option>
    </select>
  </div>
  
  <div class="form-group">
    <label for="task-notes">Notes</label>
    <textarea id="task-notes" name="notes" rows="3"></textarea>
  </div>
  
  <button type="submit">Add Task</button>
</form>

Form Accessibility Essentials:

Labels: Every input needs a <label> with matching for attribute
Input types: Use specific types (email, date, number) for better UX
Required fields: Use required attribute for client-side validation
Placeholders: Hints, not replacements for labels

Lists: Structured Content

Task Lists

<!-- Unordered list for tasks -->
<ul class="task-list">
  <li class="task-item completed">
    <input type="checkbox" checked>
    Buy groceries
  </li>
  <li class="task-item">
    <input type="checkbox">
    Finish assignment
  </li>
</ul>

<!-- Ordered list for steps -->
<ol class="instructions">
  <li>Create task</li>
  <li>Set priority</li>
  <li>Complete task</li>
</ol>

Navigation Lists

<nav>
  <ul class="main-menu">
    <li><a href="/" aria-current="page">
        Dashboard</a></li>
    <li><a href="/completed">
        Completed</a></li>
    <li><a href="/settings">
        Settings</a></li>
  </ul>
</nav>

When to use:
• <ul> - Order doesn't matter
• <ol> - Order is important
• <dl> - Key-value pairs

Links and Navigation Patterns

<!-- External links -->
<a href="https://github.com/username/task-manager" 
   target="_blank" rel="noopener noreferrer">
   View on GitHub
</a>

<!-- Internal navigation -->
<a href="/dashboard" aria-current="page">Dashboard</a>
<a href="/profile">My Profile</a>

<!-- Skip links for accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Download links -->
<a href="/tasks.csv" download="my-tasks.csv">
   Export Tasks
</a>

<!-- Email and phone -->
<a href="mailto:support@taskmanager.com">Contact Support</a>
<a href="tel:+1234567890">Call us</a>

Link Best Practices:

Descriptive text: "Download task list" not "click here"
External links: Always use rel="noopener noreferrer"
Current page: Use aria-current="page"
Focus styles: Ensure links are keyboard accessible

Part III: CSS Fundamentals

From Structure to Style

CSS Integration Methods

❌ Inline Styles

<div style="color: red; 
           font-size: 18px; 
           margin: 10px;">
  Task
</div>

Avoid: Hard to maintain, no reusability

⚠️ Internal Styles

<head>
  <style>
    .task {
      color: red;
      font-size: 18px;
      margin: 10px;
    }
  </style>
</head>

Use for: Single-page prototypes only

✅ External Stylesheets

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

/* styles.css */
.task {
  color: red;
  font-size: 18px;
  margin: 10px;
}

Best: Maintainable, cacheable, reusable

Professional Standard: Always use external stylesheets in real projects. Separation of concerns: HTML for structure, CSS for presentation, JS for behavior.

CSS Selectors: Targeting Elements

Basic Selectors

/* Element selector */
h1 {
  color: #003262;
  font-size: 2rem;
}

/* Class selector */
.task-item {
  padding: 1rem;
  border: 1px solid #ddd;
}

/* ID selector */
#main-header {
  background: #FDB515;
}

/* Universal selector */
* {
  box-sizing: border-box;
}

Advanced Selectors

/* Descendant selector */
.task-list li {
  margin-bottom: 0.5rem;
}

/* Child selector */
nav > ul {
  list-style: none;
}

/* Pseudo-classes */
.task-item:hover {
  background: #f5f5f5;
}

.task-item:nth-child(odd) {
  background: #fafafa;
}

/* Attribute selector */
input[type="checkbox"] {
  margin-right: 0.5rem;
}

Naming Convention: Use meaningful class names (.task-completed, not .red-text). Classes for styling, IDs for JavaScript hooks.

CSS Specificity: The Cascade Rules

Specificity Hierarchy (Higher wins)

1000
Inline Styles
style="..."

100
IDs
#header

10
Classes
.task-item

1
Elements
h1, div

Specificity Examples

/* Specificity: 1 */
h1 { color: black; }

/* Specificity: 10 */
.title { color: blue; }

/* Specificity: 11 (10 + 1) */
.title h1 { color: red; }

/* Specificity: 100 */
#main-title { color: green; }

/* Winner: green (highest specificity) */

The CSS Box Model: Everything is a Box

CONTENT
Text, images, etc.

PADDING - Space inside border

BORDER - Visible boundary

MARGIN - Space outside border

.task-card {
  /* Content area */
  width: 300px;
  height: 150px;
  
  /* Padding - space inside */
  padding: 1rem;
  
  /* Border - visible edge */
  border: 2px solid #ddd;
  
  /* Margin - space outside */
  margin: 1rem 0;
}

Box-sizing: Use box-sizing: border-box to include padding and border in width calculation. Set this on all elements with * { box-sizing: border-box; }

Typography: Making Text Beautiful

Font Fundamentals

/* Font stack with fallbacks */
body {
  font-family: 'Inter', 'Segoe UI', 
               Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* Headings */
h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

/* Emphasis */
.task-priority-high {
  font-weight: bold;
  color: #d32f2f;
}

Text Properties

/* Text alignment */
.task-header {
  text-align: center;
}

/* Text decoration */
.completed-task {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Text transformation */
.task-status {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

/* White space handling */
.task-description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Typography Scale: Establish a consistent size hierarchy. Base font size (16px) → headings (1.25rem, 1.5rem, 2rem) → small text (0.875rem).

Colors and Backgrounds

Color Systems

/* CSS Custom Properties (Variables) */
:root {
  --primary: #003262;
  --secondary: #FDB515;
  --success: #4caf50;
  --warning: #ff9800;
  --danger: #f44336;
  --text: #333;
  --text-muted: #666;
  --background: #fafafa;
  --border: #e0e0e0;
}

.task-card {
  background: white;
  color: var(--text);
  border: 1px solid var(--border);
}

.task-priority-high {
  background: var(--danger);
  color: white;
}

Background Patterns

/* Solid backgrounds */
.header {
  background-color: var(--primary);
}

/* Gradients */
.task-card-premium {
  background: linear-gradient(
    135deg, 
    #667eea 0%, 
    #764ba2 100%
  );
}

/* Images */
.dashboard {
  background-image: url('pattern.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Multiple backgrounds */
.hero {
  background: 
    url('logo.png') no-repeat center,
    var(--primary);
}

Accessibility: Ensure sufficient contrast (4.5:1 for normal text, 3:1 for large text). Use tools like WebAIM Color Contrast Checker.

Layout Fundamentals: Display and Positioning

/* Block vs Inline */
.task-item {
  display: block;        /* Full width, stacks vertically */
}

.task-tag {
  display: inline-block;  /* Flows inline but accepts width/height */
  padding: 0.25rem 0.5rem;
  margin: 0.25rem;
}

/* Hiding elements */
.hidden-mobile {
  display: none;         /* Completely removes from layout */
}

.transparent {
  visibility: hidden;    /* Invisible but takes up space */
}

/* Position property */
.sticky-header {
  position: sticky;      /* Sticks when scrolling */
  top: 0;
  z-index: 100;
}

.floating-action {
  position: fixed;       /* Fixed to viewport */
  bottom: 2rem;
  right: 2rem;
}

Layout Strategy: Start with normal document flow, then enhance with positioning. Fixed/absolute positioning removes elements from flow - use sparingly.

Responsive Design Basics

/* Mobile-first approach */
.task-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .task-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .task-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Flexible images */
img {
  max-width: 100%;
  height: auto;
}

Mobile-First: Design for smallest screen first, then enhance for larger screens. Easier to add features than remove them.

CSS Organization and Best Practices

File Organization

/* Reset and base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui;
  line-height: 1.6;
  color: var(--text);
}

/* Component styles */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn--primary {
  background: var(--primary);
  color: white;
}

.btn--primary:hover {
  background: var(--primary-dark);
}

Naming Conventions

/* BEM Methodology */
.card { }                    /* Block */
.card__header { }            /* Element */
.card__body { }              /* Element */
.card__footer { }            /* Element */
.card--featured { }          /* Modifier */
.card--large { }             /* Modifier */

/* Practical example */
.task-item { }               /* Block */
.task-item__title { }        /* Element */
.task-item__description { }  /* Element */
.task-item__actions { }      /* Element */
.task-item--completed { }    /* Modifier */
.task-item--priority-high { }/* Modifier */

/* Utility classes */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.25rem; }
.hidden { display: none; }

CSS Architecture: Organize CSS in logical sections: Variables → Reset → Base → Components → Utilities. Comment generously and use consistent naming.

Putting It All Together: Task Card Example

HTML Structure

<article class="task-card task-card--priority-high">
  <header class="task-card__header">
    <h3 class="task-card__title">Complete Assignment 1</h3>
    <span class="task-card__priority">High</span>
  </header>
  
  <div class="task-card__body">
    <p class="task-card__description">
      Build a task manager with HTML and CSS
    </p>
    <div class="task-card__meta">
      <time class="task-card__due-date">Due: Sep 15</time>
      <span class="task-card__category">School</span>
    </div>
  </div>
  
  <footer class="task-card__actions">
    <button class="btn btn--sm btn--outline">Edit</button>
    <button class="btn btn--sm btn--success">Complete</button>
  </footer>
</article>

CSS Implementation

.task-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.task-card--priority-high {
  border-left: 4px solid var(--danger);
}

.task-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1rem 0.5rem;
}

.task-card__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.task-card__priority {
  background: var(--danger);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

Next Steps: Hour 2 Project

Personal Profile Page with Contact Form

Just-in-Time Learning Approach

Setup
HTML structure
Semantic elements

Forms
Contact form
Form elements

Styling
CSS application
Box model practice

Polish
Debugging
Refinement

Learning Outcomes: Students will apply HTML semantic structure, create accessible forms, implement CSS box model, and debug styling issues - all essential skills for Assignment 1.

Recap: Key Takeaways

Web Architecture

Client-server model
HTTP request/response
Modern web patterns

HTML Foundations

Semantic structure
Accessibility first
Forms and navigation

CSS Fundamentals

Box model mastery
Selector strategies
Responsive approach