CSS Game - Guide

Game Mode

Welcome to CSS Game! This game allows you to practice and improve your CSS skills. The goal is to get the emoji character across the water obstacle by modifying the CSS properties of the bridge.

Herní prostředí CSS Bridge
Game environment with an emoji character, water obstacle, and a bridge made of three parts. At the top, you can see forms for modifying CSS properties. In the top right corner is an inspection tool (magnifying glass) showing the current CSS properties of the bridge.

How does the game work?

Each level presents a new challenge with different CSS concepts. Using the forms at the top of the screen, you modify CSS properties. The emoji character needs to cross from one side to the other, and it's up to you to figure out how to get it there!

What do you find in the game mode?

  • Visualization area - The main part of the screen where you see the emoji character, water obstacle, and bridge
  • Form system - Allows you to modify:
    • The .bridge form for the bridge as a whole
    • The .container form for modifying the container in which the bridge is placed
    • The .parts form for modifying individual parts of the bridge (in more advanced levels)
  • Magnifying glass - A useful tool in the top right corner that shows you the current CSS properties
  • Help - If you're stuck, there's always a help button available

CSS Concepts

Během hry se postupně setkáš s různými CSS vlastnostmi včetně:

Throughout the game, you'll encounter various CSS properties including:

  • Positioning - position: absolute, relative, static, fixed, sticky
  • Flexbox - flex-direction, justify-content, align-items
  • Grid - grid-template-columns, grid-area, grid-row, grid-column
  • Spacing - margin, padding
  • Transformation - rotate, translate, scale
  • Visibility - overflow, display, opacity

Game Mechanics

1. Validation System

The game automatically checks whether the bridge spans the water obstacle and connects the starting and ending points. In more complex levels with multiple bridge parts, validation is performed for each part separately.

2. Multiple Solutions

Most levels have multiple ways to solve them - be creative!

3. Some Limitations

Some levels may have certain CSS properties forbidden, which forces you to find alternative solutions and deepen your knowledge