Flexbox: Nagłówek kanału cz. 2

0:00Cześć witam cię w kolejnej lekcji z kursu flexbox od podstaw i

0:04teraz jak już przygotowaliśmy nasz markup zaczniemy go powoli sterować natomiast zanim

0:09do tego przejdziemy stwórzmy faktycznie dla naszego

0:13obrazka i naszego avatara później odpowiedni placeholder

0:17czyli dalej korzystamy z tego linku placeholded tylko tutaj

0:21możemy zmienić kolor i treść powiedzmy że damy tutaj

0:25super channel tutaj

0:30damy kolor tła na sześć

0:35696e9e okej

0:40to nie jest kolor tła tylko tu jest kolor tła no i tutaj damy

0:44background na biały czyli cztery czyli

0:48sześć f no i rozmiar powiedzmy to już możemy go

0:52wziąć sobie z youtube 728 x 127

0:57ten obrazek na youtube jest o wiele większy natomiast na potrzeby tego przykładu

1:01skorzystamy z takich jak tutaj nam div powiedziały 782 127

1:05czyli tutaj

1:12782 127 okej

1:18mamy już nasz hero section no i tutaj jest

1:22taki problem ponieważ w tym miejscu nie mamy alt'a ta

1:26treść może być wrzucona przez użytkownika w dowolny sposób i

1:30może tam wstawić co chce więc ja bym tutaj dla bezpieczeństwa wstawił pustego alt'a

1:34który oznacza że dany element jest po prostu dekoracją

1:38i nie ma jakiegoś semantycznego znaczenia tutaj

1:43możemy jeszcze w tym fake youtube zmienić to na fake

1:47yt żeby się to nam lepiej mieściło zmienimy

1:55sobie tą nawigację no i został jeszcze avatar no to

2:01analogicznie już tutaj zrobimy do tego superchannel'a tylko

2:07zmienimy mu rozmiary na jakieś logiczne powiedzmy 100 na

2:11100 i

2:15zostawiamy nazwy superchannel stworzymy i zalinkujemy nowy

2:20plik css do naszego arkusza czyli tak jak tutaj linkowaliśmy flexa

2:24zalinkujemy sobie header

2:28css plik tworzymy

2:33header css

2:39możemy w tym momencie faktycznie przejść już do tego stylowania naszego

2:44markup'u ten channel header hero on tutaj się nie mieści do

2:48końca ja się w sumie tego spodziewałem ale zróbmy że channel header

2:53hero będzie miał zawsze width

2:57100% no i teraz możemy przejść do faktycznie stylowania

3:01tej trudnej części tego menu zróbmy

3:05sobie tutaj color picker'em kolor tła tego header'a

3:10i od razu ustawiamy sobie channel header

3:14backround color na

3:19taki jak skopiowaliśmy zobaczmy czy faktycznie to zadziałało i

3:24zacznijmy może od zrobienia zakodowania

3:30naszego przykładu w ten sposób aby ta część ze szczegółami dotyczącymi kanału

3:35zachowała się mniej więcej responsywnie tak jak faktyczny youtube jak

3:39rozciągniemy to sobie troszkę bardziej to widzimy że dalej z tej strony jest taki sam

3:43odstęp w tym momencie jest to około 100 pikseli gdy

3:48zmniejszymy sobie to to na którymś breakpoint'cie powiedzmy

3:58że na 705 ten avatar nam się pojawia poniżej

4:02705 tego avatara tu nie ma oczywiście rozmiar czcionki

4:06też się zmienia a na mobile dalej pozostaje

4:10około 100 pikseli od lewej

4:14odstępu zarówno od tego

4:19avatara jak i od strony głównej jak widzimy tutaj dopiero ten button

4:23się zaczyna więc ja domyślam się że on jest na równi z tym stworzony czyli

4:28możemy zrobić sobie tutaj channel header ustawić

4:38padding-left na 100 pikseli tylko

4:44że musimy to zrobić na naszych details

4:48oraz na naszym pasku

4:54nawigacyjnym wewnątrz tego headera zobaczmy jak to wygląda okej

5:00mamy to wcięcie możemy zaokrąglić awatar czyli channel

5:04header avatar border

5:10radius 50 procent cofnijmy

5:15się i zobaczmy jak wygląda nasz markup częścią

5:20wspólną dla całej tej sekcji jest header details jest to rodzic

5:24tych wszystkich elementów więc na tym elemencie będziemy dawać faktycznego flexboxa

