So, let's finally publish our page. 1
This is quite a simple task. 2
Go to the Publish and click Publish to selected domains. 3
Give it a moment. 4
And there. Our pixel-perfect web page is live and operational like a charm! 5
All the responsive optimization that we have done, can be tested by resizing and shrinking the browser 6
window. 7
Buttons and links aren't operational right now, because we haven't linked them to anything. 8
We're not going to do this on this practice project. But we will do it with this big client project that 9
we're gonna work on. On the bottom of the page you'll see this Webflow badge. 10
We can remove this when we add a hosting plan to our project. On free plans this badge is mandatory. 11
Initially, your website will be published on Webflow subdomain. In order to publish our website on a 12
custom domain, 13
we need to add a paid hosting plan and then we're going to able to publish our website on our own domain. 14
Webflow's hosting plans are very decently priced. Basic plan, which is for non-CMS based websites is 15
$12/month or 15 if paid monthly. CMS-based website is the one that has a blog or other sort of 16
dynamic content, that needs to be managed through CMS, which is Content Management System. 17
We'll be building a CMS-based website in the upcoming project. 18
I'm not gonna demonstrate how to publish this to a custom domain for this project. But I will show 19
it for the next one. 20
One last thing that we need to change, is this little icon. 21
This is called a favicon. 22
Right now, it's showing a Webflow's default favicon, but we can change this from Project settings. 23
There are two icons here. 24
First is this favicon that shows on a browser tab. 25
And the second is Webclip. The webclip is an icon that shows up on iPhone when you save your website 26
on home screen. 27
If you don't know what I'm talking about, Safari has this feature to sort of bookmark a website. You can 28
add it to a home screen and it will be saved next to all of your apps. Looking just like any other app. 29
I never use this feature. But since we have an option, we should change this 30
icon here. We'll need to create an icon in Figma, which is just a regular image file, and we need to 31
create some sort of icon out of our logo. 32
Just add a new frame, with the size of 256 by 256. 33
Draw a full rectangle on it. 34
Paint it blue and maybe give it rounded corners. 35
Then copy the logo, delete everything but the letter C, 36
enlarge it, 37
then group everything, export it in PNG. 38
And that's going to be our webclip. 39
Note one thing, either export the group or hide the background fill on the frame, to avoid exporting those 40
white corners. 41
As for the Favicon, we just need to scale this down to 32 by 32. A regular resizing isn't going to 42
do the job. 43
It's not going to scale both rectangle and the text proportionally. 44
Instead, we need to use the scale tool. Which we can find under the moov tool. Scale tool resize as grouped 45
objects proportionally. 46
So, if there are texts, images, rectangles it's going to lock the proportions of all layers inside and then 47
resize them altogether. 48
It's a very handy little tool. Shrink it, until it's 32 pixels. And export in PNG again. 49
And then upload each one to their dedicated place. The dimensions of these icons have to be exactly those: 50
32 by 32 and 256 by 256. 51
Webflow won't let you upload any other size. 52
Now publish again, to see the changes take effect. 53
That's all. Our web page is live, 54
it's looking great, and it's sharp, and it works well, it's fast and it's responsive and just amazing. 55
Notice how fast and effortlessly the page loads. 56
That's Webflow's 57
one of the amazing benefits, because their servers are blazing fast and they're just very well organized 58
and optimized for the pages and websites that are built in Webflow. 59
And we've also done a good job. Because we built it with a very nice clean code and website 60
is just working well. And loads quite fast. 61
So good job to us. 62
Up next we're going to learn about Webflow's another feature called the editor. 63
Stick around.