DEV Community: Rakshambika

Grid Layout: Build Powerful Two-Dimensional Layouts with Ease

Rakshambika — Mon, 10 Aug 2026 14:18:42 +0000

What is CSS Grid?

CSS Grid is a two-dimensional layout system that allows developers to design web pages using rows and columns.
It makes creating responsive and organized layouts simpler, cleaner, and more efficient.
CSS Grid is a layout module that helps developers arrange elements in rows and columns.
Unlike Flexbox, which works primarily in one direction (row or column), Grid works in both directions simultaneously.

Creating a Grid Container

To use Grid, set the display property to grid.

.container {
    display: grid;
}

Defining Columns

Use grid-template-columns to create columns.

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

This creates three columns, each 200px wide.

You can also use fractions (fr):

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

Each column gets equal space.

Defining Rows

Use grid-template-rows to define row sizes.

.container {
    display: grid;
    grid-template-rows: 100px 100px;
}

This creates two rows with a height of 100px each.

Gap Property

The gap property adds spacing between rows and columns.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

HTML Links

Rakshambika — Thu, 06 Aug 2026 16:24:34 +0000

What are HTML Links?

HTML links are used to connect one webpage to another webpage, section, file, email address, or external resource. Links are created using the anchor () tag and help users navigate through websites and web applications.

Syntax

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

Attributes of the Anchor Tag

1. href

Specifies the destination URL.

<a href="https://www.google.com">Google</a>

2. target

Specifies where the linked document should open.

<a href="https://www.google.com" target="_blank">
    Open Google
</a>

Common values:

_self - Opens in the same tab (default)
_blank - Opens in a new tab
_parent - Opens in the parent frame
_top - Opens in the full window

3. title

Provides additional information when hovering over the link.

<a href="https://www.google.com" title="Search Engine">
    Google
</a>

Understanding CSS Positioning

Rakshambika — Wed, 05 Aug 2026 15:30:29 +0000

When building web pages, controlling where elements appear on the screen is essential. CSS provides the position property, which allows developers to place elements precisely within a webpage layout.

Understanding CSS positioning is crucial for creating navigation bars, popups, sticky headers, sidebars, and modern UI components.

What is CSS Position?

The position property determines how an HTML element is positioned on a webpage.

selector {
position: value;
}

There are five main position values:

static
relative
absolute
fixed
sticky

1. Static Position (Default)

Every HTML element is positioned as static by default.

.box {
    position: static;
}

2. Relative Position

An element is positioned relative to its original position.

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

3. Absolute Position

An absolutely positioned element is removed from the normal document flow.

.box {
    position: absolute;
    top: 50px;
    left: 100px;
}

4. Fixed Position

A fixed element stays in the same place even when the page scrolls.

