Tailwind CSS: BONUS - Header na ekrany desktopowe
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 teraz do zaimplementowania tego
headera na ekrany większe niż tablety, czyli na ekrany desktopowy.
I podejść do takiego typu problemu jest
kilka, bo jak widzisz mamy tutaj header generalnie, który jest zupełnie inaczej
wyświetlany na tablecie i na urządzeniach mobilnych.
Ale mamy też header, który jest
jakby zupełnie innego rodzaju header'em na urządzeniach desktopowych.
Generalnie rzecz biorąc można to zaimplementować tak,
jeżeli korzystali byśmy tutaj z jakiegoś frameworka frontendowego, można byłoby to
zaimplementować tak, żeby to był jeden komponent.
Natomiast tutaj w naszym podejściu ja
proponuję, żebyśmy sobie zmienili tutaj nazwę na div.
To będzie nasz header na urządzenia mobilne.
Czyli możemy sobie tutaj wrzucić komentarz mobile header.
I to wszystko sobie owrappujemy w tak semantyczny header.
I ten mobilny header sobie tutaj zamkniemy i poniżej zbudujemy sobie logikę dla
naszego normalnego headera na urządzenia mobilne.
Czyli możemy Kolejny komentarz desktop header.
Zapiszemy sobie to.
I teraz możemy tutaj zacząć budować logikę dla naszego desktopowego header'a.
Pierwsze co co musimy zrobić to na pewno
ukryć ten header jeżeli go nie potrzebujemy czyli xl: hidden.
I już nie powinien się nam wyświetlać na naszej stronie.
Jeżeli sobie przejdziemy na nasz 1400 pikseli.
I już nie mamy żadnego headera na topie, także możemy zacząć pracę nad tym
dodatkowym elementem naszym, który mamy tutaj.
Przejdźmy teraz do designu.
Zobaczmy jak to wygląda,
jak możemy moglibyśmy sobie to tutaj zaimplementować.
Na pierwszy rzut oka mamy na pewno dwa rzędy, czyli to jest jeden rząd
i to jest nasz drugi rząd i w taki sposób sobie to spróbujemy zaimplementować.
Czyli mamy środku mamy jeden div, mamy drugi div.
I
główny kontener niech będzie miał klasę
flex. Flex-col.
To pozwoli nam ustawić te 2 divy pod sobą.
I tutaj w pierwszym divie potrzebujemy trzy elementy.
Mamy te dwie ikonki, mamy napis i mamy button.
Czyli ikonki możemy sobie skopiować tutaj z tej implementacji.
Czyli tak naprawdę ikonkę numer 1 potrzebujemy.
Potrzebujemy ikonkę numer 2.
I potrzebujemy nasz napis.
Czyli też możemy de facto skopiować sobie tutaj.
Na końcu jeszcze będzie button tak? Subscribe. Zapiszemy sobie.
Przejdźmy do naszego elementu.
Już coś się pojawiło, natomiast jeszcze
nie jest to wystylowane tak, jakbyśmy tego chcieli.
Dlatego przejdźmy teraz do naszych styli i spróbujmy sobie zaimplementować
odpowiednie style na ten wrapper na te cztery elementy.
Na pewno potrzebujemy klasy,
już jak się zapewne domyślasz flex.
To pozwoli nam ustawić te elementy wszystkie w rządku.
Na końcu jest nasz button.
Dodatkowa rzecz, która będzie tutaj potrzebna to na pewno
na element z tą h1 potrzebowalibyśmy, żeby ta h1 jednak rosła.
Czyli tutaj zrobimy sobie grow.
Już przesunął nam się guzik na środek, możemy sobie zrobić text center.
Wyśrodkujemy sobie nasz tekst.
Już wygląda to dużo lepiej.
Natomiast jest jeden problem, bo nie wrappujemy naszego headera w żaden sposób.
Dlatego teraz możemy sobie tutaj spokojnie wziąć, owrappować to wszystko,
albo na naszą główną klasę
możemy sobie dać container i mx: auto.
Już przesunęliśmy to wszystko do przodu
jest wyrównane z całą treścią naszej strony.
Przejdźmy teraz do implementacji jeszcze odpowiednich tutaj marginesów.
Sprawdźmy sobie jaka to jest wielkość u nas.
Dodatkowo mamy narzucone marginesy
po prawej i po lewej stronie, które są wielkości PX=4
Czyli możemy też zrobić px 4.
Elementy teraz już zostały w stu
procentach wyrównane do tego, co mamy po boku.
No i najpierw powiększmy ten napis, czyli to jest h1 nasza.
H1 zróbmy sobie text-7xl.
Wygląda to już dużo lepiej.
Na pewno będziemy potrzebowali na nasz
wrapper tutaj na ten flex, który wrappuje nam te wszystkie elementy items-center,
żeby wyrównać sobie w pionie wszystkie itemy.
Mamy już wszystko wyrównane w pionie.
Dodatkowa rzecz, tutaj mamy dwie ikonki, które też przydałoby
się owrappować w jeden element albo po prostu nadamy tutaj jednej ikonce klasę np.
margin right.
Ustawiamy to na cztery, żeby przesunąć je od siebie. Mamy przesuniętą.
Może to trochę za dużo?
Zostawmy dwójkę, jest ok.
Subscribe musimy sobie ostylować ten button.
Czyli przejdźmy do klas.
Tak, px zrobimy na 3, py na 6.
Paddingi na ten button. Dodatkowo bg color zrobimy sobie zinc najciemniejszy.
Dobrze. Tekst zrobimy sobie na zinc ten 200.
Na pewno uppercase potrzebujemy.
Dodatkowo co my tu mamy?
Weźmy, powiększymy sobie troszkę ten element.
Może troszkę za dużo.
Potrzebujemy zaokrąglić ten button, czyli
rounded i największa wartość jaka jest to jest 3xl.
Myślę, że py mamy za duże nadane.
Zmniejszymy sobie py, px można wtedy zwiększyć.
Zróbmy sobie px4, py2. Jak to będzie wyglądało?
Już wygląda dużo lepiej.
Teraz jeszcze wielkość tego napisu.
Dokładnie ile powinna mieć?
U nas ta czcionka ma 72 piksele.
Sprawdźmy sobie jak to było w naszym designie.
Tutaj mamy 64, czyli troszkę jednak za duża to ta wartość na H1.
Czyli zróbmy sobie 5xl.
Troszkę się powinno zmniejszyć.
Zobaczmy sobie ile teraz mamy.
48.
No nie, troszkę więcej jednak, 6xl.
60 pikseli.
Myślę, że możemy sobie to zostawić, jeżeli nie mamy,
jeżeli chcemy być pixel perfect, to naprawdę możemy tutaj zrobić sobie
64 piksele i troszkę się jednak ten tekst nam zwiększy.
W tym momencie mamy już 64 piksele.
Wielkość tego tekstu, tak jak to jest w designie 64 piksele.
W designie mamy to samo 64 piksele.
Kolejny element, ten napis tutaj, który musielibyśmy troszeczkę poprawić, bo
jednak nie wygląda to tak jak na naszym designie tutaj.
Jeżeli przejdziemy na ten napis,
to tutaj jest czcionka, jest bold i wielkość jest 20.
Przejdźmy do naszej czcionki tutaj.
Sprawdźmy sobie wartości, które są nadane dla tego napisu.
Mamy font 16.
I tutaj nie mamy bolda żadnego.
Czyli przejdźmy na button i tutaj tak, font bold.
Już nam się napis zwiększył i tekst lg 18.
Potrzebujemy xl tak naprawdę.
Mamy guzik subscribe i jeszcze potrzebujemy tracking,
na wider, odsunąć od siebie te litery.
Myślę, że ten tekst XL jednak jest troszkę za duży.
Ustawimy Large.
Mamy już guzik Subscribe, mamy The Eduweb Times.
Teraz przejdźmy do tego drugiego elementu, który jest pod spodem.
Będziemy potrzebowali tutaj linki do naszej strony.
Mamy tutaj tych linków kilka.
Ja sobie teraz korzystam z magii kina i pokopiuję te elementy.
Już mam wszystkie linki wstawione w tego diva.
Teraz możemy sobie przejść już do naszego,
do naszej strony internetowej, mamy linki koło siebie.
Potrzebujemy je odpowiednio poukładać.
Ja sobie jeszcze tutaj formatuje troszeczkę ten kod.
I pierwsza rzecz to tutaj class.
Potrzebujemy flex albo tak naprawdę możemy zrezygnować z tego diva.
Mamy URL, które nam i tak wrappuje te
wszystkie elementy, czyli nie potrzebujemy, niepotrzebny
kod możemy usunąć, zapiszemy sobie. Już linki, powinny ustawić się koło siebie.
Width sobie zrobimy na full.
Zrobimy sobie Items Center, justify-center.
Mamy wszystko na środku i jeszcze
odsuniemy od siebie, czyli utility classes gap i zróbmy sobie 16 pikseli.
Mamy wszystkie elementy od siebie odsunięte.
Teraz potrzebujemy zrobić tutaj font
semibold i sprawdźmy sobie jak to jest w naszym designie dokładnie.
Mamy bold 20, to przejdźmy tutaj bold
i wielkość 20.
To musimy sobie tutaj zrobić text,
I myślnik to będzie,
xl. Już nam się linki powiększyły.
Kolejna rzecz, którą potrzebujemy to ten border na górze i na dole.
Natomiast ciekawa rzecz,
on ma przechodzić przez cały ten element, czyli chcemy mieć ten border aż do końca.
To oznacza, że nasze owrappowanie w ten
kontener nie było zbyt, zbyt szczęśliwym rozwiązaniem.
Ale zaraz sobie z tym wszystkim poradzimy.
Wróćmy teraz do naszego,
do naszego bordera z góry i z dołu. Czyli tu potrzebujemy tak: border,
border na x2 zrobimy. Border xy2.
Border zinc-900.
Mamy już border zrobiony.
Natomiast jest problem, że jesteśmy
uwrappowani, ograniczeni tym wrapperem, który nas tutaj okala.
Czyli co możemy zrobić?
Możemy sobie wziąć ten container mx auto px4, usunąć to z tego elementu,
otworzyć sobie nasze elementy, owrappować ten element w kolejnego diva.
No i wkleić sobie klasę.
Już mamy nasz element, który jest niżej.
Nie jest w żaden sposób ograniczony, a to
co masz tutaj u góry jest ograniczone poprzez właśnie tę klasę container.
I to tyle.
Tak naprawdę udało nam się zaimplementować też widok desktopowy.
Z tego co widać.
Przejdźmy na właśnie na ten szeroki widok desktopowy.
Tutaj nie wiem czy fortunnym rozwiązaniem
przez designera było zrobienie tego, aż do końca.
Tak samo mamy problemy z naszym footerem.
Także myślę, że de facto warto byłoby tutaj ograniczyć
całą tą aplikację, albo chociaż elementy, które są w środku klasami container.
Przejdźmy teraz do tego i zaimplementujemy tę zmianę.
Na pewno potrzebujemy tę zmianę w
naszym footerze, czyli możemy sobie na cały,
jakby całą część w środku naszego footera spróbować narzucić. No i już
jakby mieliśmy, nasz footer jest ograniczony. Tak samo,
jest to kwestia, jakby umówienia się czy ten design tutaj
odpowiada, czy chcemy też obciąć tak naprawdę całkowicie ten kolor background'owy,
wtedy całkowicie moglibyśmy sobie
owrappować nasz footer też w tym divided, który chcemy.
Natomiast tutaj te samo pytanie czy, czy chcemy mieć tą linię aż do samego końca,
czy chcemy owrappować tą naszą aplikację w Container.
To jest tak naprawdę kwestia do uzgodnienia z designerem.
I to tyle.
Teraz krótkie podsumowanie.
Jak widzisz framework Tailwind jest bardzo wygodnym do korzystania frameworkiem.
Generalnie nie napisaliśmy praktycznie żadnej linijki kodu customowego, poza tymi
customowymi rzeczami związanymi z naszym gridem, gdzie
chcieliśmy dokładnie sobie kontrolować wielkości czy to rzędów czy kolumn, to tak
naprawdę przez cały czas trwania tego kursu korzystaliśmy sobie tylko i
wyłącznie z utility classes Tailwinda.
Tailwind to jest potężne narzędzie.
Tak naprawdę zachęcam Cię serdecznie do tego, abyś samemu/sama eksplorowała
to narzędzie i dalej budowała projekty na bazie właśnie tego frameworka.
Ja tak naprawdę uwielbiam z niego korzystać w swoich projektach i Ciebie
również zachęcam do tego, żeby go poznać bardziej.
Jeszcze krótkie podsumowanie i dzięki wielkie!