🌐 Web Development Roadmap — Part 10

🛠️ Developer Tools — The Tools Every Web Developer Needs

Web development isn't only about writing code. Developers also use a set of tools to write, inspect, test, debug, manage, and deploy their applications.

Let's understand the most important ones.

1️⃣ Code Editor

A code editor is where you write your code.

A popular choice is: Visual Studio Code (VS Code)

You can use it to write:

• HTML

• CSS

• JavaScript

• TypeScript

• React

• Node.js

• Python

• And many other languages

For example, you might have a project like:

my-website/

• index.html

• style.css

• script.js

You can open the entire folder in VS Code and work on all these files.

Useful VS Code features

• Syntax highlighting

• Code completion

• Extensions

• Integrated terminal

• Debugging

•

Search

across files

•

Git integration

We'll use a code editor extensively throughout this course.

2️⃣ Web Browser

We've already learned that browsers display websites.

For a developer, the browser is also a development tool.

Common choices include:

• Chrome

• Edge

• Firefox

• Safari

You'll use a browser to:

• Run your website

• Test functionality

• Check responsive layouts

• Inspect HTML and CSS

• Debug JavaScript

• Monitor network requests

3️⃣ Browser Developer Tools

Developer Tools are built directly into modern browsers.

You can usually open them by: Right-click → Inspect or by using a keyboard shortcut.

They provide several important tools.

Elements

Allows you to inspect HTML and CSS.

For example: <button>Buy Now</button>

You can inspect the button and see which CSS rules are affecting it.

You can even temporarily modify the CSS in Developer Tools and immediately see the result.

This is extremely useful when debugging layouts.

Console

The Console is mainly used for:

• JavaScript output

• Errors

• Warnings

• Debugging

For example: console.log("Hello Web Developer");

The message appears in the browser console.

Later, you'll use the Console frequently while learning JavaScript.

Network

The Network panel shows communication between the browser and servers.

You can see:

• Request

• Response

• URL

• Status code

• Request method

• Response data

• Loading time

For example: GET /products - 200 OK

This becomes particularly useful when working with APIs.

Application

The Application panel can help inspect browser-side storage and other resources, including:

• Cookies

• Local storage

• Session storage

• Cache-related information

We'll use this later when learning authentication and browser storage.

Sources

The Sources panel helps you inspect loaded source files and debug JavaScript.

4️⃣ Terminal

The terminal allows you to interact with your computer using commands rather than a graphical interface.

For example: mkdir my-project creates a folder.

You might also run commands such as:

• npm install

• npm run dev

Later, you'll use the terminal to:

• Create projects

• Install packages

• Run development servers

• Execute scripts

• Work with Git

• Build applications

• Deploy applications

You don't need to memorize commands now. We'll learn them gradually.

5️⃣ Package Manager

Modern web applications often use external libraries and packages.

A package manager helps developers install and manage them.

For JavaScript development, one of the most common package managers is: npm

For example: npm install express

This can install Express into a project.

We'll learn npm properly when we reach Node.js.

6️⃣ Git

Git is a version control system.

It tracks changes to your code.

Imagine you modify your application today and accidentally break something tomorrow.

With Git, you can keep a history of changes and potentially return to an earlier version.

A simplified workflow:

Write code → Save changes → Git commit → Continue working → More changes → Another commit

Git becomes essential when working professionally.

7️⃣ GitHub

GitHub is a platform for hosting Git repositories and collaborating on software projects.

You can use it to:

• Store your code

• Share projects

• Collaborate with developers

• Review changes

• Create pull requests

• Track issues

• Build a public developer portfolio

A typical workflow is: Your Computer → Git → GitHub → Remote Repository

We'll learn Git and GitHub in detail later.

8️⃣ API Testing Tools

When working with backend APIs, developers often need to send requests without using a frontend.

Tools such as Postman can help with this.

For example, you might send: GET /users and inspect the server's response.

This is useful when developing and debugging APIs.

We'll introduce API testing once we reach backend development.

9️⃣ Database Tools

When we start working with databases, we'll also use database clients and tools to:

• Create databases

• Create tables

• Run SQL queries

• Inspect data

