03:31
Welcome to Webflow Basic course where you'll learn how to create websites no-code!
12:17
Let's create Webflow Account and take a look what's inside Designer View
07:39
Your Webflow project has a lot of important settings - we'll explore some of the important ones
10:39
Learn how to import different Fonts for your project form Google Fonts, Adobe Fonts or Custom
10:06
Most important things about CSS styles and the Designer View where you specify the Selectors
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
09:18
Layout is the most important in HTML and CSS - let's talk about basics, media queries and structure
13:17
We'll work on the first section of our website - let's create hero section with text and image
09:13
Let's continue with hero section and apply some CSS styling to readymade structure
07:23
Components in Webflow are very powerful and similar to the ones you have in the design software
06:04
Explore different components within out website and focus on buttons and their different states
09:56
Let's start working on website menu - we'll use a predefined Navbar Component and structure the menu
13:18
For our website we'll create custom submenu and try to match it exactly to the project in XD
11:18
Let's create the hover state for our submenu that works across different screens
07:31
Let's explore different layout options for the submenu and add some custom code on top of Designer
07:14
We need to customize the menu so that it works good on different screens and devices
11:36
Let's apply last changes to the menu and breakpoints and finish this part of our website
15:53
Under hero section there are four features that we'll create and customise
10:30
Next section of our website is the one that we can use as a component throughout the page
08:56
We'll reuse existing hero section to create another section on the fly
06:36
Webflow has a lot of great, readymade components, we'll use one of them to create Tabs
06:58
Let's make our Tabs responsive with some simple tweaks for Mobile and Tablet views
12:26
This time we'll explore some more advanced settings of the grid in Webflow
08:50
We'll try some different ways in which you can create columns in Webflow for FAQ
08:40
Animation in CSS is pretty difficult. Luckily, Webflow makes it a breeze
06:02
Learn how to precisely control the time of your animations
06:28
Animations can be even more advanced with precise control over animation targets and Affect option
09:26
Add some life to your animations with Easing that you can easily apply
12:43
Here we'll create a separate section for recent articles on our page and use readymade component again
12:04
Working with custom forms in Webflow is super cool and easy - let's send some emails!
08:55
Learn how you can use custom Icon Font, such as Font Awesome in Webflow
12:55
Creating footer structure is pretty easy once we use readymade Webflow Component
07:58
Final touches, responsive versions and different tweaks to footer styling
08:10
Custom animations on different website elements can improve User Experience a lot
07:47
Animating elements on page load is another level for product pages - let's try it out
05:11
Using other no-code tools and integrations like Zapier can extend the possibilities of Webflow
10:03
There are few ways to publish your website - let's explore the most important ones
00:46
Thank you for your time and attention in this course
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!
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!
