Complete Web Development Study Guide

🌐 Overview

Web development is the process of building websites and web applications. Every website you visit is built using three core technologies that work together.

The Web Development Stack

🎭 JavaScript — Behavior (Interactivity)

🎨 CSS — Presentation (Styling)

📄 HTML — Structure (Content)

🧠 Think of it Like Building a House

HTML = Walls & Rooms • CSS = Paint & Decoration • JS = Electricity & Plumbing

📄 HTML (HyperText Markup Language)

HTML provides the structure and content of a webpage. It uses "tags" to define different elements like headings, paragraphs, images, and links.

Basic HTML Structure

                    HTML
                    
<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>Welcome to my website.</p>
  </body>
</html>
                    
                

Common HTML Tags

Tag	Purpose	Example
`<h1>`-`<h6>`	Headings (1 = largest)	`<h1>Title</h1>`
`<p>`	Paragraph	`<p>Text here</p>`
`<a>`	Link	`<a href="url">Click</a>`
`<img>`	Image	`<img src="photo.jpg">`
`<div>`	Container/section	`<div>Content</div>`
`<ul>` / `<ol>`	Lists	`<ul><li>Item</li></ul>`
`<button>`	Clickable button	`<button>Click Me</button>`
`<input>`	Form input	`<input type="text">`

💡 Self-Closing Tags

Some tags don't need closing: <img>, <br>, <input>. These are called void elements.

🎨 CSS (Cascading Style Sheets)

CSS controls how HTML elements look—colors, fonts, spacing, layouts, and more.

CSS Syntax

                    CSS
                    
selector {
  property: value;
  another-property: value;
}

/* Example */
h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}
                    
                

CSS Selectors

Selector	Selects	Example
`element`	All elements of that type	`p { color: red; }`
`.class`	Elements with that class	`.highlight { background: yellow; }`
`#id`	Element with that ID	`#header { height: 100px; }`
`*`	All elements	`* { margin: 0; }`

Common CSS Properties

Property	What it Does	Example
`color`	Text color	`color: #333;`
`background`	Background color/image	`background: #fff;`
`font-size`	Text size	`font-size: 16px;`
`padding`	Space inside element	`padding: 10px;`
`margin`	Space outside element	`margin: 20px;`
`border`	Border around element	`border: 1px solid black;`
`display`	Layout type	`display: flex;`

🧠 Box Model: "MBPC"

Margin → Border → Padding → Content (outside to inside)

⚡ JavaScript

JavaScript makes websites interactive. It can respond to clicks, update content, validate forms, and much more.

Adding JavaScript to HTML

                    HTML
                    
<!-- At bottom of body (recommended) -->
<script>
  alert("Hello!");
</script>

<!-- Or link external file -->
<script src="script.js"></script>
                    
                

DOM Manipulation

The DOM (Document Object Model) lets JavaScript access and modify HTML elements.

                    JavaScript
                    
// Select an element
let heading = document.querySelector("h1");

// Change its text
heading.textContent = "New Title!";

// Change its style
heading.style.color = "red";

// Add a click event
heading.addEventListener("click", function() {
  alert("You clicked the heading!");
});
                    
                

📖 Interactive Button Example

                        HTML + JS
                        
<button id="myBtn">Click Me</button>
<p id="counter">Clicks: 0</p>

<script>
  let count = 0;
  let btn = document.getElementById("myBtn");
  let display = document.getElementById("counter");

  btn.addEventListener("click", function() {
    count++;
    display.textContent = "Clicks: " + count;
  });
</script>
                        
                    

📱 Responsive Design

Responsive design makes websites work well on all screen sizes—phones, tablets, and desktops.

Media Queries

                    CSS
                    
/* Default styles for all screens */
.container {
  width: 100%;
  padding: 20px;
}

/* Styles for screens 768px and wider (tablets+) */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* Styles for screens 1024px and wider (desktops) */
@media (min-width: 1024px) {
  .container {
    width: 960px;
  }
}
                    
                

💡 Mobile-First Approach

Start designing for mobile screens, then use media queries to add styles for larger screens. This ensures a good experience on all devices.

✏️ Practice Problems

Problem 1 Easy

Create an HTML page with a heading "My Hobbies" and an unordered list of 3 hobbies.

                            HTML
                            
<!DOCTYPE html>
<html>
<head>
  <title>My Hobbies</title>
</head>
<body>
  <h1>My Hobbies</h1>
  <ul>
    <li>Reading</li>
    <li>Gaming</li>
    <li>Cooking</li>
  </ul>
</body>
</html>
                            
                        

Problem 2 Medium

Write CSS to make all paragraphs have gray text (#666), 18px font size, and 1.5 line height.

                            CSS
                            
p {
  color: #666;
  font-size: 18px;
  line-height: 1.5;
}
                            
                        

Problem 3 Hard

Create a button that, when clicked, toggles the background color of the page between white and dark gray (#333).

                            HTML + JS
                            
<button id="toggleBtn">Toggle Dark Mode</button>

<script>
  let isDark = false;
  let btn = document.getElementById("toggleBtn");

  btn.addEventListener("click", function() {
    if (isDark) {
      document.body.style.backgroundColor = "white";
      document.body.style.color = "black";
    } else {
      document.body.style.backgroundColor = "#333";
      document.body.style.color = "white";
    }
    isDark = !isDark;
  });
</script>
                            
                        