Editor open? Terminal ready? Good: welcome to the guide's second part. We start with the visible half of the web.
You know the feeling when you enter a website and everything is smooth, attractive and clear? That button inviting a click, that menu opening with an elegant transition, that message appearing at just the right moment? All of that is the frontend.
🧑💻 Your application's visible face
In web development's big picture, the frontend is your app's face. Everything users see, touch, click and explore. It is the part living in the browser and transforming code into interfaces and interactions.
Frontend includes:
- Page layout.
- Colors, images, fonts.
- Buttons, forms, tables, dropdown menus.
- Above all, how these elements behave when users interact with them.
Frontend is pure user experience. If the backend is the engine, the frontend is the body and controls. If the backend is the brain, the frontend is the face and gestures.
👆 User interaction
The frontend is the only direct contact between user and application: every click, mouse movement and piece of form data begins there. It is more than "showing pretty things": a good frontend guides users, helping them understand where to go, what to do and how to recover from a problem.
Want to upload a profile photo? The frontend lets you choose a file, shows a preview and perhaps warns that the image is too large. Want your order list? The frontend retrieves and lays it out, letting you filter and sort results.
Every interaction must be intuitive, fast and accessible. The frontend developer's job is to make it possible through code.
⚙️ Rendering: how does everything appear on screen?
"Rendering" is the process through which the browser takes code (HTML, CSS, JavaScript) and turns it into something you can actually see and use.
Once, all content was generated on the server and "printed" into static HTML, arriving ready-made in the browser. Today, rendering often happens client-side: the browser receives raw data (frequently JSON, like the request examined two chapters ago) and processes it locally to build dynamic interfaces.
This is the Single Page Application (SPA) approach: one initial page loads, and everything thereafter happens through dynamic updates. Think of Gmail: you do not load a new page for every email. The app downloads only the necessary data and updates the view live.
Client-side, server-side, static, hybrid: there are different rendering approaches, each appropriate in different situations. Later we will compare them properly; for now, knowing they exist is enough.
✨ Frontend technologies
The foundations are always three:
- HTML: page structure (headings, paragraphs, links, buttons).
- CSS: colors, layouts, fonts, animations, responsive design.
- JavaScript: interactivity, logic, dynamic behavior.
Building a modern frontend entirely by hand with these three tools can be difficult and is often inadvisable. That is why frameworks and libraries are used:
- React: a component-based interface library developed by Meta.
- Angular: a complete, robust and structured framework developed by Google.
- Vue: a lighter, progressive framework loved for its simplicity.
Each has strengths, but the underlying idea is the same: helping organize and scale complex projects with reusable components and declarative logic. (If Angular interests you, this site has a whole series taking it seriously.)
🧠 What does a frontend developer actually do?
Writes code, yes. But also:
- Collaborates with designers and product owners to turn mockups and ideas into real interfaces.
- Writes semantic HTML and accessible CSS.
- Uses JavaScript (and TypeScript) for interaction logic.
- Integrates backend data through APIs.
- Optimizes performance and monitors compatibility across browsers and devices.
- Looks after every detail of the user experience.
🚀 Conclusion
The frontend is what users perceive. It is the most visible part, but also the most demanding: working is not enough; it must work well. We all know first impressions matter, including for an app.
Becoming a good frontend developer means training your eye, mind and heart: your eye for visual details, mind for logic and performance, heart for empathy toward the people using what you build.
In the next chapter, we meet the character making all this possible: the browser. We discover what happens between typing an address and seeing the page appear.