Start your Side Hustle; How to build your first Squarespace website | Rosanna Costello | Skillshare

Start your Side Hustle; How to build your first Squarespace website

Rosanna Costello, Quitting my 9-5 so you don't have to!

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (38m)
    • 1. Introduction

      2:35
    • 2. Research

      4:09
    • 3. Mission Statement

      2:29
    • 4. Which Squarespace version?

      1:43
    • 5. 10 Step Squarespace Flow

      6:37
    • 6. Wesbite Structure

      7:48
    • 7. Website Content

      12:27
    • 8. Summary

      0:23
21 students are watching this class

About This Class

Start your Side Hustle today, create an outlet for your creativity and a place to share what you love, what drives you, what gets you out of bed in the morning.

Starting with a beginners introduction to designing and building a website with Squarespace, let's make a start together today and build your very own beautiful and simple website, be it a gallery style for showcasing your photography or a blog to document each delicious new recipe you develop or the adventurous places you visit at the weekends, let's build your Side Hustle together.

Squarespace is a brilliant platform for building your first site, optimised for mobile, desktop and tablet, you only need to create one site and Squarespace does the rest of the work for you to ensure your site works across any device. With options for adding an eCommerce shop to your site too, we can future-proof the work we do today with the potential for growth in the future.

You don’t need any specific skills to take this class, just a passion that you want to share with others and spend more time on yourself! The class project will ease us in gently starting with finding and analysing inspiration so when we come to build our site, most of the difficult decisions are already made!

Squarespace have just released a mobile app too, so now you can manage your site, create content and edit on the go. Keep your passions alive with a quick edit or upload in-between meetings or on the train home.

Once you've built your website foundations, head to my next class Grow Your Side Hustle; Branding & Design for your Squarespace website to learn how to create your own personal branding and apply that to the design of your Squarespace website. 

This class is based on using Squarespace version 7.0. If you have created a Squarespace account since January 2020 you will be automatically assigned a Squarespace website on version 7.1. In order to launch a website in version 7.0 and follow this class use the link below to head to the original template store for Squarespace 7.0. 

Link for Squarespace 7.0 Template Store

skillshare.com/browse/squarespace

Transcripts

