Tailwind CSS: Opinie - stylowanie tekstu i obrazów
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.
I teraz możemy zająć się tutaj stylowaniem tej części.
Opinie widzimy, że są bold.
Tutaj musimy Crimson Text, mamy jako
globalny font, natomiast musimy użyć tej wielkości 24.
Przejdźmy do tych opinii, class.
Font-bold i text.
To chyba będzie large-24, jeszcze większy, 2XL.
Zapiszemy sobie tą wartość i już
opinie nam się zmieniły.
I teraz przejdźmy sobie do naszego Alberta Einsteina, do napisu Albert Einstein.
Co my tu mamy?
Mamy też Crimson-Text, to jest semi-bold i 18.
Przejdźmy do h4, class font-semibold text,
i znajdźmy sobie wartość 18.
Mamy LG, tekst lg to jest dokładnie 18 pikseli.
Możesz sobie podejrzeć w IntelliSense.
Zapiszemy sobie i z tego co widać to jest uppercase,
czyli kolejny raz możemy sobie skorzystać
z pomocy frameworka Tailwind i mamy klasę uppercase, która odpowiada za
to, żeby nadać text-transform uppercase naszym elementom.
I to chyba na tyle.
Jeszcze kolor mamy 7171A.
Wróćmy do naszej palety zinc.
To jest zinc numer 500.
Możemy sobie zrobić tekst. Zapiszemy.
Wróćmy do naszego, do naszej strony.
No i już to wygląda bliżej tego, co mamy tutaj, w naszym designie.
Wróćmy sobie teraz jeszcze do tego tekstu, który mamy tutaj.
To jest też Font Crimson Text.
To jest bold i osiemnastka.
Przejdźmy do tego tekstu.
Class Font-Bold text,
poszukujemy sobie wartości 18 pixeli to jest large.
Zapiszemy sobie.
No i już mamy większe odzwierciedlenie tego co powinno być.
Jest problem jeden.
Nie mamy paddingów jeszcze, które musimy
nadać i nie mamy tego margina na bottom.
Tak, że zajmiemy się teraz tymi dwoma rzeczami.
Padding, jak zapewne wiesz z poprzednich sekcji,
wszystkie mają px=4, tak że możemy ten zabieg tutaj powtórzyć.
Nadajemy wszystkiemu padding na
px=4 i potrzebujemy margin bottom na ten nasz element.
Czyli tu mamy nasz element.
Możemy teraz nadać mu border-bottom,
wielkości 2
wiemy, że jest za dużo.
Możemy sobie tutaj skorzystać z naszej wartości.
Nadajmy jeden piksel.
Zapiszemy to sobie. Już pojawia nam się border, natomiast musimy go odsunąć od
całej reszty, tak jak to widzimy tutaj w designie.
Sprawdźmy sobie dokładnie, ile designer sobie zażyczył, żeby to odsunąć.
16 pikseli.
Wróćmy do naszego designu
i oceńmy to w takim razie na zróbmy na padding bottom na 4.
No i już odsunęliśmy sobie nasz, nasz border bottom.
Cała, cała część, cały element też powinien tutaj od góry być odsunięty.
Natomiast jako, że będziemy mieć ich kilka,
to możemy sobie skorzystać i nadać ten padding top na ten element.
Zobaczmy sobie ile dokładnie to powinno wynosić tutaj.
Kolejny raz skorzystam z metody tego
kwadracika, który sobie rysuję i mogę sobie sprawdzić dokładnie 24 piksele.
Oczywiście możesz skorzystać z innych narzędzi, które znasz.
Natomiast chciałem Ci też pokazać w tym kursie swój workflow.
W jaki sposób ja podchodzę do jakby odwzorowywania dizajnu, który
dostaję od designera, od osoby, która zbudowała ten widok.
Tak że sprawdziliśmy,
to było 24.
Możemy sobie wziąć teraz, jako że mamy, tutaj ten element nasz, padding bottom 4.
Możemy spróbować sobie zrobić padding top,
albo zróbmy margin top na 6. Zapiszemy. I już mamy to odsunięte tutaj od tych opinii.
Teraz ja skorzystam z magii kina i po prostu skopiuję te 3 elementy
i odzwierciedlę dokładnie tę sekcję, którą widzisz tutaj w tym momencie.
No i udało nam się odzwierciedlić tutaj te
elementy zgodnie z tym, co oczekuje od nas designer.
Natomiast jest jeden problem te teksty jeszcze tutaj są za długie.
Czyli zgodnie z tym musimy sobie przejść
i sprawdzić, ile dokładnie powinny mieć te bloki tekstowe.
Jak to widzimy, to jest 5/6-tych części całości.
Czyli możemy sobie przejść tutaj, wrócić do naszej implementacji, poszukać
elementy, które odpowiadają za te 3 bloki tekstowe.
To są te pierwsze divy, które mamy.
Pierwszy div wrappuje 2 teksty, potem jest
image, dlatego możemy złapać wszystkie te pierwsze divy.
Ja sobie pootwieram tutaj te elementy.
Multikursorem pozaznaczam sobie miejsca, w których chcę pisać.
I tutaj za pomocą class i mogę sobie zrobić width 5/6-tych, zapisać to sobie.
No i już widzisz, że teksty nam się ustawiły
tak jak powinny być ustawione według tego, co założył sobie tutaj nasz designer.
Odkomentujemy sobie teraz te wszystkie sekcje, może zminimalizuje to.
Otwórzmy sobie tutaj to wszystko tak jak powinno być.
Odkomentujemy sobie te pierwsze trzy sekcje, które już zaimplementowaliśmy.
No i przejdźmy do naszej strony.
Zobaczmy jak to wszystko razem wygląda.
Widzimy, że musimy opinie odsunąć od topu, czyli kolejny raz margin top,
możemy nadać sobie na naszą sekcję i to odsunie nam wszystko od tej reklamy.