How to Create a Portfolio Website for FREE

what's going on everybody welcome back to another video today i'm going to be walking you through how to create your very own portfolio website [Music] 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'll 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 um it 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 you know 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 coveted uh data exploration tableau dashboards movie correlation with python um this is a future video i plan on doing a few more of these projects because i just really enjoy them so um 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 uh i have something similar to this from my own personal one i i use a different variation but um this all comes from this website html5 up there are lots of templates lots of options that you can use um 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 um if you click on this and let's just open a new 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 um 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 uh approach with screenshots and with some code as well so you know this person included screenshots um and then there's the code right here that i can actually copy um and paste that and it just walks through the logic of how the project was done um 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 free 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 um the customized url you do have to pay for it on wix but you can get a free wix website with the wix um 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 um so that's not the one we're gonna 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 or 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 okay so um i'm using the brave browser so that's going to be right here so that's just this 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 it's 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 make create a new folder i'm just going to call it massively or you can call it um port website whatever you want to call it i'm just going to do for website um 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 um all 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 um this right here we're just going to click open folder and we're going to go to port website and we're going to select folder and you're gonna say yes i trust this one and right over here is all of the documents that we were just looking at now the one that the only one really that we're gonna be working in um we'll work a little bit in the images because i'll show you how to add your own images you're 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 it's pretty simple um something that you're going to want is you're going to want something called a live v so like if i click right here and i click open with live server you don't have it 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 um let's download or let's um search for that that live um i think it's called live share live server um 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 um what this does is it just hosts a local website it's not something that anybody can access um 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 um be sure to take myself off download so that you can see everything that i am seeing as well um it's been really great seeing you i have lots of different videos coming up lots of new projects um i just 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 um so let me see okay so we're already connected to the live um 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 that 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 gonna 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 gonna do is i'm 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 it's 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 um you may not be able to see it let me actually pull this up so it says massively by htp we're going to customize that 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 um control s and right up here that changed it you may not be able to see yeah don't ask me that again thank you right up here you probably can't see at the moment we'll see that later but it 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 html 5 template we can customize that and i highly encourage that you do so what you can do and they actually included on 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 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 you know be aware that you can do that so let's say um oops and you click back in here so we're going to say data analyst skilled in and then again don't write what i'm writing um you can it's i'm just going to make it really simple but you know 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 ctrl s and so super simple um actually let me where is that four four here it is we don't need that actually we don't need any for anything from here over probably here honestly let's see what that looks like um 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 um you can make this like one of your one of your read me's like 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 in sql cool but um i do i think it's cool so i included that one as my very first one so that's what we're gonna do right here so we're gonna go down and it's gonna say let's say it says this is massively that's not it uh cool so let's see what oh okay i know what that is we'll come back to this up here um 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 our 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 um i don't know oops i keep doing uh 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 sequ we clean let's do we clean housing data in sql server and control s so super easy again uh give a little bit more description i did in my other one um and you have the you have you can see that website so go check it out and then we'll have an image and i'm gonna show you um at the end we're gonna 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 hit ctrl 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 individual posts um actually no wait what i want you 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 uh that's our coveted one here's a data cleaning project so all you have to do is take take this website so that's the url and you're going to put it right here now there's three different places href is places are places where you can put a link to a website and on here it references this right here so you can they can click on this data cleaning in sql they can click on the image um as 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 you'll stick the url right where that hashtag or pound sign is and then we're gonna save that oops oh i this is embarrassing i am not a website i am not a web developer as you can see um but then if i go in here and i click 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 um 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 um this is that said magna again i think this might be like some language i just don't know about um the next one is data exploration in sql and i'm gonna 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 data set 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 we're 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 project so 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 need to do is actually go in here click view grab that url what i am doing is i am just sharing my tableau public page so if you have tons of projects in here and um 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 or on 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 uh that hashtag pound sign whatever you want to call it and we'll hit ctrl s and oh we got to do the um this as well this is my this is going to be a terrible don't use this this is my tableau this holds i'm just bad this holds all of my tableau dashboards don't please don't do this um i am doing this because i don't want to take forever in a video to make it perfect um 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 um let me do the uh no i'm just gonna do these three i'm not gonna take up more of our time um so we did those i'm just gonna 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 around 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 um 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 gonna 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 um but i am gonna get rid of this so we're gonna go right here that's the section so don't delete the section we want that i'm gonna delete this footer section is what they're calling it and now we have this address phone email social i mean i'm going to get to the social in just a second it's 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 um 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 let's oops we'll hit save and it'll have dallas texas um i hate the look of the zeros six seven eight nine zero so i'm gonna do that phone number one two three five six 8 9 0 and then email and we'll put alex the analyst 95 gmail.com if you have issues with this um you can email me but i'll try i will try to respond to all your emails i get a lot um so i will do my best that is my actual email if you were curious now um now that we have this we also have these the 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 uh linkedin oops linked in and then for right here i'm going to replace that with linked in and what you're going to do is put this link right here and then we're going to go get to get the github so let's do github oh who's is this sign up what's going on um i don't there let's just go back here that was something i was like viewing a while back or something um so we're gonna take the github and we're gonna put that right here so it already has it as um the github is this supposed to be lowercase i think it is let me see if this is lowercase as well yeah um so do it like that to do it case 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 that screen these right here are things that we could not see before um 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 um and we're going to change that as well let's make this full screen for the first time feels good um i hate doing split screen but i do it for you guys um so this is massively and we're just gonna put we're just gonna get rid of these two this is um it's called the navigator the different tabs we're gonna get rid of those two tabs and then for this i'm just gonna call it projects and i'll once i once we go back and update all 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 uh social media stuff we're gonna go and copy these two and we're going to replace all of these with this um 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 um when you scroll down and it says massively we can change that as well and we should let's do that really quick we'll just say alex the analyst and we'll update that and there we go so in a nutshell this is all the a lot of it um we need images and i don't think i set this up for this video so i'm gonna i'm gonna like cut myself off for like two seconds go pull those images in um 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 um they're right here they're the housing tableau and kovid um if i open up this covered one this is what the image looks like this is what we're going to use for that covid project so i'm gonna copy these i'm gonna go into the port website um that we just had i'm gonna 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 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 pic01.jpg so jpeg i don't know i said like that so this is the housing so what we're going to do right here is do housing and it'll auto-complete for us um so that housing should be in there now next one is the data exploration and sql that was with the covid so we're gonna get rid of this i'm gonna 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 um i'm going to go change it it just doesn't feel right view project oh that's not how you spell it okay ctrl s perfect okay so now this looks a lot better um and when we host it um 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 you can copy those articles or those posts and you can just keep adding them um 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 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 the analyst 2 dot github dot io so we're going to write it just like that you know if your name's um alex jimmy i don't know why i said jimmy alex jimmy alex jimmy.github.io um 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're going to create this repository we're going to say upload an existing file and instead of choosing them what we're going to do is just go right over here go to this and we're just going to copy this in or not copy them and drag it in okay so we're going to take this drag it in right here and it can take a it'll take a little bit it says 75 but it shouldn't take that long and let's just wait for it i was taking a 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 all 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 um 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 um it's currently disabled but we're going to say we want it to do pull from the main um i think it's the box 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 um your site is having it built a problem let me see if i can actually change the name i already have an alex the in list but i'm gonna see it's already taken um i'm just gonna try this one one more time oh and now it's working uh i have no idea why it didn't work before but this is fantastic it was giving me all this i was maybe i was just reading too much into that i had i had never tried to create another um dot io or github pages on this so anyways thanks for sticking with me through all that stuff so now we have our actual website um 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 um 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 um your repository has to be public uh 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 four dollars a month or something like that so worth looking into um 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 for my taste but uh this one looks really good too might be able to add some more narrative to that one so again go through it make your make a good choice in it and then update it how we updated it uh i will include the um let's see i will include everything that's in here and i'll keep this on my on this github so 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 um you know 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 that being said that is the entire project i i i hope this didn't go too long um this may have gone you know this may have gone like 30 45 minutes but in the end of it at the 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 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 um you guys do these projects and this stuff so i'm super excited to see all of these that you guys tag 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 [Music]

Channel: Alex The Analyst

Views: 22,587

Rating: 5 out of 5

Keywords: Data Analyst, Data Analyst job, Data Analyst Career, Data Analytics, Alex The Analyst, Data Analyst portfolio, Data Analyst Portfolio website, Data science portfolio website, data science portfolio project, data science portfolio, how to create a portfolio, how to create a portfolio website, how to create a data analyst portfolio, how to create a data science portfolio, portfolio website, data analyst portfolio website free, how to create a free website

Id: ocdwh0KYeUs

Length: 35min 29sec (2129 seconds)

Published: Tue Jun 29 2021