Zbuduj własne portfolio z Tailwind CSS: Implementacja sekcji z opiniami

0:00Kolejna sekcja, na której skupimy swoją uwagę to będzie sekcja opinii.

0:04Tutaj mamy tylko jeden przykład.

0:06Prawdopodobnie gdyby ta aplikacja była w miarę dynamiczna, no to moglibyśmy tutaj mieć

0:10dodatkową logikę, która przełączałaby poszczególne opinie lub automatycznie by

0:13się przełączały po jakimś czasie z jakimś delay'em.

0:16Natomiast my tutaj chcemy tylko i

0:18wyłącznie zaimplementować statyczny design, który wygląda

0:21praktycznie tak samo na wszystkich ekranach.

0:23Opinia jest wyśrodku tylko na desktopach.

0:26Na dole mamy dwie strzałki, które przełączają to. Tak, że

0:28przejdźmy sobie teraz do implementacji, do naszego edytora kodu.

0:32Sekcje z naszymi services możemy zminimalizować.

0:36Sekcje z projektami też sobie zminimalizujemy.

0:38I tutaj, w references mamy naszą nową sekcję div.

0:48I już w tym momencie możemy sobie zacząć z tego względu, że tu będzie wyśrodkowane.

0:52Możemy sobie container ustawić i mx-auto,

0:57czyli w takim przypadku wszystko co w środku tutaj będzie wyśrodkowane.

1:01Dodatkowo potrzebujemy tego pierwszego elementu z napisem, który też powtarza się

1:06w naszej sekcji, natomiast tutaj będą referencje.

1:09Tak, jaki tu mam design? Nie, opinię.

1:12Mamy opinię, czyli wróćmy do edytora kodu.

1:15Opinie i tekst, który musimy tutaj wkleić.

1:20Posłuchaj, co innym dała moja pomoc.

1:23I tutaj wklejamy ten tekst.

1:27Zapisujemy to.

1:28Już w tym momencie pojawiła się nam sekcja naszych opinii.

1:33Teraz musimy przejść sobie do implementacji

1:35pojedynczego elementu, pojedynczej opinii, czyli owrapujemy go sobie.

1:39Najpierw, przyjrzyjmy się najpierw jego budowie.

1:43Otóż na górze mamy gwiazdki, potem mamy jakiś tekst z opinią. Na dole

1:48tutaj mamy też jakiś element z jakimś awatarem

1:52użytkownika, który wydaje opinie i na dole mamy nawigację w postaci dwóch strzałek.

1:56Zacznijmy sobie od implementowania tych 5 tutaj gwiazdek w naszym bloku, czyli div.

2:03Tutaj będą nasze gwiazdki.

2:04Ja sobie już gwiazdki przygotowałem.

2:06Jest tutaj star-svg. Jeżeli sobie to skopiuję to 5 razy mogę teraz wkleić 2, 3, 4, 5.

2:13Mamy 5 gwiazdek wklejonych w

2:15nasz div. Ja sobie je wszystkie

2:17zminimalizuje, żeby one nam przeszkadzały, bo de facto będą wyglądały tak samo.

2:21Natomiast tutaj na nasz wraper wokół tych

2:23gwiazdek, no żeby je ustawić w jednym rzędzie używamy flex'a, żeby je od siebie odsunąć.

2:30No to wystarczy nam tak naprawdę gap ustawiony na 2.

2:33Już w tym momencie powinniśmy mieć gwiazdki ustawione koło siebie.

2:38Dobrze, to mamy pierwszą rzecz.

2:40Gwiazdki mamy za sobą.

2:41Teraz potrzebujemy jakąś opinię,

2:43czyli prawdopodobnie paragraf z tekstem, który sobie skopiujemy tutaj z naszej Figmy.

2:53I do naszego edytora kodów wkleimy

2:56nasz tekst. Jeszcze sprawdzimy tylko wielkość tego tekstu.

2:58Jest 16 medium, czyli nie musimy nic zmieniać.

3:02Kolor jest taki jaki jest wszędzie.

3:05Przejdźmy teraz do implementowania tutaj tego awatara użytkownika.

3:08Czyli kolejny element to znowu będzie div, który opakujemy sobie.

3:12Na pewno będziemy potrzebować tutaj nasz

