Discover the best webflow101 websites created by professional designers. Get inspired and start planning your perfect webflow101 web design today!

Webflow University

A landing page for a SaaS company called Calendar, an upcoming calendar app for space travel and time.

Calendar

Calendar site for Webflow 101 course

Now that you have a solid understanding of the box model, HTML, CSS, and the Webflow Designer, let’s start building! Here we’ll walk through a hero section build (typically the top section of a website homepage) and, along the way, we’ll explore flexbox, CSS styling, and how to add and style visual assets.

1. Hero section

Webflow 101: Hero section

Responsive design is what helps your website content reflow and reposition on all devices — desktop, tablet, mobile landscape, mobile portrait, and the Game Boy Color. Responsiveness is arguably one of the most critical parts of website design and, in this lesson, we’ll fine-tune our site design to reflow perfectly for devices of all sizes.

7. Responsiveness

Webflow 101: Responsiveness

In this lesson, we make our site more dynamic and engaging with interactions. With Webflow, you can create awesome interactions — here we’ll show you how to create a button hover interaction using states, and a page load interaction using the Webflow Interactions panel.


8. Interactions

Webflow 101: Interactions

Forms are one of the web’s most powerful and ubiquitous tools. With forms, site visitors can sign up for newsletters, register to an event, request demos, submit feedback, and so much more. In this lesson, we structure and style a form, configure the form’s success and error states, and create an engaging form call-to-action.

5. Form

Webflow 101: Form

Websites often include card layouts to visually display different product features or pricing plans. Here we’ll build a CSS grid-based card design to display a feature image, heading, and paragraph, then style those using selectors and classes. And, along the way, learn about the Webflow Style Manager which gives you total control over managing classes and tags on your site.

4. Cards

Webflow 101: Cards

A Calendar for Space Travel is a satirical calendar landing page created upon completion of the Webflow 101 course.

Space Calendar by Ashley Kelly

A footer is the bottom section of your website homepage where you typically add your company’s logo, social links, navigation links, and copyright information. In this lesson, we’ll optimize our site’s navigation — and social media promotion — by building a fully responsive footer section.

6. Footer

Webflow 101: Footer

Let’s build a website navigation bar together. We’ll start with Webflow’s navbar element, edit the content, style the nav links, and create a call-to-action button with a combo class.

2. Navigation

Webflow 101: Navigation

With Cascading Style Sheets (CSS), you can use the CSS grid layout to create a responsive section that displays notable logos on your site. This section often displays logos of companies that trust your product.

Discover webflow101 websites built by the Webflow community

Discover webflow101 websites built by the Webflow community