Build a personal website WITHOUT CODING in under 30 minutes!

hey guys my name is Varun Maya and the last week has been absolutely phenomenal for me some of you have been reading the book the reviews have been insane I'm glad that I could write something up in a manner that made sense to you guys that that's taking you through the entire journey of being a freelancer but one of the questions that have we've been getting a lot is how long does a chapter in the book where you mention personal websites where you talk about how do I build a personal website brand presence that clients can look forward to that clients can come into that I can advertise in the book we've spoken about a few tools you can use a few strategies you can use to build your own brand presence and website but I thought it was easier for me to just make a tutorial where I teach you how to build a personal website from scratch now I've been building websites I was 12 years old and there's a lot to it it's not extremely complex but at the same time with a lot of nuances that you need to be aware of and over the last maybe six months I've been using a state-of-the-art tool that has taken the time I take to build a website from maybe two weeks or three weeks to a couple of hours yes that's right that's two weeks down to a couple of hours and that tool is called web flow and it's really revolutionized the way avilon as a whole as a company approaches building websites and landing pages and I think and it would hurt me to see some of you out there not being able to use the tool or not even knowing something like this exists so what I did over the weekend was I reached out to Adam and lad from web flow and I told them look and applying to do this video on how to build a person website do you think it makes sense for your audience and they were ecstatic they said you know what we should do this will we help you in whatever way we can will help you the distribution we helped with the marketing so that's beautiful and I think and I'm going to keep this video short right I know attention spans are shortening as we speak it's just this is a function of the way the world is working but this video is going to be extremely short I'm going to teach you how to make a website how to deploy that website and you'll learn a lot of the basics of HTML CSS along the way to go through this tutorial you need no prerequisites you don't need to know how to code anything as long as you can use a computer you can use the Internet you can build a personal website over there tutorial

I guess so this is web flows home page I've already paid for the subscription so I can just head over to the dashboard we're just going to go ahead over to the dashboard and create a new website and I'm gonna be clicking on a new project and I'm gonna make sure I click a blank canvas let's just call this portfolio awesome now a few basics before you know we heard of the meat of things and this has to do more with HTML and CSS rather than web flow itself now the way HTML and CSS work is they have a very symbiotic relationship HTML defines how your website should be structured and CSS defines how that structure should be styled or designed right so we're going to use HTML to make boxes and CSS to make those boxes pretty now this is web flows interface this workflows panel now I'm just gonna head over to the left side for a bit two things we're going to be using a lot the first one is the add elements section so we can add cool elements maybe it's an image or video some sections are some columns or it could be pages for this tutorial we're just going to have one page we're going to call it the home page but we're gonna use this a lot right and on the right side we've got styles so remember I told you how CSS is used to style those boxes we make well if the elements on the left here are boxes then CSS only here on the right here they're how you style those boxes they're how you make the boxes pretty there's also a couple of other things we're going to be using we're going to be looking at the navigation structure here right now we have just a body we're going to add things inside the ignore interactions for now cool so first thing you need to know

is that every person who views your website will view it on a different device some people might use a desktop phone some people might use a tablet so what we want to do is we want to make sure our design adapts or becomes responsive to each user's viewport right or the size of their screen so what geniuses across the world have done is split of browsers width regardless of how big the browser is into 12 sections right now we are gonna call this section these sections the grid so every time we create a box we're gonna divide it into 12 parts and every time we create a box inside another box that sub box is going to have 12 parts again you'll see what I'm talking about very shortly all right so

let's begin with creating some boxes right like I said we're gonna make those boxes first and then we're going to style those boxes we're gonna make an incredibly simple website we're gonna have a hero section which is basically a main section we're gonna have some content in the middle of portfolio section third and then we're going to have a footer so four sections in total right so we'll go to the navigation system this is the navigation system and we're gonna go here and click on section right so we have this section here and we want the section to be called hero right which is basically your main section then we're gonna click on body again and then we're gonna create another section the reason I clicked on body was that whenever you create an element in web flow it always comes as a sub unit of whatever element you currently clicked on so whenever I click on body and I create a section it will come under body right so I'm going to rename this sections content and then going to create another section see this is the issue you need to click on body first and then create a section and I'm going to call this portfolio right and then I'm going to click on section again I'm gonna call this footer so cool so we have four sections I think I'll just rename here oh it's just not calculated cool so these are the four sections and what I'm going to do now is I'm going to start styling these sections right I'm gonna click on hero first and instead of me editing the hero section entirely I'm going to create something called a container inside this section now remember that grid I was talking about when you use the container element which is this element it actually makes sure that it leaves some margins on the right and left these margins are automatically calculated depending on the browser that person is using so and you can see this in web flow right for example if I click on tablets you'll see the Marge is a less so if I click on phone views these are the practically no margins right so and the bigger the view gets the more them the bigger the margins get so we're gonna use the container it automatically guesses how much space to leave on the left and right which is why you know you don't see websites with content all the way from the left of the right out so it's very difficult to read and we're gonna keep the focus in one section right so I've create a container here and I'm gonna go ahead and create a container in absolutely every section I'm going to create click on the section click on the container add a container so we've got four sections here and we've got four containers so right let's begin so what I'm going to do is I'm going to click this first and I'm gonna give it a background image right and remember I'm doing this on the section not on the container right I'm just gonna click on add a background image and I get to choose an image I'm gonna upload just go to my downloads folder and select this thing called the background image alright so we've got a nice background image here but as you can see it isn't very big right we want this to be a little bigger now in reality this actually won't show up if I publish the website and look at it this image is not even going to show up the reason is because everything every box you create an HTML needs a height and a width so that's exactly what we're gonna do we're gonna say width 100% so it's going to stretch out to the maximum viewport size and we're say height of maybe 400 pixels now everything all Heights and widths are calculated either in percentages or pixels right so so

