Courses/HTML & CSS/Introduction to Web Development

Lesson 1 • Beginner

Introduction to Web Development

Learn the fundamentals of how websites work and what technologies power the web.

What You'll Learn

✓ What web development is and how websites work
✓ The difference between HTML, CSS, and JavaScript
✓ How to create your first HTML file
✓ Basic HTML structure and common elements
✓ Your first CSS styling
✓ The CSS Box Model fundamentals

Good News: No Installation Required!

To write HTML and CSS, you only need two things you already have:

A Text Editor

Notepad (Windows), TextEdit (Mac), or any code editor like VS Code

A Web Browser

Chrome, Firefox, Safari, or Edge — any browser works!

You can also practice directly on this website using the "Try It Yourself" sections — no setup needed!

Create Your First HTML File (Step-by-Step)

1Open a Text Editor

Windows: Search for "Notepad" in Start menu
macOS: Open TextEdit (set to Plain Text mode: Format → Make Plain Text)
Better option: Download VS Code (free, works on all systems)

2Type This Code

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>I just created my first webpage!</p>
</body>
</html>

3Save the File

Save it as index.html (make sure it ends with .html, not .txt)

Important: In Notepad, change "Save as type" to "All Files" before saving, otherwise it will add .txt at the end!

4Open in Browser

Double-click your index.html file — it will open in your default browser!

You should see "Hello, World!" displayed in your browser!

Congratulations — you just created your first website!

File Extension	What It Is	Opens With
`.html`	HTML document (structure)	Any web browser
`.css`	CSS stylesheet (styling)	Linked inside HTML
`.js`	JavaScript file (behavior)	Linked inside HTML

1) What Is Web Development?

Web development is the process of creating websites and web applications that run in a browser (like Chrome, Safari, or Firefox). Every website you've ever visited — Google, YouTube, Amazon, Instagram — is built using web technologies.

At its core, web development is about three main things:

Structure – what content exists on the page
Style – how that content looks
Behavior – how the page reacts to users

In this course, we focus on the first two:

✅ HTML → structure
✅ CSS → style
📝 JavaScript (behavior) comes later in a dedicated course

2) How the Web Actually Works

When you type a website address into your browser (for example: www.example.com), this happens:

Your browser sends a request to a server
The server responds with HTML, CSS, and sometimes JavaScript
Your browser reads the HTML, applies the CSS, and runs any JavaScript
The final page is displayed on your screen

Think of it like this:

🦴 HTML = the skeleton of a body
👗 CSS = the clothes, colors, and appearance
🧠 JavaScript = the muscles and brain

Without HTML, nothing exists. Without CSS, everything looks ugly.

3) What Is HTML?

HTML stands for HyperText Markup Language.

Important:

❌ HTML is not a programming language
❌ It does not do logic, math, or decision-making
✅ HTML's only job is to describe content

Examples of content HTML describes:

• Headings
• Paragraphs
• Images
• Buttons
• Links
• Forms

HTML uses tags to describe elements.

4) Basic HTML Structure (Every Page Needs This)

Every HTML page follows the same basic structure. Try it yourself!

HTML Page Structure

Edit and run this basic HTML page to see your changes live

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first website.</p>
    <p>Try changing this text and click Run!</p>
  </body>
</html>

<!DOCTYPE html>

Tells the browser: "This is a modern HTML5 document."

<html>

Wraps the entire website. Everything must be inside this tag.

<head>

Contains information about the page (title, meta info, CSS links) — not visible content.

<body>

Where everything visible goes — text, images, buttons.

5) Common HTML Elements (You Will Use These A LOT)

HTML Elements Playground

Experiment with headings, paragraphs, links, images, and lists

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>HTML Elements</title>
</head>
<body>
  <!-- Headings - h1 is most important -->
  <h1>Main Heading</h1>
  <h2>Sub Heading</h2>
  <h3>Smaller Heading</h3>

  <!-- Paragraphs -->
  <p>This is a paragraph of text.</p>

  <!-- Links -->
  <p>Visit <a href="https://google.com">Google</a></p>

  <!-- Images -->
  <img src="https://via.placeholder.com/150" alt="Placeholder image">

  <!-- Lists -->
  <h3>My Favorite Fruits:</h3>
  <ul>
    <li>Apple</li>
    <li>B
...

Key elements:

<h1> to <h6> - Headings (h1 is the most important)
<p> - Paragraphs of text
<a href="..."> - Links to other pages
<img src="..." alt="..."> - Images
<ul> / <ol> - Lists (unordered/ordered)

6) HTML Attributes

Attributes give extra information to elements.

HTML Attributes

See how attributes modify element behavior

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>HTML Attributes</title>
</head>
<body>
  <h1>HTML Attributes Demo</h1>

  <!-- Input with type and placeholder -->
  <input type="text" placeholder="Enter your name">
  <br><br>
  <input type="email" placeholder="Enter your email">
  <br><br>

  <!-- Link that opens in new tab -->
  <a href="https://example.com" target="_blank">
    Open in new tab
  </a>
  <br><br>

  <!-- Div with id and class -->
  <div id="main" class="container">
    <p>This div has an
