Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Webflow Essentials: Hands-On Guide to Building Websites
Highest Rated
Rating: 4.7 out of 5(14 ratings)
370 students

Webflow Essentials: Hands-On Guide to Building Websites

Webflow Essentials: A Hands-On Guide to Building Beautiful Websites
Highest Rated
Created byPeter Johnson
Last updated 3/2023
English
English [Auto],

What you'll learn

  • Hands-on learning by build a portfolio website.
  • Detailed overview of Webflow's designer interface.
  • Create responsive websites using Webflow where the website automatically adapts to different screen sizes.
  • Learn about Flex, columns, divs etc.. and how to efficiently use them.
  • Learn about Classes, Re-usable components, Pages and more
  • Create stunning animations for Page load, Scroll, Sections and more
  • Create custom navigations in Webflow.
  • Learn to convert a Figma file to website using Webflow.
  • Discussion on the best practices for building websites
  • Learn about Tips & Tricks which can make the workflow faster and efficient.

Explore related topics

Course content

1 section • 12 lectures • 1h 18m total length

  • Introduction1:31

    Master no-code Webflow basics by creating an account, exploring the designer interface, and building a responsive portfolio website from scratch with classes, reusable components, pages, links, and animations.

  • Getting started with Webflow3:09

    Create a new webflow account, explore starting from scratch with a blank site, and learn the basics of the designer interface, layout, and canvas manipulation to build a portfolio.

  • Designer Interface Overview6:05

    Explore the web flow designer interface—from the dashboard and project settings to the editor and eye previews—and learn to manage breakpoints, navigate elements, and publish or export code.

  • Building the Hero Section19:25

    Build the hero section from an empty page by importing assets, adding a two-column layout with heading, paragraph, image, and button, and applying classes, hover effects, gradients, and a navbar.

  • Grid Layout6:05

    Build a new section with a container and a grid, and customize columns. Place a centered heading and four images, assign a logo class, and adjust spacing.

  • Project Section8:26

    Learn to center the hero container, then build the project section with a pre-built gallery slider, customize slides and images, adjust typography and slider settings, and preview the result.

  • Blogs Section7:50

    Learn to build and customize a blog section in Webflow using pre-built components, including card layouts with images, headings, read more links, borders, and a responsive slider.

  • Creating a new page8:04

    Create a new page, link pages, and build reusable components like nav bars and footers in Webflow; connect sections with ids and apply Montserrat typography.

  • Animation5:07

    Learn to implement Webflow animations with the interactions panel, triggering a fade-in move on page load by setting initial and end states and opacity, then preview the hero image.

  • Making the website responsive6:14

    Learn to make websites responsive across desktop, tablet, and mobile breakpoints in Webflow by adjusting flex layouts, centering content, and tuning padding, and stacking hero elements vertically on mobile.

  • Publishing the Website6:24

    Publish your Webflow website by choosing the webflow.io URL or linking a custom domain, and understand workspace and site plans, including form submissions and project settings.

  • Conclusion0:30

    Concludes Webflow Essentials by inviting feedback in the review section. Peter Johnson signs off with thanks and a commitment to improve based on viewer suggestions.

Requirements

  • A Webflow account is required, I'll show you how to make one within the course.
  • There no prior knowledge of Webflow required as we discuss everything from the base.
  • No previous design skills or experience required.

Description

Welcome to the "Webflow Essentials: A Hands-On Guide to Building Beautiful Websites" course.

Webflow is a powerful and intuitive website builder that allows you to create stunning websites with ease. And now, you can learn it all in this class!

In this comprehensive guide, you'll discover the basics of Webflow and how to use it to build your own websites. I'll will take you step by step through the process, covering everything from designing your website to publishing it live.

You'll start by learning how to navigate the Webflow interface and how to add and customize elements to your pages. Then, you'll dive into more advanced techniques like using dynamic data, custom interactions, and advanced styling options.

And the best part? You'll practice what you learn as you work on a hands-on project by building a Portfolio website throughout the course. This will give you real-world experience and the confidence to create your own stunning websites with Webflow.

Ready to bring your website dreams to life? Our Webflow Beginners Course is the perfect place to start! With hands-on learning and expert instruction, you'll go from a complete novice to a Webflow pro in no time. Whether you're a complete beginner or just looking to expand your skills, this course is perfect for you. Enroll now and get ready to master Webflow and build beautiful websites like a pro!

Who this course is for:

  • Beginners who wants to create stunning website without writing even a single line of code.

Report abuse