Scribd
Upload
8 views

Web Development Chapters 1 2

Uploaded by

aadig2626
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Web Development Chapters 1 2

Uploaded by

aadig2626
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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