You Can Make A Beautiful Portfolio Website on Squarespace in 30 minutes (FREE photo pack included) | AJ Burt | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

You Can Make A Beautiful Portfolio Website on Squarespace in 30 minutes (FREE photo pack included)

teacher avatar AJ Burt, Learning is Living Better

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

8 Lessons (45m)
    • 1. Introduction & Project

    • 2. Free Photo Pack from Death to the Stock Photo

    • 3. Getting Started: Research & Templates

    • 4. Adding Content: Setting up your interface, uploading your work

    • 5. Adding Content: Sell Products, Make Blog Posts, and more!

    • 6. Squarespace Design Essentials

    • 7. Deep in Design: Pushing Past Template Limits

    • 8. Congratulations and Thank You!

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

"I have been using Squareaspace for a couple of years now, but this is a great class and provided some insight I wasn't aware about. Thank you!" – Michelle R

One of the most common questions I get from people is how they can get into web design. Contrary to popular belief, developing coding knowledge is not necessary to do this anymore (not trying to discredit the importance of coding, but for many people it is not needed to accomplish their goals in web design). Squarspace is one of my favorite platforms to introduce people to web design on because of its ease of use and professional, well-designed templates.

The goal of this course is to, in as little time as possible, get you right into Squarespace and start designing. We won't be going into a lot of detail – the goal is to show you how easy it is to get started, not to bog you down with information. That said, you will be introduced to some very basic UX/UI best practices and even introduced to how you can use CSS snippets to beef up your design (again, no actual writing of code is necessary).

Meet Your Teacher

Teacher Profile Image

AJ Burt

Learning is Living Better


Learning is my passion. I've always pursued learning outside of traditional academic settings. I've taught myself programming, graphic design, marketing, business planning, investing, cooking, ballroom dancing, yoga, animation, and so much more without a professional teacher and by paying next to nothing. I've used this to turn my degree in anthropology to a career in business and marketing, and it's been so rewarding yet easy to do that I realized I simply had to share it with others. That's why I signed up to teach on Skillshare.

