 What's going on everybody? Welcome back to another video. Today I would be walking you through how to create your very own portfolio website. Now we just completed our data analyst portfolio project series where we walk through four projects in SQL, Tableau, and Python. And so if you have completed those projects, you now want to share them with potential employers. And I think the best way to do that is to create your own website. In just a little bit, I'm going to show you two options on how you can actually create your own website. The first one is a website builder like wix.com. And the second one is hosting your own website through something called GitHub Pages. Now if you have never created your own website before, it can sound a little bit daunting. But don't worry, I'm going to walk you through every single step of the way from the very start to the very end. And once you reach the end, you will have a complete data analyst portfolio website. So without further ado, let's jump on my screen and let's get started. All right. So the website that you're looking at right now is the actual website that we are going to build in this video is hosted on GitHub Pages or github.io. So this is actually being hosted right now by GitHub Pages. So if you type this in, I'll leave a link in the description. If you type this in, you will get this page and you can check it out for yourself if you don't want to just watch me look at it. So it has this little header and you can write a little bit about yourself. And then these are actual projects. So this is our data cleaning in SQL project. And then there's the COVID data exploration, Tableau dashboards, movie correlation with Python. This is a future video I plan on doing a few more of these projects because I just really enjoy them. So, you know, and then there's this contact information at the bottom. So it's a really simple website. And it gets the point across and I have something similar to this from my own personal one. I use a different variation, but this all comes from this website HTML five up. There are lots of templates, lots of options that you can use. Again, the one we're going to be working with is this one, but I use a different one for mine and they are really good. I mean, super easy to build and customize yourself. And I will say again, I have no experience doing this. I just watched a YouTube video that showed me how to do this. And now I am creating my own YouTube video to show you how to do this. So it's coming pretty much full circle. So like I said, there's no no real narrative to it. It just clicks to your project. If you click on this and let's just open any tab, it'll take you right to our the GitHub project. And then you the whoever's checking this out like a an employer or a recruiter can see your code. So super simple. Another way that you can do this is kind of creating your own website through like a template or something like that, almost like a blog style. So I imagine it being very something very similar to this, where there's this introduction and you can talk about, you know, where you got the data set, how you got the data. And then you can kind of have a more narrative approach with screenshots and with some code as well. So you know, this person included screenshots. And then there's the code right here that I can actually copy and paste that. And it just walks through the logic of how the project was done. There's a story to it really. And so that might be something that you're interested in. Now, I have done something like this in the past and I used Wix and there's a you can do this completely for free. The one we're doing today is completely free as well. But you know, if you want the customized, the customized URL, you do have to pay for it on Wix, but you can get a free Wix website with the Wix in the URL. So, you know, try this out. These are super easy and you can find thousands of templates and a million tutorials on how to do them. So that's not the one we're going to be working on today. So with that being said, the very, very first thing that we need to do before we do anything is actually download Visual Studio Code. This is where we're going to download that HTML and we're going to be working with it in there. Again, I don't know if I said this before, but it seems a little bit intimidating at first. But once we actually start looking at it, it's a lot easier than it looks. I promise you. So if you are me and you have a Windows computer, you just go right here. You'll install it. Super easy to install. I'm not going to walk you through how to do that. Of course, I already have it up and running down here. So once you have that installed, what you're going to do is you're going to come to this website. A link should be in the description. We are going to download this. All you have to click is the free download. It's going to pop up. I'm going to put it in my downloads. I'm going to click Save. Fantastic. So let's go to the downloads and it should be right here. Now, if we open this up, it has a few different things in it. So I'm using the Brave browser. So that's going to be right here. So that's the symbol. But for you, if you're using Google Chrome, that should be the symbol there as well. But this is everything that you should be seeing. And what we want to do is we want to take it out of this zip folder because there are things that can read into it with Visual Studio Code, but I want to make this as user-friendly as I possibly can. So what we're going to do is we're going to create a new folder. I'm just going to call it massively, or you can call it port website, whatever you want to call it. I'm just going to do port website. And we're just going to, I'm going to copy this in. I'm not going to cut it in just in case I make a mistake. So I'm going to put all of those things in here. And now what we're going to do is we're going to go to Visual Studio Code right here. And you should be greeted with this right here. And we're just going to click open folder. And we're going to go to port website. And we're going to go select folder. And you're going to say, yes, I trust this one. And right over here is all of the documents that we were just looking at. Now the only one really that we're going to be working in, we'll work a little bit in the images because I'll show you how to add your own images. The really the only one we're going to be working in is this index. So again, it looks complicated. If you've never looked at HTML before, it does look a little bit complicated. But HTML to me is one of the more easily understood languages. Once you start kind of getting into it, which we're about to, we're going to walk through the entire process, it actually makes a lot of sense. And it is pretty simple. Something that you're going to want is you're going to want something called a live. So like, if I click right here, and I click open with live server, you don't have that yet, I'm guessing unless you've done this before. It's going to open up this website. And this is what we're looking at right now. So it says a bunch of gibberish or some language that I do not know. And so we can view this live. In just a second, I'm going to take myself off screen. But before I do that, let's download or let's search for that live. I think it's called live share live server. Let me see what this is called. Yeah, live server. So come right here. It's called this live server. There it is. Yeah, that's the one. So this is our live server. You just need to click install. It takes like five seconds. And it should be completely installed. What this does is it just hosts a local website. It's not something that anybody can access. But it connects to your code. And when we make updates, it'll make a lot. You can see it live. You can see those updates live. So I'll show you all that in a second. Just be sure to download that or install that. With that being said, let's get out of this. Let's go back right here. With that being said, I am going to take myself off screen so that you can see everything that I am seeing as well. It's been really great seeing you. Have lots of different videos coming up. Lots of new projects. I really enjoyed this project series. I think I'm just going to do more of them. So all right, I'm going to get myself off screen. So let's look at what we actually need to do. So I'm going to... So let me see. Okay, so we're already connected to the live. Actually, I got rid of it. Whoops. Let's pull this over and let's pull that. And we're going to open in live server. So if we look right over here, and I know it's going to be a little bit squished, and I'm sorry about that. But if we look right over here, this says this is massively. So you can change that. That's this right here. And you can say... We're going to say Alex, the analyst portfolio. And we'll get rid of this massively. I'm going to hit control save. You can also go up here and hit save. But I'm going to hit control S. So I hit control S. And just like that, it updates on the website. Now again, this is just a local. So it's nothing that anybody can see. So don't worry. But what we're going to do is I am going to walk you through the entire process of creating this. And then at the end, I will show you how to host it on GitHub. And honestly, it's a fairly easy process. It just takes a little bit of time to customize it all. So let's get into it. So we have this... You may not be able to see it. Let me actually pull this up. So it says massively by HTTP. We're going to customize that as well. Whoops. I don't want to do that every single time. I'm going to try not to go full and go back and everything like that. So we're just going to say Alex, the analyst portfolio, control S. And right up here, that changed it, you may not have been able to see... Yeah, don't ask me that again. Thank you. Right up here, you probably can't see it. At the moment, we'll see that later. But it customizes this tab, which is really cool. So let's go right down here. Now, this is where it says a free, fully responsive HTML5 template. We can customize that. And I highly encourage that you do. So what you can do... And they actually included their Twitter handle right here. And you can do the same. If you look at this one right here, I included my Alex, the analyst handle that goes to my YouTube channel. And you can do the exact same thing, include your LinkedIn or your GitHub profile or whatever you want to include in there. And so be aware that you can do that. So let's say... Oops, I need to click back in here. So we're going to say data analyst, skilled. And then again, don't write what I'm writing. You can. I'm just going to make it really simple. But this part is meant to be a little bit about you as who you are. So I'm going to say data analyst, skilled in SQL, Tableau and Python. And then I'm just going to get rid of all of this, everything from here over. And control S. And so it's super simple. Actually, let me... What was that for? For... Here it is. We don't need that. Actually, we don't need anything from here over. Probably here, honestly. Let's see what that looks like. And yeah, and I can... Again, you can use any website right here that you want. And you can customize what it looks like. So I'm going to say Alex, the analyst. And then whatever URL you want to include in there, that's what you need to put. So now if I save... Oops. If I hit control S. So now it says Alex, the analyst. So pretty easy. Now we're going to go down. And you can use this however you want to use it. I would... You can even make this... You can make this like one of your readme's about you and put the link for that. I decided to include, again, on this one, I decided to include the project that I thought that we've done that was like the most impressive or the... I don't know, the coolest one. I don't know if you consider data cleaning and SQL cool, but I do. I think it's cool. So I included that one as my very first one. So that's what we're going to do right here. So we're going to go down. And it's going to say... Let's say it says this is massively... That's not it. Cool. So let's see what... Oh, okay. I know what that is. We'll come back to this up here in just a little bit. I'm going to go full screen. I'll show you what this is. And then we'll come back to it. But if we go right down here, this is what they're calling a featured post. And then the ones below this are posts. So in our featured post, I'm going to get rid of the date. I don't want them to know that I just created it like... I don't know. Oops. I keep doing control A, selecting everything. Whoops. So we're going to say data cleaning in SQL. And we'll get rid of this and control S. Again, I'm just updating it a lot so that you see what I'm doing and where it's going. And we're going to get rid of basically all of this and go back. And we're just going to say in this project, we clean data in... We clean... Let's do... We clean housing data in SQL Server and control S. So super easy again. Give a little bit more description. I did in my other one. And you have the... You can see that website. So go check it out. And then we'll have an image. I'm going to show you... At the end, we're going to go back and redo all the images. But I'm not going to do that at this very moment. So what we're... Now you can have this full story. I chose to do view project. And I get control S. It says view project. I think that just looks better, especially if you're displaying a project. I think it is nice. And now we go into all the individual posts. Actually, no, wait. What I want to show you really quick is how you actually link it to this. So let's go right over here. This is our COVID... That's our COVID one. Here's a data cleaning project. So all you have to do is take this website. So that's the URL. And you're going to put it right here. Now there's three different places. This href are places where you can put a link to a website. And on here, it references this right here. So they can click on this data cleaning in SQL. They can click on the image because you know this href is right next to this image. They can also click on the view project button. So you can put it in all three. And you'll just go like this. You'll stick the URL right where that hashtag or pound sign is. And then we're going to save that. Oops. Oh, this is embarrassing. I am not a website. I am not a web developer, as you can see. But then if I go in here and I right click and I say open link, it is going to take me to that project. So super simple. And we're going to do basically that for all of these. I'm only going to show you three. And then you can do the rest. But I want to show you how to also do the, put the tableau. It's the exact same thing, but you know, it's different. So I wanted to show it to you. So the next one that we're going to do is go down to posts. And again, I'm going to get rid of this date. You can keep that in there if you want. Excuse me. And that's totally fine. Just update the date. This is that said magna. Again, I think this might be like some language I just don't know about. The next one is data exploration in SQL. And I'm going to get rid of this. And we'll save that. Perfect. And we'll do view project. Cool. And yeah, so now we need to customize this summary. And so I'm just going to say something really simple. Data exploration of COVID-19 dataset in SQL server. There we go. Let's save that. We have view project. Now let's go get our project. So this is the data exploration. We're going to take this. I'm going to copy it. And I'm going to put it right in here. And right in here as well. And if you want to, you can also include it right up here. So we have it in all three places. Again, once you click on these, they will come up. Let's go to the next one. We're going to get rid of this. This one is going to be our Tableau projects. Actually, let me just copy that while we're here. This is going to be our Tableau projects. So if you have one specific project that you want to include, what you would need to do is actually go in here, click view, grab that URL. What I am doing is I'm just sharing my Tableau public page. So if you have tons of projects in here and you want to display all of them, then, or you want them to be able to see all of them and go and pick and see and choose what they want to look at, then just choose this URL that we're choosing right here. So in here, in the HTML, we're going to put, I'm going to put Tableau projects. And let's go like this. And then we will get rid of that hashtag, pound sign, whatever you want to call it. And we'll hit Ctrl S. And oh, we got to do this as well. This is my, this is going to be a terrible, don't use this. This is my Tableau. This holds, well, I'm just going to say this is bad. This holds all of my Tableau dashboards. Don't, please don't do this. I am doing this because I don't want to take forever in a video to make it perfect. And then, you know, you're going to do the exact same thing. So in this one right here, I included four. So I'm going to keep four. Let me do the, no, I'm just going to do these three. I'm not going to take up more of our time. So we did those. I'm just going to keep these three in for visual purposes. But once you get down here, you know, what we're going to do is delete some of this, right? So we, this is our data exploration. And where's our Tableau? This is our Tableau right here. So Tableau projects. They're separated by these articles. So what we're going to do is go down right here. And we're going to go down, down, down, down to right here. This is going to get rid of all these other articles or all these other, what they're calling posts. So we're going to get rid of those and we're going to hit save. And now as you can see, we have our header. We have our first project and we have our second and our third. I would include those other projects that we've done in here so that it looks good. This is this footer right here. We don't need that because we don't have any, anything else in there. So we're going to get rid of that as well. And now we just have this information. Now I don't have anything where they can do the name, email message, or you can keep that in there if you'd like. But I am going to get rid of this. So we're going to go right here. That's the section. So don't delete the section. We want that. I'm going to delete this footer section is what they're calling it. And now we have this address, phone, email, social. And I'm going to get to the social in just a second. Again, super easy. But for the address, I just put location. I don't want to give somebody my address or put it on a website anywhere. It's not something I want to do. So what we're going to do is just put, I'm going to put Dallas and Texas. And we can keep it like that. And we'll hit, oops, we'll hit save. And it'll have Dallas, Texas. I hate the look of zeros, six, seven, eight, nine, zero. So we're going to do that phone number, one, two, three, five, six, seven, eight, nine, zero. And then email and we'll put Alex, the analyst, 95 at gmail.com. If you have issues with this, you can email me. But I'll try. I will try to respond to all your emails. I get a lot. So I will do my best. That is my actual email if you were curious. Now that we have this, we also have this social media. Now I want to display my LinkedIn and I also want to display my GitHub. So what I'm going to do right here is I'm going to go over here and do LinkedIn. Perfect. Let's go to this. So I'm going to take my LinkedIn URL and I am going to get rid of these first two because I'm only going to include two. And for this one, I'm going to do LinkedIn. Oops, LinkedIn. And then for right here, I'm going to replace that with LinkedIn. And what you're going to do is put this link right here. And then we're going to go get the GitHub. So let's do GitHub. Oh, who's this? Sign up. Where's it going? There. Let's just go back here. That was something I was like viewing a while back or something. So we're going to take the GitHub and we're going to put that right here. So it already has it as the GitHub. Is this supposed to be lowercase? I think it is. Let me see if this is lowercase as well. Yeah. So do it like that. Do it lowercase. I forgot that that was how they did it. And that's the label. That doesn't matter as much. But this right here is the class is actually the important part because then when we go back here, there is no LinkedIn image. But when we save it, oops, when we save it, it has the LinkedIn image because it's already a class that was created in this HTML template. So we have that. And let me bring this full screen really quick because there are a few things that we couldn't see in that screen. These right here are things that we could not see before. And these as well. So what we can do is we're going to go down here. We're just going to copy these social. We're going to replace them right here so they can have those. And then we're going to get rid of these two right here. And this says this is massively, and we're going to change that as well. Let's make this full screen for the first time. Feels good. I hate doing split screen, but I do it for you guys. So this is massively. And we're just going to put, we're just going to get rid of these two. This is it's called the navigator, the different tabs. We're going to get rid of those two tabs. And then for this, I'm just going to call it projects. And all once I once we go back and update all of this, then you will, you'll see those changes. So let's see. So we made those changes. Here's our social or the social medias, social media stuff. We're going to go and copy these two. And we're going to replace all of these with this. And let's save that. And let's go back. So now as you can see, those two are gone. This says projects. There's only two right here. And if you click on it, it's going to go to my LinkedIn or your LinkedIn when you do it. And this will take you to the GitHub. So it is all working as intended. This is great. When you scroll down, and this says massively, we can change that as well. And we should, let's do that really quick. We'll just say Alex the and we'll update that. And there we go. So in a nutshell, this is a lot of it. We need images. And I don't think I set this up for this video. So I'm going to, I'm going to cut myself off for like two seconds, go pull those images in because it could take like a few minutes. I don't want to waste your time. And then I'll come back. So I'll see you in two seconds. All right. So I just pulled over the images that we are going to use. Let's go to the downloads. They're right here, the housing, Tableau and COVID. If I open up this COVID one, this is what the image looks like. This is what we're going to use for that COVID project. So I'm going to copy these. I'm going to go into the port website that we just had. I'm going to go to images, and I'm going to insert these in here. So now that we have those images in here, let's go back and let's see what we got. So we just put these images in this, you'll have this folder right here. And you can open it up and you can see all of these that we have. So all we're going to do is go and replace the images, these, these, you know, temporary images that they had for us. And we should be golden. And then we're going to actually upload it to, to GitHub and then create our website for free. So let's go right down here. This is our very first one. This is our data cleaning in SQL. This is with the housing data. So this image right over here, it says images slash pic01.jpg. So JPEG. I don't know why I said it like that. So this is the housing. So what we're going to do right here is do housing and it'll autocomplete for us. So that housing should be in there now. Next one is the data exploration in SQL. That was with the COVID. So we're going to get rid of this. I'm going to say COVID because that is the image that I have right over here. And then the last one is, excuse me, Tableau. So let's go right over here. Let's do Tableau. Let's get rid, oh, I got to save that. Control S, perfect. And now let's look at it. There you go. There you go. Oh, this one still says full story. Go change that. I'm going to go change it. It just doesn't feel right. View project. Ooh, that's not how you spin it. Okay. Control S, perfect. Okay. So now this looks a lot better. And when we host it through GitHub Pages or GitHub.io, this is going to be what it looks like. I mean, it is, and you can add a lot more to it. You can take away from it. You can add as many projects as you want. You can keep adding or you can copy those articles or those posts and you can just keep adding them. So this is kind of what it's going to look like. And it was not that hard. I don't think, I hope this was not too difficult. I really don't think it is. It's really just using a template and kind of understanding a little basics of HTML. So we are going to take this and we have this saved already. We have this all saved. What we are going to do now is upload this to GitHub. So let's go right over here. Let's go to here. And let's go to repositories. And where's the new one? Oh, I need to sign in. Okay, I'm going to get rid of this part so you can't see it. So we are going to say a new repository. We are going to call it alex theanalyst2.github.io. So we're going to write it just like that. You know, if your name is Alex Jimmy, I don't know why he said Jimmy, Alex Jimmy, Alex Jimmy .github.io. You can always go back after the fact and change this. So it's not a big deal whether you change it or not. And we are going to create this repository. We are going to say upload an existing file. And instead of choosing them, what we are going to do is just go right over here. Go to this. And we are just going to copy this in. Or not copy, but drag it in. Okay, so we are going to take this, drag it in right here. And it will take a little bit. It says it's 75. But it shouldn't take that long. And let's just wait for it. As I can sip of water, I apologize. But it is literally uploading just everything that we had in there. So all the updates and all the changes and all the stuff that we had. And it looks like it's done. So let's just write initial commit. Commit changes. It is processing it. Right. And it should be done very, very soon. As long as I have a good internet connection. We shall see. Stick with me. It's taking its time. While it's loading, let's go over to... Oh, no, there it is. So perfect. So here's everything that we have. Has this readme that it generated. Let's go over to settings. And we have this github.io. And if we go right down here to github pages, pages settings now has its own dedicated tab. Let's check it out here. So it is it's currently disabled. But we're going to say we want it to do pull from the main. My, I think it's the docs. We'll see. I'm going to save this. Your site is ready to be published. Let's open this up. Okay. Site not found. Maybe it's from the root. Save. Your site is having it build a problem. Let me see if I can actually change the name. I already have an Alex to analyst, but I'm going to see it's already taken. I'm just going to try this one more time. Oh, and now it's working. I have no idea why it didn't work before. But this is fantastic. It was giving me all this... Maybe I was just reading too much into that. I had never tried to create another .io or github pages on this. So anyways, thanks for sticking with me through all that stuff. So now we have our actual website. It doesn't look the same up here because of that thing that we were just looking at. It should just be this part right here. But this is an actual website now. It's being hosted through github and it's completely free. If you want to pay, you can hide this from your github. Your repository has to be public. Something I didn't mention. When you're doing this, your repository has to be public. If I change the visibility to private, you will not be able to see it anymore. You'll have to then pay if you want to make this repository private. You have to then pay, I think it's like $4 a month or something like that. So worth looking into if you don't want to display that on your github. Worth looking into. But this is our final product. I mean, it looks pretty fantastic. And you can use any of these templates, right? There are lots of different templates that are fantastic. I mean, they look amazing. They look professional. It's really up to your style. Like this one looks kind of cool, a little bit edgy for my taste. But this one looks really good too. Might be able to add some more narrative to that one. So again, go through it, make a good choice in it and then update it how we updated it. I will include the, let's see, I will include everything that's in here and I'll keep this on my, on this github that you can go in there. And if you want to download these images, you can download the images that I used or you can go find your own. Just look for, try to get like HD images on Google. Just type in Google images and search for whatever image you want to search. Try to get an HD image. With it being said, that is the entire project. I hope this didn't go too long. This may have gone like 30, 45 minutes. But at the end, which is where we are now, we have an entire website. It was completely free. And I hope that you can now host the projects and you can create more projects. I will be coming out with more projects myself that hopefully will be interesting to you in the future. So with that being said, thank you guys for joining me for you who stuck it out to the very end. You are fantastic. You know, send me a post to your website on LinkedIn and tag me in it because I love seeing you guys do these projects and this stuff. So I'm super excited to see all of these that you guys tagged me on on LinkedIn and whatnot. So with that being said, this is it. I hope you learned something. I hope that it worked for you and I appreciate you watching. Be sure to like and subscribe below and I will see you in the next video. Goodbye.