Untangling the Web - Building My First Website
Will Moyle
Disclaimer: Since publishing this blog post in 2016 on my DIY website, I have transitioned back to using SquareSpace. This is because I no longer have the time to maintain a site that I built myself. However, I am extremely glad I build the site myself originally. I learned a huge amount about how website's work, which has been extremely useful for my web analytics work. The original code for my site can be found on my GitHub page. A walkthrough of the site that I built can be found on YouTube.
The world of coding can sometimes seem so dense that taking a first step may seem impossible. What do I want to build? What languages does that mean I should learn? Where do I go to find out more?
If your answer to the first question is 'websites' then this article is for you (which shouldn't come as a surprise, given the title). This isn't a web development tutorial - I'm afraid you won't be able to build the next Facebook by the end of this article - but my aim is to cover some of the basics, as well as the jargon, to clear away some of the fog surrounding this topic. If, in the next few minutes, you learn your JavaScript from your JQuery and your HTML from your CSS, then I'll have succeeded.
Every journey...
Before learning to build websites, my coding experience was mostly focused on the so-called 'back-end' of software development. The languages that I had learned (such as C++ and Python) were very good at getting computers to do lots of smart calculations and clever tricks, but not so good at making anything visually appealing with a nice sleek user interface (UI). Due to this gap in my knowledge (as well as a bit of free time), I decided to teach myself some more 'front-end' languages and web development seemed like the obvious choice.
The number of sites that will allow you to build a website without any coding whatsoever is very large, with advantages and disadvantages to each. You can visit the excellent Website Builder Expert to find out in depth about each one. If the thought of writing any code terrifies you (I can sympathise), then these are excellent choices.
I built this site (WillMoyle.net) using SquareSpace, which is a fantastic service - very intuitive and with some really smart features. SquareSpace is in the middle of the price spectrum (£68 / $96 per year as of March 2016), while builders with fewer features, such as GoDaddy, are priced in the region of £50 / $70 per year.
For most of you, I'm sure that this is all the information necessary for your web development needs.
Warning: Incoming Jargon
You might, very reasonably, ask why anyone would bother learning to code websites if there are such good alternatives out there. It's a question I asked myself (frequently and, often, aloud) as I wrestled to rebuild this site with my own code. The simple answer is that nothing gives you the flexibility (or indeed the satisfaction) of building quite like coding yourself. I have very little experience with DIY (it's a miracle my occasional attempts have left me with all ten fingers), but I imagine it's the same as the difference between building a chair yourself and picking one up from Ikea.
So, what do you need to learn to build a basic website? At the core, there are two building blocks to pretty much every website:
- HTML (HyperText Markup Language): This language allows the coder to create the website's structure. You can set up headings, paragraphs, images, links and everything else that the website contains. You can find the HTML for this website here. If you've ever seen a website load incorrectly, with the right content but no nice style at all, then you've seen just the site's HTML. For example, below we have a little paragraph that also contains a link:
<p>This is a sample paragraph with a link to <a href="google.com" > Google</a>. Isn't that easy!</p>
- CSS (Cascading Style Sheet): Now things can become pretty. This language, typically written in a separate file (such as here), allows the coder to change the position, size, color, font, margins, etc. of every element in the HTML code. Do you want every image to cover 80% of the page's width, with a nice thick red border and round edges? Simple:
img { width: 80%; border: 5px solid red; border-radius: 25px; }
Let's Get Interactive
We've already seen all the elements we need to build a nice, pretty static website - but, these days, users expect some level of interaction with a page. Whether it's an expanding menu (as you can see on the top left of this page) or a moving image gallery, there are literally thousands of additions that can be made to create a great user experience. I won't go into any great depth, but here are a few terms you may have heard:
- JavaScript: The most common language used for adding interaction.
- JQuery: An expansion of JavaScript that makes the language much more user friendly (used for this site)
- PHP: A server-side language, useful for providing a lot of information to the user more quickly than JavaScript
- Ruby on Rails: A great language for building web apps, used by sites such as Hulu and Twitter
Where to Learn
There are thousands of ways of learning web development (seriously, Amazon has 37,000 books on the subject). However, I'd recommend online resources. Not only are they often free, but they allow you to practice as you learn, which is absolutely vital. My recommendation is Codecademy.com. The basic lessons are free (you can pay for extra projects and quizzes) and it is a fantastic place to learn.
Nearly there...
So you have a beautiful site that you've coded yourself. How do you get it online? The final step is to choose a web hosting site. I originally used SiteGround.com, which allowed me to buy the domain name (i.e. WillMoyle.net) and to upload all of my files very simply (it's also fairly cheap - I paid $4 per month).
That's all there is to it! Hopefully, the jargon hasn't put too many of you off and you now know a bit more about web development than you did a few minutes ago.