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.
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 good 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 or the comments below!
It's midnight. You're huddled in the restricted section of the library, eyes glued to powerful tomes—Creating Killer Websites! Resilient Web Design! The Pragmatic Programmer! You get a missive from your co-conspirators in the Late Night Code Club—another night of adventurous learning is about to begin.
If you enjoyed this post and want to read more like it, I'd like to invite you to join the Late Night Code Club by signing up for the newsletter—it's a programming education newsletter all about learning and teaching programming. We're exploring new approaches to learning and teaching, code as a creative practice, and programming as part of an interdisciplinary education. In each newsletter you'll receive updates about new posts as well as other resources and ideas all about learning programming! It'll be short, interesting, and encouraging for learners and teachers. See you there!