Forem: Annapoorani Kadhiravan

Sharing my Mock Interview Experience - Part 1

Annapoorani Kadhiravan — Tue, 26 May 2026 12:15:16 +0000

Though I have attended many interviews, but always my heart, beats faster whenever I hear the term "Interview" , I will go complete blank with so much anxiety 😅 I hope many people can feel it. After a long gap, I am preparing myself to compete in the race of developer and had a mock interview experience, starting with self-intro. I realized that, if we learn any topics, should be strong with all "Wh" questions.

Let me share the list of questions asked to me along with answers :

1. Difference Between Div and Span Tag

Div Tag	Span Tag
Block-level element	Inline element
Takes full width	Takes only required width
Starts in new line	Stays in same line
Used for large sections	Used for small text styling

Div Example :

<div>
   <h1>Welcome</h1>
</div>

Span Example

<p>Hello <span style="color:red">World</span></p>

2. What is HTML?

HTML stands for HyperText Markup Language.
It is the standard language used to create webpages and structure content on the internet.

HTML is used to:

Create headings
Add paragraphs
Insert images
Create links
Build forms and tables
Design webpage structure

Example

<h1>Hello World</h1>
<p>This is HTML</p>

3.Latest HTML Version

The latest version is: HTML5

Features of HTML5:

Audio and video support
Semantic tags (header, footer, section)
Local storage
Better forms
Canvas and SVG graphics
Mobile-friendly support

4. HTML Attributes

Attributes provide extra information about HTML elements.

They are written inside the opening tag.

Syntax :
Example :

<img src="image.jpg" alt="Nature">

Here:
src → image path
alt → alternative text

Common HTML Attributes

Attribute	Purpose
id	Unique identification
class	Group elements
href	Link address
src	File/image path
alt	Alternative text
style	Inline CSS
title	Tooltip text

5. IMG Tag ALT Attribute

The alt attribute provides alternative text for an image.

Purpose

Displays text if image fails to load
Helps visually impaired users
Improves SEO

Example

<img src="flower.jpg" alt="Red flower">

If image is missing, "Red flower" text appears.

6. Benefits of Cloud Computing

Cloud Computing allows storing and accessing data through the internet instead of local computers.

Benefits
1. Cost Saving - No need to buy expensive hardware.

2. Scalability - Resources can increase or decrease easily.

3. Accessibility - Access data from anywhere.

4. Data Backup - Cloud providers maintain backups.

5. Security - Provides encryption and protection.

6. Faster Deployment - Applications can be launched quickly.

Examples

Google Drive
AWS
Microsoft Azure

7. Virtual Machine (VM)

A Virtual Machine is a software-based computer running inside another computer.

It behaves like a real computer with:

OS
CPU
Memory
Storage
Uses
Testing software
Running multiple operating systems
Server virtualization

Example

Running Linux inside Windows using VirtualBox.

8. What is Repository in Git?

A repository (repo) is a storage location where project files and version history are maintained.

Git repository contains:

Source code
Project files
Commit history
Branches
Documentation

9. What Stuff is Available Inside Repository?

Inside a Git repository:

Item	Purpose
Source code	Project program files
Commit history	Saved changes
Branches	Multiple development versions
README file	Project explanation
Configuration files	Project settings
Images/Documents	Supporting files

10.What is Version Control System?

A Version Control System (VCS) tracks changes made to files and source code over time.

Advantages

Stores history
Supports teamwork
Allows rollback
Prevents data loss

Types

Centralized VCS
Distributed VCS (Git)

1. Centralized Version Control System (CVCS)

In Centralized VCS, there is:

one central server
all files stored in one location
developers connect to that server

All Developers depend on one central server

Developer 1  ----\
Developer 2  ----- Central Server
Developer 3  ----/

2. Distributed VCS:

every developer has full repository copy
history stored locally
no dependency on single server

Developer 1 <----> Remote Repository
Developer 2 <----> Remote Repository
Developer 3 <----> Remote Repository

Each developer has:

full code
complete history
all branches

11. Git Add, Commit and Push Process

Step 1: git add

git add .

Adds files to staging area.

