Zbuduj własne portfolio z Tailwind CSS: Implementacja responsywna sekcji z projektami

0:00Kolejny punkt na naszej drodze do zbudowania swojego portfolio w Tailwind CSS.

0:03To będzie odpowiednie zmodyfikowanie tej sekcji w taki sposób, żeby wyświetlała się

0:08poprawnie zarówno na tabletach, jak i na większych ekranach.

0:12Tutaj widać już, że mamy jakiś max width, czyli prawdopodobnie skorzystamy z

0:16kontenera w tym wszystkim, jak jeszcze nie mamy, no ale układ tutaj się zmienia.

0:20Obrazki przechodzą z tego co widzimy na lewą stronę, na pierwszą a opis,

0:24description i tytuł tego projektu i link przechodzą na prawą stronę. Czyli

0:31myślę, że musimy zadbać przede wszystkim o to, żeby ten pojedynczy element zmieniał

0:35sposób, w jaki się wyświetla na średnich ekranach i na tych dużych i odpowiednio

0:38potem zadbać o odległości tutaj między tymi dwoma sekcjami.

0:42Myślę, że bardzo łatwo to gramy sobie Flex'em, zmieniając po prostu jego kierunek.

0:47Tutaj na początku nasz element projektu

0:50może być flex, kierunek column, a tutaj możemy przełączyć

0:54się na po prostu na zwyczajny default'owy układ flex, czyli rzędy.

0:59Przejdźmy teraz do naszego edytora kodu

1:03i przestawmy się na widok na tablety.

1:07Jeżeli chodzi o szerokość tego widoku,

1:09to tutaj w opcjach Figmy możemy sobie to zobaczyć.

1:12To jest 744 pixele.

1:14Ja sobie teraz dokładnie w taki sposób

1:16ustawię moją przeglądarkę, żeby ona miała 744 pixele.

1:20Może przejdźmy sobie tutaj w inspect i jedziemy, aż będziemy mieli 744 pixele.

1:26To jest nasz punkt docelowy, w którym chcemy.

1:30Chcemy wyglądać tak, jak na naszym

1:32designie, czyli chcemy, żeby to wszystko wyglądało właśnie w taki sposób.

1:35Wróćmy teraz do naszej implementacji, do

1:37kodu, do naszej przeglądarki no i zaczniemy od pierwszej rzeczy.

1:41Pierwsza podstawowa rzecz, którą musimy na pewno zmienić.

1:44To jak zobaczymy sobie na tą sekcję, to pojedynczy element tutaj, tak.

1:49Czyli przejdźmy sobie do wyświetlania pojedynczego elementu.

1:52No i w tym momencie możemy zrobić, że na md

1:55będzie wyświetlane na flex'ie i md możemy ustawić na flex-column.

2:04Flex-row tak naprawdę nam wystarczy.

2:06Czyli jak to już zapiszemy, to już na średnich ekranach powinniśmy

2:10przeskakiwać na wyświetlanie się za pomocą kolumny.

2:14Sprawdźmy jeszcze czy to jest odpowiedni element.

2:16Tutaj oczywiście jeszcze musimy odpowiednio sobie zamknąć te wszystkie elementy.

2:20Z tego względu, że

2:21jeżeli chcemy to wyświetlać na md flex, no to tutaj mamy 1 wraper który jest w środku.

2:26Ale my tutaj mamy za dużo elementów i one się nie będą mieściły.

2:29Czyli te wszystkie elementy tutaj wewnątrz

2:31musimy zamknąć sobie w jednego div'a także wrap wiht abbrevation.

2:37Wpisujemy div i wciskamy enter.

2:40Mamy już dwa elementy w środku tego flex'a.

2:42Zapisujemy sobie to wszystko.

2:44I teraz po odświeżeniu tej strony zobacz, że już tutaj ten pierwszy element

2:48ustawia nam się właśnie w taki sposób, w jaki byśmy chcieli.

2:52Tak, że teraz możemy to samo powielić dla naszego drugiego elementu.

2:56Tutaj zrobimy sobie md: flex to samo

2:59złapie sobie tutaj class,

3:03tak naprawdę będziemy to powtarzać.

3:06Zapisujemy to sobie i te elementy tutaj musimy sobie wrap with abbrevation w div.

3:14I tak samo dla elementu numer 3 nie chcemy obrazka wrapować, natomiast

3:18chcemy wrapować wszystko to co mamy tutaj.

3:21Kolejny div. Zapisujemy sobie to.

3:25I zobacz, że już nam się to zaczyna ustawiać tak jak byśmy chcieli.

3:28Teraz oczywiście musimy sobie popracować nad tymi obrazkami.

3:31Przede wszystkim zaczniemy sobie od elementu numer 1, naszego pierwszego projektu.

