How to Create a Free Website (Free Domain & Hosting) 2020

What’S up guys, i’m dale mcmanus from create a pro website and in this video i’m going to show you how to create your own free website using a free domain and free hosting by the end of this video you’ll have a website that looks like this, and It will be published live so that anyone with internet access can view it, and this website was designed using drag and drop and i’ll walk you through the whole process, step by step.

So if you’re ready, let’s get started, step number one is to create a wix account so to do that. Just click on the very first link in the description or you can just go over to create a pro website. Dot com, slash wix, and that will take you to a page that looks like this and it’s completely free to set up an account.

So to do that just simply click on start now, then, you can just go over to sign up right here and then just type in an email then type it again and then a password and then retype your password, then just go ahead and click on sign Up, okay, so now we can move on to step number two, which is to customize your website.

So, to do that, you can just go ahead and skip this tutorial down here at the bottom right and then we’re just going to select, choose a template and you can explore tons of different templates in here and really what i recommend doing is starting with one That looks semi-like what you want your website to look like and then we’ll go in and drag and drop and replace items on the website and you’ve got all sorts of different categories up here, like creative you’ve got photography, design, music and so on, or you can Just search by all templates right here, but in this case i’m gonna go with a professional portfolio type one.

So i’m gonna click on portfolio and cv and then i’m just going to scroll down and look at some of these websites. And if you want to view one, you can just hover over it and click on view, and it will show you a little animation of what the actual website looks like.

So i like this one, so i’m going to go ahead and click on edit and then that’s going to bring us into the wix editor and then you can just go ahead and close out of this tutorial as well. So now, let’s do an overview of the interface.

So first you’ve got your navigation menu over here on the left, and this is where you can create new menus and add pages to your website, as well as change backgrounds and add new sections and elements to your website and a few other advanced items here which I’Ll get to later in a different video, then over on the right.

You’Ve got your toolbar for editing the elements on your website, such as their alignment and position, the size and so on, and then you’ve got your main toolbar for the website up here, which i will be getting into later in this video.

So, first let me show you how to change text on your website. It’S very easy! So to do it, you can just go over to some text, that’s already there and you can just double click and then you can write whatever you want.

So i’ll write. My name then you’ll see this text editing window pop up here on the right. So if you’d like to change the font, just simply double click, and then you can change the font right here. There’S a whole list of ones that you can try out or if you’d like to change the font size, make sure that it’s highlighted, and then you can just drag this little slider bar up.

That will make it bigger or smaller. But i’m going to stick with an 88 just like they had and if you’d like to change the color of the text, you can just go over here to this little color button and click on that, and you can change it to anything that you want.

And you can just hover over to see a preview of them, but i think white looks pretty good, but if you’d also want to add your own color, that’s not in this little list here you can just go down to add color and then you’ve got a Whole spectrum of color to choose from simply by clicking and dragging through this hue slider.

But again i’m going to stick to white and then you can just close out and then, if you’ve ever used anything in a word document. It’S pretty much all the same settings right here and then we’ve got effects down here, which we can open up and you can add, drop shadows to your text, borders and things like that.

And then you can also edit the line spacing the letter spacing and so on in this menu right here. So now i’m going to change the second bit of text and i’m going to make this one a bit lighter. So i’m going to go to the color and then i’m going to choose.

Maybe something like this. Let’S just make sure that’s highlighted, go to color and we’ll go with, maybe something like that and then just click the x and, if you’d like to write new text onto your website.

So let’s just say that there’s some here that you want to add underneath you can just go over to add and then just go up to text and then you can pick theme, text, titles, paragraphs and so on. So with theme text, let’s just say we’ll, do a heading two and that will just add that in and then you can edit it.

However, you want – and you can just move it around by simply clicking and dragging, but in this case i kind of like what i’ve got so i’m just going to hit backspace and delete it. So now i’ll show you how to change the images on your website.

So it’s really simple: i’m just going to scroll down and i’m going to click on this guy right here and then i’m just going to click on change image. And then you can upload new files by clicking on upload media right here.

So i’m going to go ahead and upload a picture of myself and then upload from computer. Then i’m just going to grab this one and then click on open cool. So now i’ve got that image of myself and you can crop and adjust them over here on the right.

