Zbuduj własne portfolio z Tailwind CSS: Implementacja headera

0:00Zaczniemy sobie od wbudowania tej pierwszej sekcji na naszym portfolio.

0:03Otóż chodzi tutaj o tą główną sekcję z tym wielkim zdjęciem mojej twarzy.

0:08Oczywiście możesz sobie spokojnie podmieniać zdjęcia, adresy e-mail, dane,

0:12żeby mieć swoją stronę do swojego portfolio.

0:14Natomiast to jest tylko jako przykład pokazane.

0:16No i pierwsza rzecz, która nam się tutaj rzuca w oczy, to widzimy tutaj jakiś

0:19header u góry na pewno mamy jakąś ikonkę menu na widoku mobilnym na tablecie.

0:25Potem to nam się zmienia też w ikonkę

0:27menu, która jest na środku i jakiś tutaj prawdopodobnie odnośnik do kontaktu.

0:32Dodatkowo mamy tutaj jakieś ikonki social mediów danej osoby, tak?

0:36No i mamy adres e-mail napisany też tak z dołu do góry.

0:42Dodatkowo znaczek, który mówi nam, że możemy sobie zescrollować na dół.

0:45Także skupimy się teraz na tej pierwszej sekcji.

0:47Przejdźmy do edytora kodu i przejdźmy sobie też tutaj do naszej przeglądarki. Skasujemy

0:52sobie na razie to wszystko co do tej pory sobie napisaliśmy, jeszcze jako ciekawostka

0:57dzięki temu, że mamy ten watch włączony

0:59zobacz, że jeżeli chodzi o style to podane zostały style, które są używane.

1:04Zauważ, że używaliśmy grida, używaliśmy h-10.

1:07Wszystko to jest jakby automatycznie dodawane do tego pliku style CSS dzięki

1:11temu, że Tailwind nam się przebudowuje i czyta, z których klas my tutaj korzystamy.

1:17Dobrze, przejdźmy sobie do budowania tego header'a.

1:20Na pewno musimy zacząć od jakiegoś

1:22jakiejś nawigacji, jakiegoś header'a tutaj na górze naszej strony.

1:25Czyli zajmiemy sobie tego diva na header i na razie nadajemy mu klasę na absolute.

1:33Pozycję absolute będziemy, bo problem jest

1:35to, że chcemy sobie tutaj cały ten element ze zdjęciem, żeby miał

1:39jakby wielkość całego ekranu,tak? Wysokość i szerokość.

1:43Czyli może zacznijmy sobie najpierw od jakiegoś wrapper'a,

1:46który nam się tutaj przyda na to wszystko.

1:48Robimy sobie margin na top 4 i ustawimy sobie jeszcze pozycję relative.

1:54I dodatkowo background ustawimy na zinc-900.

1:59Chciałbym żeby to był taki ciemny background.

2:01Zapiszę to sobie na razie,

2:03jak widzisz tutaj nic nie mamy jeszcze z

2:05tego względu, że po prostu nie daliśmy żadnej wysokości, szerokości tego div'a.

2:09Natomiast na razie sobie to zostawimy.

2:11Przejdźmy teraz do budowania naszego header'a.

2:17My postawimy na text, żeby było 2xl.

2:23I dodatkowo jeszcze będziemy potrzebowali tutaj font medium.

2:30I tezt zinc,

2:34i tutaj potrzebujemy jakiś kontrastowy kolor biały.

2:39Zapiszę to sobie.

2:40I teraz jeżeli chodzi o te klasy, zauważ, że tutaj jeżeli chodzi o klasę relative to

2:44standardowego CSS ona, jakby odpowiada za to, żeby wypozycjonować

2:49jakby relatywnie, robić tutaj relatywnego wrapper'a.

2:52Po co jest to potrzebne?

2:53Otóż chcemy tutaj jakby absolutenie wypozycjonować sobie nasz header.

2:58I inne rzeczy z tym związane.

3:00Dlatego tutaj sobie dodamy absolute.

3:03I teraz będziemy mogli sobie, tak naprawdę

3:05dodać dokładnie gdzie ten header powinien się znajdować.

3:08Poprzez klasę inset-0

3:11możemy powiedzieć na x 0 zrobimy sobie, że powinien on zostać umieszczony, na

3:17dokładnie na topie tutaj naszej strony. Jeżeli ja sobie teraz tutaj też zrobie: Hello

