How to Build Your Own Website in 2019 the Easy Way

June 10, 2019

Darian

In today’s market, I don’t see why everyone shouldn't have their own website or online presence. The barrier to entry for accomplishing this is as low as it’s ever been, and not doing so can set you back from the crowd.


Whether you are looking for a technical position, looking to market yourself, or looking for a way to stand out and share your knowledge in your area of expertise, an online presence in some sort of manner is going to give you an edge, and the process to do so outlined ahead requires absolutely zero experience.


This post isn’t geared towards people coming from a technical background, specifically, but it will provide a great jumping off point for anyone looking to set up their own online presence while demonstrating some technical skills, and for anyone figuring out where to start in the world of web development.


How a website is created and deployed


Before we put our site online, out to the masses for the whole world to see, we need to make the damn thing. We’ll be doing this on our own computers before it gets out there. For this, we’ll need a code editor to do our work in.


Code Jargon Term # 1: Deployment

  • Making the system/application available for use (putting the thing you made out there)


While we are working on this precious code, it would be good to make sure we are keeping a back-up for it, just in case something goes wrong. This is called version control, which is BIG topic in itself, but for now we are just using it as a way to store our code online in case our dog eats it from our local computers.


Code Jargon Term #2: Version Control (or Source Control)

  • the management of changes to documents, computer programs, large web sites, and other collections of information


Once the site is made (and we have it stored in some sort of version control system), we have to deploy it. For this tutorial, we are going to be using GitHub. It’s free, it’s fast and it’s the version control application we’ll be using to store our code, so it’s convenient like that.


Requirements


Before we get into building your glorious website, we have to pick up a few things.


Code Editor



We mentioned a code editor before, so let’s go get that now. My editor of choice is Visual Studio Code since it has an array of extensions that are going to make our lives a lot easier in the development process. Hit the link, download the appropriate version for your computer and save it wherever you’d like, maybe put it on the desktop for now, we’ll be needing it shortly.


Browser


The browser you use for the development stage of your website is ultimately up to you. My personal preference is Google Chrome. Chrome has great developer support and offers an inspector tool which allows us to look at the structure of our site from right in the browser. If you choose to use your preferred browser, just make sure it includes an inspector as well by doing a quick google search.


GitHub Account




Back to version control. We’ll be using GitHub, and you’ll find this is generally the preferred option nowadays. GitHub is the site commonly used for storing, sharing and collaborating on code today, and it’s relatively simple to use.


Start by heading over to GitHub and signing up for an account. Once the account is set up, we need to create a repository for our code to live in. Name it whatever you want and choose to set the repository as public if you want other to be able to see your project, and private if you’d prefer to keep it to yourself.


Git



Now that we have GitHub setup, we need to be able to access our repository from our computer. To do this, we need Git. This gets a little confusing, but Git and GitHub are NOT the same thing.


Git is a version control software which enables to manage local versions of code and virtual versions which are stored elsewhere. The elsewhere in this case will be GitHub. GitHub allows us to store our code for personal and public access and lets us use the power of Git to manage it directly from our computer.


So we are going to need Git to manage our code on GitHub, follow the link and download the appropriate version of Git for your computer.


Command Line




There are a few ways we can use Git from our computers to interact with GitHub. We’ll be doing this from the command line.


The command line is simply an interface which allows us to give instructions to our Computers operating system. It might seem scary at first to use the command line directly, like you’re some sort of black market hacker man from a movie, but I promise, it’s not, at least for the purpose of Git.


If you have some experience with the command line, use whichever application of your choice, I’ll be using Git Bash in this tutorial on my own windows laptop. If you are following along on a Mac, open up the Terminal application and all the steps will be the same. Follow the link and download Git Bash if you are on windows, or look up Terminal in the finder if you are on Mac and proceed with that command line. For us Windows users, let's store it on the desktop again for easy access.


Making the site


Now that we have a GitHub repository setup with our local project, Git installed on our computers with a command line of choice, and a code editor to work in, we can finally start creating our site locally.


Before we dive in let’s take very, very, very brief overview of what goes into a website.


HTML


This is the language used to provide a structure or skeleton for a website. Websites at their most basic form are HTML templates.


CSS


we are gonna need some of that CSS. We can use this in our HTML files by providing links to CSS style sheets that affect the elements of our site.


JavaScript


