How to use Google Sites to Create Website with Domain

hi everyone kevin here today i have a fun tutorial for all of you i want to show you how you can create your very own website and also get a domain name so you can get a com.net.org whatever top level domain name you want you can get at the kevin cookie company we surprisingly don't have a website yet so today i'm going to use this tutorial to build a website for us and then i'll show you step by step how i do it it's extremely easy to do you don't have to know any coding it's all drag and drop it's super simple and it's only going to cost 12 that's the cost of the domain the hosting the website creation all of that is free all right let's jump on the pc and let's get started this tutorial is broken up into two separate parts first i want to show you how you can buy a domain name and then second we'll build a website for the domain that we purchase using google sites if you don't want to buy a domain name don't feel like you have to you can also just skip to the second portion of this video where we build the website to buy a domain name there's a search field right here in the center of the page where you can type in your domain name today i want to buy the domain kevincookiecompany.com it'll probably take you more time to brainstorm a good domain name than to actually buy it now let's see if this domain name is available by clicking on get it phew it looks like my domain name is available this green check mark indicates that this domain is available down below i can see a bunch of other top level domains that i could purchase like net.org dot info but i really think dot com is probably the best one to get once i'm ready to purchase let's add it to the cart i can now see that i have one domain in my cart let's go up to my cart and i'll go ahead and check out here on the checkout page i can see that privacy protection is turned on i want that turned on by default that basically means when someone looks up your domain they won't be able to see your name or your address i like having that on by default there's also the setting to turn on auto renew i want to make sure i don't let my domain name lapse so i'll leave auto renew turned on down below google also gives you the option for google workspace this was also previously known as g suite if you want to be able to send email from your new domain you have to get google workspace to be able to do that i don't need to do that for now so i'm not going to check that and i'll simply purchase the domain let's click on check out right here on the landing page once i purchase my domain there's a callout here for create a website let's click on build website when i click on build website i have two different options i can build a new website and in a moment we'll go through this process to see how this works over on the right hand side i can also forward to an existing web page this is something that i recently did with a domain name kevinstratfor.com here for example if i type in kevinstratfor.com and hit enter i've set this up to forward to my youtube account today we want to build a new website so let's click on the text that says build website next this drops me on another site where i can choose how i want to build my website and there are a few different options you can use a service called wix and they have very professional looking websites however you'll have to pay wix to be able to use this service there are also other services like shopify if you want to set up a shopping cart and maybe you have a business you can also set up wordpress and this is hosted by bluehost so that carries a cost then you have two free options in the bottom left-hand corner you can set up a blog for your new domain that's powered by google's blogger service or you could set up a simple site powered by google sites and today we are going to set up a simple site now it says simple site here but you can create some pretty good looking websites and we'll walk through how to do that this opens up some of the benefits of using google sites and i'm convinced this looks like a pretty good option to try out next let's click on start new site we now have a blank canvas and we're going to create an amazing website today i see the file name up here is kevincookiecompany.com you can change this to whatever you want this is more to help you navigate back to your site project down here is the header of our page and let's start filling this out up here it asks me to enter a site name so i'll type in the kevin cookie company as i hover over i see that there's text here that says add logo let me add the kevin cookie company logo by clicking on this this opens up the settings dialog and right here i see that i can upload a logo let's click on this this opens up the windows file picker and i have the kevin cookie company small logo here i'll select this and then click on open check that out that's a pretty nice looking logo now down below there's something called alt text alt text is if someone uses a screen reader and maybe they're unable to see this logo it'll use the alt text in place of it also if you hover over it that'll also show the alt text now one of the cool things is down below my logo google looks at the logo and it picks out the primary colors used in the logo and i could choose one of these colors as my theme i'll go with this blue color and that'll apply it to the theme that i use when i build out my website down at the very bottom there's also something called a fav icon a fav icon is this icon that appears alongside a tab in your browser and here too we can also upload an image for this i'll click on upload again this opens up the file picker and i'm going to use the same small logo as the fav icon and then click on open here now you see the icon that'll be displayed in a browser tab before we leave the settings dialog i want to click over on announcement banner at the kevin cookie company the holidays are coming up and this is one of the most important times of the year for our business with a banner we can show some type of text across the top of our website i'm going to toggle on show banner and here i can choose a banner color i could go with one of these predefined colors or i could even customize the color now i've always found that when a website has a red banner that really grabs my attention so i'll click on this red color next i can type in a message and this is going to be a message promoting our holiday deal order your cookies today for the holidays and use promo code hungry for a one dollar discount one thing you'd be amazed about is how much more people order when you give a one dollar discount i can also add a button and this is basically a call to action or something a visitor can click on and i could define a link for that let me type something in i typed in order now and i've also included the website kevinstratford.com later on i can replace this with an order page i could define whether it opens in a new tab or not i'll set it to open up in a new tab so people stay on the kevin cookie company homepage here for the visibility i could set it to all pages or the home page only i'll just set it to the home page i'm now all done in settings so let's click on x here now you can see my banner on the top of the page and that red really does grab your attention i think this is going to drive a lot of sales my web page is starting to come together i have the top header all in place next i have this big header section and google makes it extremely easy to edit what this looks like when i hover over i see here that i can modify the header type when i click on this i can make it smaller i can insert a banner which i had before a large banner or i could even insert a color so once again all you have to do is click drag and drop and you can customize what your website looks like i'm okay with the banner so i'll leave that as is instead of showing text here i'd prefer to show an image here i'll click on this text and here i'll click on remove that removes the text and it leaves the background image next over on the right hand side i can click on the insert tab and i see all sorts of different types of things that i can insert and in a moment we'll start going through what some of these things are but before we do that i want to insert my logo into this header space let's insert an image so i'll click on images next i'll click on upload this once again opens up the windows file picker and for this one i'll select the kevin cookie company logo and click on open i've now inserted my logo but it's not in my header luckily all i need to do is click on it and i see this drag icon appear i can take my logo and i can drag and drop it wherever i want to put it on my page i'll drag it up into the top header and center it and then release and here you see my logo the logo right now is a little small compared to the size of the header i can click on the logo and i see these circles appear in the corners i can adjust the size of my logo so let me adjust it so it's a lot bigger and it fills up the header i'll try to keep the same aspect ratio and here now you see the logo is a lot larger once again i'll position it so my logo appears right in the center of the top whenever i click on different objects that i've inserted on the page i see these different controls that appear i can crop the image uncrop i could even insert a link and i have a few additional options the last tweak i want to make in the header is i want to change this image over here i can hover over the header and then i see an option to change the image when i click on this i can upload like i did with the logo or i could select an image let me click on select image this opens up a select images prompt and i could select images that google provides right here i could also pull in images from a url i could search on google or i could even use my own images that i have stored in google drive you can get images from many different places now i'm looking through the gallery here and i kind of like this brown background i'll select that and then click on the select button this now inserted my background image and one of the neat things is because i have an image or if i had text on top of this you'll see down in the bottom right hand corner google automatically adjusts it for readability so here i have light colored text on top of this background so it automatically dim to the background for me so google sites is really smart and helps me make my website look good my header is now looking pretty good but i need to start adding some content to the website itself over on the right hand side once again within the insert tab you'll see all the different types of content that i can insert on the page i could insert text images items from drive i could even embed items down below and what makes my life a little bit easier google has some of these pre-created layouts that combine multiple items so here this first layout will pull in an image and also text and a header let me click on this first layout and i'll insert this onto my page this now inserts another section into my page and when i hover over this section over on the left hand side i have a few different controls i can change the section background and in a moment we'll do this i can also duplicate a section or delete a section if i didn't want it now over here i see a placeholder let me click on the placeholder and we'll see all the different types of content that i can insert here this is the official kevin cookie company homepage let me insert our commercial from youtube by clicking on youtube this opens up a prompt where i can search on youtube i'll look for the kevin cookie company commercial here i see the kevin cookie company official commercial i'll select that and then click the select button this now inserts my youtube video on my home page how slick is that over on the right hand side i can customize the text to go alongside my commercial let me type in our slogan i've typed in our slogan and when i have the item selected here too you see that i can adjust the size of this text box i can also click up here if i want to change the style here i could change it to a heading or i could change it back to a title i could also go through bold italicize and you have all of your typical editing tools underneath my title i want to insert some text and i'm going to just type up some text about the level of quality that goes into each cookie at the kevin cookie company i've now finished the first section of the website and i want to add another section here too i'm going to click on this layout i like using the layouts because it combines a number of elements together i don't want another image i want a little bit of variation so i want to show how you can move things around i want this placeholder to appear on the right hand side and i want all of the text on the left hand side i can simply click on this item and i can drag it to wherever i want it so i've now placed this on the right and i have my text over on the left i also want to have a little bit of kind of a zebra effect or alternating colors going this is white here so i want this to have a nice grayish color here i'll click on this section background over on the left hand side and i'll apply a little bit of emphasis to this section here now i think it'd be a nice touch on the homepage to include an image carousel that shows some of the fine details of our delicious cookies let's insert an image carousel this opens up a prompt to insert my images i'll click on the plus icon i have the option to upload or select i'll select some images i'm sure i could find some amazing pictures online and pass them off as kevin cookie company cookies within select images i'm going to use the google image search and i'll simply type in cookies and let's see what comes back one of the really nice things is by default it only shows images that can be used commercially so i could use these freely on my website these look really good and i'll go through and select a few cookies that i think look delicious i've now gone through and selected all of my images next i'll click on insert this looks good let's click on insert again and this will create my image carousel here too right now the dimensions are pretty large for an image carousel so just like with all of the other items on this page i can adjust the dimensions using these blue circles and i'll pull this in and tighten it up a little bit for my image carousel down below i don't want it just sitting by itself so i'll insert some text right here to insert a text box i'm going to type in cookie gallery with photos let me highlight this and i could set a style i'll also set this to a title style and here i can center align my text now just like with all of the different items on this page i can click and drag it above my gallery so now i have a nice header for this image gallery my page is really starting to come together and the home page of the kevin cookie company really looks fantastic i want to add some additional pages though i can't just have a one-page website over on the right-hand pane again there's a tab for pages let's click on this down below i can add new pages or i could even link to a page let's click on new page for the new page i want to call this recipes and then i'll click on done this now adds a new page and i see a page for recipes and this shows me the recipes page if i click back on home up above this will bring me back to the home page and here you'll see that i have this navigation link on the top of the page over on the left hand side when i hover over this new navigation structure there's a settings gear let's click on this this opens up settings again and i have different options for how i show the different navigation links right now it's set to show on the top let's see what it looks like if i select the side when i click the side it disappears from over here and now i get a hamburger menu and when i click on this this shows my in-page navigation i personally prefer to leave it on top i think it's a little bit more discoverable let me click on the settings gear again and i'll add it to top i also have a few different color options i can make it white i can make it black or i could simply make it transparent i think transparent looks the best so i'll stick with that next let's go in and build out the recipe page i've now built out the recipe page and i built this the same way we did on the home page where i added a section i added an image and some text for the first recipe we're going to show the recipe for chocolate chip cookies now you might be wondering why am i giving away the recipe for this isn't that a trade secret it's true but we recently started selling chocolate chips and this recipe uses a lot of them so i think we could really drive some sales of that now i want yet another page where we can list out the chocolate chip cookie recipe so once again i'll go to the bottom right hand corner and i'll add one more page i'm going to call this page chocolate chip and then click on done this now adds another page in the navigation on my page one of the things you'll see is across the top navigation it added another tab for chocolate chip i don't want this to be a top level item in the navigation i want this to be a sub page of recipes can i make it a sub page yes so over on the right hand pane let's click on chocolate chip and i can click and drag it into recipes this turns it into a sub page so now you see that chocolate chip is no longer on the top level navigation when i hover over recipes you see chocolate chip now is one of the options i can go there and this drops me on the chocolate chip page over on the right hand side if i want to navigate throughout my expanding website i can simply click on the item and that will bring me to the associated page on the recipe page i want to link chocolate chip to the chocolate chip cookie recipe how do we do that well up on the top tabs let's click on insert and let's scroll down the list of all the different items that we can insert here i want to insert a button let's click on button here i could type in a name for the button and i'll simply say c recipe down below i can select where i want to link this button when i click on link it shows me all of the different pages in my site i want to link it to the chocolate chip page so i'll click on this next let's click on insert this now places a button in a new section i want it to appear in this section and just like before we can simply click on this button and we can drag it into this section up above so here now i see the chocolate chip cookie with the button included and as i go through i can include other recipes in here as well now that i've inserted a button there's nothing currently on the chocolate chip sub page let's click over on the right hand side on pages and now click on chocolate chip this drops us in the chocolate chip page and i can now include the recipe let's go up to insert and here i want to insert one of these two column structures let's click on this i've now created my chocolate chip recipe page and here you can see all of the ingredients and the baking instructions i think this layout works really well now that i'm all done with this let me click over on the right hand side and let's see what we can do with themes when i click on themes i can very quickly experiment with different themes and see how it impacts my page here i could jump between all these different theme types and here immediately you see how it's changing i'm gonna go back to simple and here too you could choose what color you want now previously google selected this color from my logo so i'm going to stick with this for now i could also choose what type of font weight i want to use throughout my experience so once again it's super easy to customize what your page looks like before we publish our page i want to show a few other things that you can do with google sites up on the top bar you have this ellipses when you click on this we can look at version history for the page so let's say that maybe in a month or two i'll go back and make more changes but maybe i didn't like them i can always go back to a previous version another neat feature is over here once again on the top bar i can preview what my site looks like here i could click on home and i could see what the home page looks like this is all looking pretty good down below right now i'm previewing it on a large screen display i could also click into tablet to see what my site looks like on a tablet and i could even adjust it down to a phone to see how it looks so it looks great regardless of what type of device you're on lastly you don't have to work on a site in isolation i have lots of recipes i need to add a lot more content to this website and it's going to be a lot of work for me to do up on the top bar i can click on this share with others link and i can invite other people to work on this site with me i've now finished building out my site and i'm just about ready to publish it let's click on one more thing before we publish it up on the top bar let's click on settings and then go over to custom urls here i see that my custom url kevincookiecompany.com is associated with this google site that's exactly what i want so i'll leave that as is if let's say you build a google site and later on you want to associate it with a domain you can come through here to tie your google site to your domain let's click on x and i'm ready to get this out to the world let's drive in some sales and really spread the word about the kevin cookie company let's now click on publish this now allows me to publish to the web and here it lets me type in a web address and this is a web address under sites.google.com now this site doesn't really matter that much because i'm going to be using a custom url now it does say that i have to wait up to 48 hours for the site to be viewable here but i'm okay waiting by the time this video comes out this website will be live now let's click on publish now that i've published the site i could go through i can make additional edits and once i'm satisfied with all of those edits i could publish the site again and then whatever changes i make will go live to the world i've now navigated to the kevincookiecompany.com and this site is live look at this it is a beautiful website i can navigate through here i'm going to click into recipes and i could jump into my chocolate chip cookie recipes so i have multiple pages on this website but that's really how easy it is to pull together your own domain and your own website it's extremely easy you don't have to know any coding at all all right that was a quick look at how you can build your very own website if you now have your own domain and website please give this video a thumbs up to see more videos like this in the future hit that subscribe button if you want to see me cover any other topics leave a comment down below alright that's all i have for you today i hope you enjoyed and i hope to see you next time bye [Music] you

Channel: Kevin Stratvert

Views: 161,447

Keywords: kevin stratvert, website, web site, build web site, build website, domain, google sites, sites, google, g suite, workspace, html, wordpress, word press, wix, squarespace, square space, godaddy, create website, create, build, htm, domain name, .com, .net, .org, website builder, builder, banner, header, image, images, carousel, sections, section, navigation, subpage, sub page, version history, themes, theme, preview, screen sizes, screen size, custom url, url, custom, publish, share, permissions, permission

Id: 1G51dz5Gt-g

Length: 22min 32sec (1352 seconds)

Published: Mon Nov 23 2020