See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction & Project: Hi. My name's a deeper and I'm so excited to be finally sharing this. One of the most common questions I get from people is how do I get into a design or I need this certain website. Can you design it for me? And I usually tell them No, not because I don't want to help them out. Because Web design is actually more accessible than ever to the average person. And I feel like the tools are out there. You really shouldn't be paying for something. You can just do yourself in this class. I'm going to very quickly introduce you how you can use squarespace. Build a portfolio for yourself. You can actually do it and love from 30 minutes. It's not that hard, and he won't need any coding. Class project is gonna be all you have to do it along with the video. You can use the same time, but I do or you can find one of your own. And if you want to create something other than a portfolio, that's totally fine. I just thought that it would be nice, for your users, in particular, have a place to showcase their work, especially on the Web. So that's right. If I did that 2. Free Photo Pack from Death to the Stock Photo: So all of the photos on this website are from death to the stock photo. I actually came across them here on skill share in a project that, actually, their creators had uploaded to one of the classes I was taking. I used their free version for a really long time. The monthly photo packs they send out. And I liked it so much that I ended up actually just upgrading and getting their subscription service. They've actually been very gracious and donated a free photo pack for you guys to use. You can follow the link here to get to it. The password is just scale. Share all lower case, no spaces. And if you like the photo pack, if you like the photos you see on the website be sure to sign up to their monthly email, which is free. And if you really like it, um go ahead and give their subscription plan a try. 3. Getting Started: Research & Templates: So one of the most important things you can do starting off and designing a website is research. And you know, a lot of times this can kind of be seen as the least UNP part of Web design. But it's really important, and you'll thank yourself later because if you don't do this, you'll go to all this work of designing your Web site. And then once it's finished, you'll start looking around at your competition and realize all of these things that you could have done differently. And then you'll just go it end up going back and creating more work for yourself. So right off the bat, um, figure out First of all, what kind of category websites in? So for this project, we're gonna be doing a photography portfolio and just kind of look around at what other people with similar websites are doing. It's totally fine. Teoh. Take other people's ideas and replicate them. You'll find when you start doing this that a lot of people are doing the same thing, and that's OK. Usually when people in the same field they're doing the same thing, it's because something about it's working and copying that is not a bad thing. Uh, you can totally get your own night at any a website by tweaking other things. I think things that end up really distinguishing you in important ways. So I've already gone through and searched on Google just for top photography blog's top fashion lauds and looking around, one of the things I'm really noticing is that a lot of these logs are using grids. Um, which I think it's kind of a really nice look. So we're gonna head over to Squarespace now, and we're going to look and see what templates say that might fit into that general layout . So we're just gonna get started over here and you'll see right away they're these little categories and they actually have a category for portfolio. So let's just click on that and right off the bat will see that they have 123 foot over Thieves, Uh, kind of like the look of this one. How does I have any border around the photos like some of these other ones do on? I like the fact that stretches to the entire screen, and it's the most used to that statement. Um, let's go ahead and click on that in scoring space. You can actually click right on the computer screen and they'll take you to a life preview of the website. So we see that right here is some kind of nice hover effects. When you have a images struck out some of these other beaches, it's got some pretty standard normal pages, which is ready. We could totally work with that. So yeah, I think this will be a great being to use for this project. So let's just hit. Start with this design and squarespace is gonna ask you to put in your personal information to get your camp community that real quick. And there we go looking during the same I hit your purpose or just doing some personal. But we also want to sell some of our prints on this site. We're gonna hit cars for that for the same title. Just put in whatever you want. You can put your name if you have a creative idea there. Uh, we're not gonna put anything into the business information for male, but if you do, you have, like, a studio or workplace or something that you want to have listed on your website. Go ahead and do that If you have a P o box. Um, that was pretty easy. So now we have this template all set up. Uh, and we could die if right into anything. 4. Adding Content: Setting up your interface, uploading your work: actually at the wedding view, which means we can click on things and change them. You can toggle between the everything you and the life preview of your website, just fighting the escape. But so let's do that. You see, it moves up, and now everything is clickable, just like normally on your website escape to go back. And you can also actually click on this. They're up at the top left corner. Toggle that its views as well. Um, pretty much the only two sections we're gonna need to use for this course are the pages in the science section. The page section is all of the pages in your website. This first main navigation section is what's gonna show up here in this top bar and the not linked section are cages that you don't want to be linked to in your top bar. Let's just jump right into the design section and start changing some things. What's replace this text right here with our logo and my car? Uh, it's probably good idea if you can get a square shaped icon for this, and there's a lot of sites still generate those for you. You can just Google search for a by Clinton generator. So there we dio I'm not gonna a tagline in, but if you want to do that would show right below this on this template. So I think we're good there. Let's go back. So another thing I wanted to write off the bed is removed. This power by squarespace section. Let's go ahead and take that off. Let's see. And so you'll notice is I have her over different sections sees at it. But this papa and so pretty much anything you can click on you can just add. It really meant, you see if we click the edit button matter logo, it takes us right back to that page where we uploaded the logo in the first place. So it's there's a lot of ways to get to the same place in squarespace, which is really helpful. Another thing I want to do right off the bat is with all of these templates. Squarespace has a lot of them come with preinstalled kind of demo pages, and we don't really need any of those. Sometimes it's helpful to keep the read meat page. Just a you're going about changing things on the site, you might find that you want to come back references. Let's just drop that in the not lead to section that's done. Let's go through that lead all the rest of these. And so now all we have left with this this main home page and squarespace would actually let us delete that home page until you make a new one. So let's just do that real quick. Um, when you hit this plus button, it takes you to a cleat new page toolbar, and you have a lot of options here. The only ones were really gonna be using in this tutorial our page, blawg gallery and index. But feel free to kind of explore these other ones. So for the home page, you can see here that there you felt home page for this simply does it index. So let's just use that, Yeah, let's just call this feature work when you have her over it in the panel. Here, you'll see this gear icon, and if you click on that, it'll bring out this other menu we're going to set it is the home page confirm, and then pretty much any time you change something in Squarespace, you're gonna need to remember to hit save, but the end. Let's do that. And so now we have this feature work index and you see that expert is that little home icon , which means it's a home page whenever he can come in and delete the old impeach. So there are a few other pages we want to work with in this class. Slits at a new page called out. And it actually created that in the index, which he conceded by that little L shape line there. So we're just gonna move it outside of that because we don't want it in the home section. Let's make a new page. It's gonna be a block. We're gonna deliver news. Move that out also. Okay, finally, we're going to add a product page to sell our prince. Let's just call this prince, and it's also really easy to change the order of these on our website. So I think it probably makes him a sense of we have about first give you a second and then prints Last. So another thing that's really good to have in your navigation, some sort of contact me link. Uh, I actually for this specific website wanted to do something a little bit different. I want to have a button on the page on every page that you can click that will let you book an appointment with this photographer. Um, so let's actually put that in the fitter here. Um, any time you're editing a page on squarespace, you're going to see this little floating kind of bubble. And when you click on that, it will let you insert content. Blocks and content blocks are kind of the building blocks really of a squarespace website and you can see there's just a ton of options here and maybe someone in the future I'll make a class that goes over every single one of them for the purpose of this class. And really, for the purpose of those websites, you're only gonna be using three or four andi for this specific one. Squarespace actually has built in form in function. So let's just do that and this little tool tip pops up. We're gonna call this looking for these were the fields. The forms gonna happen. You can see them over here to name email, address, subject message. I think there's a role pretty appropriate for this Lets out Salah ad, a select box that lets them choose the time links. I just called, and we can put some options in. There's Let's a 15 minutes, $50 30 $100 200 and just all right can let's make this a required field. So then appear there is also a storage tab. You can see that it'll automatically sentiments submissions of these forms to whatever email you signed up for its recipes with. It's really easy to change that if you want just hit the X button, but we're just gonna leave it as it is. You can also go to Google Docks, which is actually really useful often times when I have multiple people managing a website on we have these tegra forms. I'll just create a form that lets us log all of the submissions we get, which could be really helpful. You could also connected to mail Chimp. If you want some option toe automatically, be adding people into your mailing lists, but we're not really gonna do that. It's kind of beyond the scope of this class, so let's go over to advance. Uh, most of this weakness. Leave the same center. You can see it. Move over there automatically, uh, posted a message. Let's change to think you on. And then lastly, you can see right now that the form is actually being inserted into the fitter, which we don't really want because that's gonna take up our entire page and not let anybody see the actual content. So since it's sitting in our fitter, we're actually gonna hit an evil white box mode. But you can see takes a the whole farm and asleep in there. And people were just saying plan okay. And then for the very last part of this, you can see that there's still this little text block down here from where that hard by squarespace text was when we first created this. So let's just go ahead and click and hold on that and you'll see this trash icon pops up at the bottom. If we just dragged to that and let go, it's gone. Let's save and there we go. So now that we've got this kind of bare bones user interface set up, let's go in and start having some actual content. I always find that it's easier to actually add in the climb tenable website before you start going through and tweaking the design. Because if you don't do that, you'll usually make this design go in and out of the content and find that you need to go back in. Tweak expects of the design later, and we really want a minute, my side as much as possible. We don't want to be repeating ourselves and doing the same things over and over again, because that's just wasting time. So let's just first start off by adding son images toe are featured work section. We're gonna do that by creating in galleries, and this is actually a bit of a lengthy process uploading all of these images because all of the images that I have are actually pretty high rez, so they may take a while to upload. So I'm actually just gonna fast forward this section, so it's not for you down with that 5. Adding Content: Sell Products, Make Blog Posts, and more!: Okay, so now that we have this first round of images uploaded, we can kind of see what this, uh, final products gonna look like on the home page. So let's hit escape. I'm back in everything section and let's go over to our about page. So I just get insert some placeholder text here. Even though I do recommend for your actual site, you type in what you're actually gonna want on your about page, cause that'll make it easier to design in four minutes. Uh, there are two ways to based in text to squarespace without carrying over the formatting of the original text. You can either hit this button pace displaying text, or you can just hit control shift Middle East it in there. Let's separate this paragraphs. Let's actually turn this first sentence into a quote, and we can do that by getting this little bubble here again to make a new block search for the quote block. Keep it in, it applied, and this is looking a little planes. Let's go ahead and add an image there two ways. By the way, to upload images to squarespace, you can usually either click at an image Or you can go to the folder on your computer and just regulate in there, which is useful sometimes. Okay, let's apply there and it's inserted it on top of all over text. And I don't actually think we want to have this huge image just sitting right there. Let's actually drag it up to the side. And in Squarespace, you can click and hold on blocks to drag them, and these lines will appear it so you can kind of see where they're gonna go. So this lines up with side Sophie. Really sorry else. Then it's gonna put it there. Uh, let's give that text a little bit more breathing room so you can click in the middle here, hold to drag. Great. And finally, let's add one more block here. Search for the just a kind of a fun little A lot of contact pages have this. Right now it's let's keep the labels apply. Stand a little bit, same awesome. And there is our about page. Let's go over to news now you'll remember. This is our blogged, and I'm just going to show you how easy it is to have a black post so that it's actually two ways to do it. You can go into the page on the panel here and hit this place smitten. Or you could just click on the page in the navigation of your site and Hadad Post. So let's do that. Sat in our title. Some more placeholder text. Let's remember placing this plain text so we lose that before having and I said in another image, it's always a good idea, by the way, to include some sort of image with your block posts so that when you're sharing it or what other people are hopefully sharing it to social media, it accompanies those links the sea, like on Facebook and Twitter and places like that. So we for this to upload, and that kind of is this. I know. If for whatever reason, you don't actually want to include an image in the main body of your blood, you can also go over your options and upload it as a male. That way, it won't show up in actual body. If you're black blue and he balding Tweedle still show you'll notice there is some other options here, and we're not really gonna bother for this group of this course, but there's some cool stuff here. You can also see the CEP tear social accounts toe automatically. Um, post this whenever it's live on your website so you can post it to Facebook or Twitter or whatever you happen to use. But again, that's kind of beyond this good with this horse. A Let's hit saving published to make it live instantly, and you can do the same thing here as you could do with the galleries. You can set it scheduled, or you can save it as a draft. Right? So now we have that on for the last section of content. Let's go over to Prince. We're going to actually be setting up a store here, So let's go in and at our first product image. This, but said at a press, said it Too visible. As you can see here, there's a lot of additional information you can include like you're shipping policies. You could make a form that would, for instance, feed into your mail chimp if you want. I said some other options. He was a custom at, but label again. You can automatically posted to your social accounts, but for Now, I think this is gonna work for us. Let's just save. And by the way, when you click that plus button, you'll notice that there actually a few different options. If you're gonna be physically shipping, something goes physical, obviously digital will send the milling toe a file. And service is just kind of a generic category for everything else where nothing is being shipped and the thing is being digitally transferred. Uh, so, yeah, we have our first print set up. I'm gonna go and now and just upload a few more and password video. Okay, Now, as you see, we have our all of our content finally set up. So let's head on to the next section, and we're gonna actually start doing some design. 6. Squarespace Design Essentials: Okay, so now that we've gone through and added the content into our site, jump into the design panel here. One argument. Start changing the look of our site. So you'll remember. We uploaded our local three. This section. We're gonna skip this template section. All it is is a place where you can change your overall template if you want to do that. But we don't need to do that. So it's restricted the style editor. Hey, and you see right off the bat that there's a lot of things you can mess with. And let's just start from the top here. So this first option is background color. Uh, let's just start playing with it and see what changes it looks like it's changing the background color of the actual, uh, main content on the page, and the defaults of white actually want to turn it down just a little bit. Get have a nice, gritty header in the footer. You can see that that's changing that top bar there, and the bottom bar to It's just little more Laghi. I want to keep this white, but not perfectly way. So let's just take it the just that looks good. Border Teller doesn't look like that's really changing anything on that. Spades. Let's just skip it for now. Leave it at black logo Image height. It's obviously changing the head of our logo spring down just a little. Yeah, site title phone Subtitle Farm. That's what would be here if we weren't using a logos. Let's just skip those. It gives you the option of that. The logo on the left or on the right. Think it's a good idea? Depended on the left because that's what most sites use. And just from a user experience, one of you. It's certainly good to go with what the users familiar with that's put on the left there, header position fixed. Let's see what that does. So it looks like that keeps the top part here at the very top or lets us grow with the rest of the page. So let's keep it at its default, which was fixed. I mean there for when you hover over it. You can see up here that blue boxes actually appear brown with the sensible effect. So let's first off, I wanted to change the font. To distinguish was a little bit from the body text. So if you'll been squared spaces front panel, you'll see that there's a lot of funds here. They actually are partnered with adobe type chicken, so you have access to a lot of really cool funds. I want to go with something similar here. Let's try afra. Yeah, that's pretty nice. So efforts gonna be our second do reform for this site, let's bump up to the front. Say is just a little bit 15 line height, uh, so usually just controls the space between lines. But since there is only one lying here, as you can see, it's just kind of in a roundabout week. And if controlling, how far down the navigation? Texas. So let's move it. So it's kind of lined up with the center of that logo to go, um, text transform. Let's keep that on upper case and let's bump with the letter spacing just a little bit. Okay, The next section's main content, which actually we don't really have a lot of text on that sound page. Let's go ahead and save our design, give it back to the main section, and now we can actually click on a different page be able to see what changes to the body former making as we do this. So let's step back into the style editor. Scroll back down to the main content. Let's keep the text. It looks even over. Maybe bump up the size just a little bit. You know, in general, you just want to make sure that you are making it really easy for users to read text on her site. Because that's one of the easiest things that convinced here, people away from it. Uh, that's increase a little bit. Yeah, that looks better. Okay, uh, for text color can see the beginning. Change it there. Can I just give it pretty much the similar? Same clear with that, By the way, I'm not really gonna go into color theory and site style sheets and all that. There's a lot of great classes on sculpture already for that kind of thing, and it's going to be on the scope of this class. I don't want to bother going into it, but I will give you some nice links. In the resource is section of this class that will link you to some sites for coming up with the color scheme for your site. Coming up with a site style guide? Yeah, and stuff like that. So, for the purpose of this class, I'm just gonna keep the site, create skill because I'm a lot more interested in just showing you how toe things on squarespace and actually diving into design theory and stuff like that. Okay, so heading this color, you know what? We don't actually have a headache on this page. That's actually save this real quick. You missed at that. So that it It's just kind of this light day back into the style editor. We can actually click right there on that text. Me. See? It'll take us to where we left off. Let's keep that thin about fun. Size a little bit, By the way, it's always good a good idea to keep your line high at least above 1.38 p. M. Just for readability. It's about the letters facing here a little bit for the links. Let's keep them really dark. Teoh contrast with the kind of gray body text and for the Hebert color, it's just a little bit like court. That's what hit show all to go back to think all of it. That section is auto fitter. I don't think we really want to do that because our call to action is located in our fitters. So let's just leave it there. Next section is actually buttons. Let's go in And it that let's keep it as an outline. But as you can see, there definitely some other styles Here we have three options for the acquiring stale, rounded and Phil. Let's just go till I can, like, look at that. Uh, it's turned the border colored down a little bit. Just give it some more contrast. Okay? I think the funds fine, thank you. Let's let's just keep it like that. Okay, so it save this. So now we've pretty much edited all of the body text design. Let's come back to the main page now and see if we want to change anything with this photo right here. So jump back in a style editor, you can actually click on this grid, and it will show you the relevent styles. So for the headings, I think that's what's showing up on the pop up. So let's just leave that I do want I think it'll look cooler if we set the background color , toe white and have our text people left. Let's do that. Let's do the same with herself Fitting colors so you can actually copy and peace this hex number in there and that will make sure that you're using the same clear throughout your site. I think that project with can see that's kind of controlling the space of squares. Do you want to think that a little bit, but not too much? I think that's pretty much about as much as we want to change, too. That's let's save it and go out just so we can see that new helper look, Yeah, I think it looks pretty cool. So let's leave it like that. And so now that we've kind of set a the basic design, that's just full screen this and see what else we may want to change. So first thing, it's kind of weird this buttons floating over in the middle here. Let's see what we can do about that. Now that our front size has changed, that sections change a little bit, so maybe you want to extend the map down to kind of keep that, uh, symmetry. This is looking pretty good. Yeah, we still have our print section. I'm going to go in a little bit later, how to do some finer tuning. It's to this. But for now, I think let's just go focus on making that. But better position. Let's go into it and see what options give us. So But the limit, it's just sense to left save. And there we go. That looks a lot better. Great. So now you've seen how easy it is. Just tweak little things about your site design. Um, in the next video, we're gonna dealt a little bit deeper into this and misses some CSS. Don't worry. You're not going toe Have to jump into any Cody or anything like that. I'm gonna give you all the help you need. The point of this next video is just gonna be to show you how how CSS can really step your game up even more so with that said, let's go over to do that now 7. Deep in Design: Pushing Past Template Limits: Okay, So the goal for this lesson is to just get you introduced to see SSO score space and show you really how powerful it is and customizing your template and making a more individual. So now that we've got our style set up for the whole side, let's type in and start adding in some CSS there are two is to add in CSS on squarespace. You can do it globally, which means that any changes you make will be applied throughout the entire site or you can do it on a single page, which means that the CS that's will just be a play to that page. Uh, the first thing I want to do is actually a global thing. I want to make the logo little more faded and give it a cool helper effect. So to add CSS globally working, jump into this to the design panel. We're good to go to this Customs es exception and there's nothing in here right now. So I'm gonna open the CSS that I've already written in brackets. I feel a little go again. You don't need to know CSS. I'm gonna link you to some great site splitting CSS on in the class. Resource is. But if it's something you like a little bit more training. But I guess just even notes just even know in the class review or in the discussion section , and I'll definitely consider making a CSS course if there's a lot of interest in it. So we went in and editors, yes, that's there. Let's save it, open it and you can see right away that the logo isn't faded. Uh, and when you have a rover, it now it gets bigger and can it becomes more opaque? So that's looking better there, uh, the archangel I make. I also want to give these pictures here kind of a nice fated effect right off the bat. But I only want it to be on this main page here. I want you to be able to click on the picture and actually see it in full color. So to do this, we're actually gonna go into pages, not design, and we're going to go to this page. We wanna play the CSS to click on the gear icon here. Let's get tickets to the settings. Um, just a quick site. Now this description section here. It's really helpful to fill that out for all of your pages because a lot of search engines will look to that description on. And having a really nice, robust description will help your page get featured higher Google searches. Okay, so on the set of Afghanistan, we see there's a section called Page Header Code Injection, and that's how we're gonna be adding in our CSS. So let's jump back into the brackets or, you know, if you don't have brackets, any you text editor will do. So no pad comes on most computers, so you could totally use that. Or you can just come up with your CSS directly in, um, Squarespace to So for the gallery gonna grab this and we can actually pieced it right to hear. If we do that, nothing will really happen. We have to put it in CSS html tags, which is just styled, and you can see the squarespace automatically adds that closing tag. Happy there. Okay, lets just peace in our code. Save it. Let's full screen. Okay, fresh the page and you can see that all of the foot is just have this nice, very subtle, faded effect Okay, So the last thing I want to dio is in this prince page. I want to give all of these a nice little border room them and a shadow to kind of distinguish them. Um, so I'm actually gonna show you how I got the CSS. I get fires for the last two bits of code. It's actually really simple. If this goes over your head, don't worry about it. You'll still be able to add in CSS. Um, but this is just really helpful for people that maybe know a little bit more about it. So what we're gonna do is we're going to click on what we want to be adding this Yes, that student, this case, it's the picture. It inspect element. And this is going to open up the developer, Consul. Um, most other brothers have some version of this, but just you know, I'm using chrome. Uh, and as you have over things, it's going to show which part of the page the rule is affecting in this case, we actually wanted added this product image. And if you actually want to play with CSS and this, you can actually go over right here. in the right panel and start messing with things, so this would actually make any changes to your site permanently. But it's a really good way to see what changes. You might make it look like the end without having going and save things and open the settings and stuff like that. I'm so, for instance, if we wanted to change the capacity of this, we continue. It's like point to, and we see right away that it's getting changed life on the page. But that's actually not important to us. What would you want to be doing? Adding that border and shadows? Let's see what it's like your first. Make sure we don't want to make any tweaks to it. Yeah, I think that's good. Look nice overall. Just let's close out of that respect. Then go in the pages because again, we're just playing this locally on the page, not globally throughout the site. Go back into advanced. It's a crying last from going in to the developer console. We actually know that these elements are called that CSS peace. Did it see that? And there we go. Let's open this up again and just look at our changes. I think that looks pretty nice. So those were just some quick ways to show. You really hope powerful CSS can be in making your site look a little bit more distinct. Enemy. If you try to use thes CSS snippets on other sites and they don't work for some reason, it's probably because the template has some different. Identify IRS for the elements. If you run into that problem, it all just feel free to upload your project and link me to it. And I'd be happy to kind of reform at that CSS toe work. Three years Excite and I will all provide all of the code for the CSS in the class description so that you can use it if you like, and feel free to tweak it if you want to. 8. Congratulations and Thank You!: and you're done. Congratulations. You've just made your first website. I'm so excited to see what you guys have come up with, so please do Uploaded to the project. Calorie, I'll give you some tips on how to refine it and maybe even some extra CSS snippets tat into your own website. Thank you all so much and do be sure to check out my other classes to have a great one.