Step 2: git commit

git commit -m "Initial commit"

Saves snapshot of changes.

Step 3: git push

git push

Uploads code to remote repository like GitLab or GitHub.

12. What is Constructor in Java?

A constructor is a special method used to initialize objects.

Features

Same name as class
No return type
Automatically called when object is created

Example

class Student{
   Student(){
      System.out.println("Constructor called");
   }
}

Uses

Initialize variables
Allocate resources
Set default values

13. What is Method Overloading in Java?

Object-Oriented Programming concept where multiple methods have same name but different parameters.

Example

class Math{
   void add(int a,int b){}
   void add(int a,int b,int c){}
}

Advantages

Improves readability
Reusability
Flexibility

14. What is Inheritance in Java?

Inheritance allows one class to acquire properties and methods of another class.

Parent Class → Superclass
Child Class → Subclass

Example

class Animal{
   void eat(){
      System.out.println("Eating");
   }
}

class Dog extends Animal{
}

Dog inherits eat() method from Animal.

Benefits of Inheritance

Code reusability
Reduces duplication
Supports hierarchy
Easier maintenance

Robust Developer's Community - Stack Overflow & Forums Tamil Linux Community

Annapoorani Kadhiravan — Tue, 26 May 2026 11:36:25 +0000

Never had an idea of Stack Overflow apart from searching answers, but one session changed everything. Yes, Stack Overflow is not only for clarifying our doubts but to build a strong technical knowledge with high-end questions.

As a beginner, I always have silly doubts while learning, when I google it - top options shows up with stack overflow answers for maximum of technical doubts. It is a life saver for many developers. Here, we can post questions or answer questions but with few constraints.

When we hesitate to ask people in person for doubts, this stack overflow is helping millions of introverts, beginners and even experienced people in clearing their doubts and posting questions without any hesitation.

A strong-developer community, which is -
for the developers,
by the developers and
of the developers - as per developers democratic principle. 😄

When you want to stand unique in the rat race, you should do things differently from others. Dev Community can drive you to the destination but its all about how consistent we are.

In Stack Overflow, any kind of programming language questions are being answered.

Users can ask programming-related questions.
Other developers provide answers and solutions.
Best answers can be upvoted by the community.
Covers technologies like Java, Python, HTML, CSS, SQL, AWS, Linux, and more.
Helps developers debug errors and learn new concepts.

Few of the advantages of using Stack Overflow are :

Fast solutions from experienced developers.
Large programming community.
Useful for interview preparation and project development.
Free learning resource for beginners and professionals.

Our questions are not being answered blindly, instead an expert developer team, analyze our questions and check any previous questions matches with it then approve our questions to publish with solutions.

Few of the sample questions are :
Bad: C# Math Confusion
Good: Why does using float instead of int give me different results when all of my inputs are integers?
Bad: [php] session doubt
Good: How can I redirect users to different pages based on session data in PHP?
Bad: android if else problems
Good: Why does str == "value" evaluate to false when str is set to "value"?

STACK OVERFLOW

The best part is that, AI makes the search so easy and effortless, you can just login into the Stack overflow, AI assistance will be available for us to post the question to fetch all related answers/solutions.

Learning from world-wide developer community can be easily made possible by Stack Overflow. So be crazy to ask and develop solutions with the help of Robust Developer Communities.

FORUMS TAMIL LINUX COMMUNITY

In every Universe, learning any new topic in their mother tongue is an ultimate blessing. Similarly, here is the forum for Tamil speaking people, where it gives an opportunity to build our presentation skills, deep knowledge in topics, workshops on various technical topics and so on.

Any volunteer, can register for technical presentation on any topics. This helps many enthusiast to come out of stage fear and present themselves with utmost confidence.

You can register for the events, either by filling the form or by contacting the event organizer. You can also volunteer yourself to organize events and take responsibilities. This build soft skills like people management, leadership and so on.

Here, complex topics are being explained in the native language, so it is easy for beginners to have a strong foundation on it. Sharing about open source software's is also one of the interesting part, for us to understand and explore new applications in the market.

