Week 1

Main Interface + Basic Structure
WHAT YOU’LL LEARN
The Webflow UI

When you first use Webflow, it can be a little overwhelming. We will go over the main interface and what

The Basic Structural Elements

Learn the basics of structuring your website with the introduction of the different structure elements you will use like Sections, Containers, Navbar, Divs and Columns

Things You Need to Know

Helpful tips and tricks that will be useful as you start building your site.

action states

Learn the 4 basic states -  Hover, Click, Press, and Focused

Week 2

Images, Videos and Sliders
and Intro to Interactions
WHAT YOU’LL LEARN
images and backgrounds

Learn ways to upload and control images through the library assets, and style background images.

videos

How to make a marquee with a background video or add video clips to a section of a site.

sliders

Learn how to control, style and structure a slider. Create full width image sliders, or video carousels. Learn how to style and mask your slides.

interactions

Learn the basics of adding interactions and animations to your website to create unique dynamic experiences.

Week 3

Flex Box, and Effects
WHAT YOU’LL LEARN
CSS Filters

Add filters to background, or images like Blur, Color Adjustments and more.

Intro to flexbox

Designing flexbox layouts

make-up session

For anyone who missed previous classes.

Week 4

Work Session
FINAL WEEK
troubleshoot

We'll use this time to finish up our project and I will assist anyone who has questions or problems they need fixing.

intro to 3d interaction

We'll use this time to finish up our project and I will assist anyone who has questions or problems they need fixing.

Presentation

If anyone is finished, we can start presenting what y'all have created!

Creativity is magical, not magic.

project Requirements

Your website should include:

navigation bar

The Navbar component is one of the most powerful components in Webflow, allowing you to build a responsive navigation in minutes this lesson will show you how.

how to build a navigation
more about the nav bar
Show and hide a Navbar on scrollNavbar trigger interaction
slider

Sliders are a popular way to feature images, text, and even videos. And Webflow's slider component is fully responsive, so it looks and works great on any device.

the guide to sliders
more about slider and carousels
Creating a multi-column sliderSlider trigger interaction
interactions

Comes with a range of triggers and effects to create limitless UX possibilities. Animations that work beautifully on desktop and mobile devices.

webflow interactions
more about interactions
Card 180 degree flip animationPopup modalBuild 3D TransformsParallax
video

You’ve always loved the way they bring life and motion to websites. Well, now you can do it quickly and easily, with the all-new Background Video component.

how to add videos
more about videos
How to add a background video