Frontend Guides

Frontend development is building the interface layer of a website or app, the part users see and interact with directly. Page layout, colors, menus, buttons and forms are all part of the frontend. It rests on HTML (structure), CSS (appearance) and JavaScript (interaction), and larger projects use libraries and frameworks such as React, Vue or Angular.

The frontend is the interface users see in the browser, while the backend is the server side that runs in the background and processes data. On an online store, showing the product list on screen is the job of the frontend, while fetching product details from the database and saving the order is the job of the backend. The two layers usually talk through APIs; developers who build both are called full stack developers.

React is an open source JavaScript library developed by Meta for building user interfaces. It splits the interface into reusable components and updates only the affected part of the screen when data changes. It is one of the most widely used tools for web interfaces, and with React Native the same approach can be carried over to mobile apps.

Next.js is an open source web framework built on React and developed by Vercel. It brings together rendering pages on the server or at build time, file-based routing, image optimization and API routes in a single project. It is a common choice for sites that need to load fast and be easy for search engines to read.

Server-side rendering is preparing a page's HTML on the server and sending it ready-made, instead of building it in the user's browser. The content appears as soon as the page opens, and search engines can read the page without running JavaScript. In the opposite approach, client-side rendering, the page is built in the browser with JavaScript; this gives flexibility in interactive apps but can slow down the first load.

Web accessibility means a site can be used by everyone, including people with visual, hearing, motor or cognitive disabilities. Content that screen readers can understand, menus and forms that work with a keyboard, sufficient color contrast and alternative text for images are the basic requirements. The international standard is the W3C's WCAG guidelines; changes such as meaningful headings and alt text also help search engines.