Uczenie się CSS z książki, będzie tak samo efektywne, jak przeczytanie książki na temat jazdy na rowerze. Musisz po prostu wsiąść i spróbować pojechać.
Ja polecam Ci taką drogę:
Selektory
Tutaj masz kompletną listę selektorów. Najważniejsze z nich, to:
-
.class {}
-
#id {}
-
div {}
-
:hover
, :nth-child
Możesz też liznąć temat szczegółowości selektorów, ale na początku, jak każdemu elementowi nadasz klasę, to Ci się nie przyda.
Najbardziej popularne właściwości - kolejność przypadkowa
Pozycjonowanie elementów na stronie
Interaktywny tutorial zbierający to wszystko do kupy
Jak już to ogarniesz, to wpisujesz w google "Simple CSS templates", następnie otwierasz pierwszy z brzegu link, wybierasz szablon i próbujesz to zakodować. Jak nie możesz czegoś zrobić, to otwierasz narzędzia deweloperskie i patrzysz, jakich właściwości użył autor szablonu.
Możesz też próbować sobie wyłączyć różne właściwości klikając w checkbox, wtedy nauczysz się, na co one wpływają.
Kolejnym krokiem będzie wybranie jakiegoś bardziej zaawansowanego szablonu i próba odtworzenia go. W tym celu wybierasz dowolny szablon z tej listy (ten jest spoko), otwierasz narzędzia deweloperskie i patrzysz jakich właściwości użył autor. Po czym próbujesz to sam zakodować.
Właściwości, które mogą Ci się przydać na tym etapie:
-
box-sizing
-
opacity
-
transition
-
transform
-
animations
-
Responsive Web Design
- Warto też, żebyś wrócił do listy selektorów i poznał nowe, takie jak
[attribute]
, element+element
, ::after
, ::before
itp.
- Na tym etapie musisz też stawić czoła temu, że nie wszystkie przeglądarki wspierają wszystkie właściwości. Tutaj możesz sprawdzić jaki procent i jakie konkretnie przeglądarki wspierają te bardziej zaawansowane właściwości. Dzięki temu będziesz miał pewności, że Twoja strona wygląda super seksi na wszystkich urządzeniach.
Jeżeli będziesz czuł, że otwieranie narzędzi deweloperskich i próbowanie odtworzenia takiej strony to oszustwo, to nie przejmuj się. Dzięki temu szybciej się nauczysz :)