🌐🎨⚡

HTML + CSS + JS

সম্পূর্ণ Web Development গাইড — Zero থেকে AdvancedComplete Web Development Guide — Zero to Advanced

ওয়েবসাইট কখনো বানাওনি? কোনো সমস্যা নেই। এই গাইড তোমাকে HTML দিয়ে কাঠামো, CSS দিয়ে সাজানো এবং JavaScript দিয়ে প্রাণ দেওয়া — সবটা শেখাবে একদম শুরু থেকে। Never built a website? No problem. This guide teaches you structure with HTML, styling with CSS, and bringing it to life with JavaScript — all from scratch.

🌐 HTML — কাঠামো 🎨 CSS — ডিজাইন ⚡ JS — কার্যকারিতা 📖 14 Chapters 💡 100+ Examples 🌙 Dark Mode

https://mywebsite.com

<h1>আমার প্রথম ওয়েবসাইট</h1>

h1 { color: coral; }

document.querySelector('h1').addEventListener('click', () => alert('Hello!'))

📋 সূচিপত্রTable of Contents

🌐 PART 1 — HTML

01 HTML পরিচিতি ও ওয়েবের কাঠামোHTML Intro & Web StructureCh. 1

HTML কী, Tag, Element, Attribute — ওয়েবের হাড়গোড়What is HTML, Tag, Element, Attribute — the skeleton of web

02 গুরুত্বপূর্ণ HTML TagsEssential HTML TagsCh. 2

Heading, Paragraph, Link, Image, List, Table, Form

03 Semantic HTML ও FormsSemantic HTML & FormsCh. 3

header, nav, main, section, footer, form input types

🎨 PART 2 — CSS

04 CSS পরিচিতি ও SelectorsCSS Intro & SelectorsCh. 4

CSS কী, Selectors, Properties, Box ModelWhat is CSS, Selectors, Properties, Box Model

05 Typography, Colors ও UnitsTypography, Colors & UnitsCh. 5

Font, Color, px/em/rem/%, Gradient, CSS Variables

06 Flexbox — আধুনিক LayoutFlexbox — Modern LayoutCh. 6

flex-direction, justify-content, align-items, flex-wrap

07 CSS Grid ও Responsive DesignCSS Grid & Responsive DesignCh. 7

Grid template, Media Queries, Mobile-first design

⚡ PART 3 — JavaScript

08 JavaScript পরিচিতি ও BasicsJavaScript Intro & BasicsCh. 8

Variables, Data Types, Operators, Conditions, Loops

09 Functions ও ArraysFunctions & ArraysCh. 9

Function declaration, Arrow function, Array methods

10 DOM ManipulationDOM ManipulationCh. 10

querySelector, innerHTML, Events, classList — Page বদলানোquerySelector, innerHTML, Events, classList — changing the page

11 Objects, JSON ও Fetch APIObjects, JSON & Fetch APICh. 11

Objects, JSON, Async/Await, API থেকে data আনাObjects, JSON, Async/Await, fetching data from APIs

🚀 PART 4 — Advanced & Projects

12 CSS Animations ও TransitionsCSS Animations & TransitionsCh. 12

transition, animation, keyframes, transform

13 Advanced JS — ES6+ ও Modern WebAdvanced JS — ES6+ & Modern WebCh. 13

Destructuring, Spread, Modules, LocalStorage, Error handling

14 Projects ও Next StepsProjects & Next StepsCh. 14

৫টি প্রজেক্ট আইডিয়া, Roadmap, কোথায় Deploy করবো5 project ideas, Roadmap, where to deploy

CHAPTER 01 — HTML

🌐 HTML

HTML পরিচিতি ও ওয়েবের কাঠামোHTML Introduction & Web Structure

HTML কী, কিভাবে কাজ করে, প্রথম পেজ বানানোWhat is HTML, how it works, building your first page

🌐 HTML কী?What is HTML?

HTML (HyperText Markup Language) হলো ওয়েবপেজের কাঠামো। এটা কোনো programming language না — এটা একটা markup language। ঘরের ইটের দেওয়ালের মতো — যা CSS (রং-রূপ) এবং JavaScript (কার্যকারিতা) ধরে রাখে।HTML (HyperText Markup Language) is the structure of a webpage. It's not a programming language — it's a markup language. Like the brick walls of a house — holding up the CSS (looks) and JavaScript (functionality).

🌐 HTML

কাঠামো — কী আছেStructure — what's there

Heading, Paragraph, Image, Button

🎨 CSS

ডিজাইন — কেমন দেখায়Design — how it looks

Color, Font, Layout, Animation

⚡ JavaScript

কার্যকারিতা — কী করেFunctionality — what it does

Click, Form submit, Data fetch

📄 HTML ফাইলের কাঠামোHTML File Structure

<!DOCTYPE html>  <html lang="bn">  <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>আমার প্রথম পেজ</title>  <link rel="stylesheet" href="style.css">  </head> <body>  <h1>হ্যালো দুনিয়া!</h1> <p>আমার প্রথম ওয়েবসাইট।</p> <script src="script.js"></script>  </body> </html>

🧱 Tag, Element ও AttributeTags, Elements & Attributes

Opening Tag    Content       Closing Tag
     ↓             ↓               ↓
<h1 class="title">    আমার ওয়েবসাইট    </h1>
      ↑       ↑
 Attribute   Value

