Web elements

Start off the year with a 21-day portfolio challenge

Intermediate
1hr 53min

Start off the year with a 21-day portfolio challenge

Every website starts with content — so be sure to get familiar with the building blocks at your disposal before starting a new project. This course walks through all the elements available in Webflow, pointing out common examples and making suggestions to get the most out of each elements.

A comprehensive look at the building blocks and elements Webflow puts at your fingertips — start designing websites visually, with confidence.

Yes, this course is from the future.

Use this version to clone the completed project
Blank pages without hitting page limits
  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser

Lessons in this course

Element Hierarchy
3:57
Coming soon
Navigator panel
2:45
Coming soon
Section
4:14
Coming soon
Container
2:44
Coming soon
Columns
2:22
Coming soon
Div block
3:37
Coming soon
Advanced button styling
5:43
Coming soon
Link block
1:23
Coming soon
Heading
2:02
Coming soon
Paragraph
4:42
Coming soon
Rich text element overview
3:52
Coming soon
Use text blocks in Webflow
0:56
Coming soon
Add a block quote to your page
0:42
Coming soon
List
2:31
Coming soon
Image
3:39
Coming soon
Image file types
2:22
Coming soon
Image resolution
3:28
Coming soon
Assets panel
3:08
Coming soon
Video
1:20
Coming soon
Add background video
3:15
Coming soon
Lightbox
3:44
Coming soon
Forms
4:55
Coming soon
Style Forms
2:55
Coming soon
Navbar
9:38
Coming soon
Navbar menu button
4:51
Coming soon
Dropdown
4:38
Coming soon
Slider
4:56
Coming soon
Tabs
4:38
Coming soon
Map
2:58
Coming soon
Social media
2:49
Coming soon
Custom code
1:24
Coming soon
Symbols
6:09
Coming soon

The challenge

Challenge
Day
Be a website hero
01
The ultimate navbar
02
Magical CMS layout
03
Formulate leads and science
04
Virtual shoes for your site
05
Hello, it's responsiveness
06
Show off your project pages
07
Project pages working everywhere, anywhere
08
The optimum contact page
09
Show us your contact page
10
Test your Open Graph settings
11
Shine a light
12
Bring your portfolio to life
13

Summary

Every website starts with content — so be sure to get familiar with the building blocks at your disposal before starting a new project. This course walks through all the elements available in Webflow, pointing out common examples and making suggestions to get the most out of each elements.

Use this version to clone the completed project
Blank pages without hitting page limits
Enroll for free

Course outline

Element Hierarchy
3:57
Coming soon
Navigator panel
2:45
Coming soon
Section
4:14
Coming soon
Container
2:44
Coming soon
Columns
2:22
Coming soon
Div block
3:37
Coming soon
Advanced button styling
5:43
Coming soon
Link block
1:23
Coming soon
Text Link
1:16
Coming soon
Heading
2:02
Coming soon
Paragraph
4:42
Coming soon
Rich text element overview
3:52
Coming soon
Use text blocks in Webflow
0:56
Coming soon
Add a block quote to your page
0:42
Coming soon
List
2:31
Coming soon
Image
3:39
Coming soon
Image file types
2:22
Coming soon
Image resolution
3:28
Coming soon
Assets panel
3:08
Coming soon
Video
1:20
Coming soon
Add background video
3:15
Coming soon
Lightbox
3:44
Coming soon
Forms
4:55
Coming soon
Style Forms
2:55
Coming soon
Navbar
9:38
Coming soon
Navbar menu button
4:51
Coming soon
Dropdown
4:38
Coming soon
Slider
4:56
Coming soon
Tabs
4:38
Coming soon
Map
2:58
Coming soon
Social media
2:49
Coming soon
Custom code
1:24
Coming soon
Symbols
6:09
Coming soon

Related courses

Web elements

35
Lessons
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

Section

Transcript
Download assets
Clone this project
Read the full article

Rich text element overview

Transcript
Download assets
Clone this project
Read the full article

Use text blocks in Webflow

Transcript
Download assets
Clone this project
Read the full article

Add a block quote to your page

Transcript
Download assets
Clone this project
Read the full article

Requirements

  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser
Clone this project
Use this version to clone the completed project
Clone this project
Blank pages without hitting page limits

Directed by

McGuire Brannon

Director of Education

Produced by

McGuire Brannon

Director of Education

Written by

McGuire Brannon

Director of Education

https://twitter.com/mcguirebrannon

Article by

Anna Kelian

Learning & Development Coach

Edited by

McGuire Brannon

Director of Education

Designs by

-

Related courses

There's more coming

We're rolling out more lessons very shortly. Sign up to get early access to additional Webflow lessons and courses.

Shoot, something didn't work. Try again later, bud.