Frontend
Definition
Everything visitors see and interact with on a website – the design, buttons, text, and animations. Built with HTML, CSS, and JavaScript.
What is Frontend?
Frontend (or front-end) refers to the client-side of a website – everything you see and interact with in your browser. It's the visual interface: layouts, colours, buttons, forms, animations, and text.
Frontend Technologies
HTML
The structure of the page. Defines headings, paragraphs, images, links, and forms.
CSS
The styling. Controls colours, fonts, spacing, and responsive layout.
JavaScript
The interactivity. Powers animations, form validation, dynamic content, and user interactions.
Frontend Frameworks
Tools like React, Vue, or Next.js that help build complex frontend applications.
Frontend vs Backend
| Frontend | Backend |
|---|---|
| What you see | What you don't see |
| Runs in browser | Runs on server |
| HTML, CSS, JS | Python, PHP, Node.js |
| User interface | Data processing |
What Frontend Developers Do
- Convert designs into working code
- Ensure cross-browser compatibility
- Optimise performance and loading speed
- Create responsive layouts for all devices
- Build interactive elements and animations
- Implement accessibility features
Frontend and User Experience
Good frontend development is crucial for:
- Speed: Optimised code loads faster
- Usability: Intuitive interactions
- Accessibility: Works for everyone
- Mobile: Responsive on all devices
A beautiful design is worthless if the frontend implementation is poor – slow, buggy, or inaccessible.
Modern Frontend
Today's frontend is more complex than ever. Single-page applications, component-based architecture, and JavaScript frameworks have transformed what's possible in the browser.