top of page

Web Development 

Course Description:
Students will learn the fundamentals of web development by designing and creating responsive websites using HTML and CSS. Through authentic projects, students will develop technical skills while strengthening the BC Core Competencies of Communication, Creative Thinking, and Critical & Reflective Thinking.

Big Ideas

Communication

Digital technologies provide opportunities to communicate information, ideas, and experiences to diverse audiences.

Creative Thinking

Design thinking and creativity are essential for developing engaging and effective web experiences

Critical & Reflective Thinking

Web developers use problem-solving, testing, and reflection to improve digital products and user experiences.

Module 1: Introduction to Web Development (Week 1)

Topics

  • What is web development?

  • How websites work

  • Front-end vs. back-end development

  • Digital citizenship and online ethics

 

BC Competency Focus

Communication

Assessment

  • Career exploration activity

  • Digital citizenship reflection

 

Module 2: HTML Fundamentals (Week 2)

Topics

  • Structure of a webpage

  • Headings, paragraphs, lists

  • Images and hyperlinks

  • Semantic HTML

 

BC Competency Focus

Communication

Assessment

  • Personal profile webpage

 

Module 3: Website Planning and Design (Week 3)

Topics

  • Design process

  • Target audience

  • Wireframing

  • Layout principles

 

BC Competency Focus

Creative Thinking

Assessment

  • Website proposal and wireframe

 

Module 4: CSS Styling Basics (Week 4)

Topics

  • CSS syntax

  • Colors and typography

  • Backgrounds and borders

  • Visual hierarchy

 

BC Competency Focus

Creative Thinking

Assessment

  • Styled personal webpage

 

Module 5: Layout and Responsive Design (Week 5)

Topics

  • Flexbox

  • Responsive layouts

  • Mobile-friendly design

  • Media queries

 

BC Competency Focus

Critical Thinking

Assessment

  • Responsive webpage challenge

 

Module 6: Accessibility and User Experience (Week 6)

Topics

  • Inclusive design

  • Accessibility guidelines

  • Navigation design

  • User testing

 

BC Competency Focus

Communication & Critical Thinking

Assessment

  • Accessibility audit

 

Module 7: Introduction to JavaScript (Week 7)

Topics

  • Variables

  • Functions

  • Events

  • Interactive web elements

 

BC Competency Focus

Critical Thinking

Assessment

  • Interactive webpage activity

 

Module 8: Multimedia and Content Development (Week 8)

Topics

  • Images and optimization

  • Video and audio embedding

  • Copyright and attribution

  • Effective web content

 

BC Competency Focus

Communication & Creative Thinking

Assessment

  • Multimedia webpage

 

Module 9: Website Development Project (Weeks 9–10)

Topics

  • Project planning

  • Coding and implementation

  • Testing and debugging

  • Peer feedback

BC Competency Focus

All Three Competencies

Assessment

  • Development checkpoints

  • Peer review

 

Module 10: Final Presentation and Reflection (Week 11–12)

Topics

  • Website showcase

  • Reflection on learning

  • Portfolio development

 

BC Competency Focus

Communication, Creative Thinking, Critical & Reflective Thinking

Assessment

  • Final website project

  • Presentation

  • Self-assessment reflection

Suggested Assessment Breakdown

Assessment Category

 

Weight

Coding Exercises & Labs

25%

Design Activities

20%

Quizzes & Reflections

15%

Final Website Project

30%

Presentation & Portfolio Reflection

10%

 

 

Final Capstone Project

Students design and develop a multi-page responsive website that:

  • Uses HTML and CSS correctly

  • Demonstrates accessibility principles

  • Targets a specific audience and purpose

  • Includes original content and media

  • Is presented to classmates with a reflection on design decisions and learning growth

bottom of page