HTML & CSS Refresher

Before diving into React and Next.js, let's refresh the fundamentals: HTML and CSS. Even if you've learned these before, this quick refresher will ensure you're ready for modern web development.

What Are HTML and CSS?

HTML (HyperText Markup Language)

What it is: The structure and content of web pages

Think of it as the skeleton of a website:

Headings, paragraphs, links
Images, videos, forms
The actual content users see

CSS (Cascading Style Sheets)

What it is: The styling and appearance of web pages

Think of it as the clothing of a website:

Colors, fonts, spacing
Layout and positioning
Animations and effects

JavaScript (Bonus)

What it is: The behavior and interactivity

Think of it as the muscles that make things move:

Button clicks, form submissions
Dynamic content updates
Interactive features

Together: HTML + CSS + JavaScript = Modern Web Page

HTML Essentials

Basic Structure

Every HTML page has this structure:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Common HTML Elements

Element	Purpose	Example
`<h1>` to `<h6>`	Headings	`<h1>Main Title</h1>`
`<p>`	Paragraph	`<p>Some text</p>`
`<a>`	Link	`<a href="/about">About</a>`
`<img>`	Image	`<img src="photo.jpg" alt="Photo">`
`<div>`	Container	`<div>Content here</div>`
`<span>`	Inline container	`<span>Inline text</span>`
`<button>`	Button	`<button>Click me</button>`
`<input>`	Form input	`<input type="text">`
`<ul>` / `<li>`	List	`<ul><li>Item</li></ul>`

Semantic HTML

Modern HTML uses meaningful tags:

<!-- Old way -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>

<!-- Better way (semantic) -->
<header>...</header>
<nav>...</nav>
<main>...</main>

Common semantic tags:

<header> - Top of page/section
<nav> - Navigation links
<main> - Main content
<section> - Thematic grouping
<article> - Self-contained content
<footer> - Bottom of page/section

Attributes

HTML elements can have attributes:

<a href="https://example.com" target="_blank">Link</a>
<!-- href and target are attributes -->

<img src="photo.jpg" alt="Description" width="300">
<!-- src, alt, and width are attributes -->

<div class="container" id="main">Content</div>
<!-- class and id are attributes -->

Common attributes:

class - CSS styling hook (can be reused)
id - Unique identifier
href - Link destination
src - Image/resource source
alt - Alternative text for images

CSS Essentials

How CSS Works

CSS selects HTML elements and applies styles:

/* Select all paragraphs and make them blue */
p {
  color: blue;
}

/* Select elements with class="highlight" */
.highlight {
  background-color: yellow;
}

/* Select element with id="main" */
#main {
  width: 80%;
}

CSS Selectors

Selector	Targets	Example
`element`	HTML tag	`p { }`
`.class`	class attribute	`.button { }`
`#id`	id attribute	`#header { }`
`*`	Everything	`* { }`
`element element`	Nested	`div p { }`

Common CSS Properties

Colors and Backgrounds:

.example {
  color: blue;                    /* Text color */
  background-color: #f0f0f0;     /* Background */
  background-image: url(bg.jpg); /* Background image */
}

Text Styling:

.text {
  font-size: 16px;      /* Size */
  font-weight: bold;    /* Weight (bold, normal) */
  font-family: Arial;   /* Font */
  text-align: center;   /* Alignment */
  line-height: 1.5;     /* Space between lines */
}

Spacing:

.box {
  margin: 20px;      /* Space outside element */
  padding: 10px;     /* Space inside element */
  border: 1px solid black; /* Border */
}

Layout:

.container {
  width: 80%;           /* Width */
  height: 400px;        /* Height */
  display: flex;        /* Flexbox layout */
  justify-content: center; /* Center horizontally */
  align-items: center;  /* Center vertically */
}

The Box Model

Every element is a box with:

┌─────────────────────────────┐
│        Margin               │
│  ┌──────────────────────┐   │
│  │     Border           │   │
│  │  ┌───────────────┐   │   │
│  │  │   Padding     │   │   │
│  │  │  ┌────────┐   │   │   │
│  │  │  │Content │   │   │   │
│  │  │  └────────┘   │   │   │
│  │  └───────────────┘   │   │
│  └──────────────────────┘   │
└─────────────────────────────┘

Content: The actual content (text, images)
Padding: Space between content and border
Border: Line around the padding
Margin: Space outside the border

Responsive Design Basics

Make sites work on different screen sizes:

/* Mobile-first approach */
.container {
  width: 100%;  /* Full width on mobile */
}

/* Tablets and up */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* Desktops */
@media (min-width: 1024px) {
  .container {
    width: 960px;
  }
}

How This Relates to React

