Webflow Basics

Create Awesome Websites in Visual Editor

4.25 (14 reviews)
Udemy
platform
English
language
Web Design
category
instructor
87
students
5.5 hours
content
Mar 2021
last update
$49.99
regular price

What you will learn

You will learn how to use Webflow from scratch and master layout tools that will allow you to create static websites. You'll learn along and create a practical, minimalistic company site.

Description

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


Who is this course for

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!

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.

Content

Introduction

Introduction
Designer View
Settings
Fonts

Practical Project

CSS Styles
Breakpoints
Layout Basics

First Page Sections

Hero Section
Hero Styles
Simple Components
Simple Components

Working with Menu

Menu
Submenu
Hover State
Fixed Submenu
Mobile Menu
Finished Menu

Other Sections

Features Section
Delivery Section
Standards Section
Tabs Section
Responsive Tabs
Logo Grid

Animations and FAQ

FAQ Structure
Animation Basics
Animation Timing
Animation Effects
Animation Easing

Let’s finish this up

Recent Articles Section
Contact Form Section
Font Awesome
Footer part 1
Footer part 2

Bonus Lessons

Custom Animations part 1
Custom Animations part 2
Form in Zapier
Website Publishing
Thank you

Screenshots

Webflow Basics - Screenshot_01Webflow Basics - Screenshot_02Webflow Basics - Screenshot_03Webflow Basics - Screenshot_04

Charts

Price

Webflow Basics - Price chart

Rating

Webflow Basics - Ratings chart

Enrollment distribution

Webflow Basics - Distribution chart

Related Topics

3915904
udemy ID
3/15/2021
course created date
5/7/2021
course indexed date
Bot
course submited by