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.
CSS Diner
CSS Diner

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 Froggy
Flexbox Froggy

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.
Flexbox Defense
Flexbox Defense

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.