Lesson video

Hi, my name is Jordan Bickel and this is lesson four of six of web page creation.

In this lesson, you are going to be creating your homepage on Google Sites and using the preview feature to test out how your web page looks on different devices.

You'll be using Google Sites, so you'll need permission from a parent or carer to use their email to create a Google account and then make your Google site.

You will also need a pencil or pen and a piece of paper.

Now find somewhere comfortable with limited distractions where you can get your best work done.

Pause the video here until you're ready to continue, then press play.

In this lesson, you will recognise the need to preview pages after you've created a web page.

To do this, first, we'll start by adding content to your own page.

And then, we'll preview what your webpage looks like in different devices.

Finally, you'll evaluate what your webpage looks on different devices and make any necessary changes or edits.

Adding content to your web page.

First, we're going to revise what we learned in lesson two about how to create a new page on Google Sites.

Then once you've created your homepage, we'll see what the content looks like on different devices.

Task one, create your own web page.

In this task, you're going to use your plan from lesson two to create your first web page.

This will be your homepage.

Before we get started, we'll have to sign in to Google sites and first create your website.

Before you start creating your first web page, you'll have to make your website on Google Sites.

Be sure that you have permission from your parents or carer to do so.

You must be 13 years or older to have your own personal Google account.

Please have a parent or carer complete the next steps for you.

To create a Google account, you need to go to sites.

google.

com.

This will take you to a Google Sign in page.

If you don't already have a Google account, please press Create account.

And then you're creating it for yourself, the parent or carer.

Then your parents or carer will put their first name and last name and either create a new Gmail account, or they can use their current email address instead.

They will then create a password and press next to finish setting up their account.

Once logged onto a Google account, you can create your first website.

To start a new site, you need to press the plus button here and we'll be using a blank template.

Now you've created your first Google Site.

Pause the video here to have a parent or carer help you create your first Google site.

Press play when you're ready to continue.

Now that you have a website, we're going to start creating your first web page.

This is going to be the home page of your website.

To begin, we're going to add a site name and a logo using the ideas from your plan.

As you can see in my plan in the top left hand corner, I've decided that my site name is going to be Animals Unleashed and I'm going to use a paw print as my logo which I found and saved in lesson three.

Here's a demonstration on how to add a site name and a logo to your Google site.

Here is my blank Google site.

Now in the top left hand corner, I'm going to enter my site name, Animals Unleashed, and then just below it, I can add my logo.

I'm going to press upload because I've already saved my picture from lesson three.

Here you can see I've created in my Pictures folder, a special folder for my websites pictures.

And then here's the paw print that I had in my plan for my logo.

And I'll press open and it should load.

Perfect, now I can see my logo on the top left hand corner and I can close out of this box.

Pause the video here to add your site name and your logo.

Press play when you're ready to continue.

Next, you're going to choose your header and the text that you'd like to include, using the ideas from your plan.

In my plan, you can see at the very top, I've decided that my header will read, Welcome to Animals Unleashed.

And then I've also decided that as the background, I'm going to use a picture of animals.

Here's the demonstration on how to choose a header and add text.

Now we can make changes to our header.

First I'm going to type the text that I want my header to say.

Welcome to Animals Unleashed.

And then I can decide how I'd like my header to look.

On my plan, I had decided I was going to keep the same normal size banner.

I didn't want it too big, and I didn't want it to be the full page.

I also decided that I'm going to change the image in the background.

So I'll click Change image and then press upload because I've already saved the image from lesson three.

Here you can see my Pictures folder, I've made a special folder for my website images.

And here the picture I had chosen was this one of peacocks.

And Google sites has a very cool feature here and you could see in the bottom right hand corner, it's adjusting for readability.

So it should take the image that I've chosen and change it slightly so the text still pops and is easy to read.

So looks like it's finished.

It's still quite difficult to see there we go.

So now you can see the images a bit darker just to really make it pop and grab the attention of the user, I'm going to make the text bold.

Pause the video here to add your site name and your logo.

Press play, when you're ready to continue.

Your final step now is to begin adding layouts to the body of your webpage.

This will help you begin to share information with the user.

In my plan, you can see the first layout that I selected has a picture on the left hand side with text on the right hand side.

So when I go to create my website now, I'm going to look for that same layout.

Here's a demonstration on how to add different layouts to your webpage.

Now you can begin adding different layouts to your webpage.

On the right hand side, you'll see the option for layouts and then there's six different types.

From looking at my plan, I've chosen to first include a layout that has a picture on the left hand side and text on the right hand side.

So I'm going to grab my layout and drag it over underneath my header.

