Webflow 101: A Beginner's Guide to Build Stunning Website

Webflow 101 is the ultimate course in the Webflow platform which teaches you the fundamentals of web design and development. As Webflow is a popular no-coding website builder. It allows you to build visually appealing and stunning websites. There are plenty of options for website builders. However, Webflow is an easy-to-use platform for beginners and even experts. It offers limitless capacity to design high-performance and dynamic sites.

Blog is covering

• Webflow 101 and Introduction to No Coding Development called Webflow.
• Getting Start with Webflow 101.
• What is Webflow UI?
• Introduction to Quick Stack in Webflow 101.

Webflow 101

Webflow 101 is the easiest course for a beginner's guide to learn the basics. It allows you to learn the powers of web design, development, and Webflow. Webflow 101 learning pattern enables you to design responsive and accessible design.

Webflow is a visual web design and development platform that allows customers to build responsive websites. It is a no-coding platform that empowers you to create, design, and structure your websites. Technically speaking, Webflow isn't actually "no coding." The code is involved in Webflow but in a visual way. For example, when you drag and drop any element in Webflow Canvas, the code behind this element is written automatically.

Getting Start with Webflow 101

Introduction to the Box Model

Let's start with the basic element in Webflow 101 course. If you visit any website everything is built with boxes such as images, text, buttons, or other elements. Based on the box properties we set, they can be set on top or next to each other. We usually call these boxes as div blocks. It is an important element in Webflow. The best thing about these boxes is that you can control them. Div block effectively structured your webpage. Here is an example to illustrate how a box works:

The above hero section is a perfect example of the box model. These boxes contain a navigation bar, heading, paragraph, and button. You can also see these boxes allow you full control. You can adjust their dimensions according to content. The gap between each div block is also a div block The visual look of boxes is:

While in code it looks like <div> … </div>

In short, you drag boxes onto the Webflow canvas, while in code, you write the word "div" with symbols. Both are the same, but they have different mechanisms.

Introduction to the HTML

As you know, technically Webflow is not a "no coding" site builder. Let's understand the basics of HTML in Webflow 101. Don't worry you don't need to memorize this as Webflow handles this part on your behalf.

In Webflow, HTML is just the basic structure – the boxes of content on the page. It is the coding structure that works behind the elements on the webpage of Webflow. To understand HTML more easily, we divide it into three parts:

• Basics of HTML
• HTML elements
• Inspect

Additionally, we’ll see real-time examples such as deleting Google using HTML or changing prices in Apple.

Basics of HTML

HTML is just a bunch of different types of tags which you can use to build a page. Each of these tags is used to define the type of content. Let’s understand with an example. In the following image, we see the webpage of the Apple iPhone site. This shows the page is designed with CSS and HTML coding.

But what if we remove the CSS? Let’s find this answer. Here we turn off the CSS on the same page as shown above. Now this image shows us the HTML work behind the CSS.

HTML Elements

Take the reference of the above image without CSS. Here we see all kinds of HTML elements that make up the content. Here the heading, body text, and image are elements. Same as in Webflow, these are the div blocks that group other elements.

Inspect

Understand the inspection with an example of the Google browser. Right-click on the mouse and click inspect. 

Now here is magic. The top block shows the HTML or content and the bottom is our CSS – a styling or layout. Leave the CSS part and focus on HTML. 

‍

Just move the pointer on the HTML content, and you can see the Google page - a bunch of boxes with different HTML elements. Keep hovering and expand any HTML element such as we expand the Google box in the given image:

Just delete this HTML element and see what happens. 

Our Google logo is removed. Seriously! Don’t worry you won’t break anything; just refresh the page. Your Google logo will appear again.

Let’s take another example. Here is the Apple webpage and we’ll alter the price value of the iPhone 16 Pro with the same inspection method. Just right-click of mouse and click inspect. Now hover over the HTML section and find the price box as follows:

Just change the price of the highlight box. You can see the price changes now.

*Disclaimer: You change the price of the iPhone 16 Pro. It doesn’t mean you buy this product at your set price. Just refresh the page you can see the original value come back.

Introduction to the CSS

The next part of our Webflow 101 course is CSS. CSS stands for cascading style sheets and is used to define styles and layout of your webpages. It keeps everything consistent across your site.

CSS Properties

