DEV Community: Raghul

Loops concept in JavaScript

Raghul — Wed, 08 Jul 2026 14:42:10 +0000

JavaScript Loops

Loops in JavaScript allow a block of code to run multiple times as long as a given condition is satisfied. They help reduce repetition and make programs more efficient and organized. Loops offer a quick and easy way to do something repeatedly. Loops can execute a block of code a number of times. Loops continue running until the condition becomes false.

*In JavaScript, there are three types of Loops : *

1. for Loop
A for loop repeats until a specified condition evaluates to false. The for loop repeats a block of code a specific number of times. It contains initialization, condition, and increment/decrement in one line. The for statement creates a loop with 3 optional expressions:

for (expr1; expr2; expr3) {
  // code block to be executed
}

exp1 is executed one time before the execution of the code block.
exp2 defines the condition for executing the code block.
exp3 is executed every time the code block has been executed.

2. while Loop
The while loop executes as long as the condition is true. It can be thought of as a repeating if statement. The while loop loops through a block of code as long as a specified condition is true.

let i = 0;
while (i < 3) {
    console.log("Number:", i);
    i++;
}

3. do-while Loop
The do-while loop is similar to while loop except it executes the code block at least once before checking the condition. The do while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

let i = 0;
do {
    console.log("Iteration:", i);
    i++;
} while (i < 3);

The do while runs at least once, even if the condition is false from the start.
This is because the code block is executed before the condition is tested.

Loop concept in JavaScript

Raghul — Wed, 08 Jul 2026 14:41:13 +0000

JavaScript Loops

*In JavaScript, there are three types of Loops : *

for (expr1; expr2; expr3) {
  // code block to be executed
}

exp1 is executed one time before the execution of the code block.
exp2 defines the condition for executing the code block.
exp3 is executed every time the code block has been executed.

let i = 0;
while (i < 3) {
    console.log("Number:", i);
    i++;
}

let i = 0;
do {
    console.log("Iteration:", i);
    i++;
} while (i < 3);

The do while runs at least once, even if the condition is false from the start.
This is because the code block is executed before the condition is tested.

if Conditions in JavaScript

Raghul — Mon, 06 Jul 2026 15:46:47 +0000

JavaScript - Conditional Statements

JavaScript conditional statements are used to make decisions in a program based on given conditions. They control the flow of execution by running different code blocks depending on whether a condition is true or false. Conditions are evaluated using comparison and logical operators.

***Reasons to Use Conditional *

Control Program Flow: Decide which code to execute based on different situations.
Make Decisions: React differently to user input, data values, or system states.
Enhance Interactivity: Enable dynamic behavior in apps and websites.
Handle Multiple Scenarios: Manage different outcomes or error handling paths.
Improve Code Flexibility: Write adaptable, reusable code that can respond to change.

Types of Conditional Statements

1. if Statement
The if statement checks a condition written inside parentheses. If the condition evaluates to true, the code inside {} is executed; otherwise, it is skipped.

let x = 20;

if (x % 2 === 0) {
    console.log("Even");
}

if (x % 2 !== 0) {
    console.log("Odd");
};
// output: Even

2. if-else Statement
The if-else statement executes one block of code if a condition is true and another block if it is false. It ensures that exactly one of the two code blocks runs. Used when there are two possible outcomes. The else block runs when the if condition is not satisfied.

let age = 25;

if (age >= 18) {
    console.log("Adult")
} else {
    console.log("Not an Adult")
};
//output: Adult

3. else if Statement
The else if statement is used to test multiple conditions in sequence. It executes the first block whose condition evaluates to true. Allows checking more than two conditions. Evaluated from top to bottom until a true condition is found.

const x = 0;

if (x > 0) {
    console.log("Positive.");
} else if (x < 0) {
    console.log("Negative.");
} else {
    console.log("Zero.");
};
//output: Zero

4. Using Switch Statement (JavaScript Switch Case)
The switch statement evaluates an expression and executes the matching case block based on its value. It provides a clean and readable way to handle multiple conditions for a single variable. Used when one variable needs to be compared against multiple fixed values. Improves readability compared to long if...else if chains.

const marks = 85;

let Branch;

