What is full stack web development

1. Definition

Full stack web development= frontend developmet + backend development . This is the easiest way I can explain you about it . And a FULL STACK WEB DEVELOPER is the one who has expertise in both the frontend and the backend part .

Lets dive a bit deeper into it and understand its elements seperately.

1.1. Front end(client side )

It refers to the main front part a user actually views in a webpage/ website/blog etc. It is mainly composed of 3 languages :-

HTML: Responsible for structuring the user interface.
CSS: Responsible for styling the user interface.
JavaScript: Provides interactivity and dynamic content on the client side

1.2. Backend(server side)

Server: Manages and processes requests from the client, often handling business logic and interacting with databases.
Database: It stores and retrieves data. Common databases include MySQL, PostgreSQL, MongoDB, etc.
Server-side scripting/programming languages: These can include languages like Node.js (JavaScript), Django(Python) ,PHP etc.

Also along with frontend and backend one must have knowledge about database handling and working with APIs(Application Programming Interfaces) as well as version control systems such as GIT for tracking changes and deployment of applications and servers as well.

But first of all the most important part is the frontend development

2. Frontend development

lets dive deeper into understanding what actually is HTML,CSS and JAVASCRIPT. We will understand it using METAPHOR .

HTML (Person's Skeleton):
- Metaphor: If the web page is a person, then HTML is like the person's ~~skeleton~~. It provides the basic structure, much like how the skeleton defines the body's shape. It outlines the key components but lacks the aesthetic details.
CSS (Person's Clothing and Makeup):
- Metaphor: CSS can be compared to the person's clothing and makeup. Just as clothing and makeup enhance a person's ~~appearance~~, CSS enhances the visual presentation of the HTML. It styles and decorates the HTML elements, making them visually appealing.
JavaScript (Person's Actions and Interactions):
- Metaphor: JavaScript is like the person's ~~actions and interactions~~ with the environment. It adds life and dynamism to the static structure. Imagine the person talking, moving, and responding to events. Similarly, JavaScript makes the webpage interactive by allowing elements to change, respond to user input, and update dynamically.

Now we will design a basic web page using html first and then add css and javascript to it .

HTML only -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog 1</title>
</head>
<body>

    <h1>This is a webpage </h1>
    <p>Hi my name is Prakhar Khugshal and in this blog we will learn basic about html,css and javascript.</p>
    <img src="gulabjamun.jpg" alt="" height="200px">
     <br><br>
    <button id="button">Click here </button>

</body>
</html>

With css -

body{
            background-color: black;
            box-sizing: border-box;
        }

        h1{
            font-family: Georgia, 'Times New Roman', Times, serif;
            color: rgb(213, 208, 215);
            text-align: center;
        }
        p{
            padding: 20px;
            text-align: center;
            color:rgb(191, 191, 149);
        }

        img{
             border-radius: 10px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

Html+css+javascript -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog 1</title>
    <style>
        body{
            background-color: black;
            box-sizing: border-box;
            color: azure;
        }

        h1{
            font-family: Georgia, 'Times New Roman', Times, serif;
            color: rgb(213, 208, 215);
            text-align: center;
        }
        p{
            padding: 20px;
            text-align: center;
            color:rgb(191, 191, 149);
        }

        img{
            border-radius: 10px;
            display: block;
            margin-left: auto;
            margin-right: auto;

        }


    </style>
</head>
<body>

    <h1>This is a webpage </h1>
    <p>Hi my name is Prakhar Khugshal and in this blog we will learn basic about html,css and javascript.</p>
    <img src="gulabjamun.jpg" alt="" height="200px">

    <br><br>
    <button id="button" onclick="function1()">Click here </button>

    <p id="demo"></p>


    <script>

        function   function1(){
              document.getElementById("demo").innerHTML="You have clicked the button now !!"
          }


    </script>

</body>
</html>

So this was the basic html web page and I have shown that basically how does html , css and Js works. Now we can learn more about it and design creative and responsive websites and web pages using it

3.Conclusion

Here is an image of webpage designed completely using HTML and CSS

You can try it and see how things work !!

Till then keep exploring and learning !!