Name: Webflow for Beginners: Build a landing page
Rating: 4.6 (21 reviews)

Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Created byAshleigh Second

Last updated 12/2023

English

What you'll learn

How to get started in Webflow
Understand what HTML and CSS is and they are used to create all websites
How to add div blocks, container and sections and other elements in Webflow
How to style elements in Webflow and affect the layout and design
How to build a landing page in Webflow based on Figma designs
How to make the website responsive on all devices
How to connect a Domain name and publish the site

Course content

3 sections • 13 lectures • 2h 33m total length

Intro to Webflow for Beginners Training Course1:43
A little intro and overview of the course that I have planned for you.
Introduction to HTML and CSS9:12
I will walk through the basics of the Webflow designer layout and talk through, HTML, CSS, and class names and structure.

Building the Navbar13:50
Let's get started on the first component of the landing page; the NAVBAR.
We use Anton and Space Mono fonts on the site and these can be accessed and downloaded from Google Fonts.
Building the Hero8:13
In this lesson, I will walk through how to build out the HERO component.
I have uploaded the image file that we will use. All the images on the website are courtesy of Chevanon Photography (https://www.pexels.com/@chevanon/). Feel free to use your own images if you prefer.
Building the Intro Section20:11
I will teach you how to build out the Intro section, we use a combination of Grid, and Flex layout as well as learning about combo classes and link elements.
Building the Quote Section6:17
In this lesson, I show you how to build out the full-width quote section using a background-image and linear overlay.
I have uploaded the image file that we will use. All the images on the website are courtesy of Chevanon Photography (https://www.pexels.com/@chevanon/). Feel free to use your own images if you prefer.
Building Testimonial Slider29:30
In this lesson, we will learn to use the slider component in Webflow and customize this to match our designs.
Building the Contact Info Section11:36
Taking from previous lessons, we will use the grid layout for the Info section as well as learn more about the use of link blocks for phone and email.
I have uploaded the image file that we will use. All the images on the website are courtesy of Chevanon Photography (https://www.pexels.com/@chevanon/). Feel free to use your own images if you prefer.
Building the Contact Form15:16
Let's utilize the form block element in this lesson. We will customize this to match our Figma designs while also going over how to edit the success and error messages.
Building the Footer11:51
For the final section on the landing page, we will build out the Footer.
Page tweaks and Responsiveness17:00
Before we can push the landing page live, we first need to do some page testing and fix responsiveness. We do this by utilising the Weblow audit feature to highlight errors on the page. After that, we will look at the different breakpoints to make sure the site is good on all devices and browsers.
Connecting your Domain and Publishing the Site7:50
In our final lesson of the course, I will show you how to connect your domain. In this case, it is with Google domains and we will update some DNS records to verify the domain with Webflow. After that, we will publish our landing page, well done!

Requirements

No Webflow experience required. All you will need is a Webflow account, a laptop or pc and willingness to learn.

Description

Welcome to my fun Webflow beginner's course!

Hi, I'm Ashleigh and I will be your friendly instructor as we build out a simple landing page for a cafe based on the Figma designs.

Perhaps you are a complete beginner looking at dipping your toes in the water or maybe you have tried working in Webflow before and have gotten stuck and hit a brick wall. Don’t worry, I am here to help! This is the perfect introduction to Webflow to get you started.

Here's what's on the agenda for this course:

We'll kick things off with a review of HTML and CSS, and how they're implemented in Webflow using the element and style panel.
You'll follow along as we learn how to structure a website with div blocks, containers, sections, grids, and Flexbox.
Together, we'll create everything from the navigation menu to the footer, including a form and testimonial slider.
Once we've ensured the site looks fantastic on various devices, I'll guide you through connecting your domain and publishing your site.

There has never been a better time to learn Webflow. Whether you just want to expand your skill set or perhaps learn to be a Webflow developer, hopefully by the end of the course you will have the base to be able to start building your own projects.

Let's get started!

Who this course is for:

Beginners looking to learn Webflow.
Beginners wanting to learn web development
Beginners wanting to create website without having to know how to code

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 11min

Building a Cafe Landing Page10 lectures • 2hr 22min

Final Thoughts1 lecture • 1min

Requirements

Description

Who this course is for: