Zbuduj własne portfolio z Tailwind CSS: Implementacja sekcji z usługami na tablety

0:00Jest jeszcze jedna rzecz, o której

0:01ostatnio zapomnieliśmy jak implementowaliśmy ten widok mobilny.

0:05Otóż ten napis.

0:06Kodowanie to moja pasja,

0:08nauczanie to moja misja.

0:09Wielkość 32 semibold.

0:11Przejdźmy do naszego edytora kodu i tutaj,

0:12gdzie mamy tą sekcję services, mamy pierwszy nagłówek.

0:17Mamy później kolejno te nasze elementy.

0:19Myślę, że tutaj pod spodem możemy zrobić sobie

0:22paragraf, znowu wkleić ten tekst i jako, że widzimy tutaj nauczanie, to moja misja

0:28musi być wystylizowane inaczej możemy sobie skorzystać ze span'a, który pozwoli

0:32nam dodatkowe style narzucić tylko na ten kawałek tekstu tutaj.

0:36Zapiszemy to sobie i klasa

0:40potrzebujemy text to będzie xl

0:4632 mamy 36 pixeli 30 pixeli.

0:49Możemy skorzystać z klasy Tailwind'owej, możemy też wpisać też arbitrary value

0:53może skorzystamy tym razem z wartości dokładnie tak, jak designer nam przekazał.

0:58Text 32 pixele font-semibold.

1:04Zapiszemy to sobie już w ten sposób.

1:06I tutaj jeszcze potrzebujemy text, czyli klasa text na orange-600.

1:16Przejdźmy do naszej strony internetowej.

1:17Sprawdźmy jak to tutaj wygląda.

1:19Jest wszystko ok z tym problemem, że musimy jeszcze sobie to

1:25wyśrodkować ten tekst i sprawdźmy jeszcze raz, czy rzeczywiście.

1:31Tak myślę, że wygląda to dobrze.

1:32Padding'i możemy jeszcze znacząco tutaj powiększyć sobie w tym tekście, żeby on

1:36bardziej się jednak odsuwał od tych boków, tak jak to mamy w naszym designie.

1:40Przejdźmy sobie tutaj do naszego i px

1:43ustawimy jeszcze dodatkowo na 24 pixele.

1:47To powinno nam sprawić, że jeszcze więcej potrzebujemy, zróbmy 10.

1:53W tym momencie mamy, podobnie jak na naszym designie, kodowanie

1:57to moja jest w pierwszej linii.

1:59Natomiast w naszym przypadku jeszcze co

2:00bym zrobił to wypadałoby padding top ustalić na 4, żeby odsunąć

2:06jednak ten napis od całej reszty i padding bottom też na 4.

2:10Czyli generalnie rzecz biorąc padding na y możemy sobie ustalić na 4.

2:14Dobrze, przejdźmy teraz do widoku

2:16na tablety jeszcze raz szerokość takiego widoku.

2:20W naszym przypadku to jest tutaj

2:23744 pixele, czyli nasza przeglądarka tutaj.

2:29Musimy sobie ją ustawić na 744,745 pixeli.

2:35No już to jest ten breakpoint, który mamy.

2:38I w tym momencie możemy zacząć sobie od kodowania tych pojedynczych elementów.

2:41Jak widzimy, nie wygląda to jak na designie.

2:44Design pokazuje nam tutaj, że te elementy raczej powinny być wyśrodkowane.

2:48Powinny być dalej pod sobą, natomiast

2:50powinny być dużo mniejsze tutaj i zaczynać się z lewej strony, nie być wyśrodkowane.

2:55Tak, że myślę, że zaczniemy sobie najpierw od tego.

2:58Wróćmy do naszego edytora kodu.

2:59Ja sobie troszeczkę edytor kodu teraz

3:01zmniejszę, żebyśmy widzieli zmiany, które tutaj wprowadzamy. No i zaczniemy sobie od

3:06wedytowania tych tutaj elementów.

3:10Musimy nadać im maksymalne width, tak żeby to nie było za szerokie.

3:14Czyli zaczniemy sobie od pojedynczych elementów, które mamy tutaj w naszym flex'ie.