But i like the way mine looks so i’m going to go ahead and click on choose image and there we go now. I’Ve got an image of myself right there and if you want to change the background image, you can just go up and click on this whole section and then just click on change, page background and then you’ve got ones that you can select here.

That wix gives you, and some of them are even videos which you can see a little preview of here. So let’s say: there’s some sky movement right there, it’s pretty cool and if you load that in it’s not actually going to play in the editor, you’d have to preview your website up here to actually see that video working.

But in this case i’m going to use another image of my own. So i’m just going to go to image and then back to upload media up here and then upload from computer and then i’m just going to drag in this blueprint paper right here and click on open cool and then now i’m just going to click.

On change background and there’s my new background in there and it looks a little bit light, so what we can do is also add an overlay to this. So what i’m going to do is just go on over to settings and then i’m going to click on the color behind image and i’m going to change that to black and then click on the x.

And then you can just drag this image. Opacity slider down and create a bit of a darker background, which i like just something like that, then just click on the x and that looks pretty good. So now, let’s look at how to change the button and the button style.

So to do that, you can just go over and click on the button and in this case i already have one. But if you don’t, you can just go over to add and then go to button and then select one from the list. So i’m going to cancel out of that and then, if you want to change what the button says, you can just click on change text and you can change that right here.

So right now, mine says download my full resume. I’M just going to keep that the way it is, and if you want this button to go to a specific place, you can just click on this little link button right here and then you can send them to all different places.

So if you want to do a certain url, you can just click on web address and then you can paste in that url right here or you can go to a different page on your website right here and then you’ve got things like anchor, which will send Them to a different part of this home page down at the bottom, maybe or you can display a phone number or an email and so on.

But let’s just say you wanted to do web address. You could just type that in right here, but in this case i’m just going to leave it and then, if you want to change the style of the button, just click on design and then you can pick different themed options right here which are presets or you Can just go over to customize design and then you can change kind of the style of the button.

So if you want a little bit of a shadow on it or some sort of a border on it, you could i’m going to leave it the way it is, and then you can change the color so right now this has got an empty fill on it.

So if i wanted, i could make it a blue button by simply clicking there and selecting one of the colors here or i could go to add, color and create my own. Maybe something like that and then just click add and then click on the x.

But in this case i’m going to go over to hover and i’m going to change the hover color to be translucent, so you have the option to change the color or in this case i’m just going to bring this all the way down.

That way, when i hover over the button it turns transparent like that, so it will start blue and then, whenever i hover over it it will be transparent. So let me show you so i’m just going to click on the x and then i’m going to click on save to save my work and then from here you can also just name your site, so i will call this free website just like that, and then Click save and continue cool and then just click on done and then i’m just going to go over to preview and then, as you can see, whenever i hover over this button, it will turn transparent cool.

So now just go back to the editor and you can drag around and resize any element on your website. So let me show you if i were to scroll down. I could just grab this social bar right here and i could drag that around anywhere that i wanted.

So if i wanted to reposition it, i could or if you want to add new images and things like that to your website. You can just go over to the add button and then click on image and then just go over to my image, uploads right here and then again, upload media upload from computer and then i’m just going to drag in this mouse.

So i’m going to click open and then add to page cool. So now i’ve got this giant mouse all over my screen. So what i can do is resize it by simply going up to one of the top corners. You can see the mouse changes to this little resize button, so we’re just going to drag that down to make it a bit smaller and then i’m just going to scroll down and put this somewhere else on my website.

So maybe something like this, or actually i’m going to drag this down to be maybe somewhere on here, just like that i’ll resize it just a bit, maybe just like that cool now, let me show you how to resize sections on your website, so maybe you’ve got A section that you think is too big or too small.

What you can do is just click on that section and then you can just go down and drag this little stretch button right here and that’s going to resize the whole section just like that, and you can do this for any one of the sections on your Website and if you want to reorder these sections, what you have to do is just go on over to the little zoom out and reorder button right here, which is a little magnifying glass and then you can just come down and drag whatever you want around.

So if i wanted, i could just drag this whole section and put it underneath the contact me if i wanted, which i don’t want to do, because it looks a little funny, so i’m just going to drag it back the way it was just like that cool.

So now just click on the x and, if you’d like to add a new section to your website, you can just go over here to add and then just go down to strip, and then you can select all different ones in these little categories right here.

