Back to Syllabus

Week 1: Introduction to Web Development

Foundation 3 Hours

This week introduces students to the fundamentals of web development, covering HTML, CSS, and basic JavaScript concepts.

Learning Objectives

Prerequisites

Detailed Schedule

Session 1: HTML Basics (1 hour)

Introduction (15 minutes)

  • What is HTML?
  • Basic structure of an HTML document
  • DOCTYPE declaration and HTML5 features

HTML Elements (30 minutes)

  • Headings (h1-h6)
  • Paragraphs and text formatting
  • Links and images
  • Lists (ordered and unordered)
  • Semantic elements (header, nav, main, section, footer)

Practice Exercise (15 minutes)

Create a simple personal profile page using HTML elements

Session 2: CSS Fundamentals (1 hour)

CSS Basics (20 minutes)

  • CSS syntax and selectors
  • Inline, internal, and external CSS
  • Colors, backgrounds, and text styling
  • Box model (margin, padding, border)

Layout Techniques (25 minutes)

  • Display properties
  • Flexbox basics
  • Responsive design principles

Practice Exercise (15 minutes)

Style the personal profile page created in Session 1

Session 3: JavaScript Introduction (1 hour)

JavaScript Basics (25 minutes)

  • Variables and data types
  • Functions and scope
  • Conditional statements
  • Loops and arrays

DOM Manipulation (20 minutes)

  • Selecting elements
  • Modifying content
  • Event handling

Practice Exercise (15 minutes)

Add interactive features to the profile page

Teaching Resources

Slides

Code Examples

Assessment

In-Class Exercise

Students will create a personal portfolio page incorporating all concepts learned in this week.

Requirements:

  • Use semantic HTML5 elements
  • Apply CSS styling (colors, layout, responsive design)
  • Include at least one interactive feature using JavaScript
  • Code should be well-formatted and commented

Homework Assignment

Complete the portfolio page started in class and add two additional features:

  • Add a contact form with validation
  • Implement a dark/light mode toggle

Tips for Teachers

Common Challenges

  • Students may struggle with CSS selectors and specificity
  • JavaScript concepts might be overwhelming for beginners
  • Some students might have difficulty with development environment setup

Teaching Strategies

  • Use live coding demonstrations
  • Provide starter code for exercises
  • Encourage pair programming for complex tasks
  • Use browser developer tools to debug issues