Web elements

Start off the year with a 21-day portfolio challenge

Intermediate
1hr 53min

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.

Pause the background video
Webflow is free for students and educators
Learn more & apply

Summary

Course progress

Nice job, we did some time travel into the future and it is looking amazing!

0
%

Completed

0
of
35

Lessons done

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.

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
Lost, but never forgotten
14
Password-protected
15
Practice accessibility
16
Share your design in progress
17
Ready, set, publish!
18
Portfolio verification
19
Update your CMS
20
Showcase your portfolio
21

Ready to get certified?

Once you’ve completed the Webflow Expert Certification Course, you’re all set to take the next step in becoming a Webflow Expert. Please note: passing the Expert exam does not guarantee entry into the Webflow Expert program.

Go to Webflow Experts exams

Course outline

Web elements

35
Lessons

Section

Transcript
Read the full article
Read the full article

Text Link

Add, nest, and style text links.

List

Use the list element to create numbered or bulleted lists of content.

Image

Use the image element to add, edit, and style images in Webflow.

Image file types

Learn about bitmap, GIF, PNG, JPEG, SVG, and WebP.

Image resolution

Discover how image resolution can affect the speed of your website and how you can optimize your images for better user experience.

Assets panel

Upload and manage all your website’s assets in the Webflow Designer.

Video

Use the video element to embed videos hosted on third-party sites like YouTube or Vimeo.

Forms

Transcript
Read the full article
Read the full article

Navbar

Add, customize, and reuse a navbar.

Navbar menu button

Use the navbar menu button to organize menu links on mobile devices.

Dropdown

Use the built-in Webflow dropdown component to add, style, and set up dropdown menus and links.

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

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.