3:36Oczywiście korzystając z pewnych framework'ów frontend'owych.

3:40To tutaj mogą być jakimś komponentem.

3:42Obrazek mógłbyć komponentem.

3:44Opis, tytuł i

3:47cały ten link to też mógłbyć jeden komponent, do którego przekazujemy proxy.

3:51Natomiast to nie jest część tego kursu.

3:53W tym kursie chce Ci pokazać podstawowe

3:54zasady jak można sobie przenosić design za pomocą Tailwind'a do prostego HTML'a.

3:59Czyli wróćmy teraz do pierwszego elementu.

4:01Tutaj mamy ten pocketsub projekt i musimy zadbać o to, żeby

4:06te elementy wyświetlały się w sposób prawidłowy.

4:09Wróćmy jeszcze do naszego designu i sprawdźmy sobie szerokość tego obrazka.

4:14To jest 240 pixeli.

4:17Sprawdźcie sobie, jak to wygląda teraz u nas na stronie, na tym ekranie.

4:21Zrobimy sobie inspect.

4:24330 pixeli, czyli zacząłbym od tego, żeby

4:27ustawić mu maksymalną szerokość na ekranie md na 440 na 240 pixeli.

4:37Czyli przejdźmy do naszego edytora kodu.

4:39Tutaj odpalimy naszą przeglądarkę i nasz obrazek tutaj

4:45md max width

4:48na 240 pixeli możemy sobie ustawić.

4:51Już w tym momencie obrazek nam się odpowiednio tutaj zmieni.

4:54Jako, że mamy aspect square, to nie musimy ustawiać wysokości z tego względu, że po

4:58prostu weźmie on jako wysokość, weźmie też szerokość, którą już tutaj ustawiliśmy.

5:03To samo możemy zrobić dla wszystkich

5:05obrazków tutaj poniżej, czyli przejdźmy sobie tu.

5:08To samo mamy tutaj i tą samą zasadę zastosujemy

5:13dlatego komponentu. Tak jak mówię, lepiej używać

5:15framework'ów, bo tutaj w tym momencie nie musielibyśmy tyle razy kopiować tego kodu.

5:19Tylko tak naprawdę wpisywalibyśmy to raz i

5:21wszystko zachowywałby się tak samo się zachowywać.

5:23Teraz przede wszystkim mamy problem z tym, że raz odległości nie są odpowiednie, a

5:27dwa elementy te nie pokazują się odpowiednio.

5:30Czyli tutaj co drugi element chcemy

5:33jakby zmieniać, zmieniać kolejność wyświetlania się.

5:37Chcemy, żeby obrazek był po prawej stronie, opis po lewej stronie.

5:40I tutaj, jako że nie mamy jakieś tej listy zaczytywanej

5:43z backend'u, to możemy jak najbardziej sobie wystylizować tylko ten pierwszy

5:46element, czyli odwrócimy tutaj row-reverse zrobimy.

5:54I zapiszemy to i jest,

5:55obrazek przesunął się właśnie w tę stronę.

5:58Teraz każdy z tych elementów musimy nadać

5:59mu gap, żeby te rzeczy jakby przesuwały się od siebie.

6:03Pamiętajmy, że stylizyjemy dopiero ekrany na tablety, czyli musimy

6:07wykorzystywać te przedrostki md i w naszym przypadku ustawimy sobie gap na 4.

6:14Już opisy przesunęły się od tych obrazków.

6:17I teraz tutaj jeżeli chodzi o ten link to

6:19na md musimy go sobie tutaj wyśrodkować, jakby dać do lewej strony.

6:23Z tego co wiemy, to tak on jest na lewej

6:25stronie i to wszystko powinno zajmować tutaj całą wysokość tego obrazka.

6:30Sprawdźmy sobie w jaki sposób to wygląda teraz u nas.

6:32No nie wygląda to jeszcze tak jak powinno.

6:34Także teraz przejdźmy do edytora kodu

6:37i zaczniemy najpierw od tego linku, który mamy tutaj na końcu tego naszego elementu.

6:42To jest ten link i jak mamy tutaj justify-center to na md musimy zrobić justify-start.

6:50Już to przesunie nam ten link.

6:52W ten sposób, sprowadźmy sobie na nasz design.

6:55Jak to wygląda?

6:57Potrzebujemy zdecydowanie nadać większy

6:58padding na nasz środkowy element, który to wszystko tutaj trzyma.

7:02Czyli wejdźmy sobie tutaj do góry.

7:05Mamy nasz główny element tutaj, który trzyma nam wszystkie projekty.

7:10Padding na x jest ustawiony na 4, my

7:12natomiast potrzebujemy jeżeli chodzi o md px ustawione na 8.

7:17Już to nam zmniejszy

