My journey with learning Webflow

I recently binge-watched all 40 of Webflow's video tutorials. Why did I do this, and what did I learn? I will share the answers to these questions, along with my notes and key insights gained from the experience.

‍

A Product Manager with a technical background learning Webflow

Before I share my experience learning Webflow, I think sharing my background and skillset will set the context about how I experienced and learned Webflow.

Before starting Shaztra, I worked as a Product Manager. I am a Product Manager with a technical background. When I say I come from a technical background, I mean the nitty-gritty, backend development, and APIs kind of technical. UI design? Not really my cup of tea. While I could put together bits and pieces using my basic HTML and CSS knowledge, I often felt lost in the world of web design and UI development. Yet, my technical knowledge and experience did help me get comfortable with Webflow fairly quickly. Someone without a technical background might have a different experience with the tool and might face a steeper learning curve.

‍

Why Webflow?

Imagine two technical co-founders (yep, that includes me) brainstorming our startup’s digital presence. Our initial thought? Let’s stick to what we know – coding our website. However, after a few iterations, we transitioned from a code-based website to Webflow. Curious about what triggered this switch? Read about the reasons that led to the switch in our upcoming posts.

‍

Why did I binge on Webflow's 40 video tutorials?

While I have been working with Webflow for some time, my learning strategy so far, to be honest, has been a bit scattered. I started using Webflow with one goal: migrating our website to Webflow. So, I cherry-picked specific tutorials and content that helped me achieve this goal. And though successful, my understanding often felt like a game of trial and error. This realization fueled my desire for a structured learning approach. Webflow's tutorials, known for their informative and engaging content, seemed like the perfect starting point.

‍

Key Insights and Reflections

Webflow's designer is an incredibly powerful tool. It's a game-changer for designers aiming to bring their imaginations to life without constantly involving their developer buddies.

The tutorials served as more than just tool guides. They covered design fundamentals, illustrating real-world applications, such as designing a modal or a sticky footer. These tutorials were both informative and engaging.

Post tutorials, do I feel like a design expert? Well, not quite. I would still need to ping my co-founder for help with advanced CSS and HTML insights. But, what's changed is my approach to designing- it's more informed, more confident, and a tad bit less like shooting in the dark.

I've also felt inspired by Webflow's user interface. The designer offers a lot of functionality without feeling "cramped" or overwhelming. Its design felt very intuitive and working with it has sparked some ideas for our own web platform.

‍

My Notes

Here are my notes from each tutorial. While these were scribbled down primarily for my future reference, they might be helpful for someone else on a similar journey.

‍

Introduction

‍

Intro to HTML & CSS

HTML - tells the browser what content to render e.g. texts, links, images, headlines, etc.

CSS - used to style content on the browser. Rather than styling each individual element, CSS allows you to define the style in a class and re-use that class on different elements.

‍

Intro to Designer

Left Panel: Has controls to add elements, add pages, cms content and manage project assets

Canvas: Has all the content on the page. It follows the "box" model that helps in creating responsive designs.

Right Panel: Has controls for more granular control over the content on the page. This includes controls to visually manipulate the CSS on the page.

‍

Web Structure

‍

The Box Model

Helps in creating responsive layouts for different screen sizes and devices.

• Imagine each element like a box by imagining a border around it. Each box is as tall as the content inside it unless specified otherwise.
• By default boxes stack from to bottom.
• Boxes can be styled to rearrange based on the screen sizes
• Boxes can be put inside other boxes. When a style is applied to the outer box, it affects the boxes within it.

‍

Elements Hierarchy

• Nesting is placing one element inside the other eg. placing a heading in a section. The indentation of elements in the Right panel shows us the hierarchical relationships between elements
• Changes to Topography styles on the parent pass down to its "children" unless otherwise overridden by the child.
• Most elements are sized by the content within it unless otherwise mentioned. We can set the size of the parent to override this default behavior.
• Body is the primary parent on a page and it contains child elements such as "sections".

‍

Navigator

Gives us a visual way to interact with each element on the page

