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

Webflow University

Horizontal scrolling fully engages visitors by using a unique interaction that changes their scrolling experience from vertical to right to left. Scrolling can also be achieved using the up and down arrow keys (spacebar for just scrolling down).

But, here’s the secret — it’s not horizontal scrolling. It’s vertical scrolling with an interaction that moves elements in our viewport as we scroll through our project.

Learn how to do this → https://university.webflow.com/lesson/horizontal-scrolling

Horizontal scrolling lesson

Cloneable, custom horizontal scroll interaction

This is a cloneable project that highlights and showcases CSS outlines using the Focused (keyboard) state on all navigable element.

View the lesson here: 
https://university.webflow.com/lesson/outlines

Flōē Food - CSS outlines lesson

FLŌĒ FOOD | Recipe App Landing Page

This is my portfolio for my UX design work.

Full course: wfl.io/2021-portfolio

Megan Garcia Portfolio

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

This cloneable project shows blending mode, which is a great way to clip text clip out black and white content (such as text, borders, PNGs, SVGs, and more), so your content becomes a window to your background elements (this could be both a image or a video).

View the lesson here: https://university.webflow.com/lesson/clip-content-using-blending-modes

Blend modes overlay

Clipped Text with Blending modes | Webflow University

Hello Webflow Lovers 👋 ,

Caddyflow Webflow Agency presenting a new clonable project for the awesome community! 

Enjoy!

💌  Email Us: hellocaddyflow@gmail.com
🌐 Portfolio: https://webflow.grsm.io/caddyflow-webflow-agency

Caddyflow Webflow Agency - Landing Page : Hush

There are a number of ways to create a custom accordion in Webflow. This can simply be done using HTML elements (found in the Add panel) to create the accordion, adding style to those elements with the Style panel, and bringing your accordion to life with animations using Interactions.

In this lesson, we'll walk through how to create a custom accordion using the Dropdown element.

Learn here → https://university.webflow.com/lesson/create-a-custom-accordion

Create a custom accordion - WFU lesson

Cloneable, animated custom accordion — Webflow University

Sara Lundberg runs design for Webflow University, and today, she’ll be walking through dozens of design notes on Megan’s portfolio site.

Full course: wfl.io/2021-portfolio

Full site design review — Portfolio course (part 17)

Portfolio course - Design review

Backgrounds are essential to forming a website’s look and feel. They can establish meaningful groupings to content, meaning they directly affect your design’s usability, navigability, accessibility, and other words that end in -ability.

In this project, we have designed fixed backgrounds with parallax scrolling. Open or clone this project and interact with the fixed background layout. 

Check out the video lesson here: www.university.webflow.com/lesson/background-styles-overview

Background-fixed

Fixed backgrounds with parallax scrolling

Memberstack

Hey everyone, SUPER STOKED to release this one.

We've recreated Webflow University, ALL within Webflow! Complete with a full CMS build, you've got everything you need in here to either make your own course similar to Webflow University, or just be amazed at all the things you can do with Webflow + Memberstack.

Go give it a clone and hit the like button if you <3 this free resource!

Webflow University Remake

Webflow University CLONE! Fully Functional Course Template

Caddyflow Webflow Agency - Landing Page : Ten

Bring out your inner filmmaking skills and rack focus between focal planes using a scroll position interaction in Webflow. In this lesson, we'll shift focus between the background (the studio), Grimur (the middleground), and his coffee (the foreground).

Rack focus interaction

Cloneable rack focus interaction in Webflow

This is a cloneable project that has the custom code embedded that allows site visitors to toggle pause then play on selected background videos with the push of a button.

Background video shot and edited by: Miguel Amezquita

View the lesson here: https://university.webflow.com/lesson/toggle-pause-on-background-videos

Background video

Background video play/pause toggle

You can add neumorphic elements to your site (such as buttons or cards) by applying three styling properties: the same background color as your site, a dark shadow and a lighter shadow on the opposite side. To take it up a level, you can add a hover effect by adjusting your shadows to make it appear as if your element is floating in a neumorphic space.

Read about it: https://university.webflow.com/lesson/neumorphic-button

Neumorphic button

Caddyflow Webflow Agency - Landing Page : Eleven

In this lesson, we’ll visually animate our elements directly on our page and create interactions that are triggered by mouse hover, page scroll and page load.

Full course: wfl.io/2021-portfolio

Custom 2D & 3D interactions — Portfolio course (part 13)

Portfolio course - Custom 2D & 3D interactions

Protect your pages with a password page that is both secure and engaging. In this lesson, we’ll visually build our ROYGBIV grid in 3D space directly on our page and animate it to follow mouse position.

Full course: wfl.io/2021-portfolio

Password-protected page — Portfolio course (part 15)

Portfolio course - 3D parallax password page

In this lesson, we'll create a custom 404 page for when your visitors encounter an unavailable page on your portfolio. Keep your visitors engaged with a mouse follow interaction to keep them on your portfolio.

Custom code for frosted glass effect: https://frosted-glass-code.webflow.io/

Full course: wfl.io/2021-portfolio