Lesson Plan: Web Design with Canva

 🎯 Objective
By the end of the session, participants will be able to:

Navigate Canva’s interface

Design a basic web page layout using Canva templates

Customize elements (text, images, buttons)

Export or share their design for web use

⏱️ Duration
2 hours (can be split into two 1-hour sessions)

👥 Target Audience
Beginners in digital design

Students, educators, outreach workers

Creators with limited coding experience

🧩 Materials Needed
Internet-connected devices (laptops/tablets)

Canva accounts (free version is sufficient)

Sample assets: logos, photos, text blocks

🗂️ Module Breakdown
1. Introduction to Canva (15 min)
What is Canva?

Use cases: social media, presentations, websites

Show examples of web page mockups

2. Interface Tour (15 min)
Dashboard overview

Templates: how to search and select

Toolbar: elements, uploads, text, backgrounds

3. Designing a Web Page (30 min)
Choose a “Website” template

Add and edit:

Header (logo + title)

Navigation bar (text or button links)

Hero section (image + call to action)

Content blocks (text + visuals)

Footer (contact info, social links)

4. Customization Techniques (20 min)
Fonts and color schemes

Layering and alignment

Using grids and spacing

Uploading custom assets

5. Preview and Export (15 min)
Previewing as a scrolling page

Sharing via Canva link

Exporting as PDF or image

Optional: embedding in Google Sites or Notion

6. Wrap-Up and Q&A (15 min)
Showcase participant designs

Discuss next steps: linking to real websites, using Canva Pro

Invite feedback and questions

🧠 Optional Extensions
Homework: Design a landing page for a local cause or project

Advanced Module: Link Canva designs to HTML/CSS prototypes

Outreach Adaptation: Use bilingual labels and regional imagery

Canva - वेब डिझाइन प्रशिक्षणासाठी द्वैभाषिक अभ्यासक्रम

 🎯 उद्दिष्ट / Objective
Participants will learn to design a basic web page using Canva. भाग घेणारे Canva वापरून एक मूलभूत वेबपृष्ठ तयार करायला शिकतील.

⏱️ कालावधी / Duration
2 तास (2 hours) — दोन सत्रांमध्ये विभागता येईल

👥 उद्दिष्ट गट / Target Audience
नवशिके डिजिटल वापरकर्ते

विद्यार्थी, शिक्षक, सामाजिक कार्यकर्ते

कोडिंगशिवाय क्रिएटिव्ह डिझाइन करणारे

📦 आवश्यक सामग्री / Materials Needed
इंटरनेट असलेले संगणक / टॅबलेट

Canva खाते (फ्री आवृत्ती पुरेशी आहे)

नमुना घटक: लोगो, फोटो, मजकूर ब्लॉक

🧩 सत्र विभागणी / Session Breakdown
1️⃣ Canva परिचय / Introduction to Canva (15 मिनिटे)
Visual Tag: [Canva Logo]

Canva म्हणजे काय?

वापराचे प्रकार: सोशल मीडिया, प्रेझेंटेशन, वेबसाइट

वेबपृष्ठाचे नमुने दाखवा

2️⃣ इंटरफेस ओळख / Interface Tour (15 मिनिटे)
Visual Tag: [Dashboard Screenshot]

मुख्य स्क्रीन

टेम्पलेट शोधणे

टूलबार: घटक, अपलोड, मजकूर, पार्श्वभूमी

3️⃣ वेबपृष्ठ डिझाइन / Designing a Web Page (30 मिनिटे)
Classroom Cue: “तुमचा स्वतःचा वेबपृष्ठ तयार करा!”

“Website” टेम्पलेट निवडा

Header: लोगो + शीर्षक

Navigation bar: दुवे / बटण

Hero section: प्रतिमा + Call to Action

Content blocks: मजकूर + चित्र

Footer: संपर्क माहिती, सोशल लिंक

4️⃣ सानुकूलन तंत्र / Customization Techniques (20 मिनिटे)
Visual Tag: [Font & Color Palette]

फॉन्ट आणि रंग योजना

घटकांची रचना आणि संरेखन

Grid वापरणे

स्वतःचे घटक अपलोड करणे

5️⃣ पूर्वदृश्य आणि शेअरिंग / Preview and Sharing (15 मिनिटे)
Classroom Cue: “तुमचे डिझाइन इतरांना दाखवा!”

