Transcript for:
Notes on Building a Personal Website for Developers

when it came to Landing a job in Tech I've never had difficulty I've been making really good money ever since I was just in college I've always been able to get interviews for a few reasons but one of the main differentiators between me and other candidates was my personal website I can't tell you how many interviews I got just because of my personal website like I literally remember applying to hundreds of different positions and the companies that called me back and talked to me on the phone they'd mention my personal website so it was a surprise to me to learn how many different programmers are applying to jobs without having a personal website I mean we learned how to code right but we can't spend a little bit of time coding a website building a personal website or just a developer portfolio in general can help you showcase previous work and even your personality I believe that every developer needs a website so in this video I'm going to take you through the process of building said website and then deploying it I'm also going to talk about how you could host the site whether it's for free or whether it's paid and when we talk about paid hosting I am going to mention the sponsor of this video which is hostinger now I'm going to talk about hostinger later in the video but they are doing a huge Black Friday sale and on top of that if you click the link in the description or use code Nick white at checkout you're going to get even further discounts okay so there's a few different ways that we can build a website the first way is to use a website builder you may have used something like Squarespace or Wix or Weebly and this is the easiest way to get a website up and running if you don't know how to code so you would just go to one of these paid Services you pay and then they have these nice user interfaces where you can drop different user interface components you can drop text and buttons onto your web page and instantly publish them and see the live changes and what's great is that these website Builders have come a long way over the years and they're actually pretty Advanced as far as what you can do with customization however these are real really great for small websites maybe some small businesses they do have e-commerce options so you can set up like payment or just static websites maybe a basic portfolio maybe a basic personal website but when it comes to adding a lot of functionality or customization when it comes to like Advanced detailing and the Styles and functionality of the website you're not going to want to use a website builder now speaking of website Builders hostinger which is the sponsor of this video actually has a great website builder that you guys can use if you're not ready to get into coding or other more technically Advanced things and you should definitely check it out compared to some of these other options because these options are usually in the 12 to 25 dollar range whereas hostinger right now is extremely cheap if you go into the description and click the link you're going to be able to get the website builder plus much more for only 199 a month which is way cheaper and that's even before you enter my discount code Nick white at checkout for an additional 10 off now moving on on to other ways of building the website because most of you guys are probably programmers or have some programming knowledge or experience so the next way that we can build a website is using CMS and when we think of CMS we're immediately going to think of Wordpress CMS stands for Content Management systems and WordPress is the most popular CMS in the world with a quick Google search we find out that WordPress is used by 43.2 percent of all websites on the internet now there's different kinds of content Management systems and WordPress isn't your only and maybe not even the best option but content Management Systems in general are great for websites that have a lot of content CMS is a better option if you're creating large websites with multiple Pages or if you plan to make a lot of additional changes to your website down the line CMS makes it easy to do a lot of things like edit Pages at an online store or create web forms and so forth so if you're going to be modifying your website a ton and adding a lot of different content modifying it a lot with different content CMS is the way to go now the way CMS works is you're going to be working with a Content management application a front end where you're going to be able to edit the site with a website builder like user interface so some aspects from those website Builders but you also can write code and add that additional functionality so you're going to be able to do a lot with CMS that you can't do with a website builder so if you have a content-based website you're going to want to go with CMS but if not you could actually code the website from scratch but before I move on if you are interested in CMS or having a WordPress website because they have a lot of content on the site you want to create then you should check out hostinger because hostinger allows you to migrate or build a WordPress website and host it on their platform for the low price of two dollars or 199 in this case and if you use the code Nick white at checkout you're going to get an even better discount all right and now for the third way to build a website which is my favorite way because we all are programmers here and that is to code the website from scratch now you might might have learned other programming languages like python or Java but you don't necessarily know web development so I'm going to take you through a very quick web development tutorial so the basic level to build a website you're just going to need three different things you're going to need HTML CSS and JavaScript HTML stands for hypertext markup language you're going to be coding in a markup language it's extremely easy to learn and this is going to be the skeleton or the actual content of your website no Styles no functionality but actually just the content for example text or buttons or images CSS stands for cascading style sheets and this is going to be all the styles for your website so the text the decorations the font sizes the font colors the color the background color all of this stuff is coded in CSS and you're gonna have full control over how your website looks using CSS and then last but not least we have JavaScript which is more like your traditional programming language we could do object oriented programming there's no classes but it's a lot like python or Java or something like that javascript's going to come into play when you have things on your website that do things right so if you have a button that does something when we click we'll have JavaScript execute in the background so function will execute maybe it does something like alert a little alert box will pop up saying hello world anyways I think we get the general idea for that so all you'd want to do is just make three different files one is going to be index.html one's going to be app.css one's going to be app.js and these are those three languages respectfully so you need three files only to build a website and if we open up those files we could start coding immediately if you're not familiar with HTML and CSS you might want to go through a code academy tutorial or something like w3schools or tutorials point do a quick tutorial you should be able to pick these up in about an hour but basically you just want to look up the template HTML code this is how the standard HTML looks for every website HTML is made up of tags and everything's wrapped in the HTML tags and then you have a head and a body I'd consider the HTML the root of the website and then it hooks up to your other files to add the style files to add the functionality if we look we have some H1 tags and that is a header tag so I can put my name and this will be a header on the website if I were to Simply open up my index.html now we have just Nick white if we wanted to add a button and I said click me for the text of the button we'd go back to the website and we'd have click me notice how the button doesn't do anything now if we wanted to add some styles to the website we'd go into our CSS and we would Target the H1 tag so you would Target a selector and add property value pairs so we're going to do color red for the title and if we go to our website and we refresh it's obviously not going to be red because the CSS isn't hooked up to the HTML so you actually have to hook the file app.css up to our HTML that's going to be in the head so right here I have the link tag in the head and you can see the link is app.css so we go over here and we refresh and now the colors and styles will take into effect there's a million different styles you could add so for example if we just wanted to Target the entire body of the website which is basically the whole website and we wanted to do background color and then we wanted to do blue and we could go to our website and then the background color is blue so you can look up all the properties and values for CSS to figure out all the designs and things you can do by yourself you can do animation you can do all these crazy things down to the very smallest detail so that's why coding is great because we have full control over every single thing on our website now last but not least we have JavaScript so JavaScript we actually can write code like real code so let's say alert button is a function that we're going to make and then let's just call alert hello world and now we would just have to link it right so if we go to our website and I click the button it does nothing still but if we link this and with JavaScript I'm usually going to add the link at the bottom because I still want the page to load with the content and styles even if there's no functionality because something gets messed up so I'm going to do script and then we do Source equals app.js and there we go it is linked up to our app.js we go here we click however this still isn't going to work even though we linked up the Javascript file and that is because we're not calling the function so once we're linked up we can actually use those functions from the Javascript file so we're going to do on click equals and then we'll do quotes and we will alert button we'll call alert button now we go back we click and the function gets executed from JavaScript we get hello world so this is my crazy website that I built in a few seconds just giving you guys kind of a demo but now I'm going to show you guys how you can deploy this whether it's for to free hosting or to a paid hosting platform and this would be your website that's how easy it is to make a website of course you'd want it to look a lot better than this and I'm going to tell you how to do that as well like get a website up and running really quickly using Code but I'm going to show you how to host this so there's two ways I'd recommend to host a website one of which is through GitHub Pages which basically you can make a repository so a folder for your website on GitHub and you're going to want to use your username.github dot IO so you can see here my username is white105.github.io this is a personal website and if I were to go to white105.github dot IO this would be my website in this completely free hosting for static websites basically so if there's not a lot of functionality going on your website GitHub will host your site for free you make a repo it's just going to take your index.html from when you commit the code and it's pretty straightforward it's pretty awesome and if you really want to walk through this all you do is like new folder right you would make a description you'd make it public you know you could add whatever you'd create the Repository now you could follow along with these steps to use git to push your code up so the HTML CSS and JavaScript you just push it up with Git or you can literally just import it you click the import button and drop your code in so the folder of files the HTML CSS JavaScript drop it in with the import button you know refresh boom your website is up and go running right so just do user you just have to name the folder username so your username on GitHub Dot github.io so white105.github.io or your username.github.io so now this has limitations though right if you have a back end if you have an API if you have a database if you have anything uh special going on in your website at all GitHub Pages isn't really going to work so it really only works for static websites and in that case you're going to want to head over to get paid hosting which there's a variety of options however one of the cheapest and one of the most high quality ones is the sponsor of today's video which is hostinger and with hostinger guys this amazing deal going on right now go in the description it's 199 a month this is amazing uh use my code Nick white at checkout and you get even further discounts and when you sign up for this premium hosting you're also going to get a domain which is expensive on its own you're gonna get a free email you're gonna get up to 100 websites you're gonna get a variety of features that are really valuable for two bucks a month so I made a new website yesterday with a free domain they gave me this is Nick white youtube.com if we go to Nick white youtube.com right now we could see it's just ran random template code that I dumped into it but I'm going to show you this is the website I just made in front of you in a few minutes and I'm going to dump this and show you how easy it is to get this up and running on Nick white youtube.com so here we are with my websites I'm going to go over to manage Nick white youtube.com I'm going to go to file manager and now we're in hosting as file manager you can see public HTML and this is all I have in here right now just one HTML file I'm gonna delete this and then there's gonna be nothing going on on my website and then from here it's super easy just go up here to this little upload button I'm going to go to click folder because that's what we did next website I'm going to upload this folder so boom website's uploaded now I do want to distinguish that you can't just dump the entire folder and then hope for it to work right the website's down right now but you have to extract the files from this folder so we're going to move the files one little step back we're gonna just move these and then we're gonna get rid of the folder we don't even need the folder and then boom now we should be good to go so you just want all of those files I mean you could just drag and drop all the files instead of the whole folder but I just wanted to show you because I think some people might be confused about that and now when we go to my website you can see this is the website I built for you guys in just a few minutes it's already up I mean that was instant so Nick white youtube.com my website is already up now I will say it's extremely ugly so how would we get a cool looking portfolio website up and running using Code well that's where you're going to want to go to bootstrap templates right this is if you're short on time uh if you just want to like get a bunch of template code to start with you could easily just go over here look so here's a website we can launch for live preview we can get a free download of it and so we just downloaded this bootstrap template which took like two seconds and I opened the HTML and look we have this whole static website that we could start with and this comes with all of the code right so I could just dump this all this code into hostinger and let me show you once again how simple this is so let's just go over these files these are the ones we added for our website so far I'm gonna delete these so we have nothing on our website and it's instant refresh every time so if we go here look the website's gone now now let's just drag all of the stuff from our bootstrap template we just downloaded right so this is the bootstrap template we get two we have the index HTML in the right place and if we go over to our website there it is it's instant refreshed this is live you guys can go to this right now so that's a whole template website we got up and running in just a few seconds and now we could easily modify this website right I just pull it up in my text editor we go over to index.html and uh we just start editing so let's find start bootstrap and replace our name so here's start bootstrap we're gonna go down here we could say Nick White website so here's Nick White's website you could see this updating we go over to our code we're going to feed our start bootstrap again we'll say Nick White's website again and we're already getting a portfolio up and running right I'd replace this picture with a picture of me and so the last thing when it comes to coding a website I do want to mention is when you're editing the website on your local machine that is not going to update on the official website automatically right so this is still the official website Nick White's YouTube still says start bootstrap even though I've been editing it and this is on my local machine this is the code so what you're going to want to do is just make sure you have the updated version of each of these files in the public HTML on hostinger so this HTML is outdated so what I'd want to do is just delete it and re-add the updated HTML file and so here's the updated file on our local machine I drag it in it's an instant update so we go to our actual website and there's Nick White's website being updated now if you're comfortable with web development or just no have knowledge of HTML CSS and JavaScript then you probably don't even need bootstrap you could code this all from scratch and when it comes to that I highly recommend looking up uh some of the upcoming top coders in the industry maybe Consulting companies look up look at other people's portfolio websites get a feel for how people are designing their websites what looks good what user interface looks cool to you and then start to code your own website not plagiarizing necessarily but take inspiration from other people maybe use aspects from other people's websites and come up with your own cool personal website and remember to go over to hostinger because this Black Friday deal is only up for another three days and it is crazy two bucks a month guys you don't want to miss out and then there's an additional discount using my link and discount code at the end so this is pretty cheap you get a domain you get an email at your domain so you can get your own name dot com and then you can get your email at yourdomain.com which is pretty awesome uh and then it's so easy right you have the website builder you have the WordPress or you can code it yourself you can do all these different types of websites all on hostinger because they're that great now the fourth and final way to build a website which is pretty funny and I didn't really go over yet in this video is you can hire a developer now this is really for when you're on a time crunch and you have extra money you're going to want to head over to Fiverr or upwork and hire someone to build you a simple website prices will range based on the quality that you expect and the complications behind the website but I'd imagine most of you guys are programmers and you are going to take the initiative to build your own website not only because you can but because it's fun but if you do want a pirate developer to build your website from a site like Fiverr upwork those are the two websites I'd recommend using but in all seriousness I used to be a freelance developer so if you are going to hire develop helper to build your website please be conscious of how much work people have to put in to actually build these sites it's very difficult especially if your website has a ton of functionality so I would probably just let you know that the more functionality function the website has like complicated things that it needs to do the more difficult for developers so be conscious of that either pay them more or be aware that it's going to take a long time but vice versa if the website is super simple like it's static and it doesn't really do anything but you just want it to look good that's probably not going to be as difficult or time consuming so don't get ripped off so those are the four ways to make a website if you don't know how to code use a website builder if you have a really large content based website then you see a mess if you want full control over the design and functionality of your website then you're going to want to code it from scratch and if you have a ton of money if you have a budget and you don't feel like coding it then go ahead and hire someone from Fiverr but if you're a programmer and you probably are because you're watching this channel I highly recommend coding the website yourself or doing some CMS because you can get good experience you could showcase that you know what you're doing and it's really important when it comes to applying for jobs so if you're a programmer go build your website right now get your portfolio up put some stuff you've done in the past throw your resume up there showcase some projects you've done you can actually embed the projects into the website if you spend some time and then throw it up on hostinger you get the free domain you get the email two bucks a month I mean I purchase all the stuff I use hostinger so it's really great it's a Black Friday sale right now definitely check it out I think hostinger for sponsoring this video I hope you guys can build your websites please drop some links in my Discord when you're done so I can check them out because maybe in the next video I will do a review of some of these websites thanks for watching this video guys I will see you in the next one peace