3:21to zauważ, że tak naprawdę jest to tutaj umieszczone na topie z tego względu, że

3:26mamy margin na top 4 ustawione jest to tutaj przesunięte troszeczkę w dół.

3:30Natomiast nasz header już jest widoczny na naszej stronie.

3:34Dodatkowo co potrzebujemy to

3:36odsuniemy ten header na top na 6 i z na 50 zrobimy bo z tyłu będzie zdjęcie.

3:44Czyli musimy sobie ustawić z-index troszeczkę większy, żeby te zdjęcie nie

3:47przysłaniały nam tego header'a tutaj, który sobie teraz budujemy.

3:51Dodatkowo kolejną rzeczą, która będzie

3:53potrzebna w tym headerze tp na pewno ustawimy sobie na flex na items center.

3:59No i dodatkowo justify, justify between padding na X też ustawimy na 4.

4:07I myślę, że na chwilę obecną możemy to

4:09sobie zostawić w naszym headerze patrząc na design, który mamy tutaj przygotowany.

4:13No potrzebujemy jakieś tutaj logo.

4:16Czyli prawdopodobnie będzie to jakaś

4:17h1, no i potrzebujemy jakąś ikonkę z menu.

4:21Dodatkowo na dużych ekranach potrzebujemy tutaj jakby ten napis kontakt.

4:25Czyli

4:25przejdźmy teraz do naszego edytora kodu i przeglądarki.

4:28I tutaj w środku będziemy potrzebowali h1.

4:33Z napisem Daniel Noworyta.

4:39Zróbmy sobie tu na razie tak.

4:41Mamy już Daniel Noworyta.

4:43Jeszcze zróbmy sobie na całe nasze body class i ustawmy sobie bg na zinc-50

4:53może w naszym przypadku.

4:55I dodatkowo już nam się troszeczkę tło tutaj zmieniło.

4:59Dodatkowo na, potrzebujemy sobie jeszcze ustawić na text, żeby miał zinc-950.

5:06Może domyślnie, żeby był widoczny.

5:12Dobrze, to wszystko już mamy teraz ustawione tak jak powinno być.

5:15Na razie tego Daniel Noworyta nie widać z tego względu, że nie mamy tła żadnego.

5:19Może zacznijmy teraz.

5:22Wstawmy sobie to tło, żeby było tutaj w ogóle już coś widoczne, prawda?

5:26Tak, że przejdę sobie teraz.

5:28Jako, że jesteśmy w tym wrapperze, no to przejdę poniżej header'a, żeby zrobić

5:33wrapper na nasze tło tutaj, tak? Czyli przejdźmy sobie poniżej.

5:38I tutaj potrzebujemy div class.

5:42I w tym momencie musimy też wypozycjonować to relatywnie.

5:49Wyizolujemy sobie ten element od reszty.

5:53I tutaj min-h zrobimy sobie na screen.

5:59Jak nie chcemy, żeby jakby minimalną wielkość ten element to miał jakby ekran.

6:04Na tym nam zależy, żeby zdjęcie zawsze zajmowało nam tutaj wysokość ekranu.

6:09I overflow ustawimy na hiden z tego względu, że nie chcemy mieć jakby domyślnych,

6:14tutaj domyślnego zachowania w postaci scrollbar'ów.

6:18I tutaj weźmy sobie już image.

6:21I jako sorce, ja mam przygotowany link do mojego obrazka.

6:26Jakby mam obrazek, możemy sobie tutaj zrobić link w postaci

6:32naszego folderu image, w którym jeszcze nie ma żadnego obrazka.

6:36Natomiast ja w tym momencie sobie wpiszę już hero fase.

6:43Tak będzie nazwany mój obrazek, który już sobie teraz tutaj skopiuję do folderu.

6:48Wszystkie obrazki, które wykorzystuję tutaj

6:49w tej lekcji będziesz miał dostępne w materiałch dodatkowych.

6:53No i po wklejeniu tego obrazka tutaj do

6:55folderu image hero_fase.png zauważ, że już pojawił się tutaj na mojej stronie.

7:00Oczywiście jeszcze to nie wygląda tak jak powinno wyglądać.

7:02Musimy nadać temu odpowiednie style.

7:04Natomiast już mamy na czym pracować. Już widzimy sobie tutaj