.box {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

5. Sticky Position

Sticky positioning combines relative and fixed behavior.

.box {
    position: sticky;
    top: 0;
}

FLEXBOX

Rakshambika — Mon, 03 Aug 2026 14:28:04 +0000

What is Flexbox?

Flexbox (Flexible Box Layout) is a one-dimensional layout model designed to arrange items in rows or columns.

It helps developers:

Align items horizontally and vertically
Create responsive layouts
Distribute space efficiently
Build navigation bars, cards, galleries, and more
Basic Flexbox Structure

HTML

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

CSS

.container {
    display: flex;
}

Once display: flex is applied:

The parent becomes a Flex Container
The child elements become Flex Items

By default, the items are displayed in a row.

Main Axis vs Cross Axis

Understanding these two axes is essential when working with Flexbox.

Main Axis

The direction in which flex items are placed.

Default:

flex-direction: row;

Main Axis → Horizontal

Cross Axis

The axis perpendicular to the main axis.

Cross Axis → Vertical

Most Flexbox properties work based on these two axes.

flex-direction

The flex-direction property determines the direction of flex items.

Syntax

.container {
    display: flex;
    flex-direction: row;
}

Available Values
row (Default)

flex-direction: row;

Output:
1 2 3

column

flex-direction: column;

Output:
1
2
3

justify-content

The justify-content property aligns items along the main axis.

Syntax

.container {
    justify-content: center;
}

Common Values
flex-start

justify-content: flex-start;

Items appear at the beginning.

flex-end

justify-content: flex-end;

Items appear at the end.

center
justify-content: center;
Items appear in the center.

space-between
justify-content: space-between;

Equal space between items.

space-around
justify-content: space-around;

Equal space around items.

space-evenly
justify-content: space-evenly;

Equal spacing throughout the container.

align-items

The align-items property aligns items along the cross axis.

Syntax

.container {
    align-items: center;
}

Common Values
stretch (Default)
align-items: stretch;

Items stretch to fill the container height.

flex-start
align-items: flex-start;

Items align to the top.

flex-end
align-items: flex-end;

Items align to the bottom.

center
align-items: center;

Items align vertically in the center.

flex-wrap

By default, flex items stay on a single line.

Example

.container {
    display: flex;
    flex-wrap: wrap;
}

Values
flex-wrap: nowrap;

Single line only.

flex-wrap: wrap;

Items move to the next line if needed.

flex-wrap: wrap-reverse;

Items wrap in reverse order.

Bootstrap

Rakshambika — Fri, 31 Jul 2026 06:05:58 +0000

Bootstrap – The Most Popular CSS Framework

What is Bootstrap?

Bootstrap is a free and open-source front-end framework used to create responsive and mobile-friendly websites quickly. It provides ready-made CSS classes and JavaScript components that help developers design websites without writing extensive CSS from scratch.

Bootstrap was originally developed by Twitter and is now one of the most widely used frameworks for web development.

Why Use Bootstrap?

Before Bootstrap, developers had to write large amounts of CSS to style websites. Bootstrap simplifies this process by providing pre-built components and utility classes.

Advantages of Bootstrap

Faster website development
Mobile-first responsive design
Consistent styling across browsers
Easy-to-use grid system
Large collection of ready-made components
Extensive documentation and community support

Features of Bootstrap

1. Responsive Grid System

Bootstrap uses a 12-column grid system to create responsive layouts.

Example:

<div class="container">
    <div class="row">
        <div class="col-md-6">Left Section</div>
        <div class="col-md-6">Right Section</div>
    </div>
</div>

This layout divides the page into two equal columns on medium and larger screens.

2. Pre-built Components

Bootstrap provides many ready-to-use UI components such as:

Buttons
Cards
Navigation Bars
Alerts
Modals
Forms
Dropdowns

Example:

<button class="btn btn-primary">
    Click Me
</button>

3. Utility Classes

Bootstrap includes utility classes for:

Margins (m-3)
Padding (p-3)
Text Alignment (text-center)
Colors (text-primary)
Display (d-flex)

Example:

<p class="text-center text-success">
    Welcome to Bootstrap
</p>

4. Mobile-First Design

Bootstrap follows a mobile-first approach, meaning designs are optimized for mobile devices first and then adapted for larger screens.

How to Add Bootstrap to a Project

The easiest way is using the Bootstrap CDN.

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

For JavaScript components:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap Container

A container is used to wrap website content.

Fixed Width Container

<div class="container">
    Content Here
</div>

Full Width Container

<div class="container-fluid">
    Content Here
</div>

Bootstrap Button Example

<button class="btn btn-success">
    Submit
</button>

<button class="btn btn-danger">
    Delete
</button>

Bootstrap provides different button styles using predefined classes.

Bootstrap Card Example

<div class="card" style="width:18rem;">
  <div class="card-body">
    <h5 class="card-title">Bootstrap Card</h5>
    <p class="card-text">
      This is a simple card component.
    </p>
  </div>
</div>

Cards are commonly used for displaying products, blog posts, and user profiles.

Popular Bootstrap Components

Component	Purpose
Navbar	Navigation menu
Card	Display content in a box
Modal	Popup dialog
Alert	Display messages
Carousel	Image slider
Form Controls	User input fields
Accordion	Expandable content sections

Bootstrap Versions

Bootstrap 3
Bootstrap 4
Bootstrap 5 (Latest widely used version)

Bootstrap 5 removed the dependency on jQuery, making websites faster and more modern.

Types of CSS

Rakshambika — Wed, 29 Jul 2026 15:14:19 +0000

Types of CSS

CSS (Cascading Style Sheets) is used to control the appearance and layout of web pages. It allows developers to apply colors, fonts, spacing, positioning, and other visual styles to HTML elements. There are three main types of CSS: Inline CSS, Internal CSS, and External CSS.

1. Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute. The styles apply only to that specific element.

Example

<p style="color: blue; font-size: 20px;">
    Welcome to CSS!
</p>

Advantages

Quick and easy to apply.
Useful for testing small style changes.
Overrides internal and external styles when specificity rules allow.

Disadvantages

Difficult to maintain for large projects.
Cannot be reused across multiple elements.
Makes HTML code less readable.

2. Internal CSS

Internal CSS is written inside a <style> tag within the <head> section of an HTML document. The styles apply to all matching elements on that page.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Welcome to CSS</h1>
</body>
</html>

Advantages

Keeps styles separate from individual elements.
Suitable for single-page websites.
Easier to manage than inline CSS.

Disadvantages

Styles are limited to one webpage.
Not reusable across multiple pages.

3. External CSS

External CSS is stored in a separate .css file and linked to the HTML document using the <link> tag. This is the most commonly used method in modern web development.

HTML File

<head>
    <link rel="stylesheet" href="styles.css">
</head>

CSS File (styles.css)

body {
    background-color: lightgray;
}

h1 {
    color: red;
}

Advantages

Reusable across multiple webpages.
Easy to maintain and update.
Keeps HTML clean and organized.
Improves consistency throughout a website.

Disadvantages

Requires an additional file request.
Styles will not load if the CSS file path is incorrect.

CSS Priority Order

When multiple CSS types target the same element, the browser follows a priority order:

Inline CSS (Highest Priority)
Internal CSS
External CSS (Lowest Priority)

Example

<head>
    <style>
        p {
            color: green;
        }
    </style>
</head>

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

Output: The text color will be red because Inline CSS has higher priority than Internal CSS.

Day 10 of My HTML Learning Journey

Rakshambika — Fri, 24 Jul 2026 14:47:05 +0000

Today, I learned about Multimedia Tags in HTML. Multimedia refers to content such as images, audio, videos, and other media elements that make web pages more interactive and engaging.

What are Multimedia Tags?

Multimedia tags allow developers to embed media content directly into a web page without requiring external plugins.

The main multimedia tags in HTML are:

1. `<img>` Tag – Display Images

The <img> tag is used to insert images into a webpage.

Syntax:

<img src="image.jpg" alt="Sample Image">

Important Attributes:

src – Specifies the image path.
alt – Alternative text if the image cannot be displayed.
width – Sets image width.
height – Sets image height.

Example:

<img src="nature.jpg" alt="Nature Image" width="300">

2. `<audio>` Tag – Play Audio

The <audio> tag is used to embed sound files.

Syntax:

<audio controls>
    <source src="song.mp3" type="audio/mpeg">
</audio>

Common Attributes:

controls – Displays play/pause controls.
autoplay – Automatically starts playing.
loop – Repeats the audio.
muted – Starts the audio muted.

Example:

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

3. `<video>` Tag – Play Videos

The <video> tag is used to embed videos.

Syntax:

<video controls width="400">
    <source src="video.mp4" type="video/mp4">
</video>

Common Attributes:

controls
autoplay
loop
muted
width
height

Example:

<video controls width="500">
    <source src="sample.mp4" type="video/mp4">
</video>

4. `<source>` Tag

The <source> tag is used inside <audio> and <video> elements to specify media files.

Example:

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
</video>

This allows browsers to choose a supported format.

5. `<iframe>` Tag – Embed External Content

The <iframe> tag can be used to embed content from other websites such as YouTube videos, maps, or documents.

Example:

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/video-id">
</iframe>

Why Are Multimedia Tags Important?

✅ Improve user experience

✅ Make websites more interactive

✅ Enable audio and video playback without plugins

✅ Enhance visual appeal

✅ Support modern web applications

See you in the next blog as I continue exploring Web Development. Happy Coding! 💻✨

Day-9 of Learning HTML

Rakshambika — Wed, 22 Jul 2026 16:55:24 +0000

This is my day 9 of Learning HTML. Today, I learned about the Semantic and Non-Semantic Tags in HTML.

In HTML, tags are classified into semantic and non-semantic tags based on whether they describe the meaning of their content.

Semantic Tags:

Semantic tags clearly describe the purpose and meaning of the content they contain.
They make web pages easier to understand for developers, browsers, search engines, and assistive technologies.

<header>
    <h1>My Website</h1>
</header>

<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
</nav>

<main>
    <article>
        <h2>HTML Basics</h2>
        <p>This is an article.</p>
    </article>
</main>

<footer>
    <p>Copyright 2026</p>
</footer>

Tag and their meaning:

<header> - Header section
<nav> - Navigation links
<main> - Main content
<section> - Thematic section
<article> - Independent content/article
<aside> - Sidebar content
<footer> - Footer section
<figure> - Self-contained content (image, diagram, etc.)
<summary> - Heading for details

Non-Semantic Tags:

Non-semantic tags do not describe the content's meaning.
They are mainly used for layout, styling, or grouping elements.

<div class="header">
    <h1>My Website</h1>
</div>

<div class="menu">
    <a href="#">Home</a>
    <a href="#">About</a>
</div>

<span style="color:red;">Important Text</span>

Stay tuned for more web development content.

Day-8 of Learning HTML

Rakshambika — Mon, 20 Jul 2026 14:00:02 +0000

Today, I learned about the Basic things in HTML like who created HTML? , Why HTML is introduced?

Who Invented HTML?

Tim Berners-Lee invented HTML in 1991 while working at CERN in Switzerland.

He also invented:

World Wide Web (WWW)
HTTP (HyperText Transfer Protocol)
URL (Uniform Resource Locator)

His goal was to help researchers share information easily through connected documents.

Why Was HTML Created?

Before HTML:

Information was stored in separate computers.
Sharing documents was difficult.

HTML introduced:

Hyperlinks (clickable links)
Structured documents
Easy information sharing over the internet

This became the foundation of modern websites.

Uses of HTML:

HTML is used to:

Create Web Pages

<h1>Welcome</h1>

Display Text

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

Add Images

<img src="flower.jpg">

Create Links

<a href="https://www.google.com">Google</a>

Create Forms

<form>
    <input type="text">
</form>

Create Tables

<table>
    <tr>
        <td>Data</td>
    </tr>
</table>

Embed Videos and Audio

<video></video>
<audio></audio>

What is a Tag?

A tag is a keyword enclosed within angle brackets < >.

Tags tell the browser how to display content.

Examples

<h1>Hello</h1>
<p>Paragraph</p>

Here:

<h1> = Opening tag
</h1> = Closing tag

Stay tuned for more updates and exciting web development concepts!

Day 7 of Learning HTML

Rakshambika — Sat, 18 Jul 2026 12:16:46 +0000

This is my day 7 of HTML journey. Today, I learned about the Table in HTML.

HTML TABLE:

Table is used to organize and display the data in row and column format.

<table> tag is used to create a Table on a webpage.

Basic Table Tags:

<table> - used to create a table.

<caption> - used to provide a title to the table.

<thead> - used to represent the header section of the table.

<tbody> - used to represent the body content in the table.

<tfoot> - used to represent the footer section of the table.

<tr> - used to represent the table row.

<th> - used for the header data, it automatically bolds and center the content.

<td>- used to represent the table data.

<colgroup> - used to group one or more column in a table. It is mainly used for styling purpose.

<col> - used inside the <colgroup> tag, to specify the properties.

Table Attributes:

colspan - used to merge the cells horizontally.

rowspan - used to merge the cells vertically.

cellspacing - used to provide the space between cells.

cellpadding - used to provide space between the cell border and cell data.

border - used to provide the border around the table.

Example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Time Table</title>
    <link rel="stylesheet" href="./Table.css">
</head>
<body>
    <h1>Time Table</h1>
    <table>
        <colgroup>
        <col span="1" id="First">
        <col span="2" id="Middle">
        <col id="lastcolumn">
        </colgroup>
        <thead>
            <tr>
                <th rowspan="3">Day</th>
                <th colspan="3" id="seminar">Seminar</th>
            </tr>

            <tr>
                <th colspan="2">Schedule</th>
                <th rowspan="2">Topic</th>
            </tr>

            <tr>
                <th>Begin</th>
                <th>End</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td rowspan="2">Monday</td>
                <td rowspan="2">8:00 a.m</td>
                <td rowspan="2">5.00 p.m</td>
                <td>Introduction to XML</td>
            </tr>

            <tr>
                <td>Validity: DTD and Relax NG</td>
            </tr>

            <tr>
                <td rowspan="3">Tuesday</td>
                <td >8:00 a.m</td>
                <td >11:00 a.m</td>
                <td rowspan="2">XPath</td>
            </tr>

            <tr>
                <td>11:00 a.m</td>
                <td>2:00 p.m</td>
            </tr>

            <tr>
                <td>2:00 p.m</td>
                <td>12:00 p.m</td>
                <td >XSL Transformations</td>
            </tr>

            <tr>
                <td>Wednesday</td>
                <td>8:00 a.m</td>
                <td>12:00 p.m</td>
                <td>XSL Formatting Objects</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CSS:

table,th,td{
    border: solid 1px black;
    text-align: center;
    border-collapse: collapse;
}

table{
    width: 1300px;
    height: 400px;
    margin-left: 500px;
    margin-top: 50px;
    font-size: 25px;
    color: aliceblue;
}

td,th{
    padding: 8px;
}

h1{
    text-align: center;
    font-size: 40px;
    color: rgb(5, 115, 31);
    text-decoration: underline;
}

#First{
    background-color: rgb(199, 60, 130);
}

