Ultimate web design course - Filtering Collection Lists Tutorial

INTRO

Intro to the Designer

Intro to HTML & CSS

HTML Structure

WEB STRUCTURE

The Box Model

Element Hierarchy

Navigator Panel

ELEMENTS

Element Panel

Section

Container

Columns

Div block

Buttons & Links

Button

Advanced Button Styling

Link Block

Text Link

Typography

Heading

Paragraph

Rich Text

Text Block

Block Quote

List

Media

Image

Image File Types

Image Resolution

Assets Panel

Video

Background Video

Components

Intro to Forms

Styling Forms

Navbar

Styling a Navbar

Navbar Menu Button

Slider

Tabs

Lightbox

Map

Dropdown

Social Media Buttons

Custom Code Embed

Symbols

Styling Basics

Intro to Style Panel

HTML Tags

Classes

Combo Classes

Text Style Inheritance

Style Manager

States

Transitions

Color Picker & Swatches

Color Values

Layout Basics

Intro to Web Layout

Display Settings

Padding & Margin

Width & Height Units

Floats & Clears

Flexbox & Grid

Intro to Flexbox

Centering elements with Flexbox

New

Equal height layouts with Flexbox

New

Grid layouts overview

Flexbox vs. Grid

Advanced Layout

Positioning Overview

Relative Positioning

Absolute Positioning

Fixed Positioning

Z-Index

Overflow

Styling Typography

Intro to Web Typography

Typography Units

Line Height

Advanced Typography Styles

Google Fonts

Custom Fonts

Text Shadow

Background & Border Styles

Background Styles Overview

Background Image

Background Gradient

Border

Border Radius

Box Shadow

3D Styles

Intro to 3D

3D Perspective

2D & 3D Transforms

EFFECTS

Opacity

Filters

Cursors

Responsive Design

Intro to Responsive Design

Intro to Breakpoints

Styling Across Breakpoints

INTERACTIONS CORE CONCEPTS

Intro to Interactions

Triggers & animations

Interpolation, easing, & smoothing

CMS & Dynamic Content

Intro to Dynamic Content

Intro to Webflow CMS

CMS Collections

Importing Collection Items

Collection List

Collection Page

Modifying a Collection

Intro to the Editor

CMS Collection Fields

Plain Text Field

Rich Text Field

Image Field

Video Field

Email Field

Link Field

Number Field

Date/Time Field

Switch Field

Option Field

Color Field

Reference Field

Multi-reference Field

Advanced Dynamic Content

Filtering Collection Lists

Conditional Visibility

SEO

Intro to 301 Redirects

Google Site Verification

Fetch as Google

Setting up Google Analytics

Intro to Paid vs. Organic Search

1:34

new course

CSS grid landing page tutorial (36min)

Lesson info

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared it in the link right under this very paragraph.

View and clone this project

Filter Collection Lists

Learn how to filter and limit items in Collection lists.

2:47

Clone this project Download project assets Download lesson assets

Transcript

Thanks for the feedback!
This will help us improve our content.

If you still need help or guidance:

Contact the support team Reach out to our community

Something went wrong while submitting the form. Please contact support@webflow.com

Have feedback related to the feature itself?

Submit feature feedback

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Filtering Collection Lists

INTRO

INTRO

INTRO

Intro to the Designer

Intro to the Designer

Intro to the Designer

2:48

Intro to HTML & CSS

Intro to HTML & CSS

Intro to HTML & CSS

3:38

HTML Structure

HTML Structure

HTML Structure

1:55

WEB STRUCTURE

WEB STRUCTURE

WEB STRUCTURE

The Box Model

The Box Model

The Box Model

1:54

Element Hierarchy

Element Hierarchy

Element Hierarchy

3:57

Navigator Panel

Navigator Panel

Navigator Panel

2:45

ELEMENTS

ELEMENTS

ELEMENTS

Element Panel

Element Panel

Element Panel

1:49

Section

Section

Section

4:14

Container

Container

Container

2:44

Columns

Columns

Columns

2:22

Div block

Div block

Div block

3:37

Buttons & Links

Buttons & Links

Buttons & Links

Button

Button

Button

2:44

Advanced Button Styling

Advanced Button Styling

Advanced Button Styling

5:43

Link Block

Link Block

Link Block

1:23

Text Link

Text Link

Text Link

1:16

Typography

Typography

Typography

3:20

Heading

Heading

Heading