সব মিলিয়ে এটাই একটা Element

💡 Self-closing Tags — closing tag লাগে নাSelf-closing Tags — no closing tag needed

🚀 প্রথম পেজ তৈরি করোCreate Your First Page

VS Code খুলো → নতুন ফাইল তৈরি করো → নাম দাও index.htmlOpen VS Code → Create new file → Name it index.html

টাইপ করো ! তারপর Tab চাপো → পুরো HTML skeleton তৈরি হয়ে যাবে!Type ! then press Tab → complete HTML skeleton appears!

Live Server extension ইনস্টল করো → Go Live চাপো → Browser-এ real-time দেখবেInstall Live Server extension → Click Go Live → See real-time in browser

📌 Chapter সারসংক্ষেপChapter Summary

🌐 HTML = ওয়েবপেজের কাঠামো, programming language নয়structure of a webpage, not a programming language
📄 সব HTML ফাইলে: DOCTYPE → html → head → body
🧱 <tag> content </tag> = Element; attribute="value"
⚡ VS Code + Live Server = সেরা শুরুVS Code + Live Server = best start

CHAPTER 02 — HTML

🌐 HTML

গুরুত্বপূর্ণ HTML TagsEssential HTML Tags

Heading, Paragraph, Link, Image, List, Table — পেজ বানানোর সব উপকরণHeading, Paragraph, Link, Image, List, Table — all ingredients for building a page

📰 Text TagsText Tags

<h1>সবচেয়ে বড় শিরোনাম</h1> <h2>দ্বিতীয় শিরোনাম</h2> <h3>তৃতীয় শিরোনাম</h3>  <p>এটা একটা অনুচ্ছেদ।</p>  <strong>মোটা লেখা (Bold)</strong> <em>বাঁকা লেখা (Italic)</em> <u>আন্ডারলাইন</u> <mark>হাইলাইট</mark> <del>কাটা লেখা</del> <br>  <hr>

🔗 Link ও ImageLinks & Images

<a href="https://google.com">Google-এ যাও</a> <a href="about.html">About পেজ</a>  <a href="#section1">নিচে যাও</a>  <a href="https://fb.com" target="_blank">নতুন tab</a>  <img src="photo.jpg" alt="আমার ছবি" width="300"> <img src="https://picsum.photos/400/300" alt="Random photo">  <a href="https://google.com"> <img src="logo.png" alt="Logo"> </a>

📋 ListLists

<ul> <li>আম</li> <li>কলা</li> <li>লিচু</li> </ul>  <ol> <li>প্রথম ধাপ</li> <li>দ্বিতীয় ধাপ</li> </ol>

📊 TableTables

📦 div ও span — Container ElementsContainer Elements

<div class="card"> <h2>Card Title</h2> <p>Card content</p> </div>  <p>এটা <span style="color:red">লাল</span> রঙের শব্দ।</p>

📌 সারসংক্ষেপSummary

📰 h1-h6, p, strong, em — text formatting
🔗 <a href=""> — link, <img src="" alt=""> — image
📋 ul/ol + li — list, table + tr + td — table
📦 div — block container, span — inline container

CHAPTER 03 — HTML

🌐 HTML

Semantic HTML ও FormsSemantic HTML & Forms

অর্থপূর্ণ Tags ও ব্যবহারকারীর কাছ থেকে তথ্য নেওয়াMeaningful tags and collecting information from users

🏗️ Semantic HTML — অর্থপূর্ণ কাঠামোMeaningful Structure

Semantic tag ব্যবহার করলে browser, search engine এবং screen reader বুঝতে পারে কোন অংশের কী কাজ। শুধু div দিলে বোঝা যায় না।Using semantic tags helps browsers, search engines and screen readers understand what each part does. Using only div doesn't convey meaning.

❌ Non-Semantic (এড়িয়ে চলো)Non-Semantic (avoid)

✅ Semantic (ব্যবহার করো)Semantic (use this)

<header>  <nav>  <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav> </header> <main>  <article>  <h1>আমার Blog Post</h1> <section>  <h2>ভূমিকা</h2> <p>এখানে লেখা...</p> </section> </article> <aside>  <p>Related links...</p> </aside> </main> <footer>  <p>© 2025 আমার ওয়েবসাইট</p> </footer>

📝 Forms — ব্যবহারকারীর কাছ থেকে তথ্য নেওয়াTaking Input from Users

<form action="/submit" method="POST">  <label for="naam">নাম:</label> <input type="text" id="naam" name="naam" placeholder="তোমার নাম" required>  <label for="email">Email:</label> <input type="email" id="email" name="email" required>  <input type="password" placeholder="পাসওয়ার্ড">  <input type="number" min="1" max="100">  <input type="date">  <input type="radio" name="gender" value="male"> পুরুষ <input type="radio" name="gender" value="female"> মহিলা  <input type="checkbox" name="agree"> শর্তে রাজি  <select name="city"> <option value="dhaka">ঢাকা</option> <option value="ctg">চট্টগ্রাম</option> </select>  <textarea name="message" rows="5" placeholder="তোমার বার্তা"></textarea>  <button type="submit">Submit</button> </form>

📌 সারসংক্ষেপSummary

🏗️ Semantic: header, nav, main, article, section, aside, footer
📝 Form: action (কোথায় যাবে), method (GET/POST)
⌨️ Input types: text, email, password, number, radio, checkbox, select
✅ required — ফাঁকা রাখা যাবে নাcannot be left empty