You can be familiar with most style properties such as color, font, and borders. However, CSS has also other properties such as spacing, layout, and 3D perspective. Additionally, Animated transitions on hover. In short, CSS offers all kinds of properties that let you control style and layout.

Selectors

Let’s understand the selectors with Slack’s marketing site example. Just like in HTML, right-click on the screen and select inspect. Now here you can see the HTML and CSS. Select any box like in our case we select heading (h2) — the one that has font-family and a bunch of others. Now that is a selector. A selector selects all the H2 in this webpage and if you make any change in one H2 box, it will affect all H2 headings.

For example, here we change the color of H2 from the CSS section. Now you can see its effect on all H2 headings.

You can see all the selected H2 colors changed. That’s what a selector does. It allows you to specify what things on the page to select, and it lets you define the styles on all of them at once.

Classes

Classes are labels you assign to HTML elements. It allows you to apply the same set of styles such as font size, color, or spacing. For example, here we have the webpage of Apple’s Mac.

Notice here is a buy link button. Don’t look like this link compare to all site. Apple didn’t want to style all links on the page and they can do that because of classes.

Let’s go in and inspect one of them. Now go over and look at the part of CSS, where it says button. Let's change some stuff like the border-radius; we can see the links are rounded, but let’s change the radius to 0 pixels.

Here we can see the links now have a sharp edge. Additionally, we can also add our own CSS. Let’s add a transform, where we rotate:

So, here just buttons are affected because they are specified in the classes not the link above the button. Classes let you target any elements that have that class applied.

What is Webflow UI?

Move to the next part of our Webflow 101 course which is Webflow IU. It is a user interface - a visual website builder that lets users create and design websites by drag-and-drop elements, build layouts, and adjust styles without complex coding. Webflow user interface has various essential functions such as the top bar, left toolbar, canvas, and right panels. Let's understand each of them one by one in Webflow 101.

Top bar

• In the top bar, there are three modes on top design, build, or edit. These depend upon your role in the workspace or the specific site. You'll have access to different things so that you can be empowered to do your part in Webflow without the fear of messing things up.
• Next, on the right side, there is a CMS option that gives access to collections and dynamic content.
• Next, it's the Insight tab that helps you to analyze and optimize.
• The Preview button provides a quick way to interact with the Webflow site.
• In the top center, you can quick links or access Webflow Optimize and Localization settings. Besides this, there is a Home and Desktop. The home drop-down menu allows you to jump to pages on your site. The Desktop acts as a breakpoint permitting to view the site on different screen sizes. You can also access the breakpoints visually in the toolbar at the bottom of the canvas.
• In the top bar right side, you may have access to Analyze mode where you can view data insights based on visitor behavior. Besides this, there is a Comment panel where you can review feedback shared by collaborators.
• Beside the Comment panel, you can see the Share site option where you can share a read-only link of the site with anyone.
• The Publish button at the top right allows you to publish your site and make it live for everyone.

You don’t need to worry about FTP, APC, PFT, TFN, or any complex hosting. Webflow can publish your site right away.

Left Toolbar

• In the left toolbar, click on the top three-line icon. Here, you can access your dashboard, which is your current workspace. Here, you can find any site you’re working on. You also find many other options, such as site settings, an editor, a quick find, undo, redo, and more. You can also export the entire code of your site from here.
• There is an Add panel (+ icon) in the left toolbar where you find an Element panel. Here you can add things such as buttons, videos, forms, and other elements. These elements make your site's HTML structure.
• In addition to the element panel, there is a Layout option that can be used as a starting point for parts of your page.
• Next, there is a Pages panel where you can organize and manage page settings for SEO, open graph, and custom code access to the selected page.
• The next option in the left toolbar is the Navigator. This panel gives you an overview of page structure and hierarchy.
• On the left toolbar, there is a Components option where you can access all pre-made elements and layouts that can be reused throughout your site to keep things consistent like a Nav Bar or Footer.
• Next is the Variables panel which provides a collection of reusable design values that allows you to apply consistent styles across your project and update them globally.
• Below the Variables, there is a style selector, tags, and classes. It also provides information about where these styles are used on the page.
• Next, there is an Asset Manager. This allows you to upload and organize the multimedia assets that you are using on your site.
• Webflow also provides you with various apps in the left toolbar. Now you can easily install great apps for your sites.
• Next, there is a Setting panel. In this panel, there are two important things that you should know. One there is a Backups, where you can access the past versions of your site. The second one is Localization, where you can manage various language versions of your site.
• Below the Settings panel, there is a Help icon to access help from the Webflow site. There is also an Audit panel, where you can determine and fix accessibility issues.
• Next, there is a Quick Find button for searching and finding anything you want.
• At the very bottom of the left toolbar, you find Video Lessons content.  

