Web development (Front-end,Back-end and Full-Stack)

CODETOPIA COMMUNITY
7 min readNov 22, 2020
website development
Front-end,Back-end and Full-stack development

Most often we usually confuse ourselves with these three great terms;Front-End,Back-end and Full-stack development.Moving out of the Web development scope, you will realize that we come across these terms in some day-to-day activities like ordering food from the waiter in a restaurant.To make this very simple for you, lets break this down to the lowest degree.

When you order a food from a menu list at the restaurant, all what you do is sit tight,get some glass of Juice and after some few minutes Voila! the waiter just comes back with the food you ordered.You don’t really investigate some concepts like

  1. Who prepared the food
  2. Ingredients used in preparing the food

All what you know is that the food is ready and you are up for consumption.Simple right!

Well that’s the same deal with Web development.But in this case, The food you ordered and consumed is the Front-end and the factors such as People involved in cooking the meal,ingredients used and all the kitchen activities in this case is known as the Back-end because that’s where all the logic in preparing your meal takes place. So now that you have a brief idea of what is up for discussion, lets dive in.

What is Front-end development?

Front-end development

When we mention Front-end development,we are simply talking about development associated with the visual part(GUI) of a website (client-side) or a web application.A client means a user,so the client-side in this term simply means the user’s side. For example when you(client) type www.BBC.com in your web browser, the page that you(client) see is termed as the Front-end part of BBC’s homepage.

BBC News homepage (front-end)

Therefore one may ask, how do i go about front-end development?
The answer is quite straight forward but lets dive in.
For one to start the journey as a front-end developer,one must have some level of understanding in some website technologies(languages) such as

  • HTML
  • CSS
  • JAVASCRIPT

There are more technologies(languages) that aid in front-end development such as Front-end frameworks and libraries.But since this article is solely for beginners,lets keep it brief and simple.One must note that despite the tons of technologies(languages) out there, understanding of the above three listed languages are very vital in the core foundation of front-end development.

HTML

HTML which is an acronym for Hypertext Markup Language is a web Markup language that is used to create the structure of the web.It is also sometimes referred to as the skeleton of the web because it just describes the frame of the web using what we call tags and nothing else.

html 5

CSS

CSS means Cascading Style Sheet and it is a stylesheet language that is used to describe the presentation layout of a web page(html) document.As we said earlier, Html is just the skeleton of the web so in order to get a more colorful and beautiful website,you need to apply CSS.

css 3

JAVASCRIPT

JAVASCRIPT which is sometimes also referred to as JS is a high-level scripting programming language that runs on the web browser to make specific features on the web page functional.It is more likely to say that JavaScript brings the web to life.

Javascript

Now that we have a fair idea about front-end development,lets dive into back-end development.

What is Back-end development?

back-end development

Casting your mind back to the restaurant scenario, you will remember we made mention of the food you ordered being the front-end and the kitchen activities being the back-end.
Ignoring this for now, ask yourself the following questions.

When i log into my Facebook page, how does facebook know that i entered the right password?
How does facebook know my username when i try to log in?
Why do i get warnings from facebook such as wrong password please try again when i mistakenly try to log in with a wrong password?

Well its not magic.The right answer to all the above questions is “Back-end development”.Lets say for example you want to create a site that will take in your client’s username, password and some other information. (See site below)

sign up page

Now what you see in the above picture is called the front-end because that is what your client is going to see and also interact with. Without a back-end programming, when the user or client enters his or her name,email or password, the information won’t be stored anywhere.It will just be plain text in a text area.

So in order for you to store the user’s or client’s name,email,password and other sensitive information, you will need to apply some back-end programming so that when the user tries to log in next time to his or her page or site, he or she would be verified or granted access. You would have to learn some back-end languages such as the ones below in order to apply a solid back-end programming

  • PHP
  • Python
  • Ruby
  • Java
  • SQL
    Just to mention a few.

PHP

PHP (Hypertext Preprocessor) PHP is a popular general-purpose scripting language that is especially suited to web development.
Fast, flexible and logic based, PHP powers everything from your blog to the most popular websites in the world.

php

Python

Python is also very suitable for back end web development because it is an interpreted, high-level and general-purpose programming language. Python’s design philosophy emphasizes code readability with its notable use of significant whitespaces. Its language construct and object oriented approach aim to help programmers write clear,clean and logical code for small and large-scale projects.

python

Ruby

Ruby is also an interpreted, high-level, general-purpose programming language. Which many web developers use in their back-end programming.Ruby is a scripting language built from the ground up for use in front end and back end web development and similar applications. It is a robust, dynamically typed, and object-oriented language.And one interesting thing about ruby is that its very friendly meaning its very easy to learn.

ruby

Java

Java is a class-based, object-oriented programming language that is designed to have as few implementation dependencies as possible.Because of it clean and clear coding abilities it goes with a principle called WORA which means Write Once Run Anywhere.This means a programmer can develop Java code on one system and can expect it to run on any other Java-enabled system without any adjustment. This language is also one of the preferred languages of back-end developers. Especially web app developers.

java

SQL

SQL

The last on our list is SQL. SQL which is an acronym for Structured Query Language is also a rational database management language which is used to manage data or in handling a database.It is particularly used in handling structured data like usernames,passwords,indices etc.It is also one of the languages that is very vital in web development since most websites will require users to enter sensitive information on the web.

So now that we know what Back-end is, Lets move to Full-Stack development.

What is Full-Stack Development?

This is very easy and self explanatory.This simply means the combination of Front-end and Back-end development.So this means that a Full-Stack developer is fully armed and has vast knowledge when it comes to both Front and Back-end development. This is a very complex and robust field because a developer in this field would have to multi-task in both sectors (Front-end and Back-end development)

full-stack development

So, with the above explanations and brief scenarios, you now have an idea about Front-end, Back-end and Full-Stack development.

BONUS ROUND😊

Taste of greatness

Websites and softwares in general in today’s term of development is quite easy and simple to learn compared to past times.In today’s world of website or software development, Technologies are being modified and programming is now very friendly and simple.For instance, frameworks are now created to ease both front-end and Back-end development.For instance if you want to create a responsive website, you don’t have to use @media queries in CSS to create responsiveness for all devices (mobile phones,tablets and desktops).This would be very difficult because screen resolutions vary from range to range.So Just to mention a few, you can use some of the frameworks below for both your Front-end and Back-end developments

  • Bootstrap
  • Vue
  • Angular
  • React
  • Node.js
  • Django ..etc

Most of these frameworks do the heavy lifting in your programming or coding journey.All what you need to do is apply correct algorithms and logic to your coding and Voila! you are good to go.

Never give up!
keep coding!

© 2021 Marathintech inc
Codetopia Community

--

--