> For the complete documentation index, see [llms.txt](https://redi-school-1.gitbook.io/teacher-applicant-hub/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://redi-school-1.gitbook.io/teacher-applicant-hub/full-stack-track/html-css.md).

# HTML / CSS

### 📚 Course Details

* **Schedule:** Tuesday & Thursday, 19:00–21:00 (Online)
* **Format:** Live online lectures with practical exercises. 
* **Final Outcome:** Mini Project & Final project.

***

### 👥 Volunteer Roles

* **Session Owner:** Leads classes and introduces new concepts.
* **Session Assistant:** Supports students and manages Zoom logistics during class.
* **Backup Teacher:** Steps in when regular teachers are unavailable.

***

### 🧩 Topics Covered

* HTML Fundamentals
  * Website Structure & Introduction to HTML
  * HTML Basics: Syntax and Code Structure
  * HTML Basics II
  * HTML Recap
* CSS Fundamentals 
  * Introduction to CSS & Element Selectors
  * Units (`px`, `%`), Text Formatting, Borders & Background Colors
  * Class & ID Selectors
  * Pseudo-classes, Pseudo-elements, Combinators
  * CSS Box Model
  * Box Model Practice
* Layout & Responsive Design
  * Display: Inline & Block
  * Introduction to Flexbox
  * Flexbox Practice
  * Responsive Design & Media Queries
  * CSS Grid (Part 1 & Part 2)
* Tools & Workflow
  * Introduction to VS Code
  * Local HTML & CSS Files
  * Inline Styling
  * Using Icons, Fonts & External Assets
* Accessibility & Forms
  * Web Accessibility Basics
  * HTML Forms & Validators

***

### 🎓 Final Project

At the end of the course, students complete a **final project** and give a **presentation** demonstrating their learning.

The project consists of a working website built with HTML & CSS, including a live demo.

Take a look at **an example** of what learners will have achieved by the end. 👇

{% embed url="<https://fredgui10.github.io/blue-hearts-bright-minds/index.html?authuser=4>" %}

<div data-with-frame="true"><figure><img src="/files/R947EG7a6thFH9ps0gIk" alt="" width="375"><figcaption></figcaption></figure></div>

***

<h2 align="center"><a href="/pages/0kchzzWzyDzTftgInaI5#volunteer-teacher-recruitment-are-limited-but-more-spots-will-be-reopened-on-thursday-january-8th-at"><mark style="color:orange;background-color:orange;">👋 Book your Meet &#x26; Greet Call!</mark></a></h2>

***

Thank you for supporting the ReDI students 🧡

### More info:

* Find out more [About ReDI](/teacher-applicant-hub/about/about-redi-school.md)
* Find out more [About DCP](/teacher-applicant-hub/about/dcp-online.md)
* Find out about our [How to Volunteer](/teacher-applicant-hub/about/your-volunteer-journey.md)
* Find out more about the [Semester Timeline](/teacher-applicant-hub/about/semester-timeline.md)

### FAQ

* Check out: [I can't teach tonight](broken://pages/wvc6VmyUFvn9NFRtwtJU), [I am dropping out](broken://pages/eUzENWHDhDiXk5y8XwYo), [I feel uncomfortable](broken://pages/yBP7yF6y0QPEZ9r2aK2L).
* In case you have questions, write an email to <dcp-volunteering@redi-schooll.org>.