Tailwind CSS: Debugowanie klas w przeglądarce
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.
W ramach wstępu spróbujemy sobie
zbudować kawałek tej listy, która tutaj jest na boku wraz ze stylami na mouseover.
Spróbujemy sobie odzwierciedlić to wszystko, co
tutaj mamy po lewej stronie, czyli tą listę za pomocą właśnie utility classes w Tailwindzie.
Przejdźmy teraz do pliku index.html.
Tworzymy tutaj tą naszą stronę i zaczniemy budować tutaj poszczególne elementy UI'a.
Ja sobie skasuję te tło, które tutaj jest niepotrzebne.
Usuniemy sobie teraz tutaj tą całą klasę,
zostawimy body tak jak jest i stworzymy nowy div, do którego przypiszemy klasę min-h-screen.
Do tego będziemy potrzebowali bg-stone-900,
do tego flex.Items-start.justify-center, i koniec dodamy padding top ustawiony na 8.
No zaczęliśmy używać sobie właśnie utility classes Tailwinda.
Min-h-screen nie mniej ni więcej oznacza to, że jakby
nasz div ma mieć wysokość całego okienka przeglądarki.
Gdzie widzisz normalne style CSS'owe są
aplikowane, są po prostu przykryte pod tych, pod tymi utility classes, które mamy.
Bg-stone jak można się domyśleć background o
kolorze, stone 900. Ta paleta kolorów dostarczana jest przez cały,
w dalszej części kursu pokażę Ci jak
możesz sobie rozszerzać tą paletę, modyfikować swoimi kolorami.
Flex prosty Utility class, który nadaje
Display flex naszemu kontenerowi. Tutaj Items-Flex Start, justify-center
mamy nadane justify-center. No i pt
to jest system z jakiego Tailwind korzysta. Top, bottom, right, left są te przedrostki
tutaj p oznacza padding.
Mamy też możliwość m-marginesu na top, a 8
jednostka, tutaj którą wykorzystują
twórcy Tailwinda i w tym przypadku jest to 2 remy, czyli 32 piksele.
Łatwo może się nauczyć tej jednostki.
Bardzo często po prostu mnożymy razy 4 i wychodzi nam końcowa wartość pikseli.
Jeżeli nie zmieniliśmy globalnej wartości
domyślnej czcionki, która jest 16 pikseli. W tym momencie jak sobie zapiszę
to mamy już zmiany widoczne na naszym okienku, tło zostało zamienione na kolor
ten stone 900, który pochodzi z palety barw kolorów tailwindowych.
Jak sobie teraz zobaczymy tutaj inspect,
jak sobie naciśniemy cls,
to widzisz klasy, które są nadane naszym naszym wrapperze.
Bardzo łatwo możesz sobie sprawdzić też w
narzędziu developerskim, która klasa odpowiada za co.
Zobacz pt 8 mamy padding top 2 rem.
Tak bardzo łatwo możesz sobie debugować klasy, które nadajesz swoim elementom i
zobacz włączać, wyłączać je, modyfikować i od razu widzieć zmiany na ekranie.
W tym momencie sobie uaktualnie wszystkie te klasy, które napisaliśmy.
No i mamy pierwszy wrapper, który jest
gotowym wrapperem do tego, żeby umieścić w nim naszą listę.