I like to talk in analogies, so bear with me on this but I think it is the best way to describe a website.

A website is like a restaurant.

First things first, a restaurant needs a property / location to build on. This is what the server / host are. A server is a fancy name for a computer designed to handle website traffic and actually renders your site to the user and a host is the company that gives you a spot on one or more of the servers that they own. Choosing a host and server depends on your needs, the main of which is what programming languages you will need to use. There will be always be restrictions on the programming languages that you can use depending on what operating system is installed on the server so making sure you have the correct configuration is important. You can still run a server on your local computer fine, but when it is available to the public it needs to be on a specifically designed computer (server). Think of your local computers server as a fully functional toy model of the restaurant.

One thing that comes with a property is an address. All computers have an IP address, you can find your own by searching “what is my ip” in Google. Therefore since your server is a computer it also has an IP address. Because it is hard to remember these jumble of numbers the DNS was created. DNS is a service that connects the request for “google.com” and translates it into the computer IP address for google. You can think of the DNS like asking Siri on your Iphone to get directions to where “Best Buy” is, it then translates your common name for it into an address. Check out this cool little video to see the magic of DNS happening.

Now that you have your property and location sussed out you can start thinking about how the structure of the restaurants building will look. This is where HTML comes in. It defines the basic structural elements of the page alike the frame / content of the building. You can add in dinner tables, places for art on the walls, all the kitchen necessities, etc. with HTML. There are limitations, however, and it comes down to the specific placement of that content. That is what CSS does.

CSS is the interior and exterior designer of the restaurant. It can bend and shape the HTML elements, colorize and add lighting to the room, even move things around. The only limitation with CSS is that it can only alter the elements that are currently within the page, it cannot add or take away the physical HTML elements. Their only job is to look at what is available and to position / style it.

So now you have a restaurant built but there is still something missing – electricity. Javascript is the weapon of choice for this function and can do some very special things. It can animate the doors to open when a user walks in or leaves. It can add and remove HTML elements and customize the restaurant specifically to the needs of the current user. It can change CSS styling and adjust the position of elements. Actually, Javascript isn’t just electricity, it’s more like the restaurants wizard. You could even build an entire website only using HTML that is embedded within Javascript, but it is hard to maintain and frowned upon. That is not to say a site can’t contain a heavy amount of Javascript as you will see in the future lessons.

Finally you need the staff of the restaurant. This is what a server-side language is. A server side language runs code on – you guessed it – the server, and handles all requests from users and delivers the content back to them. When you enter a restaurant you grab a seat somewhere and are greeted by a waitress. She takes your request (such as google.com/about), brings it to the chef and he cooks up the content (HTML, CSS, Javascript, etc) that you wanted. All of this takes place in the server side language, but it is important to note that once the content has been delivered then the server stops caring about it until it gets another specific request.

As you can see there is a lot of different aspects of Web Development and I only touched the tip of the iceberg with this post. When building a restaurant in real life you have a bunch of different people for the different jobs. There are people who specifically build the frames for the building, electricians for the the wiring, plumbers for the toilets, etc. However as a Web Developer you must be competent at all of these jobs and more. You are the architect, contractor, construction worker, electrician, plumber, manager, etc all rolled into one. While some major companies like Facebook will hire people for these individual roles you must learn them all to fully understand how they work together before you can become an expert at one individual topic.

And that’s pretty much as best as I can do without going into full detail about each individual language. Next lesson we will start looking at actual HTML code and standards.

TL;DR

A website is like a restaurant

Restaurants need a property (server) and location (web host)

The frame of the restaurant building is HTML

CSS takes that frame and can position and style it.

Javascript is the restraunts wizard who can adjust the HTML and CSS among many other things.

The staff of the restaurant is the server side language.