CHAPTER 04 — CSS

🎨 CSS

CSS পরিচিতি, Selectors ও Box ModelCSS Introduction, Selectors & Box Model

HTML-কে সুন্দর করার জাদু — Selectors, Properties ও Box ModelThe magic of making HTML beautiful — Selectors, Properties & Box Model

🎨 CSS কিভাবে লিখবো?How to Write CSS?

/* CSS-এর গঠন */ selector { property: value; property: value; } /* উদাহরণ */ h1 { color: red; font-size: 32px; text-align: center; }

🎯 CSS Selectors — কাকে style দেবোWho Gets Styled

/* 1. Element selector — সব h1 */ h1 { color: blue; } /* 2. Class selector — .title class-এর সব element */ .title { font-weight: bold; } /* 3. ID selector — #header id-এর element */ #header { background: navy; } /* 4. Multiple selectors */ h1, h2, h3 { color: darkblue; } /* 5. Descendant selector — div-এর ভেতরের p */ div p { margin: 10px; } /* 6. Pseudo-class — hover করলে */ button:hover { background: green; } a:visited { color: purple; } input:focus { border-color: blue; } /* 7. Pseudo-element */ p::first-line { font-weight: bold; } p::before { content: "→ "; }

📦 Box Model — সবকিছুই একটা বাক্সEverything is a Box

CSS-এ প্রতিটা element একটা বাক্সের মতো। এই বাক্সের চারটা অংশ আছে:In CSS, every element is like a box. This box has four parts:

┌─────────────────────────────────────────┐
│                 margin                  │  ← বাইরের ফাঁক
│  ┌───────────────────────────────────┐  │
│  │             border                │  │  ← বাক্সের সীমানা
│  │  ┌─────────────────────────────┐  │  │
│  │  │           padding           │  │  │  ← ভেতরের ফাঁক
│  │  │  ┌───────────────────────┐  │  │  │
│  │  │  │       content         │  │  │  │  ← আসল বিষয়বস্তু
│  │  │  │  (text, image, etc)   │  │  │  │
│  │  │  └───────────────────────┘  │  │  │
│  │  └─────────────────────────────┘  │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘

