Tailwind CSS: Grupowanie elementów
od Podstaw
3 godz. 55 min · HTML i CSS · Full-stack i Programowanie
Daniel NoworytaFull stack DeveloperCzego się nauczysz
- Zrozumienie podstawowych koncepcji i zalet frameworka TailwindCSS.
- Instalacja i konfiguracji frameworka TailwindCSS.
- Tworzenie stylów strony internetowej przy użyciu gotowych klas CSS.
- Stylowanie strony internetowej w sposób responsywny, tak aby dostosowywała się do różnych rozmiarów ekranów.
- Stylowanie strony internetowej w sposób dedykowany dla wyświetlania na dużych ekranach.
- Zastosowanie różnych technik stylowania, takich jak tworzenie układów za pomocą display flex i display grid.
- Zbudowanie atrakcyjnej strony internetowej, korzystając z frameworka TailwindCSS.
- Optymalizacja pracy i przyspieszenia procesu projektowania interfejsów użytkownika dzięki wykorzystaniu gotowych klas CSS oferowanych przez framework TailwindCSS.
Pierwszy rzut oka na TailwindCSS
W 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.
Projekt The Eduweb Times
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ą.
The Eduweb Times i responsywność
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.
The Eduweb Times i duże ekrany
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.
Dla kogo jest ten kurs?
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.
Na czym to polega? Otóż możemy reagować na, tym elementem,
możemy reagować na cały stan np.
całej grupy, czyli rodzica, który jest, który wrappuje ten element.
W naszym przypadku tutaj ta trójka to jest ten
div, czyli te trzy elementy są wrappowane przez tego rodzica, czyli na rodzica
możemy sobie ustalić group, ttuaj nie dzieje się nic innego jak
Tailwind nadaje pewną wartość, dzięki której możemy się później odnieść dziecku.
I tutaj jeżeli zrobimy sobie group hover,
kolor wkleimy sobie na bg-stone, załóżmy, że będzie taki, zapiszemy to sobie.
Tło nam się zmienia. Oczywiście nam chodzi o border.
Zmienimy sobie bg na border, zapiszemy
i zobacz, mamy jakby efekt, o który nam chodziło.
Także to jak widzisz bardzo łatwo możemy odwoływać się do tych wartości poprzez
właśnie nadawanie jakby dodatkowych class, które normalnie pisaliśmy w CSS.
Tutaj można też nadawać nazwy tym grupom, np. item-wrapper.
W tym momencie możemy się tego odnieść pisząc sobie nazwę tej grupy,
pomyślniku hover/item-wrapper
i zapisując sobie to mamy ten sam efekt.
Natomiast możemy sobie nadawać semantyczne nazwy tym elementom.
Ja teraz korzystam z magii kina i po
prostu skopiuję sobie te wszystkie elementy, które mamy tutaj.
Pokopiuję to i podmieniam treści tak,
żebyśmy mieli podobny efekt jak na stronie.
Ahoy!