Tailwind CSS: Sekcja ścieżek i zawartość elementu
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.
Znaleźliśmy się w miejscu, gdzie mamy już
kilka rzeczy zaimplementowanych i zostały nam tak naprawdę tylko dwie
sekcje i stopka do tego, żeby zakończyć widok mobilny.
Tak że zajmijmy się teraz sekcją z
popularnymi ścieżkami nauki na eduweb.
Tutaj jak widzisz generalnie wystarczy nam zaimplementować jeden element,
bo cała reszta tak naprawdę różni się tylko tym, że jest zaimplementowany inny
kolor tego obrazka. Co też pewnie ogramy sobie za pomocą
może filtrów, czy jakiegoś fillu za pomocą class utility,
classes Tailwinda.
Tu pewnie wykorzystamy sobie pierwszy raz Grida.
Być może będzie on bardzo pomocny.
Zobaczymy.
Tak że zacznijmy od sekcji.
W sekcji zrobimy pojedynczy element najpierw, czyli div.
I tutaj w tym elemencie mamy obrazek.
Robimy programming.
I skopiujemy ten tekst tutaj.
Widzimy, że kolejny raz jest to dłuższy tekst, niż chcielibyśmy my, jako
front-end deweloperzy, ale poradzimy sobie tutaj za pomocą naszego clamp-line,
który sobie zainstalowaliśmy w jednym z odcinków poprzednich.
Jeden z pluginów, będzie tutaj bardzo przydatny.
I dobrze. I przejdźmy do implementacji.
Czyli potrzebujemy na pewno taki wrapper na ten element.
Czyli niech to będzie flex, flex-column.
Chcemy sobie ustawić to wszystko pod spodem.
Zapiszemy.
Wróćmy do naszej implementacji i
zakomentujemy sobie te wszystkie poprzednie sekcje, żeby widać cokolwiek.
No i mamy naszą pierwszą sekcję. Potrzebujemy tego obrazka.
Natomiast, jeszcze co tutaj widzę to to, że obrazek może być tylko środkową częścią
tego, a cała reszta może być wrapperem z jakimś tłem.
Zależy od tego, jak zostaną przygotowane te obrazki przez naszych designerów.
Natomiast załóżmy, że dostaniemy tylko jeden taki obrazek
takiego loga eduweb. I będziemy musieli odpowiednio to
ostylować do poszczególnych ścieżek, które tutaj mamy dostępne.
Tak że to co dostaniemy od designera
to będzie tylko ten kawałek tutaj, a całą resztę musimy zbudować.
Czyli możemy przyjąć, że ten tutaj element
to będzie jakiś wrapper i w środku dopiero będziemy mieli nasz image.
Tak żeby było nam łatwiej to ostylować tak jak chcemy.
Czyli załóżmy właśnie tak. Zróbmy sobie tutaj div, i do tego diva
dopiero wpakujemy nasz image. I zróbmy sobie już normalne tło na ten element.
Zobaczmy sobie jakie tu jest tło to jest d4d4d8.
Wróćmy do naszych kolorów zinc, i zobaczmy sobie który to jest.
To jest zinc-300.
Zapiszemy to sobie.
Możemy od razu sprawdzić wymiary takiego jednego obrazka i tutaj jest 186 na 132.
Tak że załóżmy, że height, i poszukamy sobie 186 pikseli.
Mamy 176, mamy 192, czyli prawdopodobnie będziemy musieli użyć z arbitrary value.
Wpiszmy sobie 186 pikseli po prostu i szerokość na 132.
Niech to będzie na razie wielkość zafiksowana.
Zobaczymy co z tego wyjdzie.
Wróćmy do naszej implementacji i zobaczmy jak to wszystko teraz wygląda.
Mamy ten obrazek tutaj,
niby po jednej stronie i to jest tak jak on powinien tak naprawdę wyglądać.
Natomiast nie wiem czy wysokość jest odpowiednia.
Sprawdźmy sobie jeszcze raz tą wysokość.
I tu jest height 132, width jest 186, czyli pomyliliśmy się.
Oczywiście height 132, width 186.
Już to wygląda tak jak powinno wyglądać.
Potrzebujemy jeszcze zaokrąglić te rogi, mają tutaj border radius na 8 pikseli.
Zobaczmy rounded i poszukajmy gdzie tu jest 8 pikseli.
Mamy rounded-lg 8 pikseli.
Jak sobie to zapiszemy to już nasz wrapper
powinien być zaokrąglony i tu w środku sobie ustalimy nas obrazek.
I pouczymy się troszeczkę absolutnego pozycjonowania.
Natomiast możemy to też ograć tutaj za pomocą Flexa, Flex-Items-Center.
Justify też center.
W tym momencie, niezależnie jaki obrazek wrzucimy, on będzie po prostu wyśrodkowany
w tym divie. Wklejmy nasz obrazek naszego loga eduweb.
Obrazek loga znajdziesz w materiałach dodatkowych tego odcinka.
Ja teraz po prostu skorzystam z magii kina i wrzucę go sobie tutaj do folderu.
W moim pliku już pojawiły się nowe pliki z
poszczególnymi elementami, które będziemy potrzebować w tej sekcji.
Dlatego ja sobie to wszystko pozamykam. I możemy sobie już skorzystać z pierwszego
pliku tutaj images, i to będzie eduweb logo dla sekcji programming.
Zapiszemy sobie to.
I już mamy odzwierciedlony pierwszy element tak jak byśmy chcieli.