Using the position property is one of many ways you can change the layout and positioning of an element. This property is unique in that it allows elements to be positioned relative to themselves (relative), relative to a parent element (absolute), or relative to the viewport, even when the page is scrolled (fixed).
The flexibility of the position property makes it possible to create very unique web layouts. You can even specify the stacking order of positioned elements that overlap other elements using the z-index property.
Here we’ll cover the values you can set for the position property:
1. Auto
2. Relative
3. Absolute
4. Fixed
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

When should you use flexbox? When should you use CSS grid? In this video, we lay out the similarities and differences between the tools so that you know what to use and when.
Watch all videos in the "Building CSS grid layouts in Webflow" playlist: https://wfl.io/2pWy4R3
Learn more about Grid on Webflow university: https://wfl.io/2P3CeVp
-------
Get started with Webflow: https://wfl.io/2pUPcGJ
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

The Designer is the heart of Webflow's visual web design platform, the canvas on which you'll design and develop beautiful, responsive websites. In this video, we'll take you on a quick tour of the Designer's key features and sections, so you'll know the lay of the land before we dive into details.
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

Get to know grid in Webflow starting with the basics: adding a grid, adding elements to a grid, moving things in a grid, spanning multiple cells, and editing a grid.
Watch all videos in the "Building CSS grid layouts in Webflow" playlist: https://wfl.io/2pWy4R3
Learn more about Grid on Webflow university: https://wfl.io/2P3CeVp
-------
Get started with Webflow: https://wfl.io/2pSowqd
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

Webflow empowers designers to bring their visions to life—without writing a single line of code. Or relying on developers.
Plus, with the all-new, all-visual Webflow CMS, designers can build custom, dynamic websites and let their clients add and edit content with an intuitive on-page editor.
Get started for free at webflow.com

Flexbox (also know as flex or flexible box layout) is a very powerful layout tool that gives you precise alignment and stacking control for all the contents inside an element. It solves many layout problems that designers have been struggling with for a very long time. Here we’ll be covering some of the important concepts you’ll need to understand to master flexbox:
Enabling flex on an element
Flex layout settings
Flex item settings
We created a flexbox game to help you learn flexbox even faster.
https://www.flexboxgame.com/
Also check out our tutorials for centering elements with flexbox and building equal-height layouts with flexbox.
https://help.webflow.com/article/centering-with-flexbox
https://help.webflow.com/article/equal-heights-with-flexbox
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

On March 26, 2018, Adobe announced that it was ceasing development on Adobe Muse, effective March 26, 2018. To our friends and colleagues using Adobe Muse: we invite you to explore what we've been doing with Webflow.
----------
Get started with Webflow:
https://university.webflow.com/courses/webflow-101-crash-course
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

In this lesson, we'll give the appearance of depth to multiple elements in a section by using parallax motion. Elements in the section appear to be moving at varying velocities, simulating a realistic feeling of depth, as elements which appear closer also appear to scroll more quickly.
----------
Get started with Webflow:
https://university.webflow.com/courses/webflow-101-crash-course
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

In this video, we'll explain the differences between static and dynamic content, and learn why the latter is so useful for some of the most popular content types on the web, from blog posts to product pages.
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

In Webflow (and web design generally), the display setting you set an element determines its behavior in a layout. Generally speaking, elements either stack on top of each other (vertically) or lay out side by side (horizontally), depending on what display setting is used. The beauty is that you can change the display of any element.
In this video, we’ll be covering the five display settings available:
1. Block
2. Inline-block
3. Inline
4. Flex
5. None
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

Image resolution simply refers to the level of detail captured in an image. Sounds fairly simple, but in practice, managing image resolution can get pretty confusing. That's why, in this video, we'll define image resolution, sizing images for your websites, and some best practices for working with both inline and background images — including how to properly balance image resolution with filesize.
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

The Webflow Editor makes editing the website and publishing new content, really easy for your client or your team. The Webflow Designer is a powerful tool for building websites, whereas the Webflow Editor is a simplified interface that’s focused on editing website content. You can edit content right on the page, or in the panels below the page.
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

