LearnUX.io Awwwards Honorable Mention

Webflow Basics

  1. Introduction 03:31


    Welcome to Webflow Basic course where you'll learn how to create websites no-code!

  2. Designer View 12:17

    Designer View

    Let's create Webflow Account and take a look what's inside Designer View

  3. Settings 07:39


    Your Webflow project has a lot of important settings - we'll explore some of the important ones

  4. Fonts 10:39


    Learn how to import different Fonts for your project form Google Fonts, Adobe Fonts or Custom

  5. CSS Styles 10:06

    CSS Styles

    Most important things about CSS styles and the Designer View where you specify the Selectors

  6. Breakpoints 05:26


    Let's take a look at our website's layout and set up Webflow so that we can easily translate it into readymade website

  7. Layout Basics 09:18

    Layout Basics

    Layout is the most important in HTML and CSS - let's talk about basics, media queries and structure

  8. Hero Section 13:17

    Hero Section

    We'll work on the first section of our website - let's create hero section with text and image

  9. Hero Styles 09:13

    Hero Styles

    Let's continue with hero section and apply some CSS styling to readymade structure

  10. Simple Components 07:23

    Simple Components

    Components in Webflow are very powerful and similar to the ones you have in the design software

  11. Button States 06:04

    Button States

    Explore different components within out website and focus on buttons and their different states

  12. Menu 09:56


    Let's start working on website menu - we'll use a predefined Navbar Component and structure the menu

  13. Submenu 13:18


    For our website we'll create custom submenu and try to match it exactly to the project in XD

  14. Hover State 11:18

    Hover State

    Let's create the hover state for our submenu that works across different screens

  15. Fixed Submenu 07:31

    Fixed Submenu

    Let's explore different layout options for the submenu and add some custom code on top of Designer

  16. Mobile Menu 07:14

    Mobile Menu

    We need to customize the menu so that it works good on different screens and devices

  17. Finished Menu 11:36

    Finished Menu

    Let's apply last changes to the menu and breakpoints and finish this part of our website

  18. Features Section 15:53

    Features Section

    Under hero section there are four features that we'll create and customise

  19. Delivery Section 10:30

    Delivery Section

    Next section of our website is the one that we can use as a component throughout the page

  20. Standards Section 08:56

    Standards Section

    We'll reuse existing hero section to create another section on the fly

  21. Tabs Section 06:36

    Tabs Section

    Webflow has a lot of great, readymade components, we'll use one of them to create Tabs

  22. Responsive Tabs 06:58

    Responsive Tabs

    Let's make our Tabs responsive with some simple tweaks for Mobile and Tablet views

  23. Logo Grid 12:26

    Logo Grid

    This time we'll explore some more advanced settings of the grid in Webflow

  24. FAQ Structure 08:50

    FAQ Structure

    We'll try some different ways in which you can create columns in Webflow for FAQ

  25. Animation Basics 08:40

    Animation Basics

    Animation in CSS is pretty difficult. Luckily, Webflow makes it a breeze

  26. Animation Timing 06:02

    Animation Timing

    Learn how to precisely control the time of your animations

  27. Animation Effects 06:28

    Animation Effects

    Animations can be even more advanced with precise control over animation targets and Affect option

  28. Animation Easing 09:26

    Animation Easing

    Add some life to your animations with Easing that you can easily apply

  29. Recent Articles Section 12:43

    Recent Articles Section

    Here we'll create a separate section for recent articles on our page and use readymade component again

  30. Contact Form Section 12:04

    Contact Form Section

    Working with custom forms in Webflow is super cool and easy - let's send some emails!

  31. Font Awesome 08:55

    Font Awesome

    Learn how you can use custom Icon Font, such as Font Awesome in Webflow

  32. Footer part 1 12:55

    Footer part 1

    Creating footer structure is pretty easy once we use readymade Webflow Component

  33. Footer part 2 07:58

    Footer part 2

    Final touches, responsive versions and different tweaks to footer styling

  34. Custom Animations part 1 08:10

    Custom Animations part 1

    Custom animations on different website elements can improve User Experience a lot

  35. Custom Animations part 2 07:47

    Custom Animations part 2

    Animating elements on page load is another level for product pages - let's try it out

  36. Form in Zapier 05:11

    Form in Zapier

    Using other no-code tools and integrations like Zapier can extend the possibilities of Webflow

  37. Website Publishing 10:03

    Website Publishing

    There are few ways to publish your website - let's explore the most important ones

  38. Thank you 00:46

    Thank you

    Thank you for your time and attention in this course

