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.
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.
- 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.
- The staff of the restaurant is the server side language.