Front End & Back End
What is front-end development?
The front-end is what you see and interact with in your browser. Also known as the “client side”, it includes everything that the user experiences directly: from text and colours to buttons, images and navigation menus.
Let’s say you’ve decided to start a business. You are opening a gourmet dog treat bakery and you need a professional website to introduce your business to your customers and tell them where you are. You might include some photos and information about your products. All you need is the front-end technology to build the site.
What are the main frontend development languages?
These three languages will help:
HTML
HTML is the main markup language for coding, which organizes and arranges web content so that it can be displayed in a browser. You can find out more about HTML in our beginners’ guide.
CSS
CSS is a language that complements HTML and defines the style of content on a website, such as layout, colours, fonts, etc.
JavaScript
JavaScript is a programming language used for more interactive elements such as drop-down menus, modal windows and contact forms.
Together, these essential elements create everything that is visually displayed when you visit a web page – whether it’s shopping online, reading the news, checking your email or searching Google. They are known as the building blocks of the web, and for good reason!
Other frontend tools
In addition to basic frontend languages, you’ll come across web frameworks like Bootstrap, Django and Angular, JavaScript libraries like jQuery, and CSS extensions like Sass and LESS. There is a long list of such resources with different tools for each language and potential feature.
The aim of web frameworks and front-end libraries is simply to make code (and the process of writing it) more manageable and organised by providing a variety of tools and templates that are compatible with the most common coding languages.
What is back-end development?
So far, you have an example of a static website – its content remains virtually unchanged. For static sites, all the necessary information that defines the content of the web page is in the front-end code itself. Static sites are good for displaying things like businesses, restaurants, web development portfolios or professional profiles. But if you want to turn your site into something that users can interact with, you’ll need to get more in-depth information about what’s going on behind the scenes.
The backend (or ‘server side’) is the part of the site you don’t see. It’s responsible for storing and sorting data and making sure that everything on the client side actually works. The back end communicates with the front end by sending and receiving information that is displayed as a web page. Whenever you fill in a contact form, type in a web address or make a purchase (any user interaction on the client side), your browser sends a request to the server side, which returns information in the form of front-end code that the browser can interpret and display.
Your new website will need additional back-end components to make it a dynamic web application – a site whose content can change depending on what is in its database, and which can be modified by user input. This differs from a static site, which does not require a database, as its content usually remains unchanged.
