Ultimate web design course

Start off the year with a 21-day portfolio challenge

Beginner - Intermediate
5hr

The Ultimate web design course includes over 100 videos. It starts with everything you need to know to get started with Webflow and eases into more advanced design concepts. You'll learn the basics of HTML, how CSS classes and subclasses function, how to construct a page design with elements like containers, divs, flexboxes, and grids. And of course, we'll take you through how to use one of our most powerful features — Webflow CMS. By the time you finish this course, you'll be able to build some pretty amazing stuff.

From the fundamentals to advanced topics — learn how to build sites in Webflow and become the designer you always wanted to be.

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
118

Lessons done

The Ultimate web design course includes over 100 videos. It starts with everything you need to know to get started with Webflow and eases into more advanced design concepts. You'll learn the basics of HTML, how CSS classes and subclasses function, how to construct a page design with elements like containers, divs, flexboxes, and grids. And of course, we'll take you through how to use one of our most powerful features — Webflow CMS. By the time you finish this course, you'll be able to build some pretty amazing stuff.

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

Getting started
Web structure
Elements
Buttons & links
Typography
Media
Components
Styling basics
Layout basics
Flexbox & grid
Advanced layout
Styling typography
Background & border styles
3D styles
Effects
Responsive design
Interactions core concepts
CMS & dynamic content
CMS Collection fields
Advanced dynamic content
SEO

Ultimate web design course

118
Lessons
Getting started
Getting started
Web structure
Web structure
Elements
Elements
Buttons & links
Buttons & links
Typography
Typography
Media
Media
Components
Components
Styling basics
Styling basics
Layout basics
Layout basics
Flexbox & grid
Flexbox & grid
Advanced layout
Advanced layout
Styling typography
Styling typography
Background & border styles
Background & border styles
3D styles
3D styles
Effects
Effects
Responsive design
Responsive design
Interactions core concepts
Interactions core concepts
CMS & dynamic content
CMS & dynamic content
CMS Collection fields
CMS Collection fields
Advanced dynamic content
Advanced dynamic content
SEO
SEO

Navbar menu button

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

Text Link

Add, nest, and style text links.

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.

Dynamically insert videos

The video field is a CMS field used in Collections. It allows you to add videos via a link from third-party online video hosts Vimeo and YouTube.

Transcript
Read the full article
Read the full article

Forms

Transcript
Read the full article
Read the full article

Navbar

Add, customize, and reuse a navbar.

Style panel overview

Transcript
Read the full article
Read the full article

HTML tags

In Webflow, HTML tags give us an easy way to control the default styling for a particular element, without creating a unique class. For example, you can define the default styles for all paragraphs by editing the All Paragraphs tag. Adding a class with styles will override these default styles.

Transcript
Read the full article
Read the full article

Text style inheritance overview

In Webflow, as in code, elements pass their typographic style information down to their children. You can set text styles on parent elements, these styles will cascade down, and you can override these styles on their child elements.

It’s common to use this technique to set global font styles on the Body tag, to align text and other elements inside of sections, and to override default link block styles. In this article, we’ll cover three examples of how text style cascading works:

  1. From the body tag
  2. ‍From Webflow's section element
  3. ‍From Webflow's link block
Transcript
Read the full article
Read the full article

Style Manager

Use the Style Manager to rename, clean up, and search for classes and tags.

Transcript
Read the full article
Read the full article

States

To add some interactivity to your elements in Webflow, you can change the way they look and behave using states. As you're styling an element, clicking the States menu lets you toggle between the various states, like Hover and Pressed, you can access and style.

In this video, we'll explain the four states you can style for any element:

  1. None
  2. ‍Hover
  3. ‍Pressed
  4. ‍Focused
  5. Focused (keyboard)

Then show you how to style those states to indicate interactivity. Then we'll dig into applying transitions to smooth out the change from one state to another, and finally, discuss the "current" state, which is a handy indicator for navigational links.

Transcript
Read the full article
Read the full article

Spacing

In the Style panel, you can define the spacing (margin and padding) for each element. In this article, we’ll cover what each of these layout controls is and how they’ll affect your elements. These properties make it possible to create responsive websites with content that reflows while creating consistent spacing.

Transcript
Read the full article
Read the full article

Position

The position settings in the Style panel allow you to set the relative positioning of elements, the float settings, and the clear settings.

Flexbox

Flexbox, also known as flex or flexible box layout, allows you to control the alignment of elements in a box in any way you’d like — solving complex layout problems that designers have been struggling with for years.

Grid

The grid layout in Webflow brings CSS grid to life on a completely visual canvas, giving you more direct control over your layout and design. With grid, you can reposition and resize items anywhere within the grid you define to produce powerful, responsive layouts — faster.

Transcript
Read the full article
Read the full article

Apply a z-index value

In this lesson:

  1. What is a z-index value?
  2. Use a z-index value to stack elements
Transcript
Read the full article
Read the full article

Typography

Format your text with search engines and accessibility in mind.

Backgrounds

Setting the background on an element gives you control over appearance and legibility. In the Backgrounds section of the Style panel, you can add a background image, gradient, or color to most elements (except media elements like video and image).

3D movement & parallax

In this article we’ll cover some fundamental 3D concepts on the web. Check out the 2D & 3D transforms guide to learn how to put these concepts into practice on your Webflow project.