Linux community acts as platform, where people from different places come together to share their knowledge, support beginners and build a strong developer community in Tamil. When people fear to switch OS, here an entire community stands and showcase that Linux is the best choice for developers. To grow more, participate more is what the ultimate goal of every communities.

Exploring the vast developer communities are new to me but boosts my confidence and I feel that every dev communities are the perfect example of the phrase "Ask, you shall receive!". Both Stack Overflow and Linux community forums are valuable platforms for learning, troubleshooting, and improving technical knowledge. Stack Overflow mainly focuses on programming and software development problems, while Linux forums concentrate on Linux operating systems, open-source technologies, and so on.

References :

https://stackoverflow.com/
https://forums.tamillinuxcommunity.org/

Resume Building using HTML & CSS

Annapoorani Kadhiravan — Mon, 25 May 2026 19:54:51 +0000

How Awesome it would be, if we create our own resume using HTML and CSS to apply for jobs?
Yes, First and foremost step of any graduate is resume building, rather than downloading templates from online, you can impress your interviewer by showing up with your own resume build using HTML & CSS.
Well... how to do that? No worries - Let me teach you, how to build it!
Already we have a basic knowledge on HTML & CSS structure and few tags, using that let's build our resume 😎

RESUME

Let me take a sample resume and re-create it
Here is our sample resume :

Before re-creating, we need some base to build our resume, so inside of doing everything at a time, let's break the resume into different parts and start to code one by one to avoid ambiguity.

Here is the image of my break down, To start with construction of building we need to plan and divide plot for different rooms, similarly here container acts as land where you will build different separate rooms, I have divided into left and right with 1:3 ratio as per my requirement.

Now, let's start the building work, but we need so much of materials to make it strong and attractive. As a first step, let's do some purchase of materials to build our resume.

Listing down of materials need to be purchased
1. Divisions - Dividing the page and naming it uniquely to style later. Here overall container is divided into left and right with 1:3 ratio
2. Headings - To show the headers of my resume, I use headings to highlight it.
3. Paragraph - To describe about myself, I use paragraph tags
4. Measurements - To build the resume, I need height, width and coloring measurements to make it attractive.
5. Image - To show the owner of the resume.
6. Table - To display a group of content in rows and columns
7. Display and directions - Display should be flexible for us to make changes and direction should be clear to move forward.

We also use Semantic tags. I can understand that already its little heavy with more new terms, now additionally I have added Semantic 😅

SEMANTIC TAGS
Semantic Tag is nothing but elements that clearly describe their meaning and purpose to both the browser and the developer. To know more, click here

<header>: Defines a header for a document or a section, often containing logos or navigation.
<nav>: Reserved for navigation links.
<footer>: Defines the footer of a document or section, usually containing copyright info or contact details.

Coming back to our resume, I have created a segregation to process one by one, so let me start with the container.

/*Class Selector*/
        .container { 
            /* border: 1px solid red; */
            height: 100vh;
            /* View Port Height - vh*/
            width: 70vw;
            /*View Port Width*/
            margin: auto;
            display: grid;
            grid-template-columns: 1fr 2fr; /*To separate the container*/
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

        }

All the borders which I have commented is used to create divisions and added for my reference (will remove after styling).

To talk with someone, we have to call them first - right?
Its the same here, to talk with container, left or right I need to call it. To call here we use dot along with class name, which is also called as Class Selector.

Step 1 : Set the height and width of the page
Step 2 : To make the resume applicable with different browsers, use margin : auto.
Step 3 : To separate the container in 1:3, I need to make a grid and divide it using grid-template-columns with 1fr 2fr
Step 4 : After removing border, resume may look incomplete so, styling it with box-shadow. Refer : Click here

vh (View Port Height) & vw (View Port Width) : When we zoom in and out web page, the contents should not affect, so we use View port Height and the same for View Port Width.
fr stands for fractional unit. It is a flexible unit used exclusively within CSS Grid Layout to represent a fraction of the available space in a grid container.
You can use fr in properties like grid-template-columns or grid-template-rows.

Code -> 1fr 1fr 1fr
Result -> Three columns of equal width.

