DEV Community: Raghul

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

Mock Interview

Raghul — Mon, 08 Jun 2026 17:12:39 +0000

Today i am going to share my first Mock Interview experience, and what are the problems that i face during interview. How i am going to over come this and what are the thing i want to improve myself.

About myself, this is the common question that are ask in every interview. In this we have to introduce about your self like, first we have to tell our name then where you are from, your education qualification, and what is your positives and tell then how passionate you are.

About your Project in this we have to be very clear about what we are talking explain them by what you are know topic and what is your contribution in this project if they ask any technical question answer then accordingly.

The questions that are ask to me:

What is numpy?
Html Attributes?
Selectors in CSS?
Semantic Tags and their Examples?
Html workflow?
What is DocType?
Block level element vs Inline element?
Difference between % and vh,vw?

The things i need to be improve is my Communication
And now i score 44/100

Resume Building Using HTML & CSS

Raghul — Fri, 05 Jun 2026 14:48:48 +0000

Project-Resume Building
So, Today I built a Resume using HTML & CSS. So these are some common projects that are around us. In this Resume I use some new Tags like Flex and Grid. Now I explain each new Tags and CSS properties with the 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>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .container {
            /* border: 1px solid rgb(246, 6, 166); */
            height: 100vh;
            width: 65vw;
            margin: auto;
            display: grid;
            grid-template-columns: 10fr 20fr;
        }
        .left{
            /* border: 1px solid rgb(217, 249, 10); */
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 25px;
            background-color: rgb(227, 228, 225);
        }
        .right{
            /* border: 1px solid rgb(12, 178, 244); */
            padding: 20px;
            background-color: rgb(185, 223, 211);
        }
        img{
            /* border: 1px solid rgb(77, 16, 16); */
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            border-radius: 50%;
        }

        ul{
            padding: 20px;
        }
        h1{
            padding-bottom: 10px;

        }
    </style>
</head>

<body>
    <div class="container">


        <div class="left">
            <div class="Profile">
                <img src="download.jpg" alt="avatar">
            </div>
            <h1>Contact</h1>
            <hr>
            <p>Tirunelveli,Tamilnadu</p>
            <p>Email:sraghul1006@gmail.com</p>
            <p>Contact No:9092466402</p>
            <h1>Skills</h1>
            <hr>
            <ul>
                <li><strong>Programming language:</strong>Java,Python,HTML,CSS,JavaScript</li>
                <li><strong>Database:</strong>SQL,MYSQL</li>
                <li><strong>Concepts:</strong>DSA,OOPS</li>
            </ul>
            <h1>Strength</h1>
            <hr>
            <ul>
                <li>Good Communication</li>
                <li>Problem Solving</li>
                <li>Good Leadership</li>
                <li>Quick Learner</li>
            </ul>
            <h1>Language</h1>
            <hr>
            <ul>
                <li>Tamil</li>
                <li>English</li>
            </ul>


        </div>



        <div class="right">
            <h1>Raghul Narayaanan S</h1>
            <h2>PROFESSIONAL SUMMARY</h2>
            <hr>
            <p>A quick learner and motivated Software Engineer skilled in Java, Python, and full-stack
development with expertise in building scalable applications, cloud-based solutions, and
ML-powered analytics. Experienced in solving complex problems, collaborating in teams,
and delivering impactful projects.</p>
<h2>Project</h2>
<hr>
<ul><strong>Vaccination Monitoring System for Children</strong>
    <li> Reduced missed immunizations by automating reminders via cloud-based scheduling.
</li>
    <li>Built dashboards to track vaccination adherence using BigQuery.</li>

</ul>
<ul><strong>Smart Aquaculture System</strong>
<li>Built ML models to predict shrimp growth & optimize feeding, improving efficiency by
automating feed calculations.</li></ul>
<h1>CERTIFICATIONS</h1>
<hr>
<ul><li>Oracle: Oracle Cloud Infrastructure 2023 AI Certified Foundation Associate</li>
<li>CodeChef: Design and Analysis of Algorithms in Java</li>
<li>CodeChef: Database Management Systems</li>
<li> NPTEL: Soft Skills Development</li></ul>
<h1>EDUCATION</h1>
<hr>
<p><strong>B.Tech in Computer Science and Engineering (Data Analytics):</strong> Kalasalingam Academy
of Research and Education (2022–2026) | CGPA: 7.14
Rose Mary Matriculation Hr. Sec. School | HSE: 80% | SSLC: 65%</p>

        </div>
    </div>
