[Go to site: main page, start]
Scribd
Upload
1 views12 pages

HTML CSS JavaScript Workbook With Code Examples

The document is a workbook for practicing HTML, CSS, and JavaScript with structured lessons and exercises. Each lesson includes code examples and tasks such as typing code manually, modifying values, and extending features. The workbook emphasizes correct syntax and testing code after changes.

Uploaded by

salawudeentimileyin16
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
1 views12 pages

HTML CSS JavaScript Workbook With Code Examples

The document is a workbook for practicing HTML, CSS, and JavaScript with structured lessons and exercises. Each lesson includes code examples and tasks such as typing code manually, modifying values, and extending features. The workbook emphasizes correct syntax and testing code after changes.

Uploaded by

salawudeentimileyin16
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

HTML, CSS & JavaScript Workbook

Practice workbook with code examples and exercises.


Lesson 1: HTML Structure
Example:
<!DOCTYPE html>
<html>
<head><title>My Page</title></head>
<body>
<h1>Hello World</h1>
</body>
</html>

Exercises:
1. Type the code manually.
2. Modify one value and observe the result.
3. Extend the example with one new feature.
Lesson 2: Headings & Paragraphs
Example:
<h1>Main Title</h1>
<p>This is a paragraph.</p>

Exercises:
1. Type the code manually.
2. Modify one value and observe the result.
3. Extend the example with one new feature.
Lesson 3: Links & Images
Example:
<a href="[Link]
<img src="[Link]" alt="Photo">

Exercises:
1. Type the code manually.
2. Modify one value and observe the result.
3. Extend the example with one new feature.
Lesson 4: Lists
Example:
<ul>
<li>Apple</li>
<li>Orange</li>
</ul>

Exercises:
1. Type the code manually.
2. Modify one value and observe the result.
3. Extend the example with one new feature.
Lesson 5: CSS Basics
Example:
body {
font-family: Arial;
background:#f5f5f5;
}

Exercises:
1. Type the code manually.
2. Modify one value and observe the result.
3. Extend the example with one new feature.
Lesson 6: Selectors
Example:
.card {
color: blue;
}
#title {
font-size:24px;
}

Exercises:
1. Type the code manually.
2. Modify one value and observe the result.
3. Extend the example with one new feature.
Lesson 7: Flexbox
Example:
.container {
display:flex;
justify-content:center;
}

Exercises:
1. Type the code manually.
2. Modify one value and observe the result.
3. Extend the example with one new feature.
Lesson 8: JavaScript Variables
Example:
let name='Tim';
const age=20;
[Link](name,age);

Exercises:
1. Type the code manually.
2. Modify one value and observe the result.
3. Extend the example with one new feature.
Lesson 9: Functions
Example:
function greet(name){
return 'Hello '+name;
}

Exercises:
1. Type the code manually.
2. Modify one value and observe the result.
3. Extend the example with one new feature.
Lesson 10: DOM
Example:
[Link]('btn'). > alert('Clicked');
};

Exercises:
1. Type the code manually.
2. Modify one value and observe the result.
3. Extend the example with one new feature.
Answer Hints
There are many valid solutions. Focus on correct syntax, readable formatting, and testing your code
after each change.

You might also like