Display-flex makes the container/box/class flexible to move.
Always how the flex-direction goes, justified-content will be given in same direction.

For Example :

If I code, flex-direction as column, contents should be aligned using justify-content and rows with align-items.
If flex-direction is row, contents should be aligned using justify-content and columns with align-items.

Code and Explanation

HTML

CSS

MY OUTPUT

Post your experience of creating this resume in comments!!🤗

References :
https://www.w3schools.com/html/html5_semantic_elements.asp
https://getcssscan.com/css-box-shadow-examples

Understanding HTML & CSS with Simple project

Annapoorani Kadhiravan — Sun, 24 May 2026 13:39:09 +0000

Always there is a starting point for anything, here is my starting point where I created my portfolio with deep understanding rather than just copy paste 🫣

Every developer bound to understand why it works, how it works and where it works? Let me elaborate the understanding of my portfolio project with HTML and CSS. Before the exact process, let's understand few new terms here.

MARGIN

If you need to give any space outside the box, we can use margin

PADDING

If you need to give space inside the box, we can use padding

Who is this box?

-In HTML, a box usually refers to the Box Model used in web pages.

Every HTML element behaves like a rectangular box 📦

Examples:

headings,
paragraphs,
images,
buttons,
divs,

all are treated as boxes by the browser.

A box contains:

Step 1 : To create any webpage, plan the webpage, how it should look
Step 2 : Create an HTML file and write the basic structure first
Step 3 : Add your content one by one.
Step 4 : After adding all contents, create a border for each division/section. Bordering helps well in understanding and styling
Step 5 : Start applying styles using CSS as per your requirement

Below is my code and explanation:

Before styling a webpage, one important thing to know is that every browser has its own default margin and padding. Because of this, webpages may look slightly different in different browsers 😄 Here, I have used Internal CSS.

To remove those default spaces, we commonly use:

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

Here:

* is called the Global Selector because it selects all elements on the webpage.
box-sizing: border-box helps maintain proper width and height calculations by including padding and border inside the element’s total size.

Selectors are used to target HTML elements for styling.

Examples:

header{}
h1{}

These are called Element Selectors because they directly target HTML elements.

While designing layouts, as a beginner, we often get confused about spacing and element positions 😄
A simple trick is to first add borders to elements:

border: 1px solid black;

This helps clearly visualize the boundaries of each element.

Now let’s understand Parent and Child relationships in HTML.

Example Structure:

Here:

<body> is the parent of <header>
<header> is the parent of <h1> and <a>
<h1> and <a> are children of <header>

HTML elements mainly belong to two categories:

1. Block Level Elements

Block-level elements occupy the entire width available.

Even if the content is small, they block the whole line.

Examples:

<header>
<h1>
<div>
<p>

2. Inline Elements

Inline elements only take the space required by their content.

Examples:

<a>
<span>
<strong>

So, <a> tags sit side by side because they are inline elements 😄

Now let’s meet the <nav> tag!

<nav> stands for Navigation and is used to move from one webpage or section to another.

Example:

The <nav> tag itself is a block-level element, but it usually contains inline elements like anchor (<a>) tags.

To create spacing inside a box, we use Padding.

Example:

header{
padding: 20px;
}

Padding adds space between the content and the border.

To create spacing outside the box, we use Margin.

Example:

h1{
margin: 20px;
}

Margin creates distance between elements.

Margins can also be applied individually:

margin-top
margin-right
margin-bottom
margin-left

If only one value is given, the same margin applies to all four sides.

To underline text, CSS provides the text-decoration property.

Example:

text-decoration: underline;

If you want to remove underlines from links:

a{
text-decoration: none;
}

Hope, building this portfolio website project helped in understanding the basics of web development using HTML and CSS. The project demonstrates how to structure a webpage using HTML elements such as header, section, nav, and footer, while CSS was used to improve the design, layout, spacing, colors, and overall appearance of the website.

Why Developers go behind Linux ?

Annapoorani Kadhiravan — Sun, 24 May 2026 07:34:47 +0000

What is Linux?

