Understanding the Difference Between "Front-End", "Back-End", and "Full-Stack".

The terms Front-End, Back-End, and Full-Stack come up often in Web Development.
What do they mean?

Front End

Front-End, basically, means everything that happens in the browser. This includes the page design (layout, colours, typography), behaviour, and implementation.
HTML, CSS, and JavaScript are the three main technologies used in front-end development:

  • HTML is the foundation on which all webpages are built, so it is essential.
  • CSS allows you to customize the look of HTML. It is not essential, but webpages without CSS look very plain.
  • JavaScript is not essential, but it allows you to add special behaviour to a webpage that is not possible using HTML and CSS alone. Many websites can be built without using JavaScript.

In addition to those three technologies, a front-end developer will likely use additional technology in the form of frameworks, libraries, and tools such as:

  • jQuery
  • Bootstrap
  • express.js
  • SASS
  • LESS
  • YAML
  • AngularJS
  • AJAX

Front-end development can be as simple as basic a webpage, as complicated as managing a database1, or as challenging as writing a game.
Front-end development can be, roughly, divided into:

  • Design: the layout, look, colours, typography, usability
  • Implementation: turning the design into something functional

As well, front-end development skills can also be used for writing browser extensions for Mozilla Firefox, Google Chrome, Microsoft Edge, and Apple Safari – because they all use HTML, CSS and JavaScript.
In the past, there were more front-end technologies, but these are, effectively, obsolete:

  • VBScript
  • ActionScript
  • Flash
  • Java
  • and others

Back-End

Back-End, basically, means everything that happens on the server. This mostly involves database work and processing data on the server to be sent to the browser.
A programming language (or two), a database, and server software are the main technologies used in back-end development. However, there is a lot more variety in back-end technology than in front-end technology.
Much of the skills and knowledge of front-end development are also applicable for back-end work because the back-end (server) has to send HTML pages to the front-end (browser or client).
In terms of programming languages, the following are commonly used for back-end development:

  • PHP
  • Python
  • Ruby
  • Java
  • C#
  • C++
  • Perl
  • Scala
  • JavaScript
  • and many more

Relational and non-relational databases are used (though, usually not on the same project):

  • MySQL
  • MariaDB
  • MongoDB
  • and many others

There is also the server technology that is used:

  • Apache
  • nginx
  • node.js
  • and many more

There are also many frameworks and libraries that are used:

  • WordPress
  • Django
  • Ruby on Rails
  • Laravel
  • Symfony
  • CodeIgnitor
  • KOA
  • Flask
  • and many more

Backend-end development can be, roughly, divided into:

  • Database Design: the structure of the database
  • Application Coding: this is the algorithms, processing, and flow of data through the back-end. This may be even further subdivided.
  • Glue Coding: this is code that binds the database, application, and server technology together
  • Server: for most small installations, the default configuration of the server is often “good enough” (assuming it has been properly secured). However, for larger servers, or more complex tasks, there can be custom server development and configuration. While this could be lumped together with Application Coding it is a sufficiently complex task that needs to be done independently of everything else

Full-Stack

Full-Stack refers the full-stack of technology, which is everything from the front-end all the way to the back-end.
So full-stack means everything that occurs on the server, in the browser and everything in between.
While there is a lot of technology involved (not to mention design issues), it is possible to learn enough to be a proficient full-stack developer. It is not about learning everything, it is about learning enough to do what you need.


  1. HTML5 browsers have a database called IndexDB that can be used for managing data on the client side. A common use is to replicate much of the functionality of the server so that even if the client is not connected to the Internet, the web application can still be used. This is becoming increasingly important as people expect their apps to always work.