Introduction to Web Development and the Holy Trinity of it

Last Updated : 15 Nov, 2022

Introduction and Holy Trinity of Web Development

This article will give you an overview of the Front End Development, Back-End Development, and the Full Stack Development and will give you an idea about each of them in detail so that you can decide your field of interest for yourself. Starting from the basic book definition, ‘Web development refers to the building, creating, and maintaining websites. It includes aspects such as web design, web publishing, web programming, and database management.’ frontendvsbackend Now let’s cover each aspect of web development in detail. Front End: “Front End” typically refers to all the kinds of stuff that the user actually sees on the website, once it loads completely. This is why it is also called the “client-side” of the front-end. This includes user interface elements like menus and dropdowns, navigation bar, sidebars, headers, footers and also CSS animations. The front end of any website has to communicate with both, the user and the back-end part of the system. So, the front-end developer is responsible for the aestheticism, design and look of the website. Also, as per the recent market trends, a front-end developer must have the knowledge of making a website responsive to different devices, browsers, and screen sizes. This is because the market is very versatile, and different browsers and devices have some complications and properties that have to be kept into consideration before making a website or a blog (for example, the shadow property). A front-end developer focuses heavily on the understanding of HTML, CSS and JavaScript. Front-end developers also have to make sure that the user’s interaction with the website is smooth and friendly. A front-end developer doesn’t need back-end development skills and the websites created by the front-end developers doesn’t need to interact with information stored in a database in order to be functional. Now talking about the job opportunities, there are multiple job positions and vacancies available in the industry. However, the skill set required for a job profile at a company might differ completely from the skill set required at some other company for the same job profile. This means that one job title may mean something at one company, and then complete another thing at some other company. So, it’s always better, not to guess anything about the job profile by yourself, and to search and read about the skills needed and the work that you will have to do after getting hired, before going for the interview. Most commonly seen job titles, related to the front-end development are:

Front End Developer
UI/UX designers
Web Designer

Note: UI stands for User Interface while UX stands for User Experience. UI designers have to take care of the virtual aspects of the website’s design while the UX designers conducts user testing to ensure the smooth running of the website. One very common question among the aspiring web developers and job seekers is ‘What is the difference between a web developer and a web designer, and ‘How does one differ from another’.

A web designer uses graphics and graphic design software like Adobe Photoshop, Illustrator or InDesign to create a look for the website. A strong grasp on a variety of concepts including color and typography, special relationships, audience and user experience is required to be a good web designer. So, the main work of a website designer is to create the most aesthetic look possible for a website using software like Adobe Photoshop, InDesign etc.
Whereas, a web developer is responsible for developing the design given by the web designer to a working model that can be accessed by different users over the globe. HTML, JavaScript, JQuery, and CSS are some of the tools that a web developer must have in their kit.

Back End: The part of the application that lives basically on the server is called the backend of the website. Since this part is accessible to the website visitors and users, hence it is also known as the server-side of the website. The main objective of the backend is to make sure that correct data is sent out to the browser at the user’s request. Although it is not an easy process and a lot has to be done to retrieve the information from the backend and then display it to the user on the front-end. Let’s take an example to make the things more clear; A student wants to get his semester result from his college’s website. After filling the required form (enrollment number, Date of Birth etc) he submits the submit button. After the submit button is pressed, the website starts matching the information entered by the user with the information stored in his database. If the information is found to be correct, the back-end collects and processes the data from the back-end and sends it to the front-end of the website where the result is eventually displayed to the student. Back-end developers use languages such as Java, PHP, Ruby on Rails, Python, and.Net to get the work done. Back-end development is very much required to create a dynamic website. Dynamic websites are those websites whose data keeps on updating itself with time. For example, When you log into your twitter account after a fair amount of time, you are automatically greeted with the latest updates from people you follow on your feed. They’re not going to be the same updates that you saw yesterday. How did the page change? There’s no chance that any company would recruit employees just to manually update the news feed. Actually, a script on the Twitter back-end would have received the updates and re-generated the front-end accordingly. Examples of dynamic sites include Facebook, Twitter, and Google Maps. The back-end has three parts to it: Server, Application, and Database. Note: Technologies like MySQL and MongoDB are used for the database management. Full Stack We can define full-stack developer as someone who is highly proficient in one of the two ends but can also handle working with the other end whenever necessary. Basically, the full stack developers are familiar with both front and back-end development. However, they may not have the same depth of knowledge as someone who specializes in either front end or back end. This is why sometimes they are referred to as the ‘Jack of both trades’.

The Holy Trinity of Web Development

Front-end web basically composes of the HTML and CSS which are the scripting language and the JavaScript which is the programming language. The front ends of all the websites, whether small or large, are built using these three languages. This is why they are called the Holy Trinity of the Front-End web development. It is also essential for the full stack developers to be familiar with these three languages, so they can understand how the server side changes affect the user interface side of the website (useful for the development of dynamic websites). Here is a brief summary of the three languages. HTML (Hyper Text Markup Language): HTML is the language used to create the websites you visit every day, and it provides a logical way to structure content for websites. We can also define HTML as the language that helps in creating the backbone of any website. Below mentioned are the basic HTML tags which divides the whole document into various parts like head, body etc.