Linux is a free and open-source operating system created by Linus Torvalds in 1991.
An operating system (OS) is the software that manages computer hardware like CPU, memory, and storage.
Linux acts as a bridge between the user, software applications, and computer hardware.
Linux is widely used in:

servers,
supercomputers,
smartphones,
cloud systems,
and programming environments.

The core part of Linux is called the Kernel, which controls hardware, memory, files, and running processes.
Linux supports both:

GUI (Graphical User Interface) 🖱️
CLI (Command Line Interface) 💻

GUI allows users to click icons and windows, while CLI allows users to type commands directly.
Linux is famous for:

speed 🚀
security 🔐
stability 💪
customization 🎨

Different versions of Linux are called Distributions (Distros) like:

Ubuntu
Fedora
Linux Mint

Developers and companies prefer Linux because it is powerful, reliable, community-supported, and excellent for programming and servers 😄

Developers love Linux because it gives them more control, speed, flexibility, and power compared to many other operating systems 😄

Here are the main reasons why developers “go behind Linux”:

1. Open Source = Free Freedom 🔓

Linux is open source.

Meaning:

anyone can use it,
modify it,
customize it.

Developers enjoy controlling their environment instead of being restricted.

2. Terminal is Super Powerful 💻⚡

Linux terminals are extremely developer-friendly.

Commands work smoothly and efficiently.

Most programming tools are built with Linux support first. Even Android OS is build on top of Linux.

3. Faster and Lightweight 🚀

Linux usually:

uses less RAM,
runs faster,
performs well even on older systems.

So developers can focus more on coding instead of system lag 😄

4. Best for Programming & Servers 🌐

Most servers on the internet run Linux.

Examples:

websites,
cloud servers,
databases,
DevOps systems.

So learning Linux helps developers work in real-world environments.

5. Better for Web Development 🔥

Technologies like:

Node.js
Docker
Kubernetes
Python
Git

work very naturally on Linux. Installation also very easy.

6. Highly Customizable 🎨

Developers can customize:

themes,
shortcuts,
desktops,
workflows,
terminal appearance.

Linux feels like:

"Build your own operating system experience"

7. Great for Cybersecurity & Networking 🔐

Many cybersecurity tools are designed mainly for Linux.

Popular among:

ethical hackers,
DevOps engineers,
cloud engineers,
backend developers.

8. Stability 💪

Linux systems can run for months without restarting.

That’s why companies trust Linux servers heavily.

Developers prefer Linux because it is:

fast,
powerful,
customizable,
programming-friendly,
and widely used in real-world software development environments

Almost every developer who moved from Microsoft Windows to Linux had some doubts initially.

But here’s the interesting part:

Most Linux users were once scared Windows users too 😄

Let’s clear every fear one by one.

1. “Windows performance is better than Linux”

Actually, in many cases Linux performs better.

Linux usually:

uses less RAM,
consumes fewer background resources,
boots faster,
stays smooth for longer periods.

Example:

Windows → many background services
Linux → lightweight and optimized

That’s why old laptops often become fast again after installing Linux 🚀

2. “Linux is not user friendly, command based”

Old Linux? Maybe 😄
Modern Linux distributions are very user-friendly.

Examples:

Ubuntu
Linux Mint
Zorin OS

look and feel similar to Windows.

You can:

click apps,
use settings,
browse files,
install software graphically.

Terminal is optional at the beginning.

Think of it like:

Terminal is a superpower, not a compulsory punishment 😄

3. “Storage for 2 OS”

You do NOT need two operating systems immediately.

You can start with:

Virtual Machine (safest),
Live USB,
or Dual Boot later.

Best beginner approach:

Windows + VirtualBox + Ubuntu

No risk to your laptop.

4. “No idea about installation”

Nobody knew initially 😄

Modern Linux installation is mostly:

Next → Next → Install

especially with Ubuntu.

There are thousands of YouTube tutorials too.

5. “Virus affected”

Linux is generally much safer than Windows.

Reasons:

stronger permissions,
fewer malware targets,
open-source transparency.

Viruses can exist anywhere, but Linux is far less commonly infected.

6. “Familiar with Windows”

This is the biggest reason — comfort zone 😄

Imagine:

