Web Development
Kanalga Telegram’da o‘tish
Learn Web Development From Scratch 0️⃣ HTML / CSS 1️⃣ JavaScript 2️⃣ React / Vue / Angular 3️⃣ Node.js / Express 4️⃣ REST API 5️⃣ SQL / NoSQL Databases 6️⃣ UI / UX Design 7️⃣ Git / GitHub Admin: @love_data
Ko'proq ko'rsatish
Tarmoq:📈 Telegram kanali Web Development analitikasi
Web Development (@webdevcoursefree) Ingliz til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 79 663 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 1 564-o'rinni va Hindiston mintaqasida 3 803-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 79 663 obunachiga ega bo‘ldi.
06 Oktabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni 176 ga, so‘nggi 24 soatda esa 39 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 2.29% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 1.08% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 821 marta ko‘riladi; birinchi sutkada odatda 857 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 6 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent html, css, javascript, github, git kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Learn Web Development From Scratch
0️⃣ HTML / CSS
1️⃣ JavaScript
2️⃣ React / Vue / Angular
3️⃣ Node.js / Express
4️⃣ REST API
5️⃣ SQL / NoSQL Databases
6️⃣ UI / UX Design
7️⃣ Git / GitHub
Admin: @love_data”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 07 Oktabr, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
79 663
Obunachilar
+3924 soatlar
+1177 kun
+17630 kun
Ma'lumot yuklanmoqda...
O'xshash kanallar
Taglar buluti
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Oktabr '26Okt '26
Oktabr '26
+116
0 kanalda
Sentabr '26
+487
7 kanalda
Get PRO
Avgust '26
+477
3 kanalda
Get PRO
Iyul '26
+748
7 kanalda
Get PRO
Iyun '26
+574
7 kanalda
Get PRO
May '26
+689
12 kanalda
Get PRO
Aprel '26
+472
5 kanalda
Get PRO
Mart '26
+174
7 kanalda
Get PRO
Fevral '26
+984
18 kanalda
Get PRO
Yanvar '26
+1 066
15 kanalda
Get PRO
Dekabr '25
+908
7 kanalda
Get PRO
Noyabr '25
+803
15 kanalda
Get PRO
Oktabr '25
+903
12 kanalda
Get PRO
Sentabr '25
+1 190
11 kanalda
Get PRO
Avgust '25
+1 593
14 kanalda
Get PRO
Iyul '25
+1 675
14 kanalda
Get PRO
Iyun '25
+1 809
32 kanalda
Get PRO
May '25
+2 877
21 kanalda
Get PRO
Aprel '25
+4 818
23 kanalda
Get PRO
Mart '25
+1 311
21 kanalda
Get PRO
Fevral '25
+728
27 kanalda
Get PRO
Yanvar '25
+835
37 kanalda
Get PRO
Dekabr '24
+1 059
24 kanalda
Get PRO
Noyabr '24
+3 531
21 kanalda
Get PRO
Oktabr '24
+4 624
12 kanalda
Get PRO
Sentabr '24
+4 026
14 kanalda
Get PRO
Avgust '24
+4 344
19 kanalda
Get PRO
Iyul '24
+5 970
28 kanalda
Get PRO
Iyun '24
+6 323
38 kanalda
Get PRO
May '24
+5 101
33 kanalda
Get PRO
Aprel '24
+4 637
13 kanalda
Get PRO
Mart '24
+5 261
8 kanalda
Get PRO
Fevral '24
+5 199
4 kanalda
Get PRO
Yanvar '24
+4 960
4 kanalda
Get PRO
Dekabr '23
+3 707
2 kanalda
Get PRO
Noyabr '23
+563
8 kanalda
Get PRO
Oktabr '23
+351
1 kanalda
Get PRO
Sentabr '23
+560
0 kanalda
Get PRO
Avgust '23
+725
0 kanalda
Get PRO
Iyul '23
+841
0 kanalda
Get PRO
Iyun '23
+32
0 kanalda
Get PRO
May '23
+50
0 kanalda
Get PRO
Aprel '23
+283
0 kanalda
Get PRO
Mart '23
+85
0 kanalda
Get PRO
Fevral '23
+108
0 kanalda
Get PRO
Yanvar '23
+316
0 kanalda
Get PRO
Dekabr '22
+105
0 kanalda
Get PRO
Noyabr '22
+70
0 kanalda
Get PRO
Oktabr '22
+69
0 kanalda
Get PRO
Sentabr '22
+95
0 kanalda
Get PRO
Avgust '22
+30
0 kanalda
Get PRO
Iyul '22
+41
0 kanalda
Get PRO
Iyun '22
+79
0 kanalda
Get PRO
May '22
+51
0 kanalda
Get PRO
Aprel '22
+34
0 kanalda
Get PRO
Mart '22
+53
0 kanalda
Get PRO
Fevral '22
+222
0 kanalda
Get PRO
Yanvar '22
+395
0 kanalda
Get PRO
Dekabr '21
+103
0 kanalda
Get PRO
Noyabr '21
+77
0 kanalda
Get PRO
Oktabr '21
+97
0 kanalda
Get PRO
Sentabr '21
+453
0 kanalda
| Sana | Obunachilarni jalb qilish | Esdaliklar | Kanallar | |
| 07 Oktabr | +12 | |||
| 06 Oktabr | +43 | |||
| 05 Oktabr | +23 | |||
| 04 Oktabr | +19 | |||
| 03 Oktabr | +6 | |||
| 02 Oktabr | +3 | |||
| 01 Oktabr | +10 |
Kanal postlari
🚀𝗣𝗮𝘆 𝗔𝗳𝘁𝗲𝗿 𝗣𝗹𝗮𝗰𝗲𝗺𝗲𝗻𝘁 𝗧𝗿𝗮𝗶𝗻𝗶𝗻𝗴 | 𝗕𝗲𝗰𝗼𝗺𝗲 𝗮 𝗙𝘂𝗹𝗹𝘀𝘁𝗮𝗰𝗸 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿 𝗪𝗜𝘁𝗵 𝗚𝗲𝗻𝗔𝗜
Start a high-paying tech career—even without prior coding experience
🏆 𝗣𝗹𝗮𝗰𝗲𝗺𝗲𝗻𝘁 𝗛𝗶𝗴𝗵𝗹𝗶𝗴𝗵𝘁𝘀:
💰 ₹41 LPA highest salary
📈 ₹7.4 LPA average salary
🎓 2,000+ students placed
🏢 500+ hiring partners
✅ 100% job assistance
📜 Skill India–authenticated certificate
🔗 𝗔𝗽𝗽𝗹𝘆 𝗡𝗼𝘄👇:-
https://pdlink.in/3SuUeuD
🎯 HurryUp.....Limited Seats Available
| 2 | 🌐 Web Development Roadmap — Part 14
HTML Document Structure
Before learning individual HTML tags in depth, you need to understand how a complete HTML document is organized.
1. Basic HTML Structure
Every normal HTML page follows a structure similar to this:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my website.</p>
</body>
</html>
Think of it like a building:
HTML Document
├──
│ ├── → Page information
│ └── → Visible webpage content
2. <!DOCTYPE html>
This tells the browser that the document uses modern HTML.
It is a declaration, not a normal HTML element.
3.
This is the root element of the document.
Almost everything else belongs inside <html>.
4.
The <head> contains information about the webpage.
Common things placed inside it include:
<meta> <link> <style> <script></strong></p>
<p>Much of this information isn't directly displayed as page content.</p>
<p><strong>5. <title></strong><br>
The title usually appears in the browser tab.</p>
<p>It is also important for search engines and accessibility.</p>
<p><strong>6. <body></strong><br>
The <code><body></code> contains the main content users interact with and see.</p>
<p>Examples: Headings, Paragraphs, Images, Links, Buttons, Forms, Lists, Videos</p>
<p><strong>7. <meta></strong><br>
<code><meta></code> provides information about the document.</p>
<p>A very common example is: <code><meta charset="UTF-8"></code><br>
You will also commonly see: <code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code></p>
<p>This helps webpages display properly on mobile devices.</p>
<p><strong>8. <link></strong><br>
<code><link></code> is commonly used to connect external resources to the HTML document.</p>
<p>For example: <code><link rel="stylesheet" href="style.css"></code></p>
<p><strong>9. Complete Example</strong></p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Portfolio</h1>
<p>I am learning web development.</p>
<a href="about.html">About Me</a>
</body>
</html>
10. What Happens When the Browser Opens It?
HTML file → Read DOCTYPE → Read html → Process head → Load metadata, title, CSS → Process body → Build webpage → Display to user
11. vs
: Information ABOUT the webpage
: Content OF the webpage
🧠 Double Tap ❤️ For More
-----
1.34 ₽ · /balance_help | 506 |
| 3 |  𝗠𝗮𝘀𝘁𝗲𝗿 𝗣𝗼𝘄𝗲𝗿 𝗕𝗜 𝗳𝗼𝗿 𝗙𝗥𝗘𝗘! 🔥
Learn Power BI through these FREE learning resources
✨ What You'll Learn:
📊 Interactive Dashboards
📈 Data Visualization
🧹 Data Transformation
💼 Real-World Reporting Skills
🎯 Beginner-Friendly — No Coding Required
𝗦𝘁𝗮𝗿𝘁 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗳𝗼𝗿 𝗙𝗥𝗘𝗘
https://pdlink.in/4hznwlu
💫Perfect for Students • Freshers • Data Analyst Aspirants • Working Professionals | 604 |
| 4 | The browser reads the HTML structure and builds the webpage from these elements.
Key Takeaway
HTML is essentially the structure of your webpage.
<h1> → Heading
<p> → Paragraph
<a> → Link
<img> → Image
<button> → Button
Once you understand tags, elements, attributes, and nesting, you'll be able to start building real webpage structures.
Double Tap ❤️ For More
-----
1.24 ₽ · /balance_help | 1 451 |
| 5 | 🌐 Web Development Roadmap — Part 13
HTML Syntax, Tags & Elements
Now that you understand what HTML is, let's learn how HTML actually works.
1. What is an HTML Tag?
A tag tells the browser what type of content something is.
Example:
<h1>Hello World</h1>
Here:
<h1> → opening tag
Hello World → content
</h1> → closing tag
The complete structure is called an HTML element.
2. HTML Element
An HTML element usually looks like this:
<tag>Content</tag>
For example:
<p>This is a paragraph.</p>
<h2>About Me</h2>
<button>Click Me</button>
Think of an element as a complete building block of a webpage.
3. Opening and Closing Tags
Most HTML elements have both.
<p>Hello</p>
Opening:
<p>
Closing:
</p>
Notice the / in the closing tag.
4. Some Tags Don't Need a Closing Tag
Some HTML elements are void elements.
Example:
<img src="photo.jpg" alt="My photo">
<br>
<hr>
They don't have a separate closing tag.
5. HTML Attributes
Attributes provide additional information about an element.
Example:
<a href="https://example.com">Visit Website</a>
Here:
href="https://example.com" is an attribute.
Another example:
<img src="profile.jpg" alt="Profile photo">
The image has two attributes:
src → location of the image
alt → description of the image
6. Attributes Usually Go Inside the Opening Tag
Correct:
<p class="description">Hello</p>
Incorrect:
<p>Hello</p class="description">
7. Nesting Elements
HTML elements can be placed inside other elements.
Example:
<div>
<h1>My Website</h1>
<p>Welcome to my website.</p>
</div>
Here:
<div>
├── <h1>
└── <p>
The <h1> and <p> elements are inside the <div>.
8. Proper Nesting Matters
Correct:
<p>
Hello <strong>World</strong>
</p>
Incorrect:
<p>
Hello <strong>World</p></strong>
HTML elements should be properly nested.
9. HTML Comments
Comments allow developers to leave notes in their code.
<!-- This is a comment -->
The browser doesn't display the comment as webpage content.
Example:
<!-- Website heading -->
<h1>My Portfolio</h1>
10. A Simple HTML Example
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
<h1>Welcome to My Portfolio</h1>
<p>I am learning web development.</p>
<a href="about.html">About Me</a>
</body>
</html> | 1 216 |
| 6 | It can contain things such as:
• Page title
• Metadata
• Links to CSS
• Other information used by the browser
We'll explore the <head> in detail later.
9️⃣ <body>
The <body> contains the main content displayed on the webpage.
For example:
<body>
<h1>Welcome</h1>
<p>This is my website.</p>
</body>
The user can see this content in the browser.
A simple way to remember:
<html>
│
├── <head>
│ → Information about the page
│
└── <body>
→ Visible page content
🔟 <!DOCTYPE html>
You'll usually see this at the beginning of an HTML document:
<!DOCTYPE html>
It tells the browser that the document uses modern HTML standards.
It's a doctype declaration, not an ordinary HTML element.
🌐 Real-World Example
Imagine you're building a portfolio.
You might start with:
<h1>Deepak's Portfolio</h1>
<p>
Welcome to my portfolio website.
</p>
<h2>My Projects</h2>
<p>
Here are some of the projects I have built.
</p>
HTML provides the structure:
Portfolio
↓
Introduction
↓
Projects
↓
Project information
Later, CSS will make this structure visually appealing.
JavaScript can then add interactive behaviour.
🧩 HTML + CSS + JavaScript
Think about a car:
HTML → The structure
Provides the basic parts:
• Body
• Seats
• Wheels
• Dashboard
CSS → The appearance
Controls:
• Colors
• Size
• Design
• Layout
JavaScript → Behaviour
Controls things such as:
• Interactive controls
• Dynamic behaviour
• Responses to user actions
Together, they form the foundation of frontend web development.
🧠 Key Points to Remember
• HTML = HyperText Markup Language
• HTML structures webpage content.
• HTML is a markup language, not a programming language.
• HTML uses elements and tags.
• <head> contains information about the document.
• <body> contains the main visible webpage content.
• <!DOCTYPE html> declares the document type.
• HTML provides structure, CSS provides styling, and JavaScript provides behaviour.
Double Tap ❤️ For More
-----
1.45 ₽ · /balance_help | 2 732 |
| 7 | 🌐 Web Development Roadmap — Part 12
🏗️ HTML — What Is HTML and Why Do We Need It?
HTML is the first major technology we'll learn for building websites.
1️⃣ What Is HTML?
HTML stands for:
HyperText Markup Language
HTML is the standard markup language used to structure content on webpages.
In simple words:
HTML tells the browser what content exists on a webpage and what each piece of content represents.
For example, a webpage might contain:
• A heading
• Paragraphs
• Images
• Links
• Buttons
• Lists
• Forms
• Tables
HTML provides the structure for these elements.
2️⃣ HTML Is Not a Programming Language
This is an important distinction.
HTML is a markup language, not a programming language.
HTML describes the structure and meaning of content.
For example:
<h1>My Portfolio</h1>
<p>Welcome to my website.</p>
There is no programming logic here.
We're simply telling the browser:
"This is a main heading."
and:
"This is a paragraph."
JavaScript, on the other hand, can perform programming logic:
let age = 25;
if (age >= 18) {
console.log("Adult");
}
So remember:
• HTML → Structure
• CSS → Appearance
• JavaScript → Behaviour and logic
3️⃣ How HTML Works
HTML uses elements to describe content.
For example:
<h1>Hello World</h1>
The browser interprets this as a heading.
Another example:
<p>Welcome to my website.</p>
The browser interprets this as a paragraph.
The browser then turns the HTML structure into the webpage you see.
4️⃣ HTML Elements
An HTML element commonly consists of:
<tag>Content</tag>
For example:
<p>Hello</p>
Here:
• <p> → Opening tag
• Hello → Content
• </p> → Closing tag
Together, they form an HTML element.
Another example:
<h1>Web Development</h1>
The entire thing is an HTML element.
5️⃣ HTML Tags
A tag is the markup used to define an element.
Examples:
• <h1>
• <p>
• <a>
• <img>
• <button>
Different tags represent different types of content.
For example:
<h1>My Website</h1>
h1 represents a heading.
<p>Hello everyone.</p>
p represents a paragraph.
<button>Login</button>
button represents a button.
6️⃣ A Simple HTML Page
A basic HTML document looks like this:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first webpage.</p>
</body>
</html>
Don't worry if you don't understand everything yet.
We'll learn each part separately.
For now, understand the overall structure.
7️⃣ <html>
The <html> element represents the root of the HTML document.
Most of your HTML page exists inside it.
<html>
...
</html>
Think of it as the outer container of the document.
8️⃣ <head>
The <head> contains information about the webpage that generally isn't displayed as the main page content.
For example:
<head>
<title>My Website</title>
</head> | 2 021 |
| 8 |  𝗙𝗥𝗘𝗘 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 𝗧𝗼 𝗟𝗲𝗮𝗿𝗻 𝗔𝗜 𝗶𝗻 𝟮𝟬𝟮𝟲🚀
Explore 6 free resources covering AI fundamentals, tools, deep learning, research and real-world applications.
✅ 100% Free Learning
✅ Beginner-Friendly
✅ AI • ML • Deep Learning
✅ Real-World Applications
🔗 𝗘𝘅𝗽𝗹𝗼𝗿𝗲 𝗙𝗥𝗘𝗘 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 👇
https://pdlink.in/4AFHq5R
📢 Share this valuable opportunity with your friends and classmates! | 1 416 |
| 9 | What is the main purpose of organizing files into folders? | 1 939 |
| 10 | What does a relative path describe? | 1 904 |
| 11 | What does ../ generally mean in a relative file path? | 1 741 |
| 12 | Which file is primarily used for styling a webpage? | 1 761 |
| 13 | Which file is primarily responsible for webpage structure? | 1 644 |
| 14 | Which file is commonly used as the main HTML page of a simple website? | 1 508 |
| 15 | What is a folder primarily used for? | 1 525 |
| 16 |  🎓 𝗛𝗔𝗥𝗩𝗔𝗥𝗗 𝗨𝗡𝗜𝗩𝗘𝗥𝗦𝗜𝗧𝗬 𝗙𝗥𝗘𝗘 𝗢𝗡𝗟𝗜𝗡𝗘 𝗖𝗢𝗨𝗥𝗦𝗘𝗦 😍
Dreaming of learning from one of the world’s most prestigious universities? Explore Harvard’s online courses and build valuable, career-ready skills from home!
💡 Beginner-friendly options
⏰ Learn at your own pace
🌍 Accessible online worldwide
🎯 Ideal for students, freshers and working professionals
🔗 𝗘𝘅𝗽𝗹𝗼𝗿𝗲 𝗙𝗥𝗘𝗘 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 👇
https://pdlink.in/4xPUdzU
📢 Share this valuable opportunity with your friends and classmates! | 1 563 |
| 17 | 10 Tools for Web Developers 🛠🚀 -
💻 Visual Studio Code - Lightweight code editor
🔍 Postman - API development and testing
🎨 CodePen - Front-end development playground
🐙 GitHub - Version control and collaboration
🎨 Figma - UI/UX design and prototyping
📊 Google Analytics - Website traffic analysis
🌐 Netlify - Easy web hosting and deployment
🔒 Auth0 - Authentication and authorization
📦 Webpack - Module bundler for modern JavaScript apps
📦 NPM - Node package manager for JavaScript libraries and tools
React ❤️ for more | 2 090 |
| 18 | Here:
../
means:
Go up one directory.
This concept becomes very important as projects become larger.
9️⃣ Common Project Folders
As applications become more complex, you'll encounter folders such as:
src/
components/
pages/
assets/
images/
styles/
utils/
services/
Their exact purpose depends on the project and framework.
For example:
src/
├── components/
├── pages/
├── services/
├── assets/
└── styles/
We'll learn these structures when we start working with React and larger applications.
🔟 A Real-World Project
A simple website might look like:
portfolio/
│
├── index.html
├── about.html
├── contact.html
│
├── css/
│ └── style.css
│
├── js/
│ └── script.js
│
└── images/
├── profile.jpg
└── project1.png
A larger modern application might eventually look more like:
my-app/
│
├── src/
│ ├── components/
│ ├── pages/
│ ├── services/
│ ├── assets/
│ └── styles/
│
├── public/
├── package.json
├── README.md
└── .gitignore
Don't worry about understanding all of these folders yet.
We'll introduce them when we actually need them.
🧠 Key Things to Remember
File → Stores information or code.
Folder → Organizes files.
index.html → Common default/main HTML document.
images/ → Can organize image files.
css/ → Can organize CSS files.
js/ → Can organize JavaScript files.
../ → Moves up one directory in a relative path.
A good project structure keeps code organized and makes applications easier to understand and maintain.
Double Tap ❤️ For Part 12
-----
1.29 ₽ · /balance_help | 1 719 |
| 19 | 🌐 Web Development Roadmap — Part 11
📁 Files, Folders & Project Structure
Before we start writing HTML
, CSS, and JavaScript, you need to understand how a web development project is organized.
A website isn't usually one giant file. A real project contains multiple files and folders, each with a specific purpose.
1️⃣ What Is a File?
A file is a container that stores information.
In web development, you'll commonly work with files such as:
.html
.css
.js
.json
.ts
.jsx
.tsx
For example:
index.html
style.css
script.js
Each file can have a different responsibility.
2️⃣ What Is a Folder?
A folder is used to organize files and other folders.
For example:
my-website/
│
├── index.html
├── style.css
├── script.js
│
├── images/
│ ├── logo.png
│ └── profile.jpg
│
└── pages/
├── about.html
└── contact.html
Here:
my-website/
is the main project folder.
Inside it are files and additional folders.
3️⃣ Why Do We Need Project Structure?
Imagine putting every file for a large application into one folder without organization.
You might eventually have:
100+ files
Finding the correct file would become difficult.
A good structure makes it easier to:
Find files
Understand the project
Maintain code
Work with other developers
Scale the application
4️⃣ The Basic Website Structure
For a beginner website, you can start with:
my-website/
│
├── index.html
├── style.css
└── script.js
Each file has a different job.
index.html
Contains the webpage structure.
<h1>My Website</h1>
<p>Welcome to my website.</p>
style.css
Controls the appearance.
h1 {
color: blue;
}
script.js
Adds behaviour.
console.log("Website loaded");
The browser can connect these files together.
5️⃣ The index.html File
You'll see index.html very often.
It is commonly used as the main or default HTML page of a website.
For example:
my-website/
│
└── index.html
When someone visits the main page of a simple website, the server may serve the index.html document.
It's a convention rather than a universal rule for every web application.
6️⃣ Organizing Images
Instead of putting every image directly in the project root, we can create an images folder.
my-website/
│
├── index.html
├── style.css
├── script.js
│
└── images/
├── logo.png
├── laptop.jpg
└── phone.jpg
Then HTML can reference an image inside that folder.
<img src="images/logo.png" alt="Logo">
The path:
images/logo.png
tells the browser where the image is located relative to the HTML file.
7️⃣ Multiple Pages
A website can contain multiple HTML pages.
For example:
my-website/
│
├── index.html
├── about.html
├── contact.html
│
├── css/
│ └── style.css
│
└── images/
└── logo.png
You could have:
index.html → Home
about.html → About
contact.html → Contact
This is a simple way to understand how multi-page websites are structured.
8️⃣ Relative Paths
Understanding file paths is extremely important.
Suppose you have:
project/
│
├── index.html
│
└── images/
└── logo.png
From index.html, you can reference the image using:
<img src="images/logo.png">
Now suppose you have:
project/
│
├── pages/
│ └── about.html
│
└── images/
└── logo.png
From about.html, you need to go up one folder first:
<img src="../images/logo.png"> | 1 485 |
| 20 |  𝗟𝗲𝘃𝗲𝗹 𝗨𝗽 𝗬𝗼𝘂𝗿 𝗦𝗸𝗶𝗹𝗹𝘀 𝘄𝗶𝘁𝗵 𝗧𝗵𝗲𝘀𝗲 𝗚𝗮𝗺𝗲-𝗖𝗵𝗮𝗻𝗴𝗶𝗻𝗴 𝗖𝗼𝘂𝗿𝘀𝗲𝘀!
Looking to learn practical, in-demand skills? These courses cover Generative AI, Cybersecurity, AI tools and Digital Marketing.
💫 Learn at your own pace
⚡Build career-relevant skills
🔥Practical learning opportunities
𝗘𝘅𝗽𝗹𝗼𝗿𝗲 𝘁𝗵𝗲 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 :-
https://pdlink.in/4z3vOYU
Save this post and share with your friends | 1 736 |
