Tailwind CSS: Header content i klasa container
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.
Przejdźmy sobie teraz do odwzorowania tej pierwszej sekcji tutaj u góry, naszego widoku
mobilnego, gdzie mamy obrazek, mamy jakiś nagłówek i mamy treść.
Taką wstępną treść newsa. I dodatkowo jeszcze jest link Continue reading.
Czyli zaczniemy sobie, ja header sobie tutaj zminimalizowałem w międzyczasie, żeby nam nie przeszkadzał.
I tutaj stworzymy sobie nową sekcję,
w której na pewno będzie potrzebny jakiś obrazek.
Na razie zostawimy to puste.
Dodatkowo potrzebujemy jakąś h2,
czyli możemy sobie skopiować tą treść tutaj i jakiś p, który też sobie skopiujemy.
Zobaczmy teraz jak to wszystko wygląda u nas na stronie?
No pojawiły się jakieś rzeczy.
Obrazka jeszcze nie widzimy, nie mamy żadnego src.
Natomiast jedna rzecz, która mi zwraca uwagę, to w tym
układzie mieliśmy przez chwilę, mieliśmy tutaj
ten element jest italiciem.
Jeżeli spojrzysz sobie na design naszej
strony, to tutaj jest ewidentnie italic zaznaczony.
Dlatego sobie owrappujemy ten element w semantyczny tag em.
Czyli wrap i damy sobie em. Zapiszemy.
Wróćmy do naszej strony.
I w tym momencie powinniśmy mieć italic narzucony. Tak.
Tutaj ten kawałek jak widzisz jest zrobiony italic'iem. Nawet jak sprawdzimy tutaj.
No to powinniśmy mieć też em.
Dodatkowo, jeżeli, np. ie chcesz korzystać z tego znacznika.
Jeżeli miałbyś sytuację, że chciałbyś
ostylować jako italic jakiś inny element na stronie internetowej, to dodatkowo masz
dostępną klasę italic, która też jakby narzuca z góry font style italic.
Czyli nie musimy tutaj korzystać z
semantycznego znacznika em, żeby narzucić italic.
Natomiast możemy też zrobić to w taki sposób.
Czyli mógłbym tutaj mieć normalnego span'a i też italic by zadziałał.
Zajmijmy się teraz tym obrazkiem, który
mamy u góry w tej pierwszej sekcji, czyli to tutaj. Wszystkie obrazki będziesz miał
dołączone do materiałów dodatkowych do tego kursu.
Zapisałem wszystko w osobnym folderze images.
Ja teraz skorzystam z magii kina i po
prostu przeniosę sobie ten obrazek tutaj do folderu, do naszego projektu zrobię
sobie folder images, z którego będziemy sobie importować wszystkie te obrazki.
Na razie jak widzisz nie mamy tutaj nic,
tak że już możemy sobie stworzyć folder images.
I do tego folderu wrzucę sobie obrazek, który odpowiada tutaj właśnie za to tło.
No i ja już mam w swoim folderze obrazek main-news png.
To jest ten sam obrazek, który mamy tutaj.
Zamkniemy sobie teraz go i tutaj już
możemy sobie użyć adresu bezwzględnego do images i do main-news png.
Zapiszemy to sobie.
Przejdźmy na naszą stronę i już pojawił nam się obrazek, o który nam chodziło.
Natomiast jak widzisz
nie mamy tutaj fajnych padding'ów, tak jak to jest w designie.
Mamy 414 pikseli, no ale te odległości nie są takie, jakie powinny być.
Zmierzymy to sobie tutaj
po tej stronie. Tu jest odległość 32 piksele podwójne, bo mamy tu razy 200% ustawione.
Dlatego wszystkie odległości musimy
dzielić przez 2 jeżeli będziemy to ustawiać.
Natomiast zobaczmy orginalny design.
Tutaj mamy dokładnie 16 pikseli.
Przejdźmy sobie tutaj i potrzebujemy
paddingi na lewą i na prawą stronę na 16 pikseli.
Natomiast pokażę Ci jedną technikę.
Możemy sobie tutaj w tej sekcji
zrobić klasę albo jeżeli zobaczymy, że cały design
generalnie ma ten sam padding, jak widać, że tutaj aż do
tak naprawdę do footera, który będzie na
samym dole, mamy te same odległości od ścianki bocznej.
Możemy sobie całą naszą aplikację, oprócz
oczywiście headera, bo header nie ma tutaj tego padding'a.
Tło musi wychodzić dalej.
Także owrappujemy sobie całą naszą sekcję
w dodatkowego diva, czyli pozbawimy tę sekcję tej klasy.
Owrappujemy sobie tą sekcję Diva i tu dodamy klasę container. Zapiszemy
i już mamy cały, całą sekcję owrappowaną w klasę container. W diva o klasie container.
Otóż to jest klasa też dostarczana nam przez Tailwind i to pozwala domyślnie ustawić
nam wrapper naszej aplikacji, który będzie domyślnie reagował na
breakpointy, na responsywny design i domyślnie ma ustawiony max width
na właśnie szerokość aplikacji okna przeglądarki w danym momencie.
Czyli teraz jak sobie weźmiemy te okno
przeglądarki i będziemy sobie je powiększać.
To nasz wrapper
on dojdzie do pewnego momentu, potem już się nie będzie powiększał.
Wróćmy na te nasze 414 pikseli, to był iPhone XR.
Dodatkowo potrzebujemy mx auto dlatego, żeby bardziej po lewej
stronie i po prawej stronie był ustawiony na auto.
Żeby wyśrodkować nasz nasz wrapper.
Tak że teraz jeżeli sobie wyłączymy te
style to widzisz, że treść jest wyśrodkowana zgodnie z MX Auto.
Natomiast my wróćmy do inspekcji
do 414, potrzebujemy padding po dwóch stronach. Widzisz ten wrapper.
On teraz przyjmuje po prostu szerokość całej aplikacji ze względu na to, że w tym
momencie jesteśmy w ekranie small, czyli mamy width 100%.
Czyli potrzebujemy extra nadać tutaj
padding 16 pikseli z dwóch stron, żeby odzwierciedlić dokładnie to, co mamy
w designie tym, który dostaliśmy od naszego designera.
Tu sobie możemy wrzucić albo na sekcję, albo na ten cały wrapper.
Możemy sobie wrzucić px16.
Natomiast ja sobie to zrobię tutaj px. No i już mamy to wyśrodkowane.
Mamy 16 pikseli po obydwu stronach, tak że
jesteśmy już o krok bliżej tego, co mamy tutaj dane przez naszego designera.
Zobaczmy sobie jak duża odległość jest
między tym obrazkiem, a headerem. Ja sobie tu narysuję kwadrat, który
sprawdzi mi tę odległość.
Mamy 32 piksele.
Wróćmy do naszej aplikacji teraz.
No i odsuńmy ten obrazek od tej góry, czyli całą sekcję
możemy sobie zrobić margin top i
poszukajmy wartości, która nam będzie odpowiadać.
32 piksele to jest dokładnie mt-8.
Zapisujemy. Odsunęliśmy sobie obrazek.
Już to wygląda lepiej, podobnie jak w naszym designie.
Teraz przejdźmy do tych napisów.