switch (true) {
    case marks >= 90:
        Branch = "Computer science engineering";
        break;
    case marks >= 80:
        Branch = "Mechanical engineering";
        break;
    case marks >= 70:
        Branch = "Chemical engineering";
        break;
    case marks >= 60:
        Branch = "Electronics and communication";
        break;
    case marks >= 50:
        Branch = "Civil engineering";
        break;
    default:
        Branch = "Bio technology";
        break;
}

console.log(`Student Branch name is : ${Branch}`);

//output: Student Branch name is : Mechanical engineering

5. Using Ternary Operator ( ?: )
The ternary operator is a compact shorthand for an if...else statement. It is called “ternary” because it takes three operands:

A condition to test.
An expression to evaluate if the condition is true.
An expression to evaluate if the condition is false.

condition ? expressionIfTrue : expressionIfFalse

let age = 21;

const result =
    (age >= 18) ? "You are eligible to vote."
        : "You are not eligible to vote.";

console.log(result);
//output: You are eligible to vote.

6. Nested if...else[TBD]
A nested if...else statement is an if...else block written inside another if or else. It is used to evaluate multiple related conditions in a hierarchical manner. Useful for handling complex decision-making logic. Deep nesting should be avoided to maintain code readability.

let weather = "sunny";
let temp = 25;

if (weather === "sunny") {
    if (temp > 30) {
        console.log("It's a hot day!");
    } else if (temp > 20) {
        console.log("It's a warm day.");
    } else {
        console.log("It's a bit cool today.");
    }
} else if (weather === "rainy") {
    console.log("Don't forget your umbrella!");
} else {
    console.log("Check the weather forecast!");
};
//output: It's a warm day.

Operators in JavaScript

Raghul — Sun, 05 Jul 2026 17:33:46 +0000

Operators in JavaScript

JavaScript operators are symbols or keywords used to perform operations on values and variables. They are the building blocks of JavaScript expressions and can manipulate data in various ways.

Types of Operators

Assignment operators
Comparison operators
Arithmetic operators
Bitwise operators
Logical operators
BigInt operators
String operators
Conditional (ternary) operator
Comma operator
Unary operators
Relational operators

Now,we are going to disscuss mainly about five Operators:

1.Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations on the operands. Here is a list of operators that are known as JavaScript arithmetic operators:

2.Comparison Operators
The JavaScript comparison operator compares the two operands. The comparison operators are as follows:

3.Bitwise Operators
The bitwise operators are used to perform bitwise operations on operands. Here is a list of bitwise operators:

4.Logical Operators
Logical operators are mainly used to perform the logical operations that determine the equality or difference between the values. The list provides all the JavaScript logical operators:

5.Assignment Operators
The Assignment operators are used to assign values to the operand. The following operators are known as JavaScript assignment operators:

Variables and Datatypes in JavaScript

Raghul — Sat, 04 Jul 2026 17:18:03 +0000

Variables and Datatypes in JavaScript

Variables and Data Types in JavaScript are fundamental concepts used to store and manage data in a program. They define how information is declared, stored, and manipulated during execution.

Variables: Declared using var, let, and const to store data values.
Primitive Data Types: Includes Number, String, Boolean, Null, Undefined, BigInt, and Symbol.
Non-Primitive Data Types: Includes Object, Array, and Function used to store complex data.

Variables

A variable is like a container that holds data that can be reused or updated later in the program. In JavaScript, variables are declared using the keywords var, let, or const.

var Keyword The var keyword is used to declare a variable. It has a function-scoped or globally-scoped behaviour.

var n = 5;
console.log(n);

var n = 20; // reassigning is allowed
console.log(n);

let Keyword The let keyword is introduced in ES6, has block scope and cannot be re-declared in the same scope.

let  n= 10;
n = 20; // Value can be updated
// let n = 15; //can not redeclare
console.log(n)

const Keyword The const keyword declares variables that cannot be reassigned. It's block-scoped as well.

const n = 100;
// n = 200; This will throw an error
console.log(n)

4.without keyword
In this we can reinsilate and it prints the last value declare.

i=10;
i=20;
console.log(i)

Data Types

JavaScript supports various datatypes, which can be broadly categorized into primitive and non-primitive types.

Primitive Datatypes
Primitive datatypes represent single values and are immutable.

Number: Represents numeric values (integers and decimals).

let n = 42;
let pi = 3.14;

String: Represents text enclosed in single or double quotes.

let s = "Hello, World!";

Boolean: Represents a logical value (true or false).

let bool= true;

Undefined: A variable that has been declared but not assigned a value.

