A Beginner’s Tutorial to Building with Webflow

Webflow is a no-code web design tool that allows anyone to build professional, custom websites visually without needing to write any code. With Webflow, you can design responsive websites, build interactions, animate elements, and publish your site – all within the Webflow interface.

Some key features of Webflow include:

• Drag and drop interface for building sites visually
• Responsive design and adaptive layouts
• Custom CSS, JavaScript and HTML code support
• Animation and interaction tools
• Hosting, domains and SSL certificates
• Built-in CMS for managing content
• Ecommerce capabilities
• Design collaboration tools

Webflow removes the need to learn coding and allows designers, marketers, entrepreneurs and businesses to create their online presence quickly and easily. It’s a fantastic tool for rapidly prototyping sites, launching MVPs and building production-ready websites.

In this beginner’s tutorial, we’ll walk through the basics of using Webflow to build a simple website. We’ll cover:

Signing Up

The first step is signing up for a Webflow account at webflow.com.

Webflow offers a free plan that is perfect for getting started and building simple sites. The free plan includes:

• Up to 2 projects
• 100MB of storage
• Password-protected sites
• Webflow University access

Click the “Sign Up” button in the top right and enter your email and password to create an account.

Once signed up, you’ll be taken to the Webflow dashboard. This is where you can create and manage your Webflow projects.

Creating a New Project

Let’s start by creating a new blank project.

In the dashboard, click the “New Project” button. This will open the Project Creator.

Here you can select different starting templates like ecommerce, portfolios and blogs. But for this tutorial, we’ll use the blank Canvas template.

Give your project a name like “My First Webflow Site”. You can leave the Site URL blank for now. Then hit Create Site.

This will generate a new blank project file with some initial pages created.

The Webflow Interface

When you first open a new project, you’ll see the Webflow editing interface. This is made up of:

• The canvas – this is the main area where you build your site visually
• The pages panel – this lists the different pages in your site
• The navigator – displays different site elements like styles and components
• The panel toolbar – contains options like Undo/Redo

You build and design your site on the canvas by dragging elements from the navigator onto the page. Anything you add will be instantly converted to clean HTML and CSS code automatically.

Let’s take a quick look at some key parts of the interface.

Pages Panel

The pages panel shows all the pages that make up your website. These act like separate documents.

When you create a new page, it will get added here. You can drag and drop to rearrange the order.

Pages are vital for navigation. You’ll connect them together using a navigation menu later.

Navigator

The navigator contains all the design elements and components you can add to your pages such as:

• Text – headings, paragraphs, rich text
• Media – images, videos, icons
• Containers – divs, columns
• Navigation – navbars, menus
• Forms – inputs, buttons, selects

To add something, just drag it onto the canvas.

Properties Panel

When you select an element on the canvas, the Properties panel will open.

This allows you to edit all the properties and settings for that element like:

• Typography – font size, color, styling
• Layout – width, height, position, padding
• Visual Styles – colors, borders, effects

This is where you customize each element.

Styles Panel

The Styles panel is where you can create and manage CSS styles for your site.

Styles allow you to save and reuse visual designs. Once created, you can apply a style to any element with one click.

For example, you may have a Heading 1 style that controls the font and size for all H1 elements.

Using global styles helps ensure consistency across your site.

Interactions Panel

With the Interactions panel, you can add advanced behaviors like:

• Hover effects
• Click actions
• Page transitions
• Scroll animations

This allows you to build dynamic sites with custom interactivity without coding.

Assets Panel

The Assets panel manages all your media files like images, videos, audio clips and fonts.

You can upload and organize assets here, then reuse them across your site.

Now you have an overview of the main parts of the Webflow interface! Next we’ll start designing and building pages.

Adding Site Content

Let’s add some initial content to the homepage of our site:

1. Select the “Home” page in the pages panel so you are viewing it on the canvas.
2. Delete any existing placeholder elements. We’ll start from a blank canvas.
3. Drag a Heading 1 from the text elements onto the page. Edit the text to say “My Webflow Site”.
4. Add a Paragraph element below it. Edit this text to say “Welcome to my site built with Webflow!”
5. Drag an Image element below the text and upload any picture you want.
6. Select the image and center align it using the Layout panel.
7. Drag a Button element below the image and set the text to say “Learn More”.

You’ve now added some simple home page content! We can start designing this further next.

Styling and Design

Now let’s start styling our content to create the overall visual design.

Webflow includes some built-in styles we can use as starting points:

