0
1
00:00:00,300 --> 00:00:03,090
So, let's finally publish our page.
1

2
00:00:03,090 --> 00:00:04,530
This is quite a simple task.
2

3
00:00:04,530 --> 00:00:08,290
Go to the Publish and click Publish to selected domains.
3

4
00:00:08,430 --> 00:00:09,210
Give it a moment.
4

5
00:00:10,430 --> 00:00:16,040
And there. Our pixel-perfect web page is live and operational like a charm!
5

6
00:00:20,160 --> 00:00:25,220
All the responsive optimization that we have done, can be tested by resizing and shrinking the browser
6

7
00:00:25,220 --> 00:00:25,840
window.
7

8
00:00:36,210 --> 00:00:40,740
Buttons and links aren't operational right now, because we haven't linked them to anything.
8

9
00:00:40,770 --> 00:00:45,780
We're not going to do this on this practice project. But we will do it with this big client project that
9

10
00:00:45,780 --> 00:00:49,670
we're gonna work on. On the bottom of the page you'll see this Webflow badge.
10

11
00:00:49,680 --> 00:00:55,330
We can remove this when we add a hosting plan to our project. On free plans this badge is mandatory.
11

12
00:00:55,620 --> 00:01:00,840
Initially, your website will be published on Webflow subdomain. In order to publish our website on a
12

13
00:01:00,840 --> 00:01:01,950
custom domain,
13

14
00:01:01,950 --> 00:01:07,590
we need to add a paid hosting plan and then we're going to able to publish our website on our own domain.
14

15
00:01:07,900 --> 00:01:14,130
Webflow's hosting plans are very decently priced. Basic plan, which is for non-CMS based websites is
15

16
00:01:14,130 --> 00:01:20,460
$12/month or 15 if paid monthly. CMS-based website is the one that has a blog or other sort of
16

17
00:01:20,460 --> 00:01:25,270
dynamic content, that needs to be managed through CMS,  which is Content Management System.
17

18
00:01:25,290 --> 00:01:28,740
We'll be building a CMS-based website in the upcoming project.
18

19
00:01:28,740 --> 00:01:33,450
I'm not gonna demonstrate how to publish this to a custom domain for this project. But I will show
19

20
00:01:33,450 --> 00:01:34,560
it for the next one.
20

21
00:01:37,420 --> 00:01:40,900
One last thing that we need to change, is this little icon.
21

22
00:01:40,900 --> 00:01:42,640
This is called a favicon.
22

23
00:01:42,730 --> 00:01:49,020
Right now, it's showing a Webflow's default favicon, but we can change this from Project settings.
23

24
00:01:49,120 --> 00:01:50,320
There are two icons here.
24

25
00:01:50,320 --> 00:01:52,960
First is this favicon that shows on a browser tab.
25

26
00:01:52,960 --> 00:01:58,760
And the second is Webclip. The webclip is an icon that shows up on iPhone when you save your website
26

27
00:01:58,870 --> 00:01:59,740
on home screen.
27

28
00:01:59,740 --> 00:02:04,630
If you don't know what I'm talking about, Safari has this feature to sort of bookmark a website. You can
28

29
00:02:04,630 --> 00:02:09,600
add it to a home screen and it will be saved next to all of your apps. Looking just like any other app.
29

30
00:02:09,610 --> 00:02:12,550
I never use this feature. But since we have an option, we should change this
30

31
00:02:12,550 --> 00:02:18,130
icon here. We'll need to create an icon in Figma, which is just a regular image file, and we need to
31

32
00:02:18,190 --> 00:02:22,030
create some sort of icon out of our logo.
32

33
00:02:22,180 --> 00:02:26,710
Just add a new frame, with the size of 256 by 256.
33

34
00:02:29,780 --> 00:02:31,250
Draw a full rectangle on it.
34

35
00:02:34,380 --> 00:02:37,020
Paint it blue and maybe give it rounded corners.
35

36
00:02:41,530 --> 00:02:44,260
Then copy the logo, delete everything but the letter C,
36

37
00:02:49,470 --> 00:02:50,340
enlarge it,
37

38
00:03:03,930 --> 00:03:06,410
then group everything, export it in PNG.
38

39
00:03:06,590 --> 00:03:08,000
And that's going to be our webclip.
39

40
00:03:13,100 --> 00:03:18,440
Note one thing, either export the group or hide the background fill on the frame, to avoid exporting those
40

41
00:03:18,440 --> 00:03:21,000
white corners.
41

42
00:03:21,080 --> 00:03:28,860
As for the Favicon, we just need to scale this down to 32 by 32. A regular resizing isn't going to
42

43
00:03:28,860 --> 00:03:29,480
do the job.
43

44
00:03:29,490 --> 00:03:34,080
It's not going to scale both rectangle and the text proportionally.
44

45
00:03:34,080 --> 00:03:41,250
Instead, we need to use the scale tool. Which we can find under the moov tool. Scale tool resize as grouped
45

46
00:03:41,250 --> 00:03:42,420
objects proportionally.
46

47
00:03:42,420 --> 00:03:48,630
So, if there are texts, images, rectangles it's going to lock the proportions of all layers inside and then
47

48
00:03:48,630 --> 00:03:49,890
resize them altogether.
48

49
00:03:49,890 --> 00:03:55,830
It's a very handy little tool. Shrink it, until it's 32 pixels. And export in PNG again.
49

50
00:03:59,150 --> 00:04:04,640
And then upload each one to their dedicated place. The dimensions of these icons have to be exactly those:
50

51
00:04:04,640 --> 00:04:08,150
32 by 32 and 256 by 256.
51

52
00:04:08,350 --> 00:04:11,380
Webflow won't let you upload any other size.
52

53
00:04:11,600 --> 00:04:14,110
Now publish again, to see the changes take effect.
53

54
00:04:19,690 --> 00:04:21,490
That's all. Our web page is live,
54

55
00:04:21,490 --> 00:04:27,340
it's looking great, and it's sharp, and it works well, it's fast and it's responsive and just amazing.
55

56
00:04:27,370 --> 00:04:30,490
Notice how fast and effortlessly the page loads.
56

57
00:04:30,580 --> 00:04:31,450
That's Webflow's
57

58
00:04:31,450 --> 00:04:38,260
one of the amazing benefits, because their servers are blazing fast and they're just very well organized
58

59
00:04:38,260 --> 00:04:42,430
and optimized for the pages and websites that are built in Webflow.
59

60
00:04:42,520 --> 00:04:48,850
And we've also done a good job. Because we built it with a very nice clean code and website
60

61
00:04:48,850 --> 00:04:51,610
is just working well. And loads quite fast.
61

62
00:04:51,610 --> 00:04:54,010
So good job to us.
62

63
00:04:54,010 --> 00:04:58,390
Up next we're going to learn about Webflow's another feature called the editor.
63

64
00:04:58,390 --> 00:04:58,930
Stick around.