let notAssigned;
console.log(notAssigned);

Null: Represents an intentional absence of any value.

let empty = null;

Symbol: Represents unique and immutable values, often used as object keys.

let sym = Symbol('unique');

BigInt: Represents integers larger than Number.MAX_SAFE_INTEGER.We can denote BigInt by using n at the end or the values.

let bigNumber = 123456789012345678901234567890n;

Non-Primitive Datatypes
Non-primitive types are objects and can store collections of data or more complex entities.

Object: Represents key-value pairs.

let obj = {
    name: "Amit",
    age: 25
};

Array: Represents an ordered list of values.

let a = ["red", "green", "blue"];

Function: Represents reusable blocks of code.

function fun() {
    console.log("GeeksforGeeks");
}

JavaScript

Raghul — Fri, 03 Jul 2026 18:14:41 +0000

JavaScript

What is JavaScript?
JavaScript is a programming language. It can update and change in both HTML and CSS. It can validate,manipulate and calculate data. It is most well-known as the scripting language for Web pages. It used to create dynamic content for websites. It's an interpreted language that executes code line by line, providing more flexibility.

On the client side, JavaScript works along with HTML and CSS. HTML adds structure to a web page, CSS styles it, and JavaScript brings it to life by allowing users to interact with elements on the page, such as actions on clicking buttons, filling out forms, and showing animations. JavaScript on the client side is directly executed in the user's browser.

On the Server side (on Web Servers), JavaScript is used to access databases, file handling, and security features to send responses, to browsers.

Reasons to Learn JavaScript

Core language for web development, enabling dynamic and interactive features in websites with fewer lines of code.
Highly in demand, offering many job opportunities in Frontend, Backend (Node.js), and Full Stack Development.
Supports powerful frameworks and libraries like React, Angular, Vue.js, Node.js, and Express.js, widely used in modern web applications.
Object-oriented and event-driven language, ideal for building scalable and responsive applications.
Cross-platform and runs directly in all modern web browsers without the need for installation.
Major companies like Google, Facebook, and Amazon use JavaScript in their tech stacks.

Basic Syntax of JS

console.log("Hello World!");

College Web Page

Raghul — Mon, 29 Jun 2026 18:07:22 +0000

CSS Animations

Raghul — Mon, 22 Jun 2026 17:56:40 +0000

CSS Animations

CSS animations control the movement and appearance of elements on web pages. We can animate HTML elements without using JavaScript.

