GROUP ACTIVITY 1 Chapter 1 Group Discussion & Presentation

Introduction to Web Development and Bootstrap

This group activity focuses on selecting one topic, discussing using lecture notes + examples, and delivering a short Canva-based presentation with clear roles and confident delivery.

Back to Chapter 1 Jump to Topics

Learning Outcomes

By the end of this activity, students should be able to:

  • Explain fundamental web development concepts.
  • Differentiate key web technologies and frameworks.
  • Present technical information clearly and confidently.
  • Collaborate effectively in a group discussion.

Activity Info

  • Course: DFK20013 – Web Design Technology
  • Presentation Tool: Canva
  • Group Size: 3–5 students
  • Slides: 6–8 content slides (excluding cover & references)
  • Participation: All group members must present

Presentation Guidelines

Read First
  • Use diagrams, icons, or screenshots where appropriate.
  • Avoid copying directly from online sources (paraphrase + explain in your own words).
  • Ensure consistent slide style: fonts, colours, spacing, and alignment.
  • Each member must contribute: content + speaking role.

Steps (Complete Step-by-Step)

Step 1

Form Your Group

Form a group of 3–5 students. Assign roles early (e.g., lead, researcher, designer, presenter).

Step 2

Select One Topic

Each group must select ONE (1) topic only from the provided list. Ensure your topic has enough examples and diagrams.

Step 3

Discuss and Prepare Content

  • Use lecture notes and your own understanding.
  • Add simple real-world examples and comparisons.
  • Prepare key points (avoid reading directly from slides).
Step 4

Create Canva Slides

  • Minimum 6–8 content slides (exclude cover & references).
  • Use visuals: icons, diagrams, screenshots (where helpful).
  • Keep text concise: bullet points, short explanations.
Step 5

Present as a Team

  • All members must participate during the presentation.
  • Explain confidently: define → compare → example → wrap-up.
  • End with a short summary slide + references.

List of Topics

Select one topic only • Use lecture notes + examples

  • What is Web Development
  • Main technologies: HTML, CSS, JavaScript
  • The role of each technology
  • Website vs Web Application
  • Real-world examples
Select Topic

  • Definition and main features of a website
  • Static vs Dynamic website
  • Minimum 5 comparison criteria (e.g., updates, database, interaction, technologies, use cases)
  • Examples for both types
Select Topic

  • Definition of a web application
  • Key features
  • Website vs web application
  • Examples of common web applications
Select Topic

  • Front-End (Client Side): definition, roles
  • Back-End (Server Side): definition, roles
  • Technologies: Front-End (HTML/CSS/JS), Back-End (PHP/Node.js example)
  • Use a simple analogy or diagram to show interaction
Select Topic

  • HTML: definition, purpose, importance
  • CSS: definition, purpose, importance
  • JavaScript: definition, purpose, importance
  • How HTML + CSS + JavaScript work together
Select Topic

  • What is Bootstrap & its purpose
  • Key features: grid system, UI components, utility classes
  • Advantages of using Bootstrap
  • Examples of common Bootstrap components
Select Topic

  • Definition and importance of responsive design
  • Problems caused by non-responsive websites
  • Role of Bootstrap in responsive design
  • Examples: desktop vs tablet vs mobile access
Select Topic