CSS¶
CSS: Cascading Style Sheet, czyli kaskadowe arkusze stylów. Służą do nadawania stylów wyglądu poszczególnym elementom strony HTML. Innymi słowy za pomocą reguł CSS możemy sprawić, żeby nasza strona wyglądała zjawiskowo (albo po prostu ładnie, co kto woli).
Ciekawe strony z interaktywnymi ćwiczeniami¶
CSS Diner¶
Idealne miejsce do przećwiczenia korzystania z selektorów CSS. Na stronie znajdują się 32 zadania o rosnącym poziomie trudności, poruszające takie tematy jak: identyfikatory, klasy, potomkowie, atrybuty. Każde ćwiczenie posiada krótki opis i przykłady (w języku angielskim). Same zadania polegają na wyborze odpowiednich elementów ze stołu za pomocą odpowiednich selektorów CSS.
Zalety¶
- 32 zadania o rosnącym poziomie trudności.
- Możliwość wyboru dowolnego zadania.
- Prosty i intuicyjny interfejs.
- Intuicyjna wizualizacja działania selektorów CSS.
- Nie wymaga logowania.
Wady¶
- Dostępne jedynie w języku angielskim.
Flexbox Froggy¶
Gdy chcemy uporządkować elementy w kontenerze na stronie za pomocą reguł CSS, to flexbox jest generalnie dobrym rozwiązaniem. Za jego pomocą możemy bez problemu wyrównać elementy w poziomie i pionie wedle naszych wymagań. Flexbox Froggy poprzez ćwiczenia polegające na przemieszczaniu żab na liście lilii wodnych pozwala na poznanie reguł CSS związanych z tym zagadnieniem.
Zalety¶
- 24 zadanie o rosnącym poziomie trudności.
- Możliwość wyboru dowolnego zadania.
- Prosty i intuicyjny interfejs.
- Intuicyjna wizualizacja działania reguł CSS.
- Nie wymaga logowania.
- Dostępne w języku polskim.
Wady¶
- Nie stwierdzono.
Flexbox Defense¶
Podobnie jak Flexbox Froggy, Flexbox Defense także pozwala poznać i przećwiczyć korzystanie z reguł CSS związanych z umieszczaniem elementów na stronie. Flexbox Defense jest rodzajem gry z gatunku tower defense, gdzie naszym zadaniem jest takie rozmieszczenie wież obronnych, by pokonać fale nadciągających wrogów.
Zalety¶
- 12 zadań o rosnącym poziomie trudności.
- Możliwość wyboru dowolnego zadania.
- Prosty i intuicyjny interfejs.
- Intuicyjna wizualizacja działania reguł CSS.
- Nie wymaga logowania.
- Angażujące ćwiczenia.
Wady¶
- Dostępne jedynie w języku angielskim.
Flex Box Adventure¶
Kolejna gra wprowadzająca nas do reguł CSS Flexbox. Tym razem naszym zadaniem jest pokierowanie dzielnym rycerzem podczas jego niebezpiecznej przygody.
Zalety¶
- 24 angażujące zadania o rosnącym poziomie trudności.
- 3 poziomy trudności.
- Bogate opisy prezentowanych reguł CSS z przykładami.
Wady¶
- Dostępne jedynie w języku angielskim.
- Zadania trzeba odblokowywać w ustalonej kolejności.
- Może być lekko przytłaczające dla początkowych użytkowników.