In web design, you can declare an element's width and/or height using either fixed values or relative values. This video covers the most commonly used dimensions (outside of ems):
1. Auto-sizing (auto)
2. Pixels (px)
3. Percentage (%)
4. Viewport height (vh)
5. Viewport width (vw)
6. Minimum (min) and maximum (max)
You can adjust an element's width and height in the Styles Panel, under the Layout section. We’ll be covering how each of these units work in the context of setting element dimensions.
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

You can alter an element's z-index to change its position along the z-axis (an imaginary dimension that extends into and out of your computer screen, creating the illusion of depth). Increasing the z-index on an element allows it to "sit on top of" elements with a lower z-index, and lowering the z-index can make an element sit beneath elements with a higher z-index. But z-index only works with elements that have relative, absolute, or fixed positioning.
In this video, we'll show you how to use z-index on relative, absolute, and fixed position elements in Webflow.
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

This video features a brief overview of the fractions unit in CSS: a powerful input that automatically calculates layout divisions while taking into account gaps inside a grid.
Watch all videos in the "Building CSS grid layouts in Webflow" playlist: https://wfl.io/2pWy4R3
Learn more about Grid on Webflow university: https://wfl.io/2P3CeVp
-------
Get started with Webflow: https://wfl.io/2OZSmas
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

In this tutorial, we'll build a custom FAQ with collapsable containers for each question and answer. Read more about Custom accordion: https://wfl.io/2XiMg6m
See additional content for adding an interactive dropdown arrow to this accordion: https://youtu.be/CABPvMNE1Kc
Clone the following project to reuse this accordion in your own projects:
https://wfl.io/2GHhI9j
----------
Get started with Webflow: https://wfl.io/2MTwvO2
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

Staying up to date with design is important. That's why we collaborated with Charli to go over her top 5 web design trends in 2019.
Check out our full list of 20 web design trends for 2019: https://wfl.io/2019-trends
Subscribe to Charli: https://www.youtube.com/charlimarieTV
----------
Get started with Webflow: https://university.webflow.com/course...
https://webflow.com/ecommerce
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

In this tutorial, we'll connect a Webflow forms element to a MailChimp subscription list in two steps:
(1) — 0:17 — grabbing the action URL from MailChimp
(2) — 0:49 — configuring the Webflow forms element.
This allows you to send signup form submissions to MailChimp.
Link to Lesson: https://wfl.io/2IlkAJl
-------
Get started with Webflow: https://wfl.io/2KHCPqO
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

Understanding your image file options — and when and how to use each — can be key to building great websites. That's why this video focuses on explaining the bitmap, GIF, PNG, JPEG, and SVG image types, and the best use cases for each.
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

Sometimes, you might have a lot of content in a parent element that has a limited width or height. By default, the content will remain visible outside of the parent element’s bounds. With the overflow property, you can decide how to handle that overflowing content. In this video, we’ll cover how to ly the 4 overflow properties of:
1. Visible: the default
2. Hidden: clip the content
3. Scroll: always display scrollbars
4. Auto: displays scrollbars if content overflows
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

Fetch as Google is a Google Search Console feature that lets you simulate how a published web page looks to Google. It also lets you manually submit pages to Google’s search index, so you can quickly and efficiently let Google know about changes to your site. In this video, we'll show you to how Fetch as Google on your Webflow websites.
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

Forms are one of the most powerful tools any website can feature, whether you're gathering email newsletter signups or work inquiries from potential clients. In this video, we'll introduce you to the basics of using forms in Webflow, including:
1. Adding a form to your site
2. Understanding the anatomy of a form
3. Configuring form elements
4. Customizing success and error messages
5. Managing form submissions
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

Webflow's lightbox element lets you display images (with or without captions) or videos inside an immersive, full-screen slider view. The lightbox also works well on all devices, making it easy to display your media on desktop, tablet, and mobile screens.
In this video, we’ll cover:
1. Adding a lightbox to your website
2. Anatomy of a lightbox: the lightbox link and thumbnails
3. Lightbox settings: adding media and linking multiple lightboxes together
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

To add some interactivity to your elements in Webflow, you can change the way they look and behave using states. As you're styling an element, clicking the States menu lets you toggle between the various states, like Hover and Pressed, you can access and style.
In this video, we'll explain the 4 states you can style for any element:
1. None
2. Hover
3. Pressed
4. Focused
Then show you how to style those states to indicate interactivity. Then we'll dig into lying transitions to smooth out the change from one state to another, and finally, discuss the "current" state, which is a handy indicator for navigational links.
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

