Most people know what a website is from a visual perspective. But most people, including many tech people, have no idea what a website actually is. With the advent of services like Wix and Square Space, many people assume that websites are essentially drag and drop modules that you can "click to edit" or click on "delete" to get rid of. And if you're like my father, then you assume that the entire computer encompasses the entire internet. But that's a very high level look at the entire thing. The highest level I would say. The seamy underbelly is a much more fascinating and dynamic world filled with millions of records of data, temporary storage areas, AI (sometimes) and backdoors and alleys that no one ever finds.
in layman's terms, it is a translation of a language designed to create a visual experience to people all over the world
So today, I'm going to break down just how much farther the rabbit hole goes. If you're new to web development, or to websites in general, I hope this is an educational ride that will take you from what the eye perceives as a website, to the source of everything and the limitless potential that the internet has for new ideas and for changing the world.
What you see
For the most part a website is a collection of related "pages" that link to each other and that are visible through things called browsers. They have text, images, videos and sometimes interactive elements that you can click on and have some action take place. That's pretty much where the common perception ends. It's at the very crust of the whole thing. Mantle never explored. And for the most part, you don't have to know how a website works in order to use it. The interesting thing about websites, is that they are a unique experience to each and every person. You can have 100 people visit the same webpage, and each one of them will have a different experience. Some will be confused and won't know where to go, and others will dive right in and everything will just make sense..
And much of this has to do with how the website was built and what the intentions were from the designers point of view. So at the highest level, a website is indeed just text and images that work together to make a story or to get an idea across to the reader. If you're reading this blog post, then essentially the perception is that it's text written by me in order to tell you how a website works. But now let's go one step downward into what's making the web page.
The browser
You can have a website without a browser, but you just wouldn't know about it. It would be sitting on a computer (or many) somewhere as a series of files and resources. The browser is the only way in which you can experience the web. It's how people add their emails and sign up for newsletters, etc. Browsers are software applications that take a multitude of different elements, such as HTML, CSS, and JavaScript, and they turn that into shapes, images, text, colors and virtual controls such as buttons and links and such. You may think that Chrome is just the thing that allows you to buy soap on Amazon. But it's doing a ton of work just to render a search bar.
This is why websites look different in the many different browsers. Because each one has their own way of painting the screen based on markup and resources. So now you know. The browser is not the internet. Next up, we're going to follow your internet cable down to a faraway place.
The server
Next up is the server. This is where it can get tricky, because you can have many servers doing different work to generate your web page. The server essentially builds your HTML, CSS and JavaScript for the browser to render. I'll get to how it renders it further down below, but for now, just remember that the server needs to make HTML. For that it will use a variety of software and even a particular operating system.
The OS used depends on the programming language and the tech stack that the programmer chooses to use. Some can be interchanged, others cannot. The server can be a real physical server, much like a more powerful version of the desktop in your house, or it can be a virtual one. The virtual still relies on a physical medium, however it can be control more fluidly.
The data
You can have a website without a form of data storage, but it probably wouldn't do much nowadays. So most website that you visit, including this one, contains a database of some kind. Essentially, some software that can store bits and that can very quickly retrieve them based on certain filters and such. When you log in to a website, your credentials get taken, they get searched through a database. Once a match is found, your password is compared, and if a match is found, then bingo you are logged in. In that same logic, when you read one of my blog post (thank you :] ), the title, body, categories are searched for in the database and the code that I write pieces it together to form that particular page.
This entire process happens in less than a second and it is thanks to the database architecture that it can look up a record in the midst of a million others in no time flat. Many times the data storage software is kept on its own server, of which we saw above, in order to improve performance.
and now to the heart of the matter
The Source
The source is..nothing, essentially, until a programmer creates it. It's a set of rules, methods, functions and ideas that a programmer can use to create whatever they wish. If you want a clock drawn that vibrates at 3:30pm and then emails a note to your classroom crush, then that can be built. If you want a 2D sidescroller in which the main protagonists is an ape who tires of coding, then that's possible. You want a system to help you with your food truck business. One that will notify people where you'll be tonight? You betcha it's possible. How it's possible, is unknown right now, because I haven't built it. But for sure it's possible and it falls under some timeline of events.
The source has different levels as well. The lower the level, the more control that you can have. Only a few programmers normally spend time at the lowest of levels. Many of them older and wiser individuals. And they mainly do it for very specialized software such as video games and embedded software design. The higher the level of source, the less control you have, but the less work you have to do to accomplish certain things.
So how does this source work with a website? The source is what will get converted from thought to HTML through a long and complex process that varies depending on the idea and the resources. For example, let's say you want a login page implemented. You will have 2 levels of code to write. The first will be the actual HTML needed to render the page, and the second will be a lower level method that will verify the credentials. Both of these together will get processed by the server and turned into a functioning system of HTML, JavaScript, HTTP Requests that are required to make the whole thing work.
It's of course much more deeper and complex than that. But it's a general idea that should guide you in the right direction as to the nature of websites and web development.
The more you know
Hopefully this helps to dispel some of the mystery as to what exactly a website is. Many believe it's a browser, many believe it's the entire computer and many believe that it's magic and in our heads. And it is pretty magical really. It is a system designed for creation of a virtual world. Tell me that's not amazing! Even the simplest icon that you see online, that we miss and take for granted is only there because of this larger and complex mechanism.
Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.
Stay up to date
Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.