Web Development
-----------------------------------------------------------------------------------------------------------------------------------
1. Introduction to Web Development
Web development involves creating websites and web applications. It is divided into three main
categories:
1. Front-End Development: The user interface and user experience (HTML, CSS, JavaScript).
2. Back-End Development: Server-side logic and database interaction (Node.js, PHP, Python, etc.).
3. Full-Stack Development: A combination of front-end and back-end development.
2. Basic Structure of a Web Page (HTML)
HTML (HyperText Markup Language)
HTML is used to create the structure of web pages. Here’s a basic template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Website</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<p>This is a sample paragraph.</p>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
Key HTML Tags
• <html>: Root element.
• <head>: Contains metadata and links.
• <body>: Contains visible page content.
• <h1> to <h6>: Headings.
• <p>: Paragraph.
• <a href="URL">: Hyperlink.
• <img src="path" alt="description">: Image.
• <ul> and <li>: Unordered list.
• <ol> and <li>: Ordered list.
• <table>, <tr>, <td>, <th>: Tables.
• <form>: User input form.
3. Styling Web Pages (CSS)
CSS (Cascading Style Sheets)
CSS is used to style HTML elements. Example:
/* External CSS */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
}
p {
line-height: 1.5;
margin: 20px;
}
Ways to Add CSS
1. Inline CSS: <p style="color: red;">This is red text.</p>
2. Internal CSS: <style>
body {
background-color: lightblue;
}
</style>
3. External CSS: <link rel="stylesheet" href="styles.css">
CSS Properties
• color: Text color.
• background-color: Background color.
• margin: Space outside the element.
• padding: Space inside the element.
• border: Adds a border.
• font-size: Sets the font size.
• text-align: Aligns text (left, center, right).
Responsive Design
Use media queries to make the website responsive:
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
4. Adding Interactivity (JavaScript)
JavaScript Basics
JavaScript adds interactivity to websites.
// Example: Button Click Event
document.getElementById("myButton").addEventListener("click", function() {
alert("Button was clicked!");
});
Ways to Add JavaScript
1. Inline: <button onclick="alert('Clicked!')">Click Me</button>
2. Internal: <script>
console.log("Hello, JavaScript!");
</script>
3. External: <script src="script.js"></script>
5. Advanced Front-End Tools
1. Bootstrap
A popular CSS framework for responsive design.
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<button class="btn btn-primary">Bootstrap Button</button>
2. JavaScript Libraries (e.g., jQuery)
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
</script>
6. Back-End Development Basics
Common Back-End Languages
1. Node.js: JavaScript runtime for server-side programming.
2. PHP: Server-side scripting language.
3. Python: Popular with Django and Flask frameworks.
4. Ruby: Used with the Rails framework.
Database Integration
• Relational Databases: MySQL, PostgreSQL.
• NoSQL Databases: MongoDB, Firebase.
7. Tools for Web Development
1. IDEs
• Visual Studio Code
• Sublime Text
• Atom
2. Online Testing Platforms
• CodePen
• JSFiddle
3. Version Control
• Git and GitHub for version control and collaboration.
8. Sample Project Structure
MyWebsite/
│
├── index.html # Main HTML file
├── styles.css # CSS file
├── script.js # JavaScript file
└── images/ # Folder for images
9. Tips for Effective Web Development
1. Write Semantic HTML: Use proper tags for better accessibility and SEO.
2. Optimize Performance: Compress images, minify CSS/JS, and use caching.
3. Use Responsive Design: Ensure your site works on all devices.
4. Test Across Browsers: Check compatibility on Chrome, Firefox, Edge, and Safari.