So let’s say that i wanted to add a service as one i could just go down and click on one and that’s going to add that at the very bottom. So what i need to do is reorder it. So now i’m just going to go back to this little magnifying glass and zoom out and reorder, and i’m just going to grab it, and i will put it right underneath the about section just like that and then just click on the x cool.

Now, if i go down, we’ve got that whole section right here, which we can edit the same as everything else. You can replace text, replace these icons by simply clicking, and then you can just change the basic shape.

So now we can move on to step number. Three, which is to create a header so first, what we want to do is add some menu items to this menu. So what i’m going to do is just click over here in this orange area and then i’m just going to go over it to menus and pages and then from here you could add an entirely new page to your website.

So if i wanted, i could click on that and then call it about and that’s going to add if i click on done a completely new about page that we can edit completely separate from this home page. But in this case i’m going to control z and then what we could do is also create an anchor.

So if we wanted, we could click on a button up here in our header and that’s going to take us down to say our about me section or it might scroll down automatically to the services section. So let me show you how to do that.

So what i’m going to do is just go on over to the add button and then, if you go over to menu right here, you can go over to anchors and then you can just click on an anchor right here and just drag that in and we’ll Put that right here, so this is at the top of my about section just like that, and then what you can do is just click on rename and then you can just call it about just like that and then click on the x and then that way.

Whenever we go back up to the header and we click on it, then we can go over to menus and pages and then you can just go down here. To this little add a link button and then you can just create an anchor right here.

So you might already be on web address or something like that. Just click on anchor and then you can say where you want this to go to and it automatically has about already put in there. So i’m just going to click on done and then i’ll just name it about and then click on done cool.

So now, if i just click on the x and scroll up, you can see i’ve got a little menu over here on the left and if i were to preview this and click on about it’s going to automatically scroll to that anchor right down here.

So, let’s add a few more anchors to our website, so i’m going to go over to add and then grab another anchor and i’m just going to put that here on services and then i’ll just rename and then call it services.

Click on the x i’ll go down, go over to add, drag in a new anchor and then we’re just going to rename this one and call it skills, click on the x and then, lastly, we’ll do contact so i’ll. Go to add anchor drag it in right.

Above the contact section right here and then rename it and we’re just going to call this contact and then click on the x cool. So now let’s go back up to our menu and click on it and then we’re going to go to manage menu and then we’re going to add a few more links in here.

So i’m going to click on the little link button and then we are going to call this one services so just go to which anchor on this page and click on services, click on done and then just name it services, then click on done and then we’ll Add another one go over to here: go to skills done, we’ll call it skills and then lastly, we’ll add a new one and go down to contact and then done and then just rename it contact and you can reorder these in your menu.

So if i go up it’s going to be blocked by this window, so i’m going to just exit out of that. So you can see. We’Ve got contact skills services about i’ll. Show you how to make this a horizontal menu instead of a vertical one, but in order to reorder it just click on it, go to manage menu, and then you can just click and drag so i’ll do about first and then i’ll do services.

Then skills then contact just like that and then i’ll just click on the x and scroll up. So now, let’s make it into a horizontal menu. So i’m just going to click on it and then we’re actually going to delete it by clicking on the backspace and then i’m going to go over to add, go down to menu and i’m going to go to themed menus and just pick this basic one up At the top, which is a horizontal menu, that’s going to add it into our website, and then we can just click and drag that up to the top.

Just like that, and i also want to get rid of the home button. So i’m going to click on the menu, then go over to manage menu and then i’m just going to go to the little three dots next to home and then i’m just going to hide this and then just click on the x and there we go now.

We’Ve got our four different menu items and we want to kind of align it with our button. So i’m just going to drag it down just a bit, maybe like that. So now let’s save our website and just click on done and then just go over to preview, and now you can see, we’ve got our menu up here at the top.

So if i click on these, they will jump to the different sections services and so on, which is pretty cool all right. So let’s go back to the editor and now let me show you how to add a completely new page to your website and edit it.

Okay, so to do that, you can just go back over to your menu up here, because realistically you’re going to want to put this page in your menu so that people can get to it. So i’m just going to click on that menu and then go to manage menu, and then we can just add a page.

So i’ll just click on that and then we can give it a name. But in this case i’m just going to call it new page. You can call it whatever you want it to be for and then just click on done and then this is going to add it to your menu.

