DEV Community: Kavin Loyola S

CSS Position Properties

Kavin Loyola S — Sat, 20 Jun 2026 04:34:39 +0000

Positions

The position property in CSS defines how an element is placed in the document and how its location is calculated using top, right, bottom, and left. There are five main values, each with distinct behavior.

Static

This is default and this Element is positioned according to the normal document flow, and it doesn't have effect on moving positions like top, bottom, left & right.

div {
 position: static;
}

Relative

This Element is positioned relative to its normal position in the document flow, and it moves on the top, right, bottom, and left properties will cause the element to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

div {
 position: relative;
}

Absolute

This element is Removed from normal flow, and Positioned relative to the nearest position(non-static). and it can overlap other elements.

div {
 position: absolute;
}

Fixed

An element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used set the final location of the element. A fixed element does not leave a gap in the page where it would normally have been located.

div {
 position: fixed;
 bottom: 10px;
 right: 10px;
}

Sticky

An element toggles between a relative and fixed position, depending on the scroll position. A sticky element is positioned relative until a certain scroll position is reached then it behaves like fixed element. You must specify at least one of the top, right, bottom or left properties, for sticky positioning to work. because it only works on one property.

div {
 position: sticky;
 top: 0;
}

Grid-templates

Kavin Loyola S — Fri, 19 Jun 2026 18:03:25 +0000

Grid-template

The grid-template property in CSS is a shorthand property for defining grid columns, rows, and areas. It allows you to set values for the following longhand properties: grid-template-rows,grid-template-columns, and grid-template-areas.

grid-template-rows:0fr 0fr; - this is used to divide the frames(fr) of row areas.
grid-template-columns:0fr 0fr; - this is used to divide the frames(fr) of column areas.
grid-template-areas:" " " " " " - this tag is used to create areas by using thier names inside the " ", with the help of grid-area:" ";.

Example

<!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:0px;
            margin:0px;
            box-sizing:border-box;
        }
        .li1 { grid-area:Header; }
        .li2 { 
            padding:50px;
            grid-area:menu1; }
        .li3 { 
            padding:50px;
            grid-area:content; }
        .li4 { 
            padding:50px;
            grid-area:menu2; }
        .li5 { grid-area:Footer; }
        .container{
            display:grid;
            grid-template-areas:
            "Header Header Header" 
            "menu1 content menu2" 
            "Footer Footer Footer";
            gap:7px;
            padding:7px;
            background-color:darkred;
        }
        div{
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
            background-color:aliceblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="li1">Header</div>
        <div class="li2">menu1</div>
        <div class="li3">content</div>
        <div class="li4">menu2</div>
        <div class="li5">Footer</div>
    </div>
</body>
</html>

Cloning Instagram login page

Kavin Loyola S — Tue, 16 Jun 2026 14:44:51 +0000

Cloning Instagram

Here we clone the Instagram's login page built using HTML & CSS. we focusing on responsive design, layout, fonts, images, logo and same styles to create a perfect clone of instagram login page.

New tags

<button id="log"> - here we give id instead of class, and if we use id means use # for styling in CSS.
gap:0px; - here this tag helps to create a gap by their px or % by our requirements.
border:none; - this removes the border of the box.
cursor:pointer; - this changes the cursor icon to pointer icon.
input:hover{} - this is used in styling for click or drag the mouse into input box for highlight the border or remove the border.

Cloning Facebook login page

Kavin Loyola S — Mon, 15 Jun 2026 16:43:07 +0000

Clone

Cloning allows users to create duplicate instances of an app, enabling multiple accounts or separate versions for different users on the same device. this can be particularly useful for apps that do not support multiple accounts, such as Snapchat and WhatsApp.

Cloning Facebook

A perfect cloning of Facebook's login page is built with HTML & CSS. Demonstrates responsive layout, form styling and modern UI techniques. ideal for beginners practicing front-end design or developers exploring authentication page design patterns.

New Tags

font-size: 0px - this is used to resize or change the size of the fonts or texts.
font-weight: 700 - this is used to change thickness or bold the font or texts.
<span> - this tag is used as inline element and it is used to style the elements in inline CSS.
<input type = "text"> - this tag is used to create an input box, and here "text" is mentioned. so we can add texts to the box.
<input type = "password"> - this tag is used to create an input box, and here "password" is mentioned. so we can add secret texts or numbers as password to the box and it is not visible.
<button> - this tag is used to create button in the web pages.
placeholder = "..." - it is used to display the texts inside the box for users to type the correct details. inside the " " we type anything that display on the box.

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>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family:Arial, Helvetica, sans-serif;
        }
        main{
            border:1px solid rgba(128, 128, 128, 0.436);
            height:90vh;
            display:grid;
            grid-template-columns:1.7fr 1.3fr;
        }.left{
            display:grid;
            grid-template-columns:1fr 2fr;
        }.right{
            border:1px solid rgba(128, 128, 128, 0.409);
            display:flex;
            flex-direction:column;
            justify-content:space-around;
            padding-left:27px; 
            padding-right:23px;   
            font-size:12px;   
            gap:10px;
        }
        .logo img{
            width:60px;
            height:60px;
        }
        .image img{
            padding-right:30px;
            width:330px;
            height:325px;
        }
        .logo{
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            padding:7px;
        }
        h5{
            padding-top:67px;
        }
        input{
            border:0.3px solid rgba(128, 128, 128, 0.436);
            border-radius:5px;
            padding:7px;
            font-size:8px;
        }
        button{
            border-radius:15px;
            font-size:8px;
            padding:4px;
            border:none;
        }
        #cna{
            margin-top:15px;
            color:rgb(0, 89, 255);
            border: 0.5px solid rgb(0, 89, 255);
        }
        #meta{
            margin-left:47%;
            width:25px;
            height:7px;
        }
        #log{
            background-color:rgb(0, 64, 255);
            color:white;
            padding:5px;
        }
        input:hover{
            border:1px solid;
        }
        span{
            color:blue;
        }
    </style>