3:21Prawdopodobnie możemy sobie tutaj nałożyć

3:23max-width i to już powinno nam zrobić efekt, którego chcemy uzyskać max-width

3:29jak sobie ustawimy na lg i sprawdźmy w jaki sposób to już nam zmieni te elementy.

3:33No jeszcze jest za duże, zróbmy sm.

3:38Już jest dużo lepiej. Natomiast musimy sobie mx

3:41auto i nie zapominajmy o tym, że jesteśmy tutaj już w breakpoint'cie.

3:46Czyli bardzo dobrze byłoby skorzystać

3:49tutaj jednak z tych przedrostków. Jeżeli chodzi o przedrostki.

3:56Myślę, że sm będzie tutaj lepszym rozwiązaniem.

4:01Na widokach mobilnych jak sobie zmniejszymy tą

4:04przeglądarkę to powinniśmy wrócić do starego wyświetlania.

4:08Czyli teraz jak zwiększamy

4:10to tutaj ograniczamy jakby szerokość tego elementu.

4:14Wróćmy jeszcze tutaj do implementacji tego pojedynczego elementu.

4:17Jak wiemy te teksty nie powinny być wyśrodkowane, w tym przypadku.

4:22Czyli jak mamy nasz div, który wyśrodkowuje nam tutaj

4:29ikonkę, to jest wszystko w porządku jeżeli chodzi o ten widok.

4:32Natomiast co nie jest w porządku, to to, że ten tekst tutaj jest wyśrodkowywany.

4:40Tak, my chcieliśmy,

4:42musimy się tego tutaj pozbyć.

4:44Spróbujmy najpierw tutaj

4:45text left.

4:47Czy to w ogóle coś zmieni nam?

4:48Póki co to nic nie zmieniło, dlatego, że

4:51ustawiamy na całym tutaj wrapie items-center.

4:56Czyli prawdopodobnie co sobie byłoby najlepiej zrobić, to obudujemy

5:00sobie tutaj te dwa teksty, nad którymi chcemy mieć większą kontrolę.

5:08Mamy dodatkowego div'a zapiszemy, Sprawdźmy czy to się, no i już

5:12zobacz, że web development jest tutaj po lewej stronie.

5:17Już ten tekst nie jest na środku.

5:18Tutaj przez to, że mamy text-center możemy sobie już wrzucić tutaj ten modyfikator

5:23sm-text-left już to też nam przesunie ten tekst na lewą stronę.

5:28Padding też musimy skasować z lewej strony, czyli sm-pl

5:34na 0 też już nie mamy pudding'u i całość tutaj class flex items-center.

5:43Justify też

5:45na center ustawimy sobie. Natomiast oczywiście flex-column.

5:49Jeszcze chcemy, żeby te teksty były, prawda,

5:53pod sobą. Jusify-center.

5:57Oczywiście błąd z naszej strony powinno być start tutaj i items też start.

6:04Chcemy to przesunąć na lewą stronę, tylko jak mamy justify-center, justify-start nie

6:08potrzebujemy w tym przypadku. No i potrzebujemy teraz zastosować to,

6:11to samo, ten sam stylowanie do kolejnych elementów.

6:16Czyli to był element numer 1. Sprawdźmy,

6:18najpierw stosowaliśmy tutaj na wraper, na element klasy sm.

6:24Czyli to jest nasz tutaj element.

6:27Owrapowanie tych dwóch tekstów tutaj to

6:30też potrzebujemy wrap with abbreviation, div

6:35i tutaj też skopiujemy sobie tak naprawdę klasy, które mieliśmy

6:39w tym przypadku możemy wkleić.

6:43Tutaj też skopiujemy klasę, text 2xl jest wszystko w porządku i tutaj ta klasa,

6:48którą też zmodyfikowaliśmy dla paragrafu, też musi zostać skopiowana.

6:52Tutaj już zaczyna to nam się wyświetlać

6:55w sposób dużo bardziej prawidłowy, taki jak byśmy sobie chcieli.

6:58I podobna rzecz, którą musimy też zrobić,

7:01będzie dla tego elementu tutaj w środku, czyli otwórzmy sobie tutaj ten element.