Scroll preview

Canva लिंकद्वारे शेअर

PDF / प्रतिमा म्हणून निर्यात

Google Sites मध्ये एम्बेड करणे (पर्यायी)

6️⃣ सत्र समाप्ती आणि चर्चा / Wrap-Up and Q&A (15 मिनिटे)
Visual Tag: [Showcase Board]

सहभागींचे डिझाइन सादर करा

पुढील पायऱ्या: Canva Pro, वेबसाइट लिंकिंग

प्रश्नोत्तर आणि अभिप्राय

🧠 विस्तार पर्याय / Optional Extensions
गृहपाठ: स्थानिक उपक्रमासाठी लँडिंग पृष्ठ तयार करा

प्रगत सत्र: Canva डिझाइन HTML/CSS मध्ये रूपांतरित करणे

आउटरीच रूपांतरण: द्वैभाषिक लेबल्स आणि प्रादेशिक प्रतिमा वापरणे

Python Web Development with Copilot + VS Code

 🎯 Objective
By the end of the session, participants will be able to:

Set up VS Code and Copilot for Python development

Use Copilot to scaffold and refine a Python web application

Understand basic web frameworks (Flask or FastAPI)

Run and test a simple web app locally

⏱️ Duration
2.5 hours (can be split into two sessions)

👥 Target Audience
Intermediate Python learners

Students, educators, developers

Outreach participants with basic coding exposure

📦 Materials Needed
Laptops with internet access

VS Code installed

GitHub account (for Copilot activation)

Python 3.x installed

Optional: virtual environment setup

🗂️ Module Breakdown
1️⃣ Setup and Orientation (30 min)
Goal: Ensure all tools are installed and ready Steps:

Install VS Code and Python

Install Python extension in VS Code

Sign in to GitHub and activate Copilot

Create a new project folder and open in VS Code

Classroom Cue: “Let’s get your coding cockpit ready!”

2️⃣ Introduction to Copilot (20 min)
Goal: Understand how Copilot assists coding Steps:

What is Copilot? How does it work?

Demo: Write a simple Python function with Copilot suggestions

Tips: Comment-driven prompting, tab completion, inline edits

Visual Tag: [Copilot Suggestion Box]

3️⃣ Building a Web App with Flask (45 min)
Goal: Scaffold a basic web app using Copilot Steps:

Create app.py and comment: # Create a Flask web app

Let Copilot generate boilerplate code

Add routes: home page, about page

Use Copilot to add HTML templates (inline or separate files)

Run the app locally and test in browser

Classroom Cue: “Let Copilot be your co-pilot!”

4️⃣ Enhancing with Forms and Logic (30 min)
Goal: Add interactivity using Copilot Steps:

Create a form (e.g., contact or feedback)

Use Copilot to handle POST requests and form validation

Store or display submitted data

Visual Tag: [Form + Route Diagram]

5️⃣ Debugging and Refinement (15 min)
Goal: Use Copilot to fix and improve code Steps:

Introduce a bug and ask Copilot to suggest a fix

Refactor a function for clarity

Add comments and docstrings with Copilot’s help

6️⃣ Wrap-Up and Showcase (10 min)
Goal: Reflect and share Steps:

Participants demo their apps

Discuss Copilot’s strengths and limitations

Share ideas for next steps: FastAPI, deployment, databases

🧠 Optional Extensions
Homework: Build a personal portfolio site with Flask + Copilot

Advanced Module: Use FastAPI and Copilot for API development

Outreach Adaptation: Add bilingual comments and regional use cases

Secure Cloud Deployment of WordPress with Docker, NGINX, SSL, GitHub & Copilot

 🎯 Objective
By the end of the session, participants will be able to:

Use Docker Compose to install WordPress and MySQL

Configure NGINX as a reverse proxy

Set up SSL using Let’s Encrypt

Deploy the containerized app to a cloud server (e.g., AWS EC2, DigitalOcean, or Azure)

Use GitHub and Copilot for collaborative configuration and version control

⏱️ Duration
3.5–4 hours (can be split into 2–3 sessions)

👥 Target Audience
Intermediate web developers or DevOps learners

Outreach teams building secure public-facing sites