In React, you write HTML-like code called JSX:

// Looks like HTML, but it's JavaScript!
function WelcomeMessage() {
  return (
    <div className="welcome">
      <h1>Hello!</h1>
      <p>Welcome to our site.</p>
    </div>
  )
}

Key differences from HTML:

class becomes className (because class is a JavaScript keyword)
You can embed JavaScript with {}
Self-closing tags need / at the end: <img />, <input />

How This Relates to Tailwind CSS

Instead of writing custom CSS:

/* Traditional CSS */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

You use utility classes:

<!-- Tailwind CSS -->
<button class="bg-blue-500 text-white px-5 py-2 rounded">
  Click me
</button>

We'll learn Tailwind in detail later. For now, know it's just a different way to write CSS!

Practice: Reading HTML/CSS

Let's look at a simple example:

<div class="card">
  <img src="photo.jpg" alt="Photo" class="card-image">
  <div class="card-content">
    <h2 class="card-title">Title Here</h2>
    <p class="card-description">Description goes here.</p>
    <button class="card-button">Learn More</button>
  </div>
</div>

Reading this:

Outer <div> is a container (card)
Image at the top
Content section with title, description, button
Classes for styling (would be defined in CSS)

Common Patterns You'll See

Container Pattern

<div class="container">
  <div class="content">
    <!-- Page content -->
  </div>
</div>

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Card Pattern

<div class="card">
  <img src="..." alt="...">
  <h3>Card Title</h3>
  <p>Card description.</p>
</div>

Form Pattern

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Submit</button>
</form>

What You Need to Know vs What's Nice to Know

Must Know ✅

Basic HTML elements (div, p, h1-h6, a, img, button)
HTML attributes (class, id, src, href)
Basic CSS properties (color, background, margin, padding)
The concept of selectors (., #, element)

Nice to Know 📚

Semantic HTML
Advanced CSS layouts (Grid, Flexbox)
Animations and transitions
CSS preprocessors (Sass, Less)

For our project, basic knowledge is enough. You'll learn more by seeing it in action!

External Resources

For Complete Beginners

MDN Web Docs - HTML Basics: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

What it is: Mozilla's official HTML tutorial
When to use: If HTML is completely new to you
Time: 30-45 minutes

MDN Web Docs - CSS Basics: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

What it is: Official CSS tutorial
When to use: If CSS is completely new to you
Time: 30-45 minutes

Interactive Learning

freeCodeCamp - Responsive Web Design: https://www.freecodecamp.org/learn/2022/responsive-web-design/

What it is: Interactive HTML/CSS course with hands-on exercises
When to use: If you want structured, project-based learning
Time: 10-15 hours (but you can do it in chunks)

CSS Diner (Game): https://flukeout.github.io/

What it is: Fun game to learn CSS selectors
When to use: To practice CSS selectors in an engaging way
Time: 30 minutes

Reference (Daily Use)

MDN Web Docs: https://developer.mozilla.org/en-US/

What it is: Complete reference for HTML, CSS, JavaScript
When to use: When you need to look up how a specific tag or property works
Bookmark this: You'll use it constantly!

Can I Use: https://caniuse.com/

What it is: Check browser support for HTML/CSS features
When to use: When wondering if a feature works in all browsers

Visual Learning

HTML & CSS Tutorial by Traversy Media: https://www.youtube.com/watch?v=UB1O30fR-EE

What it is: Crash course video covering HTML & CSS basics
When to use: If you prefer video learning
Time: 1 hour

Flexbox Froggy: https://flexboxfroggy.com/

What it is: Game to learn CSS Flexbox layout
When to use: When you encounter Flexbox in our code
Time: 20-30 minutes

Testing Your Knowledge

Can you understand this?

<div class="hero">
  <h1 class="hero-title">Welcome to K12worX</h1>
  <p class="hero-subtitle">Empowering student tutors</p>
  <a href="/get-involved" class="hero-button">Get Started</a>
</div>

Breakdown:

div with class "hero" (container)
h1 heading (main title)
p paragraph (subtitle)
a link styled as a button

If you understand this structure, you're ready to move forward!

Summary

HTML provides structure:

Elements: <div>, <p>, <h1>, <a>, <img>, etc.
Attributes: class, id, href, src, etc.

CSS provides styling:

Selectors: .class, #id, element
Properties: color, background, margin, padding, etc.

In React:

HTML becomes JSX (HTML-like syntax in JavaScript)
CSS can be traditional files or utility classes (Tailwind)

You don't need to be an expert - basic understanding is enough to start contributing!

Next Up

Now that we've refreshed HTML/CSS, let's learn about TypeScript:

What is TypeScript? →