Best part — the only thing you’ll be using is your web browser
This little tutorial assumes you have no prior knowledge, except how to work a keyboard, a mouse and click on buttons on the internet. But I hope this helps kickstart your web development journey :)
Building and launching your own HTML based website has never been easier, thanks to some neat new features in Github, and this wonderful thing called Github Pages. Best part is, your website isn’t going to be built on top of a platform or some sort of template. We’re going to use good ol’ HTML, the language of the web. You can build anything from a blue page with your name printed across it in a massive chunky font, to a fancy responsive website with classy animations and flying cats using all the magic tricks of the internet. No limitations. Pure awesomeness.
Enough of all that, let’s get started, we only have 15 minutes! Follow along till the end of this article and you’ll have a website that looks like this. And then you can customize away— sky’s the limit!
Fancy website with your name in glowing yellow!
Create a new project on Github
This isn’t too hard, first head over to github.com and create an account. This part is no different from the millions of accounts you’ve created on the internet. Once that’s done, we’re ready for the cool stuff.
Click on the new repository button in Github and create a new project. I called my repo 15-min-me!
Create repository screen on Github
When you’re creating your repository, make sure you have “initialize this repository with a README” ticked. This will create and initialize your project for you. If you don’t do this, you’ll have to initialize the project yourself on your computer and then push your code to Github. And that kind of defeats the purpose of this “do it all in your web browser without knowing what on earth a git is” tutorial.
Great, if all goes well, we now have our project set up.
Create an index.html file
Our entire file is going to be a single HTML file (for now). That’s quite neat right? The important thing is, our file has to be named index.html. This is because Github looks for a file with that name to use as our website. So, how do we create this file? We click on a button!
Simple as that. Name the new file index.html and then type in the code I have below. The code is super simple. The funny things that look like <this> are called HTML tags. More about them later. For now, just know that you open a tag like <this> and you close a tag like </this>. And everything between those two are the contents of the tag.
As you can see, we’ve put our name in twice. Once in the heading, inside a <title> tag and once inside the body, inside an <h1> tag. <h1> is a heading1 tag, and is used for enormous headings, like page titles. Or your name. The <title> tag sets the title of the web page, which is also displayed in as the heading of the tabs in your browser.
Now that we’ve typed that out, we need to save our file. In the world of Github, this is done by clicking the “commit” button. Commits help you track versions on your file, which is pretty convenient. So you can type in a little commit message to explain the changes you made to your file and then hit “Commit new file”. You can happily ignore all that stuff about branches and trees and forests for now.
Turn on Github Pages
You’ve gotten this far, great great job! You just have to tell Github to switch on “Github Pages” and your website will be on the internet. How cool is that. Click on the “settings” tab in your repository and scroll down to the Github Pages section. Select master branch as your source and hit save.
Boom! Your code (and therefore your name) is now on the internet :D :D
Admire your name
Head over to <yourusername>.github.io/<your-repository-name>/ to view your fantabulous new website. You don’t even have to type out the long URL, there’s a neat link right in your Github settings. Provided you didn’t miss any of the steps, you should see your name staring back at you. And it’s quite glorious, because you’re the one who put it there.
We could stop right here. Or… we could make things look a little nicer.
Beautify
Alright, can we make our name look a little more glorious, but with very few lines of code? Absolutely. In the head section, we need to add some CSS, using a <style> tag. This will help us style specific parts of our website.
<style>body {background-color: black;text-align: center;padding: 200px;}h1 {font-size: 60px;color: #eeee33;}</style>
What did we just do here? We turned the background black, made our name bigger and turned our name yellow (#eeee33 is just a strange way of choosing a particular type of yellow).
So what will it look like? Well simple enough, let’s commit this stuff in and then see what happens to our website! :) Click on the index.html file in the project and hit edit which is a little pen icon. Then commit away like you did before!
Admire again. You’re done!
Head over to your website and refresh away. It might take a few minutes to update.
I know coding a little and waiting a couple of minutes for our website to load might feel inefficient, but in the next article, we’ll learn how to write our code locally on our computers, rapidly iterate by checking what it looks like on a browser, and then push all our changes up to Github in one stroke so that our website is updated for the whole world to see!
Hope you liked this intro article. Do share a link to your rad new website in the responses :)
What Next?
Well we scribbled in some code, but kind of glossed over what the code is actually doing. Want to find out what happened there? Use some of these great resources to better understand HTML & CSS.
- Codecademy: Their HTML & CSS courses are great! I learnt on an ancient version of Codecademy 4–5 years ago and it really worked for me.
- CodeLife: A brand new platform developed by my advisor, Cesar Hidalgo’s startup, that helps you learn to HTML, CSS and much much more.
Here’s a link to my github repository with all the code in this tutorial.
My next article will talk about how you can start iterating on this new website locally on your computer and add some new sections to showcase a portfolio of your work! Thanks for reading.