Tailwind CSS: Footer na urządzenia 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.
Wystylizowanie go tak, żeby wyglądał w taki sposób.
Tutaj kolejne kilka zmian.
Ikonki przeszły nam tutaj na środek i ten wielki napis wskoczył nam tutaj w rząd, w
ten sam rządek, w którym są te wszystkie linki.
Tak że zajmiemy się teraz edycją tego footera.
Zminimalizujemy sobie teraz to wszystko tutaj.
Zostaje nam footer.
Jeszcze tylko sprawdzę, czy żadnych styli po drodze sobie nie popsuliśmy.
Zrobimy sobie inspekt. I sprawdźmy sobie wszystkie urządzenia.
Zaczniemy od komórki.
Mamy tutaj,
wszystko wyświetla się tak jak powinno.
Przejdźmy teraz na tablety.
Tutaj też jest tak, jak powinno być, zgodnie z designem.
I ostatni widok, na którym chcemy teraz popracować to widok responsywny na 1400 i
chcemy tutaj sobie odpowiednio wystylizować ten footer.
Także przejdźmy teraz do footera.
I co my tutaj mamy?
Przede wszystkim mamy kolumny, czyli te trzy kolumny ustawione pod sobą.
Tutaj w tym przypadku są cztery i mamy kilka wrapperów na nasze elementy.
Jeden z wrapperów jest specjalnie stworzony
pod, pod style na tablety i na urządzenia desktopowe.
Także tutaj już możemy sobie
explicite powiedzieć, że ten napis ma się nie wyświetlać na
urządzeniach desktopowych, czyli po prostu xl: hidden.
Już nam napis znika.
Potrzebujemy sobie te wszystkie ikonki wyśrodkować na środku w tym rzędzie.
I sprawdźmy sobie dlaczego one się do tej pory nie wyśrodkowały.
Mamy tutaj dwa flexy.
I tutaj brakuje nam grow, żeby urosło
wszystko w taki sposób, żeby zajęło nam to miejsce.
Czyli teraz przejdźmy sobie tego Flexa na xl: grow.
Zapiszemy sobie już mamy ikonki na środku.
Kolejna rzecz, którą musimy sobie
zmodyfikować to dodać czwarty rząd tutaj i napis w środku.
Czyli przejdźmy teraz do tego naszego wrappera na te wszystkie teksty.
I to będzie dokładnie ten element.
Tutaj mamy wszystkie teksty.
Jak widzisz mamy trzy elementy i mamy Grid Columns na 3.
Czyli możemy sobie spokojnie tutaj dodać kolejny element.
Niech tym kolejnym elementem będzie nasz
napis, który oryginalnie był tutaj w tym footerze.
Czyli skopiujemy sobie ten napis, wkleimy
tutaj jako czwarty element, schowamy to hidden.
Nie chcemy, żeby to się ukrywało.
Na razie zostawimy sobie style tak jak są.
Oprócz tych wszystkich paddingów, nie chcemy tego na początku.
No i tutaj na xl musimy sobie ustawić grid cols na 4,
tak żeby nasz napis pojawił się dokładnie właśnie w tym miejscu.
I teraz musimy zastosować tutaj odpowiednie klasy.
Może weźmiemy sobie, tak naprawdę, owrappujemy też tą h1
w podobny element jak cała reszta tutaj.
Tak że możemy sobie tego diva tutaj skopiować.
Wrapporwać sobie tu.
I za pomocą diva zamknąć.
I teraz sprawdźmy sobie flex.
Flex column nie potrzebujemy, items Center, justify-Center jest ok.
Md tego też nie potrzebujemy.
No i już obrazek nam się wyśrodkował.
Natomiast jest jeden problem.
Otóż chcemy, żeby ten obrazek jednak był bardziej przesunięty w prawą stronę.
Sprawdźmy sobie, w jaki sposób wygląda teraz rozmieszczenie tych elementów.
No tu widzimy, że ten center jest jednak
niefortunny i my chcemy przesunąć ten napis w lewą stronę.
Dlatego też justify-center sobie ściągniemy z tego elementu.
Chcemy go domyślnie mieć ukrytego, bo to jest tylko element na widoki
desktopowe na XL nadamy mu flex . No i chcemy powiększyć sobie ten
napis, czyli ten napis na 5XL troszkę za duży jednak, 4xl The Eduweb Times.
Możemy sobie teraz sprawdzić w jaki sposób to tutaj nam się też rozkłada.
Mamy te wszystkie kolumny na takie same
wartości, natomiast możemy sobie łatwo powiedzieć, żeby ta kolumna jednak
była dwa razy większa niż każda z tych kolumn.
Czyli weźmy sobie, tutaj mamy grid-cols na 4.
Możemy sobie tutaj też wartość domyślną wstawić,
jakby wpisać z ręki, tak jak to robiliśmy też tutaj. W tym przypadku.
Jak widzisz, mogliśmy wpisywać dokładną formułę na to, jak szerokie powinny być
nasze, jak wysokie powinny być nasze rzędy.
To samo sobie zrobimy w tym przypadku.
Tutaj sobie to wkleję.
Potrzebujemy 4 kolumny, czyli grid cols na początku.
I jakie powinny być te kolumny.
Otóż pierwsza 1fr, druga 1fr, trzecia 1fr a czwarta 2fr.
Zapiszemy sobie to teraz, to możemy sobie skasować.
No i już The Eduweb Times jest w lepszym miejscu.
Teraz możemy sobie spokojnie wyśrodkować
ten napis tutaj właśnie tym justify-Content na Center.
Przejdźmy do tego elementu.
Justify-Center.
No i już mamy to zrobione dokładnie tak,
jak jest w designie naszego, jaki dostaliśmy od naszego designera.
Jeszcze tutaj widać to na pewno paddingi powinny się troszeczkę zmniejszyć.
Zobaczmy ten design.
Padding mamy troszkę jednak większe.
Sprawdźmy jaka to jest dokładnie wartość.
To jest około sześćdziesięciu pikseli.
Ja sobie wrócę tutaj.
No i musimy popatrzeć. Tak, tutaj
znajdźmy sobie główne elementy, które nam odbudowują nasz footer.
Mamy cztery główne elementy.
To jest główny footer, margin top.
Tu tak naprawdę nie potrzebujemy sobie nic zmieniać.
Tu mamy paddingi po lewej stronie, tu mamy padding, po lewej stronie.
I to wszystko.
No to popracujmy nad tymi dwoma paddingami.
Ta klasa powinna mieć zdecydowanie większy paddingi na XL.
Czyli przejdźmy sobie XL i możemy sobie zrobić to są paddingi XL,
px zróbmy na to jest 60, czyli możemy spokojnie iść nawet na 10.
Już parkingi nam się zwiększyły znacząco.
To samo musimy zrobić sobie z tym
elementem, który ma border na bottom czyli xl: mx na 10.
Już nam się zwęziła ta odległość.
I to tak naprawdę wszystko.
Mamy skończony design na desktopy.
Ja sobie to wszystko zminimalizuje.
Sprawdzimy sobie teraz wszystkie wszystkie breakpointy.
Jak to wszystko wygląda?
Przejdźmy teraz na breakpoint dotyczący telefonu komórkowego, czyli inspect,
telefon komórkowy i sprawdźmy sobie jak to wygląda.
Wszystko wygląda, jest ok, tylko jest jeden problem, bo mamy dodatkowy znaczki.
Wszystko wygląda ok. Teraz przejdźmy sobie na tablety.
Na tabletach też mamy wyświetlane
to wszystko jest tak jak powinno być.
No i przejdźmy na ekrany desktopowe.
Czyli responsywny design 1400.
Tu mamy scrolla natywnego.
I tutaj też jest wszystko wyświetlane tak jak powinno być.
Teraz jako bonus zbudujemy sobie ten
header, który mamy zrobiony tutaj w naszym designie na ekranach desktopowych.
I to będzie ostatnia część w tym projekcie.
Zbudujemy ten header i krótkie podsumowanie.