0
1
00:00:00,210 --> 00:00:01,860
This course has six parts.
1

2
00:00:01,860 --> 00:00:04,650
In part one, you will learn secrets of good design.
2

3
00:00:04,680 --> 00:00:10,170
In part two, you will practice design on real projects. In part three, you will learn Webflow by building
3

4
00:00:10,170 --> 00:00:12,180
a company's home page. In Part four,
4

5
00:00:12,180 --> 00:00:15,670
we're going to do a client project from start to finish.
5

6
00:00:15,690 --> 00:00:20,670
I'm going to take you through the same process that I go through with each client.
6

7
00:00:20,670 --> 00:00:27,960
We're going to start by wireframing, then designing the website in Figma, then taking the whole thing
7

8
00:00:27,960 --> 00:00:34,170
and designing and building inside Webflow, with a blog. And finally publishing and delivering it to the
8

9
00:00:34,170 --> 00:00:35,490
client. In part five,
9

10
00:00:35,490 --> 00:00:41,910
you'll learn the secrets of making money freelancing. And part six, has several advanced tutorials both
10

11
00:00:41,910 --> 00:00:44,150
in design and Webflow. In the promo video
11

12
00:00:44,160 --> 00:00:49,470
I mentioned Webflow first, but we actually are going to start this course with the design. Because every
12

13
00:00:49,470 --> 00:00:55,170
good website project starts with a design first. Just like any great building, always starts with the
13

14
00:00:55,290 --> 00:01:00,920
architectural plans first and then comes the construction. Since we start working with Webflow only
14

15
00:01:00,920 --> 00:01:05,400
in the third part of this course, I wanted to give you a little taste before we go on.
15

16
00:01:05,430 --> 00:01:09,590
So go ahead and open up a Webflow, so we can take it for a quick spin.
16

17
00:01:09,630 --> 00:01:12,740
You should already have the Webflow account from the previous lesson.
17

18
00:01:12,750 --> 00:01:15,630
If not, go to Webflow.com and sign up.
18

19
00:01:15,690 --> 00:01:17,460
Use Google Chrome or Safari.
19

20
00:01:17,460 --> 00:01:19,800
The Webflow designer works the best in there.
20

21
00:01:20,490 --> 00:01:26,400
After you sign up, you'll get to some version of this page. Or if you're on a dashboard, click New Project
21

22
00:01:26,400 --> 00:01:28,470
button and choose blank site.
22

23
00:01:34,740 --> 00:01:35,700
As a first time user,
23

24
00:01:35,700 --> 00:01:41,110
you'll get this onboarding pop-up. You don't need to go through it, but you can if you want to.
24

25
00:01:41,150 --> 00:01:42,680
This is where the magic happens.
25

26
00:01:42,710 --> 00:01:45,110
As you can see, it has a very Photoshop-esque
26

27
00:01:45,110 --> 00:01:48,620
look. The website is built right in here. On the left,
27

28
00:01:48,620 --> 00:01:49,700
we have a navigator.
28

29
00:01:53,580 --> 00:01:56,700
It shows the structure of the page and all objects on it.
29

30
00:01:56,700 --> 00:02:01,980
Right now there's only one object - the body. From the plus icon we can add new elements.
30

31
00:02:01,980 --> 00:02:05,780
Let's add a container which we can simply drag on the canvas.
31

32
00:02:06,060 --> 00:02:08,850
Also let's add a heading and a paragraph inside.
32

33
00:02:21,190 --> 00:02:22,270
And write something in it.
33

34
00:02:32,750 --> 00:02:34,050
Let's center the text.
34

35
00:02:34,130 --> 00:02:41,460
We can do that by selecting the container and pressing Center Alignment under typography. And we're going
35

36
00:02:41,460 --> 00:02:44,190
to add some spacing to move the text in the middle of the screen.
36

37
00:02:44,250 --> 00:02:53,450
Keep the container selected and with your mouse drag this top padding handle.
37

38
00:02:53,600 --> 00:02:57,400
You can toggle a preview mode, to see how your page looks like in real-time.
38

39
00:03:00,810 --> 00:03:06,090
If you go to Code Export, on top of the toolbar, you're going to see the actual code that Webflow wrote
39

40
00:03:06,090 --> 00:03:12,150
for us. HTML shows the objects that we have added, like the container, heading and a paragraph. And
40

41
00:03:12,150 --> 00:03:17,780
inside CSS, you will see the style changes that we have made. The top padding and the center alignment.
41

42
00:03:17,850 --> 00:03:20,190
We could export this code and host it anywhere else.
42

43
00:03:20,190 --> 00:03:25,620
The page would work perfectly outside of Webflow too, but we're not going to do that in this course.
43

44
00:03:25,620 --> 00:03:31,570
The best option is to publish our page on Webflow. So go to Publish and click Publish to Selected
44

45
00:03:31,590 --> 00:03:39,000
Domains. Once it's done, click the link to open the live site. Until we buy the hosting, you get this made
45

46
00:03:39,000 --> 00:03:39,930
in Webflow badge.
46

47
00:03:40,140 --> 00:03:46,710
Besides that, that's how the actual live page looks like. Your first ever web page built from scratch.
47

48
00:03:47,190 --> 00:03:52,890
Ugly and useless, but still a web page. Without knowing how to design, all our websites would look as
48

49
00:03:52,890 --> 00:03:57,000
unappealing as this one. Even if we were a pro Webflow designers.
49

50
00:03:57,000 --> 00:03:59,220
The design skill always comes first.
50

51
00:03:59,220 --> 00:04:05,680
So we're going to put the Webflow aside, for now, and learn and practice good design. And then in part
51

52
00:04:05,680 --> 00:04:11,940
three, come back to Webflow, so we can make the magic happen and design and build beautiful websites.