So now, if i just click on the x, you can see. We’Ve got new page right here and you can see it’s also created a whole new page for us automatically, there’s nothing in this page. Yet so if you wanted to add stuff to it, you could just go over to add and then you could go down to strip right here and you could drag in all these different types of strips and build your website out like that.

But in this case i don’t want to waste too much time doing that just wanted to show you how to add a new page. So i’m just going to go back and click on that and go to manage menu and then just get rid of that page.

Cool okay. So now, let’s move on to step number four, which is to create a contact form. So let me show you how to do that. So if we just scroll down to the bottom of our website, you can see i’ve already got a contact form right here.

But if you don’t, maybe you selected a different template that doesn’t have one you can just go over to add and then just go down to contact and forms right here and you can select a whole bunch of different contact forms.

But in this case i’ve already got one, so i’m just going to edit this one. So what you can do is just click on it and then, if you just click on form settings first, what we want to do is make sure that this contact form is sending these emails to the correct email.

So to do that you just go over to settings and then you can rename your form right here. If you want – and you can go down to email notifications and then you can see, we’ve got my email down here and it’s going to notify me whenever i get a new submission to this contact form.

So if you wanted to add a new email or change that one, you can just click on, add new contributor, and if you go over to submit message, you can change what the submit message says right here. If you’d want or whenever they actually send you an email through here, you can change it to go to a specific site or a external url.

It just depends on what you’re, using this contact form for now, just go ahead and click on the x and, if you’d like to add a new field to this contact form, you can just click on the add new field button right here and then you’ve got A whole bunch of different options here, like text number, the anti-spam options and so on.

So if i wanted to add, let’s say a phone number, i could just do number and then click on number field and that’s going to add that in right here and i can just click oops, i can just click and i can rearrange the order of that By simply dragging up – and let’s say i want to put it underneath the subject and then i can drag the message, one down just like that cool and if you want to edit each one of these fields, let’s say you wanted first and last name here: you Can just click on name and then click on edit field, and then you can see placeholder text right here.

We could just say first and last name just like that and then just click on the x and if you want to edit this info over here, all you have to do is just click on it and then you can just edit the text and put in Your information, okay, so now, let’s move on to step number five, which is to edit for mobile.

You always want to make sure that your website is looking great on the mobile version, because, honestly, more than half of internet traffic is actually searched on a phone rather than a computer. So you want to make sure that it looks great on both devices.

So to do that, you can just go over to this little switch to mobile icon right here and click on that, and then it’s going to try to give you this little tutorial. We’Re just going to go ahead and click on skip this, and it’s going to give you this little simulation of a phone just like that, and all you have to do – is just scroll through your website and make sure that everything is looking good.

So maybe i want to drag this anchor down a little bit to be right on top of my about and by the way, whatever you’re editing on the mobile version is not going to change on the desktop version. So, let’s just scroll through and make sure everything is looking good.

So maybe my text is a little bit big, so i’m going to click on the text and then i’m just going to click on this little a minus button and that’s going to bring it down. Just a bit, maybe like that and i’ll edit, the text underneath to be just a bit smaller as well.

Just like that, and i want my button to be lower than my image. So i’m just going to drag that down to be somewhere around there and i’ll. Just drag my image up like that, and then you can use the arrow keys on your keyboard to scoot them in micro doses, to go up or down, and then let’s just keep scrolling and make sure that our website is looking good.

So this section is a little big. So what i’m going to do is just drag the social bar and put it right underneath the text, and then you can resize a whole section by simply clicking on it and then just dragging this little slider button up like that, and that’s going to close off That section a bit which looks a lot better and in this case we’ve got a little bit of blue in between these sections.

So what i can do is just click on this one and then i’ll just move it up. Just like that and also adjust the anchor there. We go so keep scrolling down again. We’Ve got a little bit of blue popping through here from my background.

So, let’s just go ahead and scoot that up just like that cool and then you can see, we don’t have a background behind our contact form well to fix this. All you have to do is just grab this section and we’re just going to pull it way down to fit that contact form in and then i’m just going to grab the contact form and just slide it up into that section.

Just like that, and we’ll give it a little bit more room, maybe something like that. That looks pretty good and then to close off this whole blue section here. All we have to do is just click on this section and we’re just going to slide it up with that little button right there and close that off fix our anchor, which is looking pretty good.