here's how this looks now you might ask me why did I put this background image in the container now remember we put in the container so that it would contain our content right which is it could be images it could be text but not the background image should usually make it to the section itself to the hero section itself cool so and so now that we're done with this we're going to go back into the container we want to put in some content here right what we're going to do right now is we're gonna click on columns now we want to have an image on the left and we want to have some text on the right now how do we do that we use something called columns remember how I mentioned that every box has 12 sections now when you use the columns feature it creates two different boxes each of six sections right that fit into your parent 12 section column right and each of

these boxes has 12 sections in itself so if I press this Settings button you can actually make different types of boxes right and as you can see if I put three sections that's four and four what does that add up to four plus four is 12 right and you can make any types of sections as long as they add up to 12 right good for now we're going to use a two section column because that's all we need on the left side of the section I'm just gonna go ahead and add an image let's see right final image of me I want to stick don't ask me why I made this image or why it's even on my desktop but it's there so we're gonna use it now as you can see this image is massive we're going to resize this image so I'm going to double click this I'm going to set a width of 250 pixels maybe even less than 200 pixels right now you

might ask me right when we created this section I used this setting here to set an image right and when I created this image I used a totally different method of adding images which is media so what's the difference is that you can when you style a box using CSS you can either give it a background image from the CSS side or if you want an image in the foreground I recommend using elements right so now that we have this I want this to be banging in the center of this box so what I'm gonna do is I'm gonna click on the image I'm going to go to CSS here and I'm gonna click this Center element alright and that centers the element in the middle of whatever box is necessary it's this element right here center element right and in and that's that looks good so we've now got some semblance of me on a stick in the middle of our website and on the right side I'm gonna go add some text so before I add the text I'm gonna add a heading first right I'm gonna and I've added a heading here I'm gonna say hi awesome and then I'm gonna click on add element and I'm going to add a paragraph I'm gonna say I'm just gonna say welcome to my website I'm just gonna leave some of this text here in the next video I'm going to probably teach you how to do some messaging so you know people who look at your website are more interested in whatever value proposition you're selling them and I'm gonna choose a font for this right I don't want Arial it's the most boring font out up just can use EXO and I'm going to change this to maybe you know open sans alright so