</head>
<body>
    <main>
        <div class="left">
            <div class="logo">
                <img src="https://th.bing.com/th/id/OIP.N24RC8dLPtIGYfPSlKsK7AHaHa?w=166&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3" alt="">
                <h1>Explore the things <span>you love.</span> </h1>
            </div>
            <div class="image">
                <img src="https://static.xx.fbcdn.net/rsrc.php/yb/r/HpEiFYDux5j.webp" alt="">
            </div>
        </div>
        <div class="right">
            <h5>Log in to Facebook</h5>
            <input type="text" placeholder="Email address or mobile number">
            <input type="password" placeholder="Password">
            <button id="log">Log in</button>
            <button>Forgotten password?</button>
            <button id="cna">Create new account</button>
            <img id="meta" src="https://tse4.mm.bing.net/th/id/OIP.0hq62bdD9-fLp_GDPz-k4wHaBf?w=2560&h=516&rs=1&pid=ImgDetMain&o=7&rm=3" alt=""></img>
        </div>
    </main>
    <footer>
    </footer>
</body>
</html>

Git Commands

Kavin Loyola S — Wed, 10 Jun 2026 16:34:07 +0000

Git Commands

Git commands allow you to manage code versions, track changes, collaborate, and maintain project history efficiently.

Gitlab Commands

GitLab uses standard Git commands for managing repositories, branches, commits, and collaboration. Mastering these commands is crucial for efficient version control and CI/CD workflows.

git init

It is used 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.

git add

It is used to add files to the first step of 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 clone

It is used to copy an existing Git repository for backup.

git commit

It is used to commit staged changes to the repository. By using git commit -- m"..." inside the " " is the commit message it displayed in the project Repository.

git diff

It is used to view the differences between your local unstaged changes and the latest version that you cloned or pulled.

git push

It is used to push the files to the repository.

git pull

It is used to get all the changes made by users after the last time you cloned or pulled the project.

git remote add

It is used to tell Git which remote repository in GitLab is linked to a local directory.

git status

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

Gitlab

Kavin Loyola S — Tue, 09 Jun 2026 17:05:03 +0000

