text-red-500 text-blue-500 text-green-500
Example:
<h1 class="text-red-500"> Red Text </h1>
bg-red-500 bg-blue-500 bg-green-500
Example:
<div class="bg-purple-500"> Content </div>
bg-blue-100 bg-blue-300 bg-blue-500 bg-blue-700 bg-blue-900
Higher number = Darker Color
### Section: Introduction to Tailwind cssTailwind CSS is a utility-first CSS framework used to build modern, responsive, and fast websites directly inside HTML.
Instead of writing custom CSS like:
.card {
background: white;
padding: 20px;
border-radius: 10px;
}
You use utility classes directly in HTML:
<div class="bg-white p-5 rounded-xl"></div>
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <h1 class="text-4xl font-bold text-blue-500"> Hello Tailwind </h1> </body> </html>
Create Project
npm create vite@latest my-project cd my-project
Install Dependencies
npm install
npm install tailwindcss @tailwindcss/vite
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
})
@import "tailwindcss";
Basic Syntax
<div class="bg-black text-white p-5 rounded-lg"> Tailwind Box </div>
p-5
All Sides
<div class="p-5">
pt-5 pb-5 pl-5 pr-5 px-5 py-5
Example:
<div class="px-6 py-3"> Button </div>
m-5
Directional:
mt-5 mb-5 ml-5 mr-5 mx-5 my-5
Example:
<div class="mt-10"> Content </div>
w-full w-screen w-1/2 w-1/3 w-64
Example:
<div class="w-1/2"> 50% Width </div>
h-screen h-full h-64
Example:
<div class="h-screen"> Full Viewport Height </div>
text-xs text-sm text-base text-lg text-xl text-2xl text-4xl text-6xl
Example:
<h1 class="text-5xl"> Heading </h1>
font-thin font-light font-normal font-medium font-semibold font-bold font-black
Example:
<p class="font-bold"> Bold Text </p>
text-left text-center text-right
Example:
<h1 class="text-center"> Centered </h1>
flex
Example:
<div class="flex">
<div>1</div>
<div>2</div>
</div>
flex-row flex-col
Example:
<div class="flex flex-col">
justify-start justify-center justify-end justify-between justify-around
items-start items-center items-end
Example:
<div class="flex justify-center items-center h-screen"> Content </div>
grid
grid-cols-2 grid-cols-3 grid-cols-4
Example:
<div class="grid grid-cols-3 gap-5">
gap-2 gap-4 gap-6 gap-10
Example:
<div class="grid grid-cols-3 gap-4">
Example:
<div class=" text-sm md:text-lg lg:text-3xl "> Responsive Text </div>
<div class="bg-cover bg-center">
CSS
.hero{
background-image:url(image.jpg);
}
<div class="bg-[url('/img/bg.jpg')]">
border border-2 border-4
Example:
<div class="border-2">
border-red-500 border-blue-500
Example:
<div class="border border-red-500">
rounded rounded-md rounded-lg rounded-xl rounded-2xl rounded-full
Example:
<img class="rounded-full">
shadow-sm shadow shadow-md shadow-lg shadow-xl shadow-2xl
Example:
<div class="shadow-xl"> Card </div>
hover:
Example:
<button class=" bg-blue-500 hover:bg-red-500 "> Button </button>
hover:scale-110
Example:
<div class="hover:scale-110">
transition
Example:
<button class=" hover:bg-red-500 transition duration-300 "> Button </button>
duration-100 duration-300 duration-500 duration-700 duration-1000
relative absolute fixed sticky
Example:
<div class="relative"> <div class="absolute top-0 right-0"> Badge </div> </div>
top-0 left-0 right-0 bottom-0
Controls stacking order.
z-0 z-10 z-20 z-30 z-40 z-50
Example:
<div class="z-50">
overflow-hidden overflow-auto overflow-scroll overflow-x-auto overflow-y-auto
Example:
<div class="overflow-hidden">
Controls transparency.
opacity-0 opacity-25 opacity-50 opacity-75 opacity-100
Example:
<div class="opacity-50">
scale-50 scale-75 scale-100 scale-125
rotate-45 rotate-90 rotate-180
translate-x-10 translate-y-10
Example:
<div class="rotate-12 scale-110">
<html class="dark">
Example:
<div class=" bg-white dark:bg-gray-900 text-black dark:text-white "> Dark Mode Card </div>
container
Centers content automatically.
hidden
Hide element.
block
Show as block element.
cursor-pointer cursor-not-allowed
select-none
Disable text selection.
aspect-video aspect-square
Instead of writing CSS:
.btn{
background:red;
padding:10px;
}
Use:
<button class="bg-red-500 px-4 py-2"> Button </button>
Tailwind follows Mobile First Design.
text-sm md:text-xl
Meaning:
Custom values inside brackets.
w-[350px] h-[600px] bg-[#1a1a1a]
hover: focus: active: disabled:
Example:
<input class=" border focus:border-blue-500 ">
<div class=" max-w-sm bg-white rounded-xl shadow-lg p-6 hover:scale-105 transition duration-300 "> <h2 class="text-2xl font-bold mb-2"> Tailwind Card </h2> <p class="text-gray-600"> Simple Card Example </p> </div>
GSAP (GreenSock Animation Platform) is a professional JavaScript animation library used to create:
Official site:
#### Page: Installation URL: https://inside.blackboxlearning.in/docs/view/gsap/p/installation/<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
npm create vite@latest npm install npm install gsap
Import:
import gsap from "gsap";
<div class="box"></div>
.box {
width: 100px;
height: 100px;
background: red;
}
gsap.to(".box", {
x: 300
});
Animates an element from its current state to a new state.
gsap.to(target, {
property: value,
duration: time
});
Example
<div class="box"></div>
<script>
gsap.to(".box", {
x: 300,
duration: 2
});
</script>
Animates an element from a given state to its current state.
gsap.from(target, {
property: value,
duration: time
});
Example
gsap.from(".box", {
x: -300,
opacity: 0,
duration: 2
});
Defines both starting and ending values.
gsap.fromTo(
target,
{ startProperties },
{ endProperties }
);
gsap.fromTo(
".box",
{
x: 0
},
{
x: 500,
duration: 2
}
);
Changes properties instantly.
gsap.set(target, {
property: value
});
gsap.set(".box", {
x: 200,
opacity: 0.5
});
Immediately:
Set initial state before animation.
gsap.set(".box", { opacity: 0 });
gsap.to(".box", {
opacity: 1,
duration: 2
});
GSAP animates many CSS properties.
x: 200 y: 100
rotation: 360
scale: 2
opacity: 0.5
width: "300px", height: "200px"
backgroundColor: "blue"
gsap.to(".box", {
x: 200,
rotation: 360,
scale: 1.5,
opacity: 0.7,
duration: 2
});
Easing controls animation speed behavior.
ease: "none"
Constant speed.
---------
ease: "power1.out"
Starts fast, ends slow.
------___
ease: "power2.out"
Smoother effect.
gsap.to(".box", {
x: 300,
duration: 2,
ease: "power2.out"
});
ease: "bounce.out"
gsap.to(".ball", {
y: 300,
duration: 2,
ease: "bounce.out"
});
ease: "elastic.out"
Spring-like effect.
gsap.to(".box", {
x: 300,
ease: "elastic.out(1, 0.3)"
});
Repeats animation multiple times.
gsap.to(".box", {
x: 300,
duration: 1,
repeat: 2
});
Run 1 Run 2 Run 3
Because:
repeat: 2
means repeat 2 extra times.
repeat: -1
Example:
gsap.to(".box", {
rotation: 360,
duration: 2,
repeat: -1
});
Infinite rotation.
Makes animation reverse direction after each repeat.
gsap.to(".box", {
x: 300,
duration: 1,
repeat: 3,
yoyo: true
});
β reset β reset β reset
β β β β
Animates multiple elements one after another.
<div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div>
gsap.to(".box", {
y: -100,
duration: 1,
stagger: 0.3
});
Box1 ---->
0.3s
Box2 ---->
0.3s
Box3 ---->
0.3s
Box4 ---->
gsap.to(".box", {
y: -100,
duration: 1,
stagger: {
each: 0.2,
from: "center"
}
});
Animation starts from center element and spreads outward.
### Section: GSAP TimelinesTimelines are one of GSAP's most powerful features. Instead of managing multiple animations separately, you can organize them into a sequence.
Without Timeline:
gsap.to(".box1", {
x: 200,
duration: 1
});
gsap.to(".box2", {
x: 200,
duration: 1,
delay: 1
});
gsap.to(".box3", {
x: 200,
duration: 1,
delay: 2
});
Problems:
With Timeline:
const tl = gsap.timeline();
tl.to(".box1", {
x: 200,
duration: 1
})
.to(".box2", {
x: 200,
duration: 1
})
.to(".box3", {
x: 200,
duration: 1
});
Cleaner and easier to control.
A Timeline is a container that holds multiple animations.
const tl = gsap.timeline();
<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>
const tl = gsap.timeline();
tl.to(".red", {
x: 300,
duration: 1
})
.to(".blue", {
x: 300,
duration: 1
})
.to(".green", {
x: 300,
duration: 1
});
Red --------> Blue --------> Green -------->
Each animation starts after the previous one ends.
#### Page: Timeline Methods URL: https://inside.blackboxlearning.in/docs/view/gsap/p/timeline-methods/.to()
tl.to(".box", {
x: 200,
duration: 1
});
.from()
tl.from(".box", {
opacity: 0,
y: 100,
duration: 1
});
.fromTo()
tl.fromTo(
".box",
{ scale: 0 },
{ scale: 1, duration: 1 }
);
.set()
tl.set(".box", {
opacity: 0
});
Instant property change.
#### Page: Labels URL: https://inside.blackboxlearning.in/docs/view/gsap/p/labels/Labels are named positions inside a timeline.
Instead of using time values, you can use meaningful names.
tl.addLabel("start");
or
tl.addLabel("intro", 2);
const tl = gsap.timeline();
tl.addLabel("begin")
.to(".box1", {
x: 200,
duration: 1
})
.addLabel("middle")
.to(".box2", {
x: 200,
duration: 1
})
.addLabel("end");
Timeline:
begin ---- box1 ---- middle ---- box2 ---- end
Position parameters control WHEN animations start.
This is one of the most important Timeline concepts.
tl.to(".box1", {
x: 200,
duration: 1
});
tl.to(".box2", {
x: 200,
duration: 1
});
Result:
Box1 ----> Box2 ---->
Sequential.
tl.to(".box1", {
x: 200
}, 2);
Starts at 2 seconds.
"+=1"
tl.to(".box2", {
x: 200
}, "+=1");
Starts 1 second after previous animation ends.
Timeline:
Box1 ---->
(1s gap)
Box2 ---->
"-=0.5"
tl.to(".box2", {
x: 200
}, "-=0.5");
Starts 0.5s before previous animation ends.
Timeline:
Box1 -------->
Box2 -------->
Overlap created.
tl.to(".box1", {
x: 200
})
.to(".box2", {
y: 200
}, "<");
"<" means start at same time as previous animation.
Timeline:
Box1 --------> Box2 -------->
Both together.
tl.to(".box1", {
x: 200
})
.to(".box2", {
y: 200
}, "<0.5");
Starts 0.5 seconds after previous starts.
tl.to(".box1", {
duration: 2
})
.to(".box2", {
duration: 1
}, ">");
">" means start after previous animation ends.
Timelines can be controlled like videos.
tl.play();
Starts timeline.
tl.pause();
Stops at current position.
tl.resume();
Continues from pause point.
tl.restart();
Starts from beginning.
tl.reverse();
Plays backwards.
Jump to specific position.
tl.seek(2);
Move to 2 seconds.
tl.seek("intro");
tl.progress(0.5);
Moves timeline to 50%.
Controls playback speed.
tl.timeScale(2);
2x speed.
tl.timeScale(0.5);
Half speed.
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="reverse">Reverse</button>
document
.getElementById("play")
.addEventListener("click", () => tl.play());
document
.getElementById("pause")
.addEventListener("click", () => tl.pause());
document
.getElementById("reverse")
.addEventListener("click", () => tl.reverse());
ScrollTrigger is a GSAP plugin that lets you animate elements based on the user's scroll position.
Normally animations run automatically:
gsap.to(".box", {
x: 300,
duration: 2
});
With ScrollTrigger, animations start when the user scrolls to a specific point.
gsap.to(".box", {
x: 300,
scrollTrigger: ".box"
});
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
gsap.registerPlugin(ScrollTrigger);
The trigger is the element that starts the animation.
gsap.to(".box", {
x: 300,
scrollTrigger: {
trigger: ".box"
}
});
User Scrolls
β
Trigger Reaches Viewport
β
Animation Starts
<section class="section">
<div class="box"></div>
</section>
gsap.to(".box", {
rotation: 360,
scrollTrigger: {
trigger: ".section"
}
});
Animation starts when .section enters viewport.
Control exactly when animation starts and stops.
start: "top center"
Meaning:
Element Top
β
Viewport Center
Animation starts when element's top reaches viewport center.
start: "elementPosition viewportPosition"
scrollTrigger: {
trigger: ".box",
start: "top 80%"
}
Start when box reaches 80% of viewport.
end: "bottom center"
Animation ends when:
Element Bottom
β
Viewport Center
scrollTrigger: {
trigger: ".box",
start: "top center",
end: "bottom center"
}
Scrub links animation progress directly to scrolling.
Without scrub:
gsap.to(".box", {
x: 500,
scrollTrigger: {
trigger: ".box"
}
});
Animation plays once triggered.
With scrub:
gsap.to(".box", {
x: 500,
scrollTrigger: {
trigger: ".box",
scrub: true
}
});
Animation follows scrollbar.
Scroll 20% β Animation 20% Scroll 50% β Animation 50% Scroll 100% β Animation 100%
scrub: 2
Meaning:
Animation catches up smoothly over 2 seconds.
scrollTrigger: {
trigger: ".box",
scrub: 2
}
Create horizontal scrolling sections.
<div class="container"> <section class="panel red"></section> <section class="panel blue"></section> <section class="panel green"></section> </div>
.container {
display: flex;
width: 300vw;
}
.panel {
width: 100vw;
height: 100vh;
}
let sections =
gsap.utils.toArray(".panel");
gsap.to(sections, {
xPercent: -100 * (sections.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".container",
pin: true,
scrub: 1,
end: "+=3000"
}
});
Scroll Down Panel 1 β Panel 2 β Panel 3
Instead of vertical movement.
let sections =
gsap.utils.toArray(".panel");
Converts all panels into an array.
[
redPanel,
bluePanel,
greenPanel
]
gsap.to(sections, {
Animate all panels.
xPercent: -100 * (sections.length - 1),
Let's calculate.
We have:
sections.length = 3
Therefore:
-100 * (3 - 1) = -200
Result:
xPercent: -200
Initially:
[Red][Blue][Green] ^ Visible
After moving:
[Red][Blue][Green]
^
Visible
Need to move:
100% for Blue 100% for Green
Total:
200%
Hence:
xPercent: -200
Negative means move left.
ease: "none"
No acceleration.
Required for smooth scroll syncing.
scrollTrigger: {
Creates scroll-based animation.
trigger: ".container",
Animation begins when container reaches viewport.
pin: true,
Pins container.
Normal scrolling:
Scroll β Section passes away
Pinned:
Scroll β Section stays fixed
This allows horizontal movement while page is still scrolling vertically.
scrub: 1,
Links animation to scrollbar.
Without scrub:
Trigger β Animation plays automatically
With scrub:
Scroll 20% β Animation 20% Scroll 50% β Animation 50% Scroll 80% β Animation 80%
Perfect synchronization.
end: "+=3000"
Meaning:
Continue animation for 3000px of scrolling
Without enough scroll distance:
Scroll β Animation ends too fast
With:
end: "+=3000"
User gets enough space to see:
Red β Blue β Green
Page Scrolls
β
Container Reaches Screen
β
Pin Activated
β
Vertical Scroll Continues
β
Panels Move Horizontally
β
Red β Blue β Green
β
End Reached
β
Pin Released
Parallax creates depth by moving elements at different speeds.
Background moves slower.
gsap.to(".bg", {
y: -200,
scrollTrigger: {
trigger: ".section",
scrub: true
}
});
gsap.to(".content", {
y: -50,
scrollTrigger: {
trigger: ".section",
scrub: true
}
});
Background β Slow Foreground β Fast
Creates 3D depth illusion.
gsap.to(".image", {
yPercent: -20,
scrollTrigger: {
trigger: ".image",
scrub: true
}
});
Bootstrap is a popular CSS framework used to build responsive and modern websites quickly.
It provides:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<h1 class="text-center">Hello Bootstrap</h1>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/bootstrap.bundle.min.js"></script>
npm install bootstrap
Import in JS:
import 'bootstrap/dist/css/bootstrap.min.css';
Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.
Containers are the most basic layout element in Bootstrap and are required when using our default grid system.
Bootstrap comes with three different containers:
.container, which sets a max-width at each responsive breakpoint.container-fluid, which is width: 100% at all breakpoints.container-{breakpoint}, which is width: 100% until the specified breakpointContainers help align content.
.containerFixed width responsive container.
<div class="container bg-light p-3"> Fixed Container </div>
Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply max-widths for each of the higher breakpoints. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will scale up with md, lg, xl, and xxl.
Copy
<div class="container-sm">100% wide until small breakpoint</div> <div class="container-md">100% wide until medium breakpoint</div> <div class="container-lg">100% wide until large breakpoint</div> <div class="container-xl">100% wide until extra large breakpoint</div> <div class="container-xxl">100% wide until extra extra large breakpoint</div>
.container-fluidFull width container.
<div class="container-fluid bg-warning p-3"> Full Width </div>
Bootstrap grid uses:
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
</div>
</div>
col-6 col-4 col-3
<div class="col-md-6 col-lg-4">
Meaning:
<div class="col">
Automatically shares space.
g-3 gx-4 gy-5
<h1>Heading</h1> <p class="h1">h1. Bootstrap heading</p> <p class="h2">h2. Bootstrap heading</p> <p class="h3">h3. Bootstrap heading</p> <p class="h4">h4. Bootstrap heading</p> <p class="h5">h5. Bootstrap heading</p> <p class="h6">h6. Bootstrap heading</p>
text-center text-start text-end
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading a larger, slightly more opinionated heading style.
<h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1> <h1 class="display-5">Display 5</h1> <h1 class="display-6">Display 6</h1>
fw-bold fw-light fw-semibold
text-uppercase text-lowercase text-capitalize
text-primary text-success text-danger text-warning
bg-primary bg-dark bg-light
text-opacity-50 bg-opacity-75
Bootstrap spacing uses:
Scale:
0 β 5
mt-5 mb-3 ms-4 me-2 p-5 px-3 py-4
w-25 w-50 w-75 w-100
h-25 h-50 h-100
vh-100 min-vh-100
border border-0 border-top border-danger
rounded rounded-circle rounded-pill
shadow shadow-sm shadow-lg
d-block d-inline d-inline-block d-flex d-none
d-md-none d-lg-block
Bootstrap provides flexbox classes.
d-flex
flex-row flex-column
justify-content-center justify-content-between justify-content-around
align-items-center align-items-start
flex-wrap
position-relative position-absolute position-fixed position-sticky
top-0 start-0 end-0 bottom-0
translate-middle
Official icon library.
CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
Example:
<i class="bi bi-house"></i>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>
<button class="btn btn-primary">Click</button>
btn-success btn-danger btn-warning btn-outline-primary
<div class="card">
<img src="img.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p>Content</p>
</div>
</div>
<input type="text" class="form-control">
<label class="form-label">Name</label>
<select class="form-select"></select>
<input class="form-check-input">
is-valid is-invalid
<table class="table">
table-striped table-bordered table-hover table-dark
<div class="table-responsive">
<div class="alert alert-success"> Success </div>
alert-dismissible btn-close
<span class="badge bg-primary">New</span>
<div class="progress"> <div class="progress-bar w-75"></div> </div>
<div class="spinner-border"></div>
<div class="accordion">
Used for FAQs.
data-bs-toggle="collapse"
Popup component.
<button data-bs-toggle="modal" data-bs-target="#exampleModal">
Image slider.
<div id="carouselExample" class="carousel slide">
Sidebar menu.
<div class="offcanvas offcanvas-start">
Directions:
overflow-hidden overflow-scroll
visible invisible
z-1 z-2 z-3
CSS is the language we use to style a Web page.
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes
The image below shows the same page with and without CSS.
A CSS rule consists of a selector and a declaration block:
Eg:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
### Section: How To Add CSSWhen 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:
Priority: Inline > Internal > External
#### Page: External CSS URL: https://inside.blackboxlearning.in/docs/view/css/p/external-css/With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
External styles are defined within the <link> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet can be written in any text editor, and must be saved with a .css extension.
The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
#### Page: Internal CSS URL: https://inside.blackboxlearning.in/docs/view/css/p/internal-css/An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
#### Page: Inline CSS URL: https://inside.blackboxlearning.in/docs/view/css/p/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.
Inline styles are defined within the "style" attribute of the relevant element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
### Section: CSS SelectorsCSS selectors are used to target and select HTML elements so that styles (CSS rules) can be applied to them.
They act like a bridge between your HTML structure and your CSS styling.
π Example:
p {
color: blue;
}
This selector targets all <p> elements and makes their text blue.
CSS selectors are mainly divided into 5 categories:
These selectors target elements based on basic identifiers like name, id, or class.
Selects elements by tag name.
h1 {
color: red;
}
Selects a unique element with a specific id.
#header {
background-color: black;
}
π Note: ID must be unique in a page.
Selects elements with a specific class.
.box {
border: 1px solid gray;
}
π Multiple elements can share the same class.
Selects all elements.
* {
margin: 0;
padding: 0;
}
Apply same style to multiple elements.
h1, p, div {
color: green;
}
These selectors define relationships between elements.
Selects all matching elements inside another element.
div p {
color: blue;
}
π Targets all <p> inside <div>
Selects direct children only.
div > p {
color: red;
}
Selects the next immediate sibling.
h1 + p {
color: orange;
}
Selects all siblings after an element.
h1 ~ p {
color: purple;
}
Used to define a special state of an element.
a:hover {
color: red;
}
π When user hovers over a link
input:focus {
border: 2px solid blue;
}
li:first-child {
color: green;
}
li:last-child {
color: blue;
}
li:nth-child(2) {
color: red;
}
Used to style specific parts of elements.
p::first-letter {
font-size: 30px;
}
p::first-line {
color: blue;
}
::selection {
background: yellow;
}
p::before {
content: "π ";
}
p::after {
content: " β";
}
Select elements based on attributes or attribute values.
input[type="text"] {
border: 1px solid gray;
}
a[target="_blank"] {
color: red;
}
img[alt] {
border: 2px solid black;
}
:is() Used to group multiple selectors cleanly.
:is()
section h1,
section h2,
section h3{
color:red;
}
:is()
section :is(h1,h2,h3){
color:red;
}
Much cleaner.
:where() Looks similar to :is()
BUTβ¦
Specificity becomes:
ZERO (0)
:where(h1,h2,h3){
margin:0;
}
:not() Select everything EXCEPT something.
button:not(.primary){
background:gray;
}
Meaning:
Select all buttons EXCEPT .primary
In CSS, colors are specified by using a predefined color name, or with a RGB, HEX, HSL, RGBA, HSLA value.
You can set the background color for HTML elements:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
You can set the color of text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
You can set the color of borders:
<h1 style="border:2px solid Tomato;">Hello World</h1>
An RGB color value represents RED, GREEN, and BLUE light sources.
In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
Experiment by mixing the RGB values below:
rgb(255, 99, 71)
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
Experiment by mixing the RGBA values below:
rgba(255, 99, 71, 0.5)
A hexadecimal color is specified with: #RRGGBB.
In CSS, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).
To display black, set all values to 00, like this: #000000.
To display white, set all values to ff, like this: #ffffff.
Experiment by mixing the HEX values below:
#ff6347
Sometimes you will see a 3-digit hex code in the CSS source.
The 3-digit hex code is a shorthand for some 6-digit hex codes.
The 3-digit hex code has the following form:
#rgb
Where r, g, and b represent the red, green, and blue components with values between 0 and f.
The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for each component. So, if we have #ff00cc, it can be written like this: #f0c.
Here is an example:
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
}
#### Page: HSL URL: https://inside.blackboxlearning.in/docs/view/css/p/hsl/HSL stands for hue, saturation, and lightness.
In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel (from 0 to 360):
Saturation is a percentage value: 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage; 0% is black, 50% is neither light or dark, 100% is white.
Experiment by mixing the HSL values below:
hsl(0, 100%, 50%)
Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray.
50% is 50% gray, but you can still see the color.
0% is completely gray; you can no longer see the color.
The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) and 100% means full lightness (white).
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
Experiment by mixing the HSLA values below:
hsla(0, 100%, 50%, 0.5)
CSS units define size, spacing, and layout.
π Used in:
Example:
div {
width: 200px;
}
Here, px is the unit.
There are 2 main categories:
Fixed size (does NOT change)
Changes based on screen / parent / root
#### Page: ABSOLUTE UNITS (FIXED) URL: https://inside.blackboxlearning.in/docs/view/css/p/absolute-units-fixed/
.box {
width: 200px;
}
1px = 1 screen pixel
Not responsive
Other Absolute Units (Rare)
.container {
width: 50%;
}
π Relative to parent element
.parent {
width: 400px;
}
.child {
width: 50%; /* = 200px */
}
.parent {
font-size: 20px;
}
.child {
font-size: 2em; /* = 40px */
}
π 1em = parent font-size
It can stack and grow unexpectedly
.parent {
font-size: 20px;
}
.child {
font-size: 2em; /* 40px */
}
.grandchild {
font-size: 2em; /* 80px π΅ */
}
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* = 32px */
}
π Always based on <html>
div {
width: 50vw;
}
π 50% of screen width
div {
height: 100vh;
}
π Full screen height
.hero {
height: 100vh;
}
π Full screen hero section
div {
width: 50vmin;
}
π Based on smaller/larger screen dimension
clamp() β RESPONSIVE WITH LIMITSclamp(MIN, PREFERRED, MAX)
π Think like this:
βValue should growβ¦ but NOT go below MIN and NOT exceed MAXβ
font-size: clamp(16px, 2vw, 32px);
calc() β DYNAMIC CALCULATIONcalc(expression)
You can do math inside CSS:
+-*/width: calc(100% - 50px);
Letβs say:
π 100% = 1000px
Now:
1000px - 50px = 950px
π Final width = 950px
.container {
width: calc(100% - 40px);
}
π Leaves space for padding/margin
.box {
left: calc(50% - 100px);
}
π Moves element to center
.col {
width: calc(100% / 3);
}
π 3 equal columns
### Section: CSS Text #### Page: CSS Text Color URL: https://inside.blackboxlearning.in/docs/view/css/p/css-text-color/The color property is used to set the color of the text. The color is specified by:
In this example, we define both the background-color property and the color property:
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
The text-align property is used to set the horizontal alignment of a text.
This property can have one of the following values:
left - Aligns the text to the leftright - Aligns the text to the rightcenter - Centers the textjustify - Stretches the lines so that each line has equal widthWhen the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):
div {
text-align: justify;
}
The text-align-last property specifies how to align the last line of a text.
This property can have one of the following values:
auto - Default value. The last line is justified and aligned leftleft - The last line is aligned to the leftright - The last line is aligned to the rightcenter - The last line is center-alignedjustify - The last line is justified as the rest of the linesstart - The last line is aligned at the start of the lineend - The last line is aligned at the end of the lineDifferent alignment of the last line in three <p> elements:
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
The vertical-align property sets the vertical alignment of an element.
This property can have one of the following values:
baseline - Default value. The element is aligned with the baseline of the parentlength/% - Raises or lower an element by the specified length or percentsub - The element is aligned with the subscript baseline of the parentsuper - The element is aligned with the superscript baseline of the parenttop - The element is aligned with the top of the tallest element on the linetext-top - The element is aligned with the top of the parent element's fontmiddle - The element is placed in the middle of the parent elementbottom - The element is aligned with the lowest element on the linetext-bottom - The element is aligned with the bottom of the parent element's fontThe CSS text-decoration property is used to control the appearance of decorative lines on text.
It is a shorthand property for the following individual properties:
The CSS text-decoration-line property sets the type of decoration line added to the text.
This property can have one or more of the following values:
none - Default value. Displays no decoration lineunderline - The decoration line is displayed under the textoverline - The decoration line is displayed over the textline-through - The decoration line is displayed through the textTip: You can combine multiple values, like overline and underline to display lines both over and under a text.
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
The CSS text-decoration-color property is used to set the color of the decoration line.
Add different colors to the decoration line:
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
The text-decoration-style property sets the style of the text decoration (like solid, wavy, dotted, dashed, double).
Tip: Also look at the text-decoration property, which is a short-hand property for text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness.
The text-decoration-thickness property specifies the thickness of the decoration line.
The CSS text-transform property is used to control the capitalization of text in an element.
It can be used to transform a text into uppercase or lowercase letters, or capitalize the first letter of each word, without changing the original content in HTML.
This property can have one of the following values:
none - No transformation. Text renders as it iscapitalize - Transforms the first character of each word to uppercaseuppercase - Transforms all characters to uppercaselowercase - Transforms all characters to lowercaseCSS has several properties to control text spacing.
In this chapter you will learn about the following properties:
The CSS text-indent property is used to specify the indentation of the first line in a text-block.
Tip: Negative values are allowed. The first line will be indented to the left if the value is negative.
Indent the first line of text in a text-block:
p {
text-indent: 50px;
}
The CSS letter-spacing property is used to specify the space between the characters in a text.
Tip: Negative values are allowed.
Increase and decrease the space between characters:
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}
The CSS line-height property is used to specify the space between lines.
Note: Negative values are not allowed.
Specify the space between lines:
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
The CSS word-spacing property is used to specify the space between the words in a text.
Tip: Negative values are allowed.
Increase and decrease the space between words:
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}
The CSS white-space property specifies how white-space inside an element is handled.
This property can have one of the following values:
normalnowrappreHow to disable text wrapping inside an element
p {
white-space: nowrap;
}
The text-shadow property adds shadow to text.
In its simplest use, you only specify the horizontal and the vertical shadow.
In addition, you can add a shadow color and blur effect.
Horizontal and vertical shadow:
h1 {
text-shadow: 2px 2px;
}
Horizontal and vertical shadow, with color:
h1 {
text-shadow: 2px 2px red;
}
ο»ΏHorizontal and vertical shadow, with color and blur effect:
h1 {
text-shadow: 2px 2px 5px red;
}
The text-shadow property also accepts multiple shadows for an element. Define each shadow in a comma-separated list.
The following example shows a red and blue neon glow shadow:
Text-shadow with red and blue neon glow:
h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
### Section: CSS BackgroundsThe CSS background properties are used to add background effects for elements.
In these chapters, you will learn about the following CSS background properties:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground (shorthand property)The background-color property specifies the background color of an element.
The background color of a page is set like this:
body {
background-color: lightblue;
}
With CSS, a color is most often specified by:
Look at CSS Color Values for a complete list of possible color values.
You can set the background color for any HTML elements:
Here, the <h1>, <p>, and <div> elements will have different background colors:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent:
div {
background-color: green;
opacity: 0.3;
}
Note: When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read.
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
#### Page: CSS Background Image URL: https://inside.blackboxlearning.in/docs/view/css/p/css-background-image/The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
Set the background image for a page:
body {
background-image: url("paper.gif");
}
ο»ΏThe background image can also be set for specific elements, like the <p> element:
p {
background-image: url("paper.gif");
}
#### Page: CSS Background Image Repeat URL: https://inside.blackboxlearning.in/docs/view/css/p/css-background-image-repeat/The background-repeat property sets if/how a background image will be repeated.
By default, a background-image is repeated both vertically and horizontally.
Some images should be repeated only horizontally or vertically, or they will look strange
If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
Tip: To repeat an image only vertically, use background-repeat: repeat-y;
Showing the background image only once is also specified by the background-repeat property:
Show the background image only once:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
The background-position property is used to set the starting position of the background image.
By default, a background-image is placed at the top-left corner of an element.
Position the background image in the top-right corner:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
ο»Ώ
The background-size property specifies the size of the background image in an element.
It controls how the image is scaled, stretched, or fitted inside the container.
The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):
Specify that the background image should be fixed:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Specify that the background image should scroll with the rest of the page:
body {
background-attachment: scroll;
}
Set the text color of the <div> element to red, but keep the initial color for <h1> elements:
div {
color: red;
}
h1 {
color: initial;
}
The initial keyword is used to set a CSS property to its default value.
The initial keyword can be used for any CSS property, and on any HTML element.
Set the text-color for <span> elements to blue, except those inside elements with class="extra":
span {
color: blue;
}
.extra span {
color: inherit;
}
The inherit keyword specifies that a property should inherit its value from its parent element.
The inherit keyword can be used for any CSS property, and on any HTML element.
To shorten the code, it is possible to specify all the background properties in one single property. This is called a shorthand property.
Instead of writing:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
You can use the shorthand property background:
Use the shorthand property to set all the background properties in one declaration:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
The background property is a shorthand property for the following properties:
background-colorbackground-imagebackground-positionbackground-sizebackground-repeatbackground-attachmentbackground-originbackground-clipIf some of the property values are missing, they will be set to their initial (default) values.
backdrop-filterBlurs the background behind the element.
backdrop-filter: blur(10px);
Element stays clear.
Background becomes blurry.
filterAffects the element itself.
filter: blur(10px);
Entire element becomes blurry.
### Section: CSS BordersThe CSS border properties allow you to specify the style, width, and color of an element's border.
The border-style property specifies what kind of border to display.
The following values are allowed:
dotted - Defines a dotted borderdashed - Defines a dashed bordersolid - Defines a solid borderdouble - Defines a double bordergroove - Defines a 3D grooved border. The effect depends on the border-color valueridge - Defines a 3D ridged border. The effect depends on the border-color valueinset - Defines a 3D inset border. The effect depends on the border-color valueoutset - Defines a 3D outset border. The effect depends on the border-color valuenone - Defines no borderhidden - Defines a hidden borderThe border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:
Demonstration of the different border widths:
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
The border-color property is used to set the color of the four borders.
The color can be set by:
Note: If border-color is not set, it inherits the color of the element.
Demonstration of the different border colors:
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
The color of the border can also be specified using a hexadecimal value (HEX):
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}
Or by using RGB values:
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}
You can also use HSL values:
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}
#### Page: CSS Border Sides URL: https://inside.blackboxlearning.in/docs/view/css/p/css-border-sides/From the examples on the previous pages, you have seen that it is possible to specify a different border for each side.
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):
In the example below we use the four properties above to set the style of each border side:
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
ο»ΏWe can also use the shorthand border-style property to achieve the same result.
The example below gives the same result as the example above:
p {
border-style: dotted solid;
}
#### Page: CSS Shorthand Border Property URL: https://inside.blackboxlearning.in/docs/view/css/p/css-shorthand-border-property/Like you saw in the previous page, there are many properties to consider when dealing with borders.
To shorten the code, it is also possible to specify all the individual border properties in one property.
The border property is a shorthand property for the following individual border properties:
border-widthborder-style (required)border-colorp {
border: 5px solid red;
}
You can also specify all the individual border properties for just one side:
p {
border-left: 6px solid red;
}
The border-radius property is used to add rounded borders to an element:
p {
border: 2px solid red;
border-radius: 5px;
}
The border-radius property defines the radius of the element's corners.
Tip: This property allows you to add rounded corners to elements!
This property can have from one to four values. Here are the rules:
Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third
value applies to bottom-right corner, and fourth value applies to bottom-left corner)
Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner)
Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners)
One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally
### Section: CSS MarginsThe CSS margin properties are used to create space around elements, outside of any defined borders.
Margins define the distance between an element's border and the surrounding elements.
With CSS, you have full control over the margins. CSS has properties for setting the margin for each individual side of an element (top, right, bottom, and left), and a shorthand property for setting all the margin properties in one declaration.
CSS has properties for specifying the margin for each side of an element:
margin-top - sets the top margin of an elementmargin-right - sets the right margin of an elementmargin-bottom - sets the bottom margin of an elementmargin-left - sets the left margin of an elementAll the margin properties can have the following values:
Tip: Negative values are also allowed.
To shorten the code, it is possible to specify all the margin properties in one declaration.
The margin property is a shorthand property for the following individual margin properties:
Here is how it works:
If the margin property has four values:
Use the margin shorthand property with four values:
p {
margin: 25px 50px 75px 100px;
}
If the margin property has three values:
Use the margin shorthand property with three values:
p {
margin: 25px 50px 75px;
}
If the margin property has two values:
Use the margin shorthand property with two values:
p {
margin: 25px 50px;
}
If the margin property has one value:
Use the margin shorthand property with one value:
p {
margin: 25px;
}
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
Use margin: auto:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
Margin collapse is when two margins collapse into a single margin.
Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.
Note: Margin collapse only happens with top and bottom margins! Not left and right margins!
### Section: CSS PaddingThe CSS padding properties are used to generate space around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left), and a shorthand property for setting all the padding properties in one declaration.
CSS has properties for specifying the padding for each side of an element:
padding-top - sets the top padding of an elementpadding-right - sets the right padding of an elementpadding-bottom - sets the bottom padding of an elementpadding-left - sets the left padding of an elementAll the padding properties can have the following values:
Note: Negative values are not allowed.
Set different padding for all four sides of a <div> element:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
To shorten the code, it is possible to specify all the padding properties in one declaration.
The padding property is a shorthand property for the following individual padding properties:
Here is how it works:
If the padding property has four values:
Use the padding shorthand property with four values:
div {
padding: 25px 50px 75px 100px;
}
If the padding property has three values:
Use the padding shorthand property with three values:
div {
padding: 25px 50px 75px;
}
If the padding property has two values:
Use the padding shorthand property with two values:
div {
padding: 25px 50px;
}
If the padding property has one value:
Use the padding shorthand property with one value:
div {
padding: 25px;
}
The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model).
So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.
Here, the <div> element is given a width of 300px. However, the actual width of the <div> element will be 350px (300px + 25px of left padding + 25px of right padding):
div {
width: 300px;
padding: 25px;
}
The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.
The box-sizing property can have the following values:
content-box - This is default. The width and height properties includes only the content (border and padding are not included)border-box - The width and height properties includes content, padding and borderSo, to keep the width at 300px, no matter the amount of padding, you can use the box-sizing: border-box;. This causes the element to maintain its actual width; if you increase the padding, the available content space will decrease.
Use the box-sizing property to keep the width at 300px, no matter the amount of padding:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
The height and width properties are used to set the height and width of an element.
The height and width do not include padding, borders, or margins. It sets the height and width of the area inside the padding, border, and margin of the element.
The height property sets the height of an element.
The height of an element does not include padding, borders, or margins!
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.
If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.
Note: The min-height and max-height properties override the height property.
The width property sets the width of an element.
The width of an element does not include padding, borders, or margins!
Note: The min-width and max-width properties override the width property.
auto - This is default. The browser calculates the height and widthlength - Defines the height or width in px, cm, em, etc.% - Defines the height or width in percent of the containing blockinitial - Sets the height or width to its default valueinherit - The height or width will be inherited from its parent valueThe max-width property sets the maximum allowed width of an element. This prevents the width of an element to be larger than the max-width property value.
The max-width property can have the following values:
length - Defines the maximum width in px, cm, etc.% - Defines the maximum width in percent of the containing blocknone - This is default. Means that there is no maximum widthOne problem with the width property can occur when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page. So, using max-width will improve the browser's handling on small windows.
One <div> element with a max-width of 500 pixels, and one <div> element with a width of 500 pixels:
.div1 {
max-width: 500px;
background-color: powderblue;
}
.div2 {
width: 500px;
background-color: powderblue;
}
Note: If you use both the width property and the max-width property on the same element, and the value of the width property is larger than the max-width property; the max-width property value will be used!
The min-width property defines the minimum width of an element.
If the content is smaller than the minimum width, the minimum width will be applied.
If the content is larger than the minimum width, the min-width property has no effect.
Note: This prevents the value of the width property from becoming smaller than min-width.
The max-height property defines the maximum height of an element.
If the content is larger than the maximum height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.
If the content is smaller than the maximum height, the max-height property has no effect.
Note: This prevents the value of the height property from becoming larger than max-height. The value of the max-height property overrides the height property.
The min-height property defines the minimum height of an element.
If the content is smaller than the minimum height, the minimum height will be applied.
If the content is larger than the minimum height, the min-height property has no effect.
Note: This prevents the value of the height property from becoming smaller than min-height.
Modern CSS property used to maintain proportional width & height automatically.
aspect-ratio: 16 / 9;
Meaning:
Width : Height 16 : 9
π Controls how an element is placed on the page
#### Page: Types of Position URL: https://inside.blackboxlearning.in/docs/view/css/p/types-of-position/position: static (DEFAULT)top, left, etc DO NOT WORK.box {
position: static;
}
π You rarely use this manually
position: relative.box {
position: relative;
top: 20px;
left: 30px;
}
π Moves down 20px, right 30px
position: absolute.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
π Child sticks to top-right of parent
π If no parent has position β uses body
The element stays fixed on the screen even while scrolling.
Used for:
Element behaves:
Best for:
display?π It defines how an element behaves in layout
Every HTML element is a box, and display decides:
π How that box is placed on the page
#### Page: DISPLAY TYPES URL: https://inside.blackboxlearning.in/docs/view/css/p/display-types/display: block
<div>Box 1</div>
<div>Box 2</div>
div {
display: block;
background: lightblue;
}
π Output:
[Box 1 ] [Box 2 ]
<div><p><h1> to <h6>display: inline
<span>One</span>
<span>Two</span>
span {
display: inline;
background: yellow;
}
π Output:
One Two
<span><a><strong>display: inline-block
<button>Btn 1</button>
<button>Btn 2</button>
button {
display: inline-block;
width: 100px;
height: 50px;
}
π Output:
[Btn1] [Btn2]
display: none
div {
display: none;
}
π Element disappears fully
Z-Index
z-index controls the stack order of elements.
z-index = element appears on topz-index = element stays behindThink like layers in Photoshop.
z-index only works when element has:
position: relative; position: absolute; position: fixed; position: sticky;
Without position, z-index usually won't work.
.bg{
position:absolute;
z-index:-1;
}
Used to send elements behind everything.
Sometimes z-index not working because of stacking context.
overflow controls what happens when content becomes bigger than its container.
overflow: value;
Values:
visiblehiddenscrollautooverflow: hiddenHides extra content outside the box.
overflow: scrollAlways shows scrollbar.
overflow: autoScrollbar appears ONLY when needed.
overflow-x and overflow-yControl horizontal and vertical overflow separately.
Used when text is too long.
text-overflow: ellipsisShows:
Hello this is very lo...
instead of breaking layout.
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
ALL 3 are needed.
Flexbox is a one-dimensional layout system used to arrange items in:
Best for:
When you use:
.container {
display: flex;
}
Two things are created:
CSS Flexbox is used for a one-dimensional layout, with rows OR columns.
CSS Grid is used for a two-dimensional layout, with rows AND columns.
This is the most important concept in Flexbox.
Activates flexbox.
.container {
display: flex;
}
Controls direction of items.
flex-direction: row; /* default */ flex-direction: column; flex-direction: row-reverse; flex-direction: column-reverse;
π Changes the main axis
Controls how items are placed along main axis.
justify-content: flex-start; justify-content: center; justify-content: flex-end; justify-content: space-between; justify-content: space-around; justify-content: space-evenly;
align-items: stretch; /* default */ align-items: center; align-items: flex-start; align-items: flex-end; align-items: baseline;
.container {
display: flex;
flex-wrap: nowrap;
}
.container {
flex-wrap: wrap;
}
π Items go to next line
.container {
flex-wrap: wrap-reverse;
}
.container {
display: flex;
gap: 20px;
}
π Adds spacing without margin
align-content is used to control the spacing between rows (or columns) of flex items when they wrap onto multiple lines.
π Important:
It only works when flex-wrap:wrap; is enabled AND there are multiple lines.
align-items β aligns items inside a single rowalign-content β aligns multiple rows as a groupalign-contentflex-startLines are packed at the top
.container {
align-content: flex-start;
}
flex-endLines are packed at the bottom
.container {
align-content: flex-end;
}
centerLines are centered vertically
.container {
align-content: center;
}
space-betweenEqual space between rows
.container {
align-content: space-between;
}
space-aroundEqual space around rows
.container {
align-content: space-around;
}
space-evenlyEqual spacing everywhere
.container {
align-content: space-evenly;
}
stretch (default)Rows stretch to fill container
.container {
align-content: stretch;
}
flex-flow is a shorthand property in CSS Flexbox.
π It combines two properties into one:
flex-directionflex-wrap
.container {
flex-flow: row wrap;
}
flex-growControls how much an item grows compared to others when there is extra space.
0 β item does NOT grow.item {
flex-grow: 1;
}
π All items grow equally
Example:
.item:nth-child(1) {
flex-grow: 2;
}
π First item gets double space
Example:
flex-shrinkControls how items shrink when there is not enough space
1 β items can shrink0 β item will NOT shrink.item {
flex-shrink: 0;
}
π Items keep their size β may overflow
flex-basisSets the initial size of an item before growing/shrinking
width (in row)height (in column).item {
flex-basis: 200px;
}
π Each item starts at 200px
flex-basis overrides width
.item {
width: 100px;
flex-basis: 200px;
}
π Final size = 200px
flex (MOST IMPORTANT)Shortcut for:
flex: grow shrink basis;
.item {
flex: 1 1 200px;
}
π Means:
.item {
flex: 1 1 250px;
}
π Cards:
align-selfOverrides align-items for one specific item
.item:nth-child(2) {
align-self: center;
}
π Only second item is centered
flex-startflex-endcenterstretchorder π Controls visual order of items (without changing HTML)
.item:nth-child(1) {
order: 2;
}
.item:nth-child(2) {
order: 1;
}
π Output:
π₯ Use case:
Most people forget this π
.container {
display: flex;
}
π Default behavior:
flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch;
π Important for debugging layouts
### Section: CSS GridCSS Grid is a two-dimensional layout system
β Works with rows AND columns
Unlike Flexbox (1D), Grid handles:
.container {
display: grid;
}
Two things are created:
π Invisible lines that divide the grid
π Space between lines (rows/columns)
π Single box
π Multiple cells combined
.container {
display: grid;
}
π Children automatically become grid items
π Defines columns
.container {
grid-template-columns: 200px 200px 200px;
}
π MOST IMPORTANT UNIT
.container {
grid-template-columns: 1fr 1fr 1fr;
}
π Equal distribution
.container {
grid-template-columns: 200px 1fr 2fr;
}
π Real-world layout:
.container {
grid-template-rows: 100px 200px auto;
}
π auto = content decides height
.container {
gap: 20px;
}
π Works for both rows + columns
π Cleaner than margin
column-gap & row-gapcolumn-gap: 20px; row-gap: 10px;
π Useful when you want different spacing
justify-content: center;
align-content: center;
place-content: center;
justify-items: center;
align-items: center;
place-items: center;
.item {
grid-column: 1 / 3;
}
π From line 1 β line 3
.item {
grid-column: span 2;
}
π Takes 2 columns
.item {
grid-row: 1 / 3;
}
.item {
grid-area: 1 / 1 / 3 / 3;
}
π row-start / col-start / row-end / col-end
.item {
justify-self: center;
}
π Align single item horizontally
.item {
align-self: end;
}
π Align single item vertically
.item {
place-self: center;
}
π Combines both
Responsive Grid means:
π Layout automatically adjusts based on screen size
π No need for too many media queries
π Items resize, wrap, and reorganize smoothly
Instead of saying:
grid-template-columns: 300px 300px 300px;
We use flexible + smart units
repeat() + auto-fit + minmax().container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
repeat(3, 1fr);
π Repeat columns
π Automatically fits as many columns as possible
minmax(250px, 1fr)
π Defines:
auto-fill vs auto-fitCSS Variables let you store values and reuse them anywhere.
:root{
--primary: #0f172a;
}
button{
background: var(--primary);
}
:root
:root{
--primary:red;
}
:root means global scope.
Variables become available everywhere in the website.
Think of it like global storage.
color: var(--text, black);
Meaning:
--textblackfilter applies visual effects directly to elements.
filter: value;
filter: blur(); filter: brightness(); filter: contrast(); filter: drop-shadow();
blur() Blurs the element.
img{
filter:blur(5px);
}
Image becomes blurry.
brightness() Controls light intensity.
img{
filter:brightness(150%);
}
contrast() Controls difference between dark and light.
img{
filter:contrast(200%);
}
drop-shadow() Adds shadow based on image shape.
img{
filter:drop-shadow(0 10px 20px black);
}
Modern websites almost always support dark mode now.
CSS provides built-in detection using:
@media (prefers-color-scheme: dark)
Detects user's system theme.
If system is dark mode β
CSS inside media query activates.
body{
background:white;
color:black;
}
@media(prefers-color-scheme:dark){
body{
background:black;
color:white;
}
}
A CSS transition lets a property change smoothly over time instead of instantly.
Without transition:
With transition:
transition: property duration timing-function delay;
π Example:
button {
background: blue;
transition: background 0.3s ease;
}
button:hover {
background: red;
}
Transition ONLY works when a change happens
That means:
β It will NOT run automatically like animation
#### Page: Transition Properties URL: https://inside.blackboxlearning.in/docs/view/css/p/transition-properties/Defines what to animate
transition-property: background;
π You can also use:
transition-property: all;
β οΈ Avoid all in large projects (performance issue)
Defines how long it takes
transition-duration: 0.5s;
π Units:
s β secondsms β millisecondsControls speed curve
transition-timing-function: ease;
π Advanced:
cubic-bezier(0.68, -0.55, 0.27, 1.55);
cubic-bezier() is a custom timing function that controls how animation speed changes over time.
π Instead of using:
easelinearYou define your own motion curve.
cubic-bezier(x1, y1, x2, y2)
Think of a graph:
(0,0) ----------- (1,1) β β start end
Now you control the curve between them using 2 points:
Point Meaning(x1, y1)controls start speed(x2, y2)controls end speed
cubic-bezier(0.68, -0.55, 0.27, 1.55)
Defines when it starts
transition-delay: 0.2s;
transition: all 0.3s ease 0s;
π Order:
property | duration | timing | delay
transition: background 0.3s ease, transform 0.4s ease-in;
button {
background: black;
color: white;
transition: background 0.3s ease;
}
button:hover {
background: orange;
}
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.05);
}
a {
position: relative;
}
a::after {
content: "";
position: absolute;
width: 0%;
height: 2px;
background: black;
bottom: 0;
left: 0;
transition: width 0.3s ease;
}
a:hover::after {
width: 100%;
}
Always combine transitions with:
transform: scale(); transform: translate(); transform: rotate();
π Example:
.box {
transition: transform 0.4s ease;
}
.box:hover {
transform: translateY(-10px);
}
transform: translateZ(0);
π Makes animation smoother (GPU usage)
will-change: transform;
π Browser prepares for animation
β οΈ Use only when needed
A CSS animation lets elements move/change automatically over time
(no hover, no click needed)
CSS animation has 2 main parts:
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.box {
animation: fadeIn 1s ease;
}
π This makes element fade in automatically
#### Page: @keyframes URL: https://inside.blackboxlearning.in/docs/view/css/p/keyframes/@keyframes moveBox {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
π You can also use:
from { } /* same as 0% */
to { } /* same as 100% */
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-50px); }
100% { transform: translateY(0); }
}
π This creates real animation feeling
animation-name: fadeIn;
animation-duration: 1s;
Same as transitions:
ease linear ease-in ease-out cubic-bezier()
animation-delay: 0.5s;
π How many times it runs
animation-iteration-count: 3; animation-iteration-count: infinite;
π Controls direction
normal reverse alternate alternate-reverse
π Controls final state
animation-fill-mode: forwards;
none β resetsforwards β stays at endbackwards β applies start before delayboth β bothanimation-play-state: paused;
π Used with hover:
.box:hover {
animation-play-state: paused;
}
animation: fadeIn 1s ease 0s 1 normal forwards;
π Order:
name | duration | timing | delay | iteration | direction | fill-mode
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
A media query lets you apply CSS based on device conditions
(like screen width, height, orientation, etc.)
Used for Responsive Design
@media (condition) {
/* CSS rules */
}
@media (max-width: 768px) {
body {
background: red;
}
}
π When screen width β€ 768px β background becomes red
@media (max-width: 768px) {
.box {
width: 100%;
}
}
π Applies below 768px
@media (min-width: 768px) {
.box {
width: 50%;
}
}
π Applies above 768px
Key Difference
π Common sizes:
/* Mobile */ @media (max-width: 480px) /* Tablet */ @media (max-width: 768px) /* Small Laptop */ @media (max-width: 1024px) /* Desktop */ @media (max-width: 1200px)
@media (min-width: 768px) and (max-width: 1024px) {
.box {
background: blue;
}
}
π Applies only between 768pxβ1024px
@media (max-height: 600px) {
.hero {
padding: 20px;
}
}
π Used for small screens (like laptops)
Before you jump into Three.js, you need a strong base.
π Three.js is just a tool without JavaScript and web basics, you wonβt be able to control it.
HTML is the skeleton of your webpage.
In Three.js, HTML is mainly used to:
<div> or <canvas>)<body> <canvas id="webgl"></canvas> </body>
π Three.js renders everything inside this <canvas>.
CSS controls how your page looks and behaves.
In Three.js projects, CSS helps you:
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
π Without CSS, your 3D scene may look broken or misaligned.
π This is the heart of Three.js.
Since Three.js is a JavaScript library, you MUST understand JS basics.
Store data
let speed = 5;
constCannot reassign.
const age = 20;
Store multiple values
let colors = ["red", "blue", "green"];
Store structured data (VERY important for 3D)
let cube = {
width: 1,
height: 1,
depth: 1
};
Reusable logic
function rotate() {
console.log("rotating...");
}
React to user actions
window.addEventListener("click", () => {
console.log("Clicked!");
});
Interact with HTML
const canvas = document.getElementById("webgl");
π Three.js uses ALL of these heavily.
π Example:
mesh.position.set(1, 2, 3);
Used to represent:
π Example:
let direction = { x: 1, y: 0, z: 0 };
Used to rotate objects
π Example:
mesh.rotation.y = Math.PI; // 180Β°
Every three.js project needs at least one HTML file to define the webpage, and a JavaScript file to run your three.js code.
Before coding, need to add Three.js to project.
There are two main ways:
π Best for:
A CDN (Content Delivery Network) is just a hosted file online.
You directly link Three.js into your HTML.
π No installation. No terminal. Just plug and play.
project/ βββ index.html βββ script.js
<!DOCTYPE html>
<html lang="en">
<head>
<title>Three.js CDN</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Best for:
NPM = Node Package Manager
It installs libraries locally in your project.
Download from: https://nodejs.org
Check installation:
node -v npm -v
mkdir three-project cd three-project npm init -y
npm install three
Three.js (NPM) needs a bundler like:
π Use Vite (simple and fast)
npm create vite@latest
Then:
cd your-project npm install npm run dev
import * as THREE from 'three';
Every Three.js app is built on three core components:
import * as THREE from 'three'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
import * as THREE from 'three';
π You are importing the Three.js library so you can use it.
const scene = new THREE.Scene();
π Think of scene = empty stage
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
π Think of camera = your eyes
This camera decides what part of the scene you see
75 β Field of View (how wide you see)window.innerWidth / window.innerHeight β screen ratio0.1 β near (closest visible distance)1000 β far (farthest visible distance)π‘ Simple meaning:
"Show everything between 0.1 and 1000 units from camera"
const renderer = new THREE.WebGLRenderer();
π Think of renderer = painter
renderer.setSize(window.innerWidth, window.innerHeight);
π This makes the canvas fill the screen
document.body.appendChild(renderer.domElement);
π This adds the 3D canvas into your webpage
renderer.domElement = actual <canvas> elementAdd this at the end:
renderer.render(scene, camera);
.gltf β JSON + separate textures/files.glb β Everything packed into one fileMost websites use GLB because it's easier and loads faster.
import { GLTFLoader } from
'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load(
'/models/shoe.glb',
function(gltf) {
const model = gltf.scene;
model.scale.set(1,1,1);
model.position.set(0,0,0);
scene.add(model);
},
function(xhr) {
console.log(
(xhr.loaded / xhr.total * 100)
+ '% loaded'
);
},
function(error) {
console.log(error);
}
);
Without Draco:
shoe.glb = 20 MB
With Draco:
shoe.glb = 2-5 MB
Huge performance improvement.
import { DRACOLoader }
from 'three/examples/jsm/loaders/DRACOLoader.js';
Professional websites use:
GLB + Draco + KTX2
Benefits:
Import:
import { KTX2Loader }
from 'three/examples/jsm/loaders/KTX2Loader.js';
Used for compressed textures.
You make 3 separate objects:
Sandal βββ Sole βββ Top βββ Buckle
In Blender Outliner:
Collection βββ Sole βββ Top βββ Buckle
β οΈ Don't join them (Ctrl + J).
Keep them as separate meshes.
File β Export β glTF 2.0 β Format: GLB
Export:
sandal.glb
Inside that single GLB:
Sole Mesh Top Mesh Buckle Mesh
are all stored separately.
const loader = new GLTFLoader();
loader.load('/models/sandal.glb', (gltf) => {
const sandal = gltf.scene;
scene.add(sandal);
});
At this point:
Sole Top Buckle
appear together as one sandal.
Because they are separate objects in Blender:
loader.load('/models/sandal.glb', (gltf) => {
const sandal = gltf.scene;
const sole =
sandal.getObjectByName("Sole");
const top =
sandal.getObjectByName("Top");
const buckle =
sandal.getObjectByName("Buckle");
scene.add(sandal);
});
Now Three.js can control each part independently.
let sole;
let top;
let buckle;
loader.load('/models/sandal.glb', (gltf) => {
const sandal = gltf.scene;
sole = sandal.getObjectByName("Sole");
top = sandal.getObjectByName("Top");
buckle = sandal.getObjectByName("Buckle");
scene.add(sandal);
});
function animate() {
requestAnimationFrame(animate);
if(buckle){
buckle.rotation.y += 0.02;
}
renderer.render(scene, camera);
}
animate();
Only the buckle rotates.
Most product websites use GSAP.
<script src="https://cdn.jsdelivr.net/npm/gsap@3"></script>
gsap.to(buckle.rotation,{
y:Math.PI * 2,
duration:2,
repeat:-1,
ease:"none"
});
make 3D scenes look realistic using:
Without these, models look like plastic toys.
With these, models look like real products.
#### Page: HDRI (High Dynamic Range Image) URL: https://inside.blackboxlearning.in/docs/view/three-js/p/hdri-high-dynamic-range-image/An HDRI is a 360Β° image containing lighting and color information from a real-world environment.
Unlike JPG or PNG images, HDRI stores:
HDRI helps objects understand:
Imagine holding a shiny spoon.
The spoon reflects:
A 3D object needs the same environmental information.
HDRI provides it.
Import:
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
const loader = new RGBELoader();
loader.load('studio.hdr', (texture) => {
texture.mapping =
THREE.EquirectangularReflectionMapping;
scene.environment = texture;
});
An Environment Map tells objects what exists around them.
It acts as the surrounding world for:
scene.environment = hdrTexture;
Before:
Object floating in empty space
After:
Object surrounded by a real environment
Sunglasses reflect:
Environment maps allow 3D objects to do the same.
Using HDRI as a light source instead of relying only on traditional lights.
const light = new THREE.DirectionalLight();
Only one light source.
scene.environment = hdrTexture;
Thousands of lighting values are used from the HDR image.
#### Page: Sky & Environment URL: https://inside.blackboxlearning.in/docs/view/three-js/p/sky-environment/The sky creates a believable outdoor environment.
Without a sky:
Black empty background
With a sky:
Realistic outdoor scene
import { Sky } from
'three/examples/jsm/objects/Sky.js';
const sky = new Sky();
scene.add(sky);
Controls atmospheric haze.
sky.material.uniforms.turbidity.value = 10;
Higher Value:
More foggy
Lower Value:
Clear sky
Controls sky brightness.
sky.material.uniforms.rayleigh.value = 3;
Controls sun glow.
sky.material.uniforms.mieCoefficient.value = 0.005;
Reflection Mapping is the process of using environment data to generate reflections.
Environment
β
Reflection Map
β
Material
β
Reflection
scene.environment =
hdrTexture;
const material =
new THREE.MeshPhysicalMaterial({
metalness: 1,
roughness: 0
});
The object reflects the HDR environment.
### Section: Performance OptimizationPerformance Optimization is the process of making your Three.js application run smoothly while using fewer resources.
A scene may look amazing on your computer, but if it lags on users' devices, it is a poor user experience.
Geometry defines the shape of a 3D object.
It consists of:
The GPU must process every vertex.
More vertices = More calculations = Lower FPS
β Reduce unnecessary vertices
β Reuse geometries
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({
color: "orange"
});
for(let i = 0; i < 100; i++){
const cube = new THREE.Mesh(
geometry,
material
);
cube.position.x = i * 2;
scene.add(cube);
}
Result:
Textures are often the biggest performance killer.
Use:
KTX2 Basis WebP AVIF
instead of giant PNGs.
Huge performance gain.
#### Page: Model Optimization URL: https://inside.blackboxlearning.in/docs/view/three-js/p/model-optimization/Reduce polygon count using Blender.
Compress geometry data.
Export models as:
.glb
Contains:
All in one optimized file.
β Use .glb
β Compress with Draco
β Reduce polygon count
β Remove hidden geometry
#### Page: Rendering Optimization URL: https://inside.blackboxlearning.in/docs/view/three-js/p/rendering-optimization/Rendering is the process of drawing the scene every frame.
Very expensive.
Bad:
10 shadow lights
Good:
1 shadow light
Bad:
light.shadow.mapSize.set(
4096,
4096
);
Good:
light.shadow.mapSize.set(
1024,
1024
);
Bad:
renderer.setPixelRatio(
window.devicePixelRatio
);
Some phones:
devicePixelRatio = 4
Heavy GPU load.
Good:
renderer.setPixelRatio(
Math.min(
window.devicePixelRatio,
2
)
);
Professional approach.
β Reduce shadows
β Lower shadow resolution
β Limit pixel ratio
β Disable unused effects
#### Page: Frustum Culling URL: https://inside.blackboxlearning.in/docs/view/three-js/p/frustum-culling/Three.js automatically skips rendering objects outside the camera view.
Scene contains:
1000 Trees
Camera sees:
100 Trees
Only 100 trees are rendered.
The other 900 are ignored.
Reduces:
mesh.frustumCulled = false;
Usually keep it enabled.
#### Page: InstancedMesh URL: https://inside.blackboxlearning.in/docs/view/three-js/p/instancedmesh/Suppose you create:
1000 Trees
Normally:
1000 Meshes 1000 Draw Calls
Very expensive.
A command sent to the GPU:
"Draw this object."
More draw calls = lower performance.
Allows rendering thousands of identical objects using a single draw call.
const trees =
new THREE.InstancedMesh(
geometry,
material,
1000
);
Result:
1000 Trees 1 Draw Call
Massive performance improvement.
5000 Blades
10000 Trees
3000 Rocks
1000 Buildings
β Use when geometry and material are identical
β Perfect for repeated objects
β Essential for large environments
#### Page: TOOLS URL: https://inside.blackboxlearning.in/docs/view/three-js/p/tools/A built-in browser tool used to analyze and debug performance issues in your Three.js application.
F12
or
Right Click β Inspect
// Open DevTools F12 // Go to: Performance Tab // Click: Record // Interact with scene // Stop Recording
Chrome will show:
Rendering Time JavaScript Time Memory Usage FPS
A lightweight FPS monitor that displays real-time performance information.
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js"></script>
const stats = new Stats();
document.body.appendChild(stats.dom);
function animate() {
stats.begin();
renderer.render(scene, camera);
stats.end();
requestAnimationFrame(animate);
}
animate();
FPS : 60 MS : 16 MB : 80
Imagine you want to create a sky full of stars.
Create 10,000 small spheres.
const star = new THREE.Mesh(
new THREE.SphereGeometry(),
material
);
Problem:
Create 10,000 dots (particles).
const particles = new THREE.Points(
geometry,
material
);
Three.js treats them as one object.
Result:
Every particle needs:
X position Y position Z position
Example:
Particle 1 = (1,2,3) Particle 2 = (4,1,0) Particle 3 = (-2,5,1)
These positions are stored inside a BufferGeometry.
Think of BufferGeometry as a big container that stores all particle positions.
const geometry = new THREE.BufferGeometry();
Stores coordinates.
const positions = new Float32Array(count * 3);
Why * 3?
Because every particle needs:
x y z
Example:
[ 1,2,3, 4,5,6, 7,8,9 ]
Means:
Particle 1 β x=1 y=2 z=3 Particle 2 β x=4 y=5 z=6 Particle 3 β x=7 y=8 z=9
for(let i=0;i<count*3;i++){
positions[i] =
(Math.random()-0.5)*10;
}
This gives random positions.
Particles need a material just like meshes.
const material = new THREE.PointsMaterial();
size:0.1
const material =
new THREE.PointsMaterial({
size:0.1
});
Makes particles bigger.
color:"white"
const material =
new THREE.PointsMaterial({
color:"yellow"
});
All particles become yellow.
const particles =
new THREE.Points(
geometry,
material
);
scene.add(particles);
Now particles appear in the scene.
Learning Outcome
Understand the role of HTML in web development and how websites work.
Next β 02 - Document Structure & Syntax
HTML stands for HyperText Markup Language.
From W3Schools
"HTML is the standard markup language for creating Web pages."
The three core technologies of the web each play a distinct role:
Key Insight
You can build a webpage with HTML alone. CSS and JS enhance it β but HTML is the foundation every single time.
When you type a URL in the browser, this happens:
User β types URL β Browser β HTTP Request β Web Server Web Server β HTML file β Browser β Renders page β User sees it
HTTP vs HTTPS
HTTPS is the secure version of HTTP. The "S" means the connection is encrypted. Always use HTTPS for real websites.
Recommended ProjectsProject 1 β "About Me" Static Page
Create a simple page with your name, a short bio, and a fun fact. Rules: No CSS. Pure HTML only. Practice structure, not style.
Project 2 β Web Tech Comparison Sheet
Build a 2-column HTML page showing HTML vs CSS vs JS responsibilities. Use only headings and paragraphs. No tables yet.
Next β 02 - Document Structure & Syntax
### Page: Document Structure & Syntax URL: https://inside.blackboxlearning.in/docs/view/html/p/document-structure-syntax/Learning Outcome
Create a valid HTML5 page with correct document structure from scratch.
β 01 - Introduction to Web Development | Next β 03 - Tags Elements & Attributes
Every HTML5 document must begin with <!DOCTYPE html>.
<!DOCTYPE html>
Don't Skip DOCTYPE
Missing <!DOCTYPE html> causes unpredictable rendering across browsers β especially older ones.
Every HTML page is built around 4 essential tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>
</head>
<body>
<!-- All visible content goes here -->
</body>
</html>
lang Attribute
Always addlang="en"(or your language code) on<html>. It helps screen readers pronounce content correctly and improves SEO.
<head> Tag β In DetailThe <head> contains metadata β data about the document, not in it.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="An HTML tutorial for beginners"> <meta name="author" content="Your Name"> <title>Page Title</title> <link rel="stylesheet" href="style.css"> <link rel="icon" href="favicon.ico"> <script src="app.js" defer></script> </head>
Core Syntax Rules
<p>β¦</p><br>, <img>, <hr><!-- β Correct nesting --> <p><strong>Bold text</strong> in a paragraph.</p> <!-- β Wrong nesting --> <p><strong>Bold text</p></strong>
Save this as your starting template for every new HTML file:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Page description here"> <title>Document Title</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello, World!</h1> <script src="app.js" defer></script> </body> </html>
VS Code Shortcut
In VS Code, type ! and press Tab β it auto-generates the full boilerplate instantly. (Requires Emmet, which is built-in.)Project 1 β First Webpage
Create a complete HTML page with proper DOCTYPE, head, and body. Add a title, one <h1> heading, and two <p> paragraphs about your favourite subject.
Project 2 β Metadata Explorer
Create 3 different pages each with unique <meta> description tags and titles. Open them and observe how the browser tab changes.
<!DOCTYPE html> β always first line<html> β root | <head> β metadata | <body> β visible contentcharset="UTF-8" β supports all languagesviewport meta β mobile-responsive! + Tab = full boilerplateβ 01 - Introduction to Web Development | Next β 03 - Tags Elements & Attributes
### Page: 03 - Tags Elements & Attributes URL: https://inside.blackboxlearning.in/docs/view/html/p/03-tags-elements-attributes/Learning Outcome
Understand the difference between tags, elements, and attributes β and write structured HTML using them correctly.
β 02 - Document Structure & Syntax | Next β 04 - Text Formatting & Content
These two words are often confused β they mean different things.
<!-- <p> is the opening TAG --> <!-- </p> is the closing TAG --> <!-- <p>Hello World</p> is the ELEMENT --> <p>Hello World</p>
Paired (normal) elements β have both opening and closing tags:
<h1>This is a heading</h1> <p>This is a paragraph</p> <a href="#">This is a link</a>
Self-closing / Void elements β no closing tag, no content:
<br> <!-- line break --> <hr> <!-- horizontal rule / divider --> <img src="photo.jpg" alt="A photo"> <input type="text"> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css">
HTML5 vs XHTML
In HTML5 you write <br>. In XHTML you write <br />. Both are accepted in HTML5, but <br> is more common today.
Attributes provide extra information about an element. They sit inside the opening tag only.
Syntax:
attribute="value"
<img src="cat.jpg" alt="A tabby cat" width="300" height="200">
^^^ ^^^ ^^^^^ ^^^^^^
attr attr attr attr
Attribute Rules
required, disabled, checked
<p id="intro" class="highlight" title="Welcome text"> Hello, welcome! </p> <!-- data-* attribute example --> <button data-user-id="42" data-role="admin">Edit</button>
<!-- id β unique landmark --> <section id="about">...</section> <!-- class β reusable style group --> <p class="card-text">First card</p> <p class="card-text">Second card</p> <p class="card-text">Third card</p>
Project 1 β Personal Profile Card
Build an HTML profile card using <div>, <img>, <p>, <h2>, and <a>. Use id and class attributes to label each section. No CSS β just structure.
Project 2 β Attribute Showcase Page
Create a page demonstrating at least 8 different attributes: title, style, id, class, src, alt, href, placeholder. Add a comment above each element explaining which attribute you're demonstrating.
<p> | Element = <p>content</p><br>, <img>, <input>, <hr>, <meta>id = unique (one per page) | class = reusable (many elements)attribute="value" syntaxrequired, disabled, checked β no value neededLearning Outcome
Format and structure textual content using HTML headings, paragraphs, and semantic text tags.
β 03 - Tags Elements & Attributes | Next β 05 - Links & Navigation
<h1> to <h6>HTML provides 6 levels of headings.
<h1>Main Page Title</h1> <h2>Section Heading</h2> <h3>Sub-section Heading</h3> <h4>Smaller Sub-heading</h4> <h5>Minor Heading</h5> <h6>Smallest Heading</h6>
Don't Skip Heading Levels
Don't jump from <h1> to <h4>. Use headings in logical order (h1 β h2 β h3). Skipping levels breaks accessibility and SEO.
SEO Importance
Search engines (Google) heavily use <h1> to understand what your page is about. Use one descriptive <h1> per page.
<p>This is a paragraph. Browsers automatically add space above and below.</p> <p>This paragraph has a line break inside it.<br> This is on a new line within the same paragraph.<br> And this is another line.</p> <hr> <p>This paragraph comes after the horizontal divider.</p>
Whitespace Collapsing
HTML ignores multiple spaces and newlines in source code β they all collapse to a single space. Use <br> for deliberate line breaks.
These tags carry meaning, not just visual style.
<p>This is <strong>very important</strong> text.</p> <p>This is <em>emphasised</em> text.</p> <p>Price was <del>βΉ500</del>, now <ins>βΉ300</ins>.</p> <p>Water: H<sub>2</sub>O | Area: Οr<sup>2</sup></p> <p><mark>Highlighted</mark> term in a sentence.</p> <p>Use the <code>console.log()</code> function.</p> <p><abbr title="HyperText Markup Language">HTML</abbr> is fun.</p>
<!-- This is a comment β the browser ignores it --> <!-- Multi-line comment. Great for leaving notes for yourself or your team. --> <!-- TODO: Add navigation bar here --> <h1>Page Content</h1> <!-- DISABLED: <section class="old-promo"> ... </section> -->
Don't Put Secrets in Comments
HTML comments are visible to anyone who opens DevTools (F12 β Inspector). Never put passwords, API keys, or sensitive data in HTML comments.
Project 1 β Blog Article Page
Write a fake blog article with:
<h1> title, <h2> section headings<p> paragraphs<blockquote><strong>, <em>, <mark><hr> divider between sectionsProject 2 β Science Notes Page
Create chemistry/maths notes using:
<sub> for chemical formulas: HβSOβ, COβ<sup> for powers: xΒ², rΒ³<code> for equations<pre> for aligned data tables or multi-line formulas<h1> = one per page (main title) β <h6> = smallest heading<p> = paragraph | <br> = line break | <hr> = divider<strong> = important bold | <em> = emphasis italic<sub> = subscript (HβO) | <sup> = superscript (xΒ²)<code> = inline code | <pre> = preserves whitespace<!-- ... --> | Visible in DevTools β never store secrets!β 03 - Tags Elements & Attributes | Next β 05 - Links & Navigation
Learning Outcome
Create all types of hyperlinks and build navigation between pages.
β 04 - Text Formatting & Content | Next β 06 - Lists
<a>The <a> (anchor) tag creates hyperlinks. The href attribute is the destination.
<a href="https://www.google.com">Visit Google</a>
target Values
Security with target="_blank"
Always add rel="noopener noreferrer" when using target="_blank". Without it, the opened page can access and manipulate the original tab via JavaScript.
<a href="https://example.com" target="_blank" rel="noopener noreferrer"> Open in new tab (safe) </a>
Full address including the protocol.
<a href="https://www.w3schools.com/html/">W3Schools HTML</a>
Path relative to the current file β used for linking pages on the same website.
<!-- Link to a file in the same folder --> <a href="about.html">About Us</a> <!-- Link to a file in a subfolder --> <a href="pages/contact.html">Contact</a> <!-- Link to a file one level up --> <a href="../index.html">Go Home</a>
Jump to a section on the same page using id.
<!-- Link that jumps to a section --> <a href="#about">Jump to About</a> <a href="#projects">Jump to Projects</a> <!-- The target sections β must have matching id --> <h2 id="about">About Me</h2> <h2 id="projects">My Projects</h2>
<a href="mailto:hello@example.com">Send Email</a> <!-- Pre-fill subject and body --> <a href="mailto:hello@example.com?subject=Inquiry&body=Hi there"> Email with subject </a>
<!-- Opens phone dialler on mobile --> <a href="tel:+919876543210">Call +91 98765 43210</a>
<!-- Triggers download instead of navigation --> <a href="resume.pdf" download>Download Resume</a> <!-- Custom download filename --> <a href="report-2024.pdf" download="Annual-Report.pdf">Download Report</a>
Wrap <img> inside <a> to make an image clickable.
<a href="https://example.com"> <img src="logo.png" alt="Company Logo β go to homepage" width="200"> </a>
<nav> <a href="index.html">Home</a> <a href="about.html">About</a> <a href="portfolio.html">Portfolio</a> <a href="contact.html">Contact</a> </nav>
Always Use <nav> for Navigation
Wrapping navigation links in <nav> is semantic HTML β screen readers and search engines identify it as the site's navigation section.
Good Link Habits
<a href="resume.pdf">Download my resume</a><a href="resume.pdf">Click here</a>alt text when an image is a linkrel="noopener noreferrer" with target="_blank"Project 1 β Multi-page Website
Build 3 HTML pages (Home, About, Contact) linked to each other using a <nav> bar. Each page should have a consistent navigation at the top.
Project 2 β Resource Hub Page
Create a categorised links page β educational websites, YouTube channels, tools. Use anchor tags with target="_blank" and rel="noopener noreferrer". Group links under <h2> headings and use fragment links in a table of contents at the top.
<a href="...">text</a> = hyperlinktarget="_blank" = opens in new tab (add rel="noopener noreferrer")href="#id" = jump to section on same pagehref="mailto:..." = email link | href="tel:..." = phone linkdownload attribute = triggers file downloadβ 04 - Text Formatting & Content | Next β 06 - Lists
Learning Outcome
Display structured data using all three types of HTML lists, including nested lists.
β 05 - Links & Navigation | Next β 07 - Semantic HTML5
<ul>Used when order doesn't matter β items are equal in rank.
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>
Renders as:
<ul style="list-style-type: square;"> <!-- β square bullets --> <ul style="list-style-type: circle;"> <!-- β circle bullets --> <ul style="list-style-type: none;"> <!-- no bullets (for nav menus) -->
<ol>Used when sequence matters β steps, rankings, instructions.
<ol> <li>Open VS Code</li> <li>Create a new file β save as index.html</li> <li>Type your HTML</li> <li>Open with Live Server</li> </ol>
type Attribute β Numbering Style
start Attribute β Starting Number<!-- Start numbering from 5 --> <ol start="5"> <li>Fifth item</li> <li>Sixth item</li> </ol> <!-- Start from C with uppercase letters --> <ol type="A" start="3"> <li>Option C</li> <li>Option D</li> </ol> <!-- Reversed list --> <ol reversed> <li>Gold medal</li> <li>Silver medal</li> <li>Bronze medal</li> </ol>
<dl>Used for termβdefinition pairs β glossaries, FAQs, dictionaries.
<dl> <dt>HTML</dt> <dd>HyperText Markup Language β the structure of web pages.</dd> <dt>CSS</dt> <dd>Cascading Style Sheets β controls styling and layout.</dd> <dt>JavaScript</dt> <dd>A programming language that adds interactivity.</dd> </dl>
Lists can be nested inside each other. Indent clearly for readability.
<ul>
<li>Frontend Development
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Flexbox</li>
<li>Grid</li>
</ul>
</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend Development
<ul>
<li>Node.js</li>
<li>Python</li>
</ul>
</li>
</ul>
Mixed nesting (ol inside ul):
<ul>
<li>Step 1: Setup
<ol>
<li>Install VS Code</li>
<li>Install Live Server extension</li>
</ol>
</li>
<li>Step 2: Create Files</li>
</ul>
Nesting Rule
The nested <ul> or <ol> goes inside the <li> β not after it. β
<li>Item <ul>...</ul></li> β <li>Item</li><ul>...</ul>
Project 1 β Recipe Page
Build a complete cooking recipe page with:
<ol> for cooking steps (order matters)<ul> for ingredients<dl> for nutrition facts (term = nutrient name, dd = value)Project 2 β Top 10 List Page
Create a "Top 10 Movies / Books / Games" page using:
<ol> for the ranked list<ul> inside each <li> for details (release year, genre, director)<ul> = unordered (bullets) β for items without sequence<ol> = ordered (numbers) β for steps, rankings<li> = list item β goes inside <ul> or <ol><dl> = description list | <dt> = term | <dd> = definition<ul>/<ol> inside the <li>, not after itol type="A" = A,B,C | type="I" = Roman numerals | start="5" = begin at 5β 05 - Links & Navigation | Next β 07 - Semantic HTML5
### Page: 07 - Semantic HTML5 URL: https://inside.blackboxlearning.in/docs/view/html/p/07-semantic-html5/Learning Outcome
Build meaningful, SEO-friendly page layouts using HTML5 semantic elements instead of generic <div> soup.
β 06 - Lists | Next β 08 - Images & Media
Semantic HTML uses tags that describe their meaning and purpose, not just their visual appearance.
4 Key Benefits
<nav>, <main>) and announce element roles to blind users<!DOCTYPE html>
<html lang="en">
<body>
<header>
<!-- Site logo, name, main navigation -->
</header>
<nav>
<!-- Primary navigation links -->
</nav>
<main>
<!-- The unique main content of this page (one per page) -->
<section>
<!-- A themed grouping of content -->
</section>
<article>
<!-- Self-contained content: blog post, news article -->
</article>
<aside>
<!-- Sidebar: related links, ads, author bio -->
</aside>
</main>
<footer>
<!-- Copyright, social links, contact info -->
</footer>
</body>
</html>
<header>Top of the page or a section. Contains logo, site title, or primary nav.
<header> <h1>My Portfolio</h1> <nav>...</nav> </header>
<nav>Navigation links β internal or external. Should contain <a> tags or a <ul> of links.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<main>The dominant content of the <body>. Use only once per page. Skip links target this.
<main id="main-content"> <!-- Everything important goes here --> </main>
<section>A thematic grouping of content with its own heading. Use when content forms a distinct part of the page.
<section> <h2>About Us</h2> <p>We are a design studio...</p> </section>
<article>Self-contained, independently distributable content. Would still make sense if copied elsewhere.
<article> <h2>How to Learn HTML in 4 Weeks</h2> <time datetime="2025-04-24">April 24, 2025</time> <p>Start with the basics...</p> </article>
<aside>Content tangentially related to the main content β sidebars, pull quotes, ad panels.
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">CSS Basics</a></li>
</ul>
</aside>
<footer>Bottom of page or section β copyright, links, contact info.
<footer> <p>© 2025 My Website. All rights reserved.</p> <a href="/privacy">Privacy Policy</a> </footer>
<figure> and <figcaption>Used for images, diagrams, code blocks with a caption.
<figure> <img src="chart.png" alt="Sales grew 40% in Q4"> <figcaption>Figure 1: Q4 2024 Sales Growth</figcaption> </figure>
<time>Machine-readable date/time. datetime attribute provides the standardised format.
<p>Published on <time datetime="2025-04-24">April 24, 2025</time></p> <p>Class starts at <time datetime="09:00">9:00 AM</time></p>
<address>Contact information for the nearest <article> or <body>.
<address> Written by <a href="mailto:arjun@example.com">Arjun Kumar</a><br> Trivandrum, Kerala, India </address>
<article> vs <section>The "Would it make sense alone?" Test
<article> β remove it from the page and it still makes sense? Use <article>. (A blog post, a news story, a product review)<section> β it's part of a whole, needs context? Use <section>. (An "About Us" section, a "Skills" section of a portfolio)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>News Blog</title>
</head>
<body>
<header>
<h1>The Daily HTML</h1>
<nav>
<a href="/">Home</a>
<a href="/tech">Tech</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<section id="featured">
<h2>Featured Articles</h2>
<article>
<h3>HTML5 Turns 10</h3>
<time datetime="2025-04-24">April 24, 2025</time>
<p>A decade of semantic web...</p>
</article>
<article>
<h3>Why Accessibility Matters</h3>
<time datetime="2025-04-20">April 20, 2025</time>
<p>Over 1 billion people have disabilities...</p>
</article>
</section>
<aside>
<h2>Trending Topics</h2>
<ul>
<li><a href="#">CSS Grid</a></li>
<li><a href="#">Web Performance</a></li>
</ul>
</aside>
</main>
<footer>
<address>
Contact: <a href="mailto:editor@dailyhtml.com">editor@dailyhtml.com</a>
</address>
<p>© 2025 The Daily HTML</p>
</footer>
</body>
</html>
Project 1 β News Website Layout
Build a semantic news homepage with:
<header> with site title + <nav><main> containing 3 <article> cards<aside> with trending topics<footer> with copyright and contactProject 2 β Div-to-Semantic Refactor
Take this div-heavy code and rewrite it semantically:
<div class="header"><div class="logo">...</div></div> <div class="nav">...</div> <div class="content"><div class="post">...</div></div> <div class="sidebar">...</div> <div class="footer">...</div>
<header> = top | <nav> = navigation | <main> = main content (once per page)<section> = themed group | <article> = standalone content | <aside> = sidebar<footer> = bottom | <figure> + <figcaption> = image with caption<time datetime="..."> = machine-readable date<article>, no = <section>Learning Outcome
Add and control images, audio, and video in web pages using HTML5 media elements.
β 07 - Semantic HTML5 | Next β 09 - Tables
<img> Tag<img> embeds an image. It is a self-closing void element β no closing tag.
<img src="photo.jpg" alt="A sunset over the mountains">
alt is NOT Optional
alt text is read by screen readers for blind users, shown when image fails to load, and indexed by search engines. An empty alt="" is acceptable only for purely decorative images.
<img src="photo.jpg" alt="Students learning HTML in a classroom" width="600" height="400" loading="lazy" title="HTML Workshop 2025" >
Always Set width and height
Setting width and height in HTML (or CSS) prevents Cumulative Layout Shift (CLS) β where content jumps around while images load. Google PageSpeed penalises CLS.
<!-- Same folder --> <img src="photo.jpg" alt="..."> <!-- Subfolder --> <img src="images/photo.jpg" alt="..."> <!-- Go up one level --> <img src="../images/photo.jpg" alt="..."> <!-- Absolute URL (external image) --> <img src="https://example.com/images/photo.jpg" alt="...">
Use WebP for Performance
Convert your images to WebP before uploading. Same visual quality, 25β35% smaller file size than JPEG.
<figure> and <figcaption>Wrap images with captions in <figure> for semantic HTML.
<figure> <img src="cat.jpg" alt="An orange tabby cat sitting on a windowsill"> <figcaption>Whiskers enjoying the afternoon sun.</figcaption> </figure>
<figure> is Not Just for Images
<figure> can wrap code blocks, charts, diagrams, or any content that has a caption.
srcsetProvide multiple image sizes β browser picks the best one for the screen.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="Responsive landscape photo"
>
<audio><audio controls> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio>
<!-- Autoplay only works with muted in most browsers --> <audio autoplay muted loop> <source src="background.mp3" type="audio/mpeg"> </audio>
<video><video controls width="640" height="360" poster="thumbnail.jpg"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video element. </video>
<source> TagsBrowsers don't all support the same formats. Provide fallbacks:
<video controls> <source src="clip.mp4" type="video/mp4"> <!-- Chrome, Edge, Safari --> <source src="clip.webm" type="video/webm"> <!-- Firefox fallback --> <!-- Text shown if browser supports neither --> Your browser does not support HTML5 video. </video>
Use <iframe> to embed YouTube or Vimeo videos:
<!-- YouTube embed --> <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media" allowfullscreen> </iframe>
Project 1 β Photo Gallery Page
Create a gallery with 6+ images using <figure> and <figcaption> for each.
alt text for every imageloading="lazy" on all images<section> tagsProject 2 β Media Showcase Page
Build a page featuring:
<audio> player with controls<video> player with a poster image<iframe><figure> elements with captions<img src="..." alt="..."> = image (void element, no closing tag)alt is required β empty alt="" only for decorative imagesloading="lazy" = performance boost for below-fold images<audio controls> + <source> = audio player<video controls poster="..."> + <source> = video player<source> formats as browser fallbacksβ 07 - Semantic HTML5 | Next β 09 - Tables
### Page: 09 - Tables URL: https://inside.blackboxlearning.in/docs/view/html/p/09-tables/Learning Outcome
Display structured data in tables, including merged cells with colspan and rowspan.
β 08 - Images & Media | Next β 10 - Forms & User Input
Use Tables For
Don't Use Tables For
<table>
<thead>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arjun</td>
<td>HTML</td>
<td>95</td>
</tr>
<tr>
<td>Priya</td>
<td>CSS</td>
<td>88</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Class Average</td>
<td>91.5</td>
</tr>
</tfoot>
</table>
<thead>, <tbody>, <tfoot> are Optional but Recommended
They make the table semantically meaningful and allow CSS to style header/body/footer separately. Screen readers also use them to describe the table structure.
<table> <caption>Student Results β Term 2, 2025</caption> <thead>...</thead> <tbody>...</tbody> </table>
colspan β Merge Horizontally (across columns)<table border="1">
<tr>
<th colspan="3">Student Full Information</th>
<!-- This header spans 3 columns -->
</tr>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Age</td>
</tr>
</table>
rowspan β Merge Vertically (across rows)<table border="1">
<tr>
<td rowspan="2">Monday</td> <!-- spans 2 rows -->
<td>9:00 AM β HTML Class</td>
</tr>
<tr>
<!-- No <td> for "Monday" column β rowspan covers it -->
<td>10:00 AM β CSS Class</td>
</tr>
</table>
Remove the Extra Cell!
When you use rowspan="2", the cell fills 2 rows β remove the <td> from the second row for that column. If you don't, the table layout breaks.
<table border="1">
<caption>Weekly Timetable</caption>
<thead>
<tr>
<th>Day</th>
<th>Period 1</th>
<th>Period 2</th>
<th>Period 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>HTML</td>
<td colspan="2">Lab Session</td> <!-- spans 2 periods -->
</tr>
<tr>
<td rowspan="2">Tuesday</td> <!-- spans Tuesday + Wednesday -->
<td>CSS</td>
<td>JavaScript</td>
<td>Project Work</td>
</tr>
<tr>
<!-- rowspan covers Tuesday cell -->
<td>Review</td>
<td>Quiz</td>
<td>CSS Advanced</td>
</tr>
</tbody>
</table>
<!-- scope attribute: tells screen readers what the header applies to -->
<thead>
<tr>
<th scope="col">Name</th> <!-- column header -->
<th scope="col">Score</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Arjun</th> <!-- row header -->
<td>95</td>
</tr>
</tbody>
<table border="1" cellpadding="8" cellspacing="0">
<caption>Class 10 β Final Examination Results 2025</caption>
<thead>
<tr>
<th scope="col">Student</th>
<th scope="col">Maths</th>
<th scope="col">Science</th>
<th scope="col">English</th>
<th scope="col">Total</th>
<th scope="col">Grade</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Arjun Kumar</th>
<td>92</td>
<td>88</td>
<td>85</td>
<td>265</td>
<td>A+</td>
</tr>
<tr>
<th scope="row">Priya Nair</th>
<td>78</td>
<td>82</td>
<td>90</td>
<td>250</td>
<td>A</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Class Average</td>
<td>257.5</td>
<td>A</td>
</tr>
</tfoot>
</table>
Project 1 β Student Mark Sheet
Create a marks table for 5 students across 5 subjects.
<thead>, <tbody>, <tfoot>colspan for the totals footer row<caption> titleProject 2 β Weekly School Timetable
Build a full school timetable (MonβFri, 8 periods/day).
rowspan for lunch break spanning all dayscolspan for lab sessions spanning 2 periods<th scope="col"> for day headers and <th scope="row"> for period numbers<table> β <thead> + <tbody> + <tfoot> β <tr> β <th> / <td><th> = header cell (bold, centered) | <td> = data cellcolspan="2" = cell spans 2 columns (horizontal merge)rowspan="2" = cell spans 2 rows (vertical merge) β remove the extra <td>!<caption> = table titleβ 08 - Images & Media | Next β 10 - Forms & User Input
### Page: 10 - Forms & User Input URL: https://inside.blackboxlearning.in/docs/view/html/p/10-forms-user-input/Learning Outcome
Create interactive forms with various input types, labels, and HTML5 validation.
β 09 - Tables | Next β 11 - Layout Basics
<form> Tag<form> is the container for all input elements. It defines where and how the data is sent.
<form action="/submit" method="POST"> <!-- form elements go here --> <button type="submit">Submit</button> </form>
Always Use POST for Sensitive Data
Passwords, emails, and personal data must use method="POST". With GET, data appears in the URL and browser history.
<input> Tag β All Types<input> is a void (self-closing) element. The type attribute determines its behaviour.
<!-- Text types --> <input type="text"> <input type="email"> <input type="password"> <input type="number"> <input type="tel"> <input type="url"> <input type="search"> <!-- Date/Time types --> <input type="date"> <input type="time"> <input type="datetime-local"> <input type="month"> <input type="week"> <!-- Selection types --> <input type="checkbox"> <input type="radio"> <input type="range"> <input type="color"> <!-- File & Hidden --> <input type="file"> <input type="hidden"> <!-- Button types --> <input type="submit"> <input type="reset"> <input type="button">
<label> β Accessible Form LabelsAlways link labels to inputs using for + id. Clicking the label focuses the input.
<!-- Method 1: for/id pairing (recommended) --> <label for="username">Username:</label> <input type="text" id="username" name="username"> <!-- Method 2: wrapping (implicit label) --> <label> Username: <input type="text" name="username"> </label>
Why Labels Matter
<!-- Radio: choose ONE from a group β same name attribute --> <p>Gender:</p> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label> <!-- Checkbox: choose MULTIPLE β can be independently ticked --> <p>Skills:</p> <input type="checkbox" id="html" name="skills" value="html" checked> <label for="html">HTML</label> <input type="checkbox" id="css" name="skills" value="css"> <label for="css">CSS</label> <input type="checkbox" id="js" name="skills" value="js"> <label for="js">JavaScript</label>
Radio vs Checkbox
name. Selecting one deselects others.<!-- Multi-line text input -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="40"
placeholder="Write your message here..."
maxlength="500"></textarea>
<!-- Dropdown select -->
<label for="course">Course:</label>
<select id="course" name="course">
<option value="">-- Choose a course --</option>
<optgroup label="Web Development">
<option value="html">HTML & CSS</option>
<option value="js">JavaScript</option>
<option value="react" selected>React</option>
</optgroup>
<optgroup label="Backend">
<option value="node">Node.js</option>
<option value="python">Python</option>
</optgroup>
</select>
<!-- Multi-select (hold Ctrl/Cmd to pick multiple) -->
<select name="languages" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="python">Python</option>
</select>
<fieldset> and <legend><form>
<fieldset>
<legend>Personal Information</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" required>
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname" required>
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" required>
</fieldset>
</form>
Built-in validation β no JavaScript needed.
<form>
<!-- Required field -->
<input type="text" name="name" required placeholder="Full name">
<!-- Email format validation -->
<input type="email" name="email" required placeholder="example@email.com">
<!-- Number range -->
<input type="number" name="age" min="18" max="100" required>
<!-- Text length -->
<input type="text" name="username" minlength="3" maxlength="20" required>
<!-- Pattern (regex) validation -->
<input type="text" name="postcode"
pattern="[0-9]{6}"
title="6-digit PIN code"
placeholder="PIN Code">
<!-- Strong password (uppercase + lowercase + digit + 8 chars) -->
<input type="password" name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must be 8+ chars with uppercase, lowercase, and number"
required>
<button type="submit">Register</button>
<button type="reset">Clear</button>
</form>
<form action="/register" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>Personal Details</legend>
<label for="name">Full Name *</label>
<input type="text" id="name" name="name" required
minlength="3" maxlength="50" placeholder="Arjun Kumar">
<label for="email">Email *</label>
<input type="email" id="email" name="email" required placeholder="arjun@example.com">
<label for="dob">Date of Birth *</label>
<input type="date" id="dob" name="dob" required max="2007-12-31">
<p>Gender *</p>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</fieldset>
<fieldset>
<legend>Account Setup</legend>
<label for="password">Password *</label>
<input type="password" id="password" name="password"
required minlength="8"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="8+ chars with uppercase, lowercase, and number">
<label for="photo">Profile Photo</label>
<input type="file" id="photo" name="photo" accept="image/*">
</fieldset>
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to the <a href="/terms">Terms & Conditions</a></label>
<button type="submit">Create Account</button>
<button type="reset">Reset Form</button>
</form>
Project 1 β Student Registration Form
Build a complete student registration form with:
<input type="date">)<select> with <optgroup>)<input type="file">)<fieldset> to group sectionsProject 2 β Job Application Form
Create a job application with sections grouped by <fieldset>:
<textarea>)<input type="file" accept=".pdf">)<form action="..." method="POST"> = container, defines submit destinationGET = data in URL (search) | POST = hidden (login, register)<input type="..."> = void element, type determines behaviourname attribute = required for form submission (the data key)<label for="id"> = always link labels to inputs (accessibility!)name, pick one | Checkbox = independent, pick many<select> + <option> + <optgroup> = dropdown<textarea> = multi-line text<fieldset> + <legend> = group related fieldsrequired, min, max, pattern, minlength = HTML5 validationβ 09 - Tables | Next β 11 - Layout Basics
Learning Outcome
Understand block vs inline elements, and use <div> and <span> to structure and style content.
β 10 - Forms & User Input | Next β 12 - CSS JS Integration & Accessibility
This is one of the most fundamental concepts in HTML layout.
width, height, margin, padding applied<div>Block 1</div> <div>Block 2</div> <div>Block 3</div> <!-- Each starts on its own line -->
Common block elements: <div>, <p>, <h1>β<h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <blockquote>, <pre>, <hr>
<p> I love <strong>HTML</strong> and <em>CSS</em> and <a href="#">web development</a>. </p> <!-- All flow within the same paragraph line -->
Common inline elements: <span>, <a>, <strong>, <em>, <mark>, <code>, <img>, <input>, <label>, <button>, <abbr>, <sub>, <sup>, <br>
Behaves inline (no line break) but accepts width and height. <img> and <input> are naturally inline-block. You can make any element inline-block with CSS: display: inline-block;
<div> β The Block Container<div> (division) is a generic block-level container with no visual style and no semantic meaning on its own.
Use <div> when:
<!-- Grouping for CSS styling -->
<div class="card">
<div class="card-header">
<h2>Product Name</h2>
<span class="badge">New</span>
</div>
<div class="card-body">
<p>Product description here.</p>
<p class="price">βΉ999</p>
</div>
<div class="card-footer">
<button>Add to Cart</button>
</div>
</div>
Semantic First, div Second
Before reaching for <div>, ask: "Is there a semantic tag for this?"
<nav><article><section><header> Only use <div> when none of the above fit.<span> β The Inline Container<span> is a generic inline element β it wraps part of text within a line without breaking flow.
Use <span> when:
<strong>, <em>, <mark>)<!-- Style part of a sentence --> <p> The price is <span style="color: red; font-weight: bold;">βΉ499</span> only. </p> <!-- Target text with a class for JS --> <p> Your score: <span class="score" id="score-value">87</span>/100 </p> <!-- Multiple uses in one paragraph --> <p> Temperature: <span class="temp hot">42Β°C</span> in <span class="city">Chennai</span> today. </p>
<div> vs <span> β Side by Side<!-- div: wraps a BLOCK of content --> <div class="alert-box"> <strong>Warning:</strong> This action cannot be undone. </div> <!-- span: wraps a WORD or PHRASE within text --> <p> This action <span class="danger-text">cannot be undone</span>. </p>
Block elements can contain both block and inline elements. Inline elements should only contain inline elements β not block elements.
<!-- β Correct: block contains block and inline --> <div> <h2>Title</h2> <p>Some <strong>bold</strong> text.</p> </div> <!-- β Correct: inline contains inline --> <p>Text with <a href="#"><strong>bold link</strong></a>.</p> <!-- β Wrong: inline element containing block element --> <span> <div>This is invalid HTML</div> </span> <!-- β Wrong: inline inside inline that can't nest --> <a href="#">Click <a href="#">nested link</a></a>
Project 1 β Product Card Layout
Create 3 product cards using <div> containers. Each card should contain:
<img> for product image<h3> product name<p> with <span class="price"> for price<button> Buy Now All 3 cards side by side using display: flex in CSS.Project 2 β Magazine-style Layout
Build a two-column page layout using <div> containers:
<div> (width 70%) for main article<div> (width 30%) for sidebar<span> to highlight key terms in the article text<div>, <p>, <h1>) β stacks vertically<span>, <a>, <strong>) β sits side by side<img>, <input>)<div> = block container β group elements for layout/styling<span> = inline container β style part of text without line break<header>, <nav>, <section>) over <div> when possibleβ 10 - Forms & User Input | Next β 12 - CSS JS Integration & Accessibility
### Page: 12 - CSS JS Integration & Accessibility URL: https://inside.blackboxlearning.in/docs/view/html/p/12-css-js-integration-accessibility/Learning Outcome
Connect HTML with CSS and JavaScript, and build accessible web pages using ARIA and best practices.
β 11 - Layout Basics | Back to β 00 - HTML Tutorial MOC
<p style="color: blue; font-size: 18px; font-weight: bold;">Hello</p>
<style> tag)<head>
<style>
p { color: blue; }
h1 { font-size: 2rem; }
.highlight { background: yellow; }
</style>
</head>
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* styles.css */
p { color: blue; }
h1 { font-size: 2rem; }
Which Method to Use?
<style><button onclick="alert('Hello!')">Click</button>
<script> tag)<body>
<h1>Hello</h1>
<!-- JS at the bottom of body β HTML loads first -->
<script>
document.querySelector('h1').style.color = 'red';
</script>
</body>
<head> <!-- defer: loads JS after HTML is parsed (recommended) --> <script src="app.js" defer></script> </head>
defer vs async defer async When downloaded Parallel with HTML Parallel with HTML When executed After HTML parsed As soon as downloaded Order preserved β
Yes β No Use for Most scripts Independent scripts (analytics) Always Use defer
<script src="app.js" defer> is the modern best practice. It downloads in the background and runs after HTML is ready β no blocking, no timing issues.
Accessibility (a11y) means making your website usable by everyone β including people with visual, motor, or cognitive disabilities.
Why Accessibility Matters
<!-- β Descriptive alt text --> <img src="chart.png" alt="Bar chart showing 40% sales growth in Q4 2024"> <!-- β Decorative image β empty alt (screen reader skips it) --> <img src="divider-line.svg" alt=""> <!-- β Useless alt text --> <img src="chart.png" alt="image"> <img src="chart.png" alt="chart.png">
<!-- β Accessible --> <label for="email">Email Address</label> <input type="email" id="email" name="email"> <!-- β Not accessible β no label --> <input type="email" name="email" placeholder="Email">
<!-- β
Correct hierarchy -->
<h1>Main Title (once per page)</h1>
<h2>Section</h2>
<h3>Sub-section</h3>
<h3>Another Sub-section</h3>
<h2>Another Section</h2>
<!-- β Skipping levels -->
<h1>Main Title</h1>
<h4>Why did we skip h2 and h3?</h4>
All interactive elements must be usable with Tab key only β no mouse required.
<!-- tabindex="0" makes non-interactive elements focusable --> <div tabindex="0" role="button">Custom Button</div> <!-- tabindex="-1" removes from tab order (JS controlled) --> <div tabindex="-1">Only focusable via JS</div> <!-- Skip navigation link (first thing on page) --> <a href="#main-content" class="skip-link">Skip to main content</a> ... <main id="main-content">...</main>
ARIA = Accessible Rich Internet Applications. Adds accessibility semantics to HTML.
<!-- aria-label: text label for screen readers (no visible text) --> <button aria-label="Close dialog"> <svg><!-- X icon --></svg> </button> <!-- aria-hidden: hide decorative elements from screen readers --> <span aria-hidden="true">β β β β β</span> <span class="sr-only">4 out of 5 stars</span> <!-- aria-expanded: toggle state for accordions/dropdowns --> <button aria-expanded="false" aria-controls="menu"> Menu </button> <ul id="menu" hidden>...</ul> <!-- aria-live: announce dynamic content changes --> <div aria-live="polite" id="status"> <!-- Changes here are announced by screen readers --> </div> <!-- role: define element purpose --> <div role="alert">Form submitted successfully!</div> <div role="navigation">...</div> <div role="search">...</div>
First Rule of ARIA
"No ARIA is better than bad ARIA." If you can use a native HTML element instead, do that. <button> is better than <div role="button">. <nav> is better than <div role="navigation">.
Sometimes you need text for screen readers but not visible on screen.
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
}
</style>
<!-- Visible icon, hidden text for screen reader -->
<button>
<svg aria-hidden="true"><!-- cart icon --></svg>
<span class="sr-only">Add to cart</span>
</button>
<!-- Always ensure visible focus ring -->
<style>
/* Never do this β removes accessibility -->
/* :focus { outline: none; } */
/* Do this instead β custom but visible focus -->
:focus {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
</style>
WCAG Contrast Ratios
Before You Ship a Page
<!DOCTYPE html> on line 1lang="en" on <html>charset="UTF-8" in <head>viewport meta tag in <head><title> tag<h1> per page, logical heading order<img> has an alt attribute<input> has a <label><link>, external JS in <script defer><header>, <main>, <nav>, etc.)Project 1 β Styled Portfolio with JavaScript
Link an external style.css and app.js to your portfolio page.
document.body.classList.toggle()aria-label and aria-pressed attributesProject 2 β Accessible Contact Form
Build a fully accessible contact form:
<label> linked by for/idaria-labelrequired on required fieldsaria-live="polite" div that gets filled with "Form submitted!" via JSstyle="" | Internal β <style> in head | External β <link> (best)<script src="app.js" defer> in <head> (preferred) or before </body>defer = runs after HTML parses | async = runs as soon as downloadedalt="" on decorative images | descriptive alt on meaningful images<input> needs a <label for="..."> matching the input's idaria-label, aria-hidden, aria-expanded, role, aria-live:focus outline β keyboard users rely on itβ 11 - Layout Basics | Back to β 00 - HTML Tutorial MOC
### Page: HTML for SEO - introduction URL: https://inside.blackboxlearning.in/docs/view/html/p/html-for-seo-introduction/Search engines like Google read a page's HTML to understand what the page is about, how it is organized, and which content is most important.
Think of it like this:
Without proper HTML, search engines may not understand your content correctly, even if the content is excellent.
When Google visits a website, it does not "see" the page like humans do first. It reads the HTML code.
From the HTML, Google learns:
Almost every important SEO signal starts from HTML.
Example:
Imagine you create a webpage.
<!DOCTYPE html> <html lang="en"> <head> <title>Best Python Course for Beginners</title> <meta name="description" content="Learn Python from scratch with practical examples."> </head> <body> <h1>Python Course</h1> <p>Complete Python tutorial.</p> <img src="python-course.jpg" alt="Python Programming Course"> </body> </html>
Google opens your webpage and reads the code
Google now understands ( evaluate the page ):
Google indexes the page
Imagine a user searches:
"Best Python Course
Google searches its index
Google ranks the most relevant pages
Your webpage may appear in the SERP
SEO-related HTML can be divided into two main parts.
1. Inside the <head> section
This contains information about the page.
Users usually don't see most of it.
Search engines read it carefully.
2. Inside the <body> section
This is the visible content.
Google also analyzes this heavily.
### Page: SEO Elements Inside the Head Section URL: https://inside.blackboxlearning.in/docs/view/html/p/seo-elements-inside-the-head-section/The <head>section contains information about the webpage. Most of it is not visible to users, but browsers and search engines read it to understand the page.
<head> <!-- SEO elements go here --> </head>
The title is one of the strongest on-page SEO signals. tells Google and the browser the name of your webpage
<head> <title>Python Course for Beginners</title> </head>
A short summary of the page.
Google often shows this below the page title in search results.
<meta name="description" content="Learn Python programming from basics to advanced with practical projects.">
<meta> = Meta tag.
name="description" = Specifies this is a description.
content="..." = The description text.
Defines how text characters are displayed.
Without it, special characters may appear incorrectly.
Instead of βΉ500 the browser might display Γ’βΒΉ500
<meta charset="UTF-8">
<meta> = Meta tag.
charset = Character encoding.
"UTF-8" = Supports most languages and symbols.
Makes the page responsive on mobile devices.
Google uses mobile-first indexing
Without this tag, a page may appear zoomed out or difficult to read on phones.
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
name="viewport" = Viewport settings.
width=device-width = Page width matches the device.
initial-scale=1.0 = Default zoom level.
This tells search engines what they are allowed to do.
<head> <meta name="robots" content="index, follow"> </head>
name="robots" = Robots instructions.
content="index, follow" = Rules for search engines.
Common values
Sometimes the same content exists on multiple URLs.
Example
example.com/course example.com/course?sort=new example.com/course?ref=facebook
Google may treat these as duplicate pages.
Canonical tells Google which version is the original.
<head> <link rel="canonical" href="https://example.com/course"> </head>
This prevents duplicate content problems.
This tells browsers and search engines the language of the page.
Helps Google serve the page to the right audience.
<html lang="en"> //English <html lang="ml"> // Malayalam <html lang="hi"> //Hindi
When someone shares the page on platforms like Facebook, LinkedIn, or WhatsApp, these tags control the preview.
<meta property="og:title" content="Python Course"> <meta property="og:description" content="Learn Python easily."> <meta property="og:image" content="python.jpg">
property = Open Graph property.
og:title = Shared page title.
og:description = Shared description.
og:image = Preview image.
content = Value shown on social media.
Schema is additional information
Google can use this to create rich results, such as star ratings, FAQs, courses, products, recipes, events, and more.
It is not visible to website visitors, but search engines like Google can read it.
usually placed inside the <head> section, but it can also be added inside the <body>
You can use Schema Generator tools.
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"Course",
"name":"Python Course"
}
</script>
Normally, the <script> tag is used for JavaScript.
type="application/ld+json" tells the browser and Google "This is Structured Data (JSON-LD), not JavaScript.
@context β Uses the Schema.org standard.
@type β Type of content - type of shema (Course, Product, Person, etc.).
name β Name of the content.
description β Short description.
Appears in browser tabs.
Appears in bookmarks.
Improves website branding.
Does not directly improve SEO rankings
The favicon is usually saved as an ico file.
<link rel="icon" href="favicon.ico">
icon = Specifies the file is the website icon.
### Page: SEO Elements Inside the Body URL: https://inside.blackboxlearning.in/docs/view/html/p/seo-elements-inside-the-body/The <body> contains all the visible content of a webpage. This is the part that users see and Google reads to understand the page's content.
<body> <!-- Visible content goes here --> </body>
Write clear, useful content that answers user questions.
<body> <p>Python is a simple programming language.</p> </body>
alt="image" //Bad alt="Student learning Python programming" //Good IMG12345.jpg //bad python-programming-course.jpg //good
Click Here //bad Download Python Notes //good
Instead of using only <div> elements, HTML5 introduced semantic elements that describe the purpose of content.
Google understands the structure of the page much better.
<head>
-------
</head>
<body>
<main> //tells Google this is the primary content.
<header> ///heading part or Website Header
----------
</header>
<nav> //contains navigation links.
-----------
</nav>
<aside> //side bar
-----------
</aside>
<section>
----------
</section>
<article> //blog or news
----------
</article>
<footer> //footer section
----------
</footer>
</main>
</body>
---
## Topic: JavaScript
URL: https://inside.blackboxlearning.in/docs/view/javascript/
JavaScript is a high-level programming language used to create interactive and dynamic content on websites, such as animations, forms, and real-time updates.
### Section: JS FUNDAMENTALS
JavaScript is a programming language used to make websites interactive.
Without JS:
With JS:
JavaScript identifiers are case sensitive.
The variables lastName and lastname, are different variables
A JavaScript Engine is a program that:
Reads your JS code
Converts it into machine code
Executes it
JavaScript alone = language
But it needs a runtime to run
Browser gives:
console.log("Hello");
console.log() is NOT pure JS
It is provided by the browser runtime
<script>JS is blocking by default
That means:
Use:
<script defer src="script.js"></script>
π defer = run JS after HTML loads
In HTML, JavaScript code is inserted between <script> and </script> tags.
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
In this example, a JavaScript function is placed in the <head> section of an HTML page.
In this example, a JavaScript function is placed in the <body> section of an HTML page.
Scripts can also be placed in external files:
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:
<script src="myScript.js"></script>
Placing scripts in external files has some advantages:
JavaScript can "display" data in different ways:
innerHTML or innerText.document.write().window.alert().console.log().To access an HTML element, you can use the document.getElementById(id) method.
Use the id attribute to identify the HTML element.
Then use the innerHTML property to change the HTML content of the HTML element:
To access an HTML element, use the document.getElementById(id) method.
Then use the innerText property to change the inner text of the HTML element:
Use innerHTML when you want to change an HTML element.
Use innerText when you only want to change the plain text.
For testing purposes, it is convenient to use document.write():
You can use an alert box to display data:
For debugging purposes, you can call the console.log() method in the browser to display data.
A variable is a named container used to store data.
π Example (JavaScript):
let name = "Jeeshma";
Here, name is a variable storing a value.
In short:
β‘οΈ Variable = a box that holds data
A data type defines what kind of data a variable stores.
π Common types:
"Hello"25true / false[1, 2, 3]{name: "Jeeshma"}In short:
β‘οΈ Data Type = type of data inside the box
#### Page: Variable URL: https://inside.blackboxlearning.in/docs/view/javascript/p/variable/A variable is a container that stores data.
let age = 20;
let β keywordage β variable name20 β valuevar (OLD WAY β avoid in modern JS)var name = "John";
var x = 10; var x = 20; // β allowed (but dangerous)
let (MODERN β use this )let age = 25;
let x = 10; x = 20; // β allowed let x = 30; // β error
const (CONSTANT β most used )const pi = 3.14;
const x = 10; x = 20; // β error
const β default choice β
let β if value changesvar β β avoidStored by value
"hello"10true / falselet name = "blackbox"; // String let age = 20; // Number let isStudent = true; // Boolean let x; // Undefined let y = null; // Null
π Stored by reference (memory address)
let user = {
name: "blackbox",
age: 20
};
let arr = [1, 2, 3];
let a = 10; let b = a; b = 20; console.log(a); // 10
π Copy created β separate memory
let obj1 = { name: "John" };
let obj2 = obj1;
obj2.name = "Alex";
console.log(obj1.name); // Alex π±
π Same memory β both change
#### Page: Type Coercion URL: https://inside.blackboxlearning.in/docs/view/javascript/p/type-coercion/JavaScript automatically converts types when needed
console.log("5" + 2);
// "52"
π Number β converted to string
console.log("5" - 2);
// 3
π String β converted to number
console.log(true + 1); // 2
π true β 1
You convert types yourself:
Number("10"); // 10
String(100); // "100"
Boolean(0); // false
let a = "10"; let b = 5; console.log(a + b); console.log(a - b); console.log(a * b);
π Try to predict output before running
+ β string concatenation if one is string-, *, / β always convert to numberConverting one type into another.
let num = 100; console.log(String(num));
Output:
"100"
let str = "123"; console.log(Number(str));
Output:
123
Boolean(1); Boolean(0);
Output:
true false
String formatting means combining variables, text, and values inside a string to create dynamic output.
Using + operator.
let name = "Jeeshma";
let age = 25;
console.log("My name is " + name + " and I am " + age + " years old.");
Output:
My name is Jeeshma and I am 25 years old.
As the string becomes longer, readability decreases.
Uses backticks ` `
Variables are inserted using ${}
let name = "Jeeshma";
let age = 25;
console.log(`My name is ${name} and I am ${age} years old.`);
Output:
My name is Jeeshma and I am 25 years old.
You can perform calculations.
let a = 10;
let b = 20;
console.log(`Total: ${a + b}`);
Output:
Total: 30
function greet() {
return "Hello";
}
console.log(`${greet()} Jeeshma`);
Output:
Hello Jeeshma
Operators (JS): symbols that perform actions on values
π Types:
+ - * / %== === > <&& || != += -=Used for mathematical calculations
let a = 10; let b = 3; console.log(a + b); // 13 console.log(a - b); // 7 console.log(a * b); // 30 console.log(a / b); // 3.33... console.log(a % b); // 1 (remainder)
let x = 5; x++; // post-increment console.log(x); // 6 ++x; // pre-increment console.log(x); // 7
π Why?
x++ β increases after β becomes 6++x β increases before β becomes 7let x = 5; console.log(x++); // 5 (use first, then increase) console.log(++x); // 7 (increase first, then use)
console.log(x++)x = 5x++ β use first β print 5x = 6π Output: 5
console.log(++x)x = 6++x β increase first β becomes 77π Output: 7
x++) β "Use β Then Increase"++x) β "Increase β Then Use"What will this print?
let x = 10; console.log(++x); console.log(x++); console.log(x);
Answer:
++x β 11x++ β prints 11, then becomes 12x β 12 Used to compare values β returns true or false
console.log(5 > 3); // true console.log(5 < 3); // false console.log(5 >= 5); // true console.log(5 <= 4); // false
Used to combine conditions
&&)Both must be true
console.log(true && true); // true console.log(true && false); // false
||)At least one true
console.log(true || false); // true console.log(false || false); // false
!)Reverses value
console.log(!true); // false console.log(!false); // true
Used with strings.
let first = "Hello"; let second = "World"; console.log(first + " " + second); // Hello World
Conditional Statements allow us to perform different actions for different conditions.
Conditional statements run different code depending on true or false conditions.
Conditional statements include:
if to specify a code block to be executed, if a specified condition is trueelse to specify a code block to be executed, if the same condition is falseelse if to specify a new condition to test, if the first condition is falseswitch to specify many alternative code blocks to be executed(? :) (ternary) as a shorthand for if...elseUse if to specify a code block to be executed, if a specified condition is true.
if (condition) {
// code to execute if the condition is true
}
<!DOCTYPE html>
<html>
<body>
<h2>If Statement</h2>
<script>
let age = 20;
if (age >= 18) {
document.write("You can vote");
}
</script>
</body>
</html>
Use else to specify a code block to be executed, if the same condition is false.
if (condition) {
// code to execute if the condition is true
} else {
// code to execute if the condition is false
}
<!DOCTYPE html>
<html>
<body>
<h2>If Else Statement</h2>
<script>
let age = 16;
if (age >= 18) {
document.write("You can vote");
} else {
document.write("You cannot vote");
}
</script>
</body>
</html>
Use else if to specify a new condition to test, if the first condition is false.
if (condition1) {
// code to execute if condition1 is true
} else if (condition2) {
// code to execute if the condition1 is false and condition2 is true
} else {
// code to execute if the condition1 is false and condition2 is false
}
<!DOCTYPE html>
<html>
<body>
<h2>Else If Statement</h2>
<script>
let marks = 75;
if (marks >= 90) {
document.write("Grade A");
} else if (marks >= 70) {
document.write("Grade B");
} else {
document.write("Grade C");
}
</script>
</body>
</html>
#### Page: switch Statement
URL: https://inside.blackboxlearning.in/docs/view/javascript/p/switch-statement/
Use switch to specify many alternative code blocks to be executed.
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
#### Page: Ternary Operator (? :) URL: https://inside.blackboxlearning.in/docs/view/javascript/p/ternary-operator/
Use (? :) (ternary) as a shorthand for if...else.
condition ? valueIfTrue : valueIfFalse;
let age = 20;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
let age = 20; let result = age >= 18 ? "Adult" : "Minor"; console.log(result);
Output:
Adult
condition ? expression1 : expression2
### Section: LoopsRepeat code multiple times.
#### Page: for Loop URL: https://inside.blackboxlearning.in/docs/view/javascript/p/for-loop/for Loop
for(let i = 1; i <= 5; i++){
console.log(i);
}
A for loop has 3 parts:
for(initialization; condition; increment)
In your example:
for(let i = 1; i <= 5; i++)
i = 1 1 <= 5 // true
Print:
console.log(1);
Output:
1
Then:
i++;
while Loop
let i = 1;
while(i <= 5){
console.log(i);
i++;
}
while(condition){
// code
}
The condition is checked before executing the loop body.
The for loop simply puts initialization, condition, and increment in one line.
for β Use when you know how many times to loop.
while β Use when looping depends on a condition.
#### Page: do...while Loop URL: https://inside.blackboxlearning.in/docs/view/javascript/p/do-while-loop/let i = 10;
do{
console.log(i);
i++;
}
while(i <= 5);
do{
// code
}
while(condition);
The important difference:
The code runs first, then the condition is checked.
for Loop (Known Number of Iterations)const products = ["Laptop", "Phone", "Watch"];
for(let i = 0; i < products.length; i++){
console.log(products[i]);
}
Use case: Showing all products from a list.
const products = ["Laptop", "Phone", "Watch"];
This creates an array containing 3 items:
Think of it like:
products[0] = "Laptop" products[1] = "Phone" products[2] = "Watch"
for(let i = 0; i < products.length; i++)
let i = 0
Start from the first item.
Current value:
i = 0
i < products.length
What is products.length?
products.length
Output:
3
Because there are 3 items in the array.
So the condition becomes:
i < 3
Current value:
i = 0
Check:
0 < 3
β True
Run:
console.log(products[i]);
Which means:
console.log(products[0]);
Output:
Laptop
Then:
i++
we use:
for(let i = 0; i < products.length; i++)
because if you later add more products:
const products = ["Laptop", "Phone", "Watch", "Tablet", "Camera"];
products.length automatically becomes 5, and the loop still works without changing the code.
while Loop (Unknown Number of Iterations)
let password = "";
while(password !== "admin"){
password = prompt("Enter Password");
}
Use case: Keep asking until the correct password is entered.
let password = "";
while(password !== "admin"){
password = prompt("Enter Password");
}
Flow:
Initialize password
β
Check condition
β
Ask password
β
Check again
let password;
do{
password = prompt("Enter Password");
}while(password !== "admin");
Flow:
Ask password
β
Check condition
β
Ask again if wrong
while β "Check first, then run."do...while β "Run first, then check."A function is a reusable block of code that performs a specific task.
Instead of writing the same code again and again, you write it once inside a function and call it whenever needed.
function greet(){
console.log("Hello");
}
greet();
function β keyword to create a functiongreet β function name{} β function bodyAt this point, nothing is printed.
The function is only stored in memory.
greet();
Output:
Hello
The code inside the function executes.
Parameters allow a function to receive data.
function greet(name){
console.log("Hello " + name);
}
greet("John");
Output:
Hello John
function introduce(name, age){
console.log(name + " is " + age + " years old");
}
introduce("John", 25);
Output:
John is 25 years old
Sometimes a function should send a value back.
For that we use:
return
Example:
function add(a,b){
return a+b;
}
console.log(add(5,3));
Output:
8
Without return:
function add(a,b){
a+b;
}
Output:
console.log(add(5,3));
Result:
undefined
Because nothing was returned.
#### Page: Function Expressions URL: https://inside.blackboxlearning.in/docs/view/javascript/p/function-expressions/Functions can be stored in variables.
const greet = function(){
console.log("Hello");
};
greet();
greet();
Output:
Hello
function greet(){
console.log("Hello");
}
const greet = function(){
console.log("Hello");
};
Both work similarly.
#### Page: Arrow Functions URL: https://inside.blackboxlearning.in/docs/view/javascript/p/arrow-functions/Arrow functions are a shorter way to write functions.
Traditional:
function greet(){
console.log("Hello");
}
Arrow:
const greet = () => {
console.log("Hello");
};
Output:
Hello
const functionName = () => {
// code
};
Traditional:
function add(a,b){
return a+b;
}
Arrow:
const add = (a,b) => a+b;
(a,b) => a+b
Automatically means:
(a,b) => {
return a+b;
}
how JavaScript stores, manages, and manipulates data.
Almost every JavaScript project uses:
An object is a collection of key-value pairs.
let person = {
name: "John",
age: 25,
city: "London"
};
console.log(person);
Output:
{
name: "John",
age: 25,
city: "London"
}
Without objects:
let name = "John"; let age = 25; let city = "London";
With objects:
let person = {
name: "John",
age: 25,
city: "London"
};
Everything related stays together.
console.log(person.name); console.log(person.age);
Output:
John 25
console.log(person["name"]);
Output:
John
Useful when property name is dynamic.
let key = "age"; console.log(person[key]);
Output:
25
person.age = 30; console.log(person);
Output:
{
name: "John",
age: 30,
city: "London"
}
person.country = "UK";
Output:
{
name: "John",
age: 30,
city: "London",
country: "UK"
}
delete person.city;
Output:
{
name: "John",
age: 30,
country: "UK"
}
Objects can contain objects.
let user = {
name: "John",
address: {
city: "London",
zip: 12345
}
};
console.log(user.address.city);
Output:
London
Methods are functions inside objects.
let person = {
name: "John",
greet: function() {
console.log("Hello");
}
};
person.greet();
Output:
Hello
let calculator = {
add(a,b){
return a+b;
},
sub(a,b){
return a-b;
}
};
console.log(calculator.add(5,3));
Output:
8
this Keywordthis refers to the object that is calling the method.
let person = {
name: "Jithu",
greet() {
console.log(this.name);
}
};
person.greet();
Output
Jithu
this
let person = {
name: "Jithu",
greet() {
console.log(name);
}
};
person.greet();
name is not defined globally.An Array stores multiple values in a single variable.
let fruits = ["Apple", "Orange", "Mango"];
console.log(fruits[0]); console.log(fruits[1]);
Output
Apple Orange
fruits[1] = "Banana"; console.log(fruits);
console.log(fruits.length);
Output
3
Add item at end.
let arr = [1, 2, 3]; arr.push(4); console.log(arr);
Output
[1,2,3,4]
Remove last item.
arr.pop(); console.log(arr);
Output
[1,2,3]
Add at beginning.
arr.unshift(0); console.log(arr);
Output
[0,1,2,3]
Remove first element.
arr.shift(); console.log(arr);
Output
[1,2,3]
forEach() is used to execute a function for every element in an array.
Think of it as:
"Go through each item and do something."
array.forEach((element, index, array) => {
// code
});
numbers.forEach(num => {
console.log(num);
});
1 2 3 4 5
numbers.forEach((num, index) => {
console.log(index, num);
});
0 1 1 2 2 3 3 4 4 5
const result = numbers.forEach(num => num * 2); console.log(result);
Output:
undefined
β forEach() does NOT return anything.
map() creates a NEW array by transforming each element.
Think:
"Take every item and convert it into something else."
array.map((element) => {
return something;
});
const doubled = numbers.map(num => num * 2); console.log(doubled);
Output:
[2, 4, 6, 8, 10]
Original array:
[1,2,3,4,5]
New array:
[2,4,6,8,10]
filter() returns a NEW array containing only elements that pass a condition.
Think:
"Keep only the items that match."
array.filter(element => condition);
const even = numbers.filter(
num => num % 2 === 0
);
console.log(even);
Output:
[2,4]
const users = [
{name:"Jithu", age:22},
{name:"Rahul", age:17},
{name:"Arun", age:25}
];
const adults = users.filter(
user => user.age >= 18
);
console.log(adults);
Output:
[
{name:"Jithu", age:22},
{name:"Arun", age:25}
]
find() returns ONLY the first element that matches a condition.
Think:
"Find the first matching item and stop."
const result = numbers.find(
num => num > 3
);
console.log(result);
Output:
4
Checks whether AT LEAST ONE element satisfies a condition.
Think:
"Does any item match?"
const result = numbers.some(
num => num > 4
);
console.log(result);
Output:
true
Because 5 is greater than 4.
const result = numbers.some(
num => num > 10
);
console.log(result);
Output:
false
Checks if ALL elements satisfy a condition.
Think:
"Do all items match?"
const result = numbers.every(
num => num > 0
);
console.log(result);
Output:
true
const result = numbers.every(
num => num > 2
);
console.log(result);
Output:
false
reduce() converts an entire array into a single value.
Think:
"Reduce many values into one."
array.reduce(
(accumulator, currentValue) => {},
initialValue
);
const total = numbers.reduce(
(acc, curr) => acc + curr,
0
);
console.log(total);
Output:
15
[1,2,3,4,5]
Initial:
acc = 0
Iteration 1:
0 + 1 = 1
Iteration 2:
1 + 2 = 3
Iteration 3:
3 + 3 = 6
Iteration 4:
6 + 4 = 10
Iteration 5:
10 + 5 = 15
Final:
15
Calculate total cart price.
const cart = [
{name:"Phone", price:30000},
{name:"Mouse", price:500},
{name:"Keyboard", price:2000}
];
const total = cart.reduce(
(sum, item) => sum + item.price,
0
);
console.log(total);
Output:
32500
Used to arrange array elements.
Think:
"Put items in order."
const fruits = [
"Orange",
"Apple",
"Banana"
];
fruits.sort();
console.log(fruits);
Output:
["Apple","Banana","Orange"]
const nums = [100, 5, 20, 1]; nums.sort(); console.log(nums);
Output:
[1,100,20,5]
Because JavaScript treats them as strings.
nums.sort((a,b) => a - b);
Output:
[1,5,20,100]
(a,b) => a - b
If result is:
Negative β a comes first Positive β b comes first 0 β no change
nums.sort((a,b) => b - a);
Output:
[100,20,5,1]
const users = [
{ name: "Jithu", age: 22 },
{ name: "Rahul", age: 18 },
{ name: "Arun", age: 25 }
];
users.sort((a, b) => a.age - b.age);
console.log(users);
Output:
[
{name:"Rahul", age:18},
{name:"Jithu", age:22},
{name:"Arun", age:25}
]
Write cleaner, shorter, and more modern JavaScript code.
ES6 (ECMAScript 2015) introduced many features that are heavily used in React, Node.js, and modern web development.
Template literals allow you to embed variables directly inside strings.
Before ES6:
const name = "Jithu";
const age = 22;
console.log(
"My name is " + name + " and I am " + age + " years old."
);
Output:
My name is Jithu and I am 22 years old.
Use backticks (`)
const name = "Jithu";
const age = 22;
console.log(
`My name is ${name} and I am ${age} years old.`
);
Output:
My name is Jithu and I am 22 years old.
Before ES6:
const text = "Hello\n" + "World";
After ES6:
const text = ` Hello World `; console.log(text);
Output:
Hello World
const a = 10;
const b = 20;
console.log(`Sum = ${a + b}`);
Output:
Sum = 30
Extract values from arrays or objects into variables.
Without Destructuring
const colors = ["red", "green", "blue"]; const first = colors[0]; const second = colors[1];
With Destructuring
const colors = ["red", "green", "blue"]; const [first, second] = colors; console.log(first); console.log(second);
Output:
red green
const colors = ["red", "green", "blue"]; const [first, , third] = colors; console.log(third);
Output:
blue
const user = {
name: "Jithu",
age: 22,
city: "Trivandrum"
};
const { name, age } = user;
console.log(name);
console.log(age);
Output:
Jithu 22
const user = {
name: "Jithu"
};
const { name: userName } = user;
console.log(userName);
Output:
Jithu
Spread breaks an array or object into individual values.
Think:
...
means
"Spread everything out."
const nums = [1, 2, 3]; console.log(...nums);
Output:
1 2 3
const nums = [1, 2, 3]; const copy = [...nums]; console.log(copy);
Output:
[1,2,3]
const arr1 = [1, 2]; const arr2 = [3, 4]; const merged = [...arr1, ...arr2]; console.log(merged);
Output:
[1,2,3,4]
DOM = Document Object Model
When the browser loads an HTML page, it converts the HTML into a tree-like structure called the DOM.
<body>
<h1>Hello</h1>
<p>Welcome</p>
</body>
Document
β
βββ html
β
βββ head
β
βββ body
β
βββ h1
β βββ "Hello"
β
βββ p
βββ "Welcome"
JavaScript can access and modify any node in this tree.
Without DOM, JavaScript cannot:
Almost every frontend website uses DOM.
#### Page: Selecting Elements URL: https://inside.blackboxlearning.in/docs/view/javascript/p/selecting-elements/Used to select ONE element.
It always returns the first matching element.
Suppose you have:
<button class="menu-btn">
Menu
</button>
When user clicks menu button:
const menuBtn =
document.querySelector(".menu-btn");
Now JavaScript can control it.
Used when multiple elements need to be selected.
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
const cards =
document.querySelectorAll(".card");
Now all cards are selected.
Used to select an element by ID.
IDs should be unique.
Example:
<h1 id="hero-title">
Welcome
</h1>
const title =
document.getElementById("hero-title");
const heading = document.getElementById("title");
const headings = [
"Welcome",
"Learn JavaScript",
"Become a Frontend Developer"
];
let index = 0;
setInterval(() => {
heading.textContent = headings[index];
index = (index + 1) % headings.length;
}, 3000);
Selects the first matching element.
<p class="text">Paragraph 1</p> <p class="text">Paragraph 2</p>
const para = document.querySelector(".text");
console.log(para);
<p class="text">Paragraph 1</p>
Only the first match is selected.
const heading = document.querySelector("h1");
const heading = document.querySelector("#title");
const heading = document.querySelector(".box");
Selects all matching elements.
<li>Apple</li> <li>Orange</li> <li>Banana</li>
const items = document.querySelectorAll("li");
console.log(items);
Output:
Apple Orange Banana
Used to read or change text.
<h1 id="title">
Hello
</h1>
Read:
title.textContent
Output:
Hello
title.textContent = "Welcome";
Used to read or insert HTML.
<div id="box"> </div> box.innerHTML = "<h2>Hello</h2>";
Result:
<div id="box">
<h2>Hello</h2>
</div>
Adds a class to an element.
element.classList.add("classname");
HTML
<h1 id="title">
Hello
</h1>
CSS
.active{
color:red;
}
JavaScript
const title =
document.getElementById("title");
title.classList.add("active");
Result
<h1 id="title" class="active">
Hello
</h1>
Text becomes red.
Before
<div class="menu">
After
<div class="menu active">
menu.classList.add("active");
Menu becomes visible.
---