7:06No i tak samo analogicznie potrzebujemy najpierw skopiować te główne

7:13modyfikatory.

7:16Tutaj też gap 8 sobie ustawimy, żeby troszeczkę odsunąć te elementy od siebie.

7:21I kolejną rzeczą, którą potrzebujemy, to tak jak wcześniej wrapujemy sobie teksty.

7:28Mamy ten div.

7:29Kopiujemy sobie klasy tutaj z tego miejsca.

7:35Już przesuwa nam się to tutaj.

7:36No i p też, tak naprawdę dla paragrafu możemy sobie skopiować tutaj te wszystkie klasy.

7:43Żeby ułożyć tak, jak byśmy chcieli, też tutaj.

7:48No i tutaj ten napis. Sprawdźmy sobie.

7:49Jeżeli chodzi o nasz design, no to kodowanie to moja pasja

7:52powinno się kończyć w jednej linii.

7:54U nas to jest zupełnie inaczej. Tak, że

7:57możemy teraz przejść do tego napisu,

8:01kodowanie to moja pasja i na sm możemy ustawić max width.

8:09600 będzie tutaj dobrą wartością.

8:10No i też sm text-center.

8:14Natomiast mamy tu już ustawiony

8:16text-center, mx-auto, żeby wyśrodkował sobie ten tekst tutaj w całym naszym kontenerze.

8:23Myślę, że też dobrze byłoby jednak

8:25zwiększyć tutaj ten padding, który mamy py na wartość dwa razy większą niż to było

8:31wcześniej, tak żeby odsunął to troszeczkę od tych naszych tutaj serwisów.

8:35I z tego co widzę, tutaj też mamy różnice w odległościach.

8:39Sprawdźmy skąd ona nam się bierze.

8:42Jeżeli chodzi o wraper na nasze teksty to mamy tego div'a tutaj.

8:46To jest nasz drugi element. Oferujemy indywidualne konsultacje

8:49gdzie są,

8:51gdzie jest większy ten wraper.

8:52Sprawdźmy px-4, gaps na 8 ustawiliśmy których nie powinniśmy zmieniać.

8:57Generalnie jest na 4 ustawione. Dobrze.

9:00Widok na tablety dla usług mamy już za sobą.

9:05Sprawdźmy jaka to jest, jaki tu jest design.

9:07Myślę, że można by zdecydowanie też

9:09pokusić się o to, żeby sprawdzić jaka tu jest wielkość czcionki.

9:13Tu mamy 16, czy to jest to samo, to samo.

9:15Nic się nie zmieniło 24/24.

9:17Czyli to są tak naprawdę te same.

9:19Nie zmieniamy żadnej wielkości czcionki.

9:21Tutaj moglibyśmy pokusić się o to, żeby zwiększyć te odległości pomiędzy tymi

9:25elementami, na tym widoku, bo jednak one troszeczkę urosły w porównaniu do widoku

9:30mobilnego. Przejdźmy sobie teraz do zaimplementowania tej logiki. Jako że mamy

9:36tutaj nasze wrapery na cały ten element, to możemy jak najbardziej sobie go

9:42przesunąć. Drugi element padding top na 4 przesunął się nam troszkę w dół.

9:50Myślę, że to jeszcze jest jednak za mało.

9:53Pamiętajmy o modyfikatorach to jest tylko na ekranie na tablety.

9:58I w takim razie weźmy sobie 2 razy większą wartość i to samo zrobimy dla ostatniego

10:03elementu, żeby też go jednak przesunąć tutaj sobie w dół.

10:07No i już ta odległość między tymi elementami się nam znacznie zwiększyła.

10:11Jeszcze przejdźmy do ostatniego tekstu i padding na y ustawimy na

10:1716, żeby jednak oddzielić ten tekst od całej reszty tutaj tej sekcji.

10:22Na dużych ekranach też nie wygląda to

10:24jakoś tragicznie, natomiast musimy sobie zmienić sposób wyświetlania tych elementów.

10:28Przejdźmy teraz do implementacji

10:32jakby ostatniego widoku tego, tych usług w widoku na duże desktopy.