Introduction
Google, Wikipedia, YouTube, and even the website you’re reading this article on are meticulously crafted by a team of designers, developers, system administrators, and engineers. This article and other guides that follow will cover the technical development and deployment process, and by the end of this series, you will be able to create websites and serve them to anyone in the world.
Background
It is useful to understand the harmony between the various components that serve you the web right in your browser. At a rudimentary level, three elements enable us to access a web page; a server to “host” the website, a client to “render” the website, and a connection between them. I recommend reading this repository to get a complete picture; however, it is optional and can be omitted.
Frontend
The frontend consists of all that is visible to and interactable by a user accessing the website. Nowadays, HTML, CSS, and JavaScript are used to build the frontend, and the client, which is the web browser, is used to render it. The above three components each have specific functionality in generating the webpage. We’ll briefly go over them; for an elaborate tutorial, check out the links at the bottom of the article.
HTML
Hypertext Markup Language, or HTML, is used to structure the webpage and serves as the backbone of the frontend. It contains several tags, each having a particular use case. Some common tags are
Take a look at this simple HTML page, try to play around by editing the HTML and seeing what all the above tags do.
CSS
The above HTML looks a bit bland, doesn’t it? Cascading Style Sheets, or CSS, are used to specify the presentation of a webpage. They contain several attributes that allow the customization of the appearance of every HTML tag. Stylesheets are either included in the same file as the HTML using the <style> tag or stored in a separate file and imported using the <link> tag.
Feel free to explore the following version of the same page as above, with a touch of CSS!
JavaScript
The page is taking shape, but we have a problem — the page doesn’t do anything. JavaScript is a scripting language used to add functionality, logic, interactivity, and data to the webpage. JavaScript interacts with the webpage using the Document Object Model (DOM) and also using built-in Web APIs.
Do take a look at the webpage now with a little JS added to it!
Why Frontend and Backend?
Websites often contain sensitive information, data, and algorithms selected (with access restrictions), abstracted, and presented to the user. However, the end-user can neither be provided with all of the data nor has the processing power required. Hence, the website needs to pre-process the data provided to the user.
This separation between the user-accessible data and the non-accessible data has led to the frontend and the backend separation. Fortuitously, this allows us to divide and abstract the web development workflow and makes our lives easier.