• To select an element, click on the canvas or select it from the navigator. Hidden elements on the canvas can be selected in the navigator.
• Visual representation of the complete hierarchy of the page is seen in the navigator. Children are indented from their parent elements.
• We can move elements (along with their "children") on the page by simply dragging and dropping.

‍

Element Basics

‍

Element panel

Gives us visual access to elements we can add to the page such as typography elements, dynamic content, media, and forms. To add an element on the page

• Select an element on the canvas then click to add an element. Depending on the selected element, the new element will be either added directly below it or within it.
• Drag and drop elements on the canvas
• Drag and drop on the navigator

‍

Section

Used for organizing content.

• By default, they take 100% of the width available. Sections  stack on top of each other.
• It is a good practice to add a "container" to a "section". The "container" sets a maximum width for the content with the section and centers the elements.
• Styles set on the section are inherited by its "children"
• Combo classes are built on top of the original class but they add something new to the original class to modify it. Ex. a class for a dark section could have a combo class for a light variant.
• Viewport height(vh) defines the height in terms of the % of the viewport we want the section to occupy. Setting a minimum height of 100% is a common pattern for "Hero" sections

‍

Container

• Sets a maximum width by default and centers "children" elements
• It is a good practice to add a "container" to a "section".
• In smaller viewports, we can add padding within the container to give its content some breathing room

‍

Columns

• Organizes content side-by-side horizontally in a row
• Add a column layout on the canvas, select the layout to change the number of columns and width of each column, and then add content to it.
• From the right panel navigator, we can change how the columns show up in each viewport ex, 3-across on the web vs. 2-across on tablet
• We can create a class to style a column and reuse the class across the project

‍

Div Block

• Versatile element. Mostly used for grouping elements. Could also be used for creating a divider. We can use it as a spacer as well but using padding and margins is a better option for spacing elements.
• Sized by the content inside it
• Can be nested inside other div blocks
• Good layout structure for organizing content is General Body-> Section -> Container -> Div block

‍

Components

‍

Intro to Forms

• Form has 3 parts in the navigator- Form, Success message, and Error Message
• Name form elements carefully as these names will show up in code when we inspect the HTML.
• Placeholder is the default text in form elements. This gets overridden when the user enters content in the element.
• Autofocus is setting the blinking cursor to an element to get the user's attention to that field when the form loads
• Toggle between states in the navigation panel on the right to style the success and error states of the form
• When a form is submitted, form data is available in Project Settings > Forms. Here we can also configure to receive an email when someone submits a form.

‍

Navbar

Has 3 parts: Brand Link, Nav Menu, and Menu button

• Brand link - Upload the logo to the assets and add it to the brand link
• Nav Menu holds the navigation links. We can change where the links navigate to using the element settings.
• The Menu button is the "hamburger" menu icon. By default, we see this in tablets and smaller screens. We can configure the  viewports we want to see the "hamburger" icon from  the element settings
• We can create a navbar once and turn it into a symbol by right-clicking it. Symbols enable us to reuse components so we now we can now reuse this navbar on other pages.
• Nav bar can be fixed or sticky and can be configured from element settings
• It is a good practice to create a class for styling all the nav links
• We can also add a dropdown to the nav bar, configure the links within the dropdown, and style it from the element settings

‍

Slider

• Used for adding carousel-like images to a page
• Has 4 components, Mask (contains default slides, we can add more slides to this), left arrow, right arrow, and slide nav (navigation we see at the bottom)
• By default it takes up the full width of whichever parent element we nest it in
• We can add any content/elements to the slides directly

‍

Components

• Right-click an element to convert it to a Symbol
• From the left panel, drag and drop the symbol on another page for reusing it
• Double-click on the symbol to edit it.
• Changes made to the symbol are reflected everywhere the symbol is used unless an instance of the symbol has been unlinked from it.
• We can right-click an instance of the symbol on any page and click Unlink. Once this instance has been unlinked, the changes made to it are just local and will not affect the original symbol.

‍

Styling Basics

‍

Intro to style panel

