===== Interactive Practice of CSS =====

==== Flexbox ====
  - [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox|Flexbox]]
  - [[https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts|Basic concepts of flexbox]]
  - [[https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Aligning_items|Aligning items in a flex container]]

The in-class material can be downloaded from here: {{tanszek:oktatas:techcomm:techcomm-flexbox-material.zip}}

==== Games ====

  - [[https://flexboxfroggy.com/|Flexbox Froggy]] is a game where you help Froggy and friends by writing CSS code. Guide the frogs to the lilypads on the screen, using flexbox properties.
  - [[https://flukeout.github.io/|CSS Diner]] is an interactive learning game designed to teach CSS selectors. Through a series of fun, progressively challenging levels, players use CSS selectors to style and target elements on a virtual table of dishes.