• Debug database problems

For PostgreSQL, tools such as pgAdmin can provide a graphical interface.

We'll learn database tools when we reach the database section.

🔟 How These Tools Work Together

A typical beginner web development workflow might look like:

VS Code → Write Code → Web Browser → Developer Tools → Debug & Test → Git → GitHub

Later, when we become full-stack developers:

VS Code → Frontend + Backend → Browser → Developer Tools → API Testing → Database → Git → GitHub → Deployment

🧠 The Most Important Tools to Remember

At this stage, focus on these:

• VS Code → Write code

• Browser → Run and view websites

• Developer Tools → Inspect and debug websites

• Terminal → Run commands and development tools

• Git → Track code changes

• GitHub → Store and collaborate on code

• npm → Manage JavaScript packages

Double Tap ❤️ For Part 11

🌐 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">

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

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

🌐 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>

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

🌐 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>

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

🌐 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>

Much of this information isn't directly displayed as page content.

5. <title></strong><br>
The title usually appears in the browser tab.

It is also important for search engines and accessibility.

6. <body>

The <body> contains the main content users interact with and see.

Examples: Headings, Paragraphs, Images, Links, Buttons, Forms, Lists, Videos

7. <meta>

<meta> provides information about the document.

A very common example is: <meta charset="UTF-8">

You will also commonly see: <meta name="viewport" content="width=device-width, initial-scale=1.0">

This helps webpages display properly on mobile devices.


8. <link>

<link> is commonly used to connect external resources to the HTML document.

For example: <link rel="stylesheet" href="style.css">

9. Complete Example

<!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

🌐 Web Development Roadmap — Part 15

HTML Headings, Paragraphs & Text Formatting

Now let's learn the most common HTML elements used to display and organize text on a webpage.

1. HTML Headings

HTML provides six heading levels:

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Smaller Heading</h4>
<h5>Smaller Heading</h5>
<h6>Smallest Heading</h6>

The hierarchy is:

<h1> Most important

↓

<h2>

↓

<h3>

↓

<h4>

↓

<h5>

↓

<h6> Least important

2. <h1> — Main Heading

Usually, <h1> represents the main heading of a page.

<h1>My Portfolio</h1>

For example:

My Portfolio

─────────────

About Me

Projects

Contact

3. <h2> — Major Sections

Use <h2> for major sections under the main heading.

<h1>My Portfolio</h1>

<h2>About Me</h2>
<h2>My Projects</h2>
<h2>Contact</h2>

4. <h3> — Subsections

If a section contains smaller sections, use <h3>.

<h2>My Projects</h2>

<h3>Web Development Projects</h3>
<h3>JavaScript Projects</h3>

This creates a logical content hierarchy.

5. Paragraphs

Use <p> for normal paragraphs.

<p>
    I am learning web development and building websites.
</p>

Multiple paragraphs can be written separately:

<p>HTML provides the structure of a webpage.</p>

<p>CSS controls its appearance.</p>

<p>JavaScript adds interactivity.</p>

6. Bold Text

Use <strong> when the text has strong importance.

<p>
    <strong>Important:</strong> Save your work regularly.
</p>

The browser normally displays it in bold.

7. Italic or Emphasized Text

Use <em> to emphasize text.

<p>
    This is <em>very important</em>.
</p>

The browser normally displays emphasized text in italic.

8. <br> — Line Break

<br> moves content to the next line.

<p>
    Hello!<br>
    Welcome to my website.
</p>

Result:

Hello!

Welcome to my website.

However, <br> should not normally be used to create large spaces between sections. CSS should handle layout and spacing.

9. <hr> — Thematic Break

<hr> represents a thematic break between sections.

<h2>About Me</h2>
<p>Information about me.</p>

<hr>

<h2>Projects</h2>
<p>My recent projects.</p>

The browser normally displays a horizontal line.

10. <mark> — Highlighted Text

<p>
    Learn <mark>
HTML</mark> before moving to CSS.
</p>

The browser normally highlights the marked text.

11. <small> — Smaller Text

<p>
    Website Terms <small>Last updated in 2026</small>
</p>

It represents side comments or small print.

12. Putting Everything Together