Learning Path

Webflow design basics

Webflow design basics

Learn to design and build professional Webflow sites.

Ready to start building pro sites in Webflow? Whether you're working on a personal project, a client website, or a large-scale business site, this learning path will equip you with all the essential skills you need to design and build a site — from planning to publishing.

Who it's for

This learning path is designed for website builders — anyone responsible for designing, structuring, and optimizing web content.

At a glance

Duration

1h 5m

Role(s)

Designers

Developers

Marketers

Topics

Site build

Getting started

HTML

CSS

Skills

Planning

Publishing

Design and build

Layout & styling

Assessment

Test your knowledge

Learning path

Design systems in Webflow

Learn how to create a design system in Webflow for consistent and scalable site building.

19m

Build & structure your site

Learn how to add different types of HTML elements to structure pages on your site.

30m

Lay out & style your site

Learn how to lay out and visually style pages to fit your look and brand.

49m

CSS grid in Webflow

An overview of CSS grid. Use the grid layout in Webflow to get more control over your designs and create powerful, responsive layouts — faster.

39m

Measure your expertise

ASSESSMENT

Test your knowledge: Webflow design basics

Challenge yourself with questions on the Webflow platform, roles and permissions.

lightbulb icon on floating chip

CERTIFICATION

Webflow Practitioner

Designed for beginners, this certification validates your understanding of Webflow’s key features.

Good to know

Site Plan

Your Workspace and site plans determine which Webflow features you can access. Your view may look a little different from ours, at times. Explore Webflow plans & pricing to learn more.

Workspace role

Your role within your Workspace or site also affects what you can see and do. Review Workspace roles and permissions for more information.

Preparing to get certified?

This course is designed to help you build the knowledge and skills to succeed on the Webflow Practitioner Certification exam. For details about the exam, including eligibility, format, and registration, visit the Certification Exam page.

Find your way

Learn how to navigate Webflow University lessons and courses, including how to mark items complete.

Continue learning

Accessibility on the web

Learn about accessibility on the web and how to create inclusive and accessible sites without writing code.

Design systems in Webflow

Learn how to create a design system in Webflow for consistent and scalable site building.

Figma to Webflow

Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.

Full site build

Learn how to design and develop a CMS-driven website built around the needs of your client and their audience — and execute a successful launch.

Getting started with Webflow Enterprise

Get familiar with Webflow’s website experience platform and Enterprise features.

Ultimate web design course

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

Moving your business online

A free course on how to take your business online. Serve more clients and generate more revenue in this new environment.

Freelance web design boot camp

The Freelancer’s Journey is a free, comprehensive course to help you build a successful, fulfilling freelance career in web design.

Build & structure your site

Learn how to add different types of HTML elements to structure pages on your site.

Lay out & style your site

Learn how to lay out and visually style pages to fit your look and brand.

Getting started with Webflow

Get familiar with Webflow’s website experience platform.

Welcome to Optimize

Learn how to use Webflow Optimize to improve your site's conversion rate using testing, personalization, and the power of AI.

Client's guide to the Editor

This is the Client's guide to the Webflow Editor. Share these lessons to get your clients up and running.

21-day design portfolio course

Build and visually design a full portfolio website within the span of 21 days.

Welcome to Webflow

Discover what Webflow offers, how it works behind-the-scenes, and tips and tricks for starting your learning journey.

CSS grid in Webflow

An overview of CSS grid. Use the grid layout in Webflow to get more control over your designs and create powerful, responsive layouts — faster.

Optimize, quality-check, & publish

Learn how to review, optimize, and confidently publish your site using Webflow’s built-in tools and best practices.

Webflow Ecommerce

Learn how to build and design your Webflow Ecommerce store. Customize every detail and launch a fully functional online store — without writing code.

Webflow 101

Introducing Webflow 101, the ultimate course to learn the fundamentals of web design and development.

Localize your site in Webflow

Learn how to localize a site for different languages and regions. Translate text, customize and manage content, and optimize SEO settings, so your site reaches a wider audience.

CSS layout & positioning

Dig into the world of HTML and CSS layouts — learn how they work together and get an overview of display properties like inline block and flexbox.

Interactions & animations course

Learn how to animate multiple elements managed on a single timeline — bring your designs to life with rich, sequenced interactions and animations.

Web animations with After Effects & Lottie

Create animations in Adobe After Effects — the industry standard for motion graphics. Embed and animate them in your Webflow site.

Design & manage CMS content in Webflow

Learn how to create, manage, and style dynamic content and collections on your site using Webflow’s CMS.