<!
DOCTYPE html>
<!--
DOCTYPE tells the browser this is HTML5
-->
<html lang="en">
<!-- Root element of the HTML page -->
<head>
<!-- Head contains meta information (not visible on page) -->
<meta charset="UTF-8">
<!-- Supports all languages & symbols -->
<title>HTML & CSS Beginner Practice</title>
<!-- Title shown in browser tab -->
</head>
<body>
<!-- Body contains visible content -->
<!-- ================= BASIC HTML TAGS ================= -->
<!-- Heading tags -->
<h1>Main Heading (h1)</h1>
<h2>Sub Heading (h2)</h2>
<h3>Section Heading (h3)</h3>
<!-- Paragraph -->
<p>
This is a paragraph tag. It is used to display text content.
</p>
<!-- Line break -->
This is line one <br>
This is line two
<!-- Horizontal line -->
<hr>
<!-- Text formatting -->
<p>
<b>Bold Text</b><br>
<i>Italic Text</i><br>
<u>Underlined Text</u><br>
<mark>Highlighted Text</mark>
</p>
<!-- List -->
<h3>Unordered List</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Design</li>
<li>Develop</li>
<li>Deploy</li>
</ol>
<!-- Link -->
<a href="[Link] target="_blank">
Visit Google
</a>
<!-- Image -->
<br><br>
<img src="[Link] alt="Sample Image">
<hr>
<!-- ================= HTML5 FORM ELEMENTS ================= --
>
<h2>HTML5 Form Elements</h2>
<form>
<!-- Text input -->
Name:
<input type="text" placeholder="Enter your name"><br><br>
<!-- Email input -->
Email:
<input type="email" placeholder="Enter your email"><br><br>
<!-- Password input -->
Password:
<input type="password"><br><br>
<!-- Number input -->
Age:
<input type="number"><br><br>
<!-- Date input -->
Date of Birth:
<input type="date"><br><br>
<!-- Radio buttons -->
Gender:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female <br><br>
<!-- Checkbox -->
Skills:
<input type="checkbox"> HTML
<input type="checkbox"> CSS
<input type="checkbox"> JS <br><br>
<!-- Color picker -->
Favorite Color:
<input type="color"><br><br>
<!-- File upload -->
Upload Resume:
<input type="file"><br><br>
<!-- Submit button -->
<input type="submit" value="Submit Form">
</form>
<hr>
<!-- ================= HTML5 MEDIA ELEMENTS =================
-->
<h2>HTML5 Media</h2>
<!-- Audio -->
<audio controls>
<source src="[Link]
</audio>
<br><br>
<!-- Video -->
<video width="300" controls>
<source src="[Link]
</video>
<!-- ================= MULTI COLUMN CONTENT =================
-->
<div class="multi-column">
<h2>Multiple Column Layout</h2>
<p>
CSS allows content to be displayed in multiple columns just
like a
newspaper. This improves readability and layout design.
</p>
</div>
</body>
</html>
/* ================= BASIC CSS ================= */
/* Body selector */
body {
font-family: Arial;
background-color: #f2f2f2;
padding: 20px;
/* Heading styling */
h1 {
color: darkblue;
text-align: center;
/* ================= CSS SELECTORS ================= */
/* Element selector */
p{
color: #333;
/* Class selector */
.multi-column {
background: white;
padding: 20px;
margin-top: 20px;
}
/* Attribute selector */
input[type="text"] {
border: 2px solid green;
/* ================= BOX MODEL ================= */
/*
Margin → outside space
Border → outline
Padding → inside space
*/
.multi-column {
margin: 20px;
border: 3px solid black;
padding: 20px;
/* ================= BACKGROUNDS & BORDERS ================= */
.multi-column {
background: linear-gradient(to right, #ffffff, #e0f7fa);
border-radius: 10px;
/* ================= TEXT EFFECTS ================= */
h2 {
text-shadow: 2px 2px 4px gray;
}
p{
letter-spacing: 1px;
line-height: 1.5;
/* ================= USER INTERFACE ================= */
input {
padding: 5px;
input:focus {
background-color: #ffffcc;
outline: none;
/* ================= ANIMATIONS ================= */
@keyframes scaleBox {
from {
transform: scale(1);
to {
transform: scale(1.05);
.multi-column:hover {
animation: scaleBox 0.5s ease-in-out;
}
/* ================= MULTIPLE COLUMN LAYOUT ================= */
.multi-column p {
column-count: 3;
column-gap: 20px;
}
/* ================= BASIC CSS ================= */
/* Body selector */
body {
font-family: Arial;
background-color: #f2f2f2;
padding: 20px;
/* Heading styling */
h1 {
color: darkblue;
text-align: center;
/* ================= CSS SELECTORS ================= */
/* Element selector */
p{
color: #333;
/* Class selector */
.multi-column {
background: white;
padding: 20px;
margin-top: 20px;
}
/* Attribute selector */
input[type="text"] {
border: 2px solid green;
/* ================= BOX MODEL ================= */
/*
Margin → outside space
Border → outline
Padding → inside space
*/
.multi-column {
margin: 20px;
border: 3px solid black;
padding: 20px;
/* ================= BACKGROUNDS & BORDERS ================= */
.multi-column {
background: linear-gradient(to right, #ffffff, #e0f7fa);
border-radius: 10px;
/* ================= TEXT EFFECTS ================= */
h2 {
text-shadow: 2px 2px 4px gray;
}
p{
letter-spacing: 1px;
line-height: 1.5;
/* ================= USER INTERFACE ================= */
input {
padding: 5px;
input:focus {
background-color: #ffffcc;
outline: none;
/* ================= ANIMATIONS ================= */
@keyframes scaleBox {
from {
transform: scale(1);
to {
transform: scale(1.05);
.multi-column:hover {
animation: scaleBox 0.5s ease-in-out;
}
/* ================= MULTIPLE COLUMN LAYOUT ================= */
.multi-column p {
column-count: 3;
column-gap: 20px;