Cloneable used for Build with me #14: https://www.youtube.com/watch?v=Gja4lvu3aPo 

Build with me #14: SpaceX style video player lightbox

This is the cloneable project used for the Build with me #13 livestream: https://youtube.com/live/ZbGe0gdzPmg

Disclaimer: Webflow and this livestream are not affiliated with, endorsed, sponsored, or specifically approved by Star Wars, Lucasfilm, or Disney. All Star Wars-related characters, props, and videos used in this livestream are the intellectual property of their respective owners. This livestream is solely for educational purposes and is not intended for commercial use or profit.

Build with me #13: Star Wars character slider

Learn how to go from blog design to a full product ready blog in an hour.

Watch the whole stream: https://www.youtube.com/watch?v=ljVrFz79fdA

Workflow series: Scale your Webflow blog

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.

Webflow 101: Responsiveness

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.

Webflow 101: Hero section

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.

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.

Webflow 101: Logos

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.

Webflow 101: Cards

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.

Webflow 101: Form

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.

Webflow 101: Footer

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.


Webflow 101: Interactions

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

Calendar site for Webflow 101 course

Cloneable used for the Build with me #11 livestream

bwm-11-interactions-best-practices

Learn how to add a search bar to your Website and how to add Jetboost filters so users can dynamically filter content on your site.

This is the livesite that was built during a workflow series episode. Full episode is here: https://www.youtube.com/watch?v=lWmYkZz946Y

Workflow series: Add search and filters to your Webflow Site

Cloneable from Build with me #10 livestream. Watch the replay here: https://www.youtube.com/watch?v=ds9H7AMDoLY

bwm-10-mobile-components

The custom code in the homepage shows you how to redirect the user to a Stripe payment link checkout page with the email from the form prefilled.

Full stream: https://www.youtube.com/watch?v=fdV5_Yi_gC4

Workflow series: Prefill checkout

The custom code in the homepage shows you how to adapt the success message based on the values submitted in the form.

Full stream: https://www.youtube.com/watch?v=fdV5_Yi_gC4

Webflow University

About

About

About