od Podstaw
3 godz. 55 min · HTML i CSS · Full-stack i Programowanie
Daniel NoworytaFull stack DeveloperW tej sekcji zapoznasz się z frameworkiem TailwindCSS i poznasz podstawowe pojęcia związane z systemem klas. Dowiesz się, czym jest TailwindCSS, jakie problemy rozwiązuje i jakie zalety posiada. Będziesz miał okazję zobaczyć, jak wyglądają gotowe klasy CSS, które oferuje TailwindCSS i jak można je wykorzystać w projektach.
Ta sekcja zawiera praktyczne zadanie polegające na zbudowaniu strony internetowej projektu The Eduweb Times na urządzenia mobilne. Będziesz mieć okazję zastosować swoje nowo zdobyte umiejętności w praktyce, tworząc atrakcyjną i funkcjonalną stronę internetową.
Ta sekcja skupia się na stylowaniu strony internetowej projektu The Eduweb Times w sposób responsywny, czyli tak, aby strona dobrze wyglądała na różnych urządzeniach. Zaczniemy od stylowania na Tablety. Nauczysz się, jak tworzyć style, które dostosowują się do rozmiaru ekranu, na którym jest wyświetlana strona.
Ta sekcja skupia się na stylowaniu strony internetowej projektu The Eduweb Times w sposób dedykowany dla wyświetlania na dużych ekranach, takich jak monitory desktopowe. Nauczysz się, jak wykorzystać różne techniki stylowania, aby stworzyć atrakcyjny i funkcjonalny wygląd strony na większych ekranach.
Ten kurs wprowadzający do frameworka TailwindCSS jest przeznaczony dla programistów i web developerów, którzy mają już podstawową wiedzę i umiejętności z zakresu HTMLa i CSSa, ale chcą nauczyć się używać jednego z najnowocześniejszych narzędzi do stylowania stron internetowych.
Jeżeli chodzi o klasę na on hover
Tawilwind też przychodzi nam tutaj z pomocą.
Za pomocą swoich utility classes bardzo
łatwo możemy sobie zmieniać style całego elementu,
jeżeli chodzi właśnie o modyfikatory. Tutaj bardzo
łatwo to zrobić pisząc po prostu hover i w tym momencie możemy zmienić sobie np.
kolor tego elementu, że na on hover powinien być bg-stone, załóżmy 600.
Już w tym momencie sprawdzimy
to jest nasz cały wrapper.
No i widzisz cały wrapper zmienia się na
on hover, czyli generalnie chodzi nam o to natomiast w pojedynczym elemencie.
Dlatego weźmiemy sobie wyrzucimy tę klasę tutaj i
wrzucimy sobie do pojedynczego wrapper'a, tam zapiszemy sobie.
No i teraz tutaj na on hover powinien nam się zmienić ten element. Jak widzisz
kolor się nam zmienił, także możemy sobie
skopiować spokojnie tą klasę i wkleić ją równie dobrze tutaj, w ten sam wrapper.
Natomiast jest jeden problem z tym, bo
zauważ, że ten element nie reaguje w ogóle na hover.
Na tym elemencie w oryginale mieliśmy
sytuację, gdzie te obramowanie znikało, można powiedzieć
znikało albo przyjmowało ten sam kolor, który mamy na on hover na całym elemencie.
Także możemy wziąć tutaj, ten element złapać.
I Tailwind przychodzi z fajnym konceptem tzw.
grupowaniem.