New Check out the curated list of the finest design resources I've gathered for you! Take a look →

How I Building Webflow Website

In this article, I will share my experience of building Webflow website. Throughout the process, I learned a lot from various sources, including tutorials, communities, and my own projects.

I want to share this knowledge with you and provide you with a step-by-step guide for building a Webflow website.

Building a Webflow Website

Learning From Tutorials and Communities

When I was starting to learn how to build a website in Webflow, I found it helpful to watch Timothy Ricks’ Web Interactions tutorial. Additionally, I followed Finsweet’s client-first method and learned from the “made with Webflow” community website to see how other Webflow developers create websites.

Creating My Own Starter Template

Eventually, I created my own starter template, which I am still improving. This template is inspired by what I learned and the various projects I have worked on. It has helped me speed up my workflow and make the development process more efficient.

Create my own starter template for building webflow website
Create my own starter template for building webflow website

Class Structure for Building a Webflow Website

1. Markup

Firstly, I start by creating the markup. This includes setting up the header, footer, and basic layout structure.

|-- body
	|-- .page
		|-- .header-nav
		|-- .page__inner
		|-- .footer

2. Container Class

Next, I add a container class to define the maximum width for the content. This helps to ensure that the website is responsive and looks good on different screen sizes.

|-- .before-container
	|-- .container
### alternatif if the site has variation container
|-- .before-container
	|-- .container.wide
	|-- .container.large
	|-- .container.small

Naming Strategy for Building a Webflow Website

1. Utility Class (Text Styling Example)

For text styling, I use utility classes. If I need to adjust the styling, I add a secondary class depending on the component I am creating. For example, if I create a testimonial that includes a quote with italic styling, I use the following naming strategy:

|-- .text-style-italic
===
|-- .testimonials
	|-- .text-style-italic.testimonials-quote

If I want to set the text to normal style on a tablet screen, I add the class “testimonials-quote” to overwrite the utility class on mobile.

2. Component Class (Button Example)

For components, such as buttons, I use a specific naming strategy to make it easier to create and maintain the website. If a button has two variations, I use the following naming strategy:

|-- .button
	|-- .button__text
	|-- .button__icon

If the button has more than two variations, I use the following naming strategy:

## Button variation color
|-- .button.button-primary
|-- .button.button-info

## Button variation with stroke style
|-- .button.button-stroke
	|-- .button__text
	|-- .button__icon

I found it helpful to learn from various tutorials and communities, as well as creating my own starter template to speed up my workflow. Using a consistent class structure and naming strategy has also helped me make the development process more efficient

I hope this tutorial helped you get some references for building webflow website. You may also want to check out my other Webflow website tutorial

Rizwan Aritonang

An independent WordPress & Front-End Developer from Bandung, Indonesia.

Get In Touch

Leave a Comment