1. Introduction: hi and welcome to start your side hustle How to build your first Squarespace website. I'm Rosanna and I'm a product and furniture designer from the UK I've built multiple websites for different projects and learned lots of tips and tricks along the way. And now I want to share them with you so you can build your own corner of the Internet. So you might be thinking, why a side hustle? Well, I believe that when you start something for yourself, even as you continue to work your day job, you feel empowered and you gain confidence. You create opportunities and security for yourself. So I start thinking what your side hustle could do for you and where it might take you. But you might be thinking, Hey, what about my instagram? I share what I do in my passions through that platform. But our social media platforms don't really belong to us. They could change any moment. And we're not in control of thumb with a website. We can craft and carve and keep control of our own corner of Internet. Why squarespace? Well, I've tried lots of the different website builders that are out there, and I found squarespace to be the easiest to use, no coding required and it's fully responsive. So it works across mobile iPad and desktop without you having to worry about anything. They've also recently launched a new app so you can download it onto your phone. Imagine even when you're on your commute to work, you could be working on your side hustle editing a blood post or posting an image to your website so it gives you that added level of freedom and possibility to be working on your side. Hustle whenever you want throughout this beginner's class. Before we get to a fully functioning website, we're going to follow these steps one research looking for inspiration. So it's as easy as possible when we come to build our own website to mission statement. This is going to be the guiding light for our side hustle three. Following through my 10 step squarespace flow that's going to get us from no website to website and full. Now that we've got our website, we're going to work on the structure, making sure that the pages within it easy to navigate. By the end of this class, you're going to have a website, and the hardest part is starting and you've already done that so well done. Now let's get hustling 2. Research: so you might be thinking, Why do we need to stop with research? Well, we're all busy. This is our side hustle after all. And we want to be able to make efficient decisions quickly when it comes to building a website so that we could move on to the fun part of sharing outside tussle with others and creating content. And by understanding what we love about other sites, we can apply the same principles to our own website to make sure it is professional, easy and enjoyable to use for our visitors. Our class project today is to share a screenshot of a website that inspires you along with some bullet points on your observations. Remember, we're analyzing it according to structure. So how you navigate around the website and where the pages sit. For example, other lots of clicks needed to get through a menu to the page you want, or is it relatively easy to find the page that you're looking for? Oh, the color scheme. Are the colors complementary? Do they excite you or make you feel relaxed? Or the layout how and where the content is positioned and presented on the page and how that comes across to you. So let's take a look at by Inspiration website for my class project. I've chosen the brand stylist dot com as my inspiration website, and as you can see straightaway here, it's a very clean and clear website to look at. If we look in a bit more detail at the structure of the website, we can see straight away on the home page. The menu options are along the top here either side of the logo so immediately we can see what pages there are within the website, but also what the website on the brand stylist is actually all about. Sometimes you might have a menu off to the left here, a burger menu. It's called, um, where all the pages are kind of hidden in there that can have pros and cons. But for here, that might be a bit of a negative, because as we can see the brand stylist as online courses, which straightaway tells you more about her? But if that was hidden in a menu, you might not know about that and might not realize that the color scheme of the website is also very nice. I find it very relaxing and they kind of calm very, very pale, slight pink to the background. The strong, clear black text is really, really very easy to read and very clear on the logo itself has a bit of a metallic effect to it, which brings an added element of luxury. And if we take a look at the life website itself and look at the layout, we can see it's a full scrolling website on all. The content has a lot of space around it. So it's again back to that clean and clear style where you can see everything very easily with the black text on the bright images and lots of space and very easy to navigate and move around. So if we take a look at my own website and how I've used my inspiration from the brand stylist dot com and applied it to my own site, you can see it's got the menu out on the top here for that same clear structure, the color scheme. I've tried to create their calming atmosphere with the color scheme as well. Andi. The content all has lots of space and is very clearly laid out so that everything is easy to see, so that's lesson to finished. Well done. We've touched on the class project there, finding an inspiration website that we can analyze for its structure, its color scheme or its layout. We've had a look at how we can apply that to our own website to make it easier when we get to Squarespace. So don't forget to drop a screenshot off your favorite website in the class project with a few bullet points on your observations as to its structure, its color scheme or its layout. 3. Mission Statement: the second and final stage of our research section is going to be toe work on our mission statement. But what is a mission statement? While the mission statement is a short sentence, summarising why you do what you do on what your goal is? It's going to be your guiding light to keep you focused and motivated when life gets in the way. But what is my mission statement? Well, my mission statement for my own personal blawg is to share my experiences and adventures in challenging what is expected of us in the hope that I might encourage others to also ask why. Okay, so how do we generate a mission statement? Well, for me, the best way to do it is to do a mind map. So start with a blank piece of paper and a pen, or even treat yourself to a new new book and a new pen. Because everyone loves new stationery and you are starting a side hustle left role. So in the middle of your mind map, start with your side hustle so it could be photography and then have a few branches coming off that so we just want to focus on what you're doing, why you're doing it and what your goals are. Once you got a few branches coming from what, why, in goals, you can summarize thes into a short sentence, maybe right on a post it note, and stick it somewhere or right in the front of your notebook. Or type it up and print it out. But put this somewhere big and bold to remind you why you're doing what you're doing and what your goal is. For example, sticking with the photography theme the What could be landscape photography, the Y could be to share a love of the outdoors, and the goal could be to encourage more people to step outside. So a simple sentence to summarize that mission statement could be to share the beauty of nature through landscape photography to encourage others to go outdoors. So that's Lesson three finished. We've taken a look, a mission, statements, what they are, why we need one and how to make one. So let's get our website inspo, get our mission statements and let's get on to building our Squarespace website 4. Which Squarespace version?: before we head into building our website in squarespace. Just a quick note on the Squarespace website versions. If you've just signed up to Squarespace recently since January 2020 you will automatically be put into building a website in the version 7.1. So to change that, because my class here is run on version seven point. Oh so to make sure you're in the same version, just head to the link in the class about page here and that will take you toothy original template store for squarespace version 7.0 and so my whole class on the following class from this is using squarespace 7.0, and Squarespace is still updating this version and still supporting this version and have indicated that this will continue. They're still tweaks being made to version 7.1. Onda change into 7.1 is quite different, so I'll be creating a new class in the future when 7.1 has settled down. And but for now, this classes on seven point OAS, this is, I believe, the best option for now. So if you want to double check if you've already created your site, If you want to double check? Walk what version you're on. You can head into your a website builder here and click on help and then you can see at the bottom. There it says version seven point. Oh, and it also says, what template family we're in right now. So that's just how you can check that eso Let's carry on with the class Now that we all know that we're going to be in 7.0 Andi, get building our website. 5. 10 Step Squarespace Flow: Now let's get started with Squarespace. We're going to be using my 10 step squarespace flow, which is available as a download in the class resource section. I'd recommend downloading and printing this off so you can keep a track of your progress. And if you have to step away halfway through the flow, you can mark up where you got Teoh. I've also added some space where you can make notes. So whilst we're analyzing some of the templates on squarespace, if you want to make notes against them, if you do this on the document, then it keeps everything in one place. Andi, I've added a check box against every step because it always feels great when you take something off. So grab your mission statement and your website inspiration. And let's head to squarespace dot com. If you want to take a look around squarespace dot com. If you haven't visited the website before, then do that now. But we're going to get straight on with the get started button to start our free trial. When you click through on the get started button, it brings you to this page where if you want to, you can type in what the goal of your website is. But seen as we've already done that in our research, then we're going to get straight on and skip to templates. Typing in what your goal is for your website here can be useful. But then Squarespace takes you through and limits the templates that you can see and seen as we've already done that so that we know what the goal is for our website. We don't need to do that. We can go straight to templates so utilising the existing categories that Squarespace has given us down the side here and also crucially, our website inspiration. We're going to take a bit of time to analyze the templates, have a look around, click through the different options and just get to grips with what Squarespace offers us by way of templates. If we take a look in more detail at the photography section, then we can see it gives us a selection of templates aimed at showing off images, so the image is a big on the screen. They take up most of the space, so there's not much room for text, and it's all about showing off those photos. Also remember at this point to refer back to your inspiration website. So I've actually done a split screen here where I've got the Inspiration website on the left on Dsquared space with its various templates specifically on photography. For this example on the right hand side so we can see there's a few templates that I kind of have a few similarities with e inspiration website and but I like the look of this on here that talks about having a full bleed carousel for the images. So to get a bit more of an idea, if we refer back to the inspiration website weaken, see, that's the look that will get if we have a full bleed image. So that just means having an image that spends the full width of the screen. So it's quite impactful on the carousel aspect just means that you can scroll through various different images on that full bleed. Okay, so let's get rid of the inspiration website. I think we found one that I like the look off. Um, if you hover over the image you can see, you can click preview to get a closer look at the template that you like the look off so you can move around the website in this preview, use the buttons and the links as it would work in real life to give you a better idea of how that's gonna look. Take a bit of time here to look around the templates, open up the preview, cook around and see what you think, and looked through a lot of the different ones in the different categories. There's no rush here. It's good to get it right at this stage, referring back to both your mission statement and your inspiration website. You can change templates later on with Squarespace. It does help you do that, but it is a bit of a pain. Believe me, I've done it. So when you're in the preview section of a template, if you like the look of it, you can go up to view demo, which gives you a more fully immersive preview. So it opens up that website. Demo has a full screen, so you can really get an idea of how that's gonna work online so you can see here. The images are really the focal point of this website. They're big and clear and bright on the blood page. Again, there's room for text and writing, but it's more all about the images. So this is just a good way to get an idea of if the templates going to match with your website inspo and your mission statement and how you want your website to look later down the line, if possible, let's try and pick a template that most closely matches what we want. A lot of this on squarespace can be changed, but the less we have to change now, the more we can get going on the fun part of sharing our side hustle. Once you've found a template that you're happy with, we can go back into the squarespace preview and go to the top right hand side. Start with this design. At this point, you need to either create an account with squarespace or log in if you already have one. This means that Squares based will be able to remember what you've done. It will be able to save all your work in real time, and you'll be able to come back to it at any point. So the good news is now you have a 14 day trial with Squarespace for free. So you have your website. Welcome to your new squarespace site and we can start getting into the nitty gritty of editing the pages and creating the content. So there it is, your new Squarespace website. So on the right here, you can see the preview window feel. Squarespace website on on the left. Here are the menu options where we're gonna be able to go in and edit everything to do with our very own website. The edit could be changing as much or as little as you want. In the next lesson, we're going to look at starting with the structure of your website by using the pages section. Also, you can hopefully see there. How doing that? Initial research at finding our inspiration website and working out our mission statement can really help speed up the process so we can get straight in there and get the website started and get editing and doing all the fun parts of our side hustle. So that's lesson for finished. Well done for now. Yea, you've got a website started. So take a break, have a cup of tea and let's get on. But the next lesson 6. Wesbite Structure: onto Lesson five website structure. Let's get building our websites from my experience. It's best to start here with the structure of your website. So, firstly, we need to think about what pages do we want to have within our sight. It might be easier at this point to grab a pen and paper or your new notebook and jot down a few ideas. Let's start with pages in the middle of a mind map normally and about. Page is a great idea, and that's often the first place I had to when visiting a new website. Ah, home page can also be a good idea as it helps to navigate around the site as you always know how to come back to home. And then it's down to your specific side hustle. Remember your mission statement and what you're trained to do. So for our photography example, our mission statement was to share the beauty of nature through landscape photography. To encourage others to go outdoors focuses on nature and outdoors and those images. So if we divide that down into sections, we could choose toe have three separate pages, focusing on individual aspects that we love about nature such as trees, hills and rivers Back over at Squarespace. Andi, for starters, let's just check on our website that we can see our site is still private so no one else can see our website yet it's not been launched because we're still in the free trial. We can do all our editing, but the website isn't actually live. So when we're ready, we can upgrade to publish and we can make it public so anyone can see the site. But for now, only we can see this. We're going to start with pages to build our website structure. So I didn't see under main navigation. Here we have the menu headers that correspond with the top of the website across here. So we've got latest mortem ascends about on blogged. So from our quick mind map on what pages we want in our website, we know that we definitely want on about page so we can utilize the existing about page that's just in demo mode at the moment. So if we click through, we can see the fictitious photographer John and his about page. So we might as well utilize this if we've taken the time to work out. I was graced based template to really match our website inspiration and our mission statement. Then it's a good idea to utilize the pages that are already in the template as much as possible. Just rewrite the content. So we're still in demo mode at the moment here, so we just need to click on the settings cog on the side. That brings up this about page for settings here, and we can see that the demo version has gone from here. So we know that the page is now part of our own website, so we can just save that there. So if we click on site title that's linked to the home page of the moment. So Home page was the next thing that we wanted to have as a page to our website so we can see on the left here. The home icon is currently next to the page titled Latest, which is a gallery page, so these icons are along the menu. Navigation means something, So the icon here is for a gallery. This is just for a blank page, and this is for a blocked page. So at the moment, the home page is a gallery page, so let's start a new page and have a new home page for our website. So using the plus at the top here, we can create a new page. So along here, we've got all the different types of pages we can create have already seen. We already have a blood page in a gallery page. We're just going to make a new blank page that we can call home. And that's then added to the main navigation along the top here. So the moment this page is empty, which is great, you know, we can start at it and added our own content and our own layout when we get there. So to make the home page the home page, we just need to click on the settings cog there, scroll down and set his home page. There we go. So we've got home is now our home page. But this website also has a blocked page, which at the moment isn't part of our website structure plan, so rather deleting it. I'm just going to drag this down to be unlinked unlinked king. The blood page means that we're still able to see the lay out there, which could be useful for the future if we ever want to point of reference to bring back in a block toe our website. But for the moment, it's not going to be unlinked, so that just means, but it's no longer part of the head and menu there. But the page does still exist. We haven't deleted it altogether. So lastly, we want three gallery pages for our trees, hills and rivers. There's already two gallery pages here, so why don't we just repurpose the first to to be our trees and hills and we can add in a last gallery page for our rivers? So if we click through, we can see it's telling us that it's an example Page. You can either copy it and add on content or remove it. So in this instance, we want to copy it so that we can use this for ourselves in the future. But we are also able to use it to get an indication of what the page will look like when we fill it in with our own content. So we don't want to call this one latest, so let's click on the settings cog and change the name to treaties. Change the URL slugs so that it's relevant to the page name and change the page title and just click save. So there we have along the top home and trees never go back and do the same for the Motema stands option, and we're just going toe copy page. Use the settings cog and change this to B pills. We're not going to worry too much about what else is in this panel. At the moment. We'll save that for later. So finally we want to add one extra gallery page. So we just go to the page button there and click on gallery, and we're going to call this one Rivers and we can see that this is empty compared to the other pages where we've repurposed the content. So this is ready for our own content there. So the moment Rivers is out of order so we can just drag that down here, and it will realign home trees, hills, rivers and about. And we're just going to drag about up because, as we discussed in the page, planning about is an important page, and we want that to be next a home there. We have our structure in place. We've got our home page about trees, hills and rivers. That's less and five finished. Well done. We're nearly there. We've got our website with our website structure in place, so it's ready for us to populate it with our own content. Next up, we'll have a look at how to do that. How to add in some of our own images on our own text. 7. Website Content: in our final lesson on website content, we're going to look at filling in that structure that we've already got in place with our own content. So our own images and our own words there we have our structure in place. We've got our home page about trees, hills and rivers. Now let's do something about that empty home page that we created. As you can see when you hover over the preview window, these tubs come up that, say, edit and settings. If we hover over the title, it tells us that that's the site title and it gives us the edit option. And if we hover over here, it tells us that that's the navigation and it gives us the edit option. So for now on our home page because this page is empty, we just want to start editing it and adding in a bit of content. So if we click on edit, it takes us to this full screen editing page. So here we have an insert point. I like to call it a raindrop, so if we hover over the raindrop we see, we get a line the full width of the page so that tells us that once we click on it and we see these content blocks, those content blocks will fill the full size of the page. So the content blocks available to us. We've got basic ones up here, such as text or image. We've got some options here for different ways to display an image. We've got some gallery options down here, some summary options and some more filters and lists, commerce charts, social books and then premium, which you have to pay for. And so the Christ lot of options up there. But everything you need realistically is in basic or potentially an image layout or gallery or summary. So on this front page here that opens up. So on our home page, let's inset an image as our first thing because remember where a landscape photography website and it's all about those images free upload an image. It just takes you to your documents folder, and I'm going to use this image, which is a photograph I took in a recent trip to Japan, has got some trees and a river in it, so it's gonna take some of the boxes for this particular photography page. We can add in a name as well, which isn't as it says here. It's optional, but it's good practice to at that in Let's just call that home image and that's going there . So if we click, apply and go back up to the top here to save that, then we can see our home page now has a great big image on it, which is brilliant. We can also click on this arrow up here to give us a full screen preview of our website. This is how page would look okay. We've got our image on the home page. I think it would be good to at the mission statement along the top as well. So if we go back to edit on this page, Andi, find one of those insert raindrop points and full screen for with so our blocks that we can add in. I am going to add this in as a text block so we can see as we start to write that will add it in. So our mission statement waas to encourage others to go out doors. So that's our mission statement. And so you see, we've got a few text options up here, Teoh be able to edit it so she pop that into bold. So it stands out and we can centralize it as well. And then there's a few other options along here, and but we don't really need to worry about them. So if you just click off that, we can see that that's there. And so another thing that's quite useful. Another block that's useful to be able to add in is a space a book. So this is how you would create the visual layout that you want for your website. See you at the blocks of saying image text and the new spaces to create space around them so that they sit where you want them to sit. The hand icon pops up over the spacer, which means you can drag it to wherever you want it to go. And if you see if you drag it to the side here, a line comes up on the right hand side, which means that space is going to sit to the right rather than the long line that comes across the top. It adds in a column, and we can make that spacer have it smaller and then if we I did another one on the other side and just drag it when the line comes up there on the left and make that a tiny bit smaller so we can use thes spaces to make sure the texts. It's exactly where we want it to sit. So right there in the center, I think that looks quite good. And then one last touch, Um, I just I didn't align block, so that just literally brings in a line which will help to separate and can just Sometimes I had that little bit of finish a little bit of Polish Teoh Page. So we click, save and then we can see if we go back to the full screen. That's how it's looking at the moment. So obviously your site title is not the name of our website. So if we hover over site title, we get the edit option that brings us in to be able to edit this. So on the screen on the left, we can see we've got site title and tagline. So at the moment we just have a citatah, which we want that to be either. The name of our website or our own name. And so I'm just going to call it presented photography for now. And if we have ah, logo, then we can add that here. I'm just gonna use the fact that we've got this nice, big, bold front and hit save. So we just navigate back out of design and back to pages and make this full screen and we can see we've now got a home page with our name on it with our menu navigation, our pages structure set out how we want. We've got a mission statement up in the centre front there to tell everyone what we're about. And we've got a nice big image on the front page to reinforce the landscape photography aspect of the website. So let's have a look at about page, because currently it's still on John, the fictitious photographer. So if we hover over here again, we see page content and it gives us an edit option. We can edit the image and we can edit the text. So let's just go in and edit this again, utilizing what was already there and just put in a quick bit about us, and I'm just going to take that out for now. So obviously your about page will be a bit more elaborate and say a bit more about you and and your mission statement again and what you're up to, Andi, let's go in unchanged the image because I am not John. So we go back to edit. And so I've got John here. So if we delete him and click upload an image, it takes us back to our documents. And I just got this a picture of me in Edinburgh, they dio. So if we could apply Andi save go back to their full screen view, you'd see it would look over to see a bit better with more text along there. But for now, if you had to, about you able to see a photograph of me, Andi, lend a bit more about me. Uh, but to the home page and I've decided I'm not to fund of how this is looking. So I'm going to go back in and edit this, and I think I'm going to take out these spacer blocks, which is very simple. You just hover over. It tells us it's a spacer, and we hit. Delete. Yes. Who saved that on, and I think that just looks a bit clean up. We've got the mission statement across the top. There we could navigate around and see how everything's looking. There I am, and all that's left to do in our trees, hills and rivers is to add in some of our own photos. If we want to add a few of our own images to our trees gallery page and take out John's photos, we can go in to trees here, which brings up art gallery edit box on this side. I'm just going to select all and remove those because we don't want drones pictures, and so now is telling us the collection is empty. Click here and it brings you back into your documents books. So I've just made a folder in here called Trees. So selected all of those toe Adam in one go, I will upload those images into our trees Photo gallery. Now our tree images uploaded, and we can see them in the gallery here. So this is the full bleed carousel. We can also drag when we hover over the image. Here. We can drag the images to rearrange them if you want to change the order of thumb so that just refreshes in the preview window. And if we go to full screen, we can see how our gallery is going to look when someone comes and visit our website. So our website there is starting to look pretty good. We've got a home page that we've created our about. Page Andi. We've got one of our gallery pages with some images in so one thing that was really useful for adding the content to the Web site. I was having all the images on hand ready to go so that when we click on the upload button , it takes a straight to a folder where we've already decided what photos were going to have in our website. So even if you're not doing an image based website, but you have blogged pages or blocks of a lot of text, it's a good idea and best practices to write that up ahead of bringing it into the website . So either in word or in pages document, and then you can just copy and paste that across. In that way, it's safe. You can even write it off line then, as well, because you can only edit in squarespace here when you're online and there's our website. All that would be left to do now would be to add some images to our hills and Rivers section and then keep on creating that content and adding it in in my next full skill share class on squarespace, we're going to look in a bit more detail on the design of our website. So looking at sites, styles, funt colors, things like that and also having a bit of a look at Logo's. So be sure to follow me on skill share so that you're notified as soon as that class becomes life. Lesson six finished Well done. We've got our own website now with our own structure, with the pages in it that we've decided and we've created. We've started filling it in with our own images on our own words. So now we just need to continue to do that. We can look in more detail later at the websites style and look an aesthetic. But for now, let's celebrate that we have our very own website 8. Summary: there we have it. The end of class one, and now you've got your own website. Next up, we're going to be focusing on the look and style of your website, so be sure to follow me to get notified as soon as that classes life. Don't forget to add your class project with your observations. As to its structure, color, scheme or layout, I'll be available under any questions you might have.