Transcripts
1. Introduction: Hello. My name is Camille. Condemn Makhaya and welcome to my sculpture course where I'll be helping you build and publish your very own Weebly website. In 2015 I decided to start a blawg and to do that I had to figure out how to build my own website with zero coding knowledge. After a lot of research, I decided that we believe would be the best option for me. Now you also need to do the same. Make sure you do research based on your budget and your needs to figure out which platform will be the best place to start your website from.
2. Defining Your Business and Goals: before you even begin opening the Weebly website, there are a couple things you need to figure out 1st 1st of all, do you have the time and energy to build? Its website usually takes me about 10 to 12 hours and lots and lots of edits to build a website if you're not prepared to make this commitment than definitely seek out a professional. But even if you are going to seek out a professional, it's a good idea for you to understand what they're doing on the back end of your website. The second thing you need to figure out is what is the purpose of your website? You need to sell a product, raise awareness about an event or a brand. This will help you decide what the best format is for your website, so make sure you figure this out early on. Once you figured that out, then you can start making a rough plan of all the information that you need to have on your website. After you do all of this, then you can begin the research process to decide the design of your website. Personally, I like to use Pinterest and Google to figure out what I want my websites to look like. If I'm doing more broad research that I go to Pinterest and I'll search something like website design or home page website design. I'm looking for something more specific than I'll go to Google and search something like the top 100 nonprofits in a particular country. And from there I'll go through each of their websites to decide what works best for it. The area of interest that I'm working in. Now that you've compiled all the research, you can create an even longer list of everything that you're going to have on this website . So that includes the information that you listed before, as well as the colors, the logo and any design ideas that you've come up with so far from there. Now it's time to start building your website
3. Setting Your Up Website: Now it's time to turn all that research that you've done into a website here. You can see him that we believe dot com and what you would do if you don't have a weekly count already a sign up. I already have one. So I'm going to go ahead and log in. Once you want in, you are welcomed by the weekly dashboard. As you can see in my dashboard is open to the block that I talked about a couple lessons ago. Now what I'm going to do is add site. Since we're not working on this block and is going to ask me what type of website I'm creating, don't want a website with the store without a store for this project, we're going to create a simple website without a store. Then you have an option to pick a theme for your Weebly website. I am going to go ahead and pick one that has a header image that goes all way to the top. So this one right here, high p it doesn't really matter which one you pick at this point because you can always change your weebly theme later on, even after you public your website, you can change your weekly thing. All right, I've gone ahead and picked High Peak as my team of choice. And I am welcomed by the weebly editor. So it is asking me what I want My domain name to be your domain name is your out. That pops up at the very top of your page. It's how people will find you on the Internet. So you want to make sure that you pick a name that is easy to spell and easy to pronounce. I am going with making lemonade. Now let's see if that is available. So I just put in making lemonade and I click Search. As you can see, it gives you a couple options of what I could put as my domain name. I'm going to go with this sub domain, which is making lemonade dot weebly dot com, And I'm going with that because that is a free version. If I ever want to connect a domain that I already own, that is just making lemonade dot com or upgrade my weebly website so I can buy a domain from lately. I can do that later on, but for now we're not going to worry about that. We really just want to get this website set up, so it looks like I was wrong. It actually says that this domain name is unavailable. This means that there isn't making lemonade that we we dot com out there somewhere. So I need to make a change. So I am going to call it making Lemonade blawg or the Making Lemonade Block. Let's do that, and we will see if that is available. The making lemonade block dot willie dot com is available. It's also available as a dot com, which means that when I'm ready to upgrade, I don't have changed name. I don't worry about any of that. I just upgrade all right. It is all set up, and now it's time to start designing the website.
4. The Basics of Weebly's System: The main thing you need to know about Weebly and most other design tools out there is that they operate on a drag and drop system. All that means is that when you want to absolutely, your website all you have to do is drag an element from this menu, sidebar onto your page like so, and drop it and it will appear. And then, from there you click here to edit. If you don't want that element any more, you click the X in the top right corner, and you just go ahead and delete that. And if you really like the team that you're working with, you can always just edit the different elements already part of the theme. So if I just wanted to change this background of a mountain to a set of lemons, all have to do is click it at a background and place from Bear. It asks me where I'd like to replace it from. I'm going to upload a photo from my computer, and I have it in my down lows, and I got this image from stocks app dot io. This is a great free tool where you can get stock photos for free that are copyright free. You don't have to give attribution for these photos. If you can't find a place for on your website, though, it is always helpful for a photographer if you give Activision toe at least the site where they posted their images. As you can see, my lemons photo has appeared and I'm going to go ahead and just give this a 10% blur now. Usually, I would edit my photos a little bit more than this because you don't want your stock photos to look like stock photos. So usually I would use a free tool at Canada dot com or pay tool light photo shop. Okay, I have the 10% blur on there, and I'm just going to go ahead and save that. The next thing that I want to do, which probably should have been the first thing that I did, is edit this site title at the top. Now, we believe, gives you an option to either put in a logo or text. I do not have a local for my website, so I am just going to edit the text, so I'm going to change this text up here. Teoh making lemonade. I can go ahead and change this header where says explore 14 K to something that matches my brand a little bit more. So I am going to change that to because life isn't always a box of chocolates and this text is a little bit big for me. So what I'm going to do is reduce the size. All, if you do, is highlight all of it. So I can either drag my cursor over all the text or do control a or command a. And then I'm going to click this minus simple. It says Decrease font size. Now that's a little bit small. So I'm going to increase the font size and currently that is the biggest that I can make it and we can make changes that later. But this is good enough for now. I don't really want this text box here anymore where talks about mountain tours. So instead of deleting it and still having this random text box on my website, I'm going to click this X like I talked about earlier. Another feature that you can see here is called a spacer. Now all spacers do is add space between two elements. The space can only ever be added horizontally. Unfortunately, you cannot add space vertically. So I'm going to go ahead and delete this spacer. There are actually two of them. We're gonna go three, We're going to go ahead and get rid of all of these. If you scroll down, you will see that there's also another space here on the way that you can tell. That is when you hover over a particular area, a blue box appears and that tells you what the element is and how big element is here. You can see that I have this text box and it is about this size a rectangle. I have this button. It also takes up a lot of space. And I also have this space. As you can see, it goes pretty far down. We're going to get rid of that so we can make this header image a little bit smaller. As you can see, the header image is still pretty big. So what I'm going to do to adjust that is click on the image. When I do that, you can see that there is an option to edit background or replace header layout. I'm not gonna do either of these things. I'm going to drag my cursor to the blue dot and I'm going to drag up to resize again. This is very helpful that we believe operates on a drag and drop system. So I don't have to worry about h m o the CSS. It does all of that in the background for me going to make that a little bit smaller. When you scroll down, you see that there are a lot of other elements on this page. I'm not gonna worry about that for now. But if I were to be making this website old that I needed to be, I would probably get rid of all of the's and start from scratch to do that, rather than deleting each element individually again, I'm going to click in the area of the top part of what looks like a section, and I have the option to actually delete everything that's in this area. If I cook up here on the image of the lemons, you can see that the section is from this blue line upwards to the very top. When I click below that I see a different section, and this section starts at this blue line and goes all the way down to this blue circle. So I'm going to get rid of that section, and all I have to do is click delete. If you find that your sections ever get out of order or you want to change up the layer of your website again, you don't need to move each element individually. So, for example, if I decided I want this picture of the mountain to be below my rates, I'm going to go ahead and find where the section starts just above the image of the mountain. I'm going to click Move Now, This gives me the option to move it on to a different page on this page or to just copy the section. And if you find that you have a layup that you need to duplicate multiple times on a page or multiple pages, it's easier to use this copy function than to try to manually recreate these layouts on each page. So what I'm gonna go ahead and do is move this image just like you can see what it will look like going to move it down and voila, the entire section moves down, and now my rates are above this image
5. Every Tool in the Weebly Builder Menu: really quickly. We're going to go over the different functions of the elements that you see in this menu sidebar. And from there you are ready to create your first page on your weebly website. So here you have the title. This is just a text box that is slightly bigger than a normal text box. So that's your title. Then you have your text box that's your regular paragraphs and image gallery slideshow are all perfect for uploading images to your website. The only thing that's different between these three elements is the layout in which your photos will be uploaded. The image element upload single photos, the gallery, multiple photos and the slide show multiple photos, but within a slideshow, then you have the map. This is great to put at the bottom of your pages or in about me pages so that people know where to find your business. Next year, the contact form in the newsletter form, which will direct entries to your email that you give it. This is great for people who want to learn more about your business. I would like to join your newsletter, then you have the button and embed code the button, you can see a pure, says view tours. It just gives you an option to direct people to a different page or to a different website in a visually appealing way. That is all the button is. Then you have embed code. If you're using the free version of Weebly than you could not upload HD video, however you can embed code. This is not nearly as complicated as it sounds for this example. We're going to go ahead and upload a YouTube video to this site. Now the YouTube video has nothing to do with making lemonade, but we're going to go with. All you have to do is open YouTube and find the video that you want to upload. For the purposes of this project, I'm going to upload a video that I created about making fries. So all I have to do is go to the video on YouTube, click the share button, and instead of copying this door out, I'm going to click in bed. Now you tube gives me an HTML code that I can then embed into my website. All I have to do is copy this code, go back to the website and drag this embed code function over. And wherever the blue line appears, that is where the code is going to be embedded. So here says click custom html. I do that and I paste in my custom HD mouth. Once I click off of it, my YouTube video is there. I would like it to be centered, so I click on it again and change the position to be centered. You can't tell here yet, but once this page reloads and want to publish it, this video will be centered. That is all you have to do to upload HD video if you're using weekly for free. If you have the paid version of weekly, you can use this HD video function or the audio function, depending on what you need and go ahead and straight. Upload the video and audio that you need on your website, just like you would an image or a gallery of images. After these basic elements, you have the structure elements. First we have the section element now we talked about it, but you might not have realized a section is just a chunk of information that you've decided to group together So for this you have this section right here where it says upcoming hikes and it goes down to the blue dot Then you have this section of the mountain and it goes down to the blue dot as well. So on and so forth sections are great for when you want all your information to be in one place and easily movable. So, for example, here I wanted all the rates in anything having to do with rates to be together so that if I ever decide to move this to a different page, I can just move this section rather than trying. Teoh copy only certain elements from a section. I can just copy the whole section over and be done with it. So sections are a great organization tool. After section you have divider divider provides a really visually appealing horizontal line . That is it. Sadly, we we does not support vertical lines at this time using this function, but hopefully in the future they will. So we have this divider. I'm going to just leave it there for now. And then we have spacers. We talked about space. There's they provide horizontal space between two elements so if I decide that because there is this big space between the word upcoming hike and breathtaking adventures. But I also want there to be a big space between this divider and this YouTube videos that they're equal. I can go ahead and put ah, space or in once the spacers in Oh, this is pretty even. But say it wasn't even. I can go ahead and make the space or smaller or bigger, depending on my needs. I'm going to go ahead and leave it there. And as you can see, I mentioned this before. But the space between the two upcoming heights and breathtaking adventures is not quite equal. And since this is an image that is a little hard for me to adjust, I would have to adjust that in photo shop or Canada. But another thing that I could do is change the spacing on this image. So I click on the image click spacing, and I don't want there to be a bottom margin. All right, that space looks a bit more even, so I'm going to click off Element, and I am happier with that. So I'm gonna go ahead. We've got their next section of elements that you have is the media section. We already talked about HD video and audio. I personally don't use scripted, but again, all you have to do is drag and drop an upload or link using a your out, and that goes the same for the rest. Here, you can also use the you to function to upload YouTube videos. But if you were to use a different platform like Mimi O, then you would need to still use the embed code function and bed code is also great for when you want to add a sticker or a metal medallion of some sort to your website to certify that is authentic, then embed code is a great option. Okay, we're going to keep scrolling and go to e commerce because it is not an e commerce website . I'm not worried about thes, but it allows you to add products and put your products within categories. That is what that is. And once you have your products in categories than this function right here allows you to list out those categories on any page that people could click. I go to that category of product finally, we have be more section. You can add a search box your website if you upgrade your plan. Otherwise, on the free version of Weebly, you cannot use the search box function. That is what this little lightning bolt means. It corresponds to this upgrade button right here in your top right corner. Then you have a block quote block. Woe is great for when you have testimonials or any other stand out text that you want to display. So I'm just gonna show you what that looks like. We'll put it here and we're going to say the best fries I have ever had. And then we're going to say YouTube commenter 2020. Great. And I can change the size of the tax like I did with the paragraph and the title text. And there you have your quote box. Okay, social icons. Social icons are exactly what it sounds like. It is a way for you to add social icons. These are your social media icons. I most likely would put these in the very bottom of your page. So for this, I am actually going to add a new section to the very bottom. So all I have to do is drag and drop this section great. And now it says drug elements here because it is a blank section. I'm going to add social icons. Once you add your social icons, you can go into the editor and manage them. So I'm going to do that personally. I do not have a LinkedIn. Somebody switch that off and I I would like to add a YouTube, so I'm going to switch that on. Then I can go into each of these active icons and add the euro that I need. I'm going to go ahead in center, align this whole section, and from here I can copy the's social icons each of my pages rather than having to drag and drop on each page. All have to do is go to the top off corner, click this arrow, and instead of move, I'm going to copy to all the pages where I needed copied. Now we have the ours BP form and these survey element. These are both two ways for you to collect information from the users of your website, just like the other two forms that we talked about earlier. So all you have to do for these, like every other element is drag and drop. And once you drag and drop, for example, this R B P form, you're going to be given options for how you want to customize it. So click here to edit and I could say, making lemonade live. It's an event. Then people can answer whether or not they make it to the event and any additional guests that they have. I can go into each of these text boxes and change the titles and make small edits to them as I need Teoh. So it is very, very customizable. I'm going to go ahead and just leave that there. The other form that I talked about was the survey form Alice. Survey is the exact same thing, but in survey for after that you have the option Abdul at. Since this allows you to generate revenue from your website with the use of Google ads, the last element in this section is the cookie opt out element. This allows for your users to opt out of the use of cookies. This is important to have either this or a running banner at the bottom, which all Weebly website unlikely. Have to allow people to decide what information you can and cannot collect from them. Low that you have an additional section called installed APS, and this allows you to add ABS to your website that we believe hasn't necessarily made. But third parties have made and made available to weebly users thes air. Great. If you want something like a scroll up buttons so that when people school very far down to your website, they're able to just click the button. School like this means that you don't have to worry about adding any additional code. Unlike a few years ago on weebly, when you had to act code. If you wanted to have such a button, I would highly recommend that you go into the APP store and figure out if there are any APS there that could be useful for your website. That is every element that you have at your disposal pre installed in the Weebly editor. As you can see, there are lots of options for you to make the website that you need
6. Elevating Your Website's Design: Now, with all the information that you've heard so far, you could walk away and create an amazing weebly website. But we're going to go over a couple more ways that you can elevate the design of your website. The first way is to change the background of your sections now. We talked about it earlier when I changed this header into lemons and we're going to do it again for another section. Now, instead of changing the header into lemons, I'm just going to go for a yellow color. So I scrolled down to the bottom. Here were have my social icons. I'm not really feeling this white, so I'm going to change it to yellow. I'll have to do is click it edit background and instead of putting an image, I'm going to put color. I'm going to change the color to yellow. And from here, what I would usually do is write this hex code down in a notebook or on my laptop somewhere so that every time I need a yellow color throughout the website, I know exactly which yelled I'm using the second way that you can quickly elevate design of your website is to change the pots. Usually the bonds that come with the theme don't really match the personality of your website. So all you have to do is click this theme tap and go ahead and change fonts. From there, you can go into any of the elements that you've put into your page and change the font Any time you hover over the element name, it also creates a blue box in the editors that you can see exactly what you're changing. For example, I am not a huge fan of this text right here and this text is called paragraph text. So all I have to do is good under paragraph text. A blue box appears. So I'm sure that's what is called. And then I can scroll through all these different bonds to figure out what I think will match. Well, I really like this Bird's eye imagines ball with the title font, and I would usually go through every single one of these fonts and make sure that they match up well. I usually pick 2 to 3 bonds that I can use throughout the website so that it remains consistent but also interesting. Another way to change up. A theme that you've been given is to go to theme options. This allows you to make little tweaks. Suit themes such as changing how wide your website appears on somebody screens that's full with body or not. Header Grady Int allows you to add ingredient to this header up here, and contrast. Navigation puts a box around your navigation. Different themes come with different theme options. So if you find that none of these theme options and changing up the fonts makes the website what you wanted to be, you can go ahead and change your theme completely. All I have to do is click change theme. Once you do that, you have the option of previewing any of the themes that are on the website I have to do. It's hover over them and click preview. This allows you to see if a theme would work for your website without having to commit to it, because it would waste a lot of time if you were to change theme every time he thought a theme was interesting. And then you go into the editor and you find you don't really like it so you can preview the theme. If you like it, you could choose. If you don't like it, you can cancel. And again you can make this change at any point in the web design process. If you need even more customization, then you can change the CSS and HTML of your website. This is the skeleton code of your website. All you have to do is still on this theme tab is click Edit html Osias us at the very bottom. I would not do this unless you've done extensive research and you know what you're doing because you could really mess up your website. Thankfully, we will allows for real time preview of your edits that you can see if you're really kidding what you want to be changing. And if you decide that you've made a mistake, all you have to do is click, cancel and no harm done. Another way of adding some extra code to your website is to change the header or footer code. This is not as complicated as it sounds. All you do is go to settings and s CEO, and from there you can add further code or header code, usually a website. We'll let you know where you need to add the code to your website. For example, Google analytics might say that you need to add a particular code to your header code of your website. As you can see, there are a whole ton of settings options and we'll go through that and another lesson. But for now, you are all set with the basic and the slightly more advanced ways of adding design and personality to your website.
7. All About Pages: Now you have all of these elements and techniques that you can use, but where do you put them? That's where the pages tab comes in. So far, we haven't talked about any of these pages, but we're going to go through them now. All of these pages are just pages that the theme designer decided should be there. But you do not have to keep any of these. You could just have your home page and be done with your website, or you could add 10 more pages. All you have to do is go to the pages tab and click on any of these pages, and you're given options for what you want on them. You could change the page name. You can hide it in navigation, which is great if you have a Facebook promotion going on, for example, and on your Facebook page, you tell people for more information on this. Go to our website, but you don't want general visitors to see this page. Then you can hide a navigation, but when anybody has the link to this website, then they can see the page. So that's why I had a navigation means you can change your header type. So whether or not you want this area right here, where the mountainous So what we have on the first page of the lemons you could decide whether or not you want a header like that there. If you say no header, then the header disappears and you just start from where it says services. If you say splash page that essentially you're going tohave one big header on your page. As you see it almost looks like a home page. A lot of websites have a page like this where it is a title and your navigation, and that is all. There is no information on that page. It works as a great home page. We're going to go ahead and go back to know Header and leave it there for now. Once you do that, you can choose to copy this page over and over again. If you really like it, or you can go into each of these pages and make changes to them. Another option that you have with pages is to change the visibility. This is different from hiding navigation because visibility allows you to allow access to certain members or certain people with passwords to your website so you can go ahead and make those changes there. You can also change the ASIO settings, so this change is what appears appear at the top. As you can see on this page, it just as weebly or in this YouTube page recreating Java house Kenya spice chips. Red ink. You, too, so you can change this page title to anything that you would like, and you can change the pages per Melich. This means that no matter how many different ways you decide to organize your navigation, this pages link will stay the same. This is really important, especially if you decide that you want to expand your business or expand your website any time you want to make sure that your website link never changes, so it's a good idea to go ahead and add Perma links to each of your website pages. This could be as simple as about, so it's going to be the making lemonade blogger dot web dot com slash about. And it will always be that no matter where I put this page on my website, you can go ahead and change your page description. And this is a little blurb that appears when you google anything and it has the website name and the website description, Medic, keywords, footer, coat and header code all have to do with your search engine optimization your S e o. I wouldn't worry about that if you are a beginner at website design. But as your website becomes developed, and as you feel more comfortable with what you're putting out onto the Internet, then you can go ahead and watch. A whole bunch of sculpture, Of course, is about Seo and how to do this properly. The last thing with pages is that you can change the way that they're organized in your navigation. For examples, say I want the about section and contact page to be linked together. So I want contact to appear when people click about. As you can see, all I had to do was drag and drop contact. Under about Now, Contact does not appear as its own little section on my navigation. It is nested under the about page. Now, if you have something like your services page and you want to list all of your services on a different page, all you have to do is click the plus sign up here by pages, and we're going to do a standard page and I'm going to say, uh, lemonade done would add another one that says Lemon slices Done. I want all of these to be listed under services, so all have to do is drag and drop those. However, I don't want people to be able to click on this services page. I want them to just be able to have her over services and then see a list of all the services we provide. So what I'm going to do is change this services page to a non clickable menu. All I do for that is click this plus icon, create a non clickable menu, and I am going to change that to services done, going to drag it in place of services, and I'm going to delete the services page by clicking on it and clicking Delete the next thing off. My services has been undone, so all I have to do is drag and recreate this nesting sequence and I can nest infinitely long. But all I need is one set of nesting, and here we have our navigation menu. You cannot click on services, but you can click on lemonade and lemon slices. That's all you need to know about pages. As I mentioned before. You can always copy elements to different pages as you need, but you're all set to go with organizing your pages on your website.
8. The Store and Settings Tabs: Now let's quickly talk about the store and settings Tabs on weekly. The store tab is great for if you have an e commerce site and you need to manage the different products and orders that you get, we're not building e commerce website. So I'm just going to ignore this tab for now. Living on to the settings tab in the settings tab, you have a couple different sub menus. The 1st 1 is general. Here. You can change your site address so your sub domain to something else. You can change your site title swallows your site category, which allows weebly to more personalize your user experience. You can enable or disable SS l. I would highly recommend that you keep SSL and able to this weekly editor, for example, has this lock icon up here Recon view site information. That is what the SSL is. It is a security certificate. This allows for anti virus software to know whether or not your website it's safe to visit . If you have a premium weebly account, then you contain your favorite con. This is the little icon that appears on the tab of a website here. We believe you can see the W and all free websites will have that. W can also add a site password so that not everybody can access your site and you can make adjustments to your navigation. If you would like to send yourself a copy precise so you don't lose it, you can archive it. As you can see here, your site needs to be published for that archive to be possible. You can also change your date format and all of that, and that is helpful if you have a blawg. So when you post blog's, it posts in a particulary time zone and time and date format down here, you have the cookie notification option. This is important for you to have, especially with new regulations in the U and around the world concerning digital privacy. Then you have the option to authorize at sense. And to do that, you need to click this, read more button and learn about what you're really committing to from Google and whether or not you want to make that decision. We were to talk about unpublished buttons, so let's move on to S. E. O. Talked about CEO briefly. Generally speaking, I wouldn't worry too much about your Seo as you're designing your website. Because really, you just need to get your information on the pages of your website. Once you do that, then you can start tweaking so that your website is seen. Buy more search engines and therefore more people. You don't want to have an optimized website that is really terrible in design, so focus on your design first. Once you do that, then you can use S e o strategies to optimize your website. Under that you have editor stop, and this allows you to allow access to your web site. Two different editors. For example, if I'm working on a website that I do not own, the owner will add me as an editor rather than meet making the website using my email address. From here, you can also monitor editors to see how often they're logging in and the different permissions that you have allowed for them to have. Below that, you have the members tab, which allows you to restrict access to certain people who you want to access Europe site below that we have the my abs tab, and like I said, you should go to the APP center and figure out which ops you would like to have on your website. And from here you can manage them, figure out there working well, disconnect them, reconnect them, etcetera and finally below that, we have the block tap. If you have a block anywhere on your website, whether it is a personal block or your company running a block, then this is a great tab to learn about. From here you can decide how many posts aren't on each page and whether you allow share buttons etcetera at center. That is all for the settings on Weebly. As you can see, there are a lot of them. However, he will not need all of these settings all the time. So I hope this guide will help you find what you need to make changes to your website.
9. Publishing and Unpublishing Your Website: Now let's say that your website is all ready to go. This wife's definitely isn't. I still need to work on it for a couple of hours, but say it was ready to be consumed by the public. All I need to do is click. There's a blue publish button in the top part corner of my weekly editor and the website is published. I can then go to this length and view it as a normal viewer and to see what I think of it. Once you do that, you can still make edits your website and any time you make it edit that you would like to be published. You need to click the publish button again if at any point you decide that your website needs to be unpublished, which is what I need to do now because it is not ready. All I need to do is go to settings and under general, you scroll down and there is an unpublished site button. You go ahead and click that, and your website is unpublished. You can continue making edits as you normally would, and publish it when you're ready
10. Conclusion: Thank you so much for teaming into my course about Weebly and how to make your very own weebly website. I'm going to go ahead and work on this website a little bit more and I will show you the final results later. I am so excited to see what you create down below in the project section, so make sure you leave screenshots of your website.