On my plan, I had decided in the picture here, I was going to include an image of a fox.

So I can upload the picture from my saved images from lesson three.

Then right here, I have my image of a fox.

Perfect, and then in the plan that I made in lesson two, I decided here I'll say, welcome to our website.

And then underneath, I'm going to add the text, we hope you enjoy.

If I'm not happy with anything in the layout, I can always click the bin to delete and then when I'm ready, I can add another layout just beneath.

Pause the video here to add your layout to your webpage.

Press play, when you're ready to continue.

Here's an example of what your finished webpage may look like.

In task two, you'll be reviewing and editing your webpage, using the preview feature in Google sites.

Now we're going to look at how you can use the preview feature in Google sites to see how your webpage looks on different devices.

In the example below, you'll see a webpage previewed on a phone.

You can see at the very top, the text is not cut up awkwardly, you can see each word, and it all fits on the screen.

The picture below it is also fully in view and if you kept scrolling down, none of the text seems to be broken up awkwardly.

So I would say that this webpage is well suited for a phone.

In the next example, you'll see a webpage previewed on a tablet.

It's the same exact webpage, but now we're able to see a bit more of the information provided.

That you can see at the very top, the text again isn't broken up awkwardly, it fits well and all of the images below it also are clear.

You can see them fully and none of the text is broken up.

So I would say this webpage also looks quite good on a tablet.

In the final example, you'll see the same webpage displayed on a laptop.

And now we can see the whole entire page much more of the text and you can see that none of the pictures are broken up, they're not too small, they're all about the same size, none of the text is broken up awkwardly on any lines.

So again, I would say this website fits very well on a laptop too.

In task two, you're going to be reviewing and editing your webpage using the preview feature on Google sites.

You're going to see how your webpage looks on a tablet, a laptop, and a phone.

Here's a demonstration on how to use the preview feature in Google sites.

Now that I've finished designing my webpage, I can use the preview feature to see how it looks on different devices.

The preview features here at the top of the page.

Once I click on it, it will show me the different devices and what my webpage looks like on each one.

So right now this is showing me in bottom right hand corner, you can see it's on the phone right now.

So you can see the text at the top, it's not broken up awkwardly, you can see it all, the pictures are clear.

So the webpage works well on a phone.

Then I can navigate to a tablet.

Here, it's not looking as good.

There's lots of broken up texts.

So you can see welcome has been broken up over two lines, Unleashed has also been broken up over two lines.

So we're going to have to go back and fix that, but let's just check first, how it looks on a laptop or a desktop computer.

So here you can see all of the text is not split up over lines, the picture is fine.

So it works well on a desktop or a laptop but it's the tablet then I need to go back and fix.

To exit preview, I just click on the X here.

Now I can try to problem solve to make the webpage look a bit better on a tablet.

So I can first I can highlight the text here and just try and make it a bit smaller.

Google sites is different from Google docs, where there's not going to be an actual font size, but I can change the style of the text here.

So instead of it being a Title, I could just make it a bit smaller and call it a Heading.

It's quite small now, I don't know if I like that.

So I'm going to go back and put that to a Title again.

So first thing my users are going to see and so I don't want them to lose that welcome message that we've chosen to have there.

So put it back to Title.

Another option you can have is to change the actual header style.

So I had chosen just the regular Banner at the top, but I might be able to make it larger and that might give my text here at the top a different layout in the tablet preview.

So once I've made that change, I can go back to preview.

Here you can see it showing me the laptop or desktop feature that still looks fine.

So click over to the tablet and see if we've fixed our problem with the text.

No, we haven't, okay, exit again.

After a bit of trial and error, I found that if I, drag the text box out towards the edges, it will make the webpage appear better on all three devices.

So I'm going to go back to the preview and first I'm looking at it on a desktop or a laptop and you can see that the text goes all the way across the screen now and it's not broken up awkwardly.

Then here's the big deciding factor tablet, yes, none of the words are broken up awkwardly.

They all read across the screen, looks good.

And then the final one, my phone preview, again, all the texts is there not broken up.

So it also looks good on a phone.

Pause the video here to complete your task.

Use the worksheet provided to see how your webpage looks on different devices, using the preview feature in Google sites.

Press play, when you're ready to continue.

Reviewing another thing in your webpage, when you've completed the worksheet, go back to your webpage and make any changes that are needed.

You've now reached the end of lesson four.

You should be really proud.

You've created your very own website.

Be sure to share it with somebody at home.

You can also share your work with Oak National.

If you'd like to please ask your parents or care to share your work on Instagram, Facebook, or Twitter, tagging Oak national and #learnwithOak.

I'll see you next time.