Tailwind CSS: Footer - część górna
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.
Ostatni element, który nam tutaj został do
zaimplementowania to nasza stopka i tym się teraz tutaj zajmiemy,
w tym, w tej ostatniej części implementowania tego mobilnego designu.
Tak że zacznijmy od stworzenia footera.
No i co my tu mamy?
Najpierw sprawdźmy sobie tło, które musimy
sobie aplikować 272727A i to będzie dokładnie kolor zinc-800.
Zacznijmy od tego.
Bg-zinc-800.
Mamy już tło zaimplementowane.
Przejdźmy teraz tutaj niżej do tego designu.
Jak możemy sobie podzielić tutaj ten element?
Ja zawsze lubię, zanim zacznę implementować jakiś element na stronie tytułowej,
przemyśleć w jaki sposób najlepiej można go ułożyć.
Tutaj oczywiście na razie nie patrzymy na design, na tablety i na komputery.
Zaraz sobie przejdziemy do responsywnego designu i
implementowania tego w Tailwindzie.
Załóżmy, że nie mamy informacji na razie o
tym i nie musimy brać pod uwagę tego, jak to wygląda na tablecie, jak to wygląda na
dużych komputerach, na desktopowych komputerach.
Dlatego skupimy się tylko i wyłącznie,
żeby sobie uprościć zadanie na chwilę obecną. Skupimy się tylko i wyłącznie na
tym jak zaimplementować ten element sobie w tym momencie.
Tak że co tutaj widać, to na pewno mamy trzy elementy.
To jest element numer 1.
Tutaj mamy element numer dwa, i tutaj jest element numer trzy.
To są jakby trzy główne bloki, które możemy sobie zacząć implementować.
Czyli zaczniemy tutaj od stworzenia trzech divów.
Mamy trzy elementy, do których możemy teraz spakować wszystko, co tutaj mamy.
Pierwszy element,
przeanalizujmy go sobie teraz przez chwilkę,
tutaj mamy dwa główne rzędy.
To jest rząd numer 1 i nr 2.
Dlatego w pierwszym elemencie możemy tutaj też spakować dwa divy.
To będą nasze wrappery i w pierwszym elemencie tutaj 3 znaczniki A.
W pierwszym znaczniku potrzebujemy statute.
Privacy Policy w drugim.
I paths w trzecim.
Zapiszemy sobie to teraz, mamy te trzy elementy,
oczywiście ich nie widać.
Musimy zmienić kolor fontu, który jest w naszej stopce.
Przejdźmy do designu.
Sprawdźmy dokładnie jakiego koloru są te napisy.
Tutaj mamy kolor A1A1A1
to jest na pewno z palety zinc.
I to jest numer 400.
Dlatego możemy sobie tutaj swobodnie dać
klasę na ten element, text=zinc i poszukamy 400.
Zapiszemy to sobie i już przeskakując teraz na naszą stronę
powinniśmy zobaczyć te elementy.
Co możemy sobie teraz zrobić?
To na całego tego diva, który tutaj będzie oplatał nam 2 elementy,
nadać sobie klasę flex.
Tak możemy sobie zrobić flex-column.
To będą dwa nasze elementy.
Czyli zacznijmy, class=flex flex=col,
zapiszemy sobie i pod spodem będą te ikonki do social mediów.
Natomiast najpierw zadbajmy o to, żeby to
tutaj wszystko było tak ładnie rozdzielone od siebie i patrząc na
marginesy pomiędzy tymi elementami to jest około 40 pikseli na chwilę obecną. Tak że
możemy sobie spokojnie tutaj też nadać flex.
I gap ustalimy sobie na 10.
To będzie około 40 pikseli.
Zapiszemy sobie. Jeszcze justify-center,
i items-center, żeby wyśrodkować sobie te elementy w naszym flexie.
Teraz jak przejdziemy na naszą stronę to
już mamy ładnie wyśrodkowane te wszystkie 3 napisy.
Czego teraz nam brakuje to tych trzech elementów social mediów.
Te ikonki znajdziesz w materiałach dodatkowych do tego kursu.
Tylko teraz proszę sobie przenieś je z
materiałów dodatkowych z folderu tam do Twojego folderu, gdzie
trzymasz obrazki w tym pliku.
Ja teraz skorzystam z magii kina, po prostu przeniosę sobie te wszystkie obrazki tutaj
do mojego katalogu images. I już po chwileczce Mam Facebook, Instagram i YouTube.
Wszystkie te 3 loga tutaj w moim katalogu, powinieneś mieć to samo
jeżeli sobie przeniesiesz pliki z plików źródłowych do kursu.
Ja sobie teraz zamknę ten element i
poniżej w tym drugim divie będziemy potrzebowali trzy obrazki.
W każdym obrazku sobie wrzucimy nasze logo, i tutaj jako pierwszy będzie Facebook.
Poszukamy sobie Facebook jako alt.
Możemy też dodać napis Facebook logo i skopiujemy te dwie linie.
Tutaj sobie zamienimy na Instagram.
Tutaj Instagram.
I tutaj będzie Youtube.
Oczywiście w drugim przypadku bez png.
Zapiszemy to sobie.
Przejdźmy do naszej strony.
Odświeżając naszą stronę
już mamy te trzy elementy pod sobą, czyli
zacznijmy je teraz układać tak jak byśmy chcieli.
Klasa to będzie flex.
Items-center, justify
też zrobimy center, zrobimy gap pomiędzy tymi ikonkami. Na
razie sobie zapiszemy tak jak jest, żeby były koło siebie.
Teraz sprawdźmy tutaj.
Na pewno będziemy musieli nadać wielkości tym ikonką.
Sprawdźmy ile wynoszą te, 24,24,24.
Jak widzisz width i heigh jest na 24 piksele, każda z tych ikon.
Dlatego możemy sobie
spokojnie tutaj przejść, skorzystać z multikursora.
class, i width na 6, bo to są 24 piksele i height też ustalimy sobie na 6.
Zapiszemy sobie to.
Wróćmy do naszego pliku.
No i już te ikonki wyglądają dużo lepiej.
I teraz co musimy zrobić to musimy je odsunąć od siebie.
Otóż odległość wynosi około 26, czyli my
na chwilę obecną możemy tutaj spokojnie użyć myślę 24 piksele.
Przejdźmy do tego elementu.
Albo zamiast ustawiać marginy na nie, to po prostu nadamy sobie tutaj gap.
Na 6.
Już mamy je odsunięte.
Teraz musimy zadbać o odpowiednie odległości w pionie.
Zobaczmy sobie jak to wygląda na naszym designie.
Zmierzmy dokładnie ile to wynosi tutaj od topu.
Jest około 26, 24 pikseli, czyli możemy sobie spokojnie tutaj na ten pierwszy
element margin top nadać na 6, to są 24 piksele.
I sprawdźmy sobie jak to wygląda.
Tutaj, 16 pikseli, czyli tutaj ten element, który trzyma nam
te wszystkie loga możemy margin top na 16, nie 16, oczywiście 4. Zapiszemy.
Wróćmy do naszego designu i już mamy to
ułożone dużo lepiej, tak jak to powinno być w tym designie.
Kolejną rzeczą, którą mamy tutaj jest ten
border, który jest ustawiony na kolor A1A1A1.
Czyli możemy sobie na cały ten wrapper tych dwóch elementów tutaj, które mamy.
Możemy sobie je owrappować w kolejnego diva.
Sposobów na stworzenie czegoś takiego jest dużo.
Ja bardzo często korzystam po prostu z bordera na bottom.
Ty możesz sobie skorzystać tutaj z kolejnego diva, któremu nadasz wysokość 1
piksel i tło o tej wartości, której tu mamy.
Natomiast ja normalnie tutaj wrappuje sobie w kolejnego diva.
I tutaj mając ten element dodatkowy już
robię sobie klasę, border bottom ustawiony na jeden piksel na razie.
Border bottom i kolor zinc.
Jaki tu mamy kolor?
Spróbujmy na razie ten 500.
Zaraz sobie sprawdzimy dokładnie jaki to jest kolor?
Zapiszemy sobie to.
Przejdźmy do designu.
Chyba troszeczkę za jasny jest ten border.
Sprawdźmy sobie dokładnie jaka to jest farba A1A1A1.
Przejdźmy sobie do zinc to jest 400 jednak, nie 500.
Wróćmy tutaj.
Przyjmijmy to na 400.
Teraz, przechodząc tutaj, no już ten border wygląda dużo lepiej.
Teraz sprawdźmy sobie
jakiej odległości jest dokładnie tutaj od ostatniego elementu.
I to wygląda mi na tą samą odległość, którą mamy tutaj.
Natomiast jeszcze się upewnimy.
Około 20 pikseli, bym powiedział, zmierzymy sobie nawet dokładnie.
Czyli przejdźmy sobie do
naszego elementu, zrobimy padding bottom 5.
Zapiszemy sobie ten element.
I już w tym momencie mamy nasz pierwszy element, który jest w naszej stopce.
Teraz kolejną rzeczą, którą sobie wprowadzimy będą te napisy.