#Middle{
    background-color: rgb(80, 235, 80);
}

#seminar{
    background-color: rgb(238, 34, 82);
}

#lastcolumn{
    background-color:rgb(221, 65, 224) ;
}

Output:

Stay tuned for more updates and exciting web development concepts!

Day-6 of Learning HTML

Rakshambika — Fri, 17 Jul 2026 10:58:58 +0000

This is my Day 6 of learning HTML. Today, I learned about the *Form Attributes and Input Attributes. *

Form Attributes:

target
action
method

Target:

Target attribute is used specify where to display the response after submitting the form.

The values of target attribute and their meaning:

_blank - Opens in a new window or tab

_self - Opens in the same tab

_parent - Opens in the parent frame

_top - Opens in the full body of the window

Action:

The action attribute contains the URL that defines where to send the data after submitting the form.

If the action attribute is omitted, then the action is set to the current page.

Method:

The method attributespecifies the HTTP method to be used when submitting the form data.

There are two methods: 1.GET 2.POST

The default method is GET.

GET:

GET is not suitable for sensitive information or passwords.

Because, when the form is submitted the data is shown in the URL.

GET is good for non-secure data.

POST:

POST is a secure method, we can send sensitive information and passwords using POST method.

POST is preferred while sending the large amount of data.

POST sends the data in the http request body.

