Activity: Common HTML Elements
Learning Outcome
By the end of this activity, you will be able to identify and use common HTML elements to organize and display content on a web page.
In groups, pairs or individually, Respond to the following tasks after watching the videos and other research materials provided.
Present and share Your Findings With The Rest of the class.
Video 1:
Video 2:
Video 3:
Text Lessons
#1
01: What the Web Is and How It Works
#2
02: Frontend vs Backend (Conceptual)
#3
03: Client–Server Model
#4
04: Web Browsers and Rendering
#5
05: Installing Developer Tools
#6
06: Introduction to VS Code
#7
07: Browser Developer Tools
#8
08: Folder Structure for Web Projects
#9
01: Understanding HTML Syntax
#10
02: HTML Document Structure
#11
03: Common HTML Elements
#12
04: Headings, Paragraphs, Lists
#13
05: Links and Images
#14
06: Tables and Forms
#15
07: Semantic HTML
#16
08: Accessibility Basics
#17
09: HTML Best Practices
#18
01: Introduction to CSS
#19
02: CSS Syntax and Selectors
#20
03: Colors, Fonts & Text Styling
#21
04: Box Model
#22
05: Display Properties
#23
06: Flexbox Layout
#24
07: CSS Grid Layout
#25
08: Responsive Design Concepts
#26
09: Media Queries
#27
10: UI Consistency & Design Thinking
#28
01: What JavaScript Is
#29
02: Variables & Data Types
#30
03: Operators & Expressions
#31
04: Conditional Statements
#32
05: Loops
#33
06: Functions
#34
07: Events & Event Handling
#35
08: DOM Manipulation
#36
09: Form Validation
#37
10: Debugging JavaScript
#38
01: Why Version Control Matters
#39
02: Installing Git
#40
03: Git Basics
#41
04: Branches & Merging (Intro)
#42
05: Introduction to GitHub
#43
06: Creating a Repository
#44
07: Pushing Code to GitHub
#45
08: Collaboration Basics
#46
09: Commit Best Practices
#47
01: What Prompt Engineering Is
#48
02: How AI Interprets Prompts
#49
03: Writing Clear Prompts
#50
04: Prompt Patterns for Coding
#51
05: Debugging with AI
#52
06: Using AI for Documentation
#53
07: Avoiding Over-Reliance on AI
#54
08: Human-in-the-Loop Development
#55
01: Understanding Regenerative AI
#56
02: AI as a Learning Companion
#57
03: AI for Accessibility
#58
04: AI for Inclusive Design
#59
05: AI for Sustainable Solutions
#60
06: Human Creativity vs AI
#61
07: AI for Community Impact
#62
01: Ethics in Technology
#63
02: Data Privacy & Consent
#64
03: Bias in AI Systems
#65
04: Academic Integrity
#66
05: Responsible AI in Coding
#67
06: Transparency & Attribution
#68
07: Social Impact of Technology
#69
08: Local & Global Ethics
#70
01: Project Planning
#71
01: Wireframing
#72
03: Project Structure
#73
04: HTML Development
#74
05: CSS Styling
#75
06: JavaScript Interactivity
#76
07: Git Project Tracking
#77
08: Testing & Debugging
#78
09: Deployment Preparation
#79
01: What Deployment Means
#80
02: Hosting Static Websites
#81
03: GitHub Pages / Netlify
#82
04: Publishing a Live Website
#83
05: Learning Reflection
#84
06: Portfolio Building
#85
07: Career Pathways
#86
08: AI Skills for the Future
View full lessons
Check course learning page