If you have just started learning web development, you will likely have heard a lot of talk about front-end and back-end development. But what exactly do these words mean? And what is the difference between them exactly? This is what we will find out here.
What is front-end development?
The front-end of the site is what you see and interact with in the browser. It represents the development of the user interface like texts, colors, buttons, or images. For example, if you want to develop a website for a restaurant, you will put the information about the restaurant, whether it is the address of the restaurant or pictures of the dishes they serve, so that the site attracts customers. All this is done using front-end techniques.
Front-end languages
There are three primary languages:
HTML: is the language for building the structure of the website that will be displayed in the browser.
CSS: Comes with HTML, from which you specify the layout of the site, which includes colors, design, and fonts.
Javascript: is a programming language that is used more in interactive elements of the page such as drop-down menus, contact forms and changing the theme of the site from dark mode to light mode and vice versa… etc.
In addition to these basic languages, there are some plugins needed to build any site, for example some CSS libraries like Bootstrap or Materialize, some Javascript frameworks like Angular, Vue or React (noting that React is a library), and some plugins for CSS is also known as SASS or LESS.
Behind the scenes
After several months of building the site for the restaurant and after the site succeeded well, now customers want to eat from the dishes served in the restaurant, and they are wondering if online food ordering is available and some may want to book a table to eat dinner with their friends. So you decide that you will add those features For your site, this means that the site will deal with product data, purchase and customer accounts. How will you manage and organize that data on your site? This is where back-end development comes in.
What is back-end development?
So far, what you have is an example of a static website whose content does not change much. This type of website is good for showing things like businesses, restaurants, or business fairs. But if you want to make your site interactable with customers, you will need to know more about what goes on behind the scenes of the site.
The back-end is the part that you don’t see on the site. It is responsible for storing and organizing the data and making sure that everything in the interface of the site works well. The back end communicates with the site’s interface, sends and receives information, and then displays it on the site.
Whenever you fill out a contact form, type a website address or make a purchase, the browser sends a request to the server, which returns the information written in the form to handle it. Your site needs a database to manage all information about products and customers. A database stores content in a structure that makes it easy to retrieve, organize, modify, and save data.
It runs on an external computer called a server. There are many widely used databases such as MySQL, SQL Server, PostgresSQL, MongoDB and Oracle. Now your site must be built in a programming language that the database can recognize. Some of the well-known back-end languages are Ruby, Java, PHP, Python, ASP.Net and Node.js.
These languages are often run in frameworks that are easy to work with and learn, such as Rails, which is a Ruby framework. This is where Ruby On Rails comes in. This is a popular technology for building dynamic websites that get operations done faster.
In cooperation with all these parts correctly, the customer can visit the site and search for a specific type of dish to order for purchase. When they type in the search field (in the front-end), the site searches all the products stored in the database (in the back-end) and retrieves the appropriate information in the form of the Front-end code, so the client’s request appears in the browser and makes the purchase or reservation.
English (UK) 
العربية