Tailwind CSS: Wstęp i omówienie strategii
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.
Dotarliśmy do ostatniego punktu naszej implementacji tego designu.
Otóż w tym,
w tej części tego kursu skupimy się na implementowaniu części
tekstu na ekrany desktopowe i spróbujemy sobie zaimplementować ten widok dalej.
Sprawić, by nasza strona dobrze
wyświetlała się również na ekranach, na większych komputerach.
Dlatego teraz przejdźmy najpierw może do naszego kodu.
Zobaczmy na czym skończyliśmy nasz ostatni
epizod tego kursu i przeskoczymy sobie tutaj do naszej strony.
I to jest to, co nam się teraz wyświetla na chwilę obecną.
To, co mamy tutaj, to jest widok na tablety.
I to jest akurat iPad mini zrobiony tutaj
jak widzisz wszystko odzwierciedliliśmy tak jak powinno być.
I teraz przejdźmy sobie już na widok, na widok responsywny.
1400 pikseli sobie
wpiszemy tutaj.
I mamy widok na 1400 pikseli, bo to jest
widok, który został nam tutaj przygotowany przez naszego designera.
Dlatego będziemy mogli sobie dużo łatwiej
tutaj odzwierciedlać pewne rzeczy, których sobie zobaczymy.
1400 pikseli jest szerokość.
No i przejdźmy teraz do naszego edytora
kodu i zacznijmy sobie implementować poszczególne rzeczy.
Mamy tutaj ten pierwszy grid.
To co sobie złapaliśmy, te pierwsze cztery,
te pierwsze cztery
sekcje i póki co jest to grid dwukolumnowy.
Natomiast my tutaj musimy się już przestawić
na 12 kolumnowy z tego względu, że mamy 12 kolumn i to zajmuje 5, to zajmuje też 5, to
zajmuje dwie, tak że bardzo ciężko byłoby to inaczej podzielić.
I dodatkowo musimy tutaj wprowadzić dodatkowy rząd z
tego względu, że bardzo ciężko byłoby nam tutaj kontrolować wyświetlanie tego
elementu. I przechodząc właśnie ten element powinien
być na dwóch rzędach, a ten tutaj jest pod tymi dwoma sekcjami,
dlatego musimy tutaj sobie wprowadzić
drugi rząd w tym całym naszym divie.
Przejdźmy teraz do naszego kodu.
Zobaczmy jak to wygląda na chwilę obecną.
Nie wygląda to ciekawie, dlatego zacznijmy od implementowania naszego breakpointa
xl i zaczniemy tutaj od grid cols i przejdziemy na 12.
Zobaczmy, co się stanie na naszej stronie.
Otóż,
póki co nie wygląda to oczywiście ładnie,
bo domyślnie wszystkie sekcje ustawiają się w jednej kolumnie.
Dlatego teraz musimy sobie poszczególnym
sekcjom powiedzieć na ile kolumn powinny rozkładać swoją objętość tutaj.
I z tego co widać pierwsza sekcja, ta z głównym newsem,
raz, dwa, trzy, cztery, pięć kolumn, później ta druga sekcja i trzecia.
Druga sekcja pięć kolumn i trzecia dwie.
Natomiast ta sekcja w naszym, w naszej,
to jest numer 4, bo jeszcze przed nią mamy reklamę, która wskoczy nam tutaj
niżej, poniżej te dwie sekcje.
Czyli zacznijmy od tej pierwszej sekcji.
xl:col -span na 5.
Czyli mówimy tutaj, że po prostu ta sekcja ma zajmować 5 kolumn.
Dodatkowo sekcja numer 2, czyli ta z newsami też musi zajmować 5 kolumn.
Czyli możemy sobie spokojnie skopiować ten element tutaj.
Ta sekcja tutaj może zajmować ciągle dwie kolumny.
To jest wszystko ok.
I ta sekcja tutaj poniżej na pewno musi się tutaj rozciągnąć na 1,
2, 3, 4, 5, 6, 7 kolumn na widoku xl.
Czyli możemy sobie wkleić i tutaj zrobić na siódemkę.
Zapiszemy to sobie. Przejdźmy do naszego widoku.
No i coś tu już się zmieniło.
Natomiast to jeszcze nie jest to co byśmy chcieli.
Z tego względu, że nie powiedzieliśmy tej
kolumnie gdzie ma zaczynać, gdzie ma zaczynać swoje wyświetlanie.
Mamy tu 5, 5, potem w kolejności jest niestety ta kolumna.
Dlatego też ona jest pierwsza.
Jako, że nie mieści się tutaj w tym
kawałku, no to przeskakuje nam na drugi rząd i jest to wyświetlane pod sobą.
Tak że teraz spróbujmy sobie zrobić coś
z tą kolumną tutaj i przenieść ją właśnie w to miejsce.
I tutaj do pomocy mamy jedną z utility classes, która pozwala nam powiedzieć, od
której kolumny nasza sekcja powinna zacząć swoje wyświetlanie.