...

Common attributes:

type - input type
placeholder - hint text
href - link destination
src - image source
id - unique identifier
class - CSS styling hook

You will use class and id heavily with CSS.

7) What Is CSS?

CSS stands for Cascading Style Sheets.

CSS controls:

🎨 Colors
✍️ Fonts
📏 Spacing
📐 Layout
📱 Responsiveness
✨ Animations

Remember:

HTML creates the content. CSS makes it look professional.

8) Basic CSS Example

Your First CSS

Style a page with colors, fonts, and backgrounds

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>CSS Demo</title>
  <style>
    body {
      background-color: #1a1a2e;
      color: white;
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    
    h1 {
      color: #00d4ff;
    }
    
    p {
      font-size: 18px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Styled with CSS!</h1>
  <p>This page has a dark background, white text, and a blue heading.</p>
  <p>Try changing the colors and see what happens!</p>
</body>
</html
...

This example shows:

⬛ Dark background (#1a1a2e)
⬜ White text
💙 Blue heading (#00d4ff)
🔤 Arial font

9) How CSS Is Applied (3 Ways)

CSS Application Methods

Compare inline, internal, and external CSS approaches

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>CSS Methods</title>
  <!-- 2. Internal CSS (in head) - Better -->
  <style>
    .internal-styled {
      color: #22c55e;
      font-weight: bold;
    }
  </style>
</head>
<body style="background: #0f172a; padding: 20px; font-family: sans-serif; color: white;">

  <h1>Three Ways to Apply CSS</h1>

  <!-- 1. Inline CSS - NOT recommended -->
  <p style="color: #ef4444;">
    1. Inline CSS (NOT recommended) - Hard to maintain
  </p>

  <!-- 2. Internal CSS - Be
...

1. Inline (NOT recommended)

Bad for real projects — hard to maintain.

2. Internal CSS

Better, but still not ideal for larger projects.

3. External CSS (BEST PRACTICE ✅)

This is how real websites are built.

10) CSS Selectors (Very Important)

Selectors tell CSS what to style.

CSS Selectors

Learn element, class, and ID selectors

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>CSS Selectors</title>
  <style>
    body {
      background: #0f172a;
      color: white;
      font-family: sans-serif;
      padding: 20px;
    }

    /* Element selector - styles ALL p tags */
    p {
      color: #94a3b8;
    }

    /* Class selector - reusable */
    .highlight {
      background: #22c55e;
      color: #0f172a;
      padding: 8px 12px;
      border-radius: 4px;
    }

    /* ID selector - unique */
    #main-title {
      color: #3b82f
...

Key differences:

Element: Styles all elements of that type
Class (.name): Reusable, can apply to many elements
ID (#name): Should be unique per page

11) The Box Model (Core Concept)

Every element is a box. The box has:

📦 Content – the actual text/image
🔲 Padding – space inside the border
🖼️ Border – the edge of the box
↔️ Margin – space outside the border

Box Model Visualization

See padding, margin, and borders in action

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>Box Model</title>
  <style>
    body {
      background: #0f172a;
      color: white;
      font-family: sans-serif;
      padding: 20px;
    }

    .box {
      background: #1e293b;
      padding: 20px;
      margin: 20px;
      border: 3px solid #3b82f6;
      border-radius: 8px;
    }

    .inner-box {
      background: #334155;
      padding: 15px;
      border: 2px dashed #22c55e;
    }
  </style>
</head>
<body>
  <h1>The Box Model</h1>
  
  <div class
...

Understanding this is mandatory for layout.

12) What You'll Learn in This Course

✓Complete HTML elements and attributes
✓CSS styling, colors, fonts, and spacing
✓Layouts using Flexbox and CSS Grid
✓Responsive design for all screen sizes
✓Animations and transitions
✓Best practices used by professionals

Key Takeaways

✓HTML provides structure (the skeleton)
✓CSS provides style (the appearance)
✓Every HTML page needs: DOCTYPE, html, head, body
✓CSS uses selectors to target elements
✓The Box Model controls spacing (padding, margin, border)

Introduction to Web Development

What You'll Learn

Good News: No Installation Required!

Create Your First HTML File (Step-by-Step)

1) What Is Web Development?

2) How the Web Actually Works

3) What Is HTML?

4) Basic HTML Structure (Every Page Needs This)

HTML Page Structure

5) Common HTML Elements (You Will Use These A LOT)

HTML Elements Playground

6) HTML Attributes

HTML Attributes

7) What Is CSS?

8) Basic CSS Example

Your First CSS

9) How CSS Is Applied (3 Ways)

CSS Application Methods

1. Inline (NOT recommended)

2. Internal CSS

3. External CSS (BEST PRACTICE ✅)

10) CSS Selectors (Very Important)

CSS Selectors

11) The Box Model (Core Concept)

Box Model Visualization

12) What You'll Learn in This Course

Key Takeaways

Cookie & Privacy Settings