Canvas

CANVAS, the most essential topic of our Webflow 101 course. But why? Because Canvas is the main visual area where you put your site together. In this area, you interact with all the elements of your site. You can edit and replace different elements on the canvas. To edit any element on canvas you just double click on it and perform the action you want. For example, if you want to edit a text, just double-click on that text element and write your new text. You can also move the elements by clicking and dragging.

Webflow also allows you to view the element hierarchy in the navigator panel. This platform also provides you with several options and tools in canvas settings to optimize your design process. It even simulates your site in various scales, vision previews, and so on.

The layout of everything you build on the canvas follows the box model. This gives you the tremendous flexibility to develop responsive and powerful designs across different breakpoints. Just click on the Desktop icon on the top menu to access various breakpoints. Test the different widths by clicking the edge of the canvas and dragging it throughout your page.

Right Panels

In the right panel, there is an important panel called Style. It gives you granular control of the styling and layout of selected elements. Inside the Style panel, there are various panels such as padding, size, color, and effects.

When you style any element and open CSS preview, you can see the CSS coding for the selected element. You can also change this CSS value in real time.

Next, the Setting panel. This panel allows you to change element-specific settings such as element ID, custom attributes, and search index settings.

Last, there is an Interactions panel that permits you to create custom animations and interactions based on your defined triggers.

Introduction to Quick Stack in Webflow 101

Webflow’s Quick Stack element is the fastest and most powerful way to create layouts, the same as the top developers create globally. It is more flexible than Flexbox and CSS grid and shows a direct visual interface. To understand Quick Stack in the Webflow 101 course, see how it works, add content, and what the difference is between Quick Stack and Flex and Grid.

How Quick Stack Works

You can find Quick Stack in the left toolbar Add panel (+ icon). Select Quick Stack and add to your canvas. This element is a grid filled with divs set to flex. After adding this, you first notice a Preset panel. You can apply various presets to give you a headstart and play with presets by adding and removing rows and columns. The best part of these presets is that they are pre-populated with divs. Here each div block is called cells. In Webflow Canvas, you don’t need to adjust cells manually because these cells are automatically adjusted.

Adding Content Inside Quick Stack

As you know, Webflow offers a visual-first canvas, which means you don’t need to worry about coding behind the elements. Just drag and drop the elements into the cells of Quick Stack. You don’t need to manually adjust these divs and links, but you can merge the cells in Quick Stack to create your desired layouts.

Flex vs Grid vs Quick Stack

Flex

Flex is a powerful way to build one-dimensional layouts either vertically or horizontally. It is also known as a flexbox or flexible box. Flex has a display setting, so you can set it on other elements.

Flex parents and children: When you set Flexbox, you usually apply it to a parent element. It controls the alignments of the child element. A parent element using flexbox is called flex parent while a direct child element of flex parent is called flex child.

CSS Grid

Grid is great for building two-dimensional layouts. It shows the property for structuring layouts and offers flexibility for resizing and repositioning grid content. CSS grid enables you to produce powerful and responsive designs.

Grids have display settings for rows and columns which is known as a guide. It offers you great flexibility for auto layouts. In these guides, things automatically take up the next cell. Guides also provide manual layouts such as overlapping content. Grid also offers display property and you can apply grid on many elements such as Collection lists for dynamic data.

While in the grid, you have to manually add divs whenever you want to group content in a cell. Additionally, most of the layouts need to be built from scratch.

Quick Stack

It is a combination of Flex and Grid and does not have display property. Quick Stack is an element made up of other elements and allows you to build production-grade layouts faster and more efficiently. It provides the structure for simple to complex and responsive designs. Using Quick Stack, it might be possible that the developing layout process speed is pretty dramatically increased. When you add the Quick Stack element you see the Preset panel. Here you can see the flex and grid options but all these are built faster with Quick Stack.

As you know about all interfaces of Webflow 101 course. Now, it's time to design a website on it. We already explained to you how to design a custom Webflow website from scratch. Additionally, how to add content to the Webflow website. So don't waste your time and start building your website today with webflowdev support.