Web Development Overview
Web development involves building websites and web applications using different technologies. Key technologies include HTML, CSS, JavaScript, and Python frameworks such as Flask and Django.
1. HTML (HyperText Markup Language)
Defines webpage structure with elements like headings, paragraphs, links, images, and forms.
Basic HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
<a href="https://www.google.com">Click here to visit Google</a>
</body>
</html>
Common HTML Tags:
<h1> to <h6> → Headings
<p> → Paragraph
<a href="URL"> → Link
<img src="image.jpg" alt="Description"> → Image
<ul> and <li> → Unordered List
<table> → Table
<form> → User input forms
2. CSS (Cascading Style Sheets)
Used to style HTML elements for better visual representation.
Basic CSS Syntax:
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
p {
font-size: 18px;
color: gray;
}
Applying CSS:
1. Inline CSS
2. Internal CSS
3. External CSS
3. JavaScript (JS) – For Interactivity
Enables dynamic content and interactivity on web pages.
Basic JavaScript Example:
<button onclick="sayHello()">Click Me</button>
<script>
function sayHello() {
alert("Hello, world!");
}
</script>
Common Uses:
DOM manipulation
Form validation
Animations
AJAX calls
4. Python for Web Development
Ideal for backend development; popular frameworks include Flask and Django.
Flask Example:
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return "Hello, World!"
if __name__ == '__main__':
app.run(debug=True)
Django Setup:
1. Install Django
2. Create a project
3. Run the server
5. Full-Stack Web Development
Frontend: HTML + CSS + JavaScript
Backend: Python (Flask/Django)
Databases: SQLite, PostgreSQL, MySQL
APIs: Connect frontend and backend
6. Example: Simple Webpage with Flask
1. Create Flask App (app.py):
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
2. HTML Template (templates/index.html):
<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Flask Website</title>
</head>
<body>
<h1>Welcome to My Flask Website</h1>
</body>
</html>
7. Additional Tools
Frameworks: Bootstrap, jQuery
Version Control: Git/GitHub
APIs: Handling external services
Security: HTTPS for data encryption
Knowt
Note
Studied by 45 people