First day riding bicycle → scary
After one week → normal

Linux feels strange only initially.

After some practice:

navigation becomes easy,
commands become natural,
you start loving the speed and control.

7. “No idea about Linux”

That’s exactly why you should try it 😄

Nobody learns Linux by “already knowing Linux.”

Start small:

learn folders,
basic commands,
install apps,
use terminal slowly.

Within 2–3 weeks:

You stop fearing Linux.

8. “Installation issues — Partition”

This fear is valid 👍

Partition mistakes can affect data.

So beginners should:

backup important files,
avoid direct dual boot initially,
start with Virtual Machine first.

Safest learning order:

Virtual Machine → Live USB → Dual Boot

This avoids stress completely.

9. “What about my laptop process management?”

Linux usually handles processes very efficiently.

In fact many developers feel:

Linux makes laptop fans calmer 😄

You also get better control over:

CPU usage,
background apps,
memory management.

Tools like:

top
htop

show exactly what’s running.

The Biggest Truth 😄

Most developers don’t switch to Linux because:

"Linux is cool"

They switch because:

development tools work better,
servers use Linux,
programming feels smoother,
automation becomes easier.

Beginner Advice 🚀

Do NOT immediately delete Windows.

Start safely:

Install VirtualBox
Run Ubuntu inside it
Explore slowly
Break things safely 😄
Learn without fear

References :
https://www.redhat.com/en/topics/linux/what-is-linux
https://www.ibm.com/think/topics/linux

Does Front End need HTML, CSS? - Part - 2

Annapoorani Kadhiravan — Sun, 24 May 2026 07:33:50 +0000

Hope, you are here to know more about the structure of HTML and CSS ! 🤞
How does a webpage look like?

Even this blog is a webpage, you can view the title on the top, heading and body content here. Let me show you how to view as developer!

How simple it is? Yes, we are going to structure the same but in browser understandable language! Here we go...
This is the HTML code, which is used to communicate with browser

Important Points to Remember:

Don't need to install any additional Software to use HTML/CSS
Text Editor is enough to run HTML
HTML files runs directly in browser, as they are built with the required feature to run HTML documents.

Now, we have seen the structure of HTML, let's have a look into why we structure it as above program :

The above picture, clearly explains the purpose of each and every tag or keywords used.

Wait...what is keyword here? I caught youuuu....

Yes, Keywords are reserved words, as we reserve tables in hotel and no one else can access it or use it for some other purpose, similarly, keywords are reserved words and cannot be used to any other purpose.

Detailed description :

Why Do We Use Them?

Comparing with my example 😁😄

HTML → Skeleton
HEAD → Brain/settings
BODY → Visible human body
TITLE → Name tag
META → Identity/details

Now, we have coded with basic structure but how to view the output?
As I said earlier, simple text editor is enough to run HTML files but we do have few drawbacks in using it. Let's discuss in detail along with the steps to overcome it.

Step 1 : Open a text editor, write the basic HTML code (you can use the above given code) or click here
Step 2 : Save the file as index.html by click on ctrl + S
Step 3 : go to the file location where index.html is saved, right click on it and open in browser.
Step 4 : Whatever given in the program will be displayed in the browser as output. As Shown below :

Drawback : You need to refresh browser each and everytime you make some changes in the HTML file. How to overcome it ?
Introducing our IDE here to overcome the drawback...isn't it cool?

Step 1 : Download Visual Studio Code - click here to download
Step 2 : Choose the respective OS to download the VS Code
Step 3 : Once after downloading, install it in your device and complete the setup configuration.
Step 4 : Create or Open folder, as per your requirement.
Step 5 : Go to extensions -> search "Live Server " -> choose and install
Step 6 : From now, once you write the code and save it, changes will reflect automatically in the browser.

Ufffff..... just done with basic setup and structure 😎 Lot more to gooo!

Let's take some CSS break 😜

Introduction to CSS
CSS is the language we use to style a Web page.

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

With the previous example of HTML and the CSS, If I am not wrong, you can feel some difference in the output screen.. Which one looks more colorful and attractive ? (not made a good output but still 😅)