</body>

</html>

Output

CSS Grid
Grid is a two-dimensional layout system. This means it handles both rows and columns at the same time. It is best used for the main framework of a webpage.

.container {
    display: grid;
    grid-template-columns: 10fr 20fr;
}

display: grid;
Turns the container into a grid system.
grid-template-columns:10fr 20fr;`Splits the screen into two columns using fractional units(fr)`.
The left column takes up 1:3 of the space, and the right column takes up 2:3 (essentially splitting the page into a 1:2 ratio, where the right side is twice as wide as the left side).

CSS Flexbox
Flexbox is a one-dimensional layout system. It handles elements in either a row OR a column at one time. It is best used for aligning items, distributing space, and small-scale layouts.

`css .left { display: flex; flex-direction: column; justify-content: center; } `
display: flex;
Activates flexbox for the sidebar.

flex-direction: column;
Changes the default row alignment to a column alignment. This forces your Profile, Contact, Skills, Strengths, and Languages to stack vertically on top of each other.

justify-content: center;
Vertically centers the entire block of content inside that sidebar because the axis was changed to a column.

Resume Building Using HTML & CSS

Raghul — Thu, 04 Jun 2026 17:48:38 +0000

Introduction
Today designing Basic Resume, I see user profile pages with that classic split look — an avatar in a sidebar and a bigger section for their details. So today, I made template for it. To do this, I used CSS Grid for the layout columns and Flexbox to align the images just right. Here's how

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;
        }
        .container {
            border: 1px solid rgb(246, 6, 166);
            height: 100vh;
            width: 65vw;
            margin: auto;
            display: grid;
            grid-template-columns: 10fr 20fr;
        }
        .left{
            border: 1px solid rgb(217, 249, 10);
            display: flex;
            justify-content: center;

        }
        .right{
            border: 1px solid rgb(12, 178, 244);
        }
        img{
            border: 1px solid rgb(77, 16, 16);
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="container">


        <div class="left">
            <img src="download.jpg" alt="avatar">

        </div>



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

</html>

HTML Tags

<div>
The <div> tag defines a division or a section in an HTML document. It is used as a container for HTML elements. A <div> is a block-level element, meaning it naturally starts on a new line and takes up the full width available. It carries no inherent visual meaning on its own. Instead, we use the class attribute (container, left, right) to group elements together so we can Target and style them cleanly using CSS.
**<img src="download.jpg" alt="avatar">**
The <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages.
src The source attribute. It provides the exact relative path file name of your image. alt="avatar" is the alternate text attribute. Essential for web accessibility, it describes the image out loud to screen readers and displays text as a backup if your image file fails to load or get deleted.

CSS Properties

box-sizing:border-box;:
Changes the default CSS box model calculations. By default, adding padding or borders to an element makes its total size wider than your designated width. border-box forces the browser to pull padding and borders inward, meaning a box set to a width of 100px will stay exactly 100px wide.
height: 100vh;:
Viewport Height unit. 100vh means this main container will scale dynamically to occupy precisely 100% of the browser's view window height.
width: 65vw;:
Viewport Width unit. Constrains the content wrapper box to exactly 65% of the total screen width, preventing layout stretching on super-wide monitors.
display: grid;:
Activates the CSS Grid Layout Module, shifting children formatting rules from traditional block flow into a rigid, cell-based coordinate layout system.
margin: auto;:
Tells the browser engine to automatically compute and split the remaining 35% of unused screen space equally between the left and right sides. This acts as the standard method for centering block containers cleanly on desktop layouts.
grid-template-columns: 10fr 20fr;:
Defines the column parameters of your grid using Fractional units (fr). Instead of pixels, fr divides up dynamic remaining free space. Here, the columns split into 30 total parts (10 + 20). The left column gets 10 parts, and the right gets 20 parts—creating a fluid 1:2 layout ratio.
display: flex;:
Activates the CSS Flexible Box Layout Module (Flexbox) for this element's direct children. Flexbox is highly optimized for aligning content linearly inside a container.
justify-content: center;:
It moves through flex direction (Flex default direction Row) Aligns flex children along the main horizontal axis. This centers your inside avatar photo perfectly horizontally inside the boundaries of the left column container.
align-item;:
It moves through oppsite to flex direction (Flex default direction Row then it moves through column) Enters the child elements perfectly between the top and bottom edges of the parent container.

While justify-content aligns items horizontally (left to right), align-items aligns elements vertically (top to bottom) inside a Flexbox container.

HTML TAGS & CSS PROPERTIES

Raghul — Wed, 03 Jun 2026 15:37:40 +0000

What are HTML Tags?
HTML documents consist of a series of elements, and these elements are defined using HTML tags. HTML tags are essential building blocks that define the structure and content of a webpage.
HTML tags are composed of an opening tag, content, and a closing tag. The opening tag marks the beginning of an element, and the closing tag marks the end. The content is the information or structure that falls between the opening and closing tags.

For Example:
<h1>Hello</h1>

HTML Elements
HTML elements are the essential components of a webpage and provide structure, organization, and meaning to content. Elements are defined by HTML tags which define how different types of content will appear in a browser window.

For Example:
<p>This is an element. </p>

Block-Level Elements
A page’s entire width is occupied by a block-level element. The document always begins with a new line. An HTML page generally has three tags i.e., <html>, <head>, and <body> tag.

Example: The following is an unordered list, an example of block-level elements.

List item 1
List item 2

Inline Elements
A block-level element’s inner content can be formatted with an inline element by adding links and stressed strings. These elements help you to format text without disrupting the content’s flow.

Example: The following code creates a hyperlink to a URL. It is an inline element because it is used within paragraphs, headings, or other text content to create hyperlinks. It does not disrupt the flow of the document by forcing new lines before or after its content.

<a href="https://www.example.com">Visit Example</a>

CSS Properties
CSS properties are used to decorate your web page and assign a unique behavior to your HTML element. CSS properties are the foundation of web design, used to style and control the behaviour of HTML elements. They define how elements look and interact on a webpage.

Used to control layout, colors, fonts, spacing, and animations on web pages.
It is essential for making web pages responsive and accessible across devices.
Help maintain consistency and efficiency in web design and development.

For Examples:
background-color- Set the background color of an element.
border- This is used to style the border of an element.

Example Source Code of a Portfolio

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        h1{
            text-align:center;
            color: white;
            margin-bottom: 15px;
            padding: 5px;
        }
        a{
            margin-right: 15px;
            text-decoration: none;
            margin-right: 20px;
            color: white;

        }
        header{
            background-color: black;
        }
        nav{
            text-align: center;
        }
        section{
            width: 65%;
            margin: auto;
            margin-top: 20px;
            padding: 20px;
            background-color: bisque;
            border-radius: 20px;
            margin-bottom: 30px;
        }
        ul{
            margin-left: 25px;
        }
        footer{
            text-align: center;
            background-color: black;
            color: white;
            padding: 20px;
            margin-top: 200px;
        }

    </style>

</head>
<body>
    <header>
        <h1>Raghul Narayaanan S</h1>
        <nav>
            <a href="">About me</a>
            <a href="">Project</a>
            <a href="">Contact</a>
            <a href="">Login Page</a>
        </nav>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </header>
    <section>
        <h2>About Me</h2>
        <p>I am a web developer passionate about building beautiful and functional websites.</p>
    </section>
    <section>
        <h2>Projects</h2>
        <ul>
            <li>Portfolio Website</li>
            <li>Landing Page</li>
            <li>Blog Template</li>
        </ul>
    </section>
    <section>
        <h2>Contact</h2>
        <p>Email: sraghul1006@gmail.com</p>
    </section>
    <footer>
        <p>@ 2026 Raghul</p>
    </footer>
</body>
</html>

HTML Tags Explanation

<!DOCTYPE>- Defines the document type. It tells the web browser that this document is written in HTML5 so the browser renders the page correctly.

<html>- The root element. It wraps all the content on the entire page.

<head>- The machine-readable container. It holds metadata (data about data) that isn't directly shown to the website visitors, such as styles, scripts, and character sets.

<body>- The content container. It contains all the visible content of your website (text, images, links, headers, footers, etc.) that users see and interact with.

<header>- A structural layout tag (semantic HTML). It represents introductory content, typically a group of introductory or navigational aids like logos, site names, or menus.

<h1> and <h2>- Heading elements. They define HTML headings. <h1> is the most important (highest level) heading on the page, usually reserved for the main title, while <h2> is used for subheadings. We can use up to <h6>

<nav>- Navigation container (semantic HTML). It defines a block of navigation links, signaling to browsers and screen readers that this section contains primary site navigation.

<a>- Anchor (Link) element. It creates hyperlinks to other web pages, files, or locations within the same page. The href="" attribute is where you place the destination URL.

<meta>- Metadata element. It provides information about the HTML document. charset="UTF-8" ensures text characters display correctly. name="viewport" makes sure the website scales properly and looks good on mobile devices.

<title>- Document title. It sets the title of the web page, which appears in the browser’s title bar or tab, and is used by search engines.

<section>- Generic section element (semantic HTML). It groups related content together. In your code, you’ve used it beautifully to separate "About Me", "Projects", and "Contact".

<p>- Paragraph element. It marks a block of text as a standard paragraph.

<ul>- Unordered list. It defines a bulleted list of items.

<li>- List item. It is used inside lists (<ul> or <ol>) to define an individual item within that list.

<footer>- Footer container (semantic HTML). It represents the footer of a page or section, typically containing copyright notices, privacy policy links, or contact info.

CSS Selectors
CSS Selectors are patterns used in CSS to select and target HTML elements so that styles can be applied to them. They define which elements on a web page should receive specific styling rules. Used to select HTML elements based on tag name, class, id, or attributes. Help apply styles like color, font, spacing, and layout. Make web pages structured, consistent, and visually appealing.

CSS selectors are commonly grouped into five main categories:

Basic Selectors Basic selectors in CSS are simple tools used for selecting by HTML element name,class,ID or universally

Universal Selector (*): Selects all elements on the page and applies the same style universally.

Example

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

Element Selector: Targets all elements of a specific type, such as paragraphs or headers.

Example

header{
            background-color: black;
        }

Class Selector (.): (TBD) Applies styles to elements with a specific class attribute.

Example

.right{
            border: 1px solid red;
        }

ID Selector (#): Styles a single element identified by its unique id.

Example

<html>
<head>
    <style>
        #header {
            background-color: gray;
        }
    </style>
</head>
<body>
    <div id="header">This is the header section.</div>
</body>
</html>

Combinator Selectors Used to define relationships between selectors, allowing you to style elements based on their hierarchy or positioning in the document.

Descendant Selectors: (TBD) Targets an element inside another, such as paragraphs inside div .

Example: Styling paragraphs inside a div.

<html>
<head>
    <style>
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>This paragraph inside a div will be red.</p>
    </div>
</body>
</html>

Child Selector (>):(TBD) They only affects the direct child elements of a parent.

Example: Styling direct children paragraphs of a div.

<html>
<head>
    <style>
        div>p {
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p>This is a direct child and has a left margin.</p>
        <div>
            <p>This is not a direct child.</p>
        </div>
    </div>
</body>
</html>

Adjacent Sibling Selector (+): Styles an element immediately following another .

Example: Making the first paragraph bold after an h1.

<html>
<head>
    <style>
        h1+p {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>This is a header.</h1>
    <p>This is immediately following the header and is bold.</p>
    <p>This will not be bold.</p>
</body>
</html>

General Sibling Selector (~): Styles all siblings that follow a specific element.

Example: Italicizing all paragraphs following an h1.

<html>
<head>
    <style>
        h1~p {
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1>This is a header.</h1>
    <p>This is a sibling of the header and will be italicized.</p>
    <p>This will also be italicized because it's a sibling of the header.</p>
</body>
</html>

Linux Installation

Raghul — Tue, 02 Jun 2026 15:00:27 +0000

What user needs?

Hardware Requirements:
Network: WiFi
Arch: 64-bit
Processor: Manufactured in the last 6 years
Processor Speed: 4 GHz or 2 GHz+boost
RAM: 16 GB (if no GUI is desired a minimum of 8 GB is sufficient)
Hard Drive: 256 GB Solid State Disk (SSD)
Video Card: Integrated is adequate, Discrete NVIDIA GPU is recommended
USB flash drive size:
The absolute minimum size required to install a standard Linux distribution is 4 GB. The size you need depends on your goal.

Linux Mint
Linux Mint is an operating system for desktop and laptop computers. It is designed to work 'out of the box' and comes fully equipped with the apps most people need.

Installation of Linux Mint

You can download Linux Mint from the Linux Mint website or select this link- and select the download option in the screen.

Now download balenaEtcher in there offical website or click the link-

Now connect the USB drive in the system and open BalenaEtcher then select the Linux Mint iso file and selcte the drive to flash

Now Boot Linux Mint for boot your system first shutdown the system and restart while insert your USB stick to it. Then while restarting immediately and repeatedly press the manufacturer’s designated key until the boot menu appears. For example (F12 for Dell/Lenovo, F9 for HP, F11 for MSI, F8,Esc for ASUS)

Now select from one of these menu, press Enter to start Linux Mint from your USB stick

When you boot the computer from the USB stick, Linux Mint starts a live session. It logs you in automatically as a user called mint and shows you a desktop with the installer on it
To permanently install Linux Mint on your computer. Double-click Install Linux Mint.

Select your language.

Connect to the Internet.

If you are connected to the Internet, tick the box to install the multimedia codecs.

Choose an installation type.

Select your time zones

Enter your user details

When the installation is finished, click Restart Now to complete the setup of mint

Then computer will then start to shut down and ask you to remove the USB disk. Upon reboot, your computer should show you a boot menu or start your newly installed Linux Mint operating system.

Why Use Linux?

Raghul — Mon, 01 Jun 2026 18:23:01 +0000

*LINUX *
Just like Windows, iOS, and Mac OS, Linux is an operating system. In fact, one of the most popular platforms on the planet, Android, is powered by the Linux operating system. An operating system is software that manages all of the hardware resources associated with your desktop or laptop. To put it simply, the operating system manages the communication between your software and your hardware. Without the operating system (OS), the software wouldn’t function.
Linux is an open source operating system (OS) created by Linus Torvalds in 1991. Today, it has a massive user base.

Why Use Linux?

1. It Runs on Any Hardware
Linux is compatible with virtually every hardware device on the market today.For example

Windows PCs and Laptops
Macs
Windows Tablets
Chromebook
Non-Android Phones and Tablets
Gaming consoles

2. Open Source
Linux is an open-source OS. With no restrictions on how you use the software, anyone can run and modify the source code for their own purposes. Being open-source allows Linux to meet the developer’s needs completely, a luxury you could never enjoy with proprietary OS software.

3. Customizable
Because of the OS’s open-source nature, developers have exceptional flexibility in customization options. These customizations start with aesthetic preferences, like changing your desktop environment or the colors of your terminal. With the Linux filesystem, you can alter the functionality and interface of specific applications, such as your trash bin and other desktop applications and so on.

4. Educational
Linux is great for beginner developers as it can teach you how an operating system works. You can easily look at the source code to study its structure, dissecting it piece by piece to understand what makes Linux tick.

5. Secure
Some people may fear that since anyone can access Linux’s source code, the OS is prone to hackers. But that’s not the case—since so many eyes are on the source code, one can identify vulnerabilities and deal with them promptly. The result is a more robust code that’s less susceptible to cyber-attacks.Linux also has clearly defined privileges to restrict access to those who don’t belong.

6. Reliable
Linux is famously reliable compared to other operating systems, with most users experiencing fewer issues. Part of this reliability is because Linux strongly focuses on background process management. Other operating systems will use background processes continuously during a session. Linux will only use a process for as long as necessary, disabling it until it’s needed once again.

7. Easy to Install
Linux couldn’t be easier to install. While the process is fairly involved, the means of distribution are quite accessible. A wide variety of distributors can give you access to Linux, including Fedora, Ubuntu, Arch Linux, and Linux Mint.

8. Strong Community Support
Linux attracts loyal and enthusiastic community members who want to see the operating system soar. This enthusiasm has produced countless help and knowledge-sharing forums to assist Linux users, both beginners and veterans, in using the OS to its full potential.

9. Easy to Use
Linux has developed a reputation for being designed for hardcore developers. Linux is a well-designed user experience with pre-installed tools. Additionally, downloading updates for Linux is arguably more straightforward than the Windows update process. Linux can install updates in the background while you work, so you won’t have to stop everything as your computer forces an auto-update.

10. Free
The best part? Linux is free! You can install the OS on as many platforms as you like at zero cost. Installing Linux is zero risk, high reward—the best of both worlds.

HTML & CSS

Raghul — Fri, 29 May 2026 14:44:34 +0000

HTML
HTML stands for Hyper Text Markup Language.And HTML is used for creating and structuring web pages using tags and elements."Hypertext" refers to links that connect web pages to one another, either within a single website or between websites.A markup language is a computer language that uses tags or symbols to annotate a document, defining its structure, layout, and appearance, markup languages simply tell software how to display or interpret text.HTML uses "markup" to annotate text, images, and other content for display in a Web browser.
How Does HTML Work?
When you type a website address into your browser, you’re requesting an HTML file from a server. That server sends the file back to your browser, which then reads the HTML code from top to bottom. As it reads, the browser interprets the tags to understand the structure and content of the page.

The Basic Structure of an HTML Document
Every HTML document follows a standard structure to ensure browsers can interpret it correctly. This fundamental layout consists of a few essential tags that set up the page.

<!DOCTYPE html>

<html>

  <head>

    <title>Page Title</title>

  </head>

  <body>

    <h1>This is a Heading</h1>

    <p>This is a paragraph.</p>

  </body>

</html>

<!DOCTYPE html>
This declaration is the very first thing in your HTML document. It’s not an HTML tag itself, but an instruction that tells the browser which version of HTML the page is written in.

Element
The <html> tag is the root element of the page. All other elements are nested inside this tag. It acts as the main container for the entire document.

Element
The <head>element contains meta-information about the webpage—data that isn’t displayed directly on the page itself but is important for the browser and search engines

<title>: The text you place here appears in the browser tab and as the title in search engine results.

<meta>: These tags provide metadata such as the character set, page description, keywords, and viewport settings for responsive design.

<link>: This tag is used to link to external resources, most commonly CSS stylesheets that control the page’s visual appearance.

<script>: This is used to embed or link to JavaScript files, which add interactivity to the site.

Element
The <body> element contains all the visible content of the webpage—the text, images, videos, links, and everything else a user sees and interacts with. All your structural and content-related HTML tags will go inside the
<body>tag.

HTML Tags
Tags are the keywords enclosed in angle brackets (< and >) that define how your content is formatted. Most tags come in pairs:

An opening tag: <h1>
A closing tag: </h1>

CSS
CSS stands for Cascading Style Sheets.CSS is the cornerstone of web design. It transforms plain HTML structures into visually captivating websites. It’s a language that allows web developers and designers to dictate the appearance of HTML elements.Think of HTML as the skeleton of a webpage, providing the basic content blocks. CSS is the stylish outfit, the makeup, and the overall aesthetic that brings the webpage to life. With CSS, you can control
For Example:
We can change colors and fonts,layout,backgrounds,animations and transitions and add interactive touches
CSS makes websites visually appealing and user-friendly. Its key advantage lies in its separation of content (HTML) from presentation (CSS). This means you can update styles across an entire website with minimal changes to the code. This efficiency saves time and makes website maintenance a breeze.

CSS Syntax
Selectors:
Selectors are like special instructions for your browser, telling it which specific HTML elements you want to style. Common types of selectors include Element selectors, Class selectors, and ID selectors.
Properties:
Think of properties as the different features you want to change about your elements – like color, font size, background image, and many more.
Values:
Values are the specific adjustments you want to make to a property. For instance, you could set the color property to red or the font-size property to 16px.
Declarations:
A declaration is a single instruction for your browser. It combines a property with its chosen value, separated by a colon and ending with a semicolon.
Style Rules:
A style rule groups all your declarations for a specific selector within curly brackets {}. It tells the browser which elements to style and how to style them.

Where to Put Your CSS
There are three main places to include CSS in your website:

Inline Styles:

You can add style attributes directly within your HTML tags, but this method is the least recommended as it makes your code harder to maintain.

Internal Stylesheet:

You can place <style> tags within the

section of your HTML document, defining styles specifically for that page.

External Stylesheet:

The most common and organized method is to create a separate file with a .css extension. Then, you link that file to your HTML using a <link> tag within the <head> section.