Webflow for Beginners | FULL WEBFLOW TUTORIAL

in this course you'll learn how to use the amazing webflow cms for building professional responsive websites with no code let's go [Music] hey what's up everyone welcome to a new tuts plus course my name is adi i'm a web designer and developer and today we're talking about webflow and not just talking or actually doing stuff but what is webflow you might ask webflow is a content management system that has an amazing visual designer the best part it's code free so anyone can use it to create a wide range of website types from blogs to online stores and this is a course for complete beginners i'm gonna assume that you know absolutely nothing about web development or web flow so i'll just give you the information you need to get started the basics webflow is a pretty complex beast so i don't think it's a good idea to go through everything right now because of that we'll focus on three areas first i'll give you an introduction to how websites are built on the web and i'll explain the box model then we'll cover the webflow designer and finally i'll show you how to publish a website with webflow and talk about pricing because webflow is free but up to a point uh you have to pay for some more advanced features like uh publishing on a custom domain but all the learning that we're gonna be doing in this course can be done on the free version so yay for that now during the course i'll be demoing things using templates and assets from envato elements i use this a lot in my web design projects but also for video content and it's super simple for me for a monthly fee i get unlimited downloads of web templates fonts icons audio files pictures of cats video effects you name it there's tons of stuff on elements and you get commercial licensing for all of it also if you're not happy with the service you can cancel anytime so i highly recommend it and if you're interested check out the link in the video description now let's get started by learning a little bit about how websites are built on the web and what kind of technologies are used i think it's important to start this course by understanding how websites are built on the web because that's gonna help you understand how webflow functions at its core in the end it uses the same technologies so we'll talk about three things html css and javascript this is also known as the holy trinity because it's the basis of everything we do in terms of front-end development let's start with html html stands for hyper text markup language and it's a language that we use to define the structure of our web content but also give meaning to the various elements we're using for example titles paragraphs and we can also use html to embed media like images and videos and to see the html code that powers any web page you can just open it in your browser you can right click anywhere and choose view page source and this will show you the raw html that's behind everything you see on this page which is pretty cool alternatively in most browsers you can right click an element you can inspect it and that's going to open up an inspector window and this will again show you the html here but it will also show you some of the css properties we'll talk about that in a bit with the inspector you have the added advantage of being able to select various elements like this link here or you can select this div element and that's going to be highlighted here in the canvas so you can see exactly what html code is responsible for what element in your page and that's the html it's the markup language that defines the structure of a web page but what about using pretty colors or fonts like papyrus or comic songs well that's where css comes in css stands for cascading style sheets and it's a language that we use to style the html content with css we can set colors fonts we can choose how to display certain images or elements in the page we can set how big a font should be whether or not it should be normal underline basically everything you see on this page all the visual characteristics all the aesthetics are being controlled by the css and again if we want to inspect or see some of the css code or properties we can do that with the inspector in most browsers so once you open the inspector besides the html here on the top you'll find some css code right here and these are what we call selectors and these are the actual styles that we're applying position absolute top left zero we're setting a width and a height of one hundred percent and here uh firefox which is the browser that i'm using actually shows us some of the properties that are applied to the selected element in a more readable format so that's css it's the language that we use for styling web pages now let's talk about javascript javascript stands for javascript and it's a scripting or programming language that allows us to add more complex behaviors to our web pages things like displaying a drop down menu like this or switching the tab contents like this or maybe displaying a modal window like this one there are lots and lots of uses for javascript and this is a tool that you can use to enhance the overall experience of your website so in this lesson we talked about how websites are built because that helps us understand how webflow works we learned about html which is the markup language that defines the structure of a web page we learned that all the styling is done by the css which is a language used to describe how colors and fonts are applied and how various elements are laid in a page and finally we talked about javascript which is a programming language that's used for implementing complex behaviors in web pages these three technologies are the building blocks for web development but also webflow any page that you create within webflow is built using html css and javascript now before we start building with webflow let's learn about the box model let me start by giving you the shortest version of this lesson every element in a web page sits in a box if you want a more in-depth more scientific explanation it goes like this every element in a web page sits in a box and if that doesn't convince you then let me show you some hard evidence in order to understand the box model you need to first understand that everything in css has a box around it and understanding these boxes is the key to creating layouts with css or aligning items and to demonstrate i created a very good looking demo page here i wrote some html i added some images i also added some css and to show you that yes indeed every element in a page sits in a box i added a border to all the elements and if i turn on that border you can see the boxes so we have one box another box another box and then here we have a bigger box a slightly smaller box and then some additional we have a box for the image a box for the title a box for the paragraph we have a box for the image a box for you get the point so as you can see this entire page is made out of boxes and the size of each box is determined by the size of its content it's not always the case but usually that's what happens see here we have a relatively small or short box this box is just as wide but it's taller than this one and then we have this box with the pineapple that is smaller than both of these why because the content inside the box is smaller look at this one this is smaller than all the others because it has the smallest content inside and also notice something very important these boxes they're not floating around aimlessly they're displayed from top to bottom stacked one on top of the other well with the exception of these three which are stacked one next to another that's the power of css but you'll see that we can easily compare the order in our markup with what we see in the screen so this first h1 corresponds to this first box and it's displayed at the very top the next element in our html is this paragraph and this corresponds to this one it's just another box that was placed under the first one and the examples can go on and on we have another box and then another box and that box contains other smaller boxes and so on and so forth and if i were to remove a box for example the second paragraph if i were to delete this see that when that box disappears it affects the rest of the flow the rest of the document all the other boxes are now pushed up because we have available space so that just goes to show that these elements are not floating around they're displayed in a certain manner in every browser usually that's from top to bottom so as you can see a web page is made out of boxes and if you're still not convinced even after this scientific explanation then you can scroll down the page and this will definitely prove it to you so that's the box model that's how we build for the web in this lesson we learned that elements are not floating around aimlessly like george clooney in the movie gravity instead they stack vertically or horizontally we also learned that each element sits in a box of its own and that the size of the box is definitely determined by its contents sometimes but not always and finally we learned that cats are not evil and their plan is not to take over the world so with that out of the way let's open up webflow and start learning how to use it first let's look at the user interface webflow is a cms which stands for content management system so it's a system that allows us to manage content it's not the only one out there but it's one of the best because of something called the designer and this is a way for us to visually manipulate the html and css in the page now we'll be working a lot with the designer in this course but first we need to take a look at the user interface and learn how to work with it for the user interface we can actually split it in four major sections we have the left toolbar the top toolbar the canvas and the panels on the right so let's start with the left toolbar when you open webflow you'll find the left toolbar on the left side and from here you can access the most important sections in the cms we have a menu here on the top that allows us to switch to the dashboard or the project settings or the editor then we have the add panel which allows us to add elements and components in our page or use any of the pre-built layouts that come with webflow then we have access to the symbols we can create a new symbol by clicking this button or we can view a list of all existing symbols here we have the navigator which we can always pin so it's permanently displayed on the left side and this allows us to browse the contents of our page in this tree format and at any time we can click this icon to collapse everything and we can also select the various sections in our page speaking of pages by clicking this icon we have access to all the pages in our document and we can easily switch between them just like this we can also create new folders new pages and we can search for a specific page here we have access to our cms collections this is a bit more advanced we also have access to the assets this contains a list of all the images or documents or lottery animations that we uploaded to our webflow project and from here it's really easy to use an asset we can simply click and drag into our page and finally we have access to some settings so that's the left toolbar now let's see about the top toolbar you can find this right here on the top and this shows us the current page we're in we have a preview button which we can use to toggle in and out of the preview then we have controls for the responsive side of web design we can switch between various breakpoints by either clicking on each one to preview our website in different screen sizes we can also press one two three or four to switch between these faster here undo redo this is a an icon we can click to export our html css or javascript code here we can share a project we can publish it and that's the top toolbar now let's see about the canvas this is the biggest section in the ui it's this right here where we can see a preview of our project and we can fully interact with this canvas we can click on any particular element select it just like this we can resize it by hovering right here on the right side and then dragging to make it bigger or when we're viewing on smaller break points we can click and drag between certain predefined ranges to resize our canvas so that's the canvas now the final section of the user interface is this one positioned on the right side we have a collection of panels and instead of referring to these as the right hand side panels let's call them the inspector because in here you can inspect the various properties of the selected object for example if i select this paragraph and i know it's a paragraph because it has the p symbol right here over on the right side we can see its class more about that in a future lesson we have controls for the layout of the element the spacing i can increase the margin like this i can increase the padding of the element just like this i can hold down shift and that will change the padding on all four sides just like so i can hold down alt and that's going to affect either top or bottom or left and right and if at any point i want to get rid of one of these values i can either click it and reduce it to whatever value i need or i can reset it or i can hold option and left click and that's gonna reset it as well then we have controls for the size the position typography controls background borders effects all this good stuff so anything that you can control via css is nicely organized in these panels you have some additional options then by clicking this cog icon you'll find custom attributes you can set ids to various elements from here we also have access to the style manager this will show us all the classes the subclasses that are being used in the project and you can even search for any given class and then finally this is the panel for interactions this is where you create animations in webflow so in this lesson we learned that webflow is a cms and that it's one of the best on the market thanks to something called the designer this is used to visually manipulate the html and css in the page and we learned that it's made of four big sections the left toolbar the top toolbar the canvas and the panels on the right which we collectively called the inspector okay so now that we have all this information let's move on to everyone's favorite activity knitting and while we're doing that let's also learn about adding and editing elements in webflow building layouts with webflow is super simple because there are tons of elements we can drag and drop in our canvas so in this lesson we're going to learn two things adding and editing elements let's start with adding there are several ways to add an element in webflow first we need to open the add panel we can do that by clicking here or pressing a on the keyboard from here we need to find the element that we want to drag in and then we can click and drag directly on our canvas depending on the element type we might get some additional options right off the bat like for example for a heading we get to choose the heading type and then once we close this we can see the element is right here in our canvas and also in our navigator we can also open the elements panel and we can click on an element for example this grid and that's going to be placed immediately after our heading and of course we can always change its position by clicking and dragging in the inspector we can of course delete an element from the inspector or we can duplicate it we can select the element command or control c and then command or control v it's a basic copy paste and this is another fast way of creating elements in webflow however there is an even faster way and that's by using quick find so let's say i want to add a button or a paragraph after these headings i can press command e on a mac and i can type in button and then i just hit enter i want a paragraph that's fine command d paragraph and then i can even click it from here so that's quick find and if you're using a different operating system that's fine you can go to the help keyboard shortcuts and this will give you all the shortcuts that are available for your operating system i'm using a mac so for me quick find can be opened with command e or command k so let's see if that works command k and it does work so that's adding what about editing well it depends on the elements for elements that contain text for example a heading you can simply double click and edit the contents or a paragraph same thing or a button same thing however for elements that do not contain text for example an image so let's drag an image into our page there are several ways to edit there is a nice menu that pops up or a nice panel that pops up after you add that image and you have the ability to choose the image from your assets and in here you can also set the width the height the alt text and how to load that image but alternatively you can also select that element and you can open up the settings panel here in the inspector and you will get the same image settings but a few extra as well or you can open the main style panel in the inspector and work on things like the layout the margin the padding the size and all the other properties that are editable from this place same goes for any element i can click this button and maybe i want to change its background size or its background color i can just scroll down to the background section and i can choose a different color for it i can change the hue i can change the opacity i can see the color value in both hex and hsba format which is awesome i can create swatches so i can reuse the same color over and over again and that's how you can edit an element in webflow so in this lesson we learned that it's really simple to build in webflow you can add elements via drag and drop or by using quick find and you can edit them by either double clicking to edit text or just click to select and then use the inspector panel to change the properties now the next step in our journey of eternal enlightenment takes us to a fun concept classes and along with that inheritance in css a class represents an identifier it's like a name and based on that name we can style multiple elements the exact same way well in web flow classes are pretty much the same so in this lesson i'm going to show you how to create a class how to style elements based on their tag and we'll also talk about inheritance let's start with classes in webflow classes are displayed right here under the selector they're displayed in blue and for example this element here has a class of main heading the classes are also displayed in the canvas right next to the element type and at any point we can click this arrow to rename a class to duplicate a class but also to remove a class so how does this work exactly if we scroll down and we select this icon we can see it has a class of feature icon so does this one and this one and this one and this one and this one so what happens when i select this for example and i change some of the properties let's say i want to increase the bottom margin so i can click and drag and see what happens this change is being applied to all the elements that are using the feature icon class i can option click to reset its value i can set this to let's say 5 pixels and that's going to apply to everything it doesn't matter what element i select with this class any change that i make to it will be applied to all the other elements because i'm changing the class so this will automatically translate to all the other elements that are using that class i can also create a combo class and a combo class allows me to make individual changes to just one element so let's say i want this feature icon to have an even greater bottom margin i can click here and i can type to create a new combo class let's call this special icon so this created the combo class of special icon and from here i can go in and i can change that margin to whatever value i want and notice that the other icons that are using the base class did not receive this final change if i want to apply it awesome i can click here i can search for special icon webflow tells me hey we have some existing combo classes and i can just click on one and now i'm using the combo class on this element as well i want to remove it great i can just click remove and we're back where we started now if an element does not have a class like for example this heading 2 i can create one i can click here and i can say audi heading 2 and i just created a class do i want to apply this to other elements i can do that i can select them and i can search for audi heading two and now whatever change i make to an element that uses this class for example let's change the color any other element that uses that class will change as well and at any point i can see all my existing classes by going to the style manager or pressing g on our keyboard so here if we search for adi we will find audi heading 2. so that's classes now there are situations where you can style elements based on their tag for example let's select this title it says heading 3. these titles here are also heading threes but notice that we don't have any class applied to them so then if we make a change to one of these headings for example changing their color to green only the one that we selected is changed and webflow automatically created a heading class for us but let's say that we want all the h3 headings to receive this change well that's easy to do we can click here and instead of selecting or creating a class we can select all h3 headings and now i can go in and make my change and that's going to apply to every single h3 heading so now if i select an h3 and i change the color to blue for example you can see that again we are working on a single element so that change will not perpetuate but instead if i select all headings or all h3 headings i can make that change and this works for a lot of the elements for example a paragraph right i can select all paragraphs or maybe i have this heading two i can select all h2 headings of course this works for any element that has an html tag so for example if i select this container right this is a custom element it doesn't exist in html therefore i cannot select all container tags they don't exist all right that was styling elements based on their tag now let's talk about inheritance and just like in css inheritance in webflow is about passing down values from parent to children and the children can choose to keep those values or just like in real life completely ignore them let's see an example i have selected a section and on this section i have a couple of properties that are highlighted with orange and i have a couple that are highlighted with blue this is really important orange values are being inherited in this case from the body element blue values are basically overwrites or resets so what does that mean notice we have a font here applied to this section and that font is roboto 16 pixels 22 pixels of line height now if i were to select the body element and select the html tag that says body all pages notice this is not inheriting those font properties from anywhere we're actually setting those font properties so i can change the font family from roboto to maybe roboto condensed and once i do that notice that all the elements that were inheriting those properties from the parent element are also changed do i want a bigger font size let's say 21 pixels that's fine i set it here and all the elements that were inheriting that font size are now displaying the updated value so now i can select for example the nav link and see that for the font yes we're using roboto condensed and this is inherited from body all pages it's the value that we set previously same goes for the font size 21 pixels now at any point i can make a change here i can say okay for these elements that have this class nav link i want to use roboto in which case i'm overwriting the values that i received or inherited from my parent and i want the size to be 16 pixels so notice that both of these values are now highlighted with blue that means i am overriding the value that i inherited from the parent and by doing that i can now go to the body element and i can select body all pages and it doesn't really matter what kind of change i make now let's say i change the fonts here to great vibes all the other elements which are inheriting the properties have updated accordingly but these which i just edited are still using the font that i set for them if i go in here and i click and i reset well now that's going to use the value that's being inherited that's all there is to it it's a simple concept but yet very very powerful just remember that values are being passed down from parent to child so if i set a value or a property on the body element that property will be passed down to all of its children if i set a value or a property on the navigation that's going to be passed down to the container which is a child of the navigation and so on and so forth that's exactly how css works that's where the cascading word comes from so then in this lesson we learned about classes and inheritance in webflow we learned that a class can style multiple elements the same way and a combo class can be used to make small tweaks to just a few elements we also learned that styling can be applied to all tags of a certain type without using a class and finally we talked about inheritance or the passing down of values from parent to child and we learned that properties in orange inherit the value while the ones in blue override it now classes allow us to reuse styles and the concept of reusing is great because it saves time in webflow you can also reuse content by using symbols so let's talk about those next in webflow symbols allow us to reuse content if we make a change to a symbol then all the other instances will be automatically updated we can even create an override for a specific instance so only that one is affected so in this lesson i'm going to show you how to create a symbol how to create overrides for a particular instance and also how to unlink a symbol let's start by creating one let's say that we like this section here so much that we want to reuse it in other pages but we don't want to change its properties or the way it looks every time in all of the pages well for that we can select the parent which is called small features row and we can go to the symbols panel and we can create a new symbol let's call this row of content create symbol so now we can switch the page by clicking here and going to a different page and then we can open up the symbols and we can click and drag our symbol in our page notice this is an instance of the main symbol we can always double click and that's going to edit the symbol itself for example i can select this text and i can edit to say rules instead of custom rules and i can click anywhere outside to exit edit mode so now the symbol instance in this page says rules if we go back to the home page it also says rules so the changes that i made to the symbol are automatically applied to all the instances of that symbol and you can double click any instance to enter edit mode for that symbol regardless of where the instance is and then to exit edit mode you can just click outside or press escape on your keyboard and all of your symbols can be found here in the symbols panel i believe there is also a shortcut so if we go to the help keyboard shortcut you can see that we can press shift a to show the symbols panel or command shift a to make the selected element a symbol and a symbol can be just an element for example i can select this paragraph and i can press command shift a and that's going to create a symbol or it can be a group of elements for example i can select this entire section and make it into a symbol so that's creating symbols and as you saw making a change to the symbol will automatically translate to all the other instances but we can override this we can do that with symbol overrides to demonstrate let's select this plan wrapper and let's do command shift a to create a symbol let's call it pricing plan create symbol and just for the sake of the demo let's switch to our test page let's delete this and let's open the symbols panel with shift a from here i'm going to drag in pricing plan but let's make this more interesting let's first add a grid and with the grid selected let's add an extra column and let's delete one of the rows and we're going to click done now let's add the pricing plan to our grid and let's add it again and again i just copy and paste it so now if i open pricing plan and i make a change for example i'm going to change this first value to 20 a month all the other instances are updated as well but i don't want that i want to be able to edit or input different values in these fields but still retain the overall styling of my initial symbol so to do that i can select this i can double click and then i can select the field that i want to edit and i can click here on the purple plus and i can select new field let's call this plan title and now this is linked to this element let's do another one let's select this one that says price point again click new field we're just going to leave it like that and now when i select the other instances notice we have something called instance overrides so instead of text here saying starter i can say pro instead of saying 20 per month i can say 48 dollars per month these three elements now have different content even though they are all instances of the same symbol but i can always go back to the symbol and make any kind of stylistic changes for example let's say i want this button to have a different top padding i can do that and notice that those changes are reflected on the other element or maybe i want to delete this bit so this change because i'm making it inside the symbol is automatically passed to all the instances but in terms of the overrides those are unique for each instance and that's symbol overrides now if you want a symbol instance to no longer be a symbol instance you can unlink it for that simply select the instance and you can right click and choose unlink instance or shift command a so now that's just like a standalone element and i can go in here and i can make any kind of change that's not going to affect all the other instances or any of the other instances and i can even edit the main symbol let's for example select the button again and let's change the padding let's add 8 pixels of padding now this was actually a bad example because we are using a class here so of course that change is going to be reflected here as well but let's say i want to remove this divider from the symbol so i remove it from here that change is being reflected in this instance and in this instance but this one which is no longer an instance still has the divider and we did that by right clicking and selecting unlink instance so then in this lesson we learned about working with symbols in webflow and the purpose of a symbol is to reuse content we learned that we can turn any element or group of elements into a symbol and we also played around with overrides which allow us to make unique changes to a particular symbol instance finally we learned that unlinking a symbol will prevent it from receiving any changes made to the other instances now onto responsive websites this is one of my favorite features in webflow and as you can clearly see from my face i'm ecstatic about it and i can't wait to show it to you creating responsive websites nowadays is a must because they need to display properly on whatever devices we're using thankfully this is really easy to do in webflow so in this lesson we're going to learn how to switch between different breakpoints how to add new breakpoints and also how the changes we make cascade between different breakpoints let's start with switching between breakpoints you can switch between the four predefined breakpoints by using the top toolbar and clicking on each individual icon or you can use the one two three four keyboard shortcuts to easily switch between these this works in both the designer mode but we can switch to the live view at any time and we can switch between them exactly the same way with the top toolbar or using one two three four but of course if we want to see how our page looks like in between some of these breakpoints we can grab the handle and we can resize the page just like this and as you can see in preview mode this will automatically switch between breakpoints so for example the second one is tablet or 991 pixels and down so when i reach 991 pixels that automatically switches the breakpoint for me and notice that we have several changes here when going from a larger screen to a smaller screen and we'll talk about that in just a little bit but for now this is how you would switch between breakpoints and i want to mention something here this happens in preview mode but when we switch back to our designer and we grab that edge of the page and we start dragging well there's a slightly different behavior let's start with the smallest breakpoint this is the mobile and this is 478 pixels and down you'll notice that when i try to resize the page here it only does that or it only uses a range between 479 and 240 and those values are displayed right here at the bottom so when i resize i can also snap to various points and those various points represent screen widths for certain devices for example 320 as the screen width for the iphone se 5s and earlier and the ipod touch if i move up 360 is the screen width for these devices 375. 390 414 428 this is really cool not only you have an amazing way of checking your website on various screen sizes but you also get these pre-defined ranges and of course it works the same way for this is mobile landscape this is tablet right same thing here is the ipad pro ipad 2017 2018 uh 800 pixels this is galaxy stuff this is ipad pro 10.5 and so on and so forth so when we're inside the designer or more specifically when we're not in preview mode we get limits to how much we can resize this window but when we're in preview mode we can resize it across all breakpoints so then by default we have four breakpoints we can switch between but we can always add more for larger screens well i say more but it's actually just three let's click the menu icon here on the top and we can add a large breakpoint at 1280 1440 or 1920. and we can add just one and that's going to give it a different icon or i can add the other ones as well and notice that once you add a breakpoint to a project you cannot remove it and that's it there are just three break points we can add for larger screens the one that the ones that i showed you earlier each has a different or slightly different icon but then we can easily switch between them just like we did for the other ones and notice something interesting right now i'm at 19 20 pixels but my recording space here or the available space on my laptop is not 1920 that's much smaller so in order to view this page on this size webflow automatically scaled the whole image to 50.5 and you can even see this better in uh in preview mode right now because i have a bit more extra width uh the scale is at 73.9 percent and you'll see that if there's enough room like for example on tablet or phone the scale is at 100 but as soon as i go much bigger than that like for example on this or this then the the image kind of scales down okay so now that we have a ton of breakpoints to switch between let's see how the changes we make cascade between two screen sizes and it's actually very simple here the changes we make will cascade upwards to bigger screen sizes and will cascade downwards to smaller screen sizes what does that mean well for example let's say i'm selecting the tablet breakpoint and this is what our site looks like but let's say i don't like how close these two buttons are to this text so i can select the text and i can add some bottom margin now this change cascades downwards to the smaller screen sizes so the mobile landscape will have that change notice 40 margin bottom and also the mobile portrait will have that change notice 40 margin bottom but if i'm going back to my default desktop breakpoint that element is still at five margin bottom so the change that i made on this breakpoint cascaded down to the smaller screen sizes if i'm going to go to this bigger breakpoint and i'm going to make a change here let's say i want this heading to be a different color let's say green will this cascade down well let's see no it doesn't because as i said on larger screens changes cascade upwards so this is a large screen 1280 and up let's select the sync across all devices heading and let's change its color to something else like this orange so now because this is a large screen the changes will cascade up so it's going to cascade up to this breakpoint then it would cascade up to this breakpoint except we made a slight change here but we can option click to inherit that change so now you can see this change cascaded up to the other large screen breakpoints but it didn't cascade down to the smaller screen sizes and that's how you can make your website responsive right you start of course designing on the base breakpoint the desktop you create your website here and then you switch between the different break points you see that okay on tablet this looks pretty good but let's check it maybe i want a different padding here in the section let's go ahead and do that let's add a padding of 24 25 pixels so that change is now happening on tablet it's happening on mobile landscape it's happening on mobile portrait the desktop version is still unaffected and you just repeat the process you switch between break points and whenever you feel there's a need uh for changing things you can go and make your changes for example here on the tablet or sorry mobile portrait maybe i want some distance between these two buttons therefore i can select this button and i can add a margin bottom and that's it now everything looks as it should between breakpoints and you can see these changes happening in real time when you open up the preview mode and you start going through all the different breakpoints and screen sizes so then in this lesson we learned the basics of creating responsive websites in webflow we played around with breakpoints and learned how to switch between them but also how to add new ones we also watched in wonder how changes we make cascade upwards to bigger screen sizes but cascade downwards to smaller screen sizes but i think the most important skill that we learned in this lesson was grabbing the side of that canvas and going it's truly an art and not everyone can do it now let's talk about publishing a website with webflow every website you build with webflow can be published with webflow so in this lesson we're going to talk about the different ways of publishing how to export the code and assets and also how much it's going to cost you but first ways of publishing there are two ways if you go to the top toolbar and you click on publish you'll see that we have two destinations the first destination is for a webflow.io subdomain and this is selected by default the second is a custom domain and this is not selected by default so with this first one selected by default let's publish to selected domains and once that's done once it's published successfully we can click on this link to open a new tab to our newly published website and it's all here exactly the way it was designed in webflow but there's one problem this website address is not very professional imagine telling your clients hey you can go to my website adrian's fresh site 5ada98.webflow dot io that's not gonna work very well so what you'll end up doing is publishing on a custom domain but there is a reason this is unchecked by default it's a paid feature and currently we're using the starter plan which is free so if you click here that's going to take you to the billing page where you can choose one of the plans and starting with basic we have access to custom domains so basic 12 a month bill yearly a bit more when you bill monthly but there you go that is a paid feature now if you don't fancy using webflow for publishing you can do it the old-fashioned way by uploading your website files to a server directly via ftp but for that you will still need your static files and assets thankfully you can download those from webflow by going to the top toolbar and clicking export code and that's going to generate the html the css the javascript and even all the assets that are used in the design but of course for that you also need to pay this is a premium feature so you will need to upgrade your workspace plan to export all of these assets how much it costs well let's take a look workspace plans start from nineteen dollars a month when billed yearly and can go to even higher prices and that's how you can get the static files and of course that also brought us to pricing you saw how much you need to pay for certain things like publishing on a custom domain or exporting code and feel free to go to the webflow official page check out the pricing for everything they offer and yeah just make your decision then webflow is an amazing service but because it's an amazing service you do have to pay for certain things so then in this lesson we learned about publishing with webflow we saw that it's super easy to publish and you can even do it on a custom domain for a price we learned that it's possible to export the static files for a price and finally we took a quick look at said price all in all i think webflow is pretty awesome so please stick around for the conclusion and the conclusion is this all in all i think webflow is pretty awesome normally i'm not a big fan of these visual builders i prefer to write my own code but webflow is so easy to use and it actually generates really clean coat and i like that but what i like the most is how they embedded the principles of working with html and css in a visual tool and one that's as i said very easy to use so kudos to them now before wrapping up let's take a look back at what we've learned in this course we started by understanding how a website is built and what kind of technologies are used then we learned about the box model and how it's the foundation of all layouts we had a brief life-threatening encounter with a dangerous species but shortly after we discovered the webflow designer here we learned about the user interface how to add and edit elements how to work with classes and inheritance how to reuse elements through symbols and we also discovered the basics of creating responsive websites in the end we briefly talked about publishing with webflow and we learned that we can even publish on a custom domain of course for a price then came the conclusion where i said and i quote all in all i think webflow is pretty awesome end quote then i went on to recapping the entire course and saying the things that i just said 20 seconds ago so i'll stop here thanks very much for watching and don't forget to check out and subscribe to our youtube channel to learn more about webflow wordpress adobe xd figma and much more see ya [Music] [Music] so [Music] you

Channel: Envato Tuts+

Views: 29,903

Keywords: webflow vs wordpress, webflow beginner tutorial, webflow tutorial, content management system, cms, webflow, webflow responsive design, responsive web design, webflow course, how to use webflow, webflow design tutorial, webflow tutorial animation, webflow guide, webflow design, webflow tutorial from scratch, webflow for beginners, webflow tutorial website, get started with webflow, webflow creating a full site, webflow cms, webflow designer, webflow website, learn webflow

Id: yBonSwzuJYE

Length: 67min 2sec (4022 seconds)

Published: Wed Jun 08 2022