The One with CSS, give complete look and here you go on the purpose of using CSS in webpages.

Three types of CSS : (Listed in the order of precedence)

Inline CSS
- Styles given within the line/tag
Internal CSS
- Styles given within the file using style tag
External CSS
- separate document is created and linked to the html file

References :
https://www.w3schools.com/html/default.asp
https://developer.mozilla.org/en-US/docs/Web/HTML
https://www.w3schools.com/css/css_intro.asp
https://developer.mozilla.org/en-US/docs/Web/CSS

Does Front End need HTML, CSS? - Part - 1

Annapoorani Kadhiravan — Sun, 24 May 2026 07:32:48 +0000

Oops! Does Frontend Need HTML and CSS?

The answer is: Of course, yes! 😄

But why do we need them?

What is the purpose of learning HTML and CSS?

Let me explain with an example.

Imagine a world where humans roam around with only skeletons 💀

How scary would that be?

Now imagine covering those skeletons with skin.

They still cannot move, but they definitely look much better than plain skeletons 😄

Now let’s connect this idea to web pages.

A web page is nothing without its structure and design. 🤷‍♀️

Here:

HTML acts like the skeleton of a webpage.
CSS acts like the skin, clothes, and cosmetics that make it attractive and beautiful.
JavaScript gives life and movement to the webpage! ⚡

So, HTML gives structure, CSS gives style, and JavaScript adds interactivity.

Let me introduce the two — actually three — most important pillars of web pages!

Here comes our HTML — HyperText Markup Language.

Mr. Hyper communicates with the browser through a standard markup language used to create and structure the content of a webpage. Just like a skeleton gives structure to the human body!

To understand it more clearly, let’s split the abbreviation:

HYPERTEXT
HyperText refers to the links that connect web pages to one another — simple and straight! To know more, Click here

MARKUP LANGUAGE
A markup language is a system of special “tags” used to organize content and tell the browser how to display it.

I need a language to communicate with you — in this case, English.

Similarly, to communicate with browsers, we use HTML along with CSS styles.

To learn any language, we must understand its purpose and rules. Likewise, in frontend development, we follow certain rules and structures to communicate properly with browsers.

“Frontend without HTML and CSS is like trying to open a lock with a spoon 🍴🔒😄”

Haha… all the best!

Now, let’s discuss those “spoons” — sorry — the actual keys to unlock the world of Frontend Development 🔑

HTML Quick Introduction

Name: HTML — HyperText Markup Language

Version: HTML5

Invented By: Sir Tim Berners-Lee

Before jumping into structure and rules, you should be familiar with a few important terms like Metadata, Extensions, Elements, IDE, and more. We’ll catch up with the others later!

METADATA

Metadata means “data about data.”

I know that sounds confusing 😹

Let me simplify it.

Imagine an employee details form containing:

Employee ID
Employee Name
Employee Department

This structure or format used to collect information is called metadata.

The actual employee information is the data, while the format describing that data is metadata.

Hope that makes sense now 😄 Still confused ? click me

EXTENSION

When saving a file, the last 3–4 characters added after the file name represent the file type. This is called an extension.

It’s basically like introducing yourself with your family name 😄

Examples:

.html
.css
.js
.jpeg
.pdf
.doc

IDE — Integrated Development Environment

Before understanding IDEs, answer this honestly 😄

When you are extremely hungry, would you:

Eat food that is already prepared and ready to serve?
Or collect ingredients, cook everything yourself, and then eat?

Most of us would choose the ready-made meal 😹

Similarly, an IDE is a ready-to-use environment where developers can:

write code,
test applications,
debug errors,
and manage projects easily —

all in one place!

Popular IDEs include:

Visual Studio Code
IntelliJ IDEA
PyCharm
Eclipse

HTML Elements

The HTML element is everything from the start tag to the end tag:

Syntax : Content goes here...

Examples of some HTML elements:

Click here to know more - HTML ELEMENTS

The HTML structure and CSS magic will continue in the next blog 😄
For now, I’m logging out before JavaScript gains consciousness ⚡🤖

References :

w3schools.com

developer.mozilla.org