Webflow Basics

Duration: 05:43:03 Last update: 3 years ago
  • Key Points
  • Author
  • Source Files
  • Who is this course for?

Webflow is one of the best visual website editors right now. It is a real revolution when it comes to designing and implementing both static and dynamic websites and even ready-made e-commerce systems. With the use of no-code, publishing pages is faster and easier than ever. This course introduces you to the world of web design without coding with Webflow, addressing the most important element - layout. In short, you will learn all the techniques that allow you to create static websites in Webflow, from a blank page. This is a great introduction for those of you who have not dealt with Webflow yet, want to establish your foundations, or create your first website!

  • A practical website implementation
  • Create a static one-page site
  • Learn layout tools in Webflow
  • Publish your website on a subdomain
  • Structure and Layout explained
  • From XD to Webflow

Greg Rog - “My work is all about design, coding and education. For over 10 years I’ve been a professional designer, design lead and UX consultant for companies such as Microsoft or Google. I work closely with Adobe as Community Professional. I also run a software house and a training facility, speak on design conferences and more. I’m curious, passionate and I love sharing knowledge.”

Sorry, you don’t have access to the project files.

Why don’t you subscribe and get full access throughout the site?

Webflow is a brilliant tool for all willing to start their adventure with creating websites - simple visual interface, extensive possibilities, hosting, SSL, custom domains - all in a few clicks. Therefore, this course is a good starting point for beginners who want to build a website. However, without a solid foundation of HTML and CSS it's pretty difficult to work with Webflow. That is why I strongly recommend that you do at least the basic HTML and CSS course before Webflow courses. Webflow's greatest potential is for those of you who already understand web technology and are able to create websites. In the hands of such people, Webflow is a tool that incredibly speeds up work and delivering new projects to clients. Webflow is also a great tool for UI/UX designers and web developers who can work and deliver projects in a completely new way!

Modern Visual Editor

If you've heard about WYSiWYG - Webflow has practically nothing to do with them. The code generated by Webflow is clean, aesthetic HTML, CSS, JavaScript, and its quality is only determined by how well you know the tool and web technologies. Weblflow allows you to create pages in record time, thanks to the fact that you do not have to write code. Most tasks can be done in visual editor while our website is still based on semantic code and modern standards!

Modern Visual Editor
Webflow's Abilities

Webflow's Abilities

They are practically endless. Apart from the fact that you can create static pages, you also have the option of preparing dynamic websites based on CMS and even complete E-commerce systems, building them from ready-made components. Webflow, however, differs from "page builders" - we usually start from a blank page, and thus we can implement completely custom layout. Then, with the help of Webflow - publish the finished website, add domain name, hosting and... violla! Your website is live without difficult configuration. In addition your client can edit page directly in the browser with the help of the built-in CMS Editor!

What you'll learn?

In this course, we'll focus on Layout - the basis of effective work in Webflow. This means that we will discuss the semantic elements of the page (HTML) as well as its styling (CSS). You will learn how to use popular CSS Layout constructs such as Grid or Flexbox in Webflow. I will show you how to implement a complete page layout from a blank page, which we previously designed in the Adobe XD course. If you want to learn how I designed the website itself - I refer you to this course. You can rewrite it in advance or in parallel with the Webflow course in front of you.

What you'll learn?
What's next?

What's next?

Once you've mastered the basics of Webflow, you'll be able to successfully create static web sites in record time. You will learn everything on construction and styling. So you will be able to go on a further journey with Webflow with the next courses that you can find on learnux.io and add dynamic data to your website (in the Advanced course we will expand our site with a blog), as well as the entire E-commerce system (which we will create in a separate course). All three courses complement each other and so that you can get to know even the most advanced features of Webflow!