How to Create a Class Website for Teachers | Google Sites Tutorial

hello there and welcome back to my channel i have a super exciting video for you all today i don't know about you but this year is going to be very different and there's a lot of uncertainty and because of that it is more important than ever to have all of the important information that families could possibly need in one place because we need to make everyone's lives easier right now so in today's video i'm going to show you how to create a class or grade level website for free using google sites [Music] first of all if it seems like i have more energy than normal it's because i've had like two cups of coffee this morning but i'm also just very excited for this video i have had a grade level website for the past several years and i've been using shutterfly i know you're probably thinking shutterfly is just for pictures but you can actually create websites on shutterfly and it's great but it's not very customizable recently my principal actually sent me an email and she asked team leads to create a google site for the grade level and i was like yes because i've been waiting for this moment for years i love google sites so much first of all they're free second of all they're so customizable so you're able to have them look cute but also still be super functional and as most of you know for the entire month of august i am doing one thing every single day to prepare for my classroom teaching i'm using error quotes because it's all going to be virtual but you get the point so one of the things i have been doing is actually creating a google site for my grade level in today's video i'm gonna walk you through from start to finish how to create a google site i'm gonna show you a lot of the tips and tricks that i have learned in order to really customize it and have it work for you and if you see me looking over here it's because that's where my laptop is all right and i'm literally just going to do this step by step let's start by talking about how to create a google site there are a few different ways i right now i'm in google drive and from google drive you can click on new come down to more and then select google sites you also can type directly in the address bar sites.new and it will automatically open up a new google site for you you will notice when your google site opens up you need to give it a name so i'm going to come up here and i'm going to call it fes for fake elementary school and let's do fourth grade i'm going to show you how to make like a grade level website now once i type that in it's going to automatically put it up in the corner of my site but i don't really like that so you can actually delete it from here your title will still stay on the actual site it just won't be on the site hopefully that made sense now the next thing i do is change the theme so i'm going to come over to themes and there are a few different themes you can choose from i really like the one at the bottom impression it has like the chunky oswald font and all capitals i just really like it you can customize the color personally i want it to be solid black so i'm gonna come to the paint bucket and i'm gonna type in the hex code which is zero zero zero zero zero zero and that's gonna change it to black and if i want to i can also change the font style but i actually really like the capital so i'm going to leave that now let's start by talking about our header now you actually have a few different header types you can choose from you can have a cover where it's actually going to cover the entire screen when you first open up you can have a large banner a regular banner or title only i personally really like just the regular banner you can also customize this by adding your own images so google sites does have images you can choose from if you come to select image they have a gallery that you can choose from but you know we all love to customize things or at least i do so i'm going to show you how to actually customize this header now you can use this title right here the great thing is so let's type in fps fourth grade this is going to automatically resize for different devices so if you come up to the preview button it looks like a laptop with a smartphone up at the top this will show you what your website will look like on different devices so it will show you on like a large screen like a laptop or a computer a tablet or a phone and you'll notice that title is automatically resizing which is great but i will say with this you can't customize it too much you know you can't change all the colors and whatnot so i'm going to show you how to fully customize it but keep in mind when you fully customize it and insert it as an image the resizing isn't going to work perfectly so if it matters to you stick with this title if it doesn't matter you can do what i'm about to show you i'm going to go ahead and just delete that full title so i just have an image at the top and i'm going to open up microsoft powerpoint but just a blank presentation now i'm going to go ahead and exit out of the design ideas i'm going to delete the second text box i'm going to start with just one typically i would resize the slide but i'm not going to in this case because instead i'm just going to be using this slide in order to create other images and i'm going to show you how to do that so actually i'm going to delete this top text box too i changed my mind i'm going to come up to the shape tool and i'm going to create a rectangle i'm going to have it be the full length of the slide and yeah height wise i think that's okay maybe make it a little bit thicker i'm gonna make it have no fill and no outline go with me on this okay now i'm going to right click and choose edit text i'm going to actually use this to be my text box the reason i'm using a table instead of just a text box is because i want to keep it nice and wide so my text doesn't get cut off okay just trust me so let's type fourth grade and it's in all white so we're going to change that to black so i can see it let's try that again fourth grade i'm doing all capitals i'm gonna choose that same oswald font so that it will match the other fonts on my website i'm going to use actually instead of regular let's make this one bold nice and chunky and we're gonna make it big okay that's looking pretty good maybe go a little bit smaller okay and then underneath we're gonna type fake elementary school very creative let's change this one instead of that bold font let's just do regular and let's make this smaller so that it's smaller than the word fourth grade all right i think that's pretty good we're going gonna come up here and we're gonna actually change the color of each different letter just to you know make it fun i'm gonna come to shape format text fill choose more colors and i'm gonna just go in rainbow order so we're gonna do strawberry and that means this g also needs to be that pink color and then we're going to choose tangerine these are like my favorite colors in powerpoint for rainbow we're going to make the r the same color we're going to make the u lemon okay same thing for the a and then we're gonna do the r in the color lime so more fill colors lime same thing with the d and then we're gonna make this t aqua the great thing is as i'm selecting these colors it's gonna save it under my kind of recently used so as i continue to make things for my google site the colors will already be there and then finally grape okay so now i have these rainbow colors but i want to add a black outline because i think the a and the u are kind of hard to see so i'm going to come up here to outline and choose black and let's make it a little bit thicker like three times yeah i think that's pretty good i now want to save this as its own image so i'm going to select that uh shape right click and choose save as image so in my downloads i'm going to just title this header and click save now i'm going to come back to my google site i'm going to go to change image and choose upload and my header is right there i'm going to click open beautiful oh i love it okay now you'll notice it's adjusting for readability because i have the background just as plain it doesn't need to adjust it but if it might be hard for you to read the title on top of this it will put kind of a gray overcast or a different color overcast you can always click this though to remove it if you don't want that so it's looking pretty good just to show you what i meant by it's not going to automatically resize if i look at it on a mobile device or a tablet it's cut off just a little bit so it depends on your audience and whether most of your parents or students are going to be viewing it on a computer or a tablet so make it work for whatever you need okay personally i really like to keep my home page pretty simple i don't want to clog up my home page with too much stuff i really like to add over here with the layouts this kind of three column layout so this will allow me to add in images and it will keep them in those three columns so what we're going to do is we're going to create some little kind of buttons if you will i'm going to come back to powerpoint and i'm going to go ahead and make a new blank slide so i want to add in some circles now i go to the circle tool i'm holding down shift as i'm clicking and dragging it's going to keep it in a perfect circle instead of an oval let's make this like two inches yeah okay i think that's fine now i'm going to have six different pieces so i'm gonna use rainbow color order again i'm gonna go ahead and fill this with the pink color but have it have no outline and i want to add an image on top so i'm going to have this first icon be for like meet your teachers so i want to add in an apple icon so i'm going to come to picture picture from file i've already saved these to my computer but these are basically called icons so what you can do is just go to google and type in like apple icon and find the image that you want to use so i have this apple let's make it 1.7 and then kind of center it in yeah that looks pretty good underneath i'm going to add a text box so i want to make sure i resize the text box so it's the exact same size okay i'm going to come to that oswald font again and i'm going to use bold on top so actually no i'm going to use bold on the bottom so let's go back to regular so it's going to say meet your and then teachers but i'm going to change teachers into the bold font okay and i'm going to center this and make it a little bit bigger okay that looks pretty good i can now click and drag to select all of these and i'm going to just copy and paste it so i can make my next one so for this next one i'm gonna change the circle color to the orange and i'm gonna have this next one be our schedule so view our schedule okay and i want to replace this apple with like a calendar icon so i can actually right click on it change picture from a file and i can choose calendar and it's going to automatically pop it in or we're going to make that a little bit smaller so let's come down and size center it again okay that looks good so again i'm gonna copy and paste this one because i think the apple was kind of the oddball out in terms of the size so next i'm going to have e-learning expectations oh okay our fonts getting a little big so i'm going to make it smaller let's see can we try 22 nope too big 21. okay so i'm going to go ahead and resize these other ones to be the same size let's go ahead and change the color to be yellow and for e-learning i'm going to use like a laptop so i'm going to change this to a laptop image that looks pretty good next let's go ahead and paste again and this one we're gonna make green and this one might be oh i didn't change the font on this okay let's go to 21. this is going to be online resources okay so let's change this image to the idea icon okay all right let's copy and paste this one okay let's go ahead and change this to blue and let's have this be elearning help because we all need that right now and let's change this to like the question one okay and last one i'm going to drag it down here and it doesn't matter if they're perfectly lined up because i'm going to be saving them each individually this one is going to be contact information and let's change the image to the mail icon all right those are looking pretty good just like before i'm gonna save each one as an image but what's different is here i have multiple pieces whereas the first time it was just one image or one like box so i'm going to click and drag to select all of the pieces i'm going to right click choose save as picture and for the sake of this i'm just gonna call it like home page one save all right so now i'm just repeating that same process so clicking and dragging to select all of them save as picture let's make this one home page two save as picture page three [Music] okay now i have them all saved i'm gonna come back to my google site and where this plus sign is that's going to allow me to insert an image so i'm going to choose upload and i'm going to choose each one of them so let's start with the apple alright see how it's cut off right now i don't want that so i'm going to come to uncrop and it's going to insert the whole thing i don't need these text boxes underneath so i'm going to click on it and choose delete click on it choose delete so now i'm just repeating that process [Music] now i could type the text in that text box the reason i kept it as one image is because i'm going to link each of these and i don't want to have to link an image and a text box i'd rather just link it as one so i'm going to go ahead and upload this third one and i'm going to show you how to kind of duplicate this section so it's easier i'm going to delete the text box and delete the text box so now that i have this section and it's pretty much what i want i'm going to go ahead and click the duplicate section button it looks like two pieces of paper now when i click on this i can choose the three little dots go to replace image upload and i can choose the next one and it's already uncropped and i don't have to delete the text boxes so it is saving me time upload this one okay upload and the last one oh it is looking so good all right let me go ahead and preview this on a large screen it is looking good okay let's x out of that now i need to start creating the pages that i want these to link to so if i come over here to pages right now i have just a home page which is this but i want to create a page for the teachers so i'm going to go to new page type in teachers click done and you will notice that it has now created a new page so i can click back over to home here's my home page and here's my teachers page now i'm going to come back to this in a second but for now that's looking pretty good i actually want to add a page for each teacher so i'm going to click on the three dots i'm going to click add sub page so let's say we have miss foray done and then we also have let me click on the three dots on teachers again add sub page mr emerson that's billy i'm going to click done so now when i go to my homepage and i come to teachers i now have a drop down so they can actually select which teacher they want now what i want is for this image right here meet your teachers to link to that page so i'm going to select this image come to the link button and i want it to just go to the main teachers part so i'm going to click apply and now if i go to preview and i can either come up here to teachers and select there or i can click on the apple and it's going to take me to that teacher page so let's go ahead to the teacher page which is where i am now just like before i want to create that kind of custom header so i'm going to delete the actual title that's there let's go to powerpoint and i'm going to select the same box that i had before copy and paste it but now we're going to select fourth grade we're going to just rename this to say teachers i'm going to right-click save as picture and we're going to call this header 2. all right so i'm going to come back to my google site change image upload and i'm gonna select that second header so now it says fourth grade teachers it's looking better now i want to add kind of like two images to show each of us so i'm gonna select this double one and let's go ahead and insert an image so i'm going to upload and we're gonna do me first and we're going to uncrop okay and then we're gonna go ahead and type miss foray and i'm i'm not gonna use the little subtitle we're gonna take that off and then here i'm gonna insert a picture of billy which i do not have a lot of pictures of billy he tends to not want his picture taken so we're gonna use one from the grand canyon let's go ahead and uncrop all right let's make this can we make it smaller so it yeah so i'm just resizing it so it ends up being the same height as my picture okay looks good mr emerson awesome now i want them to be able to click on these pictures and have it go to the sub page so i'm going to select my picture and i'm going to come to link and i'm going to have it linked to miss faray click apply i'm going to choose billy's image i'm going to click it twice to get those options to come up insert link mr emerson apply okay so now let's come to pages let's go ahead to my page again i don't want this title so i'm going to delete it maybe i'm going to come into powerpoint and let's go ahead and make a new slide and let's copy this over paste it so i'm gonna just retype this and then maybe i'm teaching math and science so i'm gonna type math and science teacher i'm gonna go ahead and save this as header three and once again i can change the image upload choose that new header it's going to upload it and then i can customize this page however i want so again i can insert maybe i want something like this where i can add in that picture of me again i'm going to uncrop i can add text like hello there since that's what i always start by saying this is my seventh year of teaching at fake elementary school so you get it i can add all of that and customize it here i can have it be more of like that heading font which would put it in the all caps i don't think i want that though i can have it be subheading which just makes it a little bit bigger okay you get the point now let's go back to the home page and let's just kind of test this so i'm going to go to preview alright i'm on my home page i click meet your teachers cool it takes me to this page let's say i want to meet me click on it awesome it takes me to my page looking good so far so next let's come back to the homepage i have my teachers page maybe i want a schedule page so i'm going to come to pages i'm going to select home add a page schedule done i can reorder this so maybe i want it to be after teachers i can drag it down to the bottom and now it's underneath at the end let's go ahead back to home so now i have teachers and i have schedule i want this icon to link to that schedule page so i'm going to select that and click apply and then once i'm on my schedule page i'm just going to go ahead and delete this and i'm not going to worry about making a title i've shown you how to do that i do want to show you how to add in some different pieces besides just the images and text so i'm going to come to insert and i'm going to use this collapsible text so this is really really cool i've seen this on a lot of websites basically it's going to show some text and then you can click on it and it's going to show more text so i'm just going to make up a fake schedule let's say 8 am to 8 30 is going to be our morning meeting then in the collapsible section i can describe what a morning meeting is so this would be your description of a morning meeting and i'm just using that as an example and let's go ahead and duplicate this then let's say from 8 30 to 9 30 we have math and this would be your description of math instruction okay you get the point so now let's go ahead to preview let's go back to our homepage just kind of test this if i click on view our schedule it takes me to this page and now i can click here and it will show my description of a morty meeting or it will show my description of math instruction so you can actually add your whole schedule in just like that let's go ahead and exit out of there now let's go back to the home page i need to add in e-learning but i have e-learning expectations online resources e-learning help i feel like those all kind of go together so i might make a page that is just e-learning or distance learning or online learning whatever you're calling it hit done okay now let's add several sub headings or sub pages so let's have expectations online resources and let's have help so now i have three different sub pages so if i go back to my home page this expectations one i'm going to link it directly to the expectations page i don't want it to go to the main e-learning tab i just want it to go to expectations i just want online resources to go to online resources and i want the help to go directly to the help page but maybe parents want to look at all of the e-learning resources they could actually go here and i could link to other things besides just those so maybe on my online resources page let's go ahead and again delete this i might want to insert in some videos from youtube so i could type in google classroom for beginners it's going to pull up videos oh let's use this video right here and select that and it will insert in that youtube video directly to that page i could also add in a form maybe i want parents to be able to insert in questions that they have so i could select a form like i'm just going to use this blank quiz let's pretend that it was you know a form that i had let's go ahead and insert that in and maybe this is like a place for them to submit questions so i can actually add that right on the page if i want to i can resize it and have it be bigger cool looking pretty good maybe i've created a google doc with all of these like helpful resources i can add in a google doc what do i have in here i don't even know oh i have some podcast outlines for bridget nice podcast and some papers okay we'll just use this podcast one as an example okay so i can actually insert that google doc right in there again i can resize it to take up as much space as i want and i can also reorder these sections so let's say i want this to be under my video i'm just going to click and drag so it is underneath and now it is underneath of my video you can totally customize this to work for however you want it let's go back to the home page because i just want to show you all some different features obviously i'm not going to build the whole website right now because we would be here for 10 million years under the help page i would probably use that collapsible text again so i might add in collapsible text for like commonly asked questions so like how do i get to google classroom and then i can put the answer right here so i would answer the question here and that way when people are using the website so i'm just going to go to preview it just has a list of those commonly asked questions and they can just click in order to view the answer i feel like that's a really good option for a help page now let me create my contact page because i want to show you something really really cool i'm going to go ahead and add a new page and i'm going to call it contact okay let's drag this down to the bottom because i want it to be last oh i made it a sub page all right drag it out there we go let's go ahead and delete this maybe on the contact page i want something that parents can just click and email me right away so i'm going to come to insert i'm going to choose button and i'm going to have this say email me under the link i can actually type in like a url but in this case if i want it to go directly to my email i'm going to type in mail to colon no spaces so it's just male 2 colon again no spaces i'm going to type in my email address pocketful primary gmail.com and i'm going to click insert so with this button i can resize it have it be nice and big let's go ahead and put it in like the center so i now have this button and it is linked so that when they click on it it will automatically open up to bring an email to me so let me show you what this looks like first of all let's go back to our home page and let's link this contact information to the contact page click apply and let's preview this so i'm on my home page i scroll down oh i need to contact them let me click contact oh email me click it's going to open up their email and automatically have a compose box with it sending to your email so i automatically had it sent to pocketfulprimary.gmail.com literally a game changer it's so cool i'm gonna x out of there i don't need that anymore let's say the first week of school i want parents to fill out a form for me to help to get to know them and contact information and all that let's go ahead and x out of the preview i'm going to add a button that will take them directly to a form to fill out so let's go ahead and add in a button and let's have it say fill out this form okay so i wanted to go to a link let me go back to my drive i have this google form right here i'm going to open it up and i just made this quickly last night it's not like my actual parent information form i'm going to go to send and i'm going to get that link i'm going to go ahead and copy that link and i'm going to come back to my google site and i'm going to paste that link right there and click insert now i need to move this up so i have it at the top of my page which i can always delete this later when the form you know has all been filled out and i don't need them to do it anymore let's go ahead and make this bigger so it gets our attention and let's let's alter this section maybe i want to go to section background and let's choose emphasis two that's gonna make it black and now the button is white and i feel like it sticks out a lot more let's center it okay and let's preview this so now when you come to my homepage i have this button right here it's getting their attention and if i wanted to make it another color like let's say green to really get their attention you have the option to add an image so i could just take like a powerpoint slide make it green save it as an image and import that if i click fill out this form it automatically takes them to the google form hopefully this gave you some inspiration for creating your own google site as you can see you can make it as complicated or simple as you want a lot of the things i showed you in this video were kind of extra right like creating those images and inserting it in you don't have to do that you can make it very basic and just use what google sites has available to you with the text boxes and the images but you can also go fully you know fancy and you can create your own images on powerpoint upload them and really make it your own i just wanted this video to kind of show you the basics of creating your own google site i would love to hear how you all are using google sites with your students this year or with your families leave a comment down below if there's something specific in this video that you want me to go over in more detail or another aspect of google sites that you want me to cover again leave a comment let me know but if this video was helpful please give it a thumbs up share it out with your teacher friends okay any teacher friends who might be you know creating a class website this year send them this video and be like hey this is what you need to do also make sure you hit that subscribe button and the notification bell so you don't miss any future videos as always thank you for watching i love you all so much don't forget to put your positive pants on and i'll catch you in the next one [Music] you

Channel: Pocketful of Primary

Views: 275,979

Keywords: teacher, classroom, vlog, 4th grade, pocketful of primary, tips for new teachers, tips for teachers, new teacher tips, teacher tips, classroom vlog, vlogger, teacher vlog, teacher vlogger, how to, create class website teachers, create website teachers, google sites tutorial, make a class website, make a class website teachers, make an online class website

Id: EV7l0PBZCEE

Length: 30min 26sec (1826 seconds)

Published: Wed Aug 12 2020