Tailwind CSS: Osie XY i wrapper na listę
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.
Obejrzyjmy sobie teraz tą naszą stronę z ahoy, no i mamy,
chcielibyśmy jeszcze zbudować drugi
wrapper, który będzie utrzymywał całą naszą listę.
Dlatego przejdźmy teraz do naszego pliku.
Zbudujmy sobie w tym divie kolejny div,
który będzie divem określającym szerokość naszej listy.
Tu będziemy potrzebowali div i nadamy sobie klasy h-full.
Chcemy, żeby ten div miał jakby całą wysokość kontenera, bg damy stone-800,
żeby łatwo odróżnić to od tego, co mamy w tle, w całym w całej naszej aplikacji.
Szerokość damy na wartość 80, widzisz w określa jak szerokość, width naszego elementu.
W tym momencie dalej nadamy sobie border po prawej stronie o wartości 2.
To jest szerokość bordera, który
określiliśmy sobie po prawej stronie naszego wrappera.
Chcemy tylko border po prawej stronie, tak jak to jest właśnie tutaj na stronie ahoy.
Jest taki malutki, delikatny border.
Przejdźmy teraz do naszego dokumentu z powrotem.
Dodatkowo nadamy sobie kolor naszego bordera, border-neutral-700.
To też pochodzi tutaj z palety barw kolorów Tailwind CSS.
Zrobimy sobie tekst na biało, żeby był w całym naszym kontenerze.
No i font zróbmy sobie na Sans. O pracy z fontami też
powiem więcej mamy Sans, sans serif i mono, które mamy domyślnie wczytane w konfiguracji Tailwinda.
No i padding na osi Y wynoszący oś X i Y.
Możesz sobie od razu korzystać z czegoś takiego.
To nie znaczy ni mniej więcej zobacz padding top i padding bottom, czyli tutaj
w tym przypadku daliśmy tylko padding na top wartości 8, natomiast tutaj mamy za
jednym razem oś y, czyli top, bottom możemy sobie nadać paddingi 8.
To samo działa na osi X, czyli tutaj
w tym momencie paddingi nadane na lewej i na prawej stronie naszego elementu.
Wrócimy sobie do Y.
No i mamy już wrapper na naszą listę,
który wygląda, no prawie tak samo jak ten. Tutaj
nie zgadza nam się ten border dlatego, może sobie usuniemy go
na chwilę obecną. Zapiszemy sobie naszą stronę.
W tym momencie już mamy jakby padding na
naszą listę, która jest podobna do tego co mamy tutaj.
Teraz skupimy się na stworzeniu tego
pierwszego elementu, czyli tego wrappera całej grupy.
Nie będziemy dodawać funkcjonalności, które otwierają zamykają te grupy.
To już jest jakby
broszka JavaScriptu i frameworków poszczególnych, w których pracujemy.
Ja tutaj dzisiaj chciałem Ci tylko pokazać, skupić na elementach UI w tym
szybkim prowadzeniu, dlatego zbudujemy sobie teraz ten element ogólny kanału.