🍎
Introduction to Web Development
  • Introduction To Web Development
  • Tools
    • Notes: Web Development Process
    • Notes: Replit
    • Notes: GitHub
    • Notes: Replit + GitHub Integration
    • GitHub Pages Hosting
  • Week 1: HTML
    • Notes: HTML
    • Notes: Working With Images
    • Project: Hello World
    • Project: Subject of Interest
  • Week 2: CSS
    • Notes: CSS
    • Using CSS for Layout
      • Notes: Box Model
      • Notes: Flexbox
      • Notes: Responsive Layout
    • Project: Styling Subject of Interest
    • Project: Image Gallery
  • Week 3: JavaScript and HTML Forms
    • Notes: JavaScript
    • Notes: Processing HTML Forms with JavaScript
    • Project: Dynamic Style Change
    • Project: Mad Libs
  • Week 4: Web Site Using Bootstrap
    • Notes: Anatomy of a URL
    • Notes: Content
    • Notes: Bootstrap
    • Notes: Overriding Bootstrap
    • Notes: Favicons
    • Notes: License
    • StartBootstrap Templates
    • Project: Bootstrap Website
  • Wrap Up
  • Videos
Powered by GitBook
On this page
  • Common Layout
  • Layout for Image Gallery
  • Layout With No Styling
  • Centered Layout
  1. Week 2: CSS

Using CSS for Layout

PreviousNotes: CSSNextNotes: Box Model

Last updated 10 months ago

CSS styling allows us to set colors and fonts. It's also used to lay out a page. Web page layout is about placing elements in relative locations. Look at these images to see schematics of different page layouts.

These different layouts help us understand what "layout" means. It's all about the positioning of elements on a web page.

We'll work on the centered and image gallery layouts in projects this week.

Before we add CSS for these layouts, we'll look at two broad techniques for controlling how elements are positioned on a page relative to each other: the Box Model and the Flexbox Model.

Common Layout

Layout for Image Gallery

Layout With No Styling

Centered Layout

Common Layout
No added Style
Centered Layout