INPUT ATTRIBUTES:

1.VALUE:

Value attribute used to set a default value for the input field.

2.NAME:

The name attribute specifies the name for the input field.

When the form is submitted, the browser stores the data as key(name) and value pair.

If an input field, which does not have name attribute, it's data is not stored in the form data when the form is submitted.

3.AUTOCOMPLETE:

The autocomplete attribute is used to enable or disable the browser's automatic suggestions for form fields based on previously entered values.

When autocomplete="on", the browser may suggest saved information such as names, email addresses, and phone numbers.

When autocomplete="off", the browser will not provide those suggestions.

4.READONLY:

The readonly attribute is used to allow the user to read the data only. The user can't modify the data in that input field.

5.AUTOFOCUS:

Autofocus attribute is used to automatically focus to the input field when the page is loaded.

6.MULTIPLE:

Multiple attribute is used to allow the user to **enter more than one data **in the input field.

7.MAXLENGTH:

Maxlength attribute specifies the maximum number of characters that a user can enter in the input field.

8.MINLENGTH:

Minlength attribute specifies the minimum number of characters that a user must enter in the input field.

9.PLACEHOLDER:

Placeholder attribute is used to give a hint to the user about what should be entered in an input field.

10.REQUIRED:

Required attribute makes a field mandatory, meaning the user must provide a value before submitting the form.

