Webflow is a design tool that can build production-ready experiences without code. You can implement CSS-driven adaptive layouts, build complex interactions and deploy all in one tool. Webflow also comes with a built-in content management system (CMS) and Ecommerce for creating a purchase experience without the need of third-party tools.

Design and animate a high converting landing page with advanced interactions, payments and CMS

Webflow is a design tool that can build production-ready experiences without code. You can implement CSS-driven adaptive layouts, build complex interactions and deploy all in one tool. Webflow also comes with a built-in content management system (CMS) and Ecommerce for creating a purchase experience without the need of third-party tools.

About this Course

In this free course, I’m teaching you how to implement and deploy a real site for Angle from scratch without a single line of code. It’s going to be a fully functional site with multiple pages, advanced interactions, dynamic data, payments and animated assets from Shape.

Getting Started with Webflow - Building your first app without code with Webflow

First, it's important to understand how Webflow fundamentally works and how to start your very first project using templates, in this case, starting from scratch.

Flex, Grid and Adaptive Layout - Working with adaptive CSS layout techniques without code

Everything you build in Webflow is based on CSS techniques that have matured over the past decades. There are 3 key techniques to building any layout can can dream of: Flex, Grid and the good old Absolute positioning. All 3 techniques will allow you to stack your items, horizontally, vertically and 3D dimensionally.

Components, Nav Bar & Lightbox - Use pre-built controls like Nav Bar, Tabs, Slider and Lightbox

It is no secret that Webflow can build virtually any type of web app. With components, you can bring intricate functions like Nav Bar, Tabs, Slider and Lightbox with the fraction of time it would take to implement in code.

Tabs and Customizations - Create a highly customized tabbed navigation with using Components

In this section, we'll learn about the Tabs component and how to completely customize that using positioning and styling.

Transitions and States - Learn how to use hover interactions and states in Webflow

Every element in Webflow can have multiple states such as Hover, Pressed, Focused, Visited. On top of that, you have the Current state which comes from Components. In this section, we'll learn how to create beautiful transitions during those state changes.

Animations and Interactions - Create an interactive 3D effect using the Webflow Interactions

The Interactions tool has been a surprise for me. It's capable of creating really complex animations in very little time. What's most impressive is that all this can be used in production. In other words, it has the simplicity of a prototyping tool, but you don't need to throw away all your efforts.

Scroll Parallax - Move elements during scroll and when elements are in view

In this section, we're going to use the Interactions tool to create a parallax effect that moves elements at different speed while scrolling.

Start Animation - Create a beautiful on-load animation using opacity and move

During or after your site loads, you have a perfect opportunity to impress your potential customers. One popular technique that you see often on sites is a nice start animation. In this section, we're going to animate the top elements using Opacity and Move with delay.

Lottie Animations - Create advanced interactions using animated assets

Lottie assets have become common in the marketplace because of its ability to show vector animations across platforms like iOS, Android and Web. You can find animated assets on sites like Shape or LottieFiles. For those more experienced with motion design, they can create new ones in After Effects.

Design with Data and CMS - Loop through data from the content management system in Webflow

When building a site in code, one of the greatest challenges is to deal with dynamic data from all sorts of API. Webflow makes this part effortless. To top it all, you can have content editors from your team manage the content while you design the site.

Symbols, Links and Pages - Create powerful reusable elements across multiple pages

In Webflow, you can turn any element into a Symbol. Symbols can be re-used across the entire site. Whenever you edit one instance, it'll update all the others. In this section, we're also going to learn how to create new Pages and link them all together using Links.

Forms and Submit Data - Create a newsletter and login form that submits data

In this section, we're going to learn how to create a Login and Newsletter form that connects to third-party apps like Mailchimp and Memberstack.

Ecommerce and Custom Code - Build a purchase experience and embed code in Webflow

As many designers and developers would agree, making a complex website takes a lot of time. Webflow actually challenges this concept by offering all the visual tools, backed by solid code that is virtually bugs-free. To think that Webflow can only create simple sites would be a mistake. With features like forms, payments and custom code, you can build almost any site you can dream of.