3:14obrazek z awatarem, czyli zrobię sobie najpierw element div i image

3:19na razie zostawię to tak jest. I poniżej

3:22tutaj kolejnym elementem, który będziemy

3:24potrzebować to będzie imię, nazwisko i pozycja.

3:30Czyli zróbmy sobie h3

3:34i skopiujemy sobie imię i nazwisko tej osoby Linda May i pozycja

3:40może być też paragraf frontend developer.

3:47Zapisujemy to sobie.

3:48Sprawdźmy na naszej stronie jak to na razie wygląda.

3:50Na razie musimy sobie to wszystko tutaj, prawda, oscylować.

3:54Potrzebujemy obrazka, ja który sobie teraz

3:57wyeksportuje, zapisze w dodatkowych materiałach do tego kursu.

4:01Już u mnie pojawił się obrazek Linda,

4:03czyli tutaj mogę się już odnieść do images i pliku Linda png.

4:11To sobie ostylujemy.

4:13Sprawdźmy, jaką szerokość i wysokość ma ten wraper 44.

4:17Czyli w naszym przypadku możemy ustawić to width height na 10.

4:23Zapiszemy sobie relative position, overflow hidden.

4:29I tutaj jako klasa width full, height full.

4:37Absolut inset-0.

4:42Object-cover.

4:46I możemy sobie zrobić aspect

4:49square rounded-full, żeby zaokrąglić ten obrazek w całości.

4:54I już w tym momencie nasz awatar powinien być odpowiednio wyświetlony.

4:58Potrzebujemy teraz w miejscu, w którym mamy ten awatar, czyli

5:02tutaj, gdzie zamykamy to wszystko, musimy sobie ustawić flex'a i gap na 2.

5:07Na razie, żeby te dwa elementy były ustawione koło

5:11siebie, wszystko to będziemy musieli wyśrodkować.

5:14Czyli jak mamy tutaj cały div na naszą

5:17opinie, klasę możemy sobie zrobić flex, flex-column, items-center.

5:26Już wyśrodkowaliśmy całą naszą opinię.

5:28Za chwilkę sobie podsuwamy wszystkie elementy.

5:30Natomiast najpierw skupmy się na wystylizowaniu jeszcze imienia i nazwiska i pozycji.

5:35Tu możemy sobie zrobić jeszcze full, żeby te elementy zawsze były tutaj na środku.

5:42I przejdźmy sobie do zobaczenia.

5:44Jaką czcionką mamy tutaj 16 semibold roboto Linda May.

5:48Przejdźmy sobie do naszego designu.

5:50Linda May Font semibold.

5:55I to był zinc

5:59600. To nie jest tak naprawdę ta czcionka,

6:01którą używam w całej aplikacji i jeżeli chodzi o pozycje jest regular

6:0714, czyli tutaj class-text-sm prawdopodobnie będzie 14.

6:14Tak.

6:15Zobaczmy sobie na desing.

6:16No już wygląda to dużo lepiej, na to Linda May ten

6:19kolor jednak jest troszeczkę ciemniejszy, tak, że wrzućmy sobie tutaj 800.

6:23Możemy sobie to dokładnie tak naprawdę sprawdzić tutaj.

6:28Jaki jest kod tego 3f, 3f, f46.

6:34Przejdźmy do naszej aplikacji i sprawdźmy

6:36jaki teraz mamy kod, naszego koloru.

6:41Dla tego elementu 27272A, czyli

6:46będzie to prawdopodobnie 700 tutaj.

6:51Dobrze, mamy odpowiedni kolor, już na imię i nazwisko.

6:57Teraz potrzebujemy wyśrodkować ten tekst tutaj, czyli class-text-center.

7:05Wyśrodkowaliśmy tą opinię.

7:06No i potrzebujemy teraz wszystkie rzeczy od siebie odpowiednio odsunąć.

7:10Jako że mamy jeden główny wraper na to wszystko, który jest tutaj.

7:14No to możemy wykorzystać gap i 4, żeby podsuwać od siebie wszystkie te elementy.

7:20Dobrze, poniżej opinii potrzebujemy

7:22nawigację do tego widget'a całego, związanego z opiniami.

7:26Czyli tutaj też robimy sobie div, no i potrzebujemy dwa obrazki svg.