If the required field is empty, the browser will display a error message and prevent form submission.

Day-5 of Learning HTML

Rakshambika — Thu, 16 Jul 2026 08:56:00 +0000

This is my Day 5 of HTML Learning Journey. Today, I learned about the FORM in HTML.

WHAT IS FORM?

Form in HTML is used to collect the data from the user.
Using the <form> tag, we can get the different type of data from the user.
HTML Form are one of the most important element in the web development.
They are widely used in websites for user registration, login , feedback, surveys, contact details and many other purposes.
Over 85% of websites uses form to get the user data.

Syntax:

<form> ... ... </form>

Elements in Form:

<input>
<label>
<select>
<button>
<textarea>
<fieldset>
<legend>
<option>
<optgroup>

Let's explorer the Elements one by one

`<input>`:

The input tag is used to create a input field, where the user can enter their data.
In the input field user can enter the data based on the type attribute of the <input> tag.
There many input types are available: text, email, password, tell, number, date-time, date, datetime-local, month ....,

<input id="username" name="U-name" type="text">

`<label>`:

The label tag is used to provide a description about the input field.
It is useful for the user to know about the input field, which is helpful for them to enter the correct data.

<label for="username">Username</label>

Output:

`<textarea>`:

textarea is used to get a multi-line input from the user.
In <textarea>, we can also adjust the height and width of the input field using the cols and rows attribute.

