How to Make a Website from Scratch - Step-by-Step for Beginners

Name: How to Make a Website from Scratch - Step-by-Step for Beginners
Uploaded: 2022-11-15T06:24:53.404Z
Duration: 53 min 53 s
Channel: Pattern Smarter
Description: How to Make a Website from Scratch - Step-by-Step for Beginners

Pattern Smarter

9 Video Views·Nov 15, 2022

What's going on guys, in this video I'm going to show you step-by-step how to make a website from scratch, literally starting from zero. So the website I'm going to show you how to make has a one-page design, so all of your most important information is right here on the homepage. It has a strong call-to-action with a clickable button. It also has a sticky menu that stays at the top whenever you scroll down, and it has clickable jump buttons that take you to other parts of your website, such as contact, about, services, and more. Everything is easily customizable, so it's fantastic for beginners, and there's absolutely no coding involved. It's also very mobile responsive, so no matter what width your device is, it perfectly resizes all of the content to flow seamlessly. Over 52% of global online traffic is from a mobile device, so this is really important. I'll also show you how to make a logo for your website for free and without downloading any software to do it, as well as showing you where to get awesome royalty-free images for your website. This video tutorial is perfect for online entrepreneurs, freelancers, anyone that wants to get their feet wet with web development, or anyone that doesn't know anything about web development and just wants to get their first website up quickly. So by the end of this video, you'll have a beautiful, fully functional website within about one hour. So just a quick demo before we begin. We're going to be using a free theme called Hestia. It's very clean, quick to customize, and you can also add widgets and plugins to do almost anything, like set up a shop, a gallery, or collect email opt-ins. So I'll show you how to create this sleek homepage with this awesome call to action here, as well as a clickable image over here that can take you to any custom URL. Right now, mine is on the App Store. I'll also show you how to edit these clickable icons and make them your own, as well as the text and where they link to. I'll show you how to edit your About section, or maybe you want this to be your mission statement. I'll also show you how to upload your own images for your Team section. I'll also be showing you how to write your first blog post, and all of your latest posts will show up here on your website. And I'll show you how to create separate pages in case you want something that's different from this one-pager front page layout. In this case, I have a separate page called Apps, because in this tutorial, I'll be designing a fake app development company while I show you how to do everything. And I'll also show you how to edit your contact form down here, as well as plenty of design tips to achieve the overall look and the style of your website. So without further ado, my name is Dale. I'm a web developer, a YouTuber, and I help people create websites. I absolutely love it, and I'm excited to show you how to do it today. So in order to set up a website, we're just going to need a few things first. So first, you're going to need a domain name, and a domain name is a must-have. You really can't have a website without this. So normally, this is about $12 to $13 in a year, but I partnered up with HostGator and got an awesome discount for you guys for this. It'll be about $4.99 instead. So in case you don't know what a domain name is, let me explain it. So every website has an IP, and that's just a random string of numbers. So when you register and purchase a domain name, it's kind of like saving your home address as home into your phone. It takes this ridiculous set of numbers and assigns them a very simple name that you can type in any time you want to go there. Okay, and you're also going to need web hosting. Web hosting is also a must-have. Normally, it's about somewhere between $7 to $10 in a month, but again, with this discount that I'm going to provide you, it's going to be somewhere around $2 to $7 in a month, depending on which plan that you choose. So if you don't know what web hosting is, let me explain that too. Web hosting is just a service that allows you to rent space on the internet, fill it with all of your media, and go live, much like renting space out of a shopping center if you wanted to open up a shop. So when you want to start a website, all of your text, pictures, buttons, and so on have to be stored on a server somewhere that's connected to the internet. No ifs, ands, or buts about it. And web hosting companies have buildings filled with these servers. They also provide you with design software, security, and support. Next, you're going to need to install WordPress, and this is also free. WordPress is just what we're going to use to design our website. And number four, we're going to need to activate a new theme. And again, we're using a free theme called Hestia. That's super awesome. So whenever you're ready, let's get started. All right, so step one is to secure a domain name and hosting plan. All right, so let's do it. Head on over to your web browser, and just go to HostGator.com, or you can click on the link below. And once you're in HostGator, we will want to go over to web hosting. And in web hosting, you'll see these are the different plans that HostGator offers. And I've been using HostGator to host all of my websites for a while now, and their website is super easy to navigate. Their customer service is awesome, and they're really affordable. And if anyone has ever been on my website and looked at my about page, I am all about no BS. I'm not going to pitch you something that I don't use myself. So if you plan on having multiple domains, baby plan is the way to go. For the sake of this lesson, I'm just going to do the hatchling plan. It's one single domain, so we're just going to go ahead and click buy now. And from here is where you can search for a new domain, or if you already own a domain, you can click on this tab over here. So let's just say I want to do a app development company. So I'm going to type in the app, mine, and .com is over here already. And okay, it's available. So you'll see it'll say added, primary, and green. If it's not available, like let's say, let's try appmine.com, click .com, it'll say unavailable. And it'll give you some other options that are like .site, .online, .space. There's all these weird ones. Honestly, .com is what legitimizes your website the most, so I would really recommend sticking with .com. Also, when you're choosing your domain name, you want it to be something that is going to be really easy to remember for your visitors. Something that's not too difficult to type in, and it's also got searchable keywords in it. So the appmine.com, the word app is searched a lot on Google. So that's something that you want to have in your domain name if you can. And before you're securing your domain name, you're going to want to read it through a couple of times just to make sure that there's nothing hidden in it. A few bad domain names that have been purchased are oldmanshaven, which can be translated to something else, speedofart.com. We've also got therapistinabox. You can see why these are not good domain names. They were not reviewed before being secured. So make sure you review yours or else you could end up with therapistinabox. So let's go back and type in theappmine.com. And you'll see domain privacy protection down here. You're going to want to leave that checked because if you don't, your information is going to be public for solicitors to call you and blow up your phone. It happened to me the first time I ever bought a domain name and my phone just got bombarded with solicitors asking if they can set up my website for me and all this stuff, which we don't need because you're going to do it all right here today with this video. So make sure that's checked and let's scroll down. And so you've got your plan here. Again, I selected hatchling. You might be on baby if you plan on having multiple domains. And then the billing cycle here. So what happens is if you're at one month, the cost is a little bit higher. And I recommend going with the 12 months or 36 even if you know that you're going to commit to this for a while because it's the cheapest plan. It says $2.75 a month here. And again, I have an affiliate link with HostGator that'll get you a massive discount. So it'll be even less than that. So I recommend going higher because it is cheaper. But again, if this is your first website, you can go ahead and click one. Give it a little trial run and then you can always upgrade later. And you can enter in a username. I like to just do my first name and last name. And you can enter in a PIN and scroll down. And this is where you're going to enter in your billing info. So you can pay by credit card or you can also do PayPal. I'm just going to do credit card. All right. So now we can scroll down to the add additional services. And we're actually going to want to uncheck these because actually if you follow my channel, I have videos that show you how to do these things for free. And just scroll down. And this is where you're going to enter in that coupon code that I talked about earlier. Again, this is my affiliate link. It saves you a massive amount of money. But it also does give me a commission. So it kind of helps fund these free YouTube videos for me to do. So that's awesome too. It's a nice win-win. So just put in the coupon code CREATEAPROWEBSITE and hit validate. And now you can see you've got instead of a $15 domain name, you've got a $4.99. And the hatchling plan just brought you down to $7.67. Again, if you were doing 12 months, the price would be like half of what it would normally be. So if you're doing 36, again, it saves you even more money. So that's why I recommend doing the 12 or the 36. So now you just have to agree to the terms of service and click check out now. And it'll bring you to this payment completed page. So that's awesome. We've now secured our domain name and bought our hosting plan. Okay, so step two is install WordPress. So after HostGator has finished setting up your account, you'll end up in the HostGator customer portal, which is also called the cPanel. If you're not here, you can just click on this HostGator customer portal logo at the top of the last screen, and it should take you here as well. So once you're in here, just click on hosting. And in hosting, you'll see WordPress one-click installation. Simply put, WordPress is just a software that you use to design and publish your website or your blog. WordPress is by far the most popular website builder on the market, and it powers about 30% of the internet, which is a lot of freaking websites. WordPress comes with over 11,000 different themes that you can choose for your website, and also over 55,000 widgets and plugins to help you optimize the functionality and the tools on your website. And WordPress is free. It's an open source software, so there's tons of developers all over the world working on it every day to make it better. So we're just going to head over to WordPress one-click installation and click that. And now, just go to select your domain, and select the domain that you just purchased, and click next. And then give your website a title. I'm just going to call mine the AppMine, because again, this is an app development company, an imaginary one of course. Maybe by the time you're watching this, it won't be imaginary. Admin user, just put your name, then first name, last name, and admin email, same email that you used for HostGator to sign up. And then just agree to the terms of service. And then just click install. Okay, installation complete. So now you can see that it was installed to your domain name. You've got your username and this ridiculous password. What I recommend is copying the username and password, and putting that somewhere on your computer to remember it or write it down, because you're going to need that ridiculous password in order to change your password once we get into WordPress. So now, you can go ahead and click login. And you're brought to this page because WordPress has to send your website out across the entire world. So it's sending it to every DNS to let it know that it's there, and it's existing. So this process could take anywhere from 15 minutes to two hours. It says it can take up to 24 hours, but I've never actually had it take that long. It's typically around 15 minutes. But just take a break and come back after it's done, and we will pick back up where we left off. All right, so we're back. And the way to check on your website is to just type in your new domain name, and you'll be taken to this page. So instead of signing in here with this button, the real way that you should get used to signing in is by going to your domain name and typing forward slash wp-admin, because this page is actually going to go away once you publish your website. So now this will take us to your WordPress login for your domain name. So here is where you put in your username and that ridiculous password from earlier. So I'm going to do that now. And my username was just my name. And just copy and paste that password, and hit login. All right, so here we are. This is the WordPress dashboard. It is not as daunting as it looks at first. So in order to make it a little less daunting, the first thing we're going to do is just dismiss all of the things on the dashboard. So we're just going to hit these little X's on everything and clear it up. Up arrow, up arrow. All right, so there we go. This is far less daunting to look at. So step number three is to reset your password, because we don't want to remember that ridiculous password. We want to make our own custom password. So to do this, just go over to users, go to all users, and then just click on your name. And then scroll all the way down to the bottom of this page, and you'll see generate password. Just click that button, and delete this other ridiculous password that it wants you to save, and create your own. And then just click update profile. And there you go. Now you can just type in that new password anytime you log in using WP Admin. Now step four is to activate a new theme. A theme for your website is basically just what determines the whole layout and the look and the style of it. And you can tweak it around after you install a theme, but a theme is just your basis template. So to install a new theme, just go to appearance, and go to themes. And WordPress has over 11,000 different themes, so you could play around with these all day. So to add a new theme, just go down to this box here, and click add new theme. And now you can search based off of the featured ones, you can go to the popular list, then you've got the latest, so any developers that are creating themes will upload them. So there's constantly new themes being created all the time. But the one that we're going to work with today is a absolutely free theme, and it's very user friendly, definitely my number one choice for a beginner theme, and they even have a pro version, which is awesome. Now if you do want to work with a paid theme, I highly, highly recommend Divi. It's by Elegant Themes, it is fantastic, super user friendly, it's got a drag and drop type of software to it, so it makes it really simple to customize everything, and you have a lot of customizing options. But today we're going to be working with a free theme called Hestia. So we're just going to go to the search bar, and type in Hestia. And you can see it, it's this third one right over here. So just click install, and now it'll turn to an activate button, so just click activate. And there we go, so now Hestia has been activated. In order to see it, just go up to your website name here, and click visit site. I'm just going to open it up in a new window. So our website looks a little boring, but not for long, because we are going to customize it and make it our own. So just go ahead and click customize, and now when we're in the customize menu, it changes our website to the way it's actually going to look, which is like this. Well, we're going to change everything, the font, backgrounds, all of it. So next step, before we do absolutely anything, is step number five, install and activate Orbit Fox. So Orbit Fox is just a plug-in for Hestia that's going to give you a lot more modules than just the simple contact and blog. So we will do install and activate right here. You'll see it under recommended plug-ins. And that is installing, and now activating. So there we go, Orbit Fox just added some extra stuff. We've got the services area, which is actually called features. We've got an about section, meet the team, clients, so it gave us some extra stuff to work with. All right, so next is step number six, which is to add your logo and your site identity. So I'm going to show you how to make a logo for free and without any software, and we do it in about two minutes. And I'm also going to show you how to resize that image, so that all of your images on your website are optimized for speed, so nothing is going to slow down your website. So go ahead and go to logomaker, without the E, that's logomaker, with just an R, .com, and you can skip the tutorial. So here we've got this nice blank canvas, which we can make a logo with. So I'm going to make mine, and it's an app company, so I'm just going to search up here at the search bar, app, and it gives us all these awesome free icons that we can choose, and these are all vector images, so they can be scaled as high as you want them. So I'm going to just go with this blank app-looking symbol here, I'm going to scale that up, drag it back in the center. To scale, you just drag one of these boxes right here, and you can move it up and down. And I'm also going to search for anything that has to do with a mine, so I'm going to type in mine. This is why I love this program, it's very simple. So the logo really doesn't matter as much as you think. What matters is the content that you put out for your customers or your visitors, and the value that you're providing. The logo is just a way to tweak their memory of, okay, I know what that company is. So make it really clean and simple. So I want to go with something that is like a pickaxe, maybe, I like this one right here. It's got these shading lines on it. So I'm just going to scale that up, and put it right in the middle. And you also want to pick a color for your website. It should be dependent on what type of website yours is. So with mine, it's got mining in the name. So I'm going to pick anywhere from like a dirt to a gold color, because people mine for gold. So like a brown or a yellow or somewhere in between. So first, before you change the color, you want to make sure that these are both selected. So select the axe and also the rim around it. And now you can drag around to any of these colors and change it however you want. But I have a color code in mine, so I'm going to put that here by pasting. And there we go. That's the color code that I want. So that's done. I'm going to save that, and then I'm also going to put the words next to it and save a long version of the logo. So to save this, just go up to save logo at the top right. And you can have option one, which is to buy it for $19. And you can scale it to any resolution that you want, because it's going to stay as a vector file. And you also don't have to give credit. So option two is the free version, and all you have to do is agree to give credit. And if you want to save the logo and come back to it later, you can copy this URL down here. So I'm just going to do that just in case. And download and agree to give credit. And now it just downloaded. So we're going to go back and do a long version as well. So I'm going to select both of these and drag it off to the left. Drag the size down to about there. And I'm going to add a text box by clicking on this T over here on the left. And I'm going to type in my company name and size that up. And I'll just drag that to where it's centered, maybe make it a little bit higher. Just drag that right there. And I'm going to change the font by going up here. And I'm going to pick, there's all these different categories that you could go with. I'm just going to stick with simple and modern. And I'm also going to choose one called telex at the very bottom. You can play around with these as much as you want, figure out what you like. And I'm also going to make that my color code. So with that selected, I'm going to repaste that color code. And now we can save that one too. So just go up to save logo. Download and agree to give credit. All right. So now that that's done, we're going to go to a website called photor.com. That's F-O-T-O-R dot com. And this is where we're going to resize our logo. So just click edit over here. So just go up to open, go to computer, and go to where you've downloaded your logos or put them into a new file. And select the logo. And now just go over to resize at the bottom left. And we're going to just resize this to 150 by 150. And click apply. That's 150 by 150 pixels. Click apply. And now just go up to save. And we're going to do this logo and just say 150 times 150. So we know what the size is. And we want it to be a PNG. If it's not a PNG and you save it as a JPEG, then your logo is going to have a white background behind it. And this is going to show up on your website and it's going to look kind of tacky. So a PNG gives it a nice transparent background. And we want the quality to be high. And it's going to ask us to create an account for this. So you can either do this with Facebook or you can just click sign up down here, this little button, and just make a quick account. It takes like two seconds. And click sign up. There you go. So literally that took like two seconds. And you'll probably be using this more often if you're editing images for your website anyway. And we don't need to do this to the long logo because it's already the perfect size. It's at about 600 pixels. So we're just going to go back to our website. And you'll see our name up here at the top left. Just click the pencil icon next to that. And you'll see this section over here where you can select a logo. So just click that button. And then go to select files. So if you're in media library, just go over to upload files, select files. Click on the logo. So this is going to be the long logo. This is where we want our name with it too. So we've got the long logo. Click open. And then just go to select. And you can crop this to whatever size you need. Or you can just click skip if you don't need it. Then click crop image. And you can see it just added our logo up here, which is pretty cool. So now we want to add the site identity, which is the favicon, another name for it. It's this little symbol up here on the web browser. So it just adds a little bit more of a customization. So just go down to site icon. And click select image. And then go to upload files. Select files. And you can select the same 150 by 150 pixel logo. Then click select. Click skip cropping. And now you can just see that change to our logo. Now step number seven is to customize your website. So we're going to be changing this title here. We're going to change the background image, the color of this button, where the button goes, all that fun stuff. So what we're going to do is click on this pencil icon next to the header. So that just brought us to an area where we can edit all that stuff. So for the title, which is this main header, I'm going to edit that to be my call to action. So it's what I do here at the app mine. So I'm going to just say we build mobile apps. And now it just updated my header. And the subtitle, I'm going to change that to games, let's capitalize, games, social platforms, business, educational, and more. There we go. And the button, we can edit by changing the text to whatever we want. So let's say, check us out on the app store. And now we can change the button URL. So if I had an app store development profile on Apple's website, then I would do that. But if not, I'm just going to do the app store and just get the main Apple app store URL. Click Copy. And I'm just going to paste that under button URL. So now if we were to click on that button, it'll take us over to the app store or wherever you want. You could do YouTube. You could do a different part of your website, whatever you'd like. And I'm going to show you how to create pages that will go up here in your menu a little bit later. So now we're going to change this background image. And then I'll show you how to change the button color. So to change the background image, just click on Change Image right here. And again, I've supplied all of these sample images for you guys if you want to follow along with my images, or you can upload your own. But the size for the main background should be about 1,800 pixels by 1,000. So I'm going to just click on that one, click Open, then click Choose Image. And now we've got this nice, clean background. You could add a picture or whatever you'd want to add. If you want free images that are pretty awesome, you can go to pixabay.com. And Pixabay is a free stock image website. I get all of my free images from them. They have a lot of stuff. You can just search whatever you'd like. You can type in any keyword, and it'll give you images based on that keyword. So that's pretty cool. And you can change the alignment of the text and the buttons by clicking on one of these alignment options above the background. You could do right, you could do left. I'm going to go with the left, because I'm going to end up adding an image right here. I'll show you how to do that with a quick widget. And that image will also be clickable. And if you'd like to change the font and the font size here, you can just go back, go back again, go down to Appearance Settings, click on Typography. So you can change the font family. And ideally, you want to match your logo. And mine was telex. There we go. And it also changes your subtext as well. And if you'd like to change the size, just go up to Font Size. And it's actually not title or headings. It's actually big title section. This is what this section is. So you can change that. So if you want it all in one line, you can do like that. And that's it. Pretty quick and simple. So now just go back. So to add that image, just go down and click Add a Widget. And then go to Image down here. And now you can't see it, but it just added a image box for us. So if we scroll down, you can now see we've got this image widget. So just click Add Image. And then go to Upload. Select Files. I've got this phone picture right here. It's about 500 by 627 pixels. That's about the right aspect ratio that you should use. So just click Open and click Add to Widget. And now it's going to look a little funny because it's kind of small. So what we're going to do is go down to Edit Image here. And we're going to go to Size under Display Settings. And we're going to go to Custom Size. And I'm just going to type in about 450 pixels into the height. You can play around with this however you need. So if I click Update, it will update that size. And so if you're like, OK, my image is too big, go down to maybe 300 pixels. If that's too small, go up to 400. Just got to play around with it a little bit to figure out what you need. And the last thing we're going to do for this image widget is to add a link to it. So we're also going to link this to the App Store. So I'm going to copy the App Store URL again. Go back. Go back to Edit Image. And then go to Link to Custom URL. Paste that URL under Custom URL. Then go to your Advanced Options under here and click Open Link in a New Tab because we don't want to take them away from our website. We want them to spend as much time on our website as we can. Then Update. So now if we were to click on that image, it would take us to the App Store as well. So we've got two buttons that will lead us to our call to action. And just make sure you click Apply just in case. And we're also going to change this button color now. So our main color is obviously this gold color. But this should be our accent color. So to do that, just go to the back arrow here. Back arrow again. Go to Colors. And then just click on Accent Color. So what I recommend here is if this is a strong call to action, you should have a very complementary color. You could go ahead and paste the same color code in there, which will give you the same color. Which it all kind of blends in too much. So it doesn't stand out enough for me to want to click on it. So what I recommend is going with more of a complementary color. So blue is actually the best option here. And if you're not sure, you can just go to Google and type in color wheel. And just go to, let's say, one of these. And you can see whatever is on the opposite side of your color. So my color is somewhere around here or here. So the best on the opposite side, the complementary color would be a dark blue or a light blue. So if your website was red, then maybe green might be the best button color. Something that's going to stand out the most. So I'm going to go with kind of a lightish blue. And that is all done now. So we're going to go down. And you can now edit each one of these sections. So the nice thing about Hestia is you've got all these little pen icons where you can just click. And it'll bring you exactly where you need to edit these things. So first, we're going to edit the Features box. So if you click on that little pencil icon, it'll take you to that Features page. And we're just going to change that to Services. So this is what our company does. And we're going to change that subtitle to What We Do Best. And you can change each one of these icons and the text and everything to make it your own. So just click on this Feature box here and click on the dropdown. And we're going to change that icon. So if you click on this part that says WeChat, you can now change that to whatever you want. I'm going to do an Apple logo because we're going to say that we code with iOS and Android. And we're also going to do a coding course. So let's change all these symbols first. So if we go back out, we can go to the second Feature box, change that icon to an Android symbol, and go to the third box. And let's just change that to a coding symbol. Let's do this one. And you can also change all of their colors. So I'm just going to go back to the first one. And let's change that to kind of a grayish color. I'm going to change the Android to a green. And the coding, I'm going to change that to a blue color. And lastly, you can change the names. So if I want to change the name, you can just go down to Title inside of that Feature box. We're going to change this to iOS Development. And you can also make this link to somewhere. So if I click on the Apple symbol, it'll go to whatever custom URL I put in here. So I could link that to my iOS apps. So again, I could do whatever my App Store page was going to be. Again, I don't have one, so I'm just linking to the App Store. So there we go. And if you'd like to add more, you can click Add New Feature and add as many as you'd like. So that is done. Now we can move down to our About section. And I'm going to just show you real quick. You can edit this. You can change the background here. I have another image already saved in those files for you guys. It's called Secondary Background. It's the gradient that goes downwards instead of to the right. So click Open. Then click Choose Image. And we can also edit what it says here. So I'm just going to delete everything and start fresh. So this will say About. And I'm going to just select that. And I can make that a Heading 1, which will be the biggest font. And I'm going to click Enter and write, this is where you write your About info. And I can also add an image. So if I click behind About and click a space bar, I can click Add Media. And you can put a picture of yourself, whatever you want to put. I'm just going to put my logo for now, just to show you. And I'm going to select all this and realign it. So actually, I'm going to put that below the icon. So let's just cut that, click Enter, Paste. There we go. So that's all kind of on top of each other like that. So if you click this X, you can see it a little bit better. And this gray won't be here forever. The actual background will be there once you publish it and go to your site. Next is the Meet Our Team section. So you could put all of the employees here. Just to show you real quick, you can edit this title here by clicking on the pencil. And I'll just change that to Our Team. And you can go over to a team member box. So this is the first one. And we can upload an image in here. So we'll change Desmond to myself. So click Upload Image, Upload Files, Select Files. And I'm just going to add this goofy picture of me that I took. Click Insert Into Post. And I can change the name to my name. Oops, if I can spell it right. And you can edit the job title, whatever you want to do. And you can also add a link. So this is actually clickable. So if I were actually out of the Customize menu and on the actual website, this image would kind of enlarge a little bit. So you could put a link there. I'm not going to put one for right now. And you can also add all of your social links. So you can also change it. So if you don't have a Google+, you could change it to anything. So I could make this, let's say, my YouTube. And then you can just change the link underneath. So I'm not going to do all that right now. It'll take a while. And you can edit all these sections the same way. So Clients, you've got all these client logos, which are all clickable. You can edit those so that you can change them to whatever you want. And now we've got the Blog and Contact. So I'm going to show you how to do your first blog post. But first, I'm going to show you how to install a quick plug-in for a contact sheet. So it'll allow people to send you an email. So to do this, it says, in order to add a contact form to this section, you need to install Pirate Forms. So if you click on that little pencil. So this will bring you to where you can install and activate it. And before you do that, it'd be a good thing to click Publish Site up at the top, that blue button. And then you can click on Install and Activate. Publishing your site just saves the changes that you've made. And it puts them live for other people to see. All right, so now that should have installed our contact form. So if we go all the way down, you can now see we've got this contact form. And this is the same accent color that we picked for the button. And you can edit what this says by clicking on the pencil. First, I'm going to change this just to contact, just to show you. You can change it. And same with this, get in touch. You can say, well, I'll leave that as get in touch. And I'll change the subtitle to We Don't Bite. And you can change your background image by clicking Change Image. I'm just going to leave it as the city for now. And you can also edit this information here by going up to Contact Content. And then go down to Edit with the little pencil. And this little word editor comes up. And you can change that stuff as well. So your address, 1, 2, 3, 4, 5, address, lane, I don't know. Give us a ring. You can put your information here. So just put the app, mine. And you could add an email here. So if you just copy this and paste it below, you can change that to email. And once that's done, you can just click this little x. And now you've got all of your information right here. And in order for anyone's email to actually make it in your inbox, we're going to have to go put in our email. So just save our work by clicking Publish. And then go back to your dashboard. So just click on the x and go to Dashboard. And then just go down to Pirate Forms here and click on Settings. And then you can click on Options over here. So this is where you could put in your email. So you could put it under Contact Submission Recipients. And Pirate Forms is pretty good. They already know that your WordPress email is the one that I wanted to use. If you wanted to change it, feel free to change it. And you can go to Field Settings. So this is where you could determine which fields are acquired. So I'm going to keep them all as required. I want a subject. I want a message. I want their email and their name. And you could also add a spam trap. So you could add a Google Captcha to reduce spam. So just click Save Changes. And you could also send yourself a test email. So I'm just going to go ahead and click that. Sent email successfully. So now we can just go over to our Gmail and check it. So we're over in our Gmail. And it looks like it didn't show up. But if you go over to your Spam folder, you can see that we have got it right here. So it ended up in the Spam folder for a couple reasons. One is that we need to uncheck this as spam. So from this email, we're going to uncheck this little box or remove it. And go back to your inbox. So it'll show up now, just that one email. So the next thing you need to do is grab the name here, wordpress at theappmind.com, or whatever your domain name .com is. So you get that by clicking this little triangle here to show details and copy that. And we're just going to add that to our contacts. So you can go up here to the top right and click on Contacts. And now just go over to this little pink button. And you can add a new contact. So we'll just add that email. Click on Save. And now it recognizes that this is one of your contacts. So the rest of the emails will come through just fine. So if we go back, we can now send a new test email, email sent success. So let's go back to our email. And now we have the new one that showed up. And it showed up in our inbox just fine. And now step number eight is to create a primary menu. So the primary menu is this one right here. So when I slide down, you can see this big bar. And we're going to fill that with some buttons. We're actually going to fill it with jump buttons. So when we click on them, it will jump to another part of our page. So to edit the primary menu, just click on the little Edit button. And it'll take you right to the primary menu. You can just click Edit Menu. And now we can add items to this menu. So I'm actually going to delete the Home button. Because when we click on our logo up here, that will actually take us to Home. And most people know to do that. So now just click Add Items. And we can add certain pages, which I'm going to show you how to create in the next step. We can add posts, which I'll show you how to create your first blog post next. Or we can do categories, tags. But we're going to do a custom link. So we want this to be a jump button. So let's actually create a jump button for the services. So just go down to Link Text and type in Services. So this is what's going to display on the screen. And we're going to do Hashtag Features. So the Services section is actually called the Features section. And the hashtag is what allows us to jump to that section. So just do Hashtag Features and click Add to Menu. And we are also going to do About and do a Hashtag About, Add to Menu. We're going to do Meet the Team and Hashtag Team, Add to Menu. And lastly, Contact, and just do Hashtag Contact, Add to Menu. So click Publish to save. And now if we click on one of these buttons, like let's say Services, it'll jump down to Services. Or we could click on About. It'll go to About, Meet the Team, and Contact. So that is pretty rad. You can also add all of these things to the footer menu at the bottom. So if you check this button, you'll see that they're now added to the footer down here. I don't typically do that. I add things like a disclaimer to the bottom or a terms and conditions page, things like that. OK, so step nine is adding pages. So if you want to add a page that's separate from this one page layout, like let's say a disclaimer or terms and conditions, or maybe you want your About section to be a full page, it could be anything you want. So let's save our work. And let's go back to the dashboard. So go to Dashboard. And you can just go down to Pages, go to All Pages. And you can see we've got our pages here. While you're here, you can trash this sample page. So when you trash something, it's deleted temporarily. But if you want to delete it forever, you can just click on this Trash button. And you can just check that or hit Delete Permanently. So I'm going to go back to All. And now I want to add a new page. So I can just go up to Add New up here. And now we can add a page. So let's say that we wanted to have a page for apps that we create here. So I'm going to just put Apps in the headline. And then you could edit everything down here. You could add pictures of the apps. You could add different categories like games, do social, things like that, whatever you'd like to add on whatever page you're trying to create. And now if we preview this by clicking on the Preview button over here, you'll see that it's pretty empty. There's no background image. So to fix that, just go back and go all the way down to Set Featured Image. And then just select your image. And then just click Set Featured Image. And while you're here, also change the layout to full width. So if we go back up, let's save that draft. And now we can preview that. And boom, just updated. We've now got that background image in there. So all of your content will go right here. And you can edit it the same way you do with everything else with this Word editor here. So just for fun, I'll put in games. And I'll just add a picture for now just to show you. I'll change this to a Heading 1. I'll make both of this center aligned. And now Save Draft. And if you like it, you can publish it. And then just go to Preview Changes. So now you can see we've got our content in here. So if you'd like to add this page up to the primary menu up here, I'll show you how to do that now. So just go back. Go over to Appearance. And then go down to Menus. So now this is our primary menu. These are all the buttons that we added earlier. So if we wanted to add the Apps page, we could just click on Apps. And then click Add to Menu. And then click Save Menu. So now if we go to our site by going up to our page title and click Visit Site, you'll see that we've now got Apps. And if we click on that, it takes us to our Apps page. And then again, you can click on the logo to go back to the home page. Now step number 10 is to write your first blog post. So if you're driving traffic from Instagram, or YouTube, or Pinterest, or Facebook, it's great to have a blog that you can update continuously for your visitors to see all of your latest articles. So I'll show you how to do that right now. So let's just go back to the dashboard. And then go down to Posts. Go to All Posts. And we've got this basic Hello World one. Let's go ahead and trash that. And again, go over to the Trash button and get rid of it completely. Delete it permanently. All right, so now we can click Add New. It's just like we were doing with the pages. So what I like to recommend, which I got this idea from a friend, is to literally write your first blog post and write about your feelings about starting a blog. And you're starting this new website and you have no idea what's gonna happen. So I could write in here my first blog post. And I could just write my feelings in here. I'm nervous. I have no idea if this website slash blog is going to take off. But I'm excited. Just good to write your feelings down so that later, if you have a ton of visitors, you can look back at that post and be like, man, started from the bottom. Now we're here. All right, so once that's done, you can click on Publish or you can just save your draft if you wanna add to it later. And again, just like the pages, you can add media and all of that. And you can also add your featured image. So you can set one here. But I already showed you how to do that with pages, so we'll just click Publish. And now, if we go back to our site, our main page, we've got our blog button up here. You can just click on that. And it will show you your first blog post. So this is where everything would show up. If you don't want all this stuff here on the right, you can take that off by just going back to the Posts section. So just go to Dashboard, go back to Posts, All Posts. Then click on that one. And then just go down to Layout and do Full Width. And that will also take away all that stuff on the right. But if you want that layout, it's good. It tells people what your latest categories are of posts. It gives them their latest posts. So I kind of like having it. So I'm going to keep that back at default. And then click Update to save any of your changes. And also, if you go back to your site, you'll notice that if you go down to the blog, it'll also show up here. So if you write a new post, it'll show up next to this one. They'll be equal. If you have three, there will be three all the way across the board. And if you click on Customize and click on the Blog section, you can edit how many posts are actually in a row over here. Now, a bonus. I'm going to show you how to create a shop. So in case you're starting this website to have a shop on there because you want to make some money with your website, you'll want to use WooCommerce. So to get WooCommerce, just go up and click on Customize. And from here, just click on Front Page Sections. And you can see at the bottom, to have access to a shop, please install and configure WooCommerce plugin. So WooCommerce is literally just a plugin that allows you to put pictures of the product up there and do pricing and everything you need to have a legitimate shop. So to do that, just install and activate. All right, there we go. So if we scroll down, you will see Products here. So you can just click on that Edit section. And you can call it Products. You could call it whatever you're selling, really. I'm just going to keep it as Products. I'll just say Browse, the best of the best. I don't know. And you can change the number of items that show up here on the main page. So save your changes with Publish. And then to actually edit and add products to this, we're going to have to go back to the dashboard. So click on the x, go to the dashboard. And from the dashboard, you can just click on WooCommerce. Just click on the main title here. And you'll just want to run the setup wizard. So I'm not going to get into it right now. That's for a whole different video. But if you follow my channel, you can check that out. But it's pretty simple. And WooCommerce kind of walks you through it. And as you can see, you've got your orders. You can make coupons. You've got your statistics for your sales, settings, all that kind of stuff. OK, so last but not least, how to publish your website so that everyone can see it. Go ahead and go to your dashboard. And just go to the top here. It'll say your site is currently displaying a Coming Soon page. So whenever you're ready, you can launch it by clicking here. All right, guys, so this website is all done. We've got a fantastic layout here. And the whole thing is also mobile-friendly. So if you were to squish this page, the whole thing resizes for mobile. So scrolling down, it's all nicely aligned. Everything still works the same, which is pretty awesome. Mobile viewing is about 52% of all online traffic. So it's a really good idea to have a very mobile-responsive website. And Hestia is fantastic with that. All right, guys, so that is how to create your first website and customize it and optimize the functionality. So if you enjoyed this video, it would mean the world to me if you would subscribe if you want to see more or give this video a like if you found it helpful. The more activity I get on my channel, the more opportunity I have to create new tutorials. Thanks for watching Creative Pro Website, and I will see you guys on the next video.