You've already seen this before, but let's do a quick recap of what's what in Webflow. If this isn't 1
your initial screen you might be on other pages, like Showcase. 2
So just click back to the Dashboard. 3
I'll be working in the free account as well, to make sure you get the same experience. When you click Create 4
Project, 5
you'll get options to start with. 6
There are a whole bunch of Free and Paid templates, but we're not in business for those. So we're going 7
to select a Blank site. 8
This is called the Designer. 9
This is where all the magic happens in Webflow. 10
Our page as we design is going to go on this white canvas and we'll be able to interact with elements 11
directly on this canvas. On the left toolbar 12
we have our controls: To go back to the Dashboard, Project Settings or the Editor. Underneath that we 13
have 3 important panels. 14
First one is the Elements Panel. 15
That's how we add new elements on the page. And then we have the Navigators Panel, which is sort of like 16
the layers panel in Figma. But not exactly the same, because the web works a little different than the 17
design interface tools like Figma. 18
Then we have the Pages Panel. That's going to show all the pages within our website. 19
From here we can add new pages and manage their settings and so on. 20
On the free plan, we only get two static pages. But we do get a bit more CMS pages. Although the hosting 21
plan isn't expensive. 22
It's like $12 per month. Which is quite similar to what you'd pay for a regular decent website 23
hosting anyways. 24
But here you don't have to worry about, 25
you know, FTPs, server settings, security and all of that. 26
No need to worry about other stuff on the left toolbar, 27
for now. We'll get to them when we need to. In the center, 28
you have these different device views. 29
This is where we make our website responsive and optimize it for different devices, to have a modern 30
website that looks great on any screen, in any device. 31
We're also able to resize the screen for each device. Like mobile for example, and optimize to make sure 32
it looks great on all sort of mobile devices. Not just one. As you resize it, 33
you can see that in different widths, 34
it shows what popular devices are sort of using that particular width. Now in Webflow 35
we don't write code, but Webflow writes code for us. 36
This code is accessible right here. After you are done building your website, you have 2 options, to 37
either keep your site on Webflow and publish it using their hosting. Or export the source code, which 38
includes HTML, CSS, JavaScript and all the assets organize exact the way an actual site would 39
be organized, and host it elsewhere. 40
The source code is production ready. Meaning, you can instantly publish a working site. With exception 41
for sites that have CMS and dynamic content and maybe even forms. This will need special installation 42
and code treatment. 43
However, we're not going to do that, because the best option is always to just keep the site on Webflow. 44
I keep my websites on Webflow. There's just too many good benefits for doing so. Like super-fast servers 45
anytime I need to edit the website for the future. The content editor, which is amazing feature of Webflow 46
which is for clients. So they can really simply and easily edit the website without knowing any 47
tools and knowing anything about coding, or development. There's just too many benefits. And I'm gonna 48
cover all these benefits. And how to, sort of, sell these to your clients and explain this to your 49
clients all these benefits, in the section about freelancing and finding work and all that. And to publish 50
the site on Webflow, we can do that from here. For free you can publish it on Webflow's domain. For a 51
custom domain we'll need to add a hosting plan. And on the right side, we have our Styles Panel. 52
This is where we manipulate and style every single element on the page. You can recognize this, it's sort 53
of similar to Figma's properties panel on the same side. Just like Figma, it edits whatever is currently 54
selected. There are many similar properties like size, typography, font names, sizes and so on. 55
And effects like blurring and shadows. There are more tabs on this side, but we don't have to worry about them 56
for now, we'll go over it when we actually need to. And that's it. That's a brief intro of the Webflow 57
Designer.