.card { /* Content size */ width: 300px; height: 200px; /* Padding — ভেতরের ফাঁক */ padding: 20px; /* চারদিকে */ padding: 10px 20px; /* উপর-নিচ, বাম-ডান */ padding-top: 15px; /* শুধু উপরে */ /* Margin — বাইরের ফাঁক */ margin: 20px; /* চারদিকে */ margin: 0 auto; /* মাঝখানে রাখো */ /* Border — সীমানা */ border: 2px solid #333; border-radius: 10px; /* গোল কোণ */ /* box-sizing: border-box — padding/border size-এ যোগ হয় না */ box-sizing: border-box; /* সবসময় এটা ব্যবহার করো! */ }

📍 Display ও Position

/* Display */ .element { display: block; /* নতুন লাইনে, পুরো width */ display: inline; /* একই লাইনে, content width */ display: inline-block; /* একই লাইনে কিন্তু size দেওয়া যায় */ display: none; /* লুকিয়ে যায় */ display: flex; /* Flexbox (পরের chapter!) */ display: grid; /* Grid (পরের chapter!) */ } /* Position */ .box { position: static; /* default — flow-তে থাকে */ position: relative; /* নিজের জায়গা থেকে সরে */ position: absolute; /* parent-এর সাপেক্ষে */ position: fixed; /* screen-এ আটকা (navbar!) */ position: sticky; /* scroll করলে আটকে যায় */ top: 20px; left: 30px; }

📌 সারসংক্ষেপSummary

🎯 Selector: element, .class, #id, :hover, ::before
📦 Box Model: content → padding → border → margin
✅ box-sizing: border-box — সবসময় ব্যবহার করোalways use this
📍 Position: static, relative, absolute, fixed, sticky

CHAPTER 05 — CSS

🎨 CSS

Typography, Colors ও CSS VariablesTypography, Colors & CSS Variables

Font, Color, Gradient ও CSS Custom Properties দিয়ে পেশাদার ডিজাইনProfessional design with Font, Color, Gradient & CSS Custom Properties

✍️ Typography — লেখার সৌন্দর্যBeautiful Text

body { /* Google Fonts ব্যবহার */ font-family: 'Hind Siliguri', sans-serif; font-size: 16px; /* base size */ line-height: 1.6; /* লাইনের ফাঁক */ } h1 { font-size: 2.5rem; /* base-এর 2.5 গুণ */ font-weight: 700; /* bold */ letter-spacing: -0.02em; /* অক্ষরের ফাঁক */ text-transform: uppercase;/* বড় হাতে */ text-decoration: none; /* underline সরাও */ text-align: center; /* মাঝখানে */ text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* ছায়া */ }

🎨 Colors — রঙের উপায়Ways to Use Color

.element { /* Named colors */ color: red; color: coral; /* Hex (সবচেয়ে বেশি ব্যবহার) */ color: #e63946; color: #fff; /* shorthand */ /* RGB */ color: rgb(230, 57, 70); /* RGBA — a = transparency (0-1) */ color: rgba(230, 57, 70, 0.5); /* 50% স্বচ্ছ */ background: rgba(0, 0, 0, 0.8); /* dark overlay */ /* HSL */ color: hsl(350, 78%, 56%); } /* Gradient */ .hero { background: linear-gradient(135deg, #667eea, #764ba2); background: radial-gradient(circle, #667eea, #764ba2); }

🔧 CSS Variables — পুনরায় ব্যবহারযোগ্য মানReusable Values

CSS Variables (Custom Properties) দিয়ে একটা জায়গায় রঙ বা মান সংরক্ষণ করো, সব জায়গায় ব্যবহার করো। পরে বদলাতে হলে একটা জায়গায় বদলালেই হয়।CSS Variables let you store colors or values in one place and use them everywhere. To change later, update just one place.

/* :root-এ define করো — সব পেজে available */ :root { --primary-color: #2563eb; --secondary-color: #7c3aed; --text-color: #1e293b; --bg-color: #f8fafc; --font-size-base: 16px; --border-radius: 8px; --shadow: 0 4px 6px rgba(0,0,0,0.1); } /* var() দিয়ে ব্যবহার করো */ .button { background: var(--primary-color); color: white; border-radius: var(--border-radius); box-shadow: var(--shadow); } .card { background: var(--bg-color); color: var(--text-color); border-radius: var(--border-radius); }

🌑 Dark Mode — CSS Variables দিয়েWith CSS Variables

:root { --bg: #ffffff; --text: #000000; } [data-theme="dark"] { --bg: #0f172a; --text: #e2e8f0; } body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; }

📌 সারসংক্ষেপSummary

✍️ Typography: font-family, font-size, line-height, font-weight
🎨 Color: hex (#fff), rgba(0,0,0,0.5), hsl()
🌈 Gradient: linear-gradient(), radial-gradient()
🔧 --variable: value define, var(--variable) ব্যবহারuse

CHAPTER 06 — CSS

🎨 CSS

🧲 Flexbox — আধুনিক LayoutModern Layout

Elements সাজানোর সবচেয়ে সহজ এবং শক্তিশালী উপায়The easiest and most powerful way to arrange elements

🧲 Flexbox কী?What is Flexbox?

Flexbox একটা CSS Layout system। Parent-এ display: flex দিলে তার সব সরাসরি children flex items হয়ে যায় এবং সহজে সাজানো যায়।Flexbox is a CSS Layout system. Adding display: flex to a parent makes all its direct children flex items that are easy to arrange.

/* Flex Container (Parent) */ .container { display: flex; /* Direction — কোন দিকে সাজাবো */ flex-direction: row; /* → বাম থেকে ডান (default) */ flex-direction: row-reverse; /* ← ডান থেকে বাম */ flex-direction: column; /* ↓ উপর থেকে নিচ */ flex-direction: column-reverse; /* ↑ নিচ থেকে উপর */ /* Main axis alignment (row হলে horizontal) */ justify-content: flex-start; /* বাম থেকে */ justify-content: flex-end; /* ডান থেকে */ justify-content: center; /* মাঝখানে */ justify-content: space-between; /* দুপাশে আটকে, মাঝে ফাঁক */ justify-content: space-around; /* সব দিকে সমান ফাঁক */ justify-content: space-evenly; /* একেবারে সমান */ /* Cross axis alignment (row হলে vertical) */ align-items: stretch; /* পূর্ণ height (default) */ align-items: flex-start; /* উপরে */ align-items: flex-end; /* নিচে */ align-items: center; /* মাঝখানে ✨ */ /* Wrap — ছোট হলে পরের লাইনে যাবে */ flex-wrap: wrap; gap: 20px; /* items-এর মধ্যে ফাঁক */ }

⭐ সবচেয়ে কাজের Flexbox trickMost Useful Flexbox Trick

/* Perfect center করা — horizontal ও vertical */ .center-everything { display: flex; justify-content: center; align-items: center; min-height: 100vh; /* পুরো screen উচ্চতা */ }

/* Navbar layout */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; background: #0f172a; } /* Card grid layout */ .card-grid { display: flex; flex-wrap: wrap; gap: 24px; } .card-grid .card { flex: 1 1 300px; /* min 300px, বাকি space নাও */ }

🔢 Flex Item Properties

/* Flex Item (Children) */ .item { flex: 1; /* available space সমানভাবে নাও */ flex: 2; /* অন্যদের দ্বিগুণ space নাও */ flex-grow: 1; /* বাড়তে পারবে */ flex-shrink: 0; /* ছোট হবে না */ flex-basis: 200px;/* base size */ order: -1; /* HTML-এর আগে দেখাবে */ align-self: center; /* শুধু এই item আলাদাভাবে */ }

📌 সারসংক্ষেপSummary

🧲 display: flex — parent-এ দিলে flex শুরুadd to parent to start flex
↔️ justify-content — main axis-এ সাজানোarrange on main axis
↕️ align-items — cross axis-এ সাজানোarrange on cross axis
⭐ Perfect center: flex + justify-content:center + align-items:center
📐 gap — items-এর মধ্যে ফাঁকgap between items

CHAPTER 07 — CSS

🎨 CSS

📐 CSS Grid ও Responsive Design& Responsive Design

Two-dimensional layout ও সব device-এ সুন্দর দেখানোTwo-dimensional layout and looking good on all devices

📐 CSS Grid — দুই দিকে LayoutLayout in Two Directions

Flexbox এক দিকে (row বা column) কাজ করে। Grid দুই দিকে (row এবং column) কাজ করে — magazine layout-এর জন্য পারফেক্ট।Flexbox works in one direction (row or column). Grid works in two directions (row AND column) — perfect for magazine-style layouts.

.grid-container { display: grid; /* 3 column grid */ grid-template-columns: 200px 200px 200px; /* fixed */ grid-template-columns: 1fr 1fr 1fr; /* fraction */ grid-template-columns: repeat(3, 1fr); /* shorthand */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* responsive! */ /* Rows */ grid-template-rows: 100px auto 60px; /* Gap */ gap: 24px; row-gap: 20px; column-gap: 16px; } /* Item placement */ .header { grid-column: 1 / -1; } /* সব column জুড়ে */ .sidebar { grid-row: 2 / 4; } /* 2 row জুড়ে */

/* সবচেয়ে দরকারি: Responsive card grid */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } /* এটা automatically: mobile-এ 1 column, tablet-এ 2, desktop-এ 3+ দেখাবে! */

📱 Responsive Design — সব device-এ সুন্দরBeautiful on All Devices

Media Query ব্যবহার করে screen-এর size অনুযায়ী আলাদা CSS লেখা যায়।Media Queries let you write different CSS based on screen size.

/* Mobile-first approach — ছোট থেকে বড় */ /* Mobile (default — কোনো query নেই) */ .container { padding: 16px; } .nav-links { display: none; } /* mobile-এ hidden */ /* Tablet (768px+) */ @media (min-width: 768px) { .container { padding: 24px; } .nav-links { display: flex; } /* tablet-এ দেখায় */ .grid { grid-template-columns: repeat(2, 1fr); } } /* Desktop (1024px+) */ @media (min-width: 1024px) { .container { max-width: 1200px; margin: 0 auto; } .grid { grid-template-columns: repeat(3, 1fr); } } /* Dark mode */ @media (prefers-color-scheme: dark) { body { background: #0f172a; color: #e2e8f0; } }

💡 Viewport Units

/* vw = viewport width, vh = viewport height */ .hero { height: 100vh; } /* পুরো screen উচ্চতা */ .title { font-size: 5vw; } /* screen width-এর 5% */ .sidebar { width: 30vw; } /* screen width-এর 30% */

📌 সারসংক্ষেপSummary

📐 display: grid + grid-template-columns — 2D layout
⭐ repeat(auto-fit, minmax(280px, 1fr)) — auto-responsive grid
📱 @media (min-width: 768px) — responsive CSS
📐 Mobile-first: ছোট screen-এর CSS আগে লেখোMobile-first: write small screen CSS first

CHAPTER 08 — JAVASCRIPT

⚡ JavaScript

JavaScript পরিচিতি ও BasicsJavaScript Introduction & Basics

Variables, Data Types, Conditions, Loops — ওয়েবকে জীবন্ত করাVariables, Data Types, Conditions, Loops — bringing the web to life

⚡ JavaScript কীভাবে যোগ করবো?How to Add JavaScript?

/* HTML-এ যোগ করার উপায় */  <script src="script.js" defer></script> <-- body-র শেষে  <script> console.log("Hello!"); // browser console-এ দেখায় </script>

📦 Variables — ডেটা সংরক্ষণStoring Data

// 3 ধরনের variable declaration let naam = "Rahim"; // পরিবর্তন করা যায় ✅ const PI = 3.14; // পরিবর্তন করা যায় না ❌ var boyos = 20; // পুরনো পদ্ধতি, এড়িয়ে চলো // Data Types let text = "Hello"; // String let number = 42; // Number let decimal = 3.14; // Number (float) let isTrue = true; // Boolean let nothing = null; // Null let undef; // Undefined let list = [1, 2, 3]; // Array let person = { naam: "Rahim" }; // Object

🔀 Conditions ও Loops

// if/else let boyos = 20; if (boyos >= 18) { console.log("প্রাপ্তবয়স্ক"); } else if (boyos >= 13) { console.log("কিশোর"); } else { console.log("শিশু"); } // Ternary operator — এক লাইনে if/else let status = boyos >= 18 ? "Adult" : "Minor"; // for loop for (let i = 0; i < 5; i++) { console.log(`সংখ্যা: ${i}`); // template literal } // Array-তে loop const fruits = ["আম", "কলা", "লিচু"]; for (const fruit of fruits) { console.log(fruit); } // while loop let count = 0; while (count < 3) { console.log(count); count++; }

🔧 Template Literals ও String

📌 সারসংক্ষেপSummary

📦 let — পরিবর্তনযোগ্য, const — স্থিরfixed
🔀 if/else if/else — শর্ত, Ternary: ? :
🔁 for, for...of, while — loop
✨ `Hello ${name}` — Template Literal, সবসময় এটা ব্যবহার করোalways use this

CHAPTER 09 — JAVASCRIPT

⚡ JavaScript

Functions ও ArraysFunctions & Arrays

কোড পুনরায় ব্যবহার ও ডেটার তালিকা নিয়ে কাজReusing code and working with lists of data

⚙️ Functions

// 1. Function Declaration function greet(naam) { return `হ্যালো, ${naam}!`; } console.log(greet("Rahim")); // 2. Arrow Function (modern) — ⬅ সবচেয়ে বেশি ব্যবহার করো const greet = (naam) => `হ্যালো, ${naam}!`; // Multiple parameters const add = (a, b) => a + b; console.log(add(10, 20)); // 30 // Default parameter const greetUser = (naam = "বন্ধু") => `হ্যালো, ${naam}!`; console.log(greetUser()); // হ্যালো, বন্ধু! // Higher-order function — function-কে parameter হিসেবে দেওয়া const doTwice = (fn, value) => fn(fn(value)); console.log(doTwice(x => x * 2, 5)); // 20

📋 Arrays ও দরকারি Methods

const fruits = ["আম", "কলা", "লিচু"]; // Access console.log(fruits[0]); // আম console.log(fruits.length); // 3 // Add/Remove fruits.push("আনারস"); // শেষে যোগ fruits.unshift("জাম"); // শুরুতে যোগ fruits.pop(); // শেষেরটা বাদ fruits.splice(1, 1); // index 1 থেকে 1টা বাদ // Powerful Methods const numbers = [1, 2, 3, 4, 5]; // map — প্রতিটা item transform করো const doubled = numbers.map(n => n * 2); console.log(doubled); // [2, 4, 6, 8, 10] // filter — শর্ত মেলে এমনগুলো রাখো const evens = numbers.filter(n => n % 2 === 0); console.log(evens); // [2, 4] // find — প্রথম match খোঁজো const found = numbers.find(n => n > 3); console.log(found); // 4 // reduce — সব মিলিয়ে একটা ফলাফল const sum = numbers.reduce((total, n) => total + n, 0); console.log(sum); // 15 // includes — আছে কিনা console.log(numbers.includes(3)); // true // forEach — প্রতিটায় কাজ করো (map-এর মতো, কিন্তু return নেই) fruits.forEach(fruit => console.log(fruit)); // sort — সাজানো const sorted = [3, 1, 4, 1].sort((a, b) => a - b); console.log(sorted); // [1, 1, 3, 4]

📌 সারসংক্ষেপSummary

⚙️ Arrow function: const fn = (x) => x * 2
📋 push/pop/splice — array modify করাmodify array
🗺️ map() — transform, filter() — বাছাই, reduce() — একটায় পরিণত
🔍 find() — খোঁজা, includes() — আছে কিনা

CHAPTER 10 — JAVASCRIPT

⚡ JavaScript

🌳 DOM Manipulation

JavaScript দিয়ে HTML page বদলানো — ওয়েবের সবচেয়ে শক্তিশালী দিকChanging the HTML page with JavaScript — the most powerful aspect of web

🌳 DOM কী?What is the DOM?

DOM (Document Object Model) হলো HTML document-এর JavaScript representation। JavaScript দিয়ে DOM-এর যেকোনো element খুঁজে পাওয়া, বদলানো, যোগ বা বাদ দেওয়া যায়।The DOM is JavaScript's representation of the HTML document. You can find, change, add or remove any element using JavaScript.

🔍 Elements খোঁজা

// querySelector — CSS selector দিয়ে প্রথমটা const title = document.querySelector('h1'); const btn = document.querySelector('.btn'); const header = document.querySelector('#header'); // querySelectorAll — সব মিলিয়ে NodeList const allCards = document.querySelectorAll('.card'); const allImages = document.querySelectorAll('img'); // Loop করে সব নিয়ে কাজ করো allCards.forEach(card => { card.style.border = "2px solid blue"; });

✏️ Content ও Style বদলানো

const elem = document.querySelector('#title'); // Text বদলানো elem.textContent = "নতুন শিরোনাম"; // plain text elem.innerHTML = "<strong>Bold</strong>"; // HTML support // Style বদলানো elem.style.color = "red"; elem.style.fontSize = "24px"; elem.style.display = "none"; // লুকিয়ে দাও // Attribute বদলানো const img = document.querySelector('img'); img.setAttribute('src', 'new-photo.jpg'); img.setAttribute('alt', 'নতুন ছবি'); // CSS class যোগ/বাদ/toggle elem.classList.add('active'); // class যোগ elem.classList.remove('hidden'); // class বাদ elem.classList.toggle('dark'); // থাকলে বাদ, না থাকলে যোগ elem.classList.contains('active'); // আছে কিনা: true/false

🖱️ Events — কিছু হলে কাজ করোDo Something When Something Happens

➕ Element তৈরি ও যোগ করাCreating & Adding Elements

// নতুন element তৈরি করো const newCard = document.createElement('div'); newCard.classList.add('card'); newCard.innerHTML = ` <h3>নতুন Card</h3> <p>এটা JavaScript দিয়ে তৈরি</p> `; // Page-এ যোগ করো const container = document.querySelector('.container'); container.appendChild(newCard); // শেষে যোগ container.prepend(newCard); // শুরুতে যোগ // Remove করো newCard.remove();

📌 সারসংক্ষেপSummary

🔍 querySelector('.class') — element খোঁজোfind element
✏️ .textContent, .innerHTML, .style.color — বদলাওchange
🎨 .classList.add/remove/toggle — CSS class
🖱️ addEventListener('click', fn) — event শোনোlisten to events
➕ createElement + appendChild — নতুন element তৈরিcreate new elements

CHAPTER 11 — JAVASCRIPT

⚡ JavaScript

🌐 Objects, JSON ও& Fetch API

Objects, JSON, Async/Await ও API থেকে real data আনাObjects, JSON, Async/Await and fetching real data from APIs

📦 Objects — Key-Value জোড়াKey-Value Pairs

// Object তৈরি const student = { naam: "Rahim", boyos: 20, shahor: "Dhaka", hobbies: ["coding", "reading"], address: { // nested object road: "Mirpur 10", city: "Dhaka" }, greet() { // method return `হ্যালো, আমি ${this.naam}`; } }; // Access console.log(student.naam); // dot notation console.log(student['boyos']); // bracket notation console.log(student.address.city); // nested console.log(student.greet()); // method call // Destructuring — সহজে বের করা const { naam, boyos, shahor } = student; console.log(naam, boyos); // Rahim 20 // Spread — copy করা const updatedStudent = { ...student, boyos: 21 };

📄 JSON — ডেটা আদান-প্রদানের ভাষাLanguage for Data Exchange

// JSON = JavaScript Object Notation // API থেকে এই format-এ ডেটা আসে const jsonString = '{"naam": "Rahim", "boyos": 20}'; // JSON String → JavaScript Object const obj = JSON.parse(jsonString); console.log(obj.naam); // Rahim // JavaScript Object → JSON String const str = JSON.stringify(obj); console.log(str); // {"naam":"Rahim","boyos":20} // Pretty print console.log(JSON.stringify(obj, null, 2));

🌐 Fetch API — ইন্টারনেট থেকে ডেটা আনাFetching Data from the Internet

// Async/Await দিয়ে API call (সবচেয়ে আধুনিক পদ্ধতি) const getUsers = async () => { try { // API-তে request পাঠাও const response = await fetch('https://jsonplaceholder.typicode.com/users'); // JSON-এ convert করো const users = await response.json(); // ব্যবহার করো users.forEach(user => { console.log(`${user.name}: ${user.email}`); }); } catch (error) { console.error('Error:', error); } }; getUsers();

// Real-world example: Users দেখানো const showUsers = async () => { const container = document.querySelector('#users'); container.innerHTML = 'Loading...'; const res = await fetch('https://jsonplaceholder.typicode.com/users'); const users = await res.json(); container.innerHTML = users.map(user => ` <div class="card"> <h3>${user.name}</h3> <p>📧 ${user.email}</p> <p>🌐 ${user.website}</p> </div> `).join(''); }; showUsers();

📌 সারসংক্ষেপSummary

📦 Object: key-value pair, nested object, method
✂️ Destructuring: const { naam, boyos } = student
📄 JSON.parse() → Object, JSON.stringify() → String
🌐 async/await + fetch() — API থেকে ডেটা আনাfetch data from API

CHAPTER 12 — ADVANCED

🚀 Advanced

✨ CSS Animations ও& Transitions

Motion দিয়ে ওয়েবসাইটকে প্রাণবন্ত করাBringing the website to life with motion

🔄 Transitions — মসৃণ পরিবর্তনSmooth Changes

/* transition: property duration timing-function delay */ .button { background: #2563eb; color: white; padding: 12px 24px; border-radius: 8px; transition: all 0.3s ease; /* সব property, 0.3s, smooth */ } .button:hover { background: #1d4ed8; transform: translateY(-2px); /* উপরে উঠে */ box-shadow: 0 8px 24px rgba(37,99,235,0.4); } /* Individual transitions */ .card { transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.2s linear; } .card:hover { transform: scale(1.03); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }

🎬 Transform — Element-কে রূপান্তরTransforming Elements

.element { transform: translateX(50px); /* ডানে সরাও */ transform: translateY(-20px); /* উপরে সরাও */ transform: scale(1.5); /* দেড়গুণ বড় */ transform: rotate(45deg); /* ৪৫ ডিগ্রি ঘোরাও */ transform: skew(10deg); /* বাঁকাও */ /* একসাথে */ transform: translateY(-4px) scale(1.05); }

🎞️ Keyframe Animations — পূর্ণ AnimationFull Animations

/* @keyframes দিয়ে animation define করো */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* animation: name duration timing-function delay iteration-count */ .card { animation: fadeIn 0.5s ease forwards; } .loader { animation: spin 1s linear infinite; } .button { animation: pulse 2s ease-in-out infinite; } /* Staggered animation — একটার পর একটা */ .card:nth-child(1) { animation-delay: 0s; } .card:nth-child(2) { animation-delay: 0.1s; } .card:nth-child(3) { animation-delay: 0.2s; }

📌 সারসংক্ষেপSummary

🔄 transition: all 0.3s ease — hover-এ মসৃণ পরিবর্তনsmooth change on hover
🔧 transform: scale/translate/rotate — রূপান্তরtransform
🎞️ @keyframes + animation — পূর্ণ animationfull animation
⏱️ animation-delay — staggered effect তৈরিcreate staggered effect

CHAPTER 13 — ADVANCED

🚀 Advanced

⚡ Advanced JavaScript — ES6+

Destructuring, Spread, Modules, LocalStorage, Error handling

✂️ Destructuring ও Spread

// Array Destructuring const [first, second, ...rest] = [1, 2, 3, 4, 5]; console.log(first, second, rest); // 1, 2, [3,4,5] // Object Destructuring const { naam, boyos, ...otherInfo } = student; // Spread operator — ছড়িয়ে দাও const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combined = [...arr1, ...arr2]; // [1,2,3,4,5,6] const obj1 = { a: 1, b: 2 }; const obj2 = { c: 3 }; const merged = { ...obj1, ...obj2 }; // {a:1, b:2, c:3} // Optional chaining — safely nested property access const city = user?.address?.city; // error ছাড়াই // Nullish coalescing — null/undefined হলে default দাও const name = user.naam ?? "অপরিচিত";

💾 LocalStorage — Browser-এ ডেটা সংরক্ষণStoring Data in Browser

// LocalStorage — browser বন্ধ করলেও থাকে // সংরক্ষণ করো (শুধু string) localStorage.setItem('naam', 'Rahim'); // Object সংরক্ষণ করতে JSON.stringify const user = { naam: "Rahim", boyos: 20 }; localStorage.setItem('user', JSON.stringify(user)); // পড়ো const savedName = localStorage.getItem('naam'); const savedUser = JSON.parse(localStorage.getItem('user')); // বাদ দাও localStorage.removeItem('naam'); localStorage.clear(); // Use case: Dark mode সংরক্ষণ const toggleDark = () => { document.body.classList.toggle('dark'); const isDark = document.body.classList.contains('dark'); localStorage.setItem('darkMode', isDark); };

🛡️ Error Handling ও Try/Catch

// try/catch দিয়ে error সামলাও const fetchData = async (url) => { try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP Error: ${response.status}`); } const data = await response.json(); return data; } catch (error) { console.error('Error:', error.message); // UI-তে error দেখাও document.querySelector('#error').textContent = error.message; } finally { // সবসময় চলে — loading hide করো document.querySelector('.loader').style.display = 'none'; } };

📌 সারসংক্ষেপSummary

✂️ Destructuring: array ও object থেকে সহজে বের করাextract easily from arrays and objects
🔀 Spread ...: array/object copy ও merge
💾 localStorage — browser-এ স্থায়ীভাবে সংরক্ষণpermanently store in browser
🛡️ try/catch/finally — error সামলানোhandling errors

CHAPTER 14 — PROJECTS

🚀 Projects

🏗️ Projects ও Next StepsProjects & Next Steps

৫টি প্রজেক্ট আইডিয়া, Roadmap এবং কোথায় Deploy করবো5 project ideas, Roadmap and where to deploy

🏗️ ৫টি Project — শুরু থেকে Advanced5 Projects — Beginner to Advanced

🟢 Project 1: Personal Portfolio

নিজের পরিচয় সাইট। HTML + CSS শেখার পরেই বানাও।Your personal introduction site. Build right after learning HTML + CSS.

HTML CSS Flexbox

নাম, কাজ, ছবি, Contact formName, work, photo, contact form

🟡 Project 2: Todo App

কাজের তালিকা। JS শেখার পরেই বানাও।Task list app. Build right after learning JS.

JS DOM localStorage Events

Add, delete, complete, save করাAdd, delete, complete, save tasks

🟠 Project 3: Weather App

Real-time আবহাওয়া। Fetch API শেখার পরে।Real-time weather. After learning Fetch API.

Fetch API JSON OpenWeather API

শহরের নাম দাও, আবহাওয়া দেখাওEnter city name, show weather

🔵 Project 4: Quiz App

MCQ Quiz। Arrays ও DOM-এর ভালো practice।MCQ Quiz. Great practice for Arrays & DOM.

Arrays DOM Timer

প্রশ্ন, option, score, timerQuestions, options, score, timer

🔴 Project 5: E-commerce Product Page

পণ্যের পেজ, cart, filter। সব কিছু একসাথে।Product page, cart, filter. Everything combined.

HTML CSS Grid JS Fetch API localStorage

📅 Roadmap — এরপর কোথায় যাবো?Roadmap — Where to Go Next?

🌱 এখন (এই গাইড শেষ)Now (after this guide)

HTML Semantic CSS Flexbox CSS Grid JS DOM Fetch API

⚡ পরবর্তী ধাপNext Step

Git & GitHub Tailwind CSS React JS Node.js Basics

🚀 Advanced

Next.js TypeScript Node + Express MongoDB / SQL REST API বানানো

🚀 Deploy — Live করো!Deploy — Go Live!

Platform	কী সুবিধাBenefit	দামPrice
GitHub Pages	Static site — সবচেয়ে সহজStatic site — easiest	Free
Netlify	Drag & drop deploy, custom domain	Free
Vercel	React/Next.js-এর জন্য সেরাBest for React/Next.js	Free
Cloudflare Pages	দ্রুত, unlimited bandwidthFast, unlimited bandwidth	Free

📚 দরকারি ResourcesEssential Resources

📖 শেখার সাইটLearning Sites

MDN Web Docs — developer.mozilla.org
W3Schools — w3schools.com
CSS-Tricks — css-tricks.com
JavaScript.info — javascript.info
freeCodeCamp — freecodecamp.org

🛠️ দরকারি ToolsUseful Tools

VS Code — সেরা editor
Chrome DevTools — F12 চাপো
Figma — design দেখো
Coolors.co — color palette
Google Fonts — fonts
Canva — design resource

🌐 "Every website you've ever used was built by someone who once knew nothing about web development."

প্রতিটা কোড নিজে লিখো, ভুল করো, Google করো, আবার চেষ্টা করো। এটাই শেখার একমাত্র উপায়। Write every code yourself, make mistakes, Google it, try again. That's the only way to learn.

Web Development Guide (HTML + CSS + JS) — v1.0 | 14 Chapters | Zero to Advanced