Intro to web design course

Learn the basics of web design, including the box model, positioning, color theory, typography and more. If you're new to web design, start here.

Start the course

Start the course

Try Webflow — it's free

Intro to web design course

Learn the basics of web design, including the box model, positioning, color theory, typography and more. If you're new to web design, start here.

Intro to web design course

Learn the basics of web design, including the box model, positioning, color theory, typography and more. If you're new to web design, start here.

Enroll for free

Start the course

Try Webflow — it's free

About this course

Looking to jump into web design but don't know where to start? This course is a great first step, covering the basics of colors and web layout principles, along with an introductory look at content management systems (CMS) and search engine optimization (SEO) best practices.

Clone this project Download project assets

Requirements

An interest in web design
A computer

Course outline

Web Structure

Web Structure

Coming soon

New

Web Structure

Coming soon!

Intro to HTML & CSS

Intro to HTML & CSS

Coming soon

New

3:38

Intro to HTML & CSS

Coming soon!

3:38

HTML Structure

HTML Structure

Coming soon

New

1:55

HTML Structure

Coming soon!

1:55

The Box Model

The Box Model

Coming soon

New

1:54

The Box Model

Coming soon!

1:54

Responsive Design

Responsive Design

Coming soon

New

Responsive Design

Coming soon!

Intro to Responsive Design

Intro to Responsive Design

Coming soon

New

2:21

Intro to Responsive Design

Coming soon!

2:21

CSS Layout

CSS Layout

Coming soon

New

CSS Layout

Coming soon!

Intro to Web Layout

Intro to Web Layout

Coming soon

New

2:27

Intro to Web Layout

Coming soon!

2:27

Intro to Flexbox

Intro to Flexbox

Coming soon

New

2:27

Intro to Flexbox

Coming soon!

2:27

Grid layouts overview

Grid layouts overview

Coming soon

New

4:18

Grid layouts overview

Coming soon!

4:18

Width & Height Units

Width & Height Units

Coming soon

New

3:59

Width & Height Units

Coming soon!

3:59

Positioning Overview

Positioning Overview

Coming soon

New

1:48

Positioning Overview

Coming soon!

1:48

Intro to 3D

Intro to 3D

Coming soon

New

2:25

Intro to 3D

Coming soon!

2:25

Images & Colors

Images & Colors

Coming soon

New

Images & Colors

Coming soon!

Image Resolution

Image Resolution

Coming soon

New

3:28

Image Resolution

Coming soon!

3:28

Image File Types (GIF, PNG, SVG, JPEG)

Image File Types (GIF, PNG, SVG, JPEG)

Coming soon

New

2:22

Image File Types (GIF, PNG, SVG, JPEG)

Coming soon!

2:22

Color values (HEX, RGBA, color names)

Color values (HEX, RGBA, color names)

Coming soon

New

3:22

Color values (HEX, RGBA, color names)

Coming soon!

3:22

Dynamic Content

Dynamic Content

Coming soon

New

Dynamic Content

Coming soon!

Intro to Dynamic Content

Intro to Dynamic Content

Coming soon

New

1:36

Intro to Dynamic Content

Coming soon!

1:36

SEO

SEO

Coming soon

New

SEO

Coming soon!

Intro to Paid vs. Organic Search

Intro to Paid vs. Organic Search

Coming soon

New

1:34

Intro to Paid vs. Organic Search

Coming soon!

1:34

Intro to 301 Redirects

Intro to 301 Redirects

Coming soon

New

2:39

Intro to 301 Redirects

Coming soon!

2:39

More courses

Webflow 101 crash course

The Freelancer’s Journey

Moving your business online

After Effects & Lottie in Webflow

Grid 2.0

Webflow Ecommerce

Client's Editor guide

Creating a custom portfolio

Building a business website

Ultimate web design course

Web elements

CSS styling

CSS layout and positioning

Interactions and animations

CMS and dynamic content

SEO fundamentals

Requirements

An interest in web design
A computer

Get started

WEB STRUCTURE (Intro)

Download assets

Open in Webflow

Intro to HTML & CSS (Intro)

Intro to HTML & CSS

Download assets

Open in Webflow

HTML Structure (Intro)

Download assets

Open in Webflow

Lottie inspirations

The Box Model (Intro)

The Box Model (Intro)

Download assets

Open in Webflow

RESPONSIVE DESIGN (Intro)

RESPONSIVE DESIGN (Intro)

Download assets

Open in Webflow

Intro to Responsive Design (Intro)

Intro to Responsive Design (Intro)

Download assets

Open in Webflow

CSS LAYOUT (Intro)