1. Open the Styles panel and click Typography. Apply the “Heading 1” style to your H1.
2. In Typography, apply the “Paragraph” style to your paragraph text.
3. In Colors, apply the “Primary” style to the button. This will color it blue.
4. Open Layout styles. Apply the “Container” style to the body. This will center the content.
5. Apply padding of 100px to the container using the Spacing tab.
6. Set a minimum height of 100vh so it takes up the full screen.

With those quick styles applied, you can already achieve a decent design!

You can further customize any element by changing properties in the right Properties panel, e.g.:

• Update font sizes, colors
• Adjust padding, margins
• Add borders, shadows
• Set background colors or images

Webflow converts these visual changes to clean CSS for you.

Adding a Navigation Menu

Now let’s make our homepage navigable by adding a menu.

1. Drag a Navigation element above the Header 1 to create a new navbar.
2. Open the Pages panel, right click on “Home” and select “Add to Navigation”.
3. Right click on “About” and also add it to navigation.
4. The menu will now be automatically populated with these pages!
5. You can customize the style, colors and layout of the navbar using the Properties panel.

Now you have a working navigation menu that links to inner pages.

You can continue adding new pages and connecting them this way. This allows visitors to navigate your site intuitively.

Adding Page Transitions

Let’s make navigating between pages feel more dynamic by adding page transitions.

1. Select the “Home” page name in the pages panel.
2. In the Properties panel, go to the Animation tab.
3. Enable the change to use a transition when exiting the page.
4. Select the “Fade” transition and set the duration to 0.3 seconds.
5. Repeat this for the About page, but select a different transition like “Slide left”.

Now when you click between pages, they will animate in and out gracefully!

This helps create fluid navigation without needing coding. You can be creative with different transition effects.

Using Webflow Collections

Collections allow you to manage lists of content in Webflow like blog posts, products, team members etc.

Let’s create a simple collection for testimonials:

1. Open the Collections panel and click “Add new collection”.
2. Name it “Testimonials” and add 2 text fields: Name and Testimonial.
3. Click Create to generate the collection.
4. Populate it by adding entries with name and testimonial text.
5. Drag the Collection List element onto your page and select your collection.

Now Webflow will automatically render these entries as a list! You can display collections anywhere on your site.

Collections make managing and displaying dynamic content simple. You’ll use them heavily in blogs, stores etc.

Adding Interactions

Webflow includes powerful tools for adding animated interactions without code. Let’s add some to our testimonials.

1. Select the Collection List element, open Interactions and enable on “Hover”.
2. Click Reverse to flip the items on hover.
3. Enable a scale transition to create a smooth animation.

This will now scale and flip the testimonials on hover! Interactions like this are easy to add in Webflow.

Some other interactions you can add include:

• Hover animations
• Click actions to trigger events
• Scroll-based animations
• Tap and drag gestures on mobile

Explore the Interactions panel to create engaging dynamic effects.

Creating Reusable Components

Components allow you to turn sections of your site into reusable parts. This saves time and ensures consistency.

Let’s make our testimonial into a component:

1. Select the testimonial list element and open the right Properties panel.
2. At the bottom, click “Convert to Component”.
3. Name it “Testimonial”. It’s now a component!
4. Delete it from the page.
5. Open the Components panel and drag your saved component back onto the canvas.

Now you can reuse this component on any page! Components are extremely powerful for buttons, sliders, headers etc.

Any changes made to the component will sync across your site. Think of them as custom HTML blocks.

Publishing your Site

Once your site is ready, you can publish it live with just a click in Webflow.

1. Open Site Settings and connect your site to a Webflow subdomain or custom domain.
2. Use the Deploy panel to push your site live.
3. Enable password protection if you want your site private temporarily.
4. Submit to search engines so your site can be indexed.

Your website is now live to the world! Webflow will generate a static HTML version of your site and host it on their fast global CDN.

You can come back to Webflow at any time to update the design or content, then republish.

Advanced Features

This tutorial covered the basics, but Webflow offers tons of powerful features for advanced sites:

• CMS collections for dynamic content
• Ecommerce shopping carts
• Web animations and parallax
• Form building and submissions
• Member login areas
• Video backgrounds
• Custom code editing

As you grow, you’ll be able to build incredibly advanced sites without ever looking at code. Webflow scales from simple to super complex.

Next Steps

• Browse Webflow templates and clone sites to edit
• Take their courses to build skills
• Watch tutorials on YouTube
• Check the Webflow University for docs
• Join the Webflow Facebook group to connect with the community
• Set up a custom Webflow subdomain to host your sites

The best way to get started is by diving in! Just start building sites directly in Webflow and learn as you go.

You now know the basics to start designing, building and launching sites visually with no code. Webflow provides unlimited creative freedom if you’re willing to learn.

Happy Webflowing! Let me know if you have any other questions.