Git

Git is a free and opensource distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is lightning fast and has a huge ecosystem of GUIs, hosting services, and command-line tools.

Gitlab
GitLab offers a wide range of features that make it a powerful tool for developers and organizations. GitLab simplifies the development process by consolidating tools into a single platform. It offers unlimited free private repositories, a user-friendly interface, and integration with third-party APIs. Teams benefit from reduced toolchain complexity, faster development cycles, and improved collaboration.

Difference between Git & Gitlab ?

Git - A free, open-source version control system that developers install locally on their machines to track changes in code.
Gitlab - An online platform that hosts Git repositories and provides a full suite of DevOps tools for managing the entire software development lifecycle, including collaboration features, access control, and project management.

GUI
Graphical User Interface

CLI
Command Line Interface

PWD
Present Working Directory

ls
List items in folders

cd
Change directory

How it works ?
if we want to add our project files and folders to git, it contains 3 stages first one stage area for this we use git add command and next second one is local repository for this we use git commit command and last one is Git repository for this we use git push to push our files and folders.

git add .
here the . is used for all untracked files.
git commit -m " "
here inside the " " we use the commit message to display what we commited.

Mock Interview - 1

Kavin Loyola S — Mon, 08 Jun 2026 17:21:21 +0000

Questions & Answers

About Yourself
Myself Kavin Loyola S, I'm coming from Sivagangai and completed My UG in Bachelors of Technology - Computer Science And Engineering at Kalasalingam Academy of Research & Education, Srivilliputhur and I completed my Course at 2026.
About Your Project
My Final year Capstone project is Bark-based Tree Species Identification & CO2 Absorption Estimation with Thinai based Ecological Mapping. and is based on identifying the tree species with the help of our Hybrid model trained by CNN and RestNet50v2 pre-trained model to find out the species and their Thinai regions like Mullai, Marudham, Kurunji, Neithal and Palai. we used some formulas to calculate the CO2 absorption by their kg per day, month & year also. We created the project using Python and for training model we manually collect the pictures of tree species and saved in a separate files under their region folders.
What is Python ?
Python is a high-level, general-purpose programming language known for its readability and simplicity. Python supports multiple programming paradigms, including procedural, object-oriented, and functional programming. It is an excellent choice for both beginners and experienced developers. Despite some limitations, Python's extensive libraries and strong community support make it a popular choice for many applications.
Latest version of HTML ?
The latest version of HTML is HTML5.
Explain about your last seen movie (for Communication)

29 is a Tamil movie based on love & relationship between one passionless and no future planned guy and otherside the UPSC group 1 aspirant girl with many future plans and passions. Plagued by feelings of inadequacy, the guy dreads his looming 30th birthday, until he falls in love with an ambitious woman and finds renewed purpose of his life.

Features of Python ?

Easy to code & debug
Object-Oriented Language
GUI Programming Support
High-Level Language
Python is an Integrated language
Allocating Memory Dynamically

What is the difference between Padding & Margin ?

Padding is used to create spaces inside the box like top, bottom, left & right.
Margin is used to create spaces outside the box like top, bottom, left & right.

Resume Building With HTML & CSS

Kavin Loyola S — Fri, 05 Jun 2026 16:55:48 +0000

Resume

A resume is a 1–2 page formal document that summarizes your skills, experience, and achievements when you’re applying for a job, internship, or other career opportunity. Resumes are divided into sections that categorize different aspects of your professional background (e.g., work history, technical skills, and education). Each resume section includes a bold heading and lists of concise phrases.

How to create ?
Here we use HTML to create a webpage with full of our required contents and our personal details and use CSS for styling the webpage to make a perfect resume.

