Scribd
Upload
6 views

Web Development Chapters 1 2

Uploaded by

aadig2626
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Web Development Chapters 1 2

Uploaded by

aadig2626
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Chapter 1: Introduction to Web Development

1.1 What is Web Development?


Web development is the process of creating websites and web applications that run on the internet.

Types of Web Development:


- Frontend Development (HTML, CSS, JavaScript)
- Backend Development (Node.js, PHP, Python, Databases)
- Full-Stack Development (Both frontend & backend)

1.2 Frontend vs Backend vs Full-Stack


| Aspect | Frontend (Client-side) | Backend (Server-side) | Full-Stack |
|-----------|---------------------|--------------------|------------|
| Focus | UI, Design | Logic, Database, Server | Both UI & Server Logic |
| Languages | HTML, CSS, JavaScript | Node.js, Python, PHP | All frontend & backend |

1.3 Overview of Web Development Technologies


- Frontend: HTML, CSS, JavaScript, React, Angular, Vue.js
- Backend: Node.js, Express.js, Python (Django/Flask), PHP, Java
- Databases: SQL (MySQL, PostgreSQL), NoSQL (MongoDB, Firebase)
- Others: APIs, Git/GitHub, Hosting (Netlify, AWS, etc.)

1.4 Setting Up Your Development Environment


- Install VS Code, Chrome DevTools, Git, Node.js
- Verify installations with `node -v` and `git --version`

Exercises:
1. What is the difference between frontend and backend?
2. Name three frontend and three backend technologies.
3. What is a full-stack developer?
4. How do you install Node.js?
5. What is the role of a database in web development?

Answers:
1. Frontend handles UI/UX; Backend manages logic, databases, and APIs.
2. Frontend: HTML, CSS, JavaScript; Backend: Node.js, Python, PHP.
3. A full-stack developer works on both frontend and backend.
4. Download from nodejs.org, install, and verify with `node -v`.
5. A database stores and manages data for web applications.
Chapter 2: HTML & CSS Basics

2.1 Introduction to HTML


HTML (HyperText Markup Language) is the structure of a web page.

Basic HTML Structure:


<!DOCTYPE html>
<html>
<head><title>My First Web Page</title></head>
<body>
<h1>Welcome to Web Development</h1>
<p>This is a paragraph.</p>
</body>
</html>

Common HTML Elements:


- <h1> to <h6>: Headings
- <p>: Paragraph
- <a href="URL">: Hyperlink
- <img src="image.jpg">: Image
- <ul>, <li>: Unordered List

2.2 Introduction to CSS


CSS (Cascading Style Sheets) styles the appearance of a web page.

Types of CSS:
1. Inline CSS: <p style="color: blue;">Blue text</p>
2. Internal CSS: <style> p { color: red; } </style>
3. External CSS: <link rel="stylesheet" href="style.css">

Basic CSS Properties:


- Changing Text: color, font-size, text-align
- Box Model: margin, padding, border, width, height

Simple Web Page Example:


HTML (index.html):
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="style.css"></head>
<body>
<h1>Welcome</h1>
<p>This is a styled paragraph.</p>
</body>
</html>

CSS (style.css):
body { background-color: lightblue; text-align: center; }

Exercises:
1. What is the difference between HTML and CSS?
2. Name three ways to apply CSS.
3. What is the purpose of the <a> tag?
4. Difference between id and class in CSS?
5. Write an HTML page with a heading, paragraph, and link.

Answers:
1. HTML is for structure, CSS is for styling.
2. Inline CSS, Internal CSS, External CSS.
3. The <a> tag creates hyperlinks.
4. id is unique; class can be used for multiple elements.
5. Example HTML:
<!DOCTYPE html>
<html>
<head><title>Basic Page</title></head>
<body>
<h1>Welcome</h1>
<p>This is a sample paragraph.</p>
<a href="https://example.com">Click here</a>
</body>
</html>

You might also like