[Go to site: main page, start]
Scribd
Upload
2 views3 pages

HTML, CSS and JavaScript Bootcamp

This two-day lesson plan aims to teach beginner ITE colleagues the fundamentals of web development, focusing on HTML, CSS, and introductory JavaScript. Day 1 covers HTML and CSS basics through lectures, hands-on activities, and group support, while Day 2 introduces JavaScript concepts and culminates in a mini portfolio project. The plan emphasizes a learn-by-doing approach with peer support and confidence-building techniques.

Uploaded by

Curlin Louw
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views3 pages

HTML, CSS and JavaScript Bootcamp

This two-day lesson plan aims to teach beginner ITE colleagues the fundamentals of web development, focusing on HTML, CSS, and introductory JavaScript. Day 1 covers HTML and CSS basics through lectures, hands-on activities, and group support, while Day 2 introduces JavaScript concepts and culminates in a mini portfolio project. The plan emphasizes a learn-by-doing approach with peer support and confidence-building techniques.

Uploaded by

Curlin Louw
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Two-Day Lesson Plan: Web Development Fundamentals (ITE Facilitation)

Audience: ITE Colleagues (Beginner Level)


Goal: Facilitate Cisco NetAcad's 4-module Web Development course with a focus on HTML, CSS, and
introductory JavaScript for absolute beginners
Duration: 2 Days (9:00 AM to 3:00 PM)

Day 1: HTML5 + CSS Foundations

09:00 - 09:15 | Welcome and Orientation

 Introduction to the course and goals

 Quick warm-up: "What is a website?"

09:15 - 10:15 | Module 1: HTML Basics

 Explain basic HTML tags: <html>, <head>, <body>, <h1>, <p>, <a>, <img>

 Watch: "Introduction to HTML" (4 min) and "HTML Features" (6 min)

 Hands-On Activity: Use JSFiddle to create a basic web page with headings, paragraphs, and
an image

10:15 - 11:15 | HTML Practice Lab

 Group support: Build a simple 3-section page (e.g. About, Gallery, Contact)

 Hands-On Lab: HTML - Create a Simple Web Page (25 min)

11:15 - 12:00 | HTML Quiz and Recap

 Practice Quiz: HTML Overview (10 min)

 Walkthrough selected questions and common mistakes

12:00 - 12:30 | Lunch Break

12:30 - 13:30 | Module 2: Intro to CSS

 Explain what CSS is and how it works with HTML

 Watch: "CSS: Styling HTML" (8 min)

 Demonstrate using <style> and CSS selectors

 Hands-On: Style the earlier HTML page (change colors, fonts, spacing)

13:30 - 14:30 | CSS Practice with Layout

 Introduce classes and IDs

 Use basic box model and positioning

 Hands-On Lab: CSS Basics - Styling Your Web Page (15 min)

14:30 - 15:00 | Wrap-Up and Reflection


 Group Q&A: What was easy/difficult today?

 Introduce Day 2 (JavaScript preview)

Day 2: JavaScript Intro + Mini Portfolio Project

09:00 - 09:15 | Welcome Back

 Review key points from Day 1

09:15 - 10:30 | Module 3: JavaScript Basics

 Explain what JavaScript is and why it’s used

 Watch: "Introduction to JavaScript and ES6" (6 min), "Variables" (4 min)

 Hands-On Lab: Use JS to show an alert message, change content with getElementById

10:30 - 11:30 | JavaScript in Action

 Introduce functions and basic logic (if/else)

 Hands-On Lab: Validating a form (e.g., check if a name field is filled)

11:30 - 12:00 | JavaScript Recap Quiz

 Practice Quiz (10 min)

 Discuss answers as a group

12:00 - 12:30 | Lunch Break

12:30 - 14:30 | Module 4: Final Mini Project - Portfolio Page

 Build a personal static web page using HTML, CSS, and simple JS

 Sections: About Me, Skills, Contact (with form)

 Use Lab Template: Single Page Portfolio Website (simplified)

14:30 - 15:00 | Project Showcase and Wrap-Up

 Share work with group

 Feedback circle: "1 thing I learned, 1 thing I want to explore more"

 Explain how to earn Cisco badge and continue learning on NetAcad

Materials Needed:

 Laptops with internet

 Access to NetAcad and JSFiddle

 Basic reference sheets for HTML, CSS, JS

Pedagogical Approach:
 Simple explanations, visual demos

 Learn-by-doing (JSFiddle-based)

 Peer support and encouragement

 Focused on confidence-building and application

You might also like