one of the annoying things about what we have here is that if you look at it carefully you will see that my head is sticking to the ceiling so what I want is I want my I mean this entire thing to be I want a little bit of space on top right so one of the ways to do that is to click on the hero section and then add some padding all right so this is padding now there's a very big difference when you're padding and margin I'll just show you what it is so this internal thing that you see here is padding and what you see externally is margin so this is what will happen if I add some margins so margins are basically a way to push the element relative to other elements and padding allows you to push elements inside a particular element and because we've clicked on the hero section here I'm able to add as much padding as I want to so that elements internally can be pushed around and that's it I mean we've got a fairly good head of section here now you typically want a call to action so what I'm going to do is I'm going to click on this I'm going to add a button and I'm going to say contact me right and the cool thing about adding links on web flow is you can just click on element settings and you can say you know maybe you have a Google phone so Google Form I don't know I think it's Google coms like farm slash whatever form you have and you wanted to open a new tab because you don't want to you know make users leave your website directly without reading the rest of what you have to say and I don't like this particular blue so I'm going to change it to maybe just make it a worse blue cool so we'll use this color good so we've got this going for us now what we're gonna do is we're going to pull out the other sections and unlike this section we're not going to add backgrounds for these sections so one of the things about how these columns work we have these two columns here is that they make use of something called a float right and we don't want to particularly have these floats affecting what's in the next section so and you don't need to know what floats are right now we'll probably dive deep into that a little later but that it's how columns work right it's how columns know that they have to be either on the left or on the right but whenever you use it a float make sure that you go to the next section and click on this a clearer both sections so this kind of leaf space between whatever we last put in and make sure there's enough space left so that you don't screw up to the columns here so I'm going to go back in this container which is in the content section and I'm going to create columns and in this column I'm going to add a video all right and let's see I'm going to go to YouTube I'm going to look for I don't know let's take this video right so I'm just gonna add some random video here it don't ask me why I added this video but what you should do is add a video of yourself talking the camera about your value proposition in what you can offer companies or what you can potentially do for your clients and if you're looking for a job you might want to talk about the skills you have in video format and of course this has to be supported by text so I'm gonna add heading add a paragraph now we want all the headings and the paragraphs to look very similar the only problem is this heading here has the exo font whereas this heading here does not now this can be solved interview manually putting these settings again and again for every heading out there it makes a lot of sense for you to copy the styles of this and put it into this and that's where CSS comes in so what we'll do is we will give we've already given this heading a name it's called heading so you click on this and you type the exact same name heading and as you can see all the properties of this have been copied to this so you can have classes and each of these classes when applied you just have to type in the name in the selector we'll give it the same styles as the previous class or other something else of the same class so we know that this has a styling called paragraph so we'll if we above this and we'll type paragraph now you can type anything right you can even call it paragraph five and you could maybe give this you know maybe a exhaust styling and you can go here and remove this and say paragraph and this will copy the same style so it works both ways now I don't particularly like this font but it's a tutorial so let's just go ahead with it cool so now that we're done with this we will say you know here are my skills and we're just gonna leave this here right again we'll do messaging will dive in depth into messaging in the next video then what I want is I want to make sure there's some padding to this so pairing so that it doesn't disrupt later sections of scan ads and more padding 67 looks like the magic number okay cool so here's what we have and in this container this we were gonna call this I mean this is the portfolio section you want to make sure you have as many links to your portfolio as possible so you can look here you click on columns and I'm going to create let's say we have four pieces of content we want to show off I click on four pieces for four parts of great cool so now we've created four

columns we're gonna populate these columns with you know with our portfolio right these might be things we've made place equipment covered in it doesn't matter these are links now obviously these links are going to have images and unlike all the other images on our website the only other one actually we are gonna have a link on the image to do that we need to create something called a link block right so we're just gonna say for now we leave this to Google open a new tab now one things about a link block versus having just a link is a link black allows you to embed an image inside of it as usual we are going to Center this link block or rather give it centering and we are gonna add an image into this I'm just gonna choose some random image let's see here's an image of us being covered on entrepreneur mag entrepreneur India so I just copied this image and I'm going to make sure and it's already here but I'm gonna make sure that the image is inside the link block so whenever somebody clicks on this it's going to go to google. com and I'm also going to Center the image right now I'm gonna click on this link block I'm going to press ctrl C which is for copy and we'll paste in all the other columns now you could have you know different images different links make sure your portfolio conveys exactly what you're good at do the potential client or the potential customer right finally we as with every other kind section we've done this with we can add some padding now I could have made a class for all the sections that adds padding but I was just a little too lazy this time you should be using classes and finally on the photo section I'm gonna add maybe some color be allowed black column all right so I'm gonna add some padding to this section so that we can go down so you can see a little more and inside this container of course I'm gonna add in some text paragraph and I'm gonna say copyright mean 2018 contact me here right and again let's add some more padding so you can see that a little clearer okay and I make this white colored I change the font to like so and what I can do is I can actually put in a link and I can make this link or whatever I want to do bill dot forms or whatever and I can open this new tab now the different mean this in a link block is that a link block has an image embedded inside it this doesn't right and in the default styling for regular link is it dirty version of blue I'm just going to make it white again right and this is clickable and that's it I mean this is all it takes to make your own personal website and the cool part about making a responsive website based on the grid is that it easily scales to different resolutions this how it looks on a tablet this is mobile phones and really small mobile phones if you want some of your styling to be different maybe you want this to be aligned to the center on phones you can just click on the phone section and click on the center button right or the align Center button and in one cool parts about this is that this did not affect styling for larger sections so whenever you make a change on web flow it affects all the sections below it or rather all the responsive sizes below it but when you change the responsive sizing or change a particular styling in a responsive view it doesn't affect resolutions bigger than it right and you will get the you'll get the hang of this as in when you do it so that's it I mean now you can actually click on the publish button you can publish to a particular selected domain let's just do that and you can open it in a new tab so tomorrow you can just buy a domain on GoDaddy or Namecheap and connect it to this very simple tutorial on it you can find out about Flo's official resource and in and that's it this is your website