7:07ten header z przodu, tego obrazka jest widoczny.

7:11Przejdźmy sobie teraz do stylowania.

7:12Może najpierw nadamy atrybut alt też mogę

7:15tu napisać po prostu imię i nazwisko jako opis tego zdjęcia.

7:19No i przejdźmy do klas, które będziemy

7:21teraz tutaj wykorzystywać, żeby odpowiednio wystylizować ten obrazek.

7:24Na pewno będziemy potrzebowali absolute.

7:27Na pewno będziemy potrzebowali, żeby ten

7:29obrazek tak naprawdę zajmował całą powierzchnię swojego kontenera.

7:34Czyli najpierw ustawimy mu inset na 0.

7:36To sprawi, że inset będzie 0 pixeli,

7:38czyli jest jakby zajmuje całą powierzchnię swojego rodzica.

7:42Dodatkowo zróbmy sobie, przesuniemy sobie

7:45ten obrazek na -z-10 ustawimy na mniejszy z-index i wysokość na full.

7:55Szerokość też na full ustawimy.

7:57I object cover z tego względu, że chcemy,

7:59żeby zajmował całą dostępną tutaj całe dostępne miejsce dla naszej aplikacji.

8:07Kolejna rzecz, którą będziemy potrzebować to na pewno tutaj

8:10tę ikonkę tego menu ja sobie przygotowałem, tutaj

8:12z boku już svg, które będzie za to, za to odpowiedzialne.

8:18W tym momencie jak wkleję sobie to svg tutaj, to tak naprawdę jeszcze tutaj nic nie

8:23widać z tego względu, że ono nie jest odpowiednio wypozycjonowane.

8:26Muszę je owrappować we wrapper, który powie

8:29gdzie dokładnie ta ikonka ma się tutaj znajdywać. Tak, że ja

8:32ją sobie przeniosę tutaj wyżej i na tego div'a tutaj, którego mamy tu.

8:36Nadamy sobie klasy, które będą mówiły gdzie dokładnie ma znajdywać się ta ikonka menu.

8:43W naszym przypadku będzie to absolute też.

8:47Czyli chcemy pozycjonować to absolutnie w tym kontenerze, który jest tutaj.

8:52Dodatkowo jeżeli chodzi o pozycję to bottom zróbmy sobie 4.

9:02Sprawdźmy jak teraz wygląda.

9:04Na razie jeszcze tutaj nic nie widać.

9:07Dodatkowo potrzebujemy flex, żeby to było jakby zrobione był display flex.

9:15h-10, width-10 zapiszemy to sobie wszystko.

9:20Na razie ciągle nic nie widzimy tutaj na naszym ekranie.

9:24Wyśrodkujemy sobie wszystkie itemy.

9:28Musimy sobie zaokrąglić ten element.

9:34Przypominam, że stylujemy teraz dokładnie

9:36tutaj ten element, który mamy na dole strony, tak? I po rounded-full

9:40potrzebujemy nadać bg-zinc.

9:43W naszym przypadku będzie to 300 taki szary odcień.

9:46Widzisz, że element tutaj już się pojawił w lewym dolnym rogu.

9:51Już widzimy jak to tutaj wygląda

9:53no i dodatkowo potrzebujemy na chwilę obecną tu zostawimy responsywnym

9:56odsuwaniem tego od ekranu się za chwilkę zajmiemy.

9:59Natomiast teraz jak sobie zmniejszę ten

10:01ekran to widzisz, że jest to tak naprawdę też tutaj troszeczkę odsunięte.

10:07Sprawdzę tylko czy mam bottom-4 jest jak najbardziej ok.

10:11Natomiast myślę, że jeszcze musimy to

10:13odsunąć tutaj od tej strony, zobaczymy sobie nasz design mobilny.

10:17Ten element powinien być troszeczkę odsunięty.

10:19W naszym przypadku tutaj brakuje wartości left-4 prawdopodobnie, która już

10:24odsunęła nam tutaj ten element, który mamy poniżej.

10:30No i jeszcze przy okazji skasowaliśm sobie bottom-4,

10:33czyli left 4 już mamy element tutaj w miejscu, w którym on powinien być.

10:39Teraz musimy się zająć tutaj tym elementem u góry.

10:42I elementem, tymi ikonkami, które mamy tutaj po prawej stronie.