Tailwind CSS: Sekcja partnerów na tabletach
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.
No to skupmy się teraz na tych dwóch sekcjach.
Zastanówmy się w jaki sposób można je zgrupować.
Tutaj widać ewidentnie, tak naprawdę,
możemy skorzystać z grida dwukolunowego, żeby później łatwo nam było rozdzielić te
elementy, a możemy też skorzystać sobie z flexa.
Zacznijmy najpierw od prostego flexa.
Zgrupujemy sobie te dwie sekcje w jeden wrapper, bo póki co to są dwie osobne sekcje
na naszym widoku mobilnym. Tak że możemy
sobie przejść do tych dwóch ostatnich sekcji.
I tutaj zbudujemy sobie jednego diva, który zwrappuje nam te dwie sekcje.
Zapiszę to sobie i teraz przejdźmy
do tego diva i będziemy nadawać tutaj klasy na widoku już na tablety, czyli md.
I co my tutaj potrzebujemy?
Na pewno potrzebujemy tak naprawdę nic, bo te elementy ustawiają się pod sobą.
Czyli musimy tylko i wyłącznie zadbać o
to, żeby odpowiednio zmienił się sposób wyświetlania tych elementów
w swoim wrapperze. Natomiast wrapper sobie zostawimy, bo przyda nam się tutaj ewidentnie na ten
widok, gdzie będziemy musieli sobie troszeczkę rozdzielić te elementy i
prawdopodobnie możemy skorzystać albo z grida albo z flexa.
Natomiast teraz skupmy się na wyświetlaniu tych pojedynczych elementów i przejdziemy
do tych popularnych ścieżek nauki na eduweb.
Otworzymy sobie tą sekcję i zobaczmy co tutaj się dzieje.
Mamy H3, które jest tytułem tej całej
sekcji i mamy tutaj później tego grida, który robi z tego dwie kolumny.
Czyli możemy sobie dla widoku md zrobić tutaj grida jedno kolumnowego.
Jeżeli sobie to teraz zapiszę, przejdę sobie do naszego designu.
No to już widzisz, że elementy zmieniły swój sposób wyświetlania.
Jeżeli przejdziemy na iPhona to znowu mamy dwie kolumny.
Po przejściu na iPad mini mamy tutaj jedną kolumnę i teraz musimy skupić się na
zmianie wyświetlania tego poszczególnego elementu.
Dlatego otwórzmy sobie tego naszego grida i mamy 7 naszych głównych ścieżek,
na których musimy teraz troszeczkę popracować.
1, 2, 3, 4, 5, 6, 7.
Tak, zgadza się. I teraz wszystkie są ustawione na flex column.
Dlatego też właśnie wyświetla to się nam
tak jak tak jak się wyświetla. Na widok mobilny
możemy sobie znowu skorzystać albo z grida albo z flexboxa.
No to złapmy teraz te wszystkie elementy
naszym multikursorem. Możnaa zrobić w taki sposób w jaki ja robię przytrzymując alt i
klikając na końcówki tych klas, żebyśmy mogli sobie łapać wszystkie nasze klasy
jednocześnie. I na md zmienimy sposób wyświetlania na flex row.
zapiszemy to sobie.
Już zmienił nam się sposób wyświetlania naszych elementów.
Teraz musimy jeszcze popracować dokładnie
nad tymi obrazkami, żeby one zajmowały tutaj odpowiednio dużo miejsca.
No i tutaj widzimy, że każde dwa elementy
one też nie są zgrupowane odpowiednio i są wyświetlane koło siebie.
Dlatego co teraz możemy zrobić to
otworzymy sobie nasz element i tutaj h3 i p po prostu nie są zgrupowane.
Dlatego też każdy H3 i p będziemy musieli sobie teraz owrappować w kolejnego diva.
Ja teraz skorzystam z magii kina i po
prostu dosyć szybko zrobię to tutaj multi kursorem, żeby owrappować sobie te,
w każdym z tych siedmiu sekcji te dwa elementy kolejnym divem.
I teraz każdy z tych elementów tutaj tytułów, ścieżek i opisów ma swój wrapper,
czyli możemy sobie odpowiednio je stylować.
Class, nadamy klasę md.
I zmienimy wyświetlanie na md. I zrobimy sobie flexa, Flex-col.
Już, jak widzisz, tytuły i opisy ścieżek są pod sobą, tak jak powinny być na tablety.
I teraz co musimy zmienić to na pewno, sprawdźmy sobie dokładnie ile wynosi
szerokość tych elementów i jak policzymy raz, 2, 3, 4, 5, 6, 7, 8
głównych kolumn i te elementy zajmują dokładnie trzy/czwarte.
Czyli teraz możemy sobie na md zrobić
width na trzy/czwarte, zapisać to sobie, i już w tym momencie te elementy
powinny zajmować odpowiednią część, natomiast oczywiście
tutaj ten element jest za duży. I tutaj musimy zmienić na naszych ekranach
medium wielkość tego elementu, żeby to była jedna/czwarta
i już to powinno nam ustawić te elementy tak, jak byśmy chcieli.
Natomiast tutaj widzimy, że line-clamp jest
ustawiony dokładnie na 5 linii i z tego co widać w designie to te linie powinny się
tutaj załamywać po trzecim rzędzie w każdym z opisów.
Dlatego musimy sobie przejść tutaj
i zmienić na md line-clamp dla tych wszystkich P, które mamy tutaj owrappowane.
Dlatego teraz poszukamy sobie dokładnie wszystkich instancji tej klasy.
To będzie 7 sztuk 2, 3, 4, 5, 6, 7. 7 sztuk. I w tym momencie musimy sobie na md,
line-clamp zrobić na, Tu mamy 3 linie. To zapiszemy sobie.
No i już opisy załamują się dokładnie na linii numer 3.
W każdym z tych opisów jeszcze
Potrzebujemy tutaj oczywiście wprowadzić jakieś przerwy pomiędzy tym elementem.
Sprawdźmy sobie dokładnie ile ta przerwa powinna wynosić.
Tutaj mamy przerwę wynoszącą dokładnie około 35 pikseli.
30.
32 pikseli, tak, 32 pikseli.
Czyli teraz wróćmy do naszych elementów.
I to są te elementy, które wrappują wszystkie nasze teksty.
Czyli znowu musimy sobie złapać siedem takich samych sztuk.
Jeżeli sobie zrobisz, zaznaczysz na MD i siedem razy klikniesz Control D,
to mamy dokładnie naszych siedem elementów, które musimy teraz ostylować.
Ja teraz za pomocą multikursora, strzałką
w prawo, md, piszę to w każdym z tych siedmiu elementów.
I tutaj możemy sobie zrobić margin left na cztery na początku.
Zapiszemy.
Przejdźmy do naszej strony i już odsunęliśmy te elementy odpowiednio.
Właśnie od tych tutaj rodziców po lewej stronie.
Sprawdźmy sobie jeszcze tylko wielkość czy
wysokość tych wrapperów, tutaj jest odpowiednia.
Ja sobie sprawdzę ile to wynosi tutaj na
tej stronie na chwilę obecną. I wielkość tego to jest dokładnie 132 piksele.
Natomiast sprawdźmy sobie w naszym
designie, ile tutaj była wielkość tego kwadracika.
To jest 108 pikseli.
Tak że też znowu możemy sobie stargetować te wszystkie wrappery i ustawić na 108.
I jeszcze warto wspomnieć, że to tutaj jest wyśrodkowane w pionie.
Tak że wróćmy do naszego designu i to,
zbudujemy teraz sobie te 5 elementów
ustawimy sobie na 108 pikseli, czyli to są te elementy, które mamy tutaj, te wrappery.
Złapmy sobie teraz te 7 sztuk, czyli to jest te md jedna/czwarta.
Mamy 7 sztuk złapanych i teraz nadamy im
konkretną wysokość na ekranach md, czyli MB height,
i tutaj potrzebujemy 107 pikseli.
Poszukamy sobie, czy mamy jakąś wartość, która daje 112, to jest najbliżej.
Dlatego teraz możemy
kolejny raz po prostu skorzystać z wartości
domyślnej podawanej przez nas, arbitary value tak zwanej, że możemy sobie wpisać naszą
wartość pikseli, jaka powinna mieć wielkość tego elementu.
No i już widzisz, zmienił nam się tutaj
design w taki sposób, w jaki byśmy chcieli.