## glossary

What is Frontend?

The frontend is the part of a system that runs on the user’s device and that they interact with directly: the visual interface, the buttons, the forms, the animations and all the logic that responds to clicks and typing. It is what shows up in the browser or on the phone screen.

The distinction from the backend is one of territory. The backend runs on the server, stores the data and enforces the business rules; the frontend runs on the client and turns that data into something usable. The two talk to each other through an API.

The three foundational technologies

HTML — defines the structure and meaning of the content: what is a heading, what is a list, what is a form. It is also what search engines and screen readers interpret. See HTML and structure for SEO.
CSS — controls the presentation: colors, spacing, typography and how the layout adapts to each screen size. Go deeper in the CSS styling language.
JavaScript — adds behavior: reacting to events, fetching data without reloading the page, validating input. Details in the JavaScript entry.

Beyond the basics: the modern ecosystem

Applications of any size are rarely written with just those three. Frameworks like React, Vue and Angular organize the interface into reusable components with their own state. TypeScript adds static typing to JavaScript, eliminating a whole class of errors. And build tools like Vite and Webpack turn source code into files optimized for production.

The same task, with and without a framework

// plain JavaScript: you manipulate the DOM
const btn = document.querySelector('#contador');
let n = 0;
btn.addEventListener('click', () => {
  n++;
  btn.textContent = 'Cliques: ' + n;
});

// React: you describe the state, it updates the screen
function Contador() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>Cliques: {n}</button>;
}

Responsibilities that go beyond the visual

Frontend is not just "making it pretty". The layer carries weighty technical decisions:

Performance — load time and visual stability are measured by the Core Web Vitals and directly affect Google rankings.
Accessibility — making sure the application works with screen readers, keyboard navigation and adequate contrast.
Responsiveness — the same interface has to work from a small phone to an ultrawide monitor.
Security — protecting against XSS, sanitizing input and never trusting validation done only on the client.
State — keeping data consistent across components, cache and server as the application grows.

Where to render: client or server

A central decision in modern frontend is where the HTML gets generated. With client-side rendering (CSR), the browser receives an empty page and builds everything via JavaScript — simple, but bad for SEO and for the first load. With server-side rendering (SSR) and static site generation (SSG), the HTML arrives ready, improving indexing and time to display. Frameworks like Next.js let you choose the strategy per page.

## faq

Frequently asked questions

What is the difference between frontend and backend?

The frontend runs on the user’s device and handles the interface and interaction. The backend runs on the server and handles data, business rules, authentication and integrations. They communicate through an API, and the split lets different teams work in parallel.

What is a full-stack developer?

Someone who works on both ends, frontend and backend. In practice, almost every full-stack developer is deeper on one side — the realistic expectation is the autonomy to ship an entire feature, not maximum specialization in both.

Do I need to learn JavaScript before learning React?

Yes, and the difference is significant. React is JavaScript — concepts like higher-order functions, destructuring, promises and scope come up all the time. Those who skip that foundation tend to get stuck on errors that have nothing to do with React itself.