Zbuduj własne portfolio z Tailwind CSS: Implementacja sekcji o mnie

0:00Dobrze. Kolejna część naszej strony to jest sekcja o mnie.

0:03Pierwsza rzecz jeżeli zastanawiasz się, skąd biorę te wszystkie odległości, które

0:07wpisuję w stylach, to wszystko to jest po prostu mierzone.

0:11Patrzę sobie tutaj na design, który został dostarczony

0:14i mierzę sobie odległość po prostu z tej strony do tej i widzę, że to jest 16 pixeli, czyli

0:19prawdopodobnie margin, padding na najmniejszych ekranach to jest 4.

0:23Jak przejdziemy sobie tutaj na większe ekrany, to już ten padding jest dużo większy.

0:28Też można sobie to zmierzyć 123/124.

0:33Mniej więcej na tej zasadzie

0:35przenosimy design od designera jakby na implementację w postaci kodu.

0:41Teraz skupmy się teraz na tym pierwszym elemencie.

0:44Jak widzisz, ten header jakby jest podobny elementem do tego, co mieliśmy tutaj w

0:47kontakcie, czyli prawdopodobnie będziemy mogli skorzystać z podobnej zasady, którą

0:51mieliśmy tutaj przy tym elemencie, czyli stworzyć sobie

0:54trzy elementy dwie kulki, jeden ten napis i na tej samej zasadzie będą wyglądały

0:59wszystkie nasze header'y w naszych, w naszych podsekcjach, na naszej stronie.

1:05Czyli przejdźmy do zaimplementowania teraz tej sekcji o mnie.

1:10Wróćmy sobie do edytora kodu. Mamy naszą stronę.

1:13Na razie widzisz, że próbuję scrollować.

1:15Po prostu nie ma nic na niej więcej.

1:16Mamy tylko ten header.

1:19I przejdźmy sobie tutaj, poniżej.

1:20I możemy sobie to podpisać, tak naprawdę.

1:24Tutaj mamy naszą sekcję header, czyli

1:28dla czytelności tego pliku później w późniejszym development'cie.

1:32Przejdźmy teraz na about me.

1:37No i zaczniemy sobie implementację tego kolejnego elementu.

1:43Tutaj wprowadzimy sobie nową klasę, mianowicie container.

1:47Jest to bardzo przydatna klasa Tailwind'owa.

1:49Otóż pomaga ona pozycjonować odpowiednio elementy na stronie internetowej.

1:55Jak sobie teraz wezmę tak naprawdę tabulacją to zakończę.

2:00Zauważ, że ta klasa przyjmuje zawsze jakby

2:04minimalną szerokość na kolejnym break poincie.

2:07Jest to bardzo przydatne z tego względu,

2:08że możemy reagować w jaki sposób elementy się zachowują, jaką mają szerokość ogólną

2:14i mało osób wie, ale tę klasę container też możemy sobie modyfikować czy to w config'u

2:20natomiast, bo minusem jej jest generalnie, że musimy ją zawsze środkować.

2:25Na chwilę obecną ona nie ma, nie jest wyśrodkowana.

2:28Sobie tutaj wpiszę: Hallo. Ten napis tutaj jest w tym miejscu.

2:34Nawet jak sobie zwiększę tutaj tą stronę na większą to mamy napis w tym miejscu.

2:38Natomiast jeżeli chcemy wyśrodkować ten element, no to korzystając tutaj z klasy

2:42mx-auto i w tym momencie już ten element zostanie wyśrodkowany w tym miejscu.

2:48Ten padding to jest ta odległość, dlatego

2:51dla tej wielkości ekranu i my sobie zostawimy ten element wyśrodkowany.

2:54Tam w środku sobie będziemy musieli wrzucić kolejne rzeczy, które będą nam potrzebne

3:00do tego, żeby odpowiednio wystylizować całą resztę.

3:03My tak naprawdę będziemy potrzebowali

3:06bardzo podobny element, który mieliśmy tutaj w naszym headerze.

