These are the portfolios created for the development of the course:
📘 Course Contents
Click a lesson to expand its summary, goals, and resources.
🎓 Lesson 1 — Publishing a Website with GitHub Pages
Summary:
Introduction to GitHub, repositories, and GitHub Pages. Students create and publish their first public website, learning how code becomes a live website through an automated process.
Lesson goals:
- Understand what GitHub is and how repositories work
- Publish a website for free using GitHub Pages
- Identify index.html as the website entry point
- Understand the basic publishing workflow
Resources:
🎥 Watch video (embedded)
- 📄 PDF: Download the PDF
🧠 Lesson 2 — Understanding AI-Generated Code (HTML, CSS & JavaScript Basics)
Summary:
Students learn how to read, understand, and safely modify AI-generated code. The lesson introduces the roles of HTML, CSS, and JavaScript and builds confidence working with code they did not write themselves.
Lesson goals:
- Understand the role of HTML, CSS, and JavaScript
- Read and interpret AI-generated code
- Make small, safe modifications to existing code
- Predict the effect of changes before running them
Resources:
🎥 Watch video (embedded)
- 📄 PDF: Download the PDF
🏗️ Lesson 3 — Understanding Website Structure Before Generating Code
Summary:
This lesson focuses on planning and structure before implementation. Students learn how to describe website layouts conceptually and how clear structure leads to better AI-generated results.
Lesson goals:
- Identify common website sections and layouts
- Distinguish structure from visual design
- Choose layouts based on website goals
- Write clear structural descriptions for AI prompts
Resources:
🎥 Watch video (embedded)
- 📄 PDF: Download the PDF
💻 Lesson 4 — Fast Local Development with VS Code
Summary:
Students set up a professional local development environment using VS Code, Live Server, and Git. They learn how to work safely, preview changes instantly, and publish updates confidently.
Lesson goals:
- Set up a local development environment
- Edit and preview websites locally
- Understand the professional development workflow
- Commit and publish changes safely
- Use AI assistance responsibly inside the editor
Resources:
🎥 Watch video (embedded)
- 📄 PDF: Download the PDF
🤖 Lesson 5 — Using AI to Create New Pages
Summary:
Students create new pages and advanced components using AI. The lesson emphasizes iteration, debugging, and refinement, turning AI into a true development partner.
Lesson goals:
- Create new HTML pages from scratch
- Use AI to generate and refine page structures
- Build interactive and visual components
- Debug and improve AI-generated code
- Connect multiple pages into a coherent website
Resources:
🎥 Watch video (embedded)
- 📄 PDF: Download the PDF
💬 Final Lesson — User Feedback with GitHub Discussions & Giscus
Summary:
In the final lesson, students transform their static website into a living project by adding user feedback through GitHub Discussions and Giscus. Collaboration and reflection become part of the development process.
Lesson goals:
- Understand the importance of user feedback
- Enable GitHub Discussions
- Integrate Giscus into website pages
- Collect and manage real user comments
- Reflect on feedback to guide future improvements
Resources:
🎥 Watch video (embedded)
- 📄 PDF: Download the PDF