<label>Address</label>
<textarea name="address"></textarea>

`<optgroup>`

optgroup is used to group the options in the <select> / dropdown list.
label attribute is used to provide the title for the grouped options.

<label>Courses</label>
    <select name="courses" none>
        <optgroup label="Frontend">
            <option value="react">React</option>
            <option value="Angular">Angular</option>
        </optgroup>

        <optgroup  label="Backend">
            <option value="Node.js">Node.js</option>
            <option value="Spring Boot">Spring Boot</option>
        </optgroup>
    </select>

`<button>`:

button tag is used to create a clickable button on the webpage.
Mainly there are two types Reset button and Submit button.

Types of Button:

1.Submit Button - Used to submit the data.
2.Reset Button - Used to reset the webpage.

<button type="submit">Submit</button> 
<button type="reset">Reset</button>

`<option>`:

option is used to create a options in the dropdown list.
The <option> tag is used inisde the <select> tag.
User can select one or more options from the list.

<select name="Language"> 
<option value="English">English</option> 
<option value="Tamil">Tamil</option> 
</select>

`<legend>`:

legend is used to provide the title to the fieldset.
<legend> is used inside the <fieldset>.

<fieldset>
        <legend>List of Courses</legend>
     <label>Courses</label>
    <select name="courses" none>
        <optgroup label="Frontend">
            <option value="react">React</option>
            <option value="Angular">Angular</option>
        </optgroup>

        <optgroup  label="Backend">
            <option value="Node.js">Node.js</option>
            <option value="Spring Boot">Spring Boot</option>
        </optgroup>
    </select>
    </fieldset>

See you in the next learning update!

DEV Community: Rakshambika

Grid Layout: Build Powerful Two-Dimensional Layouts with Ease

What is CSS Grid?

Creating a Grid Container

Defining Columns

Defining Rows

Gap Property

HTML Links

What are HTML Links?

Common values:

3. title

Understanding CSS Positioning

What is CSS Position?

1. Static Position (Default)

2. Relative Position

3. Absolute Position

4. Fixed Position

5. Sticky Position

FLEXBOX

What is Flexbox?

justify-content

align-items

flex-wrap

Bootstrap

Bootstrap – The Most Popular CSS Framework

What is Bootstrap?

Why Use Bootstrap?

Advantages of Bootstrap

Features of Bootstrap

1. Responsive Grid System

2. Pre-built Components

3. Utility Classes

4. Mobile-First Design

How to Add Bootstrap to a Project

Bootstrap Container

Fixed Width Container

Full Width Container

Bootstrap Button Example

Bootstrap Card Example

Popular Bootstrap Components

Bootstrap Versions

Types of CSS

Types of CSS

1. Inline CSS

Example

Advantages

Disadvantages

2. Internal CSS

Example

Advantages

Disadvantages

3. External CSS

HTML File

CSS File (styles.css)

Advantages

Disadvantages

CSS Priority Order

Example

Day 10 of My HTML Learning Journey

What are Multimedia Tags?

1. <img> Tag – Display Images

2. <audio> Tag – Play Audio

3. <video> Tag – Play Videos

4. <source> Tag

5. <iframe> Tag – Embed External Content

Why Are Multimedia Tags Important?

Day-9 of Learning HTML

Day-8 of Learning HTML

Who Invented HTML?

Uses of HTML:

What is a Tag?

Day 7 of Learning HTML

HTML TABLE:

Basic Table Tags:

Table Attributes:

HTML:

CSS:

Output:

Day-6 of Learning HTML

Form Attributes:

1. `<img>` Tag – Display Images

2. `<audio>` Tag – Play Audio

3. `<video>` Tag – Play Videos

4. `<source>` Tag

5. `<iframe>` Tag – Embed External Content

`<input>`:

`<label>`:

`<textarea>`:

`<optgroup>`

`<button>`:

`<option>`:

`<legend>`: