Introduction to Web Design Activities

:books: What you'll learn

• How to use StackBlitz for web development projects
• Setting up your GitHub account for code collaboration
• Fundamental concepts of web design through interactive quiz
• Difference between websites and webpages
• Basic HTML concepts and web development history

---

Activity One: :computer: Setting Up StackBlitz for Web Development

⏱️ Estimated time: 15 minutes

Prerequisites

• GitHub Account Required: You must have a GitHub account to use StackBlitz's GitHub integration
• If you don't have one, sign up for GitHub first

Step One: Access StackBlitz (5 minutes)

1. Open your web browser and navigate to StackBlitz.com
2. Look for and click the "Continue with GitHub" button (highlighted in red)
3. When prompted, authorize StackBlitz to access your GitHub account
4. Wait for the authentication process to complete

:bulb: Tip If you're having trouble finding the GitHub login button, look for the sign-in options at the top right of the StackBlitz homepage.

Step 2: Save Your Work (Fork) (5 minutes)

1. Once you've made changes to your project, locate the "Fork" button
2. Click the Fork button - StackBlitz will then:
   • Create a fork of the repository in your GitHub account
   • Generate a new branch containing your modifications
   • Save all your work automatically
3. Copy your StackBlitz project URL from the address bar
4. Submit your StackBlitz link using the submission form

:warning: Warning Important Submission Instructions: Make sure to submit your StackBlitz link immediately after forking to ensure your work is properly recorded!

Troubleshooting Common Issues

• Can't see the Fork button? Make sure you're logged in with your GitHub account
• Fork failed? Check your internet connection and try again
• Lost your work? StackBlitz auto-saves, but always fork before closing the browser

---

Activity 2: :speech_balloon: Interactive Quiz - Introduction to Web Design

⏱️ Estimated time: 20-30 minutes

Before Starting (5 minutes)

What You Need:

1. :white_check_mark: A device ready (phone, tablet, or computer)
2. :white_check_mark: Stable internet connection
3. :white_check_mark: Your academic email for login
4. :white_check_mark: Game PIN from your instructor

:information_source: Group Activity: This is a collaborative quiz where you'll discuss answers with classmates after each question!

During the Quiz (15-20 minutes)

Step-by-Step Instructions:

1. Wait for your instructor to display the game PIN
2. Navigate to Quizizz on your device
3. Enter the game PIN provided by your instructor
4. Login using:
   • Your real name (first and last)
   • Your academic email address
5. Answer each question thoughtfully - speed matters but accuracy is key!
6. Participate in discussions after each question
7. Ask questions if any concept is unclear

How the Quiz Works (5 minutes)

1. :iphone: Join the Game - Enter the PIN code on your device
2. :memo: Answer Questions - Web design fundamentals will appear on screen
3. :dart: Choose Your Answer - Select the best option from multiple choices
4. :bar_chart: See Results - View your score and correct answers instantly
5. :speech_balloon: Discuss - Share insights with classmates about each concept
6. :emoji: Learn - Ensure you understand before moving to the next question

:bulb: Tip Pro Tips for Success:

• Read each question carefully before answering
• Don't rush - understanding is more important than speed
• Take notes on concepts you find challenging
• Engage in discussions - learning from peers is valuable!

Key Topics Covered

• Websites vs. Webpages distinction
• HTML basics and structure
• Web development history
• Fundamental web design principles

:warning: Warning Important Reminders:

• This is a learning activity - mistakes help us grow!
• Full participation in discussions is required
• Keep your device charged and connected
• Focus on understanding, not just memorizing

---

:emoji:‍:emoji: For Instructors

Quiz Setup Instructions:

1. Access the quiz: Quizizz Quiz
2. Start a live game session
3. Display the PIN prominently
4. Allow 5 minutes for all students to join
5. Facilitate discussions after each question

:bulb: Tip Instructor Tips:

• Pause after challenging questions for deeper discussion
• Encourage peer teaching during discussions
• Monitor participation and assist struggling students

Troubleshooting Common Issues

For Students:

• Can't join the game? Double-check the PIN with your instructor
• Connection lost? Refresh your browser and rejoin with the same name
• Quiz not loading? Try a different browser or clear your cache
• Forgot your academic email? Ask your instructor for assistance

For Instructors:

• Students can't join? Ensure the game is set to "Live" mode
• Technical difficulties? Have a backup PIN ready
• Time running out? You can extend the quiz timer in settings