7:31Mamy akurat arrow left, arrow right czyli w tym momencie sobie skupimy lewą strzałkę.

7:37I tak samo musimy sobie skopiować prawą strzałkę.

7:41Zapisujemy to sobie i ustawimy sobie te elementy tutaj.

7:45Flex gap ustawimy dosyć duży pomiędzy

7:48tymi strzałkami na początku 32, items-center.

7:54Sprawdźmy już jak to wygląda.

8:00Jeszcze zobaczymy sobie czy odległości są w porządku.

8:05Myślę, że jest ok.

8:06Tylko teraz musimy sobie jeszcze justify na center ustawić.

8:09Tak?

8:14No już mamy nawigację wyśrodkowaną.

8:16I kolejna rzecz to przydałoby się jakiś padding na top.

8:21Zostawmy go na razie na 4, żeby odsunąć to od całej reszty.

8:24Myślę, że wygląda to jak najbardziej ok.

8:27Sprawdźmy teraz większe ekrany.

8:30W jaki sposób wygląda nam tutaj ta opinia?

8:33Myślę, że na tym ekranie troszeczkę ten tekst jest jednak za szeroki.

8:38Także możemy go spokojnie ograniczyć, tak, żeby on był bardziej czytelny.

8:43Wróćmy sobie do naszego tekstu, który jest

8:45tutaj w naszej opinii.

8:46Mianowicie nasz paragraf.

8:49Który mamy tutaj i ustalimy mu na max. Width

8:52Na tak, żeby tekst był czytelny w miarę.

8:56Ustawmy na 672 pixele. No już jest dużo lepiej.

9:00Myślę, że można to przeczytać i teraz na ekranie dużym.

9:04Też tutaj sekcja opinii myślę, że wygląda w miarę akceptowalnie.

9:09Sprawdźmy nasz design.

9:12Jak to wygląda na dużym ekranie.

9:13Myślę, że jeszcze możemy znacznie

9:14ograniczyć szerokość tego, tak żeby było to ta praca z Danielem to była przyjemność.

9:19I myślę, że możemy sobie jeszcze bardziej ograniczyć szerokość tego elementu.

9:25Tak że wróćmy, zobaczmy naszą stronę, jak ona wygląda.

9:29Jest troszeczkę jednak za szeroki ten elemet.

9:31Wróćmy tutaj sobie do naszego p i do max width i ustalmy to na xl.

9:36Sprawdźmy.

9:37No myślę, że dużo lepiej, dużo bardziej czytelny jest ten element.

9:39Teraz można przeczytać.

9:43I jeszcze warto byłoby odsunąć te

9:45strzałki troszeczkę od siebie, bo jak zobaczymy design, to jednak one są znacznie bardziej od

9:49siebie odsunięte. Sprawdźmy te odległości na małym ekranie.

9:53Ta odległość to jest ok.

9:5580 pixeli, czyli musimy zrobić tutaj gap na 20.

10:00Sprawdźmy jeszcze większe ekrany.

10:03Jak to wygląda tutaj.

10:05Tu jest dwa razy większa ta odległość.

10:07Myślę, że tutaj jest to samo. Tak? Tak.

10:10Czyli 20 na ekranach md i musimy ustawić ten gap na 40.

10:15Tutaj mamy gap pomiędzy tymi strzałkami.

10:19Tak.

10:20Potrzebujemy go ustawić na 20 a na md gap na 40.

10:25Zapisujemy to sobie.

10:27Sprawdźmy jak to już wygląda.

10:28No już wygląda to dużo lepiej na naszym.

10:30Na naszej stronie jeżeli przejdziemy sobie na widok mobilny.

10:35To też to się troszeczkę zmniejszyło.

10:39Na widok na ekrany desktopowe.

10:43Mamy już sekcję opinii za nami.

10:47Myślę, że teraz kolejna rzecz, na której możemy się skupić no to będzie

10:51footer i to pozwoli nam zakończyć taką bazową implementację tego design'u.

10:55Potem przejdziemy sobie przez wszystkie

10:57sekcje i sprawdzimy, czy niczego po drodze nie udało nam się zepsuć.

11:00Jeżeli coś zepsuliśmy postaramy się to naprawić.