Basic Web Development Handout
1. Introduction to Web Development
Web development involves creating websites or web applications. It consists of three
main technologies:
HTML (HyperText Markup Language) – Structure of the webpage.
CSS (Cascading Style Sheets) – Styling and layout.
JavaScript (JS) – Interactivity and dynamic behavior.
2. HTML: Structure of a Webpage
HTML defines the content and layout of a webpage using tags.
Basic HTML Template
html
Copy
Download
Run
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
Common HTML Tags
Tag Description
<h1>-<h6> Headings (h1 is largest)
<p> Paragraph text
<a> Hyperlink
<img> Image (e.g., <img src="pic.jpg">)
<ul>, <ol>, <li> Lists (unordered/ordered)
<div> Container for styling
<button> Clickable button
3. CSS: Styling the Webpage
CSS controls the appearance of HTML elements.
Ways to Apply CSS
1. Inline CSS (inside HTML tags)
html
Copy
Download
Run
<h1 style="color: blue;">Hello!</h1>
2. Internal CSS (inside <style> in <head>)
html
Copy
Download
Run
<style>
h1 { color: blue; }
</style>
3. External CSS (separate .css file)
html
Copy
Download
Run
<link rel="stylesheet" href="styles.css">
Basic CSS Syntax
css
Copy
Download
selector {
property: value;
}
Example:
css
Copy
Download
body {
font-family: Arial;
background-color: lightgray;
}
h1 {
color: blue;
text-align: center;
}
Common CSS Properties
Property Description
color Text color
font-size Text size (e.g., 16px)
margin Space outside an element
padding Space inside an element
background-color Background color
border Border around an element
4. JavaScript: Adding Interactivity
JavaScript makes webpages dynamic.
Basic JavaScript Example
html
Copy
Download
Run
<script>
function greet() {
alert("Hello, World!");
}
</script>
<button onclick="greet()">Click Me</button>
Common JavaScript Concepts
Variables
javascript
Copy
Download
let name = "Alice";
const age = 25;
Functions
javascript
Copy
Download
function sayHello() {
console.log("Hello!");
}
DOM Manipulation (Changing HTML content)
javascript
Copy
Download
document.getElementById("demo").innerHTML = "New Text";
Events
javascript
Copy
Download
button.addEventListener("click", function() {
alert("Button clicked!");
});
5. Putting It All Together
Example: Simple Interactive Page
HTML:
html
Copy
Download
Run
<!DOCTYPE html>
<html>
<head>
<title>Interactive Page</title>
<style>
body { font-family: Arial; text-align: center; }
button { padding: 10px 20px; background: blue; color: white; }
</style>
</head>
<body>
<h1 id="title">Welcome!</h1>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
document.getElementById("title").innerHTML = "Hello, JavaScript!"
;
}
</script>
</body>
</html>
6. Next Steps
Learn responsive design (e.g., Flexbox, Grid).
Explore frameworks like Bootstrap (CSS) and React (JavaScript).
Practice by building small projects (e.g., portfolio, calculator).
