# 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 16th of March 2026, End Date is 18th of June 2026 (14-weeks)
* Hybrid: Certain events take place in person in the following locations: NRW, Berlin, 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 will get started with the tools used by web developers every day: Git, GitHub, VS Code, and the basics of HTML and CSS.
* **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, a GitHub profile, and a ReDI Certificate. Afterward, you can 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="https://1700442351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCNIW57F3LHNLDAPqiKGW%2Fuploads%2FcraMBieoqrSvC1Jb0tap%2Fimage.png?alt=media&#x26;token=84777898-46cc-457e-95e4-c93b8ba4ca59" alt=""><figcaption><p>Example E-Commerce Store you will build 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 will 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 four on-site community events throughout the semester.&#x20;
{% endtab %}

{% tab title="NRW" %}
If you are located in NRW, we invite you to four on-site community events throughout the semester. The Demo Day will also take place in person in Düsseldorf.&#x20;
{% endtab %}

{% tab title="Hamburg" %}
If you are based in the Hamburg metropolitan region, you’ll attend two in-person sessions: one onsite at the end of April, and our Demo Day Celebration at the end of June.
{% 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>January</td><td>Open Days</td><td>Join Info Sessions to get to know ReDI School &#x26; Fall 2025</td></tr><tr><td>January - February</td><td>Open Days<br>Application Open</td><td>Join Info Sessions to get to know ReDI School &#x26; Fall 2025<br>Complete the application form and finish your prework.</td></tr><tr><td>February</td><td>Student Interviews</td><td>Students are interviewed for the course.</td></tr><tr><td>March</td><td>Kick-Off<br>Course runs</td><td>We kick-off the semester.</td></tr><tr><td>April</td><td>Course runs</td><td>You join the sessions and work on your project.</td></tr><tr><td>May</td><td>Course runs</td><td>You join the sessions and work on your project.</td></tr><tr><td>June</td><td>Demo Day</td><td>Present their 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](https://redi-school-1.gitbook.io/applicant-hub/resources/camera-on-policy))
* Submit all three projects

## After the course

* You completed three projects which you can add to your portfolio.
* You gained a solid foundation in HTML structure and elements. You mastered essential CSS selectors for styling web pages. You understand and 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](https://redi-school-1.gitbook.io/applicant-hub/resources/redi-style)
  {% endhint %}

***

## How to apply?

{% stepper %}
{% step %}

### Review The Applicant Hub

Before submitting your application, make sure you have carefully read all the important information about the course, including the semester dates, course content, course hours, and the instructions on how to successfully complete your prework.
{% endstep %}

{% step %}

### ~~Sign up to Join Open Day~~

~~Optional for current ReDI students. Join us to find out more about the courses and requirements.~~
{% endstep %}

{% step %}

### Complete [Prework](https://redi-school-1.gitbook.io/applicant-hub/full-stack-track/html-and-css/prework-html-and-css)

Complete it before the application deadline. Start early! The Prework might take up to 20 hours in total. The deadline is stated in the email with the link to the application form.&#x20;
{% endstep %}

{% step %}

### Hand in [Application Form](https://redischool.typeform.com/ApplicationDCP)

We ask you for the link to your completed prework in the application form.&#x20;
{% endstep %}

{% step %}

### Interview (23.02 - 27.02)

Depending on your course, you may be interviewed&#x20;
{% endstep %}

{% step %}

### Onboarding (16.03)

Your course starts!
{% endstep %}
{% endstepper %}

{% hint style="success" %}

## Complete Your Prework

Start applying now by completing the [HTML / CSS Prework](https://redi-school-1.gitbook.io/applicant-hub/full-stack-track/html-and-css/prework-html-and-css)!
{% 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](https://redi-school-1.gitbook.io/applicant-hub/full-stack-track/broken-reference)

</details>

<details>

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

Check out the [Prework](https://redi-school-1.gitbook.io/applicant-hub/resources/prework) 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;