what is difference between front-end developer and back-end developer ?

If you’ve just started learning web development 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.

 

Introducing Frontend Development

The frontend of a website is what you see and interact with on your browser. 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 big sweet shop named "bikaner sweets" 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.

Front end developers use HTML, CSS, and JavaScript to code the website and web app designs created by web designers. The code they write runs inside the user’s browser (as opposed to a back end developer, whose code runs on the web server). Think of it a little like this: the back end developer is like the engineer who designs and creates the systems that make a city work (electricity, water and sewer, zoning, etc.), while the front end developer is the one who lays out the streets and makes sure everything is connected properly so people can live their lives (a simplified analogy, but you get the rough idea). They’re also in charge of making sure that there are no errors or bugs on the front end, as well as making sure that the design appears as it’s supposed to across various platforms and browsers.

These three languages will do the trick:

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.

Together these essentials create everything that’s visually presented when you visit a webpage - whether it’s online shopping, reading the news, checking your email or conducting a Google search.
In addition to basic front-end languages, you’ll come across frameworks like Bootstrap and Angular, as well as JavaScript libraries like jQuery, and CSS extensions like Sass and LESS. There’s a long list of resources like these, which support HTML, CSS, and JavaScript. Their purpose is simply to make code more manageable and organized by providing various tools and templates compatible with common coding languages.

Fast forward a few months. Your business website looks great, and the bikaner sweets has become incredibly successful. Now customers want to buy large quantities of sweets and other products for their furry friends, 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 for all those wagging tails? This is where backend development comes in.

Introducing Backend Development

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.

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.

In conclusion

The front-end is built using a combination of technologies such as Hypertext Markup Language (HTML), HTML5 — the latest version of HTML, JavaScript and Cascading Style Sheets (CSS).

 

The backend, also called the server side, consists of the server which provides data on request, the application which channels it and the database which organizes the information.

 

For example, if you purchase a pair of shoes from a website, you are interacting with the front end. After you select the item you want, put it in the shopping cart and authorize the purchase, the information is kept inside the database which resides on the server.

 

Full-Stack

The development of both the back- and front-end systems has become so specialized, it’s most common for a single developer to work on only one.
However, at times a custom software development company will have developers who are proficient with both sides, known as a full stack developer.
They are valuable because they see the big picture and can suggest ways to optimize the process or remove roadblocks that might be slowing down the system.

If you enjoyed this article then so will your friends, why not share it...