How to Create & Host a Portfolio in 10 minutes with Github pages! #grindreelwhat

what's going on guys welcome to another video today we're gonna look at how to get a portfolio up and running really quick what I'm using github pages which is free github offers that as a service as part of using github and it's just it's small it's not meant to run your e-commerce website they're your whole business but it'll host a nice little portfolio you can use to start applying for jobs a lot of people ask me this question where do I start with my portfolio what does it need to look like I've done portfolio review videos and so we're gonna we're gonna use some resources to go and find a portfolio boilerplate I'm gonna show you guys how I refactor it what I look at remove the things that we don't need add in some things that we do need change in a couple of things you know just how I take boilerplate and really make it my own and we'll walk through that and then I'll show you guys how to host it on github pages and how you can push it up and then you can start linking that on your resume at the top or wherever somewhere on your resume and you can start applying the job so nice quick way to push up your projects or showcase your projects and you know only takes a few minutes so hope you guys enjoy this video I appreciate you guys you guys are awesome subscribers and I'm very humbled to make these videos for you so hope you enjoy first thing we want to do is go to our website where we're gonna pick a template a portfolio template that we're going to use there's a lot of different sites you can use you could use like envato themes just Google free boilerplate HTML templates and you'll have to navigate through all of these menus to get to them but eventually you'll get to a free one and they're pretty decent but my website of choice I always recommend is html5 up just because it's easy to navigate a lot of the themes are reusable and you know it's free no hassles so let me show you where that's at it's just html5 up net they're fully responsive intelligent html5 CSS super customizable and they're 100% free so when you're building a portfolio it's okay to reuse this stuff go ahead and use this restyling make it your own that's what I'm gonna do in this video won't take very long just switch a couple things up it doesn't even come with the pictures because the pictures you can get from unsplash we can come here and we can scroll through and we you can get all kinds of cool def pictures if we type programmer we can get a whole bunch of cool dev programming pictures that we can add to our sites or to fill in you know whatever boilerplate we're gonna do but let me show you what one of these looks like real quick and then we'll move on to how to host it and all that and how that works so let's come in here let's find one that looks like it would be good for a portfolio or whatever we want our style to look like right off the bat I think this looks pretty decent this could be like an about me page and then each one of these could be a link to actually see the app that we have and a little description of each app and so this button this would be you know go-to app and this would be C code or C app or something like that we'll figure that part out but I think this looks okay a little headline has a little date we could take that off we don't need these tabs up here I don't think this is too much for us so we'll go ahead and we'll download this and we'll modify it to basically be what we want remove all this extra stuff we don't need real quick let's go ahead and click download open this up I already have a page made here this little project I'll delete this actually and I make a new one so we'll just call it project we'll extract this stuff into the folder right click I'm gonna open with code Visual Studio code should open up here I'll come over here to index and move this down a little bit here so we can see the code and I should have go alive unless that extension is huh it's not showing up down there no big deal so I'll right-click I'll open with live server what should happen is that it opens up a new tab for me here alright so we have we'll put our code on the right and our page over here on the left and so we can just kind of immediately come in here and see what's going on we just kind of edit things as we go so this is massively we'll change this here to be now my my portfolio and I don't necessarily think we even need that part so I'll save this it should instantly update over here on the left I'm using an extension called live server by the way you can find that here if you just type live you'll see live server you can come in there and download that if you're wondering what that is it's super convenient so you can just edit HTML and CSS in real time and as soon as you click Save it updates over here on the actual page super convenient if you want to use sass you have to get another thing called watch sass but that's kind of outside scope of this video so my portfolio and there's a little description here free fully responsive template designed by blah blah blah so we'll just call this we don't we don't really need all that stuff so this is my showcase of my projects and my abilities as I said it doesn't come with these images yeah empty images that we could use but we're also we're also presume din so let me reset this okay so there is the tabs that we we want to take care of so let's go ahead and find generic page elements reference those too so there those are right here I'll remove those cool so now we only have this one tab which is kind of noticeable but depends on how you want to do that I think I'm just gonna leave as is and it's your choice if you want to hook up these social media links or not I personally wouldn't hook up Twitter Facebook or Instagram but I would leave LinkedIn and then maybe change one of these here to be like maybe LinkedIn we're using fun awesome that's already included we can see over here on the classes we have fun awesome - github so we'll change this to be LinkedIn and then I think I'll remove these other - there we go now I've LinkedIn and github and so then it's your choice to connect those and to do that you would just fill in these little hashtags right here go to your website and it has a date April yeah so we don't actually need that it looks kind of weird I think it was better if we just took that out my name is reflec this is massively so anyways you come in here and you fill in this text get this stuff looking good maybe you could have a picture of your you know one of your most one of the apps that you're most proud of stuff could go here and then we would change full story to be check it out and then these here would be your sub projects so I'll just show you what I mean by that will remove the dates because that's weird we don't necessarily need the date when we made that project that might actually harm you so I'm gonna go ahead and remove these dates and we'll come in here and I'll just do something real quick right so we'll just do project one copy that change that to two and then I actually don't think we need these other articles because we'll just pretend like we have two projects for now so it's fine save this project one project 2 and then we have some pagination down here we don't actually need this pagination that's it we're not making a blog with this we're making a portfolio with this and then we have a little contact form down here this isn't actually going to work so I'm gonna go ahead and remove this form and now we have an address phone email so this would work best I think and then again we have our social icons down here so that's it we have a super-easy portfolio so you can actually come in here and kind of like reverse engineer and look at all the different files that it comes with got CSS fonts J s it comes with a couple J s files so this is how I came here to look and see how responsive websites were built to come back over here to the index we can scroll down some more doesn't actually look like this is using bootstrap it's using probably I guess media queries or something yeah so this is actually using media queries to get this to be responsive so it's not coming with bootstrap some of them come with bootstrap I think so come in here yeah so essentially we have our basic bare-bones portfolio you would fill this out to be how you want now click click here to see the project click here to see the code project code and then you just fill out this contact information I probably would take your phone number off the internet and then have your email maybe not an address either and it's your choice you want to fill out these social icons again alright so now we want to host this we want to host it for free we don't want it to be too complicated we just want to get it up and running something that we can just modify on a whim and we're going to use github pages which is free it's not meant to host like your e-commerce website or to host like your actual business it has a limit of about 1 gigabyte and if you go over that it might actually be able to serve your website so to do that we go to github.com I'm already signed in here if you haven't made an account go ahead and make an account you'll come to this page and I think we're a little zoomed in here so let me go ahead and zoom out ok so this is my page come over here repositories and we'll make a new repository and to use github pages you make a new repository with your name for github username for github github dot so my name over here on the left is Joshua fluke and then on the right for the repo name plus our name Josh no fluke github dot go ahead and click create positive you don't need to necessarily you know how to use the gift from command stuff that's kind of outside the scope you can go watch another video on how to get set up with with git using git from the terminal stuff but luckily you can actually do this just by uploading stuff so right here there's a little upload existing file so we clicked on upload your files that little button it takes you to here we have our project folder here that we downloaded and extracted to earlier well open this copy these drag them over here you can't drag the folder itself in here you have to drag the individual files because this needs to have an index as one of the main files so it knows what is your homepage pretty much of the site you can have a lot of different files in here but the index is the one that's gonna get shown as the website okay so we'll scroll down here to the bottom we need to commit which means like actually save it and push it up to github so we'll just do initial commit changes so this up here at the top Joshua flew back in abduct IO will actually be the website when this is done processing my files so these were the project files that we extracted we don't actually want to you know normally keep this readme in here right because your if you just don't need all this information you you're redoing this to basically make it yours welcome up here to settings that little gear icon and we'll scroll down you can see your site is published at so I'll click that and we can see that our portfolio is now hosted scroll down my name is Josh a fluke I'm a passionate more importantly I'm passionate about technology check it out project one and and that's it we are now hosted and so you could either delete this repo and do the whole process again or you can learn how to use git and connect this to your command line which is what I recommend you do and that way you can just push up changes to your code through the command line to your hosted portfolio no problem super easy super quick hope this was helpful for you guys this is just a quick and dirty way to get up and running with the portfolio and hopefully the tips that I gave you to modify the portfolio give you an idea of what you could do with different different styles different pieces of boilerplate that you can download from html5 up that's it those are my tips I hope this was helpful for you guys it was hit that like hit that subscribe button let me know what you think in the comments below I appreciate you I have a peel box if people want to send me stuff if you do send me stuff I'll open it on camera songs it's not like gonna get me demonetized you know be sure to check out my resume portfolio on the website because they support the channel and they've gotten a lot of people jobs so I'll see you guys in the next video [Music]

Channel: Joshua Fluke

Views: 390,268

Keywords: joshua fluke, code bootcamp, javascript, how to code, learn to code, how to make a resume, resume tips, code interview, lambda school, team treehouse, web developer, web designer, programming interview, web development interview, reactjs, entrepreneurship, motivation, grind, vlog, how to make a portfolio website, porfolio website, github pages

Id: u-RLu_8kwA0

Length: 13min 6sec (786 seconds)

Published: Wed Nov 28 2018