<div> - this tag is one of the main tags in HTML and it used to create container or layout of the webpages.
<div class="container" - Here div class refers to class name, we take example as a name = "container". In our resume i plan to split two parts of the resume using <div>.
<div> - inside the elements in <div> are called Attributes.
Viewport Height - vh, it is used to view the height of the box or anything we want to check the height means use this tag.
Viewport Width - vw, it is used to view the width of the box or anything we want to check the width means use this tag.
Percentage - %, it is used to size or position elements and is apply basis on parent.
vh & vw - is applied basis on your screen.
Grid - CSS Grid is a two-dimensional layout system that allows you to arrange elements in rows and columns.
display: grid; - this tag is used to display the grid layout in the webpages.
grid-template-column: 1fr 2fr; - it is used to divide columns by required frames fr.
grid-template-row: 1fr 2fr; - it is used to divide rows by required frames fr.
<img src=" " alt = " "> - it used to upload and display the images in webpages, inside the " " we are required to add image address link and if that fails means we can use alt = " " in that we can add alternate image address link.
display: flex; - it is used to make the elements flexible and its default direction is row.
justify-content: center; - it is used to move the contents to center.
flex-direction: column; - it is used to make the elements flexible to column direction.
align-items: center - it works on opposite side of this tag justify-content: center; direction.
padding: 10px 10px; - in this first px refers to top & botttom and second px refers to left & right sides.
<hr> - it gives the horizontal line to the web pages.
justify-content: space-between; - it gives spaces between the sections or contents.
<table> - it consists of data and meta data, inside the table we use some tags to create the tables.

<thead>
<tbody>
<tr>
   <th>
   <td>