Breakpoints

Customize your designs for small and large screens using Webflow's 7 built-in responsive breakpoints.

Intro to Interactions

Use interactions to make your site more dynamic and engaging.

Intro to dynamic content

An explanation of static and dynamic content.

Transcript
Read the full article
Read the full article

Intro to Webflow CMS

A CMS (content management system) is a tool for managing and publishing dynamic content. The website references that dynamic content on different pages. So anytime you or your client creates or changes content in the CMS, it updates all the pages where it’s referenced, instantly.

The Webflow CMS gives you full control over your content structure and how this content is designed throughout your project — all without you even touching a line of code.

In this video, we'll introduce some basic concepts behind the CMS, including:

  1. ‍Structuring content
  2. ‍Referencing content
  3. ‍Editing content
Transcript
Read the full article
Read the full article

Import collection items

Use a CSV file to import thousands of Collection items or just a select few into your Webflow site in one go.

Transcript
Read the full article
Read the full article

Modify a collection

Once you’ve created a Collection, you can go back and edit collection items, fields, and other settings—even after the project has been published.

Transcript
Read the full article
Read the full article

Intro to the CMS Editor

The Webflow Editor makes editing the website, and publishing new content, really easy for your client or your team. The Webflow Designer is a powerful tool for building websites, and the Webflow Editor is a simplified interface that’s focused on editing website content. You can edit content right on the page, or in the panels below the page.

Transcript
Read the full article
Read the full article

Plain text field overview

The plain text field is a CMS field you can use in your Collections. This field is best used for basic textual content that doesn't need special formatting like headings, inline styles, or inline media like images or video. In this video, we'll explain how to add and use plain text fields in your Webflow CMS Collections.

Transcript
Read the full article
Read the full article

Rich text field

The rich text field is a CMS field used in Collections. Us it to give collaborators all the text formatting options they expect from a writing tool, including bold, italics, inline images, links, and more. In this video, we'll explain how to add and use rich text fields in your Webflow CMS Collections.

Transcript
Read the full article
Read the full article

Image field

The image field is a CMS field used in Collections that allows you and your collaborators to upload an image to your Collection items and use it in your designs. In this video, we'll show you how to use the image field.

Transcript
Read the full article
Read the full article

Link field

The link field is a CMS field used in Collections to dynamically add links to your designs.

Transcript
Read the full article
Read the full article

Number field overview

The number field is a CMS field used in Collections, handy for displaying numeric values like statistics, prices, page counts, file sizes, and more.

Transcript
Read the full article
Read the full article

Switch field

The switch field is a CMS field used in Collections, usually as a filtering tool. Like any toggle, it has two values: Yes or No. Collaborators can toggle a switch on or off to specify, for example, if a blog post “is featured.”

Transcript
Read the full article
Read the full article

Option field overview

The option field is a CMS field used in Collections. It gives collaborators a list of predefined values to choose from.

Transcript
Read the full article
Read the full article

Reference field

The Reference field is a Collection field that you can add to any of your Collections. This powerful field allows you to link to an item in a different Collection. You can then use the referenced item’s content in Collection Lists and Collection Pages. In this video, we'll discuss some common uses of the Reference field, then show you how to make the most of it in your designs. To reference multiple items from a different Collection, use the Multi-reference field.

Transcript
Read the full article
Read the full article

Multi-reference field

A multi-reference field is just like a reference field, except it allows you to reference more than one item. This is great for tagging systems, related content, and other instances where you want to connect one item to many others. In this video, we'll show you how to use this powerful field in your CMS-driven websites.

Transcript
Read the full article
Read the full article

Dynamic content limitations

The CMS provides a set of limits around the number of dynamic content we can add on a per-page basis. These limits improve and maintain fast loading speeds of our projects and prevent slow-loading projects from being created.


Advanced CMS filtering

In this lesson, we'll update our projects CMS Collection by adding a new client project and we'll filter our CMS layouts for a more advanced and curated showcase.

Nest Collection lists

Transcript
Read the full article
Read the full article

301 redirects

301 redirects allow you to permanently route traffic from an old to a new URL and avoid the dreaded 404.

Transcript
Read the full article
Read the full article

Google site verification

Verifying your site with Google is a key early step in your SEO efforts as it allows you to verify ownership of a website, so you can use the Google Search Console tools like indexing. In this video, we'll show you how to quickly verify your site with Google.

Transcript
Read the full article
Read the full article

Google Analytics

Google Analytics gives you valuable information about user behavior on and interaction with your website. It includes powerful metrics like how many users and pageviews a site is getting, where your traffic is coming from, how long people stay on the site, and how many of them are leaving the page without clicking other links (bounce rate).

This helps many businesses figure out where to invest marketing dollars and measure the effectiveness of marketing campaigns.

In this video, we'll show you how to set up Google Analytics for your Webflow sites so you can take advantage of these powerful tools.

Transcript
Read the full article
Read the full article

Paid vs. organic search

For the vast majority of search engines, search engine results pages feature two different forms of results:

  1. Paid search results, or ads
  2. Organic search results, which are ranked by relevance and, to an extent, reputability

In this video, we'll go into more detail on the difference, and how the two types can impact your marketing efforts.

Transcript
Read the full article
Read the full article

Requirements

  • Free (or premium) 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.