If you’ve just started learning programming languages you’ll probably have heard a lot of talk about frontend and backend programming.But what exactly do we mean by this?If you’re a beginner in the field, it can be hard to know not only which is which, but also what is covered by one or the other.While frontend and backend development are certainly distinct from one another, they’re also like two sides of the same coin.I will give you a quick overview of tech terms in the industry. Let’s start with the frontend…

Front End

The easist way to think of a front end is what end user see and interact with on the browser or in an application.
Also referred to as “client-side”, it includes everything the user experiences directly: from text and colors to buttons, images, and navigation menus.
Let’s say you decide to start a business. You open a bakery store and need a professional website to present your company to customers and tell them where you’re located.
Maybe you’ll include a few photos and some information about your products. All you need are frontend technologies to build your website.

Frontend Languages

HTML – the fundamental coding language that creates and organizes web content so it can be displayed by a browser

CSS – a language that accompanies HTML, and defines the style of a website’s content, such as layout, colors, fonts, etc.

JavaScript – programming language used for more interactive elements like drop down menus, modal windows, and contact forms.

Behind The Scenes

Fast forward a few months. Your business website looks great, and the bakery has become incredibly successful.
Now customers want to buy large quantities of goodies and start asking if they can order online.
So you decide to open an online store where people can shop and place orders anytime.
This means your site will now have to store information about products, purchases, user profiles, credit cards, and more.
How will you manage this data so you can start delivering treats This is where backend development comes in.

Backend

So far, what you have is an example of a static website – its content doesn’t really change much. For static sites, all the necessary information that determines what’s on the web page is in the frontend code itself. Static websites are good for showcasing things like businesses, restaurants, 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 with regard to what’s going on behind the scenes of the website.
When we discuss the “frontend” of the web, what we’re really talking about is the part of the web that you can see and interact with.The frontend usually consists of two parts: the web design and front end web development. In the past when someone discussed development it usually referred to the backend, but in recent years there has been a real need to differentiate between designers that worked strictly in Photoshop and those that could code HTML and CSS. It went even further when designers crossed the lines to working with JavaScript. So now when we discuss the term “web design”, we’re really talking about those that work with Photoshop and Fireworks, and those that code using HTML, CSS and JavaScript.
Everything that you see when using the web is a combination of HTML, CSS, and JavaScript all being controlled by your computer’s browser.
These include things like fonts, drop-down menus, buttons, transitions, sliders, contact forms, etc.
Now to make all of this become a reality and to store the information that you put in the frontend elements, we need technology to make it happen. Enter the backend…

The backend (or “server-side”) is the portion of the website you don’t see. It’s responsible for storing and organizing data, and ensuring everything on the client-side actually works. The backend communicates with the front-end, sending and receiving information to be displayed as a web page. Whenever you fill out 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 frontend code that the browser can interpret and display.

The data is usually stored in database, such as Oracle, SQL Server and Sybase.
Your app will still contain frontend code, but it also has to be built using a language that a database can recognize. Some common backend languages are Ruby, PHP, Java, .Net, and Python.

Conclusion

I hoped this helped many of you get clear on when people are talking about the frontend and the backend.These are two different concepts but they go hand in hand to build an application or a web site.