3:09Mianowicie chodzi tutaj o ten element z kontaktem.

3:14Przejdźmy do naszego header'a i tutaj mieliśmy ten div z item'sami.

3:19Czyli możemy sobie tak naprawdę skopiować ten div z tymi dwoma pomarańczowymi kulkami

3:24i być może będziemy mogli sobie go użyć tutaj na dole.

3:27Generalnie gdybyśmy korzystali z framework'a to wszystko można by

3:30wydzielić do osobnych komponentów.

3:32Natomiast ten kurs jest to kurs wprowadzający do Tailwind CSS.

3:35Chciałem Ci pokazać jak szybko możesz coś zbudować w stronę

3:38portfolio w czystym HTML'u używając właśnie Tailwind'a, i jak sobie skopiuję ten kontakt

3:43to już mam element, sobie skasujemy klasę hidden.

3:47No to już powinien być widoczny.

3:52Oczywiście kontakt jest pisany

3:53tutaj zinc-500

3:55dlatego tak sobie, usuniemy tą farbę

3:58to już ten kontakt jest tutaj, musimy zmienić na o mnie.

4:04Mamy podobny element który był wcześniej, no ale nie jest on wyśrodkowany.

4:08Musimy go odpowiednio wyśrodkować.

4:10Jako że mamy tutaj item center i to jak najbardziej pasuje.

4:15Natomiast potrzebujemy jeszcze justify center.

4:19No już w tym momencie napis o mnie został wyśrodkowany.

4:23Jeżeli chodzi o te kulki to one są, muszą

4:25być większe niż te, które się pojawiały na dużym ekranie, które mamy tutaj.

4:31Mianowicie te kulki są tutaj,

4:33one mają wysokość, szerokość 12, natomiast ta przy kontakcie.

4:40Jeżeli sobie zobaczymy dokładne wymiary no to było 4 na 4.

4:44Czyli tak naprawdę trzy razy większe są te tutaj przy tych

4:48header'ach, nawet na widokach mobilne, bo potem one też jakby się zwiększają.

4:53Tutaj już mają 20 na 20 pixeli.

4:55Zacznijmy od tych, czyli tutaj te mają 16, czyli potrzebujemy tak naprawdę width

4:59na 4, na 3, 12 pixeli mają tak? Czyli width na 3 i hight też na 3 ustawić.

5:07I przejdźmy sobie tutaj do tych jedynek.

5:10Ustawimy sobie to na trójki.

5:13W tym momencie już kulki powinny nam urosnąć.

5:16Jeszcze potrzebujemy ten napis odpowiednio zwiększyć.

5:19Napis powinien być text-4-xl czyli tutaj 4xl.

5:27Zapiszemy sobie, już na naszej stronie napis o mnie też się zwiększył.

5:32Potrzebujemy jeszcze jakieś padding'i i margin'y.

5:35Na to wszystko nałożyć sobie. Zrobimy sobie margines na bottom.

5:40Jeżeli chodzi o te elementy, które są w tym wraperze, ja sobie

5:46przesunę tą stronę na tą stronę, żebyśmy widzieli dobrze jak to wygląda.

5:50I tutaj mamy ten element, który wrapuje nam ten heading.

5:55Tak. I tutaj możemy sobie już ustawić

5:58na bottom na 4, żeby odsunąć to wszystko od dołu strony.

6:03Od następnego elementu, natomiast też będziemy potrzebowali na padding na nasz

6:08container, czyli tutaj jako domyślny ustawimy sobie na 4.

6:14Już nam to też się odsunęło tutaj od góry i też

6:16warto wiedzieć, że teksty też tutaj będą odsunięte od prawej i od lewej strony.

6:20Kolejna rzecz, której będziemy potrzebować

6:22to ten nasz tekst, czyli możemy go owrapować w jakiegoś div'a.

6:26I w tym momencie ja sobie tutaj skopiuję

6:27po prostu ten tekst, który pokaże nam się na naszej stronie.

6:32No już mamy jakiś tekst tutaj pokazany.

