Introduction to the "Frontend" and "Backend"
From server to browser—understand the basics of the full stack to create a clear learning path.
So, you want to make a website?
Yay! That’s a great idea—making a website is a rewarding creative project that is not only a fun and valuable skill on its own but also a great way to explore your interests and share them with many, many people (or just a few if you want!).
Usually when someone starts learning how to make a website, the typical starting place is with HTML and CSS. And that’s a great place to start!
However, while you’re doing that, let’s take some time to take a wider look at how websites work underneath the hood. Understanding the big picture will put what you’re learning into context and help you plan a clearer learning path to dig deeper into web development.
The frontend and the backend
Two key words to understanding how websites work you might have heard before are the frontend and the backend. These are often talked about (and taught) separately and seen as two very different things, but they are both essential and closely connected in most web development projects.
In simplest terms, the frontend is any code that runs in the browser and the backend is any code that runs on the server.
The role of the backend code on the server is very basic on the surface:
- Listen for requests.
- Respond to requests.
However, these requests and responses can be much more complex than this simple example—the backend code also typically handles retrieving and storing data in a database, dynamic page rendering, security and authentication checks, intensive image processing, and many other processing heavy tasks in response to incoming requests.
The responses generated can also take many forms. They might be straightforward like goodl old HTML and CSS files or assets like images and audio files, but they can also take the form of data files such as JSON.
The browser then receives these files and processes them. The code in these files is frontend code because it runs on the browser-side.
The main role of the frontend is to:
- Request information (data, files, etc.) from the backend.
- Display or render that information.
- Listen for user input (clicks, taps, scrolls, hovers, typing, voice commands, etc.).
- Respond to user input.
The display of data is defined by HTML and CSS processed by the browser. The HTML tells the browser about the structure and content of the page, and the CSS tells the browser how to display it on the screen.
The world of web development is a huge playground to explore. Wherever you start exploring, having a map of the frontend and backend and what they do will help guide your next step. If you’re not sure where to start, I recommend trying a little of both to get a taste and then follow your curiosity!
Questions? Comments? Clarifications? Let me know on Twitter!