Learn to code and deploy a website in an afternoon

August 18th, 2020
Note: This is super valuable for anyone interested in building a startup, starting side-hustles, or joining clubs/non-profit organizations. This will cover a road to code legit websites as well as hosting + domains

Building websites aren't hard. In fact, I bet you can learn to set one up in an afternoon.

The hard part about learning how to build websites (or anything technical) is finding the right pathway/approach to learning.

Luckily I've been building websites as a side hustle for years now and endured the beginner pains for you, figuring out a great pathway for any beginner to get their website gears turning.

Get a grasp of HTML (How To Meet Ladies... jk... unless?😳)

The basic language of all websites is HTML. It's ridiculously simple to understand and that's the first step to building your own website.

You can think of HTML as a framework, skeleton, or blueprint of a website. It sets the structure of the website but by itself isn't pretty.

That's where CSS comes in.

Similar to HTML, it is really easy to understand but serves a different purpose. CSS stylizes the website, adding colors, borders, and all sorts of pretty aspects.

I like to think of websites as people where HTML is the skeleton- the structure of the website. Going with this analogy, CSS would be the skin, hair, and eye colour, body type, etc.

And if you (or your website) are trying to look spicy, you can add extra to your CSS or additional jewellery, tattoos, clothing, etc.

This > 2-hour lecture by Harvard CS50W (highly recommend watching) is the best resource I came across for understanding the basics of HTML and CSS. It's quick, intuitive, and fun to watch.

You should take a bit of notes and follow along with the lecture but keep in mind: this is for you to grasp HTML, not teach you how to immediately build websites (that's the next step)

Download a website template and a code editor

To be able to create real websites, I think the best way now that you grasp HTML & CSS is to first open one for yourselves, play around, and break it customize it.

A simple google search can lead to seemingly unlimited free HTML Website Templates that you can download for yourselves. I suggest Mobirise, NicePage, and Colorlib as a good place to start.

HTML and CSS are basically just funky English, so learning by reading template code is great to learn these languages.

You can also use this as the start of your personal website (check out mines at sigilwen.ca)

Now that you have chosen a template you like, it's time to open up the code and edit. You will need to download a code editor like Visual Studio Code (🐐) or Sublime Text 3, all of which are free to use and cross-platform.

Boot up Visual Studio Code, open the folder for the website template and search for index.html - this is the HTML file for the homepage and usually where the magic happens.

It's going to look pretty intimidating at first, but keep in mind that 80% of what's on-screen isn't relevant and through practice, you will get better at recognizing this.

Open up the HTML file in your browser side by side with your code editor. This will allow you to see how HTML turns into the website. Try and see what corresponds to what and how changing the wording and aspects of the code impacts the website (keep in mind undo exists)

Oh yeah, you need to save the code (ctrl + s) and refresh the browser to see changes or install the live server extension in Visual Studio Code.

You should be able to change all of the wordings, images (by changing image destination in folder), and pretty much everything to your own liking. This is the best way (imo) to learn HTML, CSS and starting to build websites.

If you run into any issues or don't know how to do something, a quick google search will lead to more than enough answers. It's going to be hard reading stack overflow but it's another one of those things that come with experience :)

I asked 2 of my friends to do this and they all were able to learn it within the timespan of an afternoon (check these out: https://impactwithoutcontact.ca/ and https://venkatmuthaly.com/ pog)

Now that you have a website made it's time to put it on the internet (for free ofc!)

Upload your code to the internet and host it!

To get your code onto the internet, you are going to have to download Github Desktop which is great for beginners.

It's going to allow you to create a repository to store your code which will be accessible on Github (a platform where code is stored)

A good thing about GitHub is that they have a free service called Github Pages which allows you to host your HTML code as a website for free! Also comes with a free domain similar to sigil.github.io

To enable this, head into the settings of your now uploaded Github respository and enable github pages. Make sure to click on enforce HTTPS which allows for secure connections.

Afterwards, you and all your friends should be able to access your website from the GitHub domain.

But if want your own epicly cool domain like sigilwen.ca or oneskillaweek.com then you got to...

Extra: Connecting a Domain (like sigilwen.ca)

I was originally going to explain this myself but I found a resource that goes over connecting domains better than I can explain it (or maybe I am just lazy hehe). Basically you can purchase an available domain from a site like GoDaddy or NameCheap and connect it to GitHub Pages by changing the DNS which you can think of as the settings for the domain.

This article explains it well and has everything you need to set it up! Have fun :D

Final Thoughts 😜

Along your web development way, you will also encounter JavaScript, which you don't need to worry too much about as it is beyond the scope of this post (future post ;).

I recently started contracting with startups to produce videos and create their websites so if you are interested in hiring my team's experitse send an email to hello@sigil.digital :D Website up soon ;)

You can also email sigil@oneskillaweek.com for any questions regarding this post/any feedback tho I highly recommend doing a quick google search before you ask 🙃

If you like my content and want more I would suggest:

Thanks for tuning! ILY guys 💖