Scribd
Upload
4 views13 pages

HTML_CSS_JS_CourseMaterial3hrs

The document outlines a 3-hour training session covering essential concepts of HTML, CSS, and JavaScript. It includes structured chapters on topics such as HTML tags, CSS selectors, and JavaScript functions, along with practical examples for each. Additional resources for further learning are also provided at the end of the session.

Uploaded by

afridshaik0422
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
4 views13 pages

HTML_CSS_JS_CourseMaterial3hrs

The document outlines a 3-hour training session covering essential concepts of HTML, CSS, and JavaScript. It includes structured chapters on topics such as HTML tags, CSS selectors, and JavaScript functions, along with practical examples for each. Additional resources for further learning are also provided at the end of the session.

Uploaded by

afridshaik0422
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/ 13

1.

HTML
2. CSS
3. JS
1. HTML (1 hour)

Chapter 1: Introduction to HTML (10 minutes)

• What is HTML?
o Hypertext Markup Language
o Structure of an HTML document

Example:

html
Copy code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Introduction to HTML</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
Chapter 2: Basic HTML Tags (15 minutes)

• Headings, Paragraphs, and Text Formatting


o <h1> to <h6>, <p>, <strong>, <em>

Example:

html
Copy code

<h1>This is a Heading</h1>
<p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
Chapter 3: Lists and Links (15 minutes)

• Unordered and Ordered Lists


o <ul>, <ol>, <li>
• Hyperlinks
o <a href="URL">

Example:

html
Copy code

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<a href="https://www.example.com">Visit Example</a>
Chapter 4: Images and Tables (20 minutes)

• Images
o <img src="URL" alt="description">
• Tables
o <table>, <tr>, <td>, <th>

Example:

html
Copy code

<img src="image.jpg" alt="An example image">


<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
2. CSS (1 hour)

Chapter 5: Introduction to CSS (10 minutes)

• What is CSS?
o Cascading Style Sheets
o Inline, Internal, and External CSS

Example:

html
Copy code

<style>
body {
font-family: Arial, sans-serif;
}
</style>
Chapter 6: CSS Selectors and Properties (20 minutes)

• Selectors
o Element, ID, Class
• Common Properties
o color, background-color, font-size, margin, padding

Example:

html
Copy code

<style>
h1 {
color: blue;
}
.intro {
font-size: 20px;
background-color: lightgray;
}
#main {
margin: 20px;
padding: 10px;
}
</style>
<h1>CSS Selectors</h1>
<p class="intro">This is an introduction.</p>
<div id="main">This is the main content.</div>
Chapter 7: Box Model and Layout (20 minutes)

• Box Model
o margin, border, padding, content
• Layouts
o display, position, flexbox

Example:

html
Copy code

<style>
.box {
width: 100px;
height: 100px;
border: 1px solid black;
padding: 10px;
margin: 20px;
}
.flex-container {
display: flex;
justify-content: space-between;
}
</style>
<div class="box">Box Model</div>
<div class="flex-container">
<div class="box">Flex Item 1</div>
<div class="box">Flex Item 2</div>
<div class="box">Flex Item 3</div>
</div>
Chapter 8: Responsive Design (10 minutes)

• Media Queries
o Responsive design principles

Example:

html
Copy code

<style>
body {
background-color: lightblue;
}
@media (max-width: 600px) {
body {
background-color: lightgreen;
}
}
</style>
<p>Resize the browser window to see the effect.</p>
3. JavaScript (1 hour)

Chapter 9: Introduction to JavaScript (10 minutes)

• What is JavaScript?
o Basics of JavaScript
o Including JavaScript in HTML

Example:

html
Copy code

<script>
console.log('Hello, JavaScript!');
</script>
Chapter 10: Variables and Data Types (15 minutes)

• Variables
o var, let, const
• Data Types
o String, Number, Boolean, Array, Object

Example:

html
Copy code

<script>
let name = 'John';
let age = 25;
let isStudent = true;
let hobbies = ['reading', 'sports'];
let person = {firstName: 'John', lastName: 'Doe'};

console.log(name, age, isStudent, hobbies, person);


</script>
Chapter 11: Functions and Events (15 minutes)

• Functions
o Defining and calling functions
• Events
o Handling events like onclick

Example:

html
Copy code

<script>
function greet() {
alert('Hello, World!');
}
</script>
<button onclick="greet()">Click Me</button>
Chapter 12: DOM Manipulation (20 minutes)

• Document Object Model


o Accessing and modifying elements
• Changing content and style

Example:

html
Copy code

<script>
function changeContent() {
document.getElementById('myParagraph').innerHTML = 'Content changed!';
document.getElementById('myParagraph').style.color = 'red';
}
</script>
<p id="myParagraph">Original content.</p>
<button onclick="changeContent()">Change Content</button>

Additional Resources

At the end of the session, provide students with additional resources for further learning:

• HTML
o MDN Web Docs - HTML
• CSS
o MDN Web Docs - CSS
• JavaScript
o MDN Web Docs - JavaScript

This outline provides a structured way to cover essential HTML, CSS, and JavaScript
concepts within a 3-hour session, with practical examples to illustrate each topic.

You might also like