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