Every HTML document begins with a HTML document tag. Although this is not mandatory but it is a good convention to start the document with this below mentioned tag:

<!DOCTYPE html>

<html> : Every HTML code must be enclosed between basic HTML tags. It begins with <html> and ends with </html> tag.
<head> : The head tag comes next which contains all the header information of the web page or document like the title of the page and other miscellaneous information. These informations are enclosed within head tag which opens with <head> and ends with </head>. The contents will of this tag will be explained in the later sections of course.
<title> : We can mention the title of a web page using the <title> tag. This is a header information and hence mentioned within the header tags. The tag begins with <title> and ends with </title>
<body> : Next step is the most important of all the tags we have learned so far. The body tag contains the actual body of the page which will be visible to all the users. This opens with <body> and ends with </body>. Every content enclosed within this tag will be shown on the web page be it writings or images or audios or videos or even links. We will see later in the section how using various tags we may insert mentioned contents into our web pages.

The whole pattern of the code will look something like this:

HTML

<html>
<head>
    <!-- Information about the page -->
    <!--This is the comment tag-->
    <title>GeeksforGeeks</title>
</head>
<body>
    <!--Contents of the webpage-->
</body>
</html>

This code won’t display anything. It just shows the basic pattern of how to write the HTML code and will name the title of the page as GeeksforGeeks. is the comment tag in HTML and it doesn’t read the line present inside this tag. CSS (Cascading Style Sheets): CSS is used to stylize the HTML contents present on a website. This includes modifying the page color, font-family, font-size, element positioning and more. There are three types of CSS:

In a separate file (external)
At the top of a web page document (internal)
Right next to the text it decorates (inline)

External Style Sheets: Separate files having CSS instructions with the file extension (.css). The main advantage of using external style sheet is that you can change the whole website’s style at once, without rewriting or modifying the style tag every page. Thus saving a lot of time and energy. However, the external style sheet must be linked into the HTML file by using the tag between for making it work.

CSS

<head>
    <link rel="stylesheet" type="text/css" href="gfg.css">
</head>

Internal Styles: Placed at the top of each web page document before any of the content is listed. The internal style CSS codes are written between the head tags in the of the HTML file itself. Internal styles are very easy to find and they are given the second highest priority, next to the external style sheets.

CSS

<head>
   <style>
      body {
      background-color: linen;
      }
      h1 {
      color: maroon;
      font-style: bold; 
      }
   </style>
<body>
   <h1>Hello,GeeksforGeeks</h1>
</body>
</head>

Output:

 Hello, GeeksforGeeks

Inline Styles: Placed right where you need them, next to the text or graphics you wish to decorate. The inline styles can be inserted in the middle of the HTML code. This gives the real freedom to specify each web page element, however, can make the maintenance work of the website difficult.

html

<h1 style="color:blue; font-style: italic;"> Hello, GeeksforGeeks </h1>

Output:

 Hello, GeeksforGeeks

But can a website have multiple style sheets? Yes, but there will be some rules that will be followed. Have a look at the following example. Assuming that an external style sheet name as gfg.css has the following style for the <h1> element:

html

h1 {
    color: orange;
}

If the internal style is defined after the link to the external style sheet (like given below), the <h1> elements will be “green”: Example:

CSS

<head>
   <link rel="stylesheet" type="text/css" href="gfg.css">
   <style>
      h1 {
      color: green;
      }
   </style>
</head>
<body>
   <h1>Hello, GeeksforGeeks</h1>
</body>

Output:

Hello, GeeksforGeeks

However, if the internal style is defined before the link to the external style sheet, the <h1> elements will be “orange”: Example:

CSS

<head>
   <style>
      h1 {
      color: green;
      }
   </style>
   <link rel="stylesheet" type="text/css" href="gfg.css">
</head>
<body>
   <h1>Hello, GeeksforGeeks</h1>
</body>

Output:

Hello, GeeksforGeeks

JavaScript: One thing that must be kept in mind is that JavaScript and Java are completely different languages, both in concept and design, and both have no correlation with each other. Java is an Object Oriented Programming (OOP) language created by James Gosling of Sun Microsystems. JavaScript is a scripting language and was originally known as LiveScript. JavaScript is used in front-end development whereas Java is used for back-end development in web development. The main function of a Javascript is to add logic and interactivity to a webpage (For Ex. A link changes its color once the user clicks on it). However, the script should be included in or referenced by an HTML document for the code to be interpreted by the browser. It means that a web page need not be a static HTML, but can include programs that interact with the user, control the browser, and dynamically create HTML content. The merits of using JavaScript are:

Less server interaction: The user input can be validated before sending the page off to the server. This saves server traffic, which in turn make the website faster to load.
The visitors don’t have to wait for a page reload to see if they have forgotten to enter something. For example, the website instantly notifying the user about the corrections needed in form before it is submitted.
Such interfaces can be created that will change the font-style or the font-color of a link, once the user hovers over them with a mouse.
JavaScript can be used to include items as drag-and-drop components and sliders, thus creating a richer and better interface for the user.

So this was some information about HTML, CSS, and JavaScript and you must know them if you wish to become a front-end developer or a full stack developer.