The programming language of the web. JavaScript provides the functionality to our site. This powerful language can allow us to interact with users, respond to events on the page, access external sites and so much more. For now, just recognize that practically all the functionality of a website apart from basic styling is the result of JavaScript.


There are an infinite amount of ways to go about this next step, but a very common tool for building website interfaces is Bootstrap.


Bootstrap is a library which provides tools to speed up our development process. These tools utilize pre-built CSS and JS code that we can call on to get things built fast. We aren’t going to go through the details of Bootstrap here, or this would be tutorial serious and not a post, but we will make sure to include it in a starter HTML template so you can play around with it afterward.


Setting up the HTML


This also not an extensive HTML tutorial, so we’re going to grab an HTML template from the web to further customize, and plug bootstrap into it, so let’s grab that template.

I'll be using the twenty from HTML5 UP, which has a number of free HTML templates for download. You can pick whichever template you'd prefer, but if you'd like to follow along exactly with the steps ahead, go ahead and click on the link for twenty and hit the download button. The contents should be downloaded in a zip folder. Take the contents of the zip folder, and put it into a new folder on the desktop called "MyWebsite".


Now that we have the template site, we need to access it with our code-editor to be able to customize it to our liking. Start by opening up Visual Studio Code. Navigate to the "File" tab in the top menu bar and click it. There will be a "Open Folder" option, click it and select the folder you saved the template into. You should now see the folder structure of the site on the left side-bar of the code editor.


Now that we have the site loaded up into our code-editor, we will want to demo it to make sure it's working properly. To do this, there is a very handy VS Code extension called Live Server which you can download by following the link. Once the extension is downloaded, you should see a "Go Live" option in the bottom bar of VS Code at the very bottom of the screen. If you see this option, you are good to move on.



VS Code Editor With Live Server Installed.


On the left side bar, double-click the file "index.html", this is the main page of your website, and the one we will want to display. The file should appear in the main view of the text editor. Now, with the file open, click the "Go-Live" button on the bottom bar.


The website should now pop up in your browser window! You are now ready to start customizing it to make it your own! Keep in mind, this site is just visible to you and your computer, it isn't online... yet.



Default Template Site.

Making It Your Own



We will start by changing out the text in the"title" tag, as well as the "h1" tag of the header. We will comment out a few nav items which we won't be needing.



Changing the title of the site.



Comment out sections of code by highlighting and holding Ctrl+/ (or Cmnd+/ on Mac).

Next we will change out the main heading of the site to our desired text, we can do this by editing the tags of the banner section as seen below.



Changing the main text of the banner.



We'll now continue through the code, changing the call to action banner and button to something of our choosing.




Call To Action Section.


Moving on through the file, we can edit the icon display section by swapping out the text as we have done before, and including new Font-awesome icons of our choosing. We can edit the icons by replacing the default "fa-check" icon class with any icon class available on font-awesome. I used the "fas fa-laptop" classes to give you an example, but feel free to cruise over to the font-awesome link and pick out any icons of your liking. Simply pick an icon, click it, and copy the class names given in the icon code. Then, replace the "fa-check" in your code class with the new classe(s) you copied.


Replacing text and icons.



The theme comes with a default portfolio section, but we'll need to adjust it with the images and text that we'd like to include on our site. We can add images by dragging an image of our choosing into the "images" folder of our project. We will also need the change the reference to the image in our code.


Adding new images to the portfolio section.

We can even add links to our own social media pages by editing the links in the icons in the footer. We do this by adding an address to the "href" tags of the icons. Navigate to your own twitter account for example, and copy the address of the page to the href tag shown below. There we have it, the twitter logo now links to the twitter page! You can go ahead and change the links of the remaining icons to to your own pages as well. If the social media icon you'd like to display isn't in the default template, go back to font-awesome and find the icon you'd like to put in!



Editing the social media links.


This should give you a great start to having your own personal website. There is obviously infinitely more options for you to customize and I hope you will do some of your own research to get your page looking just the way you want!

In Part 2 of this post, I'll go over exactly how we can put this code on GitHub, and deploy the site online for the world to see!

I hope this pointed you in the right direction for exactly how a website is created, and made you realize it's really not that scary!

 

See you in the next one,


Dare


JOIN THE CONVERSATION

2 Comments

Darian

Coming out next week!

June 25, 2019, 7:19 p.m.

C.amos

Can’t wait for part 2!

June 25, 2019, 12:56 p.m.