CSS LAYOUT (Intro)

Download assets

Open in Webflow

Intro to Web Layout (Intro)

Intro to Web Layout (Intro)

Download assets

Open in Webflow

Intro to Flexbox (Intro)

Intro to Flexbox (Intro)

Download assets

Open in Webflow

Grid basics (Intro)

Grid basics (Intro)

Download assets

Open in Webflow

Width & Height Units (Intro)

Width & Height Units (Intro)

Download assets

Open in Webflow

Positioning Overview (Intro)

Positioning Overview (Intro)

Download assets

Open in Webflow

Intro to 3D (Intro)

Intro to 3D (Intro)

Download assets

Open in Webflow

IMAGES & COLORS (Intro)

IMAGES & COLORS (Intro)

Download assets

Open in Webflow

Image Resolution (Intro)

Image Resolution (Intro)

Download assets

Open in Webflow

Image File Types (gif, png, svg, jpeg) (Intro)

Image File Types (gif, png, svg, jpeg) (Intro)

Download assets

Open in Webflow

Color values (hex, rgba, color names) (Intro)

Color values (hex, rgba, color names) (Intro)

Download assets

Open in Webflow

DYNAMIC CONTENT (Intro)

DYNAMIC CONTENT (Intro)

Download assets

Open in Webflow

Intro to Dynamic Content (Intro)

Intro to Dynamic Content (Intro)

Download assets

Open in Webflow

SEO (Intro)

Download assets

Open in Webflow

Intro to Paid vs. Organic Search (Intro)

Intro to Paid vs. Organic Search (Intro)

Download assets

Open in Webflow

Intro to 301 Redirects (Intro)

Intro to 301 Redirects (Intro)

Download assets

Open in Webflow

Get started

WEB STRUCTURE (Intro)

Download assets

Open in Webflow

Intro to HTML & CSS (Intro)

Intro to HTML & CSS

Download assets

Open in Webflow

HTML Structure (Intro)

Download assets

Open in Webflow

Lottie inspirations

The Box Model (Intro)

The Box Model (Intro)

Download assets

Open in Webflow

RESPONSIVE DESIGN (Intro)

RESPONSIVE DESIGN (Intro)

Download assets

Open in Webflow

Intro to Responsive Design (Intro)

Intro to Responsive Design (Intro)

Download assets

Open in Webflow

CSS LAYOUT (Intro)

CSS LAYOUT (Intro)

Download assets

Open in Webflow

Intro to Web Layout (Intro)

Intro to Web Layout (Intro)

Download assets

Open in Webflow

Intro to Flexbox (Intro)

Intro to Flexbox (Intro)

Download assets

Open in Webflow

Grid basics (Intro)

Grid basics (Intro)

Download assets

Open in Webflow

Width & Height Units (Intro)

Width & Height Units (Intro)

Download assets

Open in Webflow

Positioning Overview (Intro)

Positioning Overview (Intro)

Download assets

Open in Webflow

Intro to 3D (Intro)

Intro to 3D (Intro)

Download assets

Open in Webflow

IMAGES & COLORS (Intro)

IMAGES & COLORS (Intro)

Download assets

Open in Webflow

Image Resolution (Intro)

Image Resolution (Intro)

Download assets

Open in Webflow

Image File Types (gif, png, svg, jpeg) (Intro)

Image File Types (gif, png, svg, jpeg) (Intro)

Download assets

Open in Webflow

Color values (hex, rgba, color names) (Intro)

Color values (hex, rgba, color names) (Intro)

Download assets

Open in Webflow

DYNAMIC CONTENT (Intro)

DYNAMIC CONTENT (Intro)

Download assets

Open in Webflow

Intro to Dynamic Content (Intro)

Intro to Dynamic Content (Intro)

Download assets

Open in Webflow

SEO (Intro)

Download assets

Open in Webflow

Intro to Paid vs. Organic Search (Intro)

Intro to Paid vs. Organic Search (Intro)

Download assets

Open in Webflow

Intro to 301 Redirects (Intro)

Intro to 301 Redirects (Intro)

Download assets

Open in Webflow

More courses

Webflow 101 crash course

The Freelancer’s Journey

Moving your business online

After Effects & Lottie in Webflow

Grid 2.0

Webflow Ecommerce

Client's Editor guide

Creating a custom portfolio

Building a business website

Ultimate web design course

Web elements

CSS styling

CSS layout and positioning

Interactions and animations

CMS and dynamic content

SEO fundamentals

Community Forum

Share your creations and get help from our active community.

Contact Support

We're available Monday–Friday, 6 a.m.–6 p.m. PT.