The div block is the most basic and versatile element used in website design and development. To a certain extent, a div block can be whatever you want it to be. For example, buttons, containers, and sections are all just div blocks with extra properties. A div block can also be used to create space or dividers, but the most common use for a div block is to group other elements together.
In this video, we'll show you how to:
1. Add
2. Style
3. Nest
4. Duplicate
Div blocks, plus show you how to use them as spacers (though we don't recommend it).
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

When you're using the columns element in Webflow, it’s nearly impossible for all the columns to have equal heights, especially when each column has different content. You could set a fixed pixel height, but this can cause reflowing issues. In this video, we’ll show you how to create equal-height columnar layouts with flexbox.
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

Learn how to create a preloader using Webflow interactions. In this lesson:
(1) 0:36 — Designing the preloader
(2) 1:40 — Setting the initial state of the preloader
(3) 2:38 — Hiding the preloader once the page loads
Read more at: https://wfl.io/2KmoYsG
-------
Get started with Webflow: https://wfl.io/2KmoNO2
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

A CMS (content management system) is a tool for managing and publishing dynamic content. The website references that dynamic content on different pages. So anytime you or your client creates or changes content in the CMS, it updates all the pages where it’s referenced, instantly.
The Webflow CMS gives you full control over your content structure and how this content is designed throughout your project — all without you even touching a line of code. In this video, we'll introduce some basic concepts behind the CMS, including:
1. Structuring content
2. Referencing content
3. Editing content
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

A Collection is like a database—it's where content can be stored and dynamically referenced throughout a project. Different Collections signify different content types, and an individual piece of content within a Collection is called a Collection item. In this document, we’ll cover:
1. Creating Collections
2. Adding Collection fields
3. Creating Collection items
4. Editing Collections
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

For the vast majority of search engines, search engine results pages feature two different forms of results:
1. Paid search results, or ads
2. Organic search results, which are ranked by relevance and, to an extent, reputability
In this video, we'll go into more detail on the difference, and how the two types can impact your marketing efforts.
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

Elements can pass typographic style information down to their children. You can set text styles on parent elements, which will cascade down, and you can override these styles on their child elements.
It’s common to use this technique to set global font styles on the Body tag, to align text and other elements inside sections, and to override default link block styles. In this video, we'll show you three examples of how text style cascading works:
1. Style cascading from the body tag
2. Style cascading from the section element
3. Style cascading from the link block
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

The position property allows you to move elements relative to: their current place in the document (relative), a parent element (absolute), or the viewport (fixed). Here we’ll be covering absolute position.
Absolute-positioned elements are completely removed from the document flow, so they no long touch or push other elements around them. They're pinned to the first parent element that has position relative, absolute, or fixed enabled.
In this video, we'll show you how to:
1. Enable absolute position
2. Understand positioning values
3. Work with Z-index
And then bring it all together with an example.
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

Check out quick effects! With quick effects, you can add more than 20 prebuilt entrance, exit, and emphasis animations to elements on click, hover, and scroll into view to introduce basic motion and interactions to your project.
----------
Get started with Webflow: https://wfl.io/2ry35vW
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

Making manual style changes to each and every element is tedious and time-consuming. And entering repetitive values for hours and then trying to update those values one by one can be frustrating. Classes save styling information that you can ly to as many elements as you want throughout your project. Here we’ll cover:
1. Creating classes
2. Applying classes
3. Editing classes
4. Creating class variants by duplicating classes or by adding combo classes
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

When you set values for typographic properties such as font size or line height, the default unit is pixels (px). But pixels are far from the only option, and each alternative unit uniquely impacts how your typographic sizing choices behave.
In this video, we'll explore all the typographic units available in Webflow:
1. Pixels
2. Ems
3. Rems
4. Percentages
5. Viewport width (vw)
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

Floats are great for wring text around an element, such as an image in a magazine layout. Floating multiple elements arrays them side by side horizontally. Clearing an element ensures it won't wrap around a floating element. In this video, we'll show you to use floats and clears in Webflow — and suggest a better method to achieve the same results: flexbox.
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

In this example, we'll cover how to create a trigger which fades and moves elements in as we scroll down the page. In addition to configuring the trigger and animation, we'll also cover how to apply the same animation to other elements.
(1) 0:37 — Creating the trigger
(2) 1:00 — Creating the animation
(3) 3:15 — Apply that animation to the other elements
----------
Get started with Webflow: https://wfl.io/2rJwSls
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

When you visit a site on your mobile device, you may see a desktop version of the site crammed into a smaller screen, forcing you to zoom and pan to see any content. Or you might land on a watered-down "mobile version" that lacks the content and experience that makes the desktop version superior. Hopefully, though, you see a responsive website — a design that reflows and repositions content based on the width of the browser.
There are 4 different aspects to responsive design we’ll be covering here:
1. Reflowing content
2. Fixed sizing
3. Relative sizing
4. Breakpoints (media queries)
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

Learn how and why to use Webflow's section, a layout element with a width of 100%, so it extends across the full width of the browser window. Sections play an important role in the structure and layout of a page. With sections, you can create separate blocks of content, dividing the page into meaningful segments. In this video, we'll cover:
1. Adding the section element to your design
2. Controlling the height of section elements
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

Learn how to reveal child elements when you hover over the parent using a hover interaction.
Link to article on Webflow University: https://university.webflow.com/article/reveal-elements-on-hover
----------
Get started with Webflow: https://wfl.io/2KPhrjD
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

We'll create a horizontal progress indicator which scales as we scroll down the page. This lesson starts by covering the design of the div block used as the indicator, then moves into creating the scroll trigger, configuring the animation, and finally, adjusting the transform origin.
----------
Get started with Webflow:
https://university.webflow.com/courses/webflow-101-crash-course
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

Whenver you create a new item (e.g., blog post, help article, etc.) in a Webflow CMS Collection, a page is automatically created for it. Collection Pages work like templates — the layout and design of the Collection Page will ly to every Collection item's page.
That means Collection Pages are essentially templates for recurring pieces of content, such as blog posts, help articles, or even landing pages.
In this video, we'll show you how to:
1. Create a Collection Page
2. Add and connect content
3. Preview Collection Pages
4. Link to a Collection Page
Plus, we'll show you the settings you can adjust for Collection Pages.
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

How does one create an interaction? There are two pieces: triggers and animations. A trigger—like a click or a hover or a scroll—is what starts or continues an animation. In this lesson, we go into the two types of triggers, as well as an overview of the animation timeline.
----------
Get started with Webflow:
https://university.webflow.com/courses/webflow-101-crash-course
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

Learn how to use rotational parallax to give objects the appearance of movement in 3D space — all controlled by the position of your mouse.
Open this lesson in Webflow: https://wfl.io/2Lwv4Y1
Link to this lesson on Webflow University: https://wfl.io/2JFYy1J
-------
Webflow is a professional web design tool and hosting solution which lets you build dynamic, interactive, responsive websites visually without having to code.
Get started with Webflow: https://wfl.io/2GRrru4
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

Webflow's Collection Lists are one of the two ways to add and design dynamic content from a Collection (the other being Collection Pages). You can add Collection Lists to any type of page.
In this video, we'll walk through:
1. Adding a Collection List to your site
2. Adding and connecting elements to Collection fields
3. Collection List settings
----------
Get started with Webflow:
https://help.webflow.com/courses/getting-started
http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

You can choose to trigger interactions on all elements with the same class and reuse the same animation by applying it to classes or the trigger element.
Read more at: https://wfl.io/2lvKiy1
-------
Get started with Webflow: https://wfl.io/2K32tcI
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

Now you can paginate collection lists, control how many items display per page, and style your own “previous” and “next” buttons.
----------
Get started with Webflow: https://wfl.io/2r7cVUW
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

In this lesson, we'll use position: sticky to keep a sidebar fixed to the right side of the screen after the user hits a defined distance from the top of the viewport. We'll cover setting the sidebar's position to sticky and setting the top distance.
Read more: https://university.webflow.com/article/position-sticky
----------
Get started with Webflow: https://wfl.io/2r7cVUW
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

Learn how to set SEO title and meta description for each page on your Webflow website.
0:27 - Title Tag
0:51 - Meta Description
Link to Lesson: https://wfl.io/2Hol5Q6
------
Get started with Webflow: https://wfl.io/2EA0DbK
https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow