1.6: Introduction to Web Technologies

Introduction to Web Technologies

1. The Three Pillars of Web Development

Web development relies on three core technologies working together:

The House Analogy

HTML = Structure (walls, rooms, doors)
CSS = Presentation (paint, furniture, decorations)
JavaScript = Behavior (lights, plumbing, electricity)

1. HTML (HyperText Markup Language)

Purpose: Structure and content

What it does:

Defines headings, paragraphs, links
Creates forms, tables, lists
Embeds images and videos
Provides document structure

Example:

<h1>Welcome</h1>
<p>This is a paragraph.</p>
<button>Click Me</button>

2. CSS (Cascading Style Sheets)

Purpose: Presentation and styling

What it does:

Sets colors, fonts, spacing
Creates layouts (Flexbox, Grid)
Adds animations and transitions
Makes sites responsive

Example:

h1 {
  color: blue;
  font-size: 32px;
}

button {
  background-color: green;
  padding: 10px 20px;
  border-radius: 5px;
}

3. JavaScript

Purpose: Behavior and interactivity

What it does:

Responds to user actions (clicks, typing)
Manipulates HTML content dynamically
Fetches data from servers (AJAX)
Validates forms
Creates animations and effects

Example:

const button = document.querySelector('button')

button.addEventListener('click', () => {
  alert('Button clicked!')
})

2. Separation of Concerns

Best Practice: Keep HTML, CSS, and JavaScript in separate files.

Why Separate?

❌ Bad: Everything in one file

<html>
<head>
  <style>
    h1 { color: red; }
  </style>
</head>
<body>
  <h1 onclick="alert('Hi')">Title</h1>
</body>
</html>

Problems:

Hard to maintain
Can't reuse styles/scripts
Difficult to debug
Poor performance (no caching)

✅ Good: Separate files

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="title">Title</h1>
  <script src="script.js"></script>
</body>
</html>

style.css

h1 {
  color: red;
}

script.js

document.getElementById('title').addEventListener('click', () => {
  alert('Hi')
})

Benefits:

✅ Organized and maintainable
✅ Reusable across pages
✅ Easier debugging
✅ Better performance (caching)
✅ Team collaboration

3. Creating Your First Webpage

Let's build a complete webpage from scratch!

Step 1: HTML Structure

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Webpage</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Header -->
  <header>
    <h1>Welcome to My Website</h1>
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content -->
  <main>
    <!-- About Section -->
    <section id="about">
      <h2>About Me</h2>
      <p>I'm learning web development and building awesome websites!</p>
      <img src="https://via.placeholder.com/400x200" alt="Placeholder">
    </section>

    <!-- Services Section -->
    <section id="services">
      <h2>What I Do</h2>
      <div class="service-cards">
        <div class="card">
          <h3>Web Design</h3>
          <p>Creating beautiful websites</p>
        </div>
        <div class="card">
          <h3>Development</h3>
          <p>Building functional applications</p>
        </div>
        <div class="card">
          <h3>Consulting</h3>
          <p>Helping others succeed</p>
        </div>
      </div>
    </section>

    <!-- Contact Section -->
    <section id="contact">
      <h2>Get in Touch</h2>
      <form id="contact-form">
        <div class="form-group">
          <label for="name">Name:</label>
          <input type="text" id="name" name="name" required>
        </div>

        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" id="email" name="email" required>
        </div>

        <div class="form-group">
          <label for="message">Message:</label>
          <textarea id="message" name="message" rows="4" required></textarea>
        </div>

        <button type="submit">Send Message</button>
      </form>
    </section>
  </main>

  <!-- Footer -->
  <footer>
    <p>&copy; 2025 My Website. All rights reserved.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

Step 2: CSS Styling

style.css

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* Header */
header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2rem 0;
  text-align: center;
}

header h1 {
  margin-bottom: 1rem;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: opacity 0.3s;
}

nav a:hover {
  opacity: 0.8;
}

/* Main Content */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

section {
  margin-bottom: 4rem;
}

h2 {
  color: #667eea;
  margin-bottom: 1rem;
  font-size: 2rem;
}

/* Service Cards */
.service-cards {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.card {
  flex: 1;
  padding: 2rem;
  background: #f4f4f4;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card h3 {
  color: #764ba2;
  margin-bottom: 0.5rem;
}

/* Contact Form */
.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
}

input,
textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #667eea;
}

button[type="submit"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.3s;
}

button[type="submit"]:hover {
  opacity: 0.9;
}

/* Footer */
footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 2rem 0;
  margin-top: 4rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .service-cards {
    flex-direction: column;
  }

  nav ul {
    flex-direction: column;
    gap: 1rem;
  }
}

Step 3: JavaScript Interactivity

script.js

// Smooth scrolling for navigation links
document.querySelectorAll('nav a').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault()

    const targetId = this.getAttribute('href').substring(1)
    const targetSection = document.getElementById(targetId)

    targetSection.scrollIntoView({
      behavior: 'smooth'
    })
  })
})

// Form submission
const contactForm = document.getElementById('contact-form')

contactForm.addEventListener('submit', function(e) {
  e.preventDefault()

  // Get form values
  const name = document.getElementById('name').value
  const email = document.getElementById('email').value
  const message = document.getElementById('message').value

  // Simple validation
  if (name && email && message) {
    // In a real app, you'd send this to a server
    alert(`Thank you, ${name}! Your message has been sent.`)

    // Reset form
    contactForm.reset()
  } else {
    alert('Please fill in all fields.')
  }
})

// Add fade-in animation on scroll
const observerOptions = {
  threshold: 0.1
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.style.opacity = '1'
      entry.target.style.transform = 'translateY(0)'
    }
  })
}, observerOptions)

// Observe all sections
document.querySelectorAll('section').forEach(section => {
  section.style.opacity = '0'
  section.style.transform = 'translateY(20px)'
  section.style.transition = 'opacity 0.6s, transform 0.6s'
  observer.observe(section)
})

// Console greeting
console.log('Welcome to my website! 👋')
console.log('Built with HTML, CSS, and JavaScript')

4. How They Work Together

The Loading Process

1. Browser requests HTML file
         ↓
2. Browser parses HTML
         ↓
3. Finds <link> tag → downloads CSS
         ↓
4. Finds <script> tag → downloads JavaScript
         ↓
5. Browser applies CSS styles
         ↓
6. JavaScript executes
         ↓
7. Page is interactive

The Rendering Pipeline

HTML → DOM Tree
CSS → CSSOM Tree
         ↓
   Render Tree
         ↓
     Layout
         ↓
      Paint
         ↓
    Composite
         ↓
   Visible Page

5. Common Patterns

Pattern 1: Selecting Elements

HTML:

<div id="myId" class="myClass">Content</div>

JavaScript:

// By ID
const element = document.getElementById('myId')

// By class
const elements = document.querySelectorAll('.myClass')

// By tag
const divs = document.getElementsByTagName('div')

// CSS selector (most flexible)
const el = document.querySelector('#myId')

Pattern 2: Modifying Content

// Change text
element.textContent = 'New text'
element.innerHTML = '<strong>Bold text</strong>'

// Change styles
element.style.color = 'red'
element.style.display = 'none'

// Add/remove classes
element.classList.add('active')
element.classList.remove('hidden')
element.classList.toggle('dark-mode')

Pattern 3: Event Handling

// Click event
button.addEventListener('click', () => {
  console.log('Clicked!')
})

// Input event
input.addEventListener('input', (e) => {
  console.log('Value:', e.target.value)
})

// Form submit
form.addEventListener('submit', (e) => {
  e.preventDefault()  // Stop default behavior
  // Handle form data
})

// Keyboard event
document.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    console.log('Enter pressed')
  }
})

6. Debugging Your First Webpage

Common HTML Errors

1. Unclosed Tags

<!-- ❌ Wrong -->
<p>Paragraph
<p>Another</p>

<!-- ✅ Correct -->
<p>Paragraph</p>
<p>Another</p>

2. Missing Required Attributes

<!-- ❌ Wrong -->
<img src="photo.jpg">

<!-- ✅ Correct -->
<img src="photo.jpg" alt="Description">

Common CSS Errors

1. Missing Semicolons

/* ❌ Wrong */
color: red
background: blue;

/* ✅ Correct */
color: red;
background: blue;

2. Wrong Selector

/* HTML: <div class="container"> */

/* ❌ Wrong (# is for IDs) */
#container {
  width: 100%;
}

/* ✅ Correct (. is for classes) */
.container {
  width: 100%;
}

Common JavaScript Errors

1. Selecting Element Before DOM Loads

// ❌ Wrong (script in <head>)
const button = document.querySelector('button')  // null!

// ✅ Correct (script at end of <body>)
// Or use:
document.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('button')  // Works!
})

2. Case Sensitivity

// ❌ Wrong
document.getelementbyid('myid')  // TypeError

// ✅ Correct
document.getElementById('myId')  // Works

7. Practical Exercises

Exercise 1.6.1: Build the Example

Create the three files (HTML, CSS, JS) from this lesson
Open with Live Server
Test all functionality:
- Smooth scrolling navigation
- Hover effects on cards
- Form submission
- Responsive design (resize browser)

Exercise 1.6.2: Add Your Content

Modify the webpage:

Change the title and headings
Add your own text content
Replace the placeholder image
Add a new section
Change the color scheme (CSS variables)

Exercise 1.6.3: Add Interactivity

Add these features with JavaScript:

// 1. Dark mode toggle
const toggleButton = document.createElement('button')
toggleButton.textContent = '🌓 Dark Mode'
document.body.prepend(toggleButton)

toggleButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode')
})

// 2. Character counter for textarea
const textarea = document.getElementById('message')
const counter = document.createElement('span')
textarea.after(counter)

textarea.addEventListener('input', () => {
  counter.textContent = `${textarea.value.length} characters`
})

// 3. Scroll to top button
const scrollTop = document.createElement('button')
scrollTop.textContent = '↑ Top'
scrollTop.style.position = 'fixed'
scrollTop.style.bottom = '20px'
scrollTop.style.right = '20px'
document.body.appendChild(scrollTop)

scrollTop.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
})

Exercise 1.6.4: Debug Challenge

Fix this broken code:

<!-- Find and fix 5 errors -->
<!DOCTYPE html>
<html>
<head>
  <title>Broken Page
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome</h1>
  <p>This is a <div>paragraph</div><p>
  <img src="photo.jpg">
  <button onclick="doSomething()">Click</button>

  <script>
    function doSomething() {
      alert('Hello World)
    }
  <script>
</body>
</html>

8. Knowledge Check

Question 1: What are the three core web technologies?

Show answer

HTML (structure), CSS (presentation), JavaScript (behavior)

Question 2: Why should HTML, CSS, and JavaScript be in separate files?

Show answer

Better organization, reusability, maintainability, performance (caching), and easier debugging

Question 3: Where should the <script> tag be placed and why?

Show answer

At the end of `` (before closing tag), so DOM elements are loaded before JavaScript tries to access them

Question 4: What does e.preventDefault() do?

Show answer

Prevents the default browser behavior (e.g., stops form submission or link navigation)

Question 5: What's the difference between textContent and innerHTML?

Show answer

`textContent` sets plain text only; `innerHTML` can set HTML markup (but has security risks with user input)

✅ HTML, CSS, and JavaScript work together to create web pages ✅ HTML provides structure, CSS adds styling, JavaScript adds interactivity ✅ Separation of concerns keeps code organized and maintainable ✅ Link files using <link> for CSS and <script> for JavaScript ✅ DOM manipulation allows JavaScript to change HTML content dynamically ✅ Event listeners respond to user interactions ✅ Debugging is essential - use DevTools and console ✅ Progressive enhancement ensures basic functionality for all users