6:36Przejdźmy sobie na widok mobilny.

6:38Zobaczymy sobie jak to wygląda na widoku mobilnym.

6:43Póki co jest wszystko w porządku, zdjęcie też środkuje się tak jak się powinno

6:47środkować. I tekst też jest odpowiednio odsunięty od krawędzi.

6:50Myślę, że tak naprawdę widok mobilny chyba mamy z głowy.

6:54Na chwilę obecną, możemy przejść teraz do

6:56implementacji responsywnej, natomiast zobaczmy czy tutaj też wszystko jest ok.

7:03Myślę, że tak.

7:05Tutaj też mamy style już odpowiednio zrobione.

7:06Teraz przejdźmy do implementacji na ekranach medium.

7:10I zaczniemy od tego, że tekst musi się zwiększyć, bo jeżeli sobie tutaj zobaczymy

7:15na wielkość tekstu, to mamy 18 pixeli na ekranie mobilnym.

7:19Jak przejdziemy sobie już na ekran.

7:21Na tablety mamy 24 pixele, natomiast na ekranie głównym też 24, czyli musimy

7:26powiększyć czcionkę od break point'a medium w naszym przypadku.

7:31Przejdźmy do edytora kodu w takim razie i to, co odpowiada tutaj za wielkość tekstu.

7:38Możemy powiedzieć ten główny container.

7:40Możemy go ustawić, że tekst ma być lg troszeczkę nam się zwiększy ten tekst.

7:45Tutaj zobaczmy tą czcionkę.

7:48Ile ona ma pixeli?

7:5218. Czyli musimy sobie tutaj zostawić tak naprawdę

7:54domyślny tekst, niech będzie taki, jaki jest.

7:58Natomiast od medium chcemy zrobić text-xl.

8:04No i w tym momencie na ekranach mobilnych został text wartości 16.

8:08Natomiast jak przejdziemy już na ekrany na tablety, no to już text się

8:13odpowiednio zwiększa, jest bardziej czytelny.

8:14To samo mamy na dużym ekranie, natomiast tutaj będziemy musieli wprowadzić

8:19oczywiście to zdjęcie i kontakt e-mail, tak jak to mamy na naszym designie.

8:23Tutaj za chwilę wprowadzimy ten element, natomiast najpierw zaczniemy.

8:29Zajmijmy się tym, żeby wystylizować dokładnie ten element.

8:31Tutaj on ma odstępy dużo większe.

8:35I tutaj możemy sobie sprawdzić jak to wygląda.

8:39Myślę, że możemy ustawić max width tego

8:43elementu od ekranów medium, żeby też nie rósł za bardzo.

8:48W tym momencie też dostaniemy właśnie taki efekt jak mamy tutaj, czyli tą maksymalną

8:52szerokość tego tekstu, którą mamy w tym miejscu.

8:56Także przejdźmy do naszego wrapera, który zmienia text na xl na ekranie medium.

9:02Tak samo możemy sobie zmienić padding na ekranie

9:05medium, bo też na pewno jest większy i też możemy zmierzyć, zmienić sobie

9:14tą wielkość tekstu jest xl, jest

9:15myślę, że możemy zostawić i dodatkowo

9:18zwiększymy sobie na large:max-w zrobimy sobie na 5xl, żeby to nie rosło w nieskończoność nam.

9:27No już w tym momencie też uzyskaliśmy właśnie taki efekt na ekranach

9:32na tabletach, który też odsuwa ten tekst znacznie od lewej i prawej krawędzi.

9:37Myślę, że to na chwilę obecną na sekcję o mnie wystarczy.

9:42Dodatkowo musimy teraz wprowadzić ten

9:44trzeci element, który jest elementem tego obrazka,

9:48który pozwoli nam pokazać ten obrazek, który mamy na designie.

9:52Na ekranach desktop'owych mamy dodatkowy obrazek.

9:55Mamy taki divider, który jest tutaj.

9:58I tutaj też mamy ikonkę maila i adres e-mail.

10:01I to zamknie nam tę sekcję o mnie.