• Orange indicator means the style value is being inherited and clicking on the label shows us which class or tag the value is inherited from
• Blue indicator means the style value is coming from the current class or tag

‍

HTML Tags

• Tags help us set style defaults. We can override the styles set by tags by using classes
• Body (All Pages) tag lets us set the default project typography, background color, and so on
• There are also tags for All headings H1, H2 etc, All Paragraphs, and All Links.
• We can use Style guides to set defaults using all types of Tags
• Elements look up the hierarchy to see the first thing they find that has styling information. Eg, Heading a page with no class will inherit it from the All H1 Headings tag which in turn will take its styling from the Body (All Pages) tag.

‍

Classes

• Used for creating a style once and reusing it across the project.
• Changes made to a class affect all elements that use the class
• Combo classes are extensions of base classes. They keep the reference to the base class so any change in the base class is seen in the elements where the combo class is applied unless the style is overridden by the combo class.
• Duplicating a class breaks the relationship with the original class. Any changes to the original class don't affect the elements with the duplicate class.
• Global classes can be used to style elements on which  specific styles aren’t already set. We usually use a temporary element like a div block to create global classes and then use the class wherever we want.

‍

States

• Visual indications of different states of elements such as when a button/link is hovered or when a text element is focused.
• We can change and style the states of an element from the Elements panel
• Blue indicator means that some style property has been overridden in the state
• None - is the default or normal state and it acts as the starting point for all other states
• Hover - can be used to do style changes when the user hovers over say a button
• Pressed - can be used to do style changes when the user presses a button
• Focused - can be used to style a text element when the user puts the cursor into it to enter content.

‍

Layout

‍

Into to web layout

No notes here.

‍

Spacing

• Padding is space inside an element
• Margin is space outside an element
• Negative margin can be used to create an effect of overlapping elements
• Automargin can be used to horizontally center content

‍

Display Settings

• Block - elements stack on top of each other by default. Child elements take the full width of the parent element.
• Flexbox - We set the flexbox property on the parent container to align child elements nested within it vertically or horizontally. Parent elements set the rules. If there are specific properties set on the child, it can break the rules of the parent.
• Grid - is great for a 2-dimensional layout. We define the number of columns and rows on the parent element. Child elements by default take the next available sell. We can use div blocks to group elements in a single cell. We can change the grid's layout configuration for different viewports.
• Inline block - elements sit on the same row and they wrap to the next line when they hit the boundary of their container.
• Inline - These are similar to inline blocks but don't respect spacing and sizing rules. Example: Text span - we can choose a text in a paragraph, wrap it with a span, make it inline, and style it the way we want. It won’t respect margin or padding or size properties though. It will respond to typography style changes.

‍

Intro to Flexbox

• Select the parent and pick the display as flexbox. We can then align and justify the child elements within the parent either horizontally or vertically

‍

Grid

• Elements in a grid are arranged in rows and columns. Sections, collection lists, div, etc. can all have a grid layout.
• A child element in a grid takes up the next available cell in the grid by default. Its position can’t be changed unless we switch to a "manual" position and then move the element around in the grid.
• By default, a cell in a grid can contain only one element. So if we want to have more than 1 element in a cell, we have to group elements in a div.
• If we have placed something manually, and we are changing the grid layout for responsiveness on smaller screens, we will have to tell the layout what to do with the manually placed item in the grid block or set the item to auto position.
• If we have elements of different sizes in the grid, for example, images and we these images to fill the grid cell evenly, we need to use the fit property.

‍

Position

• Static - default positioning when using the box model. Elements are positioned to the top left of their container and subsequent elements are positioned below them.
• Relative - An element's position is relative to its own static position. We can set the z-index of an element when its position is relative. An element with a higher z-index will be placed on top. Moving an element with a relative position does not impact the document flow.
• Absolute - Elements with absolute property are no longer part of the document flow. Element with absolute position looks up the hierarchy for the first element that’s not set to static and positions itself around that. If it doesn’t find any - it positions itself around the body. Useful for setting buttons in a popup like a close icon on the top right corner.
• Fixed- Elements using fixed, position themselves with respect to the viewport. Similar to absolute, fixed element is no longer part of the document flow. Useful for banners that have to be placed in the same spot.
• Sticky - Elements are sticky only when their parent elements are in view. We use this for say making a nav bar sticky. We have to define how far we can scroll before the element sticks to its place.
• Float & clear - float elements make other elements float around them only if the other element is below it. For example, float-left on an image will make the paragraph after the image, wrap around the image. Clear does the reverse.

