Web Development Class Notes: Introduction to HTML and CSS
Course: Introduction to Web Development
Date: August 2025
Instructor: Prof. Sarah Kim
Institution: Virtual Tech Academy
---
1. Overview of Web Development
Web development involves creating websites using HTML (structure), CSS (styling),
and JavaScript (interactivity). These notes focus on HTML and CSS basics for
building static web pages.
2. HTML Basics
- Definition: HyperText Markup Language defines the structure of a webpage.
- Key Elements:
- Tags: <html>, <head>, <body>, <div>, <p>, <h1>–<h6>.
- Attributes: id, class, src, href.
- Example:
```
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
3. CSS Basics
- Definition: Cascading Style Sheets style HTML elements.
- Selectors: Target elements by tag, class (.class), or ID (#id).
- Properties: color, font-size, margin, padding, etc.
- Example:
```
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
margin: 10px;
}
```
4. Combining HTML and CSS
- Inline CSS: Style within HTML tags (e.g., <p style="color: red;">).
- Internal CSS: Style in <style> tag within <head>.
- External CSS: Link a .css file using <link rel="stylesheet" href="styles.css">.
- Example (Internal CSS):
```
<!DOCTYPE html>
<html>
<head>
<title>Styled Page</title>
<style>
body { background-color: #f0f0f0; }
h1 { color: navy; }
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
```
5. Practical Example: Personal Portfolio Page
- Objective: Create a simple portfolio page with a heading, bio, and contact link.
- HTML:
```
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Jane Doe</h1>
<p class="bio">Web developer with a passion for clean design.</p>
<a href="mailto:
[email protected]">Contact Me</a>
</body>
</html>
```
- CSS (styles.css):
```
h1 {
color: #333;
text-align: center;
}
.bio {
font-size: 18px;
color: #555;
}
a {
text-decoration: none;
color: #007BFF;
}
```
6. Best Practices
- Semantic HTML: Use tags like <header>, <footer>, <article> for accessibility.
- Responsive Design: Use relative units (%, vw, rem) for flexible layouts.
- Validation: Check HTML/CSS with W3C validators.
7. Challenges
- Browser Compatibility: Test on Chrome, Firefox, Safari.
- CSS Specificity: Higher specificity (e.g., #id) overrides lower (e.g., tag).
- Solution: Use tools like CanIUse.com and clear CSS hierarchy.
8. Applications
- Personal websites, e-commerce platforms, blogs.
- Example: A portfolio page showcases skills to potential employers.
9. Study Tips
- Build small projects (e.g., a landing page) to practice.
- Use tools like VS Code and browser developer tools.
- Explore freeCodeCamp or MDN Web Docs for tutorials.
10. Further Resources
- Read “HTML and CSS” by Jon Duckett.
- Join web development communities on X.
- Practice with CodePen or GitHub Pages.
---
These notes are for beginners in web development or students in a web design
course. Build and test webpages to gain hands-on experience.
