This project is developed as part of Lab Work №2: Creating Educational Materials in Informatics Using Generative AI. It is intended for students of grades 10–11 who study informatics at an advanced level.
The main focus is on building a complete multi-page website using HTML and CSS, with an emphasis on semantic structure, responsive design, and practical coding skills.
All content was generated and refined using generative AI tools, and the result is published on GitHub Pages.
To empower students with in-depth knowledge and practical skills in HTML and CSS, enabling them to design and build a fully functional, well-structured, and visually appealing website project from scratch.
By the end of this course, students will be able to:
- Remember: Define basic HTML tags and CSS properties
- Understand: Explain the structure of an HTML document and the role of CSS
- Apply: Use HTML and CSS to create structured and styled web pages
- Analyze: Distinguish between different types of CSS and layout strategies
- Evaluate: Assess the quality and responsiveness of a web project
- Create: Build and publish a complete multi-page responsive website
The project is organized as follows:
HTML-CSS-COURSE/
├── README.md ← Project description and structure
├── index.html ← Entry page for GitHub Pages
├── theory/ ← Theoretical materials
│ ├── main-content.html ← Core explanations and concepts
│ ├── examples.html ← Code examples and annotated use cases
│ └── glossary.html ← Glossary of key terms
├── practice/ ← Tasks and exercises
│ ├── tasks.html ← Practice tasks
│ ├── labs.html ← Lab work files
│ └── projects.html ← Creative project ideas
├── tests/ ← Self-assessment and final quiz
│ ├── self-check.html ← Interactive tests and answers
│ └── assessment.html ← Final evaluation materials
├── resources/ ← Visual and supporting resources
│ ├── images/ ← Diagrams and illustrations
│ ├── videos/ ← Optional video guides (if any)
│ └── links.html ← External learning resources
├── styles/ ← Custom CSS for GitHub Pages
│ └── custom.css
└── scripts/ ← Optional interactivity
└── interactive.js
| Lesson | Title | Key Focus |
|---|---|---|
| 1 | Introduction to Web Development | Tools setup, what is HTML/CSS, first page |
| 2 | HTML Basics | Text, links, lists |
| 3 | HTML Structure & Media | Semantic tags, tables, images |
| 4 | Introduction to CSS | Linking CSS, colors, fonts |
| 5 | Box Model & Layout Basics | Margin, padding, display types |
| 6 | Positioning & Float | position, float, basic layout building |
| 7 | Flexbox Layout | Flex container and alignment |
| 8 | Advanced Styling | Transitions, hover states, Google Fonts |
| 9 | Responsive Design | Media queries, mobile-first approach |
| 10 | Final Project & Deployment | Multi-page site + GitHub Pages deployment |
- ChatGPT – generating theory, tasks, glossary, tests
- DALL·E – visual illustrations, infographics
- GitHub Copilot – code generation and completion
- Tome / Gamma – presentation content
- Markdown Guide – formatting documentation
- GitHub Pages – publishing and hosting the project
📌 Live version of the project:
👉 https://olegtphd.github.io/html-css-ai-course/
(Replace with your actual GitHub Pages link)
- This module includes theoretical materials, glossary, practice, tests, and a final creative project.
- All AI-generated content was critically reviewed and adapted for educational use.
- Visuals were created using AI illustration tools or public domain resources.
This educational project is shared under the Creative Commons BY-NC-SA 4.0 License.
Feel free to use, adapt, and share for non-commercial educational purposes.
Prepared using generative AI under supervision of the instructor
Course: Informatics (Advanced level)
Lab Work №2