Squarespace: How to Make Your Own Creative Website, With No Code

1. Introduction: So you want to build a website, but where do you start? Which program are you going to use? Well, if you're a beginner or you're very experienced and you want to be super creative. I'm going to show you the best program for all of this, and that is Squarespace. When you look at Squarespace, you may feel it's a little bit too templated. Well, I'm going to show you how to take this plane template and turn it into this super cool, exciting website. Hi, I'm John Wolfgang Miller. I've been a professional designer now for 20 years. I've worked for some very big clients such as Fox TV here in Australia. In this class, I'm going to start by showing you how to do a little bit of industry research. And then we're going to take a look at all the global elements. That's the parts that appear across the entire website and the ones that allow you to show off your own personal branding. I will show you how to build a very impressive homepage, also an about page, a contact page, and of course, the blog page. I will also show you how to bring in some background that animation. This is something that can really make your whole website stand out. If you want to build up your website portfolio and your design experience, I'm here to help you with all of that. So if you're ready, let's get started. 2. Class Project: Your project here is to follow my direction and build your own awesome website. The first few lessons, we'll talk you through the setup of square space. Then we will take a look at the home page and create a page that shows off who you are. We will then take a look at the background animations and show how to give your site that extra creative side. Okay. Following this, there will be lessons on your page, your contact page, and then we will take a strong look at the blog section. I recommend watching all the lessons and then go through them again one by one and start making exactly what I have shown you after each one. You can either use all your own images here or you can use the exact same images that I have used. If you would like to do that, all my images are kept here in the resources section. In this class and all my classes, I will be covering a lot of different things and showing a lot of different skills. So I recommend as you go through to play and pause the videos. And if you need me to repeat anything, just press this 15 second rewind button enough times, so you can just rewatch that whole part again. If you're having any problems with the video quality here in Skillshare, just come over here and click on this quality levels icon. If this is set to Auto, well, depending on your Internet speed at home, it may not be showing up at the highest quality possible. So just change it to either seven 20 or ten 80 pixels, and you will instantly see a big quality change. At the end of this class, you will have an awesome website. So make sure you add it to the project section, and I will give you my full feedback. 3. Squarespace Set Up: Okay, so here we are at square space that squarespace.com, and there is a link down in the a section. Best thing about square space is that they always offer you a free website trial. So you can play around with the program and see if it's what you want to buy. No credit card required. You don't have to put any credit card details in. So when you've had a look around, just click here on Getarted. And that will bring you through to the page of templates. Square space has a lot of different templates. Feel free to look through them all if you want. Just select all templates and scroll down and you will see each one they have. They also have a preview of everything in here, so click on the preview. And it will show you how the whole sites, and you can even view the demo site. Now, the website that I am going to make. Well, it's going to be a blog site. It's going to be a blog site about my favorite thing in the world. And that's video games. What I love is retro video games. I love all of the old Nintendo and Sega games and all the old arcade machines from the 80s and 90s. So I want to have a blog that talks all about that and talks about all these amazing games. So, I could look through all of them now, or up here, I can choose that's going to be a blog site. And that will narrow down the searches. Or, It's about entertainment. So let's see what we've got here. The options that we chose here didn't give many template matches. So let's just choose something else. I'm going to choose online store. I'm not making an online store, but you can take any template from this and just play around with it to do whatever you want it to do, really. So let's just see what else we can find in here, see if there's anything that I like. Kind of like the sort of brighter colors there, but it's a bit plain, the white. And I kind of like this one here, to be honest. I know it isn't bright or anything, but I kind of like the way that we've got the big image on the right and then the big text on the left. Let's preview this one. Okay. Yeah. I mean, it's sort of still quite dull in terms of colors. But in terms of the layout, I like the use of large fonts and big images and stuff. So I think we're going to start with this, and I think we're going to develop it to make it look how we want it to look. So let's go up here, start with this design. And now, you need to create an account and you can do this for free. You don't have to put in any credit card details or anything like that. So I'm just going to continue with one of my Google accounts. And so now that I've entered that in, as you can see, it is setting things up. Okay. And here you go. Welcome to your site. This has just created the site for us using everything from the template. Now we're going to go in and play around with this. So first of all, the site title. I'm going to call it Game Over. Then edit pages. This just talks you through a little bit how it works. How to create pages. I'll talk through all of this right now. So get started. Again, you'll get some extra little bits of help over here. Just close that one for now. And then, over here on the right. This is your website, basically. This is everything that's been created for you already. If you just click on the little arrow over here, it goes full screen. And you can kind of scroll through and just see how the whole thing is working. This is obviously about soaps, which is nothing like what we want to talk about. But we're going to change it to be all about video games, and it's going to be much brighter and much louder. But as you can see, it's already put in the name of my website at the top there. So let's close this one. Then over here on the left, you have the menu, and this is where you can manage everything on your website. I won't run through everything here for you right now because there's a lot here. I'll just quickly show you here pages. These are all the pages that we have in our website, and these are just demos that have been created for us. So we have one for shop journal about and contact. And then this is the home page. And then we have some extra ones down here, shipping and returns and stockists. That's because it is an online store, but we're not going to need those things. So I'm just going to delete them. And I don't need shop, va, so I'm going to delete that. As you can see over here, this is the main navigation that sits in the header of the website. And down here, these are the ones not link. So not in the main navigation. But if you want to put them in, just drag them up. And as you can see, now home is in there, but I don't really want that to be in there anyway, so I'm going to put that back to linked. And so this is actually what I want from my website. I want a journal. I want an a page, and I want a contact page. But I don't want to use the word journal, so I'm going to change that now to blog. So I hove over here and click on the settings icon. Change the page title to blog. Navigation title to blog. That's what appears in the navigation bar. And the URL slug to blog or so. And make sure page is enabled. This one already is, so click Save. As you can see, demo has disappeared from there because this is now enabled. Let's just enable the other two. And when I come into this page, it's done it automatically, so just close it and you'll see demo has disappeared. Same here and same here on the home page. So all the pages are now live and all called, what I want them to be called. So let's go back. 4. Global Elements: Okay. So now let's start editing the website, and to do that, come up here to the edit button. Okay. The first thing I want to start with here is the back end of the website. That'll be something that appears in every spot. So we're talking the colors I'm going to use and the fonts I'm going to use. One thing that's very important with websites is consistency. So you want to keep using the same colors and the same fonts across the whole website. And square space is great because it helps you set all of that up in one very fast go. So to edit font colors and other parts of the website, come over here to this icon site styles. As you'll see here, these are all the things you can edit, fonts, colors, animation, spacing, et cetera. Let's start with colors. So this is the color palette that's already been assigned for this website. And the colors chosen here, they are appropriate to what is being sold here, bars of soap. However, this website we're going to build is all about retro video games. We need a different color palette. We need something that represents bright colors from the 80s and 90s. So come in here to edit palette. And you'll see that there are a lot of presets already by square space. If you scroll down through the website, you will see how the different colors come in. So we have a primary yellow and then a secondary red. And you know, that does look pretty nice, actually, but I want something slightly different. So what I'm going to do is go in and edit this. These two ends of the palette are perfect, a straight white and a straight black. These are the three that I want to change. I do want to yellow, but I want a brighter yellow. So I'll click on the yellow. Then you can play around in here with different colors. So if I want to choose a green, I'll move it to there. But what I want is a yellow one I want a really bright one. So, sort of halfway between the orange and the green. That's pretty bright already, but you can play around with the levels of the color up here, so you can go darker or lighter. I want to go super bright, so let's just go right over into this corner. There we go. That one at the end. That's perfect. I love that yellow. That's nice and bright. The second color they're using is kind of a orangey red, but I want a real pink. I want a strong magenta color. Let's drag this one over here into that sort of bright pink section, a little bit brighter, I think. Let's just scroll down to see where that's being used. Ah, there we go. Love that. I love the balance there between the yellow and the pink. That's really nice. Really bright. And then just one more color that I want to change. This is kind of like a dark red, kind of a maroon. I want this to be a sort of like a blue, but a really bright blue. That's not actually being used on the page yet, but I think that looks pretty bright. Maybe. Yeah, there we go. It's even a little bit brighter. We'll see where that is used later on. If we want to come in and change it, we can change this at any time. That's the beauty of it. So now we're set with colors. Let's go back in and look at the fonts. When you come in here, you will see the global text styles. As you can see here, these appear across the whole site. So when we change headings, that will change every single heading on the website. So these really large ones here and the slightly smaller ones here. If I click on it. You will see how many different options you have here. So you have four different heading sizes. This one being the biggest would be a heading one. And this would be a heading two. And the font chosen here, a nice Serif font is appropriate for the soap website. Well, I want something a bit louder, a bit brighter. I am a professional graphic designer, and the idea of picking fonts and knowing which ones to use. Well, I have all the experience of doing that in my career. If your knowledge around font choices is not as strong as this, well, I highly recommend coming to this page. This is a page run by Google Fonts that will talk you through the best way to choose type. The link is below in the A section. And on this page, scroll down until you see this one, a checklist for choosing type. This is a great website that talks you through the best ways to choose different fonts based on your branding, your product that you are trying to promote. So come in here and give it all a good read. If you have any questions about typography and font choices, just message me here, and I will get back to you as soon as possible. Now, for this project, I just want to use Sansa fonts, and I have two choices that I would like to use across the website. The first one is this one called Euros style. And the second one is this one called interface. Inside square space, you can just go through all of the fonts there and try them all one by one. See what works for you. What I will show you here is if you already have a choice. You can see if that is available inside square space. And the first one we want to change where we're already in the heading section. So let's change the font family that is chosen here, and I really want Eurostyle. So I'll click on this. And it will show me which fonts are currently being used. But I don't want either of these, so I'm going to browse all fonts. I can search for fonts. Now, not all fonts are always there for you to use. You may find someone else's website that isn't available in square space, and that can come down to licensing reasons. But if you find another font that is used in a different square space template, it will definitely be here. Let's write in euro. Let's scroll down, we've got Euro style extended. That's the one I want. I'll just tick that this is much better already. You can see a couple of things have just changed up here. The name of the website and also this giant headline over here, soap for everybody. Let's just go back. One more thing. I want it to be a little bit stronger than that. So if you click on this weight, obviously, the bigger the number, the bigger the weight. I can go 500, or I can go 900. 900. Let's have a look. That's a little bit two four. Let's go 500. Somewhere in the middle of the two. Yeah, that's nice. Then style, normal. That would be if there was, like, different options italicized or bold, but we just need the normal one. And then we'll come back to these a second, but text transform. What I actually want is them all to be uppercase. There we go. That looks very cool. It's a bit louder, a bit more sty. Soap for everybody. However, as you can see, the font is maybe a little bit too big. Let's just drop the size of it. This is heading one. We're going to choose this one over here and drop it down a little bit. Maybe let's say 6.5. Yeah, I think that looks good. Then one other thing. I think there's just too much space in between each word here. This is the line height. Let's just play around with that. This will change the line height for all versions of this, not just heading one, but heading two, heading three, heading four. Maybe drop down to one or maybe even Yes, not 0.9. I think I like that. Letter spacing that actually looks okay. I'm pretty happy with that, you kind of want a decent amount of space on it. So when people are looking at the website on their desktop, on the table, on their mobile, it's always going to be readable. But let's just play around with that. Okay. I'll leave it at that 0.04. And if we want to change this at any point, if we think it's working here but doesn't work elsewhere on the site, just come back and change it. And again, you change it once, it'll change it across the whole website. Okay, so let's go back. Now, what I want to edit is the paragraphs. So that's the main body copy that you can see. So let's see where that is used. This sort of font over here. Let's click on paragraphs. It's actually quite a nice font as they already. But this is where I want to use my other chosen font interface. Browser fonts. And this one was called interface, wasn't it? There we go. So I've chosen that. I really like the San Serra I think that's a bit more appropriate for a website about video games. But you guys can pick whatever you want for this, and I'd like to see what you pick. So let's just go back a step. Again, we do have different sizes for paragraph fonts here. Paragraph one, two, and three. They're all three different sizes, so you get the bigger ones and the smaller ones. I actually think that's quite a good balance right now in terms of the weight. I think it's a little bit light because we're using it on a very bright background. So let's make that a little bit heavier, maybe 400 again. Yeah, that's much better. I'm happy with everything that's here. I don't need to make it upper case. That works for the headlines but not for the smaller text. So let's keep it as it is with none. Let's go back. Then buttons. Let's have a look where we've got buttons. Here's a button here. We have a big one at the top here. So let's go into buttons. And the family for this? Well, I think there's got to be Eurostyle again. This is great because it's now telling me which fonts are being used across the whole website. So going have to find it again. Let's change that to Eurostyle extended. Yes, I love that. That looks really cool. Let's go back. We have three different types of buttons here, and they're all different sizes, as you can see. They're all the same weight, and I think 500, I think that's actually quite good for what we've got here. But again, we can come back in and change this later if you want to. And just make sure you set all three of these to the same font. Then the last one is miscellaneous. Let's see what we've got here. So this is kind of like an extra accent font that wouldn't be used across the whole website, but maybe you want to use it as one sort of highlighted element to make something really stand out and something look really cool. So this is one where you can be a little bit more creative. So let's come up here to family. And browse all fonts again. Now, I want something that really looks kind of eight bit, like it did come from the 80s or something like that. If we're doing arcade machines, let's just see what we've got that follows the arcade rules. These all look really cool and really kind of quirky. Kind of like this one where it's kind of half white and half black. So let's just choose that one. Now, that's not actually being used anywhere yet. But I'll show you in the header up here how cool that can look. So let's go back. Weight and size is absolutely okay for the time being back to sit styles. Animations. You'll see a nice list of animations here. And what this is is the way that different parts of your website will load when a user first comes to the site. So at the moment we have it set to fade, let's see what scale looks like. Okay, that's quite cool. You can see the header at the top, the logo there. That sort of scales in. Slide. If it kind of drops up, clip. That's cool and flex. But, you know, I think I like clip. Let's stick with that one for now, and then speed. Slow medium fast. I think I'll stick with slow. Yeah, I like that. Again, just play around with what you feel like works here. If you like the flex, it's a little bit crazy, but yeah, that's quite cool. Choose the flex. I only go with clip. Then spacing. So this is to do with the whole width of the entire page. And this is the full width that a website can be. And then site margin. That's the gap down the side of the website here. And at the moment it's on two, if I drop it down to zero, you'll see everything goes right to the edge. And it does kind of look cool. But little things like this, they're too close to the edge. They all need to have a little bit of breathing space. So, you know what? I think I'll just keep that two. Let's see what three's like. Alright, maybe three. I think that just gives a little bit more breathing space here. And then buttons. We already took a look at this. And as you can see here, this is just a different way of getting through the three different ones, but it's already choosing our font, and the shape we want is pill. You can choose something different. You can have a square one. You'll see it changes to square or this very round sort of choice. This one with the curved edges. I kind of like the p one. But just have a little play around in here yourself and see what works best for you. Outline. Well, that would just be a bigger border around the outside. Actually, yeah. I think that looks cool to have that a little bit stronger, maybe four. Okay. Back to site styles. Image blocks. Look, this is something you don't really need to worry about here. Feel free to have a play around with it, but this is just different ways of dropping images into your website. You can have it poster, the way you have text on top of an image. But we're not going to look at those right now. Feel free to have a look around yourself though. Okay. 5. Your Website Header: Next, I'm going to play around with this header section. And the first thing I want to change in there is the font. So let's click back on fonts. This is another way of accessing different elements. You don't have to go through the menu here. You click on the part you want to edit. You can edit that. So let's start off with this one. The logo, the main header of the website. As you can see over here, that is called the site title. That is taking the heading font. If you come over here, you can change it to a custom font. When you change this, it's literally just changing that one up here, not to the overall heading font. So let's go to family. And you know what, This is where I want to use Puffin arcade. Let's see what that looks like. Oh yeah, I love that. That looks really cool. As a logo was a main header for the whole website. It's a little bit smaller. Let's just go back and let's play around with the size. I want it quite big. Then, just one little thing. The letters are a little bit too close to each other, so let's just drag that out a little bit. Yeah, that looks good. Okay, That's really cool. That's really coming along. Now let's click on this one here. This is our nav bar. As you can see, it's actually still using the old font that was in there. Let's go in here, edit that. I think euro style extended is gonna look cool in here. Yes, that looks really cool. But you know what, I want that really bold. What was the biggest one we had here? 900. Yeah, I love that. Nice and bright and shout T. Then mobile site title. Well, remember if you want to see how something looks on desktop and mobile, they're gonna be slightly different because one is portrayed, one is landscape. Normally editing your website in the desktop version. But if you ever want to see what it's like in the mobile version, click on this one, and it will change to that. So now we can see how all the colors are working, all the fonts are working, the buttons and stuff. This one up here, while that's still kind of in the old version, isn't it? So if I click on that mobile site title, it's still as a heading. So let's go in here. And let's go costume again and just do what we just did for the desktop version. So let's change it to Puffin arcade. Go back. And then what did I say? I set this one to 0, didn't I type in 0 there? That's perfect. Line height. Well, let's just say because there's sat on top of each other now, because obviously mobile is much smaller. Let's make that fit. There we go. Then the size of it. Let's just say I want it quite old. Maybe 3.5. And that's great. Okay, Let's go back. Now that we've done in here, Let's click Close and then let's take another look at the header. So I'll come out of the mobile version. Let's have a look at the desktop view. Then let's click on this section. As you can see here, it will allow us to edit the site header. I can see at the top here you have three different options. The first one is global, so that happens across all devices. Whereas if you click on this one, this is what will happen on the desktop version, and this is what will happen on the mobile version. Let's go with global fixed. So first of all, site title and logo. Well, we already have a logo that we've created ourselves using fonts. That's a very easy way to do it. But if you already have your own visual logo you've created as an image at that in here. Elements. So this is everything that we can see at the top here. First of all, button, I do want a button in here because I wanted to go through to the contact page rather than saying get started, I'm going to say get in touch in terms of where I want that to go. Well, that could go to any other website, but I want it to go to one of the pages with inside our website. So let's click on the cog. Then you can make it goes to an email address, a web address to another file. We want it to go to another page on our website. So click page. I want this to go to the contact page. Literally when I click on this little drop-down of all of the pages that I've got two, let's just choose contact. Opening a new window. Do that if it's a different website, but if it's within your own website, leave that one off. Click Save. Next up, social links. Yes, I want that their users click on this button. It will take them through to our Instagram page. If we go in here, edit social links. You can add extra ones here. You can add in Facebook or Twitter or whatever you want. I just want to Instagram at the moment it goes through to the Squarespace one. Let's send it through to the GameOver page. Save that. Then let's a little bit small competitor if then else says make this a little bit bigger, shall we? Yeah, they fight. That looks good. Language switch. Don't worry about that one part. That's what you can see over here, and that's what you have if you've got a sales website, but we didn't have one of those, so we'll turn that one off. There we go. That's looking perfect. Now. Let's go back. Now style, this is Morgan, have some fun. So what we have here is different style choices. We have solid gradient theme, dynamic, solid gradient theme, dynamic. Well, I have all of those, they all work. But what I saw when I clicked on theme was all of this here. This is all of the colors that we've already chosen for the whole website. A play around with different levels of them to choose the one that I think it's going to look cool. I have all of these. Well, I liked the way we kinda got bright colors starting in the first part of the hero section. So actually want one of the light ones. And this one, it's black, is a little bit plane. So let's go with the pink one. Yes, I really like that. I like our main website logo being in the bright pink and then get in touch button. So that's really cool. So I'm going to stick with that. Then the next one here, fixed position. That just means that the header stays in a certain position as people scroll through your homepage and other pages of the website? Well, not to stay on because it helps people navigate throughout the whole website. You have two different options here. One is the basic one where it will stay there constantly. Want to scroll back. So when you scroll down, it disappears. When you scroll back up, it comes back in. It's Anita, cool way of allowing extra navigation to the users. So let's choose scroll back there, shall we? Okay, so that's all set up the global settings. Let's see what we got for the desktop version header layout. So I have this option here and it will move each of these elements around. You'd have a little play around with it and see which one works best for you. In all fairness, I think I liked the way it was originally with the icon here, that button there. And then these two parts centralized. I think that's just a nice balance of everything and has a lot of white breathing space either side. I'm going to stick with that. Then don't worry about width. We'll keep that as full. Vertical padding. Well, this is the amount of room that it's taking up at the top and the bottom, It's a bit big. Let's make that a little bit smaller. Maybe two elements spacing, well, that's kinda the spacing in-between these two things here. Let's drop that down as low as we can. Yeah, that's pretty good. In fact, I think just need a little bit more space at the top. Let's go to 2.2. Linked spacing. Well that's the space in-between blog about contact, all the parts in our nav bar. O. Get that up to three, I think. Yeah, that's cool. And then mobile mobile version. So how's this looking? How's that working for you? We have quite a few different options here. First of all, the header layout. So again, we can have logo on the left, hamburger menu on the right, or choose different options for this. I like this one because the logo is centralized and then the hamburger menu is on the left. However, I think the text is just a little bit too big there. I wanted to run on a single line the same as it does on desktop. So I'll keep it as it is. And then we'll go back and we'll edit the font again. Different options for your hamburger menu. Kind of like the plus one, to be honest. I think that represents old-school arcade machines. We can change the thickness of this line. Small, medium, large, I think smells good, nice and subtle. Then the next option in here is overlay menu, and this is how that looks. This is when someone clicks on the Plus, this will pop up. If I go back, it takes us back to the other one. Overlay goes like that. That's really cool the way it changes to the yellow with the black on top of it. I like that. You've got the main nav bar here, Instagram icon button, but I'd like it to be centralized, to be honest. Yeah, there we are. That's much neater. Colors. Again, play around with everything we've gotten here. See which one works best for you if you'd like the bright pink go with that. But I liked the yellow. Let's keep it with that. So now we're done with that. Let's just click Save. And then edit again. Let's change it back to mobile. And then click again on site styles. There are two fonts. Click on the mobile site title, and let's make this a little bit smaller. So it sits on a single line. I think 2.5, and that's nice. It's there, it's bright, but it's still small and subtle. So that's all done. Let's save that. Let's see how this all works. Yep, I love that. I love that. I hover over that button and it goes pink. And on desktop. Also very cool. So now we can move on to designing the whole homepage. 6. Web Design: Homepage A: So now we're going to start editing all our pages. The pages section over here, we have four pages. Best one to start with is the homepage which were already on. So what I want on this homepage is something that's quite straight and quite simple and tells people who we are, what we're about, what we can offer them. What I want is one section for the blog, one section for the about section for the contact. Maybe a couple of little extra images in there just to show how cool and quirky are. So we're going to start up here with this section. And this is called the hero is always the first part that every user sees when they first come to your website, be that on desktop or mobile. So let's go to edit this page. And you can see which elements have already been added in by Squarespace. In the template, we have a whole section, everything down to this blue line. This is altogether in one section. That means we can change the background of that section and it will change everything down to the blue line. So let's start off with that. By hover over here. It allows me to edit the section. We can play around with different sizes here, the section height is minimal, it's ten, but we can make it bigger when you're small, medium, large. That's the amount of space in-between what you can see here on the top. This is the hero. I want that to stay quite low. So one, Let's just stay at ten. Fact, as you can see, there's an extra little spacer up here. I want to take that out. So if you want to take it out, hover over the image and you'll see the red been removed. Okay, I prefer that now, now we've got the same sort of space to the right and above the image. However, I think I want to change the background color. So we click on here and go to background. Now, you can do quite a few different things here. You can put a background image, you could put a background video or background art. I'll show you those ones quite soon. But what we actually want to do is change it to a color. So let's click on Colors. And this is where we can play around with the different colors already in our color palette. And you know what I want for this one? I want the bright pink. I think that's a nice balanced from the logo and the button into this first section, let's go with the pink. When you're done with that, just click somewhere else away from this little window. What I wanna do in here is change this little section or this is an image section that's already set up texts on the left subtitle and button below. If you want to change the style of that. Click on this section where it says image and click the pencil. What you can do here is play around with the design. So at the moment we have a card option. You can go poster, as I said, that's when the text is on top of the image. Overlap. And a column that's called bit messy. Things like stack, where it's on top of the texts that's a bit too high up. I kinda like what we had before to be honest, which has card. I can play around. I could put the image on the left or the image on the right. I think I'm like on the right. So let's just stick with what we've got there. I want you to play around with that and do something a little bit different to what I've done here. Give it your own style please. So we go back to content. What we have here is the other elements that are appearing in here. The main thing that we have is a button. And we're going to say that that is going to link to another page. I want it to go to the about page. So let's just call it About Us. At the moment it says that's going to shop. That page doesn't exist anymore. So let's click on the cog. Let's go to page again, delete that one, and then choose about Save. Then the title up here. Well, soap for everybody that works for the soap web site. So I'm gonna change this to retro games. And then the period that I'm covering is 85 to 95. Yeah, that was great. That works really well with the white text on top of the pink background. Only thing is, I think for this one, it's a little bit light. Let's just make it bold. And it's going to highlight all of the texts there and press the ball been yeah, go. Yeah, That was perfect. I love that. Subtitle. Well, I want to say something in here as well that follows on from the headline. I want to say what we do on this website. So weekly blogs about all the best video games from 1985 to 1995. There we go. Then one more thing that needs change, obviously the image because that's about soap. So what In the content section, click on Replace and choose Upload File. You can browse for stock images if you want. But I already have my image is set up for this one, so I'm going to click the Upload file. So here's all my game over picks. I've edited these already in Photoshop. You want to know a little bit more about editing images for use on the Internet. Or go down into the about section. Have a look for my face. Click on that. That'll bring up my whole Skillshare page. If you scroll down to the bottom, you'll see all of the other lessons I have in there. And they have one for image uploading. How to optimize your photos to make your website run nice and fast. Make sure you watch that one to get a better idea of how image sizes need to work on the Internet. I've already resize all of these. I'm gonna pick this one, Space Invaders at retro arcade. And yes, there we go. I love that. As you can see, the hero section takes up a full page. So the user can see in one go who we are, what we're about, and they want to find out more about us. They'll click on this button. You can see how that's looking on mobile. Mobiles really good is moved the top with the text below. If you were to open out and your mobile phone, that's a nice introduction to who we are and what we do. Work on your own hero section and either follow exactly what I've done here. We'll give it your own personal style and make it even clearer here than this. Okay, now I want to scroll down and work on the next section. This is where I'm going to highlight all of our latest blog posts. Now the background here is yellow. I think I like that being yellow. I like the way it kind of scrolls from the white at the top to the pink to the yellow. This title talks about favorite soaps. What we don't want that we want to talk about video games. So I'm just going to paste this header in. You can choose whether you want it left aligned, centralized, right aligned, I think centralized here because it's going to sit on top of the latest posts. Don't think we need that space of them. I can delete that. If you actually want to just play around with the height of the spacer, you can just play around with that one here. Make it smaller, make it bigger. But I just don't think we need it. So delete that. I think this does look cool in the black font. But I'm gonna see if I can just play around with the color of the whole thing here. So what it's on at the moment is light one. I think I want light to yes. Where it's gonna give me the pink header on top of the yellow. I think that looks really cool. In terms of format. Well, I think we just needed a little bit more breathing space above this here. I think it's just going into that headline too fast. So let's just make it, customize it and make it a little bit higher. Maybe let's say 40. Yeah, and that's a bit more breathing space there. Now, what we have here, well, these are just images with text. We're gonna drop our blogs in there. And then this button on that to get through to all blogs. So let's just edit the text in here or blogs. Then make, I go through to the blog page. Save. Okay, so what we've got up here, I want to delete these and I want to add in a whole new section. So let's delete, delete. Delete. You can see with each one it kind of goes full width, which will be too big anyway. But what I want to do is add in a summary of all our latest blocks in Squarespace, very user-friendly. If you want to add something new, you just click on the Plus where you want it to be. So we can go above something below something. So I want it to be in here below the title. So I'm going to click the plus. And these will show you all the different options that you can drop in here they have this very cool scrolling block thing. You can just put in text, image, button, video, look through all of these, have a play around with them. See what you can do for your own website that's really going to work for you. But what I want to drop in here is a summary, that's a summary of all the latest blogs. This will drop in, and that doesn't look cool yet. But if we go select a page, I'm going to choose the blog page. There we go. That's now changed to the three blogs that are already entered in by Squarespace. Obviously again, these are about soap and DIY hand sanitizer, not what we want to write about, but you can play around with the display of everything here. So let's go back. So now we're saying about primary metadata date posted. I don't want that to appear that you can just turn that off so you have nothing there. Well, you can choose something else. I'm going to choose category, which at the moment doesn't show you anything, but I'll show you how that's gonna work later on. Secondary metadata. Well, you can say who the author is, who wrote the post. If you want to location how many comments is had, whatever is relevant to you. But I think I only want one thing in here. I want the category. Play around with it yourself and see what works. Now design. Again, we have a few different options. Carousel. That's kinda nice. List. That's a bit messy. And grid. That's kinda quite cool. But I think I like the carousel one. I like here is the way the way you can have more than three items and people can scroll through. So let's just change this to more items and you can see on the screen. So let's change it to well, all of our posts. So we'll change it to 30. As you can see here, we now have this little arrow. So you can go back and forth between latest, post, oldest post aspect ratio. Let's go for a square image. That looks cool. You see a little bit more texts, small, medium, large, maybe large. Then alignment. I think I like centralize there. Does bother me is this little thing at the top that says featured header text. Let's just see if I delete that. Yeah, that's gone. Only thing that needs to be there. Then the elements, that is what we're going to see. So we see a title, featured image, exert, read more link. That's quite cool. People know to click on that. It'll take through to the post. This is where we've chosen category. You can have that below the content. I'm going to choose above title. What will happen here is the different categories that we're using for our blogs. So they're going to be categories such as 1980s, 1990s, maybe Nintendo, Sega, arcade, that sort of thing. So people know at first glance exactly what kind of post this is, what kind of game it's talking about what kind of errors from. But we need to add those in. So we'll do that a little bit later when we work on the blog page. Okay, So this is actually looking really cool. Now, only thing that bothers me again, this little space here, I don't think we need that taken out. Yeah, I think I just like it the way it goes straight into all blogs from the bottom, I'll either way this is all centralized as well. Only thing is I can't quite see everything all in one go. So it's a little bit too big. I can make the images smaller in here, but I think what I want to do is change the width of the page. So again, let's go to edit section. So I'm not editing a single element in here. I'm editing the whole page. If you wanna do that, just click away from any elements. So this empty space on the right click on that Section. Content width at the moment that's at large, so it's filling the whole page. Let's change it to media. Yeah, that looks pretty cool. I like that. I can play around with content alignment to the left, put it to the right, but obviously centralized is going to be much better. Then it's almost all fitting. I think just some of the fonts are a little bit too big in here. So let's go up to the header again. It's on heading to at the moment, if we change that to a heading three, yeah, that's much better. It's just a bit more subtle now. Then maybe the font sizes in the summary. Let's edit that. What do we choose for that one? Maybe I chose too big. We had large than way media. There we go. Now what you can see is the perfect display on a website page. What you want for each section is to be able to see everything all at once. That's the way people read what it's all about. So let's see the title. They can see the latest posts here. You can scroll through this and change which blogs are appearing here. Or they can click on this button and go through to the whole logs page. Maybe one more thing. This is like a little bit too big compared to everything else. Now, what I wanna do is change to a smaller size. So at the moment is on the primary one. See what secondary is even bigger. Yeah, there we go. Much more subtle now, I think it works good having the big one up here. Smaller headline, smaller text here, and then all blogs, love it, That's perfect. Now, one thing it's always safe to note should have done this after the first section as well. Always click up on here and click Save. That just means everything we're working on is now saved. So that if our computer crashes or something, we don't lose everything we've been working on. So make sure you always click on that as you're going through. The other option you have in here, let's say I've written something in here. Best website in the world. Well, I don't want to say that. It's been a little bit arrogant. So what I can do here is I can do an undo and redo foot press undo. It takes out the texts I've just put in and then it's gone. But if I've taken something out and I might actually want to bring that back, just press this one a few times and it will redo everything we've just done. Even though it probably is the best website in the world, I'm going to take it out. There we go. 7. Web Design: Homepage B: Now you can take a look at what is already here and you can play around with the sections that have been set up for you. And you can go in and you can edit everything. So we have some text here, some more text than in this one, just some images and it's all grid. But if it's not really going to work for you, while then quite simply makes sure you're clicking on the section and delete the whole section. That means it will no longer be there. Can make an error. Feel free to undo or redo if you don't want it. So you can play around with the preset parts of the template, or you can add another little section yourself, and I'll show you something very cool here. So here we are hovering between this yellow section and this pink section. I'm going to click Add section. This will show you all of the pre-made options that you have throughout Squarespace. And there's some very cool things in here. This is showing us headlines. So different ways of having an image with text on top of it. This one with a little black border on it, with a white border. You can play around with this and this is just taking all of our preset fonts that we've decided on all our colors. So you can see how it would look for you. We have a few other things in here, how to make lists, images, quotes, et cetera. That looks very cool. But yeah, just have a little play around with this yourself and see if you can add an extra couple of elements that I'm not using here and make it look super cool. What I really want to add in here is a headline section. I just saw that I like this one with the black border. So what I want is to have a background image with some cool little text on top of it. It doesn't need to have a call to action. It doesn't need to have a button on it. Just another thing that just says who we are and what we're about. So let's drop that one in. And then I like what we've got here in terms of the headline and the small bit of text below it. I don't want this button to be there. So it's going to delete that one. Yeah, that looks cool. Obviously the image that are not appropriate for what we're doing here. So let's go up here and edit this section. Again, background. This is preset from the Squarespace template. So let's replace that. Upload another file. What I wanted here is an image that shows off another different side of arcade machines, pinball machines. So I've got a really cool retro pinball machine image here. Let's drop that in. Yeah, that looks great. I like the way the texts sits on top of that. The problem with this is the image that I've got. It's got quite a lot of sort of light and dark contrast in it. So white text and then on top of it doesn't really work. But that's cool because when we're in this background section, we can add an overlay opacity. So here you can see it's set at 15%. If I play around with it, it's taking the black that's in the background here already, and it's laying over the image. So what you do is you still see the image, but you can read the text that's on top of it. So what I want is something somewhere in-between maybe 50 per cent. That's I think 40. They've been 35. Yeah, I think you can go 40. I think you can still read the text on top of that and still see what the images below. So let's click out of here. Now I want to enter some texts that's about playing pinball machines. Well, I just thought of something very cool and Quirky, which comes from a song, I think by the WHO. I'll show you what this one is. I'll paste it in here into heading one. Sure. Plays a mean pinball. That does look really cool. It's a bit too big though. So maybe let's change it down to heading two. Yeah, that looks much better. I'm kind of looking at this text now though, I do think that the line spacing is a little bit too low. So what I'm gonna do, just save this page. Go back into Edit. Then I'm gonna go up here to site styles again. Fonts, headings. I think it's just this line height. Let's put it up to one maybe. Yeah. Okay. That's a bit neater. Gives the text a little bit more breathing space so they're not sat on top of each other. Okay. So let's go back. Close that one. Then, below the title here, let's put in another line from this song. I ain't seen nothing like him in any amusement who'll less bold it up. Let's move to take the ball out. Yeah, I love that. That looks really cool. So here we have another whole section that's really easy and fast to make because we're using the template where we have a background image, the black border with some cool quirky little text on top of it. Okay, So save that. Go back into edit. Okay, so we have the hero section going through to the About Us page. Best games. Blogs. Then there's cool, quirky little image. And then one more section that I need to fill up at the bottom. I just want it to be about the contact page so people will know that we want to be in touch with them. This here, look, it looks quite cool. It could be used for that. But again, I think I'm gonna go add a section. I think I saw something in here that I think would work in terms of the colors, everything that we're using. And that's this one. The way we kind of got like an image on the left with a text box next to it. So I'm going to drop that one in. Okay, this is looking cool, but let's just play around with the colors here again. Colors. The pink back in. Oh, that's great. And that's changed the color of the text in here as well. I like that with a white background with the pink text on top of it. That's cool. Okay, and then image. Let's edit that. So again, going to replace that with one of my own images. Let's see what we got. Mario Luigi jumping. Yeah, that looks cool. I like the way that we've kind of got like a bigger image here now. And it's now centralized with the text box on the right. So let's just change the text in here. This window. Rather than make it stand out. I want to say Mario, Luigi, heading three, I think is a good size that gives us a bit more breathing space at the top. Then it's going to copy in some texts that's more relevant to what we're talking about here. We want to hear from you, we want to know which are your favorite arcade games from the eighties and the nineties. Do you have the best score on Donkey Kong? Let's see if we can be you. Then this button down here. Get in touch again. And I want that to go through to the contact page. So over here, get in touch. It's through to contact. Save sessile setup. Okay. Now that's great. I love that section. Now. Gonna get rid of this section below. I think we need that. Where did this section below? That brings us down to the footer and we'll work on that one next. Let's just save it again. Do think like the spacing is a little bit off here. I think we got kinda too much space at the bottom, not enough space on the left or the right. So let's just edit that one quickly. So go Edit section. Then content width must kind of too small. That's kinda two bags. Let's do another custom one. Somewhere in between the two. Let's see, maybe 90%. I think that works, just gives it a bit more breathing space. So when you're looking at the whole page, we see Mario jumping and then we see all the text together in one go. Okay, save that. One last section to have a look at on the homepage is the footer. Now obviously the footer, similar to the header, it will appear at the bottom of every single page. Let's edit that one. You know what, I already liked the yellow going on in there. But there's just a few elements in here that I don't want to, I need to edit newsletter. We don't have one of those. Get rid of that. This image is more soap, get rid of that. Then this text over here, well, these are links jumped up. These are links to all of the pages on the website. First of all, well, the positioning of that isn't quite right. You can see here we have two different columns. We have a column on the left, a spacer, and a column on the right. What I want to do is play around with the width colon. And you can do this anywhere on the page with any element. Literally just get your little arrow on there and just drag it. Drag it to the right. There we go. That looks cool. Then with the text, I'd rather that was centralized. Not just allows me a chance to just drop something different over on this side, but also the text here. Well, most of that's not relevant. That's delete some parts shop. No, thank you. Journal well, I should say blog. Logan, delete the rest either side. Then these are just all, this is just text with links in it. So that's why it's kinda bright pink and has an underline under it. If you want to edit any piece of texts and Andy in or take out or change a link, highlight the text, click on this little icon over here, that link, one. That will tell you what link is being used in here. You click on your cog. Again, do what we did earlier on. You can go. To an email address. You can go to a web address file or a page, obviously a page without one called journal blog, where we want it to go. Okay, So blog about and contact, same as we got in the nav bar at the top. Just different ways of users navigating through your site. Let's go apply. And then one more thing I want to drop in here. Let's just see something cool and quirky. In this little pop-up. I did like the look of this little thing earlier on introducing the scrolling block. Let's see what that looks like. Okay, this is cool. So what we'd go down at the bottom here, some texts that scrolls from right to left. Sure. I can change the direction of that. Yeah, we can go in that way. Let me change the size of that. I think kind of quite big mediums, pretty good speed. Yeah. I think the slowest one is better so you can read it. But in terms of content, what do we want in here? I don't want dream it and this little wiggly line. So let's change that to GameOver. Then I like the squiggly line, but I want another word to be in here. What happens when it's game over on an arcade machine, you have to insert another coin. Then kinda like this little squiggly line. So actually I want another one of those. So click on this one, duplicate. Then these little dots on either side that allows you to drag it up and down. So there we go. So now it's game over. Squiggly line, Insert Coin. Squiggly line is a bit slow. Maybe even the fast phone. Yeah, I think that's better. Okay, so that looks really cool. I love that. I don't want this spacer and other space, right? I need there we go. Look at that. That's a cool way to end the website with our footer. It says GameOver, Insert Coin. And then parts of the website over here on the right. Only thing is I think I want it to go the other way. Yeah, Insert Coin game over. That works much better. Wave intensity, you can play around with that and make it a bit more wobbly. All the way up on that. One bit crazy. I kinda like it straight to be honest. State without whatever you wanna do with that. But putting something like that, It's a cool little element that Squarespace have bought him. So save that. Now that this has saved, let's take a look at our whole homepage. Click on the little arrow. Here we have a very cool little header section. Cool little intro with routers. Best games, 85 to 95. I like that little animation as that section comes in as well. Another cool little animation fading in and call it an image with text on top of it. On that one. Yeah, I love that little animation as well. Mario, Luigi getting touch. And then I'll footer at the end. Game over insert coin. So there we go. The homepage is now complete. This is looking great. It's looking very quirky, very bright, very cool. And it says What we wanted to say about retro games from 85 to 95. And that's all done. However, I think there's a couple more cool little things we can do with some of these sections. So let's talk about that one in the next lesson. 8. Web Design: Background Animation: I hope you found the first part of the homepage less than very easy to follow and that you already have an awesome looking homepage yourself. And you've also thrown in your own little style here. I'm really happy with what we've got on the homepage so far, but I just want to show you a few more cool little things you can do just to make each section stand out that extra little bit. So let's start with the hero section. So edit section. What we're going to look at here is the background. We briefly looked at this earlier on saying you can add a background image or background video or this one, background art. Now this is something that comes with Squarespace. What you have is all these cool little animated sections that really give some real character to that background. Some of them are a little bit crazy and can be difficult to read the white text on top. This one looks really cool. Just some little white dots flying around in the background. But the one that I really like, this one at the bottom here. What it's doing is trying to create a 3D grid with different colors so that jumping in and out and got a very subtle animation style to it. The beauty of this one is you normally have three main options you can choose from. That's a big one, small one, super small one, kinda like this. So what I wanna do here is get the colors right, that's not really working having the yellow and the pink together because I can't read the texts on top. So let's start with the black. There we go. That first star, that looks amazing. I like the way you kind of get in this glow of pink flying around. That's very cool. But I'm trying to go for something a little bit more retro eight bit eighties video game style. So let's see what we've got here, shape and size. This way you can play around with it a little bit so you can change the size of the boxes that are in there. So that's a really small, tiny 11 times the size, two times the size. I like that. That kind of represents more of that sort of 8-bit style where they didn't have too many pixels to play around with. So let's stick with the tube. Then motion, well, this is the speed of the movement here. Have it fast or slow? I think slows to be honest, because I don't want it to be subtle. Then this is a fun one. This placement, pixelated or turbulent. Let's see what they both do. Pixelated though. Well, there we go. That's a lot more AT style. That reminds me of Super Mario from the original Nintendo. And yeah, I really liked that. I think that looks really cool and just adds that extra bit of character. The only thing is I think the contrast between the pink and the black isn't quite right. So let's just go with this dark color. You can click on this. You can choose something from your palette August going to custom. Then we can really play around with the color here. So what I want is to look us a darkish pool maybe let's see what we got here. Yeah. Yeah, that's better. Maybe even a little bit darker there. Know, a little bit closer to the pink, I think. Yeah, that works. I love that. Then that's close this little window where you take a full look at that. Yes, I love that. That has a real retro games style. And that's another little step up from that plain pink background. We had that. Okay, let's scroll down. I do really like what we've got here. I kinda like the plain yellow background to be honest. However, I saw something around. I don't want to throw that in here as well. It was this scrolling block. Really like what we did in the footer with that one. And I just kinda want the very small, subtle on the way. It can just sit below all of the blogs there and dream it, that doesn't work. But I'll think of a cool little phrase from one of my favorite games. Finish him. Mortal combat. If you remember that one. Yeah, there we go. It all still fits in the page and I think that just adds a nice little cool subtle elements to the page. Okay, Now the next section, but I really like this. I don't really want to do too much with this one, but I think just like some sort of subtle movement on the background image would be kind of cool actually. So if I go in here to edit the section, background, as you know, is the image so far. What we've got here is Image effect. This is something that can just make the image move in the background. So what do we got? We've got liquid. I like that. Film grain. That's kinda cool. That gives it a bit more of a sort of eighties style. Looks like a really old TV from the eighties. Refracted lines well that it's kind of, it's kind of broken, the image sort of thing. These one of these animations, it kind of changes. You move up and down through the images. I really liked the first one to be honest. Liquid. Yeah, I kinda like that just as I come down into this section is kinda go that way instead of movement thing got on the background. Very cool. Okay. Now this one, I want do something a little bit different here. I think the background is too plain. So let's add an image to that one. Upload file. I've got this really cool, sort of eighties sunrise. Yeah, I think that looks white, it looks super 80s and that looks really cool behind Super Mario jumping around. It's just a little bit to follow on. So maybe let's just play around with the opacity again. It's bringing it all in, in the pink that was there previously. So the image is still there, but it's just kinda like sitting behind this pink overlay. Perfect. Okay. And one last thing, Let's play with the footer. Think I want that same animated grid thing going on, but I want to do it in a slightly different way. Let's choose that one. Then let's choose the smaller grid one that I really liked that. But again, to full-on says play around with the colors. Let's start with white. That's cool. But then I liked the yellow. So let's just go back to the yellow. Yeah, that's very cool. I think the black text fits really well on top of that. Yeah, that's great. Then shape and size. Let's just keep that the same size that it is the emotion. Well, I kind of want it to not move. So let's just drop the motion down to 0. Yeah, that works the way. It's kind of like still, I like that now the way it's kind of an animation, but it's not animated. It's just a really cool. So the grid background, I think there's gonna make the yellow little bit darker. Yeah, there we go. That looks cool. I love that. Okay, so let's save this one. And then let's take another look at the whole page live. I love this subtle animation, very sort of 8-bit style in the background there. Then this one is still looking cool. Finished him. Amazing. Just run along the bottom. There are love that, That's very kind of quirky. That looks much cooler with Luigi there, just gives it a little bit character in the background. That's the footer. So yeah, that's just to show you loads of different things you can do with the background of your homepage. And they, each section just stand up a little bit more, a little bit cooler. So I hope you've had a good play around with this homepage. If a following my full direction or taking your own style and your own content and playing around with those backgrounds and making them really stand out. I can't wait to see what you've done with this one. Now we've finished this lesson. Let's move on to the remaining pages. 9. Web Design: About Page: Okay, So the homepage is now ready. I hope you've been following along with this step-by-step. And you have your own homepage and you're really happy with it and it looks really cool. I'm looking forward to seeing all of these. Now the structure and design of the website is all sorted. So what we need to do now is use that on all the other pages. Come in here, click on pages. The first one we're going to edit is the about page. So obviously an About page is the page that's about you just telling users who have only just visited the website for the first time, what you're all about. When you come into the editor, you can see how it's already been built using the template. We have another full page intro with some intro texts and a cool looking image with our blue being used as the background. Then we have more text on top of the image. Then an extra section at the end explaining a little bit more about who we are. The best thing you will see about coming to this page though, is look your footer. That's exactly how we set out before and the header exactly how we set up before. They are the same and consistent across every single page on the website. So when we come here to edit, we are editing this section, this section, and this section. And obviously we can add in an extra section if we need it. But I really like what we've got at the top here, so I'm going to work with that. So first of all, let's change this text at the top. Just pasting in what I want to say, keeping the classic arcade alive since 85. As you can see here, is already using heading to heading one. That's way too big. Heading three, smaller, probably a little bit too small. I think actually heading to was perfect, so we'll stick with that. Then below here, a little bit more introduction text that's using paragraph two. I'll paste them what I've already written there. Then below that I'd like another button the same as we had on the homepage. And I want that button to take users through the blog page. Again, it's just additional navigation that they can use the nav bar at the top or buttons on pages, different ways of finding the pages that they want. So to do that, come up here and click on Edit. And then go to link over here and go on button. And you'll see that that has appeared below with the main texts there. What's I want to say here is read more and make it go to our blog page. As simple as that. Then one more thing we need to change is the image. This is the image that came from the template. Let's go to replace upload file. And I'll use this image here, playing time crisis. Another image I have set up in advance. That's looking really cool. Just one little problem. There's a bit of a space here. We'll just take that out. There we go. That was just a space in the text. Now everything lines up better. Same space between here and there. Yeah, that looks great. I love that. However, the problem is it does sort of fit into the page, but not quite. As you can see, the button that doesn't quite line up with the bottom of the image. So I think this text is too big, so let's change it to a heading three. There we go. Now it's all centralized next to the image. And that just gives it a little breathing space up here and here. When a user visits the page, they see everything in one go. And I love this blue background, but as we did on the homepage, Let's see if we can bring in a little bit of a cooler background. So let's go up to here and click on Edit section. Let's go back ground again. I'm going to try some more art in the background. Again, when you are building this page yourself, have a good play around with these and see if you find one that you like. That looks cool. And I loved the yellow and the pink, but that's not gonna work here because you can't read the texts on top of it. So let's just go to the Filter again. First of all, well, let's change one of the presets here. You can choose a custom image if you want. I love these icons that they've got in there. And out of all of them, this one here, the star. Well that feels the most kinda 1980s, most appropriate for an arcade video game website. Again, can't really see the texts and stuff. So let's just choose an image ten Tia. Well, let's just make that white and then make the background color blue. But again, I can't quite read the text on top of the white icon. Let's make some edits to this network. Let's scroll down. First of all, scale the number of images, but there's too many there. So what I'm gonna do is customize that. So small, medium, large, or customize. I'm going to drop it right down to much smaller. Let's just say, let's just change that to two. And then the number of images. Let's drop that down to a lot less. Sex yellow. That's very subtle. You can kinda see one floating up here and one behind here, one behind there. But I still can't read the text on top of that. So let's make another edit. Let's go to filter and play around with these. And this will give you another sort of overlay on top of the icons in the background. So play around with them, circle cross stitch. That's quite cool Actually. It looks a little bit more eighties cube a really like that. Then this one, there we go. Gradient Circle. Don't really know what that means in terms of design and display. But I've got what I want here. So I can see the little star floating, but I can still read the text on top of it. What I've got now is this sort of like gridded a bit background sort of style. So that's brilliant. Only thing is, I don't think I want it moving. So if I change the wave speed is put that out to 0. Let's see what happens. Yeah, there we go. That's not moving anymore. I love it. There we are. That's cool. Luck. It's a very subtle background to add in here, but it just gives it a little bit more character and represents what we've done elsewhere on the website. Okay, so that's that section sorted. Let's just see what we've got in the other two sections. Well, to be honest, I don't think I need much more text in here. I think I want to just briefly explain to people who we are, what we do, and then send people through to the blog page. So what I'm gonna do is delete this section. So hover over the section. Remove. Now we have this at the bottom, which looks very cool and I like this style. Totally not what we're trying to do here. I don't know what that image is, some sort of Salt Lake or something. So let's just change that image to one that we've used previously. Like a background. Replace. I'm going to drop in that same background I did on the homepage behind Super Mario. Yeah, that's what I want. So I kinda just want to have this sort of brief introduction, sending people through to the blog. And then just a cool little sign off here. I can't really read the text there. So let's do another color overlay on top of the image. Background. Overlay opacity. Let's just crank that right up. Okay, that's nice and high. I love that, but I kinda don't want that to be Blues. Humans are kinda like the blue up here. And then I want a little bit of contrast, maybe turned into the pink. Let's see where we can edit that. Let's go to colors. Is because it's on dark one here. If I was to choose bright too. There we go. Now I'd like to contrast from one bright color. We started with the whites, we go into the blue, into the pink, and then into the yellow of the photo. That's great. Now I just need to edit the text. So what I'll actually do is delete that bottom line. Then they kind of put in some extra little dashes here, some little lines. I don't want those. And I want it to say Good times. So I've written IN or just centralize that. They're taking it back to paragraph two. Actually want to use in here. It's the same font we're using up here for game over. I think it just another quirky point that we can drop it in. Let's highlight that over here in the texts. Choose monospace. As you can see that that has changed it to the font we're using at the top here. And it says, Good Times. Problem is, well, I can't quite read that, so we just need to change the size of that. That is done in our Fonts Setting up here. So first of all, let's just save this page. Scroll down to what we're looking at. Press edit again. And then come in here to fonts. I'll click on the miscellaneous one here, which is puffing arcade, the font we are using. We've chosen the font-family already and we have the weight. It's this one here, size based size, that's very, very small. Let's make that much bigger. Seven. I think seven is good there. Yes, I really liked that back close. And now we're back in here. So this looks really cool the way we go from this little introduction text. Into this background image with good times on top, into the flutter. You kinda want just one little more quirky thing though. I'm going to drop in a little image or little icon above this text. So click on the plus and then choose image. And an image, again, upload a file. And in here I have this little PNG. A PNG image is one that doesn't have a background behind it. And it's just an icon of a space invader. I want to drop that in above the word. Good times. Yes, I love that. That looks really cool. It's kinda floating in front of this sun image there. And then it says Good Times below him. Only thing is I think that makes this section a little bit too big. So what I'm gonna do is add in a spacer either side of this image. Again, click on your plus and choose spacer. And that will automatically drop the spacer in on top of the image. But what we wanna do is put one to the left and one to the right. So first of all, let's just duplicate that and then another spacer. So now we have two spaces here. And then hold your mouse and just drag it down to the left of the image. As you can see here, there's a long blue line dropped the space and next to the left of everything on this page. But we don't want that, we just want it to the left of the icon. So bring it in a little bit until you see the shorter line. You can see that it's the same height as the space invader image. So just drop it there. There we go. Now we've dropped in little spacer next to the icon. Now I'll do the same on the other side. Smaller line, there it is. There we go. And I can even make that slightly smaller. I think I actually liked that size, but if you want to drag it in to make it smaller, just drag the edge of the box there and bring it in left or right. Actually, I think I like it that size. I mean, that's a nice little space in-between good times and the Son. Yeah. Okay. We'll leave it at that size. Now I have an About Page, little introduction saying keeping the classic arcade alive since 85. Some short texts about who I am, what I am about. A button that takes users through to the blog page. And then just a quirky little sign off. They're saying, good times with this very eighties arcade machine icon. So please follow what I've done here. Take your own About page and put it together in a way that you feel works best for the website that you are building. You may want to add in some extra sections there to go into a bit more detail. Or any other sections that sends users to other parts of your website. But when you're all done, click up here and save. When we come back here, you'll see how the page looks on desktop. Let's just have a quick look at how it looks on mobile. Again, we have the same intro header here. I really like that. Then the layout here is perfect. Starts with an image goes into the headlines, scrolls people down to the Read More, and then look at that Good Times. That was great. 10. Web Design: Contact Page: The next page I want you guys to work on is the contact page. This is a very important page on any website people can get in touch with. You, Talk to you, throw out ideas for your blogs for instance. So let's click on Contact. Let's just take it back to desktop. This is the page that's come with the template. Quite simple. Rarely contact me. Form for people to get in touch with you, an image. And then the footer, very straight and simple and you definitely want to keep it that way for your website. Let's scroll up and go to edit. I do like what they've got here, but I kinda want to simplify it even more. So what I'm going to do is find another contact section in here. At section, Let's see what we've got. Contact perfect. Here's a couple of other very simple displays for you. You can have it all over the top of a background image if you like that style, use that on your website or just some text with a contact button below that would take people through email address. But I want to keep it simple. I just don't want to form. I just want something simple like an email address and telephone number. Let's drop this one in. Yes, I like that nice, simple contact us. Email, telephone, a dress, and then some links through to social media. So I'm going to use that section. First of all, let's just delete this section. Then. Well, it looks fine and white, but I kinda don't want it to go for more white header into white section here. So let's edit the whole section. Two colors that we've used a yellow backgrounds, we've used pink backgrounds, blue backgrounds. If you're happy to continue with that on your website, do the same. However, come on up, black background. I want to just keep it simple. Now means I have a little bit of variety across the website still using the same structure, a different background colors. I like that. Let's click out of here. Then let's change this image. We'll go over here and replace the image upload file. This is the image that I've chosen to use here. This is cool. I love this. I love how clean and neat it is. I don't think it needs a crazy background because it's more of a call to action to get people to get in touch with you. Anything I'm not comfortable with here. Rarely, it just these curved edges on the image that does actually look really cool, but it's not a style I've used anywhere else in the website. So from a consistent point of view, let's go to design. As you can see, this has a corner radius. Let's just put it to 0. We go there, we have the Image, Contact Us, the e-mail. Just change that to the correct email game over my telephone number where I live. Not New York, but that's fine for now. And then down here, well, I don't have a Twitter page, so let's just delete that one. And then this goes to Facebook and Instagram. And again, these are just texts, links, so hover over the one you want, Instagram. Then you can go in here and we can change that to the game over Instagram page. Do the same on Facebook dot com. The e-mail address, first of all, highlight the word, come up here to link. As you can see, it's already saying what the email address is, but where's that gonna go? Click on here. And we're going to type in your e-mail address there. Then this is if you want the subject to appear. So we'll just say then body, CC, BCC, optional, just leave that as optional. That's not important here. Save that. Apply. You see that's underlined now because that is a live clickable email address so people can contact. Okay, so that's perfect with this patient. Keep it neat and simple and clean. Let's say that. Yeah, that's simple. I like that little animated blend in there as well. Let's just take a quick look at how that looks on mobile. Perfect. Yes, I like that all appears in one single page. Nice image explaining who we are, what we do, and contact us with the details, different ways you can contact us. Okay. So we now have a homepage about page, a contact page. There's just one more page to finish with. Now, the blog page. 11. Web Design: Blogs: So here we are in the blog section of the website. I've left this one till the end, as there's two different things involved in the setup of these pages. First of all, the overall blog page, and then each individual block. So let's start off by taking a look at the overall page. Let's first just switch it to desktop. Then view full-screen. So this is the overall setup that came with the template. And I really liked this displayed where we can have an image on the left, some meta description at the top, the title and then introduction texts there. Then the next one, image on the right texts on the left, which left tax rate. I liked that display. However, as you can see from this, the font sizes are not really working here. So what we're gonna do is start off by fixing all of that. Let's click up here and then edit the page. So I want this to be much smaller. Maybe this smaller as well. What I want is this little space here to disappear on the edge of the images touching. If we make this text smaller, hopefully that will work. Let's click on Site Styles. We'll go to fonts. Then best way to manage all of this is to click on each part of the page individually. At the moment that is showing the date of when the blog was published. We will change that in a minute, but let's just make that much smaller. So I'll click on this one. As you can see here is picking up the miscellaneous texts that we set up for the About page, which was great at that size there, but we don't want that to be this size here. So what we're gonna do is click on this and change it to costume. It has automatically picked up the same font, family, weight, and style. However, it's this matter size. That's the one that we want to drop down to be a much smaller. But if we change it here, it will not change it on the About page. Because this is using a custom style just for this element on the blog page. So let's drop it on a much smaller, maybe 1.51.6, maybe 1.7. I like that. It's kinda small and subtle, but it's still there in the same font. So now the title, this is picking up heading to, I guess what we did on the other pages. We change that to heading three just because it was a bit smaller. There we go. That's much neater now. And as you can see, those two images are touching. What we have now is the perfect display of image, title of the blog and a small introduction about what your blog is about. However, I still just want one more thing here. I think from a user point of view, it's better to have a little Read More button below so that users know exactly where to click to read this blog. So let's go back. So I'll come up here and click on Edit section. If you want to in here you can play around with the different layout. You can have them side-by-side, so they sit next to each other. Again, is brought back in the original font sizes that were there. And choose the one you want and then you can edit it. Masonry blog. Well, that's the way we have the square image at the top with the text below. That looks quite cool. But I don't like the way that things don't really line up in this. I'm gonna go back to what we had originally, the alternating side-by-side width, full, unhappy with that. Images. Well, if you want them slightly smaller, play around with that here. But to be honest, I'm happy with the square. I think that's a nice layout, gives a nice bit of breathing space at the top and the bottom here. Then again play around the text alignment here, whether you want to show the excerpt or whether you don't want to show the expert, but I definitely want that in there. Then read more link. That's the one that I want. Show that. There we go. That's, that's underlined. Users know that click on that to take them through to the block. This is perfect. I'm very, very happy with the layout of this page. As always, you can change the color of the background here as well, come into colors if you want it in the yellow with black text. That also looks cool. Whatever you feel works for your website based on the color palette that we chose earlier on. But I'm going to stick with the bright pink. This is the main part of our website, and this is the main color, my primary color that we're using in the header nav button there. So I'm going to stick with that. Okay, So up here and save. What comes with the template is for blogs that have already been made. We don't want to use these. We're going to delete them. But first of all, let's just click on the first one and see how it looks. Okay, so again, this is picking up the initial style and initial design elements from the templates. I'm going to have to change a few things in here. As you can see, it's using the original font that came with the template. So let's come in here and edit. Click on here to edit the section. Same options in here as always. If you want to play around with the width of this page, come in here, set to narrow. You can have medium, even wider the way it fills the full page. If you want the text alignment, if you want everything centralized, choose that in here. I like the way we had it narrow, and I kinda liked that text to be left aligned. I'm going to put that back to how it was. I'm happy with everything that meta-description. Well, this again, it's using the date. But what I want to do here is the same that I did on the homepage. I want it to be the catalyst. When I click on that, nothing displays yet and I'll show you how and where and why. You should change that very soon. But I want to take out the date. I don t think the date that this was posed is important for my website. Maybe it is for yours. Choose what you feel works best for your website. And I'm going to turn off date. It looks blank at the moment. But when we put in categories that will display, Again, colors, change the background in here if you want to choose what works for you, but I'll just stick with the pink want to have on the blog page should still display that way when people come through to my blog. Okay, so I'm happy with everything there. But what I need to change is the font that is used up here, the body font. I'm very happy with that. That's just picking up the regular paragraph. However, this here is using a different font from the old original template. I want the same heading font we've used elsewhere on the site. So again, I'm going to click up here on site styles, go to fonts, highlight this text, and then go down to assign styles. So as you can see here, this is what we edited earlier. It was the site title, the mobile site title, and the site navigation. These elements you can see up here, what we want to edit now is the blog post. So let's go into title. It's on custom right now, but I want it to be our original headings. So let's change it back to that size while I can choose one of the ones we've already picked, heading three keeps working for me. I like the size of that, so I'm going to keep it as is. Now, this looks great. It's using our regular headline font, regular paragraph font. So let's go back. One more part though was the metta, which appeared above here. Now I just took that out. Well, let's just go into matter. And let's change the font family to the Puffin arcade Chrome one again. You'll see how that looks in a minute, but let's just go back. Metta size while we set that as 1.7 on the blog page, Let's just change that to 1.7 again. I'll show you how that looks in a minute once we set up the first blog. But you can always come back here and change it anyway. So let's go back. Okay, in terms of display here, I'm happy with this. What you see down the bottom here is navigation to the next blog. This will show the title of it and it will go back and forth. And that's using our regular headline font. So I'm going to keep that as it is. The way I've set this one up, every single blog will now appear. This way. It will have the same spacing on the page. It will have the same headline fonts and the same Body Copy. So now I will show you how to add your own blogs to this page. Two different ways of doing this. First of all, we can take one of these blogs is already here and edit it. Or if we want to just start with our own, just click up here on the Plus. I'm going to start by showing you how to edit one that's already there, just to give you a good idea about what is setup and how it will display for users who come to your website. Let's just take this first one here. This is how it looks at the moment. And if I click on the dots here, I can change the settings. So here's various different settings over here and we'll just run through them one-by-one so I can show you what needs to be done. If the blogs of the most important part of your website, make sure every element you add in here is done correctly. First of all, image, well that's an image of soap. We want another video games image to go in here. So remove image. I'm going to start off by writing a blog about time crisis, the shooting arcade game that I loved back in the 90s. So I'm just going to upload this image that I've saved of this game. We go and now exit. This is the sentence that appears for everyone in different parts of your website. So from the homepage to the blog page is one simple, straight sentence that explains quite clearly what the blog is about. So I've already written out an excerpt for time crisis. Time crisis is a first-person on Rails espionage liked guns shooter series of arcade games by Nam Co. introduced in 1995. So it just explains what the game is when it came out, who produced it, uses know exactly what they are about to read. So next down here, this is the post URL. This is again using the URL slug that was previously there, but I don't want it to say soap making process. I want the blog post to say time crisis. So I'll just copy that and paste it in here. Author, well, that's myself. We've only set up one author here. Sourceurl, don't worry about any of that for this kind of thing. Then come into options. Status. This is where you can set up if it's a draft, something that you're going What's up later, or you can set a different date on which you would like the post to appear. I'm just going to leave this one as published here. I don't need to change that. Now let's go back. In here is where we can add in tags and categories. You may wish to add tags to your posts. The categories is the one that I'm looking at here is at the moment, I will only have a handful of blog posts. In a year's time. I'm hoping to have hundreds of them. I want to help users navigate around the website and read different blog posts that are about different areas, different devices. So let's click on categories. What I'm going to write in here is 990s, because this is a video game from the 990s. And then what I'm going to write in is Arcade. This is helping me split up all of my blog posts. If it's from the eighties or use the 1880s category. If it's arcade, arcade, obviously if it's Nintendo or Sega, I'll enter in that category. So when that's done, click back and then come over here to SEL. Again, this is just taking him what was there previously. So let's change the SEO title to time crisis. Then I'm putting in the same excerpts that I put in earlier in the SEO. For those of you who don't know what SEO is, this is Search Engine Optimization. And this is making it much easier for all of your blog posts and your overall website to appear in searches on Google. That is done by changing the title and the description to something that includes words that they would search for. If they're searching for a post about time crisis that's in here twice. So you're more likely to shop in Google searches. Social image. This will happen if someone is sharing your blog post on social media. You don't need an image here, but you're gonna get more clicks if people can see It's about as well. So let's add in the exact same image that we just used, ton crisis. Here we go. Don't worry about share and location. That is not important for what we're doing here. So let's save this one. Okay, So when we come back to this page, you will see that the category is now appear above the blog title and they're using are very quirky Accent font. So the backend of the blog post, that's all setup, that's all ready to go. What we need to do now is edit the whole post. So click up here on Edit. Now, obviously the main thing that's wrong here is the title of the post. Let's change that to time crisis. Then here we have a video. I kinda don't want that video to be there. If I want to do is start with an image. Upload image. Again, just using the same image that we've used elsewhere for time crisis. Okay, That looks cool. So now we have met the description title, intro image, and here's all the text. That's something about soaps again. So I'm just gonna highlight this and just paste in all of the texts that I have written for time crisis. It's added in some extra little gaps here. I'm just going to delete that gap. That gap, keep it all together. I just want to throw him one extra thing which I'm going to do on every post. Want to see this in action. So I'm going to throw in a little video. So I'm going to do is click here. On video. What you can do here is just take the link for a video from YouTube and paste it in here, so simple as that. So if we come into YouTube, Here's a bunch of time crisis videos that show up. So I'm going to choose this one, which is a long play of the game. The video will start playing and then just come in here to share and copy that link that they give you here. And then go back to your website and paste it in here. Searching for that successfully located. And there we go. It's as simple as that. We now have a blog post that's setup perfectly. Image, intro text, video, text. So this one is now set up perfectly come up here to save. Now we've got one you'll see over here now it has the correct title and the correct thumbnail for time crisis. So that's why I showed you how to edit one post that was there already. Now that we've edited that one, I don't want these other three to be here. So I'm just going to take those and then delete all three of them. Okay, so we now have one blog post and then we have two different ways of adding a new one. So click up here on the ad and follow the same directions that I just gave you. So let's put in the title image, main pile of text, and then add another video. Okay, now my Street Fighter 21 is set up perfectly here. So let's save that. And it's still drafts. So come in here to Settings. Follow all the same rules for these parts. You blog is already set up perfectly because it took the name of the title. Options categories, 1990s as well. And as you can see, it's already chosen that category. So just select that one. Don't add a new category in because it already exists. This was popular on Nintendo. So that's a new category. Again, follow the same rules. Make sure this is published right now. Follow the same rules of SEO, social image, etc. And then click Save. And now it displays the Meta description up here. So this is another perfect post. So that's one way of adding a new one. Another way is you can click on here and you can duplicate. You can take an old post that's been set up the exact same way. But just make sure you're aware of the social media, shares the exits, the thumbnail image, everything like that. And just make sure you're not repeating what you've done for another poster. I think that using the plus sign and adding in a new post is the best way to do it. Go ahead and add a few different blog posts. You don't want to start a brand new website with just one single post. Have a few. I'm going to add two more here. And then we'll go through and take a look at how the homepage and the rest of the website is looking. Now we have four live blogs. 12. Your Website Review: Okay, So here I am back at the blog page, the overall blog page, and I can spot a few errors that I've made standard for any graphic designer. Spot a problem, go in and fix it. So first of all, as you can see here, where I have the category coming up at the top here, 1980s Nintendo. It's still showing the date that I didn't want that in there. So let's take that one. I'll come in here to edit, edit the page, see what I've done wrong. So down here we have text alignment, etc. Primary metal content is categories is because I've got secondary metal content as the date. So it show me both what I want that to be empty. If I change that to none, There we go. The beauty of this is when a user comes on here, as you can see, that's actually a link canal. So if someone clicks on that, taken through to another page that shows them all of the 1880s blogs. Whereas if they come down here and click on Nintendo, it will show them all of the Nintendo blogs. So that's why it's really useful to have this on your blog page helps people navigate themselves. So that's one very simple quick fix there. Next one. You may have noticed this at the top here in the nav bar, or every word is kind of like struck through. I don't want that because that almost suggests that it's not the live page, like it's not ready or something. I want the line to just sit underneath it. So I've obviously set up something incorrectly in here. So let's go up here and change the site styles. Something wrong that I've done here. So I'm gonna go over to fonts and click on this one. So this is site navigation. So everything seemed correct Here, the correct font, correct weight, may drop that down. Actually, I think I like the 500 there. The designer thing. Change your mind later on. I think it's this one here, line height. I think that's the problem because I've got it set to 0 and it must be, yes, that's it there. That's great. What I want is just that line to sit underneath the word. So underneath the name of the page that we're on, I think 1.5 there. That is good. Now that I fixed my problems, I'm going to take a look at the entire website. So let's click on the logo here and go to the homepage. This header still, it's great and perfect. This introduction hero looks great. Now here we go. This is where this has changed. Now we have our own personal blogs in here, and you can have your own personal blogs in here to what it's done is it's listed them in date order, even though we're not saying what data it comes up, they are displaying in date order. Meaning, if someone keeps coming to your website every week and you add a new blog post every week. That will be the first one that displays here. In terms of using the navbar up here, that switches between current and older posts. And obviously we have four in total. Now. We have Pac-Man, Super Mario, Street Fighter two and time crisis, and they are in date order. Another great navigation tool to help users search through. Down here, where we have links through to that individual blog posts. You can click on the image and that will take you through also. You can click on the categories to see just blogs in that category. So let's click on Nintendo. This is just showing me the Nintendo posts. I've only done two of those, Super Mario three Street Fighter two, those are the only ones that are displaying, I'm interested in the 1980s. Click on that. Just 1980s Pac-Man Super Mario scale. So let's go back. So this looks absolutely great. I love it on blogs here that we showed them all in one go. Then our introduction image and links through to the contact page and our footer. Perfect, I absolutely love the way this site is looking now. Let's just go to mobile. Full screen. Yeah, this looks great. Here we have the navigation here it shows two blog posts at once and I can scroll back through older ones, finish him or blogs. Sure plays a mean pinball. Switch down to a single portray image. Perfect, but that guy in the middle, Mario, Luigi, He's looking great there now. Get in touch. Then the footer. Okay, that looks brilliant. Let's have a look at the blog page. Also perfect. This line now sitting underneath the word blog. Here's all our blog posts and this text is taken up the perfect amount of space. Category, title, exert, read more and a square image in their breathing space above and below. This looks beautiful. If we click on any blog, you can click on the image, read more or the title. That will bring you through to this blog post showing you all of the content. Then if you want to scroll back and forward through old and new post, you have that navigation at the end of every blog post as well. So we are Street Fighter two. You will see the one before that was Super Mario three after that time crisis. So homepage looks great. Blog page looks great. Let's see About page. Love that little animation there. Loved this background, very subtle, but a nice little extra depth to this page. Read more tickets through to the blog page. Good times. You just saw the little icon just displaying in a cool little subtle animation there. That looks great. So last page, contact, which we can get through clicking on this button or click and get in touch. Now we are another nice intro animation there. No curves on this image anymore, but a great looking Contact Us page with a call to action email address and taking people through to our social media pages. There we go. We now have a beautiful looking website with an amazing, cool animated homepage with lots of action, lots of exciting elements for people to click on. Cool-looking blog page About page and contact page. So I hope you have been following all of these lessons very closely. And I've gone through this step-by-step with me. And you now have your own awesome looking website that either looks exactly like this one or your own brand new personal, amazing looking website. If you do have that, post that here in the project section. And I will get back to you with my feedback on it as soon as possible. 13. Squarespace Extras: So by now, you should have an awesome looking website that you are really, really happy with. We are still just using the trial version. So nobody else in the world can actually see this website, just you. But if you do want to make it live for the whole world to see, very simple. Just click on the subscribe button down here and choose whichever package works best for you as it is just one personal, very small website, probably this one which is the per month, will work for you. You'll see here also it includes a free custom domain. I'll show you what that means. So when we come in here and we go to Settings, click on domains that you see here that says cricket giraffe, H4, dn, et cetera. That is the domain name of our website so far. So if you want to share it with someone, you are sharing this URL. Now that's not cool and it's got nothing to do with what we're writing about here. But if you sign up to Squarespace, you can choose your own personal one, and that's all included in the overall crops. So if I click on here, gets a domain. It will take the title of your website first and show you if that is available as a domain name. Unfortunately, GameOver.com is not available. I'm not the first person to think about that. There are different variations of that available. You could have game over video or even GameOver ninja, but I don't want that. I want to just.com at the end because that's what we're common with. So let's just try something else. Maybe game over log n. Yes, GameOver blog.com that is available. So I'm going to choose that one. So when you have all of that setup, you have a live website and it's using a proper domain name. If you come back into here, you can play around with everything in here, as I said earlier, just take a look through everything, see what's going to work for you. In terms of marketing, you can set up e-mail campaigns. You can work on SEO, search engine optimization, and you can promote this on your own social media. Come in here and you can make some Instagram stories, et cetera. There you go. You now have an amazing looking website that you built yourself using your style. It's live, has a domain name. You can promote it and you can build it up and just build up more and more followers and become the most popular website in the world, or at least the most popular website in the world. That's about retro games from 1985 to 95. Cheers. 14. Thank You: Thank you for watching this whole class. I hope that has taught you a lot about website design. And you now have an awesome looking website that you want to show to me. Wow, if you do, post it here in the project section, and I will get back to you with my feedback as soon as possible. Also, if you have any questions on anything I've covered across the whole class posted here in the discussion section. And again, I'll reply to you as soon as possible. While you're there. Make sure you click on my name and see my whole profile. In here. You will find a few classes on using the Elementor page builder with WordPress that may seem a little bit complex, but I will talk you through everything you need to know if you're looking to build up your web design skills. Watch these. Also. Make sure you follow me and then you'll find out as soon as I upload a brand new class. Awesome, Have a great day.