Students or professionals with basic Docker and Git knowledge

📦 Materials Needed
Cloud server (Ubuntu-based VM on AWS, Azure, or DigitalOcean)

Domain name (optional but recommended for SSL)

Docker, Docker Compose, Git, and VS Code installed

GitHub account + Copilot access

SSH access to cloud server

🗂️ Module Breakdown
1️⃣ Recap: Local Docker + WordPress Setup (30 min)
Review Docker Compose setup for WordPress + MySQL

Confirm local deployment works

Push code to GitHub repo

2️⃣ Cloud Server Setup (30 min)
Goal: Prepare remote environment Steps:

Launch Ubuntu VM on cloud provider

SSH into server

Install Docker and Docker Compose

Clone GitHub repo to server

Classroom Cue: “Your website is going global!”

3️⃣ NGINX Reverse Proxy Configuration (45 min)
Goal: Route traffic to WordPress container Steps:

Create nginx.conf file with reverse proxy rules

Use Copilot to scaffold config:

nginx
server {
  listen 80;
  server_name yourdomain.com;

  location / {
    proxy_pass http://localhost:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}
Add NGINX service to docker-compose.yml

Test routing with curl or browser

Visual Tag: [NGINX flow diagram]

4️⃣ SSL Setup with Let’s Encrypt (45 min)
Goal: Secure site with HTTPS Steps:

Install Certbot on server

Run Certbot to generate certificates:

Code
sudo certbot certonly --standalone -d yourdomain.com
Update nginx.conf to include SSL:

nginx
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
Reload NGINX and verify HTTPS

Classroom Cue: “Lock your site with a padlock!”

5️⃣ GitHub + Copilot for Teamwork (30 min)
Goal: Collaborate on config and deployment Steps:

Use Git branches for NGINX and SSL config

Use Copilot to suggest improvements and comments

Create pull requests and review changes

Document deployment steps in README.md

Visual Tag: [GitHub workflow + Copilot suggestions]

6️⃣ Final Deployment and Showcase (30 min)
Goal: Launch and share live site Steps:

Run docker-compose up -d on cloud server

Visit live site via domain

Share links and reflect on teamwork

🧠 Optional Extensions
Add database backups and volume persistence

Use Docker secrets for password management

Deploy via CI/CD pipeline (GitHub Actions)

Outreach adaptation: bilingual content, regional themes, classroom showcase

Team-Based WordPress Deployment with Docker, GitHub & Copilot

 🎯 Objective
By the end of the session, participants will be able to:

Use Docker Compose to install WordPress and MySQL

Customize a WordPress template collaboratively

Use GitHub for version control and teamwork

Use Copilot in VS Code to scaffold and refine Docker and WordPress config files

⏱️ Duration
3 hours (can be split into two sessions)

👥 Target Audience
Beginners in DevOps or web development

Students, educators, outreach teams

Creators interested in collaborative deployment

📦 Materials Needed
Laptops with Docker, Git, and VS Code installed

GitHub accounts (for Copilot and repo access)

Sample WordPress theme (free or starter)

Internet access

🗂️ Module Breakdown
1️⃣ Introduction to Docker + GitHub + Copilot (20 min)
Goal: Understand the tools and their synergy Topics:

Docker: containerization basics

GitHub: version control and collaboration

Copilot: AI-assisted coding in VS Code

Classroom Cue: “Three tools, one powerful workflow!”

2️⃣ Project Setup and GitHub Integration (30 min)
Goal: Create a shared repo and local environment Steps:

Create GitHub repo: wordpress-docker-team

Clone repo locally

Create project folder and initialize with git init

Open in VS Code and activate Copilot

Visual Tag: [GitHub + VS Code interface]

3️⃣ Writing Docker Compose with Copilot (30 min)
Goal: Scaffold services using AI assistance Steps:

Create docker-compose.yml

Use comments like # Set up WordPress and MySQL containers to prompt Copilot

Review and refine suggestions collaboratively

Commit and push to GitHub

Classroom Cue: “Let Copilot write, you refine!”

4️⃣ Launching and Accessing WordPress (20 min)
Goal: Deploy and verify setup Steps:

Run docker-compose up -d

Access WordPress at http://localhost:8080

Complete setup wizard

Choose and activate a theme

Visual Tag: [Browser + WordPress dashboard]

5️⃣ Collaborative Customization (40 min)
Goal: Modify theme and content as a team Steps:

Assign roles: designer, content editor, devops

Use Git branches for theme edits (e.g., feature/homepage)

Add pages, customize layout

Merge changes via pull requests

Classroom Cue: “Design together, commit together!”

6️⃣ Managing Containers and Code Review (20 min)
Goal: Learn Docker commands and GitHub workflows Steps:

docker ps, docker-compose down

Use GitHub Issues and Discussions

Review Copilot-generated code for clarity and security

Visual Tag: [GitHub PR + Docker terminal]

7️⃣ Wrap-Up and Showcase (20 min)
Goal: Reflect and share Steps:

Demo team projects

Discuss Copilot’s role in teamwork

Share ideas for cloud deployment and plugin integration

🧠 Optional Extensions
Homework: Fork and customize a WordPress theme collaboratively

Advanced Module: Add NGINX + SSL + cloud deployment

Outreach Adaptation: Use bilingual content and regional themes

Installing WordPress Template Using Docker

 🎯 Objective
By the end of the session, participants will be able to:

Understand Docker basics and container architecture

Use Docker Compose to install WordPress and MySQL

Access and customize a WordPress template via browser

Manage containers and troubleshoot basic issues

⏱️ Duration
2.5 hours (can be split into two sessions)

👥 Target Audience
Beginners in web development or DevOps

Students, educators, outreach participants

Anyone interested in deploying WordPress locally or on cloud

📦 Materials Needed
Laptops with Docker and Docker Compose installed

Internet access

Sample WordPress template (free theme or starter content)

Text editor (VS Code recommended)

🗂️ Module Breakdown
1️⃣ Introduction to Docker (20 min)
Goal: Understand containerization Topics:

What is Docker?

Images vs. containers

Benefits for web development

Classroom Cue: “Think of containers as portable mini-computers!”

2️⃣ Environment Setup (20 min)
Goal: Prepare system for deployment Steps:

Install Docker and Docker Compose

Create a project folder: wordpress-docker

Open terminal and navigate to folder

Visual Tag: [Docker whale icon + folder structure]

3️⃣ Writing Docker Compose File (30 min)
Goal: Define services for WordPress and MySQL Steps:

Create docker-compose.yml file

Add services:

wordpress: image, ports, volumes

db: MySQL image, environment variables

Sample snippet:

yaml
version: '3.1'

services:
  wordpress:
    image: wordpress
    ports:
      - "8080:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: user
      WORDPRESS_DB_PASSWORD: pass
      WORDPRESS_DB_NAME: wpdb
    volumes:
      - wordpress_data:/var/www/html

  db:
    image: mysql:5.7
    environment:
      MYSQL_DATABASE: wpdb
      MYSQL_USER: user
      MYSQL_PASSWORD: pass
      MYSQL_ROOT_PASSWORD: rootpass
    volumes:
      - db_data:/var/lib/mysql

volumes:
  wordpress_data:
  db_data:
Classroom Cue: “This file is your blueprint!”

4️⃣ Running and Accessing WordPress (25 min)
Goal: Launch containers and access site Steps:

Run: docker-compose up -d

Visit http://localhost:8080

Complete WordPress setup wizard

Choose and activate a template/theme

Visual Tag: [Browser + WordPress dashboard]

5️⃣ Customizing the Template (30 min)
Goal: Modify theme and add content Steps:

Install a free theme (e.g., Astra, OceanWP)

Add pages: Home, About, Contact

Customize header, footer, and layout

Classroom Cue: “Make it yours!”

6️⃣ Managing Containers (15 min)
Goal: Learn basic Docker commands Steps:

docker ps, docker stop, docker rm

docker-compose down

Backing up volumes

Visual Tag: [Terminal + container list]

7️⃣ Wrap-Up and Showcase (10 min)
Goal: Reflect and share Steps:

Participants demo their WordPress sites

Discuss deployment options (cloud, local)

Share next steps: plugins, security, backups

🧠 Optional Extensions
Homework: Customize a WordPress blog and write a post

Advanced Module: Deploy to cloud using Docker + NGINX + SSL

Outreach Adaptation: Use bilingual content and regional themes