@keyframes: The @keyframes rule in CSS is used to specify the animation rule.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: changeColor 3s infinite;
        }

        @keyframes changeColor {
            from {
                background-color: blue;
            }

            to {
                background-color: green;
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

animation-name: It is used to specify the name of the @keyframes describing the animation.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: moveRight;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        @keyframes moveRight {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(200px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

animation-duration:
It is used to specify the time duration it takes animation to complete one cycle.
animation-timing-function:
It specifies how animations make transitions through keyframes. There are several presets available in CSS which are used as the value for the animation-timing-function like linear, ease,ease-in,ease-out, and ease-in-out.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: slide;
            animation-duration: 3s;
            animation-timing-function: ease-in;
            animation-iteration-count: infinite;
        }

        @keyframes slide {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(300px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

animation-delay: It specifies the delay of the start of an animation.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: fadeIn;
            animation-duration: 2s;
            animation-delay: 1s;
            animation-iteration-count: infinite;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

animation-iteration-count: This specifies the number of times the animation will be repeated.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-50px);
            }

            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

</html>

animation-direction: It defines the direction of the animation. animation direction can be normal, reverse, alternate, and alternate-reverse.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: move 2s infinite;
            animation-direction: alternate;
        }
        @keyframes move {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(200px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

animation-fill-mode: It defines how styles are applied before and after animation. The animation fill mode can be none, forwards, backwards, or both.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: move 3s forwards;
        }
        @keyframes move {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(200px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

animation-play-state: This property specifies whether the animation is running or paused.

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: spin 4s linear infinite;
            animation-play-state: paused;
        }

        .box:hover {
            animation-play-state: running;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

YouTube Home Page

Raghul — Mon, 22 Jun 2026 17:32:07 +0000

Youtube Home Page

Today I have create You-tube home page by using HTML CSS. Here is my Source code to understand better. This time I use some basic transition and all

Source code

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

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .All {
            height: 100vh;
            width: 100vw;
            display: grid;
            grid-template-columns: 1fr 6fr;
        }

        .left {
            border-right: 1px solid lightgray;
            display: flex;
            flex-direction: column;
            padding: 20px;
            justify-content: space-between;
        }

        p {
            display: inline;
            cursor: pointer;
            font-size: 20px;
        }

        .logo {
            width: 100px;
            margin-left: 50px;
        }

        h4 span {
            margin-right: 10px;
            cursor: pointer;
        }

        .shorts span {
            margin-right: 10px;
        }

        .right {
            display: flex;
            flex-direction: column;
        }

        .topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            position: fixed;
            width: 85%;
            background: white;
        }

        .searchbar {
            display: flex;
            align-items: center;
        }

        .search-bar {
            width: 500px;
            height: 40px;
            border: 1px solid gray;
            border-radius: 20px 20px;
            padding-left: 20px;
            cursor: pointer;
        }

        .search-but {
            width: 60px;
            height: 40px;
            border-radius: 20px 20px;
            border: 1px solid gray;
            cursor: pointer;
        }

        .rightinfo {
            display: flex;
            align-items: center;
            gap: 25px;
        }

        .rightinfo button {
            padding: 10px 20px;
            border: none;
            border-radius: 20px;
            cursor: pointer;
        }

        .rightinfo span {
            font-size: 25px;
            cursor: pointer;
        }

        .videos {
            margin-top: 100px;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .video-box {
            cursor: pointer;
        }

        .video-box img {
            width: 100%;
            border-radius: 15px;
        }

        .video-box h3 {
            margin-top: 10px;
        }

        .video-box p {
            color: gray;
            font-size: 15px;
        }

        .video-box:hover {
            transform: scale(1.02);
            transition: 0.1s;
        }
    </style>
</head>

<body>
    <div class="All">

        <div class="left">
            <p>☰</p>

            <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_Logo_2017.svg">

            <h4><span>🏠︎</span> Home</h4>
            <p class="shorts"><span>▶</span> Shorts</p>

            <hr>

            <h4>Subscriptions <span>›</span></h4>
            <p>Ashwin</p>
            <p>NBA</p>
            <p>Parithabangal</p>
            <p>FORMULA 1</p>
            <p>T-Series</p>
            <p>ICC</p>
            <p>MrBeast</p>

            <hr>

            <h4>You <span>›</span></h4>
            <p>👤 Your channel</p>
            <p>⟳ History</p>
            <p>⏭ Playlists</p>
            <p>⏱ Watch later</p>
            <p>♡ Liked videos</p>
            <p>➜ Downloads</p>

            <hr>
        </div>

        <div class="right">

            <div class="topbar">
                <div class="searchbar">
                    <input class="search-bar" type="text" placeholder="Search">
                    <button class="search-but">🔍</button>
                </div>

                <div class="rightinfo">
                    <button>➕ Create</button>
                    <span>🔔</span>
                    <span>👤</span>
                </div>
            </div>

            <div class="videos">
                <div class="video-box">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRbladkDoorFvot4utE2ZskRzsovCMGI0sGUDKTluNp7A&s" alt="">
                    <h3>CSK vs MI Highlights</h3>
                    <p>IPL • 120M views • 15 days ago</p>
                </div>

                <div class="video-box">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFhVNbZ3lXaWcH5W9ww1md0wi2At3PAyd-sKgZGNgyUg&s=10" alt="">
                    <h3>Formula 1 Highlights</h3>
                    <p>Formula 1 • 19M views • 22 hours ago</p>
                </div>

                <div class="video-box">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSphFifftUxnnnF0vnyo7I8PEQcTzI-dyTOgkwZX2LtUA&s=10" alt="">
                    <h3>NBA Finals Highlights</h3>
                    <p>NBA • 37M views • 12 hours ago</p>
                </div>
            </div>

        </div>
    </div>
</body>
</html>`

Instagram Login Page

Raghul — Mon, 22 Jun 2026 17:26:05 +0000

Instagram Login Page

Today I create instagram login page by using HTML CSS. Here is my Source code
Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>instagram</title>
    <style>
        main{
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            border: 1px solid;
            height: 90vh;
        }
        .left{
            /* border: 1px solid red; */
        }
        .right{
            /* border: 1px solid black; */
            display: flex;
            flex-direction: column;
            margin: auto;
            width: 60vh;
            gap:20px;
            /* margin-bottom: 20px; */

        }
        img{
            width: 80px;
            height: 80px;
            margin-left: 50px;
            margin-top: 50px;
        }
        h1{
            font-size: 40px;
            margin-left: 100px;
        }
        img.image{
            height: 400px;
            width: 400px;
            display: flex;
            align-items: center;
            /* border: 1px solid; */
            margin-left: 200px;
            margin-top: 25px;

        }
        input{
            border-radius: 15px;
            padding: 15px;
        }
        #log{
            border-radius: 25px;
            padding: 15px;
            background-color:#0064e0;
            color: white;
        }
        #forgot{
            border: none;
        }
        #face{
            border-radius: 25px;
            padding: 15px;
        }
        #new{
            border-radius: 25px;
            padding: 15px;
        }
        footer{
            display: flex;
        }
        a{
            margin-left: 15px;
            text-decoration: none;
        }

    </style>
</head>
<body>
    <main>
        <div class="left">
            <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%2Fid%2FOIP.mYuUB1WDaECliIuuurE_cQHaHv%3Fpid%3DApi&f=1&ipt=c03e3db7ff0688f560a07115d317cf5ca8bcbd92836a6f26abe0858b1ae956c8&ipo=images" alt="">
            <h1>See everyday moments from your close friends.</h1>
            <img class="image" src="https://static.cdninstagram.com/rsrc.php/yR/r/92ZsVHNkyvf.webp" alt="">
        </div>
        <div class="right">
            <h4>Log in to Instagram</h4>
            <input type="text" placeholder="Mobile number,username or email address">
            <input type="password" placeholder="Password">
            <button id="log">Log in</button>
            <button id="forgot">Forgotten password?</button>
            <button id="face">Log in with Facebook</button>
            <button id="new">Create new account</button>


        </div>
    </main>


</body>
<footer>
    <a href="">Meta</a><a href="">About</a><a href="">Blog</a><a href="">Jobs</a><a href="">Privacy</a><a href="">Terms</a><a href="">Locations</a><a href="">Popular</a><a href="">Instagram Lite</a><a href="">Meta AI</a><a href="">Threads</a><a href="">Contact uploading and non-users</a><a href="">Meta Verified</a><a href="">English (UK)</a><a href="">© 2026 Instagram from Meta</a>
</footer>
</html>

Project-FB login Page

Raghul — Mon, 15 Jun 2026 18:26:06 +0000

FACEBOOK Login Page

Today i am going to share about my new project. Facebook login page at first it look easy but as a beginner its bit tough to maintain the div and its class

Source code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        main{
            border: 1px solid;
            height: 90vh;
            display: grid;
            grid-template-columns: 2fr 1fr;

        }
        body{
            /* border: 3px solid yellow; */
        }
        footer{
            border: 1px solid black;
            height: 10vh;
        }
        .left{
            /* border: 1px solid red; */
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        .right{
            border: 1px solid green;
            display: flex;
            flex-direction: column;
            margin: auto;
            gap: 30px;
            width: 50vh;


        }
        .logo{
            /* border: 1px solid violet; */
            display: flex;
            flex-direction: column;
            justify-content:space-between ;
            padding: 25px;
        }
        .image{
            /* border: 1px solid indigo; */
        }
        img{
            width: 100px;
            height: 100px;
        }
        h1{
            font-size: 74px;
            width: 50%;
        }
        .image img{
            width: 90vh;
            height: 90vh;
            /* border: 1px solid black; */
        }
        span{
            color: blue;
        }


    </style>
</head>
<body>
    <main>
        <div class="left">
            <div class="logo">
                <img  src="https://thf.bing.com/th/id/OIP._6VkGA8hbkjwvRaUbavwVAHaHa?w=190&h=190&c=7&r=0&o=7&cb=thfc1falcon2&dpr=1.3&pid=1.7&rm=3" alt="Sorry">
                <h1>Explore the things <span>you love</span>.</h1>
            </div>
            <div class="image">
                <img  src="https://static.xx.fbcdn.net/rsrc.php/yB/r/83zWJdc6PJI.webp" alt="Oops">

            </div>
        </div>
        <div class="right">
            <h4>Log in to Facebook</h4>
            <input type="Email address or mobile number">
            <input type="password">
            <button>Log in</button>
            <button>Forgotten password</button>
            <button>Create new account</button>



        </div>
    </main>
</body>
<footer>

</footer>
</html>

I am not complete it, but today i use some new Tags like <input type="Text">,<button> and <span>

Git

Raghul — Tue, 09 Jun 2026 18:02:47 +0000

Git

Git is a distributed version control system that helps track and manage changes in code over time. It allows multiple developers to work on the same project, view previous versions, and restore changes when needed.

Features of Git

Version Control System: Git keeps track of every change you make to your project files. You can go back to previous versions is any requirement arises.
Repositories: A Git repository (or repo) is like a project's central hub where everything related to your work is stored and managed. There are two main types:

Local Repository: This is a copy of the repository which is stored in your computer. You can work on your project and make changes here.
Remote Repository: This is stored on a server, like GitHub, where you and others can share and work on a project.

Commits: Every time you make changes and save them in Git, these are called commits. The repository keeps track of all the commits you have made.
Branches: A repository allows you to create Branches and work on new features and fixes. For example, you can have a "main" branch for stable code and a "feature" branch for new features you're developing.
Merging: Once you are done with the branches you have made, you can merge those branches into main branch. This adds the changes you have made in the rest of the project.
Cloning: Cloning is a process of making a complete copy of Git repository. It's like copying the entire project from central location to your own computer.

Why Git?

Over 70% of developers use Git!
Developers can work together from anywhere in the world.
Developers can see the full history of the project.
Developers can revert to earlier versions of a project.

Introduction to GitLab

GitLab is a web-based DevOps platform that enables teams to manage the entire software development lifecycle in a single application. It combines version control with built-in tools for automation, collaboration, and deployment.

Common Git commands

git add
Use git add to files to the staging area.
You can recursively stage changes from the current working directory with git add ., or stage all changes in the Git repository with git add --all.

git add <file_path>

git pull
Use git pull to get all the changes made by users after the last time you cloned or pulled the project.

git pull <optional_remote> <branch_name>

git push
Use git push to update remote refs.

git push

git remote add
Use git remote add to tell Git which remote repository in GitLab is linked to a local directory.When you clone a repository, by default the source repository is associated with the remote name origin.

git remote add <remote_name> <repository_url>

git merge
Use git merge to combine the changes from one branch with another.

git merge

git status
Use git status to show the status of the working directory and staged files. When you add, change, or delete files, Git can show you the changes.

git status

git clone
Use git clone to copy an existing Git repository.

git clone <repository>

git blame
Use git blame to report which users changed which parts of a file. You can use git blame -L <line_start>, <line_end> to check a specific range of lines.

git blame <file_name>

git bisect
Use git bisect to use binary search to find the commit that introduced a bug. Start by identifying a commit that is “bad” (contains the bug) and a commit that is “good” (doesn’t contain the bug). git bisect then picks a commit in between the two points and asks you identify if the commit is “good” or “bad” with git bisect good or git bisect bad. Repeat the process until the commit is found.

git bisect start
git bisect bad                 # Current version is bad
git bisect good v2.6.13-rc2    # v2.6.13-rc2 is known to be good

git checkout
Use git checkout to switch to a specific branch. To create a new branch and switch to it, use git checkout -b <branch_name>.

git checkout <branch_name>

git commit
Use git commit to commits staged changes to the repository. If the commit message contains a blank line, the first line becomes the commit subject while the remainder becomes the commit body. Use the subject to briefly summarize a change, and the commit body to provide additional details.

git commit -m "<commit_message>"

git commit --amend
Use git commit --amend to modify the most recent commit.

git commit --amend

git diff
Use git diff to view the differences between your local unstaged changes and the latest version that you cloned or pulled. You can display the difference (or diff) between your local changes and the most recent version of a branch. View a diff to understand your local changes before you commit them to the branch.

git diff

git diff <branch>       #To compare your changes against a specific branch

In the output:
Lines with additions begin with a plus (+) and are displayed in green. Lines with removals or changes begin with a minus (-) and are displayed in red.

git init
Use git init to initialize a directory so Git tracks it as a repository. A .git file with configuration and log files is added to the directory. You shouldn’t edit the .git file directly. The default branch is set to main. You can change the name of the default branch with git branch -m <branch_name>, or initialize with git init -b <branch_name>.

git init

git log
Use git log to display a list of commits in chronological order.

git log

git reset
Use git reset to undo a commit and rewind the commit history and continue on from an earlier commit.

git reset