For those of you who haven’t had much experience with web development before this guide serves to give you a brief overview of what the main technologies are. In this guide I won’t actually tell you how to do anything it’s merely to give you a bird’s eye view of web development as a whole, what you might be interested in and where to go from here to find out more.
The web experience is run by three main technologies:
HTML (Hyper Text Markup Language): This controls what goes on the page, the text, images, videos etc. In other words the content you view when you navigate to a webpage.
CSS (Cascading Style Sheets): The controls how the page looks, how big the title is, what colour the background is, where does the sidebar go? This is also responsible for making the website responsive - more on this later.
So that’s it then? Time to go tutorial hunting? Well not quite, we’ve only scratched the surface….
The Problem with Scale
Unfortunately the technical complexity of our modern day websites has far outstripped the abilities of the tools used to create them. Take for example the list above where I introduced the different technologies, if I was to write this in HTML it would look something like the following:
Wow. All that for just a simple list! Unfortunately it doesn’t get much better than that, go ahead see for yourself, right click on this page and select “View Page Source” I’ll wait for you. See how quickly you can find the snippet I gave above while also keep in mind that this is a relatively simple website. Try the same thing on a website like Youtube!
Then don’t forget once you’ve written the HTML you then still have to make it look good! As you can probably tell this doesn’t scale well to large websites, I think you would even struggle writing all the HTML for this website by hand.
A quick note on responsiveness
When we talk about responsive websites, we mean websites which respond well to devices with different screen sizes, resizing elements and adjusting their layouts so that the content is still displayed well, easy to read and navigate.
So how is it really done? Well, before we dive into that I think it’s worthwhile if we take a quick de-tour and talk about Static and Dynamic websites.
Static vs Dynamic Websites
You can divide most websites on the internet into two categories Static and Dynamic.
Static websites are “fixed” in the sense that whoever creates the website decides what will go on the website and then create it. By the time the website is sat on the server ready to be viewed, the content which appears on every page is fixed and will not change until the author(s) decide to update it. Users who visit the site will see the site (hopefully) in exactly the same way as the author sees it on their machine.
On the other Dynamic websites, aren’t fixed. When the author creates the website they actually construct a set of rules that the server follows to build the website as users ask to see it and send them the result. Take Google for example, the designers couldn’t possibly predict what everyone will search for ahead of time, let alone keep it up to date with the thousands of new websites which are created year on year.
So instead when you search for something, the server will look for matches in its database and compile a list of results which it then converts into HTML and sends it off to your browser which you then see.
So how is it really done?
Over the years developers have created many tools which try to help automate the process building websites allowing you to focus on what really matters, your awesome design and content.
In this last section I will list some of these tools, this will no way be exhaustive but it should give you an idea of what it out there and give a few directions to start researching what is right for you.
First of all I’ll quickly outline what we use to build this very website:
Jekyll: This is known as a static site generator, written in Ruby and sort of acts as a glue between various technologies to create a system well suited to sites like this.
Markdown: This allows us to write our content in plain text while using a few special characters to format it. For example, you know the HTML I showed you above? Well this is how I actually wrote it when writing this guide:
Liquid: Unfortunately we still have to write HTML at some point, however Liquid is a templating system which lets us create the structure of the webpage leaving “holes” for jekyll to fill in with content when it comes to building the website.
Sass: This is what’s known as a preprocessor for our CSS. What this means is that we still essentially write CSS as you normally would but with a few extra goodies such as variables, “functions” and the ability to split it up into seperate files and “compile” it into a single stylesheet.
That pretty much covers everthing we use on this website, but there is much more out there.
Other tools and technologies
Here is a selection of other tools that you might want to look into, in no particular order:
Django: Django is a Python based framework for creating dynamic websites, providing easy to use database and user account management. Used by websites like Pinterest, National Geographic and Instagram.
Flask: Another python framework, somewhat similar to Django but more lightweight
Ruby on Rails: Again similar to Django, this time written in Ruby based on the Model-View-Controller paradigm. Used by websites such as Github and Twitch and Soundcloud.
Happstack: A Haskell framework which does everything from routing, templating and database management
This barely scratches the surface of web development, there are so many tools and frameworks out there it would be impossible to cover them all here. But I hope that this guide has been informative and helps you find the right tool for whatever it is you wish to make.