# HTML / CSS

{% hint style="success" %}
**Get Started**

* Are you new to this course: [Course Overview](../self-onboarding/your-course)
* Start your Onboarding: [Get Started](../self-onboarding/get-started)
{% endhint %}

### Course Plan  <a href="#get-started" id="get-started"></a>

<table><thead><tr><th width="79.74041748046875">Day</th><th width="114.97625732421875">Date</th><th>Topics</th><th>Format</th></tr></thead><tbody><tr><td>Tues</td><td>18.03.2025</td><td>Course Kick off online</td><td>💻 Online</td></tr><tr><td>Thurs</td><td>20.03.2025</td><td>Website structure &#x26; intro to HTML</td><td>💻 Online</td></tr><tr><td>Tues</td><td>25.03.2025</td><td>HTML Basics<br>Syntax and code structure</td><td>💻 Online</td></tr><tr><td>Thurs</td><td>27.03.2025</td><td>HTML Basics II</td><td>💻 Online</td></tr><tr><td>Tues</td><td>01.04.2025</td><td>Recap HTML + introduction to CSS with element selectors</td><td>💻 Online</td></tr><tr><td>Thurs</td><td>03.04.2025</td><td>Units (px/%), CSS text formatting, borders &#x26; background colours</td><td>💻 Online</td></tr><tr><td>Tues</td><td>08.04.2025</td><td>Class &#x26; ID selectors</td><td>💻 Online</td></tr><tr><td>Thurs</td><td>10.04.2025</td><td>CSS box model,<br>Box model practice</td><td>💻 Online</td></tr><tr><td>Tues</td><td>15.04.2025</td><td>Display inline/block, Intro to Flexbox + Flexbox Froggy</td><td>Hybrid Class:<br>For students in Hamburg: on site at <a href="https://www.google.com/maps/place/FFW+Germany+GmbH/@53.554759,9.9830166,17z/data=!3m1!4b1!4m6!3m5!1s0x47b18f427cfec167:0xe4e9fd6c2f182963!8m2!3d53.554759!4d9.9830166!16s%2Fg%2F1tnqg12c?entry=ttu">JAKALA</a>.<br>For students in Berlin and NRW: Online.</td></tr><tr><td>Thurs</td><td>17.04.2025</td><td>Flexbox practice &#x26; Preject intro &#x26; working time</td><td>💻 Online</td></tr><tr><td>Tues</td><td>22.04.2025</td><td>Preject<br>Mini recapathon</td><td>💻 Online</td></tr><tr><td>Thurs</td><td>24.04.2025</td><td>Preject Demo</td><td>💻 Online</td></tr><tr><td>Tues</td><td>29.04.2025</td><td>RECAP: Flexbox + Display (block/inline/fixed/relative) NEW: Psuedo classes, Pseudo elements, combinators</td><td>💻 Online</td></tr><tr><td>Thurs</td><td>01.05.2025</td><td><strong>Holiday</strong></td><td></td></tr><tr><td>Tues</td><td>06.05.2025</td><td>Students Feedback Session / ReDI Led</td><td>💻 Online</td></tr><tr><td>Thurs</td><td>08.05.2025</td><td><strong>Holiday</strong></td><td></td></tr><tr><td>Tues</td><td>13.05.2025</td><td>Students Participate in Career Weeks </td><td>💻 Online</td></tr><tr><td>Tues</td><td>20.05.2025</td><td>Responsive design, Media queries</td><td>Hybrid Class:<br>For students in Hamburg: on site at <a href="https://www.google.com/maps/place/FFW+Germany+GmbH/@53.554759,9.9830166,17z/data=!3m1!4b1!4m6!3m5!1s0x47b18f427cfec167:0xe4e9fd6c2f182963!8m2!3d53.554759!4d9.9830166!16s%2Fg%2F1tnqg12c?entry=ttu">JAKALA</a>.<br>For students in Berlin and NRW: Online.</td></tr><tr><td>Thurs</td><td>22.05.2025</td><td>Introduce VSCode, Local HTML &#x26; CSS files, Inline Styling<br>Final Project Kick-Off</td><td>💻 Online</td></tr><tr><td>Tues</td><td>27.05.2025</td><td>Icons &#x26; using other people's code/assets/fonts<br>Project Preparation 1</td><td>💻 Online</td></tr><tr><td>Thurs</td><td>29.05.2025</td><td><strong>Holiday</strong></td><td>💻 Online</td></tr><tr><td>Tues</td><td>03.06.2025</td><td>Grid pt 1 + Grid pt 2<br>Project Preparation 2</td><td>💻 Online</td></tr><tr><td>Thurs</td><td>05.06.2025</td><td>Accessibility<br>Project Preparation 3</td><td>💻 Online</td></tr><tr><td>Tues</td><td>10.06.2025</td><td>HTMLForms+ Validators<br>Project Preparation 4</td><td>💻 Online</td></tr><tr><td>Thurs</td><td>12.06.2025</td><td>Final Project</td><td>💻 Online</td></tr><tr><td>Tues</td><td>17.06.2025</td><td>Class Demo Day</td><td>💻 Online</td></tr></tbody></table>

### **⭐️ Help** <a href="#help" id="help"></a>

Reach out to Abdullah, your Course Manager, for help via Slack.
