This course has six parts. 1
In part one, you will learn secrets of good design. 2
In part two, you will practice design on real projects. In part three, you will learn Webflow by building 3
a company's home page. In Part four, 4
we're going to do a client project from start to finish. 5
I'm going to take you through the same process that I go through with each client. 6
We're going to start by wireframing, then designing the website in Figma, then taking the whole thing 7
and designing and building inside Webflow, with a blog. And finally publishing and delivering it to the 8
client. In part five, 9
you'll learn the secrets of making money freelancing. And part six, has several advanced tutorials both 10
in design and Webflow. In the promo video 11
I mentioned Webflow first, but we actually are going to start this course with the design. Because every 12
good website project starts with a design first. Just like any great building, always starts with the 13
architectural plans first and then comes the construction. Since we start working with Webflow only 14
in the third part of this course, I wanted to give you a little taste before we go on. 15
So go ahead and open up a Webflow, so we can take it for a quick spin. 16
You should already have the Webflow account from the previous lesson. 17
If not, go to Webflow.com and sign up. 18
Use Google Chrome or Safari. 19
The Webflow designer works the best in there. 20
After you sign up, you'll get to some version of this page. Or if you're on a dashboard, click New Project 21
button and choose blank site. 22
As a first time user, 23
you'll get this onboarding pop-up. You don't need to go through it, but you can if you want to. 24
This is where the magic happens. 25
As you can see, it has a very Photoshop-esque 26
look. The website is built right in here. On the left, 27
we have a navigator. 28
It shows the structure of the page and all objects on it. 29
Right now there's only one object - the body. From the plus icon we can add new elements. 30
Let's add a container which we can simply drag on the canvas. 31
Also let's add a heading and a paragraph inside. 32
And write something in it. 33
Let's center the text. 34
We can do that by selecting the container and pressing Center Alignment under typography. And we're going 35
to add some spacing to move the text in the middle of the screen. 36
Keep the container selected and with your mouse drag this top padding handle. 37
You can toggle a preview mode, to see how your page looks like in real-time. 38
If you go to Code Export, on top of the toolbar, you're going to see the actual code that Webflow wrote 39
for us. HTML shows the objects that we have added, like the container, heading and a paragraph. And 40
inside CSS, you will see the style changes that we have made. The top padding and the center alignment. 41
We could export this code and host it anywhere else. 42
The page would work perfectly outside of Webflow too, but we're not going to do that in this course. 43
The best option is to publish our page on Webflow. So go to Publish and click Publish to Selected 44
Domains. Once it's done, click the link to open the live site. Until we buy the hosting, you get this made 45
in Webflow badge. 46
Besides that, that's how the actual live page looks like. Your first ever web page built from scratch. 47
Ugly and useless, but still a web page. Without knowing how to design, all our websites would look as 48
unappealing as this one. Even if we were a pro Webflow designers. 49
The design skill always comes first. 50
So we're going to put the Webflow aside, for now, and learn and practice good design. And then in part 51
three, come back to Webflow, so we can make the magic happen and design and build beautiful websites.