7:19wyświetlanie się tych projektów no i tutaj możemy też ustawić sobie.

7:24Jeżeli chodzi o ten element to margin na top albo możemy ograniczyć szerokość tych

7:30elementów w taki sposób, że ten tekst tutaj się bardziej, lepiej wyświetli nam.

7:34Przede wszystkim też musimy zwiększyć troszeczkę czcionkę.

7:37Póki co mamy za małą tą czcionkę.

7:39Tutaj jest szesnastka.

7:40Jak zobaczymy nasz projekt to my mamy prawdopodobnie to póki co mniejsze.

7:46To jest na razie dwunastka, tak że musimy też zmienić sposób wyświetlania się tych

7:51tekstów w naszych elementach, żeby je tutaj odnaleźć.

7:55To mamy wszystkie nasze trzy elementy, to

7:57są trzy elementy i w każdym z tych elementów mamy tutaj teksty p i mamy

8:04widzisz text xs na md sobie ustawimy text

8:08base i to samo potrzebujemy dla kolejnych elementów.

8:13Czyli to jest kolejny wraper, gdzie odnajdujemy sobie tag p

8:17też mamy text base.

8:19No i tutaj też mamy kolejny element, gdzie odnajdujemy tag p.

8:22Też możemy sobie dodać text base.

8:26Pozamykamy sobie teraz te wszystkie elementy.

8:30Pierwszy, drugi i trzeci.

8:32Zapiszę to sobie. Tekst już nam się kończy, no już nam to się wyświetla dużo lepiej.

8:37Tak jak powinno, tak naprawdę.

8:38Tak, że myślę, że na ekrany, na tablety mamy to już zrobione.

8:41Sprawdźmy jeszcze design.

8:43Czy to wszystko się zgadza?

8:45No jeszcze zdecydowanie musimy powiększyć czcionkę tutaj tego napisu na 24 pixele.

8:52Przejdźmy do naszych header'ów.

8:53Mamy element numer 1 i header.

8:58Który jest tutaj pod spodem.

9:02H2

9:04I ustawiamy sobie na md

9:07text ustawmy na xl, jaka to jest wartość?

9:1020, my potrzebujmey 24 czyli 2xl.

9:12Zapisujemy to sobie.

9:14Sprawdźmy naszą przeglądarkę już tutaj

9:15napis się znacząco powiększył, to samo

9:18potrzebujemy sobie nadać na następną h2 w tym elemencie.

9:26I tutaj kolejna h2 też w tym elemencie.

9:30Już powiększyły się te tytuły, już to

9:32wygląda bardziej tak, jak to mieliśmy założone w designie.

9:36Teraz zobaczmy jak to wszystko wygląda na bardzo dużym ekranie.

9:40No nie wygląda tak jak powinno, z tego

9:41względu, że musimy sobie ograniczyć tutaj szerokość tego wrapera, tych elementów.

9:47Czyli przejdźmy sobie do designu.

9:49Zobaczymy jaka tu jest szerokość tego elementu

9:52mniej więcej, to 1120 pixeli.

9:55Czyli jak użyjemy nasz kontener, możemy nadać mu maksymalną szerokość.

9:59Kontener, który trzyma te wszystkie nasze elementy, czyli idziemy do góry, do

10:02początku naszej sekcji. Tu jest nasz header.

10:05Tu jest element numer 1, element numer 2,

10:07element numer 3.

10:09I tutaj w tym momencie możemy nadać klasę container.

10:15Już to powinno w jakiś sposób nam pomóc, ograniczyć to wszystko.

10:18Natomiast my nie chcemy ograniczać tła.

10:20Czyli wróćmy się tutaj do implementacji.

10:22Nie chcemy ograniczać w ogóle

10:25tutaj tła, także możemy wszystko tutaj opakować w kolejny div.

10:30Bo tło chcemy, żeby zostawało takie jakie jest.

10:35Czyli opakujemy sobie ten element kolejnego div'a i do góry idziemy i wystylizujemy sobie

10:39tutaj tą klasę użyjemy sobie class container max-w

10:46ustawimy sobie, poszukajmy wartości bliskiej 1152,

10:50to jest blisko wartość tego, co chcemy mieć.

10:52I musimy oczywiście wyśrodkować tą klasę kontener, czyli mx-auto.

10:59I już w tym momencie mamy projekty wyświetlone tak, jak byśmy

11:04prawda chcieli.

11:04Jeżeli chodzi o mniejsze ekrany jest to tak wyświetlone.

11:07Jeżeli chodzi o telefony komórkowe,

11:09to wracamy tutaj do wyświetlania w taki sposób.

11:13Dobrze. Sekcję wybrane projekty mamy za sobą.

11:16Teraz przejdziemy sobie do kolejnej sekcji, mianowicie sekcji związanej z usługami.