5:28przejdźmy sobie tutaj i na channel

5:33details ustawiamy display flex

5:37odstęp z prawej strony w sumie też możemy zrobić

5:42czyli tutaj skorzystamy z shorthandu padding padding 0

5:46100 pikseli czyli z góry i z dołu mamy zero padding'u

5:50natomiast z lewej i z prawej 100% teraz na channel header

5:55info zobaczmy czy dobrze trafiłem klasę channel

6:00header wrapper ok ustalamy

6:07display flex tylko że ustawimy mu flex-direction

6:12na column na details ustawimy

6:16align-items center od

6:20razu na channel header name ustawimy

6:26mniej więcej taki sam font-size jak jest tam czyli

6:31to jest 24 piksele roboto font size

6:3524 piksele wydaje mi się że font-weight jest

6:39ustawiony też na 400 nie wiem jaka to jest wartość więc ja wstawię

6:43tutaj no powiedzmy 400 zobaczymy jak to wygląda oraz

6:49subskrypcje mają kolor 60 60 60

6:53i font-size 40 czyli channel header

6:59subs count font size 14 pikseli color

7:0560 60 60 tutaj

7:11jest jakiś odstęp acha bo tutaj jeszcze mamy

7:15nie zresetowane style na tej liście oczywiście zobaczymy jakie są odstępy pomiędzy

7:20tymi elementami i jak ona się faktycznie tutaj zachowują czyli tu

7:25pomiędzy awatarem jest

7:30około 25 pikseli tutaj powiedzmy że jest jakieś 5 pikseli

7:35powiedzmy że też jest jakieś 5 10 pikseli

7:39czy to się będzie jakoś mocno różnić na innych rozdzielczościach

7:44dalej to jest 25 pikseli tutaj te elementy są dociągnięte

7:48do prawej no i tutaj margines pozostał bez zmian czyli teraz

7:53wracamy na nasz kod i ustawmy

7:57na troszkę to pomniejszymy na tym wrapperze albo

8:02jeszcze lepiej na avatarze margin-right 25 pikseli

8:06więc mamy już tą sztywną szerokość w tym miejscu

8:10no i teraz na tym button'ie czyli channel

8:15header subscribe tak

8:20to jest subscribe ustawimy margin-left na auto

8:24on został dociągnięty do prawej strony ponieważ ma automatyczny

8:28margines z lewej strony no i ustawimy mu margin-right

8:33powiedzmy na te 10 pikseli zobaczmy

8:37jaki jest tutaj font-size 14 rgba

8:4217 17 17 jest opacity więc zróbmy to

8:46tak że font-size jeszcze

8:50raz sprawdźmy 14

8:55rgba czyli 14 color rgba

8:5917 17 17 0.6 i

9:04tutaj jeszcze background-color eee

9:18okej tuo odznaczamy jest okej zobaczmy jaki rozmiar

9:22jest tutaj paddingu wchodzimy w computed sprawdzamy

9:28sobie padding padding-bottom

9:3210 padding left right 16 no

9:37to ustawmy padding 10

9:41pikseli 16 pikseli cofamy

9:46się ten tekst jest jeszcze uppercase'owany

9:50więc robimy text-transform uppercase

9:55i zrobimy font-weight na 40

9:59również sprawdzamy zostawmy

10:03to w tym momencie tak jak jest no i ustawmy jeszcze adekwatny

10:08rozmiar dlatego do tego jest 24 piksele na 24 piksele

10:13więc na naszym channel header

10:17bell ustawimy font-size 24 piksele

10:21jest ok tutaj jeszcze dalej mamy ten zły

10:25kolor bo tutaj youtube ma kolor 90 90 90

10:29a my mamy tutaj czerń więc zrobimy sobie kolor

10:3390 90 90 no i w sumie zaktualizujmy może

10:38też te nasze nawigacje

10:44tylko teraz tutaj jest po ikonce muszę

10:48sobie przypomnieć jakiej tutaj klasy użyliśmy

10:56po prostu stylowaliśmy po fa więc fa wszystkie

11:01fa mają mieć kolor dokładnie taki no

11:05i okej jest coraz bardziej to podobne do prawdziwego youtube zrobiliśmy

11:10przy okazji maleńką poprawkę do wcześniejszego kodu i na

11:14tym etapie przerwiemy w kolejnej lekcji będziemy dalej kontynuować

11:18kodowanie tego headera