<tbody>
<thead>

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing:border-box;
        }
        .container{
            height:100vh;
            width:65vw;
            margin:auto;
            display:grid;
            grid-template-columns:1fr 2fr;
            box-shadow:0 0 10px rgba(0,0,0,0.1);
        }
        .left{
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            background-color:moccasin;
            padding:10px;
        }
        .right{
            padding:10px 10px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        img{
            height:100px;
            width:100px;
            border-radius:50px;
            display:flex;
            justify-content:center;
        }
        h1{
            text-align:center;
        }ul{
            margin-left:25px;
        }
        .profile{
            display:flex;
            justify-content:center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <div class="profile">
            <img src="https://th.bing.com/th/id/OIP.BVqRl5JkZkoe4SuUU2ENggHaHa?w=167&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3" alt="">
            </div>
            <h2>Contact</h2>
            <hr>
            <p>Sivagangai, TamilNadu</p>
            <p>Phone: 8838242470</p>
            <p>Email: kavinloyola777@gmail.com</p>
            <h2>Skills</h2>
            <hr>
            <ul>
                <li>Programming: Java</li>
                <li>Web development: HTML, CSS</li>
                <li>Database: MySQL</li>
            </ul>
            <h2>Strengths</h2>
            <hr>
            <ul>
                <li>Problem-solving skills</li>
                <li>Good communication Skills</li>
                <li>Team player</li>
                <li>Adaptable to new technologies and environments</li>
            </ul>
            <h2>Language</h2>
            <hr>
            <ul>
                <li>Tamil</li>
                <li>English</li>
            </ul>
        </div>
        <div class="right">
            <h1>Kavin Loyola S</h1>
            <h2>Summary</h2>
            <hr>
            <p>Entry-level Computer Science Engineer with hands-on experience in Software development, Machine learning and Database-driven applications with strong problem solving and debugging skills. Eager to learn and contribute in a fast-paced environment.</p>
            <h2>Education</h2>
            <hr>
            <h3>Bachelor of Technology - Computer Science and Engineering</h3>
            <p>Kalasalingam Academy of Research and Education (2022 - 2026)</p>
            <p>Location: Srivilliputhur, Tamil Nadu</p>
            <h2>Projects</h2>
            <hr>
            <h3>Bark based tree identification & CO2 Absorption estimation</h3>
            <ul>
                <li>Built a ResNet50V2 deep learning model to identify Indian tree species from bark images.</li>
                <li>Developed an app displaying species, Thinai region, CO₂ absorption(kg/day-year), and interactive charts.</li>
            </ul>
            <h3>Portfolio Website</h3>
            <ul>
                <li>Designed and developed a responsive portfolio website to showcase my projects and skills.</li>
                <li>Implemented using HTML & CSS ensuring cross-browser compatibility.</li>
            </ul>
        </div>
    </div>
</body>
</html>

Output

Portfolio Building with HTML & CSS

Kavin Loyola S — Thu, 04 Jun 2026 18:26:00 +0000

Portfolio

A portfolio is a visual and detailed representation of your professional skills, projects, and experiences. Unlike a traditional CV, which is primarily text-based, a portfolio showcases your work through images, descriptions, and other multimedia elements. It serves as a platform to highlight your achievements and capabilities, making it easier for potential employers, clients, or collaborators to understand your expertise.
Importance of a Portfolio
Creating a portfolio is crucial for growing your online presence and getting noticed in your field. It can help you secure jobs, freelance gigs, or internships by showcasing your skills and projects in a visually appealing manner. A well-designed portfolio can leave a lasting impression on hiring managers, recruiters, and potential clients.
Who Should Have a Portfolio ?
Portfolios are beneficial for various professionals, including software developers, UX designers, graphic designers, photographers, marketing professionals, architects, and writers. Essentially, anyone who wants to showcase their work and skills can benefit from having a portfolio.
How to create ?
By using HTML and CSS we will able to create a perfect portfolio webpage in our browsers, with the help of HTML tags and CSS tags for styling creates a perfect Portfolio.

Firstly we have to plan a layout of our Portfolio, like i want a one header section and three body sections and one footer section for my Portfolio.
Next we have to open a code running environment(visual studio code) for our code to create a live page in web browsers.
And then, start writing a code inside a <body> to dispay a content in body section.
After that, inside the <body> we have to create our first header section. in the <header>section, we have to write our name with bold letters using <h1>.
After writing our name in header, we have to move our name to center for best view by using text-align: center.
text-align: center tag is used to align the texts from any direction to move center of the box. Not only used for center we can use it for align left or right directions also.
In header section we want to add some links by using <a href=""> tag and inside the double quotes we insert our link for redirection.
If we want highlight our <header> section, set a background colors by using background color: black; comments. for adding text colors we use color: white; to highlight the texts.
After we complete the header section move to <body> sections, inside the sections we write our contents like about me, Projects, Contact details and for that we use <h2> for secondary headings and <p> for word contents.
And we use <ul> tag for unordered list, inside that we use <li> list items tag to enter our item names.
we use border: 1px solid tag for border line of box, in that we can add colors by this border: 1px solid red comment.
Next we use box-sizing: border-box comment for mention or view the whole box.
And then, we see border-radius:20% comment to curve or round the box.
After completing the <body> sections we move to our last one <footer> section, in that section we use <p> tag to display the content in the webpage.

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;
        }
        header{
            background-color:black;
            padding:20px;
            h1{
                text-align:center;
                color:white;
                margin-bottom:15px;
            }
            nav{
                text-align:center;
            }a{
                    color:white;
                    text-decoration:none;
                    margin-right:15px;
            }
        }
        section{
            width:65%;
            margin:auto;
            margin-top:20px;
            padding:20px;
            background-color:gainsboro;
            border-radius:25px;
        }
        h2{
            margin-bottom:15px;
        }
        ul{
            margin-left: 25px;
        }
        footer{
            text-align:center;
            background-color:black;
            color:white;
            padding:10px;
            margin-top:20px;        }
    </style>
</head>

<body>
    <header>
        <h1>Kavin loyola S</h1>
        <nav>
            <a href="">About me</a>
            <a href="">Projects</a>
            <a href="">Contact</a>
            <a href="">Login page</a>
        </nav>
    </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: kavinloyola777@gmail.com</p>
    </section>
    <footer>
        <p>© 2026 kavin</p>
    </footer>
</body>
</html>

Output

CSS

Kavin Loyola S — Wed, 03 Jun 2026 18:25:47 +0000

CSS

CSS, short for Cascading Style Sheets and it is the language we use to style an HTML document. It allows developers to style and format web pages by specifying how elements should appear, including colors, fonts, spacing & layout.CSS can be applied directly within HTML, embedded in <style> tags, or linked externally via .cssfiles, which promotes reusability and faster page loading.

How to Add CSS ?
When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. There are three ways of inserting a style sheet:

External CSS - it links to external file by using .css file.
Internal CSS - it may be used if one single HTML page has a unique style & it is defined within the <style> element, inside the <head> section of an HTML page.
Inline CSS - An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

Comments
Comments are used to explain the CSS code, and may help when you edit the source code at a later date. Comments are also used to temporarily disable sections of CSS code within a stylesheet. Comments are ignored by browsers. A CSS comment is placed inside the HTML <style>element, and starts with /* and ends with */. For example,

l{
color: red;  /* Set text color to red */
}

Padding
it is used to create a space inside the box, and it creates space across all sides of the box like top, bottom, left & right.

padding:20px;

Margin
it is used to create a space outside the box, and it creates space across outer sides of the box like top, bottom, left & right.

margin: auto;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;

Global selector
* it is global selector and it is used in start of every html & css codes to helps a size issues.

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

Text center
text-align: center;
it is used to align the texts in the center of the box.

HTML

Kavin Loyola S — Tue, 02 Jun 2026 14:18:39 +0000

HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page using a series of elements and tags.It is a static language, meaning it does not inherently provide interactive features but can be combined with CSS for styling and JavaScript for interactivity.

Applications
HTML is used almost everywhere on the web. It forms the foundation of all websites and helps display text, images, links, videos, and other elements in a browser.
Here are some of its main applications:

Website Development: HTML is the core structure of every website. It organizes content into headings, paragraphs, links, and images.
Mobile App Development: HTML5 is used with frameworks like PhoneGap and Ionic to create mobile apps. These apps work on both Android and iOS using the same HTML code.
Web-based Software Interfaces: Many web-based tools like admin dashboards, data entry panels, and content management systems (CMS) are built using HTML.

How does it work?
HTML usually works on web browsers and it helps to create a web pages on a web browser.HTML is used to create a base(human) and CSS helps to fill(dress) or style the HTML code to make better.
Basic Syntax

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

<head>-this tag handles a tab in a webpages.

<title>-this tag is used to create a name for the tab in webpages.

2.<body>-this tag contains the contents of the webpage and it contains many tags used for content creation.

<h1>-this tag is used for headings and if we want to highlight anything use this tag.
<h2>-this tag is used for secondary headings and bold sentences.
<p>-this tag is used for paragraphs or word sentences.
<a href="">-this tag is used for image uploading using the image's link address.

Why Linux?

Kavin Loyola S — Tue, 02 Jun 2026 13:00:40 +0000

Linux

Linux is based on the UNIX operating system. UNIX is a powerful, multi-user, multitasking operating system originally developed in the 1970s at AT&T Bell Labs.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 free and open-source, accessible to everyone.
This promotes global collaboration and innovation.
Linux offers efficient performance and strong security.
It works well across many devices and industries.

How does Linux work?

Linux OS architecture is built on a modular design, a key feature of its numerous versions and many popular Linux distributions. While Linux distributions are all based on the Linux kernel, each version can differ based on kernel versions and modules.

1.Advantages

Cost & Freedom - Most distributions are 100% free to download, use, and modify. You also receive free updates without forced software chances.
Stability & Performance - It runs efficiently, often breathing new life into older or low-resource hardware. It can also run for extensive periods without requiring a reboot.
Customization - Users have complete control over the OS. You can choose everything from your desktop environment to internal system files.

2.Disadvantages

Software Compatibility - Missing Industry Standards: Major proprietary software suites like Adobe Creative Cloud (Photoshop, Premiere) and Microsoft Office do not have native Linux versions. Users must rely on open-source alternatives like GIMP or LibreOffice, or use compatibility layers like Wine.
Gaming Limitations - Smaller Title Catalog: While platforms like Steam and Proton have vastly improved the situation, many popular multiplayer titles with strict anti-cheat software still do not run natively on Linux.
Lack of Commercial Support - Enterprise Bottlenecks: Unlike Windows or macOS, most Linux distributions rely on community support rather than dedicated enterprise support hotlines. This can be a hurdle for non-technical users or businesses requiring guaranteed service level agreements (SLAs).