So let’s just check the rest of our website. So again, a little bit more blue here. Let’S just drag this footer up just a bit. Whoops got to drag this section down put this guy up in here and there we go now it’s going to close that off cool.

So now our website is looking great on mobile and on desktop. So what i’m going to do is just click on the save button and then just click done and now we can move on to step number six, which is to publish your website.

So this is very easy to do. I’Ll show you right now, so all you got to do is just go up to the publish button right here and click on that, and then it’s going to give you your url right here and the reason this url has the name and a few numbers, and Then says.

wixsite.com is because you don’t technically own this domain. Wix is actually hosting this website for you and the domain. So it’s going to give you a little bit longer domain, and this is why i recommend buying a domain and hosting, because then you can put in your own professional domain like yourdomain.

com and there’s a lot of limitations to free websites as well, the first one being That you do not own your own domain name, which is why it looks something like this. Secondly, with a free website with wix you’re going to have wix ads appearing on every page and even in your favicon, which is the site icon in the browser tab.

And you also can’t monetize your website by putting google ads on it, so you can’t make money with this website. You also only have 500 megabytes of storage, which will fill up relatively quick, and you also can’t put google analytics on your website to see how it’s performing in google searches.

So this is why i highly recommend paying for hosting and a domain name, and it’s very cheap. So if you want to do it, let me show you just go ahead and click on done. Then we’re just going to go up to the upgrade button and then just click on compare plans, and here you can see, we’ve got a few different options now.

The best option, which is obviously the cheapest, is the unlimited option for entrepreneurs and freelancers. This is going to give you unlimited bandwidth, 10 gigabytes of storage. You can connect your own domain name and if you sign up for one year, you get a free domain, so i’m just going to go ahead and click on select and then you can see here.

We’Ve got our different plans so the longer that you commit to the cheaper it’s going to be, it’s only going to be six dollars a month and a yearly is 8.50 a month. But let’s just say that you just want to try this out you’re, not sure, then just go ahead and you can do the monthly plan and then just click on select.

But this is also not going to give you your free domain for one year. That only comes with the yearly plans, but domains are relatively cheap, they’re, usually anywhere from 15 to 20 dollars. So i’m gonna go ahead and click on select for the monthly plan and then here’s where you just put in your card information and then it’s going to ask you to find the best domain name for your site.

So now we can just type in whatever one that we wanted. So i will do my free website, dot, com and then click on search and it’s gonna say that this one is not available. So i need to pick a new one, so i’m just going to type in – let’s say my new free website and then click search, cool and then that one’s available.

So let’s just go ahead and get it. If you already have a domain name bought somewhere, you can just hit on this button right here to connect it, but in this case i’m going to get a new one. So i’m just going to click on get it.

And then it’s going to ask you how long you want to buy it. For let’s just say, you just want to try it out, we’ll just do one year, but obviously you save a little bit only about a dollar or so whenever you commit to two or three years, but i’m just going to do the one and then click on Continue and then it’s got all of my same information again, so i’m just going to click on continue and then i highly highly recommend the private registration, because, if not, you might get called by people that want to you know design your website for you and optimize.

It and all this stuff they’re going to call you email you. It basically protects all of your information by having this on, and i made the mistake of not doing this on my very first website and i really wish i had so go ahead and leave that checked and then click on continue and then we’re just going to Go down and submit the purchase cool.

So now it’s going to say thank you for your purchase. Your new domain name is now assigned to this website, and this could take around 30 minutes to an hour for this website to propagate and propagation is basically just wix.

Is sending out your new domain name across the entire world to let every server in the world know that hey this domain name now exists and it can be viewed and this process can take a little bit so just give it an hour.

So now i’m just going to scroll down and go to my domains right here and then from here. You can see that our site is live right over here and again after about 30 minutes to an hour. We can go ahead and check on it.

So i’m just going to open up a new browser type in my new free website.com, and here is our website, which is all live and ready to go. It’S mobile, friendly and looking good, alright guys. So that was how to create a free website with a free domain and free hosting, as well as how to upgrade to a professional domain.

So if you like this video, please hit that like button and feel free to check out my channel. I have lots of awesome website related tutorials for how to make professional websites from home, as well as how to make money with websites and so on.

So please hit that subscribe button. Alright guys thank you for watching, and i will see you on the next video you