> For the complete documentation index, see [llms.txt](https://redi-school-1.gitbook.io/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/applicant-hub/full-stack-track/html-and-css.md).

# HTML & CSS

## What is the course about?

Learn the basic skills of web development with HTML and CSS through fun, hands-on lessons. Everyone can build a website, and we’ll teach you how! The HTML/CSS course is the introduction to the Web Development track. The course is right for you if you’re curious about how websites work and enjoy learning through practice. Students who feel ready will also have the chance to build a small website at the end.

{% hint style="info" %}

### Course Details <a href="#how-do-i-participate-in-the-courses-self-paced-mode-vs-cohort-mode" id="how-do-i-participate-in-the-courses-self-paced-mode-vs-cohort-mode"></a>

* Classes: Tuesday and Thursday, 19:00 - 21:00
* Time Invest: 15 hours per week
* Timeline: Start Date is 14th of September 2026, End Date is 8th of December 2026 (14-weeks)
* Hybrid: Certain events take place in person in the following locations: NRW, Berlin, Metropolitan Region of Hamburg. [More information](#onsite-activities)
  {% endhint %}

{% embed url="<https://www.loom.com/share/87059daebff947839e6b7946b812d6fe?sid=5fb63678-0454-4574-8f5d-c3f748b7a8a0>" %}
Learn more about the HTML & CSS Course
{% endembed %}

## Why should you take this course?

* **Hands-on Learning -** You will learn by doing. Each week includes guided practice, challenges, and small tasks to help you understand and apply core web development concepts. If you feel ready, you can build a small website at the end of the course.
* **Content -** You'll learn the basics of HTML and CSS using real tools used by web developers every day.
* **Your Start -** This course is the ideal starting point for your path toward becoming a Full-Stack developer. You will leave the course with new skills, projects, and a ReDI Certificate. Afterward, you'll be ready to join the next course: JavaScript.
* **Industry Experts -** Our teachers are volunteers working in tech. They will support you with real-world insights and feedback to help you start your journey into web development.

<figure><img src="/files/wdTtt66t7oF5b80zGWab" alt=""><figcaption><p>An example of an E-Commerce Storefront learners have built in the course</p></figcaption></figure>

## How You’ll Learn

This course follows a concept-based learning approach. Each week, you’ll focus on one topic through hands-on activities, guided demos, and practice tasks. You’ll get feedback and support in class and during coaching sessions.

## Final Project

You'll create a small personal project at the end of the course. This project allows you to apply and showcase the skills you have learned throughout the lessons. It is completed after the weekly lessons and is not broken down into smaller parts throughout the course.

## Content

<table><thead><tr><th width="165">Week</th><th>Topic</th><th>Content</th></tr></thead><tbody><tr><td>0</td><td>Onboarding</td><td>Get to know ReDI</td></tr><tr><td>1</td><td>Kick-Off</td><td>Get to know the Teachers</td></tr><tr><td>2</td><td><p></p><p>Introduction to HTML</p></td><td>Get started with VS Code, Git &#x26; GitHub.</td></tr><tr><td>3</td><td>HTML Basics</td><td>Git &#x26; GitHub, CLI, HTML elements, commonly used tags</td></tr><tr><td>4</td><td>CSS Fundamentals</td><td>Selectors, properties, box model</td></tr><tr><td>5</td><td>ID Sectors &#x26; Box Model</td><td>ID selectors, positioning, Flexbox, Grid, and responsive design</td></tr><tr><td>6</td><td>FlexBox &#x26; Mini Project into</td><td>Review key Flexbox concepts and prepare for the mini project.</td></tr><tr><td>7</td><td>Mini Project</td><td>Build forms, focus on accessibility, and use advanced selectors.</td></tr><tr><td>8</td><td>Recap</td><td>Animations, transitions, pseudo-classes</td></tr><tr><td>9</td><td>Feedback Session</td><td>Participate in a feedback session about your ReDI Expereince</td></tr><tr><td>10</td><td>Career Week</td><td>You can participate in a variety of career workshops.</td></tr><tr><td>11</td><td>Final Project Intro</td><td>Key concepts are reviewed</td></tr><tr><td>12</td><td>Final Project</td><td>You implement what you have learned in a final project.</td></tr><tr><td>13</td><td>Final Project</td><td>You implement what you have learned in a final project.</td></tr><tr><td>14</td><td>Demo Day</td><td>You present your final project</td></tr></tbody></table>

## A typical week

The course has two online sessions per week. For on-site events, check out [On-site Activities](#onsite-activities). The session format differs from what you might have seen before.&#x20;

<details>

<summary><strong>Tuesday 19:00 - 21:00</strong></summary>

Every Tuesday from 19:00 to 21:00, you have an online coaching session in which you present your weekly milestone to a coach and receive guidance and support to complete it.

</details>

<details>

<summary><strong>Thursday 19:00 - 21:00</strong></summary>

Every Thursday from 19:00 to 21:00, you have an online input session during which the teachers introduce new concepts.

</details>

<details>

<summary><strong>Friday - Monday</strong></summary>

You work on your weekly project milestone. That means you will be coding hands-on by yourself. If you run into problems, you can contact your class on Slack. You complete the milestone before Tuesday to present it in the session.&#x20;

</details>

## Onsite Activities

Based on your location, there are different on-site activities. Find out more below.

{% tabs %}
{% tab title="Berlin" %}
If you are located in Berlin and surrounding, we invite you to some online and onsite community events throughout the semester.&#x20;
{% endtab %}

{% tab title="NRW" %}
If you are located in NRW, we invite you to some online and onsite community events throughout the semester.&#x20;
{% endtab %}

{% tab title="Hamburg" %}
If you are based in the Hamburg metropolitan region, you’ll attend some on-site career events and our Demo Day Celebration in December.
{% endtab %}
{% endtabs %}

## Timeline

<table><thead><tr><th width="177">Month</th><th width="229.99993896484375">Topics</th><th>Description</th></tr></thead><tbody><tr><td>June</td><td>Open Days</td><td>Join Info Sessions to get to know ReDI School</td></tr><tr><td>July &#x26; August </td><td>Open Days<br>Application Open<br>Student Interviews</td><td>Join Info Sessions to get to know ReDI School<br>Complete the application form and finish your prework.<br>Learners are interviewed for the course.</td></tr><tr><td>September</td><td>Kick-Off<br>Course runs</td><td>We kick-off the semester.</td></tr><tr><td>October &#x26; November</td><td>Course runs</td><td>You'll join the sessions and work on your projects.</td></tr><tr><td>December</td><td>Demo Day</td><td>You'll present your final project.</td></tr></tbody></table>

## How to Graduate from the Course?

To graduate and receive the ReDI Certificate, we ask you to:

* Attended 80% of the sessions (We have a [camera on policy](/applicant-hub/resources/camera-on-policy.md))
* Join 2 Online or Onsite Career Events
* Complete 1 IBM SkillsBuild Course at ReDI
* Deliver and present 1 Final Project

## After the course

* You'll have completed projects which you can add to your portfolio.
* You'll have gained a solid foundation in HTML structure and elements. You'll have mastered essential CSS selectors for styling web pages. You'll understand and be able to implement responsive web design techniques.
* You are prepared to move to the ReDI’s JavaScript course.

{% hint style="success" %}

## Is this course for me?

* [x] you are interested in building and designing websites
* [x] you can understand and speak English
* [x] you can commit at least 15 hours a week
* [x] you are eager to work on projects
* [x] you are committed to working in the [ReDI style](/applicant-hub/resources/redi-style.md)
  {% endhint %}

***

## FAQ <a href="#faq" id="faq"></a>

<details>

<summary>Not sure which track you are interested in?</summary>

If you don't have any experience with tech, apply to our introduction course: HTML & CSS, Infrastructure Basics, Python Foundations or UX/UI Design Bootcamp. To understand which tech career interests you, check out the following link:&#x20;

* [How to choose a tech career?](https://www.freecodecamp.org/news/how-to-choose-a-tech-career/)
* [Career Changer Playbook](https://ga-core.s3.amazonaws.com/cms/files/files/000/003/816/original/Career-Changers-Playbook.pdf)
* [Career Tech Guide](broken://spaces/Oa1pNW9YA7CW5ZRLDgwP/pages/5UeYVIpDeUCdYECaVbyh)

</details>

<details>

<summary>Not sure which course level to apply for? </summary>

Check out the [Prework](/applicant-hub/resources/prework.md) of the different levels. If you are a little bit challenged but able to complete a Prework, then the level is right for you.

</details>

{% hint style="info" %}

## 🤖 Unsure about which course to choose or have a question?

Try out our [AI Chatbot on Open AI](https://chatgpt.com/g/g-682b35175a5881919fac8d808d8a81ef-redi-school-dcp-course-applicants-advisor) (you need a ChatGPT account to access it). Please keep in mind that the Chatbot might make mistakes. You can find all the correct information on the Applicant Hub.&#x20;
{% endhint %}

***

### [💬](https://emojipedia.org/speech-balloon) Still unsure what to do..?&#x20;

You tried our [AI Bot](https://chatgpt.com/g/g-682b35175a5881919fac8d808d8a81ef-redi-school-dcp-course-applicants-advisor) - and didn’t find the answer you needed? Please make sure to review the **Applicant Hub** carefully, your answer is likely there. Still stuck? Check our [FAQ Page](https://redi-school-1.gitbook.io/applicant-hub/frequently-asked-questions-faq). Alternatively, you can reach out to us via email: <dcp@redi-school.org>.&#x20;


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://redi-school-1.gitbook.io/applicant-hub/full-stack-track/html-and-css.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.