‍

Responsive Design

‍

Responsive Design

• Styles cascade down to smaller devices and up to larger devices
• Styles in % are relative to the size of the parent element.
• Design in the default desktop mode as the basic layout and tweak when testing responsiveness for other viewports

‍

Intro to Webflow Breakpoints

• Styles cascade down to smaller devices and up to larger devices
• We can add additional screen sizes as breakpoints as well

‍

Test Multiple Breakpoints

• In preview mode drag, the layout to test responsiveness in in-between screen sizes

‍

CMS and Dynamic Content

‍

Intro to Dynamic Content

• Static content is the content we update one by one
• Dynamic content is when we put the content in a database, create a design one time, and automatically show the content on this design by connecting with the fields from the database.

‍

Intro to Webflow CMS

• CMS is how we work with our dynamic content
• Collections (think table e.g., blog post collection) are made up of items (think rows of a table). Items are made up of fields (think columns of a table ).
• Collections are shown on a page using either a Collection List element or a Collection page.
• Collection pages are like design templates that are used for showing data from each item in the collection. A stand-alone page for each item in the collection is created by default at run-time.

‍

CMS Collections

• Collection is where we store data to show content dynamically
• We can either build a collection from scratch or use presets. We can also add dummy data to our collection so we can quickly begin wiring it with our designs.

‍

Collection List

• Start by dragging and dropping a collection list element to the page and choose a collection from the settings dropdown
• Drop elements such as headers, images, links, etc. into an item in the Collection list and bind them to fields of a collection item to show dynamic content.
• Changes to any item in a Collection list are reflected in all items by default.

‍

Filtering Collection Lists

• Filters set on a collection list help in showing only the items that match the filter criteria in the collection list.

‍

Collection Page

• When we create a collection page for one item of the collection, it acts as a design template. Pages for all collection items are automatically created at runtime.
• Elements on a collection page are static until we bind them to a field in the collection item.

‍

Intro to Editor

• We can access the editor from Project Settings
• Collaborators can edit elements in the editor that have the "collaborators can edit this element" flag checked in the element settings.
• Collections are accessible in the editor. We can manage collection items and add new ones from the editor. If a collection item is marked as "Draft", it won't get deployed when the site is published.
• Changes made in the editor have to be published explicitly

‍

CMS Collection Fields

‍

Plain Text field

• Block of unformatted text to be used in an element
• Short-form content that can be bound to any element such as heading, paragraph, links, text blocks, etc.

‍

Rich Text Field

• Long-form content that can be formatted such as a blog post body.
• We can add a rich text editor to a page and bind it to a field in the collection.

‍

Image Field

• Can be used as an image element on a page or can be used for binding the background image of an element to a collection item's field.

‍

Number Field

• Can accept all types of numbers, decimals, positive, negative, etc.
• We can mark a number field required.
• We can set minimum and maximum values for a number field.
• We can bind any text element to a number field.
• We can use these fields for sorting or filtering a collection based on numeric values

‍

Switch Field

• Helpful when we are looking to filter based on binary value - on or off.
• We can also hide and show elements on the page based on a value from a switch field.

‍

Reference Field

• Lets us reference fields from an item in another collection. When we build the page, we also see fields from the referenced collection. We can use fields from this referenced collection to bind with elements. ex, in a Blog post collection, the Author can be a reference field from the Author's collection. On the page, even though we are primarily building a blog page, we can see fields from the author collection so we can pick those fields to bind with the elements on the UI.

‍

Multi-reference Field

• Lets us reference multiple items from another collection. For example, in the Blog’s collection, we can have a multi-reference field that can reference multiple categories from a Categories collection.

‍