Lesson: Introduction to Web Development with HTML, CSS, and JavaScript
Overview
Welcome to the journey into web development! In this lesson, you’ll explore the three cornerstone technologies of the web: HTML, CSS, and JavaScript. These technologies work together to build visually appealing and interactive websites.
Section 1: Understanding HTML – The Structure of the Web
What is HTML?
HTML (HyperText Markup Language) is the backbone of all web pages. It defines the structure and layout of a web document by using a variety of tags and elements.
Key HTML Tags
<!DOCTYPE html>: Declares the HTML version.<html>: Root of an HTML document.<head>: Contains metadata, like the document title.<body>: Visible page content.<h1>to<h6>: Headings.<p>: Paragraphs.<a>: Links.<img>: Images.<div>,<span>: Containers for content.
Example: Simple HTML Page
Section 2: Cascading Style Sheets (CSS) – Styling the Web
What is CSS?
CSS enhances the visual presentation of HTML elements. It allows you to style fonts, colors, layout, and spacing.
Key CSS Concepts
-
Selectors: Define which HTML elements to style.
-
Properties: Define what aspect to change (e.g., color, font-size).
-
Values: Specify the value for a property.
Example: Styling with CSS
You can place CSS inside a <style> tag in the <head> or link to an external .css file.
Section 3: JavaScript – Adding Interactivity
What is JavaScript?
JavaScript is a scripting language that adds interactivity to web pages. It can modify content, validate forms, create animations, and more.
Basic JavaScript Example
You can trigger JavaScript functions with events like onclick, onload, etc.
Section 4: Bringing It All Together
Example: Full Interactive Page
Final Assignment
Task:
Create a personal profile web page that includes:
-
A heading with your name.
-
A short bio paragraph.
-
A button that changes the content of the bio.
-
CSS styling for font, background color, and text color.
Example Starter Code:
Answer Key
Expected Elements:
-
HTML structure with
<!DOCTYPE html>,<html>,<head>, and<body>. -
A heading element like
<h1>. -
A paragraph with an
id(e.g.,id="bio"). -
A button with an
onclickattribute. -
Embedded CSS using a
<style>tag. -
A JavaScript function that updates the paragraph content using
innerHTML.
