Objectives:
• Understand the core components of web development: HTML, CSS, and JavaScript.
• Learn how to create a basic web page using HTML to structure content.
• Apply CSS to style the webpage and make it visually appealing.
• Use JavaScript to add interactivity and dynamic behaviour to web pages.
• Follow best practices for clean, efficient, and maintainable code.
Introduction to HTML (Structure of the Web)
What is HTML?
• HTML stands for HyperText Markup Language. It’s used to structure content on the web.
• HTML is a markup language that uses tags to define elements like headings, paragraphs,
images, links, and lists.
Structure of an HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text on my first webpage.</p>
</body>
</html>
Explanation of tags:
• <!DOCTYPE html>: Defines the document type as HTML5.
• <html>: The root element of the webpage.
• <head>: Contains metadata (e.g., title, character set).
• <body>: Contains the content of the webpage visible to users.
Key HTML Tags (20 minutes)
Headings and Paragraphs:
• Headings (<h1> to <h6>) define the title or main sections of a page.
• Paragraphs (<p>) define blocks of text.
<h1>This is a Heading</h1>
<h2>This is a Subheading</h2>
<p>This is a paragraph.</p>
Links and Images:
<a href="https://www.example.com">Click here to visit Example</a>
<img src="image.jpg" alt="A beautiful landscape">
Lists:
Ordered lists (<ol>) and unordered lists (<ul>).
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Hour 1: Styling with CSS (15 minutes)
2.1 Introduction to CSS (15 minutes)
What is CSS?
• CSS stands for Cascading Style Sheets and is used to style the structure defined by HTML.
• CSS controls things like colours, fonts, layouts, and overall page appearance.
Adding CSS to an HTML Document:
Inline CSS: Inside HTML tags.
<p style="colour: blue; font-size: 18px;">This is a blue paragraph.</p>
Internal CSS: Inside a <style> tag within the <head>.
<style>
p{
colour: green;
font-size: 18px;
</style>
External CSS: Linking to an external CSS file.
<link rel="stylesheet" href="styles.css">
2.2 CSS Basics (15 minutes)
Selectors: Used to target HTML elements.
Example: p { color: red; } targets all <p> elements.
Common Properties:
• colour: Changes text colour.
• background-color: Changes background colour.
• font-size: Changes the size of the text.
• margin/padding: Adjusts space around and inside elements.
Example:
h1 {
color: #333;
font-size: 24px;
}
p{
color: #666;
font-size: 16px;
margin-bottom: 20px;
Hour 2: Introduction to JavaScript (Making it Interactive)
3.1 What is JavaScript? (10 minutes)
JavaScript is a programming language used to make web pages interactive. Unlike HTML and CSS,
which handle structure and appearance, JavaScript handles behaviour.
Common Uses:
• Handling user input (clicks, forms, etc.).
• Modifying page content dynamically.
• Performing calculations, validations, and more.
3.2 Adding JavaScript to an HTML Document (10 minutes)
Inline JavaScript: Directly inside HTML tags.
<button onclick="alert('Hello World!')">Click Me</button>
Internal JavaScript: Inside a <script> tag in the <body> or <head>.
<script>
function showMessage() {
alert('Hello, World!');
</script>
External JavaScript: Linking to an external .js file.
<script src="script.js"></script>
Basic JavaScript Syntax and Examples (20 minutes)
Variables: Storing values using let, const, or var.
let message = "Hello, World!";
alert(message); // Display the message in an alert box
Functions: Grouping reusable code into functions.
function greet(name) {
alert("Hello, " + name + "!");
greet("Alice"); // Output: "Hello, Alice!"
Events: Reacting to user actions (like clicks, form submissions).
<button onclick="changeColor()">Click me</button>
<script>
function changeColor() {
document.body.style.backgroundColor = "lightblue";
</script>
Example: A Simple Web Page with Interactivity
Create a web page with a button that changes the background color when clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Web Page</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
</style>
</head>
<body>
<h1>Click the button to change background color</h1>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
document.body.style.backgroundColor = "lightcoral";
</script>
</body>
</html>
Best Practices for Web Development (15 minutes)
HTML:
• Use semantic tags (<header>, <footer>, <section>, <article>) for better structure and
accessibility.
• Always close your tags and properly nest elements.
CSS:
• Use class and ID selectors to apply styles to specific elements, making it easier to
maintain.
• Avoid using inline styles as much as possible (for clean and maintainable code).
JavaScript:
• Always define functions clearly and make sure they perform one task (single
responsibility).
• Use comments to explain complex sections of your code.
• Use console.log() to debug and test code as you develop.
Wrap-Up and Q&A (5 minutes)
• Recap the key points: HTML for structure, CSS for style, JavaScript for interactivity.
• Discuss how these three technologies work together to create a dynamic web experience.
• Encourage students to experiment with their own simple web projects.
• Open the floor for questions.
By the end of the lecture, students will have a basic understanding of how HTML, CSS, and JavaScript
work together to create interactive and styled web pages. They'll also be introduced to the best
practices in web development to ensure they write clean and maintainable code.
