Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revision | |
| tanszek:oktatas:techcomm:interactive_practice_of_css [2026/10/04 16:56] – kissa | tanszek:oktatas:techcomm:interactive_practice_of_css [2026/10/06 09:23] (current) – kissa |
|---|
| ===== Interactive Practice of CSS ===== | ===== 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://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. | - [[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. |
| |
