Webflow Tutorial for Beginners – No-Code Web Design

Key Takeaways

webflow is a web design tool that lets users build websites visually without needing to write code using a drag and drop interface in this course ashak Kumar will teach you the basics of using webflow to develop a website without a single line of code he's an experienced developer and teacher hey do you want to learn how to build a website without writing a single line of code if yes then you are at the right place in this video I'm going to show you how you can use wlow a no code website builder tool to create interactive and advanced websites without writing a single line of code my name is ashoke and you are watching the wfl crash course 2024 so let's dive in hey so first thing we are going to learn the layouts how you can create layouts in webflow using flexbox CSS grid columns or images buttons headings and paragraphs to create a nice looking website so as you can see on my screen here I have a wlow project open but before that let's discuss this pixel website uh I want to discuss about the layout here so as you can see it's a layout of uh one column right one column layout or just a one row layout right inside that you have heading you have a paragraph and and you have a button here right after that you have image or let's say you can create a video or anything that you want right you have it's a one column layout right but here you see it's a two column layout so layout is the most important thing when you are building a website if your designer is providing something to you uh in in a figma file on this pixel file we are using this pixel a lot these days to create designs you can uh give it a try it's not a sponsored video but you can give it a try it's an amazing tool right here all these Ticky interactions right uh to create uh interactive layout see the way they are creating these layouts uh here again one column but here you have let's say a gried layout of four five items in that grid here again you have a two column layout uh two column layout but you are using uh let's say 2x one uh grids here right two rows and one column and here you only have one column so uh websites are always built using these layouts these grids and columns and rows uh that you can use to create uh any kind of website whether uh it's an animation uh website or whether it's a just a simple website a simple landing page you must have knowledge about the layouts if you see any design let's say if if I if I just see this design right I I I must have this idea in my mind that okay I will use something like Grid or let's say flax box to create a layout like this that is must right if you want to learn the basics of flax boox or the CSS grid I already have videos on my channel you can go through them and you can learn the basics of them so that uh you can create these Advanced layouts okay so that's it for now on this page let's go to wlow uh a website is always using images headings buttons paragraphs and colors right to create uh a nice looking website so on webflow here I have panel like a top bar where you can see you have desktop breakpoint tablet breakpoint you have a landscape mobile breakpoint and you also have a vertical mobile or let's a portrait uh breakpoint if you want to add extra let's say 1280 pixel 1440 or 1920 you can do it from here by by just clicking this 1920 it will add a 1920 uh with of breakpoint for your website uh here you have designing where you can edit the website you can design the website right now you are designing the website if so let's say any owner of the website just give you the editor access right then you'll be able to edit to the website only nothing else you can do that here you can see the status uh if the site is auto saved or not uh here you can export the code you click that on this uh this code like icon you can export the code right now we don't have anything right that's why nothing is there uh JS file and all these HTML files I don't want anything right now here you can leave comments you can leave let's say you you have a website ready and now you send it to your client or to your team member so they can leave comment a designer who can leave comment just go there and just write their comment just like in figma or in pixo we do right you can leave comments uh you can by clicking this play icon you can uh preview your website here by clicking again you can just come out of it and if you want to share you can share a readon link readon link means if I just share this read only link with anyone they can uh view my designer mode this is a designer mode they can view my designer mode and and they just see okay this is how they build the site if you want to send it to any employers right any agencies then you are looking for a job then if you're I highly recommend you share the read only link so that they know the structure of creating a web website how you are creating a website so I think it will add some chances of getting hired you and Publishing here you have a staging domain and here you have a custom domain about this one we'll talk about this at the end of the project okay so now uh here on this left hand side panel you see all the required elements are there let's say you want to add a section you just drag it and drop it anywhere here you want you want a container inside that you can drag and drop inside that one and uh stack means a flax boox thing I'll show you uh in in in a while here you have a du block list list item link block and buttons all these things are useful when you creating a website in HTML if you have a basic knowledge of HTML and CS say that would be an advance or a plus point for you to learn wlow here you have a typography heading paragraph text links text block blog Cod reach text reach text is something like uh is you mostly used for blogs because in that you have everything uh image headings paragraphs list items videos everything you can show inside that one here here you can show collection list uh collection list is mostly used for the CMS I'll I'll talk about that also in a while in the CMS section media you can add a video you can image YouTube video loty animation was spline scene it's it's a new integration with wlow and spline you can add your spline uh items or 3D character here and you can play with it in in vlow here you have your form blocks all the form block label input text area this is for premium one checkbox radio select and all these I highly recommend you go through all these to know how how to use them just play with them just drag and drop them here on on the page uh one thing you have to keep in mind without form block you can't add this thing on your page let's see if I try to add anything they won't let me it because I need a form block there right so make sure you have a form block there this form block and after that inside that you can add this input text and everything that you want light box uh locals list this is for uh this one uh this multilingual website if you want if you want to embed a third party code you can use this embed or ne na bars pre pre-built na bars here let's say I want to add a na bar here see I have a na are on my page just a drag and drop thing you can have a map Facebook Twitter all those things you can have a search site search so many things you can do with this uh in this element panel here you have your pages you can see static Pages utility Pages means password Pages 404 Pages error page you your CMS collection Pages e-commerce pages and user Pages all these are Pages these are Dynamic PES pages when you create any user let's say if you want to create a membership website then you can access all your user pages from here if you are creating a e-commerce website then you can create uh access your product detail page categories page and other uh let's say checkout page and all those pages here and all the CMS pages will be shown here inside this one it's uh it it's like a template page that you design for once and and you can use it for many times you want using a predefined CMS fields and then you have the elements see this is the structure you have a section and a container inside that one and we have a na bar right if I just select the section and I do contrl c and control V I can just copy paste like that and uh you have these components components is something let's say uh this header right you're going to use this header on all the pages of your website right then you need this component so I just select this section here uh on the right hand side panel on the style panel you see create component if I click that I just name it let's say header and I just create it so now it's green now it become green and you can use it anywhere you want I just uh click anywhere outside of this green one and I just hit control e or command e to uh get this find uh bar and I'll just write head up you see this green if I just click I can see that and if I make any change here let's see if I make any change here from the settings I want to make it let's say homes see this is how component works if you make change at one place it will reflect to every other places where you use this component on your website right uh that's uh and you can see all your components here you can manage them and the next thing is variables so variables is something that you can use to store pre uh prein things let's say colors or the fonts or any sizes you want see size let's say I want my size like H2 I want the size of my H2 in the pixel or you can have all this value let's say pixel I want my H uh one let's say H1 to be 72 right and I want my paragraph paragraph size to be uh 16 pixel so how can I access them now so I'll just uh click here to go out here I'll just delete this second one I'll add another section here and inside that I will add another container and here I will do control or command e to bring I you just have to type here let's say heading I just type heading this is my H1 and here I want to make it let's say 72 pixel the one the H1 we give in the style panel I come down here and in the size when you hover on this you see this purple like plus icon you click that and you can just set that see it's simple right you have to do line height also right but that you have to Define them in that varibles or you can create your own style guide in wlow so that's how you can use these variables and this is style selectors all the styles that you have I have this one right that's why I can see that you can have multiple here as as you start adding new Styles you start creating your classes this is my class name right and I can access it from here all the assets whether it's image or PDF or the loty animation will be shown here inside this one in your setes you can just drag and drop your files here this is your CMS in this one you can create your CMS I'll talk about this uh later in uh in in the later videos uh here your flow logic all these are Advanced things right uh uh we don't mostly use this we don't use it we use zapier integr to create a flowless integration with third party apis or the applications you have your users you can create your users see it it is telling you this is what it is login sign up all these Pages it will create for you okay so the next thing is e-commerce see it will create products and categories Pages once you click on this let's let's do this I'll just click let's do this and it will create the pages you can setup you can add everything that you want a business address and the currency and all the shipment see right a shipping method right you can use a shipping method here you can review tax settings all the things which is required for any e-commerce business products categories discounts you can create all those things from here and the last you have apps you can search for apps there are only few apps at the moment but uh you can try out this one if you want to integrate with third party apps uh that was your uh by editing to create a website right this panel is used to add let's say CMS Pages anything that you want here in the pages you see the pages you want to create a new page you click here create a new page create on the folder you create a new folder or let me delete these things I don't want them here right now so here on the right hand side I see the style pan where you can add a class right now we have this heading class you can add any class let's say H1 this is your heading class right you can create multiple classes like this let's say I just add again that one I mostly use this uh control e to just search for the item that I want and I'll add here H1 edit class if I want to use this H1 anywhere I want let's say I add a new uh paragraph let's say paragraph I want to make my paragraph to look like H1 so what I'll do I'll just type H1 and I can just click and select that one so that will uh use that item right and uh after that you have a layout and by default it is a block you can use flax box you can use grid I'll show you right now uh you can use in blind block you can have in line you can hide the element also if you want to let's say I want to create a two column layout right so I'll just hit contr e and I'll just write cre and I'll just hit enter so I have just added a grid here and uh I want to create this grid let's say I just want two columns and one row right to edit a grid you click on here hit a grid and it will open so here you have two columns it says two columns two rows right I want only one row so I'll just delete that Row from there so now I have something like this and uh on the left hand side I want to use an image so before that I will add a du block here as you can see inside grid I have a d block and I'll just copy paste that d block again so that on one column I have D second column I also have a D in the first d block I want to add an image so I'll just do contr e image here I can choose image from here and here I can add heading I can add paragraph okay so I have a par paragraph here okay by default on body I will just remove this H1 so that uh that large heading is gone now and I want to have a button so I'll just hit so whatever you want let's say button list heading paragraph so you can just drag and drop here so I have this layout now and if you want to put some spacing here just click on this grid and for columns I want let's say 40 pixel or let's say 80 pixel right to make it look better so now I have 80 pixel of that and I want this in the center I don't want this Blank Space there so I'll select that particular D I want to make it in the center the content whatever the content is there in that du block I want them to be in the center so I'll just here on this right hand side you have align justify order in the Align I'll just make like that so now that thing is in the center the same thing you can achieve using flax boox right so let me just uh here quick stack and I just use this quick stack here see I'll just copy this uh in that set let's just copy this image let's copy that image and in that set let's copy this do in this cell see again you have the same layout now you want to add something let's say here we had 80 80 so right now by default it leaves some speeding so let's remove them like this want to make it in the center can do that from here also the center see the same layout you can achieve using grid and flex box okay so that is what the use of layout you can use flx box and CSS grid you have pings margins you have size you have this ratio overflow fet all these things that you need a typography to change let's say I want to change its color to Red that's it right uh next you have backgrounds if you want to add a background image or background color let's say I want to change its background color to I just click here I just want to make it background color to this that matches with my red color and I want to leave some pedding because I don't like this uh uh this it it is attached with the boundaries right I I I want to leave some pedding from the boundary let me do that here I have 26 and I'll add 26 from bottom I already I have from top because of this adding as you can see 20 right so this is how you can add background colors text colors from typography you can have borders all borders or just individual borders you can have H sorry this was for radius and this is for Border top border bottom right and left you can have a dash let's say I want all borders I want a border but Dash B and I want to make it a red one and make it let's say two two pixel so it's it looks like a card right and uh I can have a radius let's say all sides I want a radius Corner radius 16 pixel just look at this we just made few changes and it's looking a little good not that good you have these blending options all these are for images and converting something 2D and 3D transforms for uh let's say scale rotates Q whatever you want to do you can do that from here you can reset your changes from just clicking on that blue one and you just hit reset and it will be reset your filters uh you can have all the filters that you get uh in Photoshop you can have those filters here you can have your cursor let's say I want a pointer cursor for these one let say I play I see I have a poter cursor only on that one whenever I'm there it shows me poter cursor I don't want that let's reset it and and yeah that's it uh you have the style panel you have your settings for these elements such a d you can name it a uh ID d block you can hide these you can make it visible you can add a custom attribute this is ful when you are using third party libraries like fin Suite then you can use this custom attribute to link with your CMS items and all uh you have interactions means your animations all the animations are here let's say I want this to when scroll into view I want to slide this from bottom let's play this see easy and I want to slide this from right side left side okay left side okay oh no I don't want the whole one just image scroll into view a slide from left side just look at this animation see the way when something is scrolling into view it will work like this and you can have your animation for let's say desktop or tablet or let's say I don't want it on my phone only tablet and desktop it will work there there only uh that's how you can create uh these animations okay yeah so that's uh basic of wlow how you can add elements how you can interact with them how you can add colors and typographies and everything in the next video we will build a simple landing page where we will use CMS we will use uh all the concept that we have learned CSS grid and flax boox and also we are going to use some animations to make uh page interactive right so I hope you enjoy this video and stay tuned for the next one bye hey guys welcome back to our series of WL crash course in this one I'm going to show you how you can create a landing page using wlow without writing code and we are only going to use wlow core features that I showed you in the last video as you can see here on my design let me just uh shrink this camera uh as you can see I have a design here uh done in pixel I'm using this pixel you can use this pixel also uh I think because it's a it's quite uh alternative to figma and it's also free you can use this you can give it a try and if you want this design file you can check out the link given in the description and you can also play with uh the file and you can also convert the landing page you can follow the process so that you can learn by doing right so as you can see I have a design I have a naar the one that we have discussed in the last video right and I have a single column layout here uh with like let's say here we we could use a flx boox here I have a hero image here I have this client logos here I have this feature sections right uh left and right of one uh here we have these latest news here I'm going to show you how you can use wlow CMS I have promised you this one in the last video here we have a CTS section and our photo section so only few sections are there I think the these section are enough to learn wlow Basics to create any page because here we are going to create uh cover flexbox CSS grid uh we are going to use web flow responsive uh panel to create responsive for mobile one for this page right and uh let's start with that before start uh I want to let you know that I'm using a font called inter here so you have to add your font here in wlow to add a font in wlow uh either you click here or let's say if I click here it says add fonts right I click there it will take me to this website of section of W flow's uh settings page here fonts uh we don't have enter there so let's uh select here just type enter and here let's just uh select some regular fonts 5 6 7 8 I'm just just selecting them it depends on your choices whatever the fonts you are using the font weight you can do that and from there I'll just go to designer again so that I I have a font right so this is my process when I'm building any website so this is how I build I add font first and then export all the images let's say here we have a l logo as a image here we have logos of our clients here we have this image this image blog images I export all of the images and add them first here so that I have everything in place uh just to start building my website right once you have added your phones now here in the style panel click on this body and in the style selector click here so that uh it will show you all these uh classes you have and the pink one is the default class that we FL is providing you right for all the bodies in your website so for all the bodies in my website I want to use a font called enter let's find iner enter is here and uh this is the font size and 24 is the line height I'm using and here I want to use this color uh let let's grab the color from here uh 4950 and this one here you have the color there right so mean this color will apply to all of my uh phones on the website or my body colors um here we have images we have fonts now let's set up these buttons we have two types of buttons small and large small small and I think again large button so let's create button first uh let's create a small button I'll just zoom in here and here I will just uh add button okay simply add a button here before that let me show you uh how to add a container here you you contr e to pull up this find bar and add a section and when section is selected hit CR e again and add a container container this is your container container mean it's a it's a fixed value of your uh viewport right so that is the maximum value your content would be in within right it won't go outside of it until unless you create or you use positions absolutes and fixed and all it depends on that so my container here is has the width of let's me select this 1140 and inside that you have 12 12 paddings given from both sides you can see those blue lines so let's say uh here my container let's say I'll just write uh before I write container let me delete these uh CSS from our previous uh demo let me just clean them up I don't want to use them okay gone okay now here at this container I want to make it container maximum right now maximum with is 940 let's make it 1140 so now it's 1140 and uh inside that I'm going to add a button here's my button and let's get the button color from here what is the button color button color is this let's go there and just change the button color here my button color what is the radius of that button radius means the corners of that button is six pixel so I'm just going down here in this radius Border in this border section in on inside radius I'll just write six so from all the sides it will be six and what is the font size of that button is 16 pixel and uh semi bold inter semi bold so I'll just do that uh 16 pixel let's go here 16 pixel 24 semi bold semi bold enter right uh text is like a sign up this is sign up see it looks like that right and uh what else do we have here uh I think we don't have anything else there let's uh set up its line height to 18 or so and what is the Ping 10 10 and 16 16 from both sides let's say from top and bottom 10 ping and 16 from the both side right so here our button let's make a large button how to make a large button so let's say you have one button created a class now uh again add another class here say large right large so it's a large button large large button we just have to change uh its pedding and all a pedding is 166 from top bottom and from left and right we have 24 24 so let's say 16 16 16 16 24 and 24 you can use your let's say alt and uh just drag this it will work right but I I mostly prefer to you use keyboard not that drag one because sometimes it doesn't give you perfect one okay so now you have small and large button so large button we have text says try scale for free let me use that okay so this is our small and large buttons here okay so we have our buttons ready these are the classes you can use this class anywhere let's say I am adding a button on a different page and I want to make this button like the smaller one right here the default one is the smaller one so I'll just go here and I'll just add this class button see simple this is uh the use of CSS in wlow the classes that you can easily call and uh give up the style that you have already predefined right so our buttons are ready so let's uh delete them it won't go anywhere just Ting it from the viewport uh here let's use headings here we have to use headings also from for headings I will use uh heading heading one 2 3 4 5 uh let's let's use the six one also so here uh H1 H2 in the setting panel I'm changing all these as you can see you can follow along you can speed it down if you want uh this is H5 I guess yeah H5 and H6 it is also telling you what is the heading uh of these item right the heading you're using H1 H2 H3 H4 so by default we are using for heading we are using 48 and the color is black right 48 for the uh sorry medium medium font weight we are using so let's set all the fonts of we have uh here let's go medium uh and uh let's make it black let's not use that black uh for H2 also uh medium and uh black for [Music] H3 black I'll make it medium for here also H4 black I'll make it medium for this one also H5 medium and black H6 H6 medium and uh black now let's go there and what is the font this is our H1 let's say this is our H1 it's 48 and 60 pixel of line height uh 48 let's set this as 48 and 60 for line height uh let's say this is our H2 40 and oo let's say 48 we can use 40 let's make it uh 40 40 and 48 uh here we can go and let's say this is our h I think this is our H2 again this is our H3 but let's say this is our H3 and uh okay this is also H2 uh this is our H3 H3 let's use this as H3 28 for H3 let's go and use 28 and 36 uh 4 H4 this is our H4 the block Title 20 H4 all over H4 will be 20 and uh 28 I'm just using eight here there here it by default gives you these ones you can uh remove them if you want I just want to keep these for now right so now you have your headings your buttons are all set to go right you have your color uh here in the style guide you can see you have everything that you want right 72 that I think we have added this in the last one let me add a color so that I can use it if I need it any anytime just go here and the color is this uh brand color all and uh color of this text is this uh text text text color I'm just giving a name you can give a proper name meaningful name make sure you always name them properly so here we have a section inser container we have headings let me delete all the headings now and uh and let's start uh developing this page uh so I'll try to use the predefined sections given by wlow so I need a heading right I need a header as you can see in the design we have header so for adding a header what I'll do I'll just click here on this Plus in the layouts uh in this one I'll just uh find the header I want I think this matches with my requirements very well this one so I'll just go here and I'll just drag and drop I don't have to do anything else I'll just track here and inside that they might have used the container or something container they already have container let's not use their container let's use our own container so here we have our own container and uh let's not use the these things I think I don't want to use them Let's uh use our own container let's make it auto from margin AO setting Auto means uh it will leave space from let's say if you set auto from both the side mean it will be in the center whatever the content size you have it will be in the center okay so for this one background I want my background to be white I don't want to use any predefined color here let's uh take it as an example here the image I'll just choose my logo here I have my logo what are the links I have home features blog and sign up right home features and block so here we're going to change a few things let me read that this take that and for this one I'm not going to use the primary given I will just use my own button the smaller one I think we had righted get started let's use sign up sign up sign up so this is my button from Top what is the Ping from Top it is 16 let's add a 16 from top 16 from Top ping uh I think that's it see our let's go and see the size of this one 14 pixel regular and this is the color for the that one here enter normal we already have that for all the nail links that will be our color let's say if you want to make it nail link the medium let's make it medium right so this is how you can make it and what is the spacing spacing is like 24 let's add 12 12 from sides right now it is that much I don't want this uh margin there I just want 12 12 12 and 12 means by default it's like 12 12 here I want 24 again but how can do that uh I'll just add uh a class here called M M for margin L for left and hyon let's say 12 because I already have 12 right so I'll just add these and I'll just add margin to LC this is how our would look like uh as part our design that is our header see it's it's easy right it's super fast you can use vlow fore library to create layouts so not every time you have to create these things from scratch because it takes time so you can use these you can clone some items if you if you want to if you want some inspiration you can go to our website and find more inspiration on how how we use components to create uh these layouts faster right so now we have our this ready now we have see this is mobile responsive right we will change this later don't worry about that that uh that that we had now we have a section inside the section uh we have container the one we did earlier so here I want uh in this section I want uh image I want this content with this button and uh let's let's see the the padding we have from Top from this menu we have 80 from top and from these uh logos we have 67 right I I I think that's fine because logo uh that image has that opacity down there so let's say here I I'll just choose that section from Top I want to leave 0 and from bottom Also let's say 64 not 67 but 64 now your container will be in the center so here I want to add a du block or you can say let's say here you go uh the elements V Flex right means vertical flex and S Flex means horizontal Flex whatever you will put inside this V Flex it will give you structure like uh this right so let's add a v Flex here inside this container I'm adding a flex block block vertical by default it is vertical so what we had there we had a heading we had a paragraph and uh we had a button right so now it's not looking properly the way we want it right so here in the flax box you see all these properties aligned aligned right now it is aligned to the start wherever you have a box from the start it will align your content what if you align your content to Center if you do Center if you hit center button here your content will be in the center if you hit end then it will start start from the right hand side let's do Center because that is what our requirement is and uh still the content is not in the center properly because this paragraph is going outside right it is starting from the left line so what I'll do I'll just scroll down a bit in the style panel and I'll in in inside this typography I have this align again for the content text I want to make it Center see now it's the now it's in the center so let's go and grab our copy here let's make that uh here I'll show you a Max width how to use a Max width for this content in a while try scale for free here I have a button I have this button should be large right so let's use button and let's use large simple right once you have everything predefined pre-built a style guide then it becomes very easy easier for you to build any layout any pages in wlow whether in framer or V Studio you have to create this style guide make sure you always have a style guide with you so that it's easier for see 2424 we have so here I choose this flax box and the row Gap I have is 24 between all of them right so from these one I just want to remove these uh margins given by default I don't want them because I'm adding manual manually row values the gaps we have for this paragraph also given by default is I don't like this okay so now as you can see here here if you click here on this uh paragraph it says that here in this width one it says 451 right so let's go here to make how you can make it just like we did container how we Auto align them right in the center we can do the same thing here let's say choose your paragraph Max width inside Max withth 451 and uh okay I think we don't have to do that because we are already using flax boox so that it is already setting up your content in the middle okay that was your max width so now if you just uh review this here one click review this and this same right so this is how you create sections and content within wlow okay so I think uh we have some ping here also so let me see 99 right okay 99 inside that you have nine and inside that you have nine okay now it looks perfect to me okay see okay great I think uh so far it's good right hope you're enjoying this if you have any doubts please leave a comment I would love to help you out with your queries uh now let's add this image I'll just go up here after this block I will add that image but before that I will let me add that uh V Flex again V Flex again here here again I'll hit contr e and image I'll choose that image from my assets uh let me find that image let me find that image let me find I think this is the image okay this is the image I look was looking for and I will again make it in the center and I I would like to put some ping between the button content and the image 56 as you can see so let me put some ping from top or let's say margin 56 okay so now you have uh nice looking header area hero area whatever you can Sol the fold area right that is built uh with f flow without writing any code right simple uh what else we want to do we want to add this uh logos we want to build these layout also okay now let's start with the logo section so what I'll do now I'll just uh copy paste uh let's not copy paste uh in this one let's let me create another section this section inside that I have a container and container I will always give that container uh style that we have already created so that it stays in the center uh this one has 67 from top and uh one Zer from one bottom but I don't want to add that now because we already have that here I guess 67 64 right so let's create that section as it is by default let me add some pading here so that I have something to create okay I'm just adding I will remove it at the end so don't worry about that okay I have a title so for the title I will use a text block a simple text block and what does that title says join the join 14 position scale and that one is like 16 pixel medium and 24 pixel line height and it is a a case 1624 what was the color color was this one okay let's change its color to this and uh here to make it uh uper case here you have to click on this more type options and select this one for uppercase for this one for your capitalize and for this one for your lower case right this one and I want these in the center and I want to make it like a medium so that I looks like that 1624 see we are building it super fast and now let me use uh again a flax box but a horizontal one I will go down here I will again put it inside that one and I will use all of my Logos the logos I have click that uh image let's say this logo I have here 2 3 4 five I think I have five logos yes second one is Harvest ede cut let's select this Harvest Harvest AG card don't worry about the layout now let's just add the content we have AG card and then we have pastel and Infinity uh pastel and uh infinity let's look for Infinity okay so I have this flax box what I'll do already created horizontal because we have logos in the horizontal way I want them to be in the center okay I don't want them vertically but I want them uh horizontally Center that's why I'm using justify here okay uh I also want them vertically because if you look at some logos there from Top This is large so some logos might be large in terms of height so that's why you have to use these in the center align in the center so that all your logos will be there and here let's add a gap called 48 as you can see we had a column Gap this time we are going to use column because we are working horizontally 48 for Logos 48 of cap there as you can see we have our logo section there and we have a ping from Top it says uh I don't know 32 let's use from top 32 okay so now we have our logo here so far we have mostly used flax box right see the power of flax box you just drag and drop things and adjust them as you want and you'll have something uh that is given in your designs by your designer uh here we could have used uh grid also but I don't want to use grid for this simple thing grid can be used for this one and for this one right for large things okay so now we are going to create this section this feature sections and we will link all these sections home features blog later right but uh for now let's build this section we will build it for once and we will use it duplicate this for these two times I'll show you how you can also this uh swap them uh here I have the sections I'll I'll just use this SE I'll just create a new section again section inside that I will add a container always make sure that you have you follow this process uh this section let's give it a name page section the hero one is the different one that's why I'm not taking that one uh here I have the Ping for section is 104 from top and bottom let's use that top and bottom 104 104 inside that I have a container inside that container let's give it a name I have to give it a name container stays there and uh here as you can see we can use a grid a two column grid uh one for the image and one for the content let's add a grid here I'll hit control e type grid so I have grid I just hit enter so I have a grid now inside this I just want only one row and two columns columns I have two columns Row one here there are two rows I don't want them only one row two columns and what is the gap between them what is the gap between them let's use the gap between them 11 19 let's use 120 120 of of the gap of that uh four four four rows let's use let's say 40 I think that is good for the mobile one here I have uh I think I think let's not use 120 let's not use let's not use any gap for now let's let's use them later so I will add a du block inside that grid I will copy paste that du block again means I have two du blocks for two columns one for the first one second for the second column so here uh I have the image so I will just uh pull my image and just drag and drop your image you can do that too so this is my image so here I have this image and I can put that image inside my d block I have my image in the second d block for the second column I have heading that is H2 see H2 and uh you have paragraph and uh what else do we have we have a button a small button so that is fine a button here we can use a button class we already have here for the small button heading what is the heading title heading title is that uh what is the paragraph paragraph is that okay okay now we have this H2 let's again uh remove that zero zero I don't want them because I most mostly use flax boox okay so now uh this content is like 15 and 24 so here from this bottom let's add 15 or let's say 16 and below this uh paragraph let's say 24 I always change these names I don't keep it like this it's not a good practice always make sure you keep up proper name here this grid right let's say uh it should be like feature features GD means if anyone is working on this project your partner or your team uh teammate right they know what is this grid used for like this heading H2 give a proper name right now I'm just just to show you how this works and all that's why I'm taking all these uh examples learn more text is more so here the content is in the center of the image so how can you do that in CS grid select your D Block on the right hand side panel you see this align to Center so it's in the center now as you can see here so it will be in the center and the Gap we have is like 120 that I think we did Also earlier 120 and that's it you have cap of 120 so here what's happening is uh you have this 50% inside this 50% we are just leaving padding from here so I think it is uh creating our section not sure right now uh what can we do here I think it's fine let it be like this for now right in the next one we can do something else uh let let me copy paste this feature grid two times so that we have a layout that we want here in the second one what I'll do is I'll just add a class combo class this is called combo class reverse right reverse and I want to send this in the last one see this is this is how easy it is right so now uh you have your content here so this is how your content will be when whenever you are creating this uh using this grid system in flap flow uh you have your content I know this should be here like this but let let it be like this for now I don't want to add a spacing there um let's see the the gap between two grades 80 pixel let's add for this grid from the bottom add 80 so means all the grids that is using these class features grid will have a margin of 80 pixel but the the last one I don't want so margin bottom zero see I use these uh class names like this so that I know okay I here I'm putting margin bottom or here I'm adding uh margin top for Mt for margin top ml for margin left all those kind of uh namings right for for my understanding how how what what they will do and all so here we have a section ready of feature section and after the features we have this grid section where we have a section title so let's do that uh let's go up here here I will show you another thing the naming thing that I was discussing about here this one let's go here let's delete this great I don't want that here I don't want uh I I don't want to even use this so let it be uh let's dat that so here we already have 104 pixel of pedding here I don't want them from top of my this section so what I'll do from here ping top zero and and I will just make it zero like that so now uh that will be like a in sync right the bottom still has 104 because I have uh this section I'm adding 104 here that's why so here what I have I have a section so I I'll just use again uh V Flex V Flex I'll just type V and I have a flex and uh here let's use a heading here let's add a paragraph for Section title let's use the heading because this is good because we already using H2 for that one and here you have this latest news here you have the latest news here you have good questions the sub graph sub headline here I will make it in the center the content is also in the center after that one what is the value 15 okay again the same one so not an issue 15 from that one 16 that's is the 16 okay so we have a section title now after the section title we have a grid system again 56 so let's use after section let's add 56 of margin bottom for the section and inside container add click on the container and add another grid and make it three column only one row and what is the gap between them 24 right let's use 24 for mobile and bottom both uh for mobile and desktop both here I have that one I'll just create one and I will use it for for all of my uh blog blocks I'll just create one here the One D I add did inside that I have image so let's use uh image I have my image okay let's let's uh okay let's create this and I'll show you how you can add CMS here and I have another heading and I have paragraph and I I have a link block button link block means I can add image I can add icons inside this link block that's why okay so now uh let's say a Tex block is there and uh let's use an image here for this icon we have let me go here and Export this icon for you team icon export and uh I want this in the PNG format only I just use that PNG I'll just use that here again let's look if they have added not not added yet okay let's upload the icon icon is been uploading and now select that icon again here okay now we have the icon so let's make it flax box here this link block click on the flax and I align item in the center and what what is the gap that we want to have here four pixel let's the column Gap should be four pixel here and uh this is our thumbnail this is our heading let's use uh H3 because we are already using H2 here and this is our paragraph or summary uh let's make it a is a black color black and uh I don't want to use underline so that I'll use this cross icon here okay so this is my link uh what does it say learn more right so let's use learn more learn more so I have my card ready here that I can use it for my uh blogs so what I'll do I'll go to the CMS I'll click on the CMS now the fun part comes in create a new collection I'll create a new collection okay I want blog post by default WL gives you all these ready made pre-made collections that you can use for authors categories projects if you creating a portfolio website then it's for projects team members if you are want to if you want to add a team member you can do that from here and uh just hit create collection let's not add let's not make it more complex now I'll just add fake dummy data given bylow add five items I want to add them here I have my five items here so now how to get those collections here so what I'll do I'll click on this container I'll hit come control e and I'll just type collection list see collection if I just type call it shows me collection list I'll just click collection list okay so now you your collection list uh then source where the data comes from we have blogs right not from the e-commerce we have created this in the last video I showed you let's say blog post so it will show you how let's say you have five blocks right it will show you all the data that you have inside that blog post uh inside this list uh let's take a name of this grid and uh for this collection list let's make it let's give it a same name grid as you can see I have my grid here I have three columns and inside the grid we had created this du block let's copy that and put that inside this collection item I'm just adding that I'll just delete this because I have these items here see as you can see all the blocks that uh I have inside my collection list uh will be visible here eight items right it should chose me eight items right now means three 6 and eight collection list here on my page you can see I'm showing only three blocks right so let's use only three let's not use many so on the settings of this collection list here you have filters s order and pagate items or limit items I want to limit items by only three show only three items now how you can connect these items headings paragraphs and images click on the image come on the settings side here on the right hand side get image from the database it shows you the thumbnail right the thumbnail and what about the heading click on the heading the same thing follow the same thing here heading and here let's say summary post summary and for this link block click on this link block it will work like a link and this one is for our link page the detail page current blog post mean all the blog post if I click here so I can view this blog post page the detail blog post page if I click this one the same thing and goes for other right so here I have content so I uh so here you can add your blog like this using the CMS we for CMS easy and uh I think uh we night now we have to build these two sections so let's go again and create them let's say again adding a section inste that I can add a container inside that container okay let's let's set the color first section I'll go in the style I'll use the background color the one we have saved earlier brand color and what is the gap I'm adding here 8080 from top and bottom for the Ping of the section 80 and 80 inside that I have this content container and let's give it a name again right uh G name uh you have content to column grid again let's use a grid make sure you always name your gdes and your items here just for the demo purpose I'm not naming anything uh 120 let's use 120 again 120 okay here on the left hand side column First Column for the D second column for the D here I have heading after that I have a paragraph and after that I have a button okay and uh on the second column I have uh image let's use that image here I think this is the one that I'm using the okay let's make this D Block in the center Center you know this now that I use this align to make it in the center and here you have this content it says encourage fa