By the end of this tutorial, you'll learn how to create your first Webflow home page and leave with a solid understanding of how to create powerful Webflow websites by visually coding HTML and CSS.
The first rule for a website is to make it as light as possible! We have consciously made a mistake in this post: we added too many heavy GIFs, but that's for good! So some of the best practices are to minimize images, use SVGs while building a website with top-notch structure, high accessibility and high speed.
This tutorial's purpose is to teach individuals, if you are an organization with big-scale marketing needs, you should probably ask help from a professional webflow development team and maybe chat with us.
There's a lot of hype around the no-code movement, a wave of technologies that allow us to create software without code. But code is at the heart of the Internet. It's not about the absence of using it to create websites and apps. This movement is actually focused on making it easier (and faster) to code by making it visual. This means that you just design, and platforms like Webflow write the code for you.
If you approach Webflow with the design mindset, based on the code base, you'll be able to learn it quickly. What's more, you might even learn how to write real code.
Webflow is a web design and development tool, eCommerce, CMS and hosting platform. Each aspect of the platform is represented by a particular set of products/features:
A visual web design tool firmly rooted in web standards and best practices, the Designer translates your design decisions into clean, production-ready HTML, CSS, and JavaScript. Webflow as created to allow designers to develop websites in a familiar way, such as visually, without sacrificing quality.
If you're primarily a prototyper, you can use the Designer on its own, sharing the prototype with developers to reproduce or exporting the code.
But to experience the full power of Webflow, we recommend combining the Designer with the CMS and the Hosting.
Like the Designer, the CMS is a code-free web development tool. It has both in-Designer elements (where the site designer works) and on-site elements (where the client and/or content managers work).
For now, just know that in the Designer, CMS allows you to structure content types that you publish over and over again, such as blog posts, product pages, etc., by combining modular "fields." After you've created the content types, which webflow calls it "Collections", you can use the Designer to determine how the collection elements will look on your site (for example, how individual blog posts will look).
Webflow eCommerce allows you to leverage the power of the Designer and CMS to create a fully customized eCommerce experience. Any Webflow design can be converted into an eCommerce site, but the hosting price differs slightly from a regular website. You can connect your eCommerce site with payment gateways such as Stripe, Apple Pay, Paypal or Google Pay, while also extending the capabilities of your stores with various integrations.
The final piece of the Webflow puzzle is their hosting platform. Supported by Amazon Web Services (AWS) and Fastly, it's super fast, super reliable, has enterprise-grade security, and you'll need it to enjoy some of Webflow's best features.
Before we create our first blank design, we need to understand how websites are basically built on the Web - with HTML and CSS.
Websites use the box model, a design principle that makes us understand that everything on a web page is basically a box inside a box. These boxes are HTML components known as "divs."
In the image above, we have a section (outlined in black), a container (outlined in red) to keep everything responsive within the section, and various divs (outlined in blue) that act as content within the container.
The nomenclature for section, container, and div comes down to how you style and label the divs, using what are called CSS classes.
We use CSS for the spacing, positioning, alignment, fonts, and styles of these HTML boxes and their contents. We add the so-called CSS class to each box, which is like a preset you create for the style settings. The classes are reusable throughout your site and allow you to stay organized as you create your website.
Summary:
Congratulations, you now have a general understanding of how websites are built. A fun exercise you can do now is to go to your favourite website, let's say apple.com, and open the inspection element of your web browser.
You can view the code (right) and see how everything is a box (aka a div). Inside these divs are sometimes other divs with content like headings, paragraphs and buttons. This is all HTML. You can see how the designer at apple.com labeled his classes for each component/element and div, while also being able to see the CSS in the Styles section.
Let's start building!
The best way to learn Webflow is to actually create in Webflow. To get the most out of this guide, I need you to follow along with me through all the steps we're about to tackle. The first step is to create an empty project.
Here you will see everything you need to create any powerful website. On the left side you'll see everything you need to add and edit components, and on the right side you'll see everything you need to define the style of those components.
In Webflow, the first 3 buttons on the left side of the Designer are the ones you use for HTML elements.
The first one is the Add Elements panel. Here you can add components like divs, buttons, text, images, forms, etc. The second is where you can add and manage symbols. These are sections that you can pre-save and reuse on multiple pages, such as the navigation bar or footer. The third is the Navigator, where you can see the hierarchy and structure of your components.
Before we drop any elements onto the canvas, let's determine our typeface and font size for our body (the main page we build on).
Start by selecting Body in the Navigator. Then, go to the Style panel (on the right) and select the class "Body (all pages)." Any style changes we make to this class can be reused on additional pages on our website. For example, if we want to add a main background color to all of our pages, we would do that here. In this case, we keep the default white color.
Let's establish our basic font and size by going to Typography and selecting a font from the list. You can also add a custom font in your project settings that will be reflected in the drop down menu.
We've selected the Verdana font and now we want to select the base font size. 16px is a standard for font size and adding "1.4-" for the height will make the font height 1.4 times the font size. If you want to learn more about advanced web typography and font settings, watch this video:
Okay, let's add some elements. We'll start by adding a default navigation bar.
Next, below we will add a section div for our hero section. Once the section div is in place, we can add a class and call it "Hero Section", just so we can stay organized and see all the elements neatly in our Navigator.
Now we can make some changes to the style of our navigation bar, starting with making the background the same color as our body.
Just select the navigation bar in the Navigator and change the background color in the Style panel.
Now let's add a logo. Make sure you save your logo as a PNG or SVG and upload it to the resource manager in your Webflow project. From there, you can drag and drop the resource icon onto the canvas.
Now let's adjust the padding on the logo and add an extra navigation link.
Adding a new navigation bar shortcut is as simple as copying and pasting: Command C and Command V on Mac, Control C and Control V on Windows.
Well, we have a simple navigation bar. Let's move on to the hero section.
We'll start by adding a container to our Hero section. We want to recreate the current Webflow homepage (a bit), so we'll also need to add a grid to our container.
Once the grid is added, we can right click on it and delete the default additional row. This way we have a simple two column grid inside our container.
Referring back to the box model, we would also like to add a div in each column and add classes (Left Column Grid and Right Column Grid) so that we have them labeled correctly and can model them later.
We've added an image element to our right column grid and now we can add our content inside the left column grid.
Let's start with a title, a paragraph, and a button. As you can see in the video above, we can add our elements by dragging and dropping them onto the canvas or by dragging and dropping them directly into our Navigator. When working with grids, it's easier to align things within the Navigator. As you can see, we added the paragraph in the Navigator instead of the canvas. This is because the element wasn't going where we wanted it to go.
Now we can add our content and shape it using the Style panel on the right. Let's adjust the font size and add a margin for spacing.
Okay, let's make this look a little better by starting with the CTA (call to action) button.
We change the color of the button and add more fill between the button text and the inner edges of the actual button.
We use padding to create space inside the elements and margin to create space outside the elements. For something like separating our header, paragraph, and button, we used margin because we wanted to create space between those elements. But for our button, we wanted to create more space inside the button element, so we used padding.
Which brings us nicely to the part where we add padding to our Hero section to give our grid some space from our navigation bar.
After adding fill to our Hero section, we also want to center our image within the right column grid to align it with our left column grid.
To do this, we simply select on the right column grid that we created earlier and within the Style panel, click Align to Center. This will ensure that all content within the right column grid falls in the center of the box.
Now let's add a section to show all the clients Webflow have.
After creating our five column grid, we set the class name on the grid to Client Logo Grid. Now, we would like to upload our logos to our asset manager. We're going to use a logo five times for demonstration purposes.
Simply drag and drop your logos into each column of the grid. After releasing the first image, we want to make sure our logo is in the center of our grid. To center the logo, select the image and in the Style panel click Justify to center.
Since we're using the same logo for all five columns, I simply copied and pasted them (Command C and Command V on Mac, Control C and Control V on Windows) into the video above.
We just created our first homepage!
We hope you have a better understanding of how to approach Webflow as a beginner. If you can make it this far, your Webflow development skills will increase in no time.
For reference, here's what my Navigator looks like. Note the placement of our components:
But wait, all we know is that this looks good on desktop. What about tablet or mobile?
Now, if you've ever worked with responsive design before, you'll know that things can get a little tricky at this stage.
The good news is that Webflow has already done most of the hard work for you! To see it in action, we'll go through the various device previews available in the middle of the top bar of the Designer:
Now go through each breakpoint and see how it affects your design.
If you design like we did, Webflow will automatically try to make everything responsive. But sometimes you need to resize or move things around if you're using Grid (which we are).
We can see that anything in tablet mode, or smaller, makes our image look close-up. Our font size is also a bit too large, along with our content being too close to the edges.
Let's fix this.
Whatever design changes we make in tablet mode will be reflected in the smaller size . So start in tablet mode and work your way down as needed.
First, start by fixing the way the foreground image is displayed. Instead of squishing the image to the right, we want to move it to the bottom of the hero section.
To do this, click on Edit Grid. From there add an extra row and right click to delete the left column where our featured image is. This will automatically force our right column grid, with our image inside it, to the new bottom row we created.
Once that happens, click Right Column Grid and move the image to the center of the div by clicking Justify Center. From there, add a top margin to the right column grid to lower it.
Looking good, let's switch to the mobile horizontal mode.
The first thing we see is that the font size is too large, let's reduce it. Next, we want to bring our content in from the edges. To solve this problem, select the container where the entire grid is located and add padding to the sides.
Last, let's go to the vertical floating mode.
Once again, the font is too large. Let's resize the header, paragraph, and button text.
They're done!
As you can see, the client logos at the bottom remained responsive and resized. But if you want the logos to stack on top of each other, follow the exact same process we followed for the grid in our heroes section.
You've got it, your first responsive homepage, built in Webflow.
You should be proud, I know I am. We just visually developed an entire homepage with code. Building in Webflow allows us to experience the power of the code, without actually writing it. Take a look at all the HTML and CSS we wrote visually in this guide:
Now, if you followed all the steps to implement a website on webflow using best practices, you should start to build a real website from a figma file, if you have questions - ask!
