YouTube Deep Summary

Dzień dobry moi drodzy rok temu zostaliśmy z Kacprem poproszeni o przeprowadzenie warsztatów frontowych dla osób które dopiero zaczynają swoją przygodę z programowaniem jako że koronawirus wtedy szalał No to początkowo te warsztaty miały odbyć się w formie zdalnej w formie online owej zaczęliśmy więc nagrywać lekcje które chcieliśmy udostępnić naszym kursantom nagle okazało się że cytując klasyka jest w odwrocie już teraz nie trzeba się jego bać więc szkolenie odbyło się żywo odbyło się stacjonarnie No i materiały które nagraliśmy nie zostały wykorzystane ostatnio Pomyśleliśmy że pomimo tego że w internecie jest pełno darmowych kursów dotyczących HTML CSS generalnie tworzenia stron internetowych to szkoda by było żeby to co nagraliśmy po prostu się działo na dysku i się kurzyło zebraliśmy to więc do kupy zmontowali śmy I powstał ponad dwugodzinny film w którym od podstaw krok po kroku Tłumaczymy podstawy html z prezesa i tworzymy waszą pierwszą stronę internetową takie fajne online nowe CV wrzucamy potem do internetu co ważne te lekcje ten film powstał z myślą o osobach które dopiero zaczynają swoją przygodę z tworzeniem stron albo wogóle z programowaniem więc jeśli dopiero zaczynacie to bez obaw Jedyne czego potrzebujecie to tak naprawdę komputer i dostęp do internetu jako że film trwa ponad dwie godziny No to oczywiście nie musicie go oglądać całego naraz możecie zrobić sobie przerwę i wrócić do niego później żeby wam to ułatwić w opisie filmu umieściliśmy podział na sekcje więc jeśli tam sobie za oglądnięcie to zobaczycie zarówno agendy jaki poszczególne etapy kursu także możecie do niego spokojnie wrócić w przyszłości Dodatkowo w opisie filmu pod niektórymi lekcjami znajdziecie dodatkowe materiały i będą one wymagane do ukończenia konkretnej lekcji więc będziecie mogli po prostu pobrać klikając w link i jeszcze jedna ważna rzecz zanim kurs jest zawsze A jeśli ten kurs się wam do czegoś przyda jeśli nauczycie się czegoś dobrego albo po prostu jeśli uważacie że jest to fajny materiał to bardzo was prosimy zostawcie łapkę w górę pod filmem będzie to dla nas znak że to co zamontowaliśmy faktycznie komuś się przydało i powinniśmy kontynuować taką inicjatywę w przyszłości nagrywać więcej filmów tworzyć więcej materiałów dla was no i jeśli nie chcecie ich przegapić to oczywiście zapraszamy do subskrybowania kanału Wystarczy że kliknięcie ten przycisk pod filmem i dzięki temu w przyszłości Zobaczycie na stronie głównej po wejściu na YouTube Nasze filmy kiedy pojawią się na naszym kanale YouTube i gadki pora nauczyć się podstaw HTML i CSS a Serdecznie zapraszamy i z o.o zacznijmy naukę tworzenia stron internetowych w tym kursie Zbudujemy wirtualne CV przy użyciu języka html Niezależnie od tego w jakiej branży pracujemy z zawsze się przyda CV dostępne na stronie internetowej gotowe do przesłania każdemu to dopiero wypas podczas lekcji będę krok po kroku tworzył stronę w języku HTML tłumacząc dokładnie jak ten język działa zachęcam cię do tworzenia swojego cv na twoim komputerze naśladując to co robię dzięki temu połączysz teorię z praktyką i po ostatniej lekcji twoje CV będzie wirtualnym dowodem na to że znasz już podstawy HTML być może Widziałeś już kiedyś programistów w akcji na przykład filmach gdy włamują się do jakiejś tajnej bazy lub tworzą milionowe startupy zapewne zwróciłeś uwagę że to co robią to tak naprawdę pisać tekstu żeby zacząć naszą przygodę z programowaniem Otwórzmy więc dowolny edytor tekstowy jeśli korzystacie z Windowsa Może to być na przykład notatnik i jeśli pracujesz na macbooku to bez obaw możesz skorzystać na przykład z programu tekst Edit który działa bardzo podobnie do notatnika chciało Będziemy tworzyć CV A jak wiadomo w CV wypada umieścić imię i nazwisko ja wpiszę więc swoje Jak widzisz jestem Filip i bardzo miło mi cię poznać Okej ale jak możemy przemienić kawałek tekstów kod HTML w naszym notatniku wybierzmy opcję plik Zapisz jako wybierzmy folder w którym będzie przechowywana nasza strona ja w tym celu stworzyłem folder CV na pulpicie Nazwijmy nasz plik index index to powszechna nazwa dla pliku reprezentującego stronę internetową żeby zmienić nasz tekst w kod HTML Musimy zapisać plik z rozszerzeniem HTML rozszerzenie pliku ustawiamy zapisując po jego Nazwij kropkę i nazwę rozszerzenia w naszym przypadku zapiszemy więc nasz plik jako index.hr HTML nie przejmujemy się tym że Zapisz jako typ ustawione na dokument tekstowy Wystarczy że zapiszemy plik z poprawnym rozszerzeniem czyli index.hu atml zamknijmy notatnik i zerknij my teraz do folderu w którym go Zapisaliśmy żeby zapisać plik jako HTML na macbooku wybierzmy plik zachowaj I analogicznie jak na Windowsie nadajemy plikowi nazwę index Teraz jednak nie dodawałem rozszerzenia pokrowce zamiast tego jako format pliku wybierzmy strona www i kliknij my w zachowań przy pliku pomimo tego że znajduje się w nim zwykły tekst pojawiła się ikona przeglądarki internetowej dzieje się tak dlatego że dzięki rozszerzeniu HTML komputer rozpoznał Dany plik jako kod HTML komputer wieży język HTML jest używany do tworzenia stron internetowych stąd ikona przeglądarki Otwórz aspik otworzyła się nasze przeglądarkę i wyświetliła tekst który wcześniej dodaliśmy Gratulacje Właśnie patrzysz na swoją pierwszą stronę internetową na razie nie jest ona zbyt imponujące ale spokojnie z lekcji na lekcje będzie wyglądała coraz lepiej wiemy jak zapisać kot tak aby został zinterpretowany przez komputer jako strona internetowa ale co jeśli chcemy do niej dodać więcej treści po kliknięciu na plik index HTML otwiera się nasza przeglądarka nie notatnik i jak więc możemy zedytować ten tekst Wystarczy że klikniemy prawym przyciskiem myszy na pliku index HTML a następnie z opcji wybierzemy Otwórz za pomocą i z listy notatnik jeśli notatnik nie wyświetla się na tej liście to bez obaw wystarczy kliknąć w Wybierz inną aplikacje i wybrać notatnik z okna które się pojawi wprowadzimy teraz jakieś zmiany w pliku na przykład Dodajmy drugie imię żeby zmiany pojawiły się w przeglądarce musimy najpierw Zapisać plik HTML a następnie odświeżyć przeglądarkę i nasze zmiany są widoczne język HTML nie jest zatem taki straszny [Muzyka] do tworzenia stron potrzebne są więc jedynie edytor tekstowy i przeglądarka internetowa Niezależnie od tego z jakiego edytora tekstowego korzystacie będziecie w stanie rozwijać swoje umiejętności i uczyć się programowania notatnik spełnia swoje zadanie jednak chciałem cię zachęcić do skorzystania z nieco bardziej zaawansowanego edytora tekstowego pozwoli on na efektywniejsze pisanie kodu i rozwijanie projektu ten edytor to Visual Studio Code jest całkowicie darmowy i możesz go pobrać ze strony Visual Studio i zainstalować jak każdy inny program komputerowy link do tej strony widzisz na ekranie znajdziesz go również w opisie lek kiedy niezależnie od tego czy korzystasz z MacBooka Czy Windowsa praca z Visual Studio Code wygląda tak samo ja Visual Studio Code mam już zainstalowany na swoim komputerze jest więc gotowy do użycia Otwórzmy go po pracy z notatnikiem Pierwszą rzeczą która od razu rzuca się w oczy są ciemne kolory Visual Studio Coke wielu programistów korzysta właśnie z takiej stylistyki edytora ponieważ białe tło niezwykle męczy i moczy wpisanie kodu przez kilka godzin dziennie jest dla nich i szczerze mówiąc dla mnie również znacznie wygodniejsze kiedy Korzystając ciemnej palety kolorów Jeśli wolisz pracować w jasnym edytorze możesz zmienić kolor w ustawieniach Wystarczy że klikniesz w zębatkę w lewym dolnym rogu i Wybierz z listy kolor film następnie wystarczy kliknąć w opcję Lite Theme pewnie Jak już wspomniałem osobiście preferuję ciemniejsze kolory więc wrócę do nich ponownie wybierając zębatkę kolor film i opcję Dark ilość widocznych przycisków na ekranie Może być dla ciebie przytłaczająca ale spokojnie nie przejmuj się nimi na ten moment zaczniemy od podstawowych funkcji a pozostałe będziemy poznawali zbiegiem kursu wybierzmy W lewym górnym rogu File a następnie Open folder przejdźmy do folderu który zawiera nasz plik index HTML po otwarciu tego folderu kliknij my Wybierz folder po lewej stronie naszego edytora pojawiła się teraz lista widzimy na niej plik index HTML który znajduje się ją w otwartym przez nas folderze po kliknięciu na niego tekst który Wpisaliśmy w poprzedniej lekcji pojawił się po prawej stronie możemy więc z tego miejsca edytować znasz kod HTML na ten moment lista po lewej nie będzie nam potrzebna zwinny ją klikając w podświetlaną na biało Icon lewym górnym rogu super Jesteśmy gotowi do pisania kodu HTML Visual Studio Code z lekcji na lekcje Będziemy poznawać coraz więcej możliwości tego świetnego edytora żeby uniknąć ciągłego przeskakiwania pomiędzy stroną edytorem zmniejszymy okno w którym znajduje się edytor to wielkości mniej więcej połowę ekranu drugą połowę ekranu Wykorzystajmy do umieszczenia na niej okna przeglądarki dzięki temu pisanie kodu HTML i sprawdzenie efektów w przeglądarce Będzie znacznie wygodniejsze i szybsze jak widzicie korzystam z przeglądarki Google Chrome Jeśli wolisz korzystać z innej nie ma problemu nasza strona będzie działała na każdej przeglądarce Jednak jeśli nie masz preferencji to zachęcam cię do pobrania i zainstalowania Google Chrome będzie ci łatwiej zrozumieć co dzieje się na ekranie jeśli będziemy korzystać z tej samej przeglądarki link znajdziesz na ekranie oraz w opisie lekcji okej nasz edytor i przy Wracam już całkowicie gotowe do tworzenia strony [Muzyka] strony internetowe które znamy to nie tylko czysty tekst są one podzielone na elementy zwane tagami korzystanie z targów jest bardzo podobne do używania zwykłych nawiasów taki zaczynają się od otwarcia które tworzymy wpisując nawias strzałkowy i nazwę taka w środku po otwarciu wpisujemy treść Czyli to co chcemy pokazać w naszej stronie po treści używamy zamknięcia wygląda ono podobnie do otwarcia jednak przed nazwą taką musimy dodać ukośnik stworzony Tak możemy umieścić w naszym kodzie HTML w tej lekcji poznamy tak o nazwie H1 ha to skrót od angielskiej nazwy hering czyli nagłówek Wróćmy teraz do naszego kodu stwórzmy więc tak o nazwie H1 którego treścią będzie nasze imię i nazwisko najpierw wpisujemy otwarcie taką używając nawiasów strzałkowych i nazwy tagu H1 otwarcie taką musi zostać pisane przed treścią treść jest już gotowa pozbędę się z niej jednak mojego drugiego imienia jestem do niego totalnie nieprzyzwyczajony następnie po treści wpisujemy zamknięcie tagu pamiętajmy oddaniu ukośnika Dzięki niemu przeglądarka wie że tak został zamknięty zapiszemy pliki odświeżamy naszą stronę w przeglądarce naszej imię i nazwisko wygląda teraz nieco inaczej tekst jest większy dzieje się tak dlatego że omineliśmy go w takich a1a jak pamiętamy nazwa Ta symbolizuje nagłówek dla przeglądarki jest to znak że tekst który znajduje się w tym targu powinien zostać wyświetlony właśnie jako nagłówek A jak wiemy nagłówki Czytam w gazetach czy na stronach internetowych wyróżniają się wielkością przeglądarka przepisuję więc tekstowi większy rozmiar czcionki dodatkowo pomimo dodanie nowego tekstu do naszego kodu po rozpoznaniu tagu przeglądarka nie wyświetla na naszej stronie tekstu H1 strzałkowych nawiasach widzimy tylko treść które znajduje się pomiędzy otwarciem i zamknięciem tego i właśnie na takiej zasadzie działają tagi wydzielają one elementy na stronie i dają znać przeglądarce w jaki sposób treść powinna zostać wyświetlona pewnie zwróciłeś uwagę że nazwy tak w nawiasach strzałkowych wyświetlane są innym kolorem iż treść w środku tagu to zasługa Visual Studio Code edytor rozpoznaje że plik który edytujemy zawiera kod HTML i taki nie są po prostu tekstem takie wizualne wskazówki są niezwykle przydatne przy zwiększającej się ilości kodu A tak się składa że w następnych lek ich ilość kodów zwiększy się znacznie [Muzyka] nasza strona ma już nagłówek Dodajmy do niej więcej treści CV powinno również zawierać informacje o naszym zawodzie umieścimy ją pod nagłówkiem do prezentowania zwykłego krótkiego napisu który nie musi być specjalnie wyróżniony używa się tagu o nazwie span Dodajmy więc nasz zawód w środku tak uzyskany pamiętając o zasadach które poznaliśmy w poprzedniej lekcji z zaczynamy od otwarcia nawiasów strzałkowych wpisujemy w nich nazwę tagu czyli w naszym przypadku span a następnie Zamykamy nawias po otwarciu tak Dodajmy treść którą chcemy umieścić w środku zawód który wykonuję to front-end developer i właśnie taki tekst Piszę po otwarciu pozostało nam zamknięcie taką pamiętaj głośniku Zapisz plik i otwieramy przeglądarkę Jak widzimy pod imieniem i nazwiskiem pojawił się tekst o mniejszym rozmiarze reprezentującym nasz zawód przy okazji czym właściwie jest front-end w dużym skrócie front-end to dziedzina programowania która zajmuje się tworzeniem wizualnej warstwy aplikacji czy też stron internetowych HTML jest prawdziwym fundamentem pracy frontendowe i dlatego Jeśli chciałbyś pójść w moje ślady i również zostać frontem deweloperem jesteś we właściwym miejscu Wróćmy do naszego kodu CV powinno zawierać również krótką notkę opisującą naszą osobę do tego zadania idealnie nadaje się tak b skrót p oznacza paragraf lub inaczej akapit podobnie jak z pan te jest przeznaczony do wyświetlania standardowego nie wyróżniającego się tekstu jednak tekst który zawieramy w tak up zazwyczaj stosunkowo długi dodajemy nasz tak b i umieścimy w nim krótką notkę o sobie Ja tę nockę mam już przygotowaną więc po prostu wklej ją do edytora następnie zapiszemy plik i odświeży stronę informacje o naszej osobie wyświetla się jak najbardziej poprawnie co ciekawe tekst który wpisujemy w środku taką nie musi znajdować się w tej samej linii co jego otwarcie i zamknięcie rozpalimy więc naszą przy długą informacje na kilka linii Zapisz zmiany i odświeży stronę Jak widzimy rozbijanie tekstu na więcej linii w kodzie nie powoduje rozbicia go na więcej linii na wyświetlanej stronie przeglądarka pokazuje taki tekst ciągle w jednej linii dzięki temu uczyniliśmy nasz kot znacznie czytelniejszy mi pozbyliśmy się z niego długiego i jedną linijkę owca dopóki otwarcie tak czuje się przed treścią zamknięcie po treści to tak jest użyty w poprawny sposób spacja enter jego nie popisują a jedynie ułatwią nam patrzenie na kod warto ich więc używać co więcej HTML pozwala nam na umieszczanie tagów w środku innych targów Wyobraźmy sobie że chcemy pogrubić imię w paragrafie żeby to osiągnąć wszystko co musimy zrobić to objąć imię w tak b Dzięki takiemu tego V przeglądarka wierze objęty tekst powinien być wyróżniony dlatego pogrubia tekst działa to na podobnej zasadzie jak pogrubienie tekstu w programach typu OpenOffice Stone różnicą że zamiast zaznaczyć tekst i kliknąć w ikonę pogrubienia to w naszym kodzie obejmujemy tekst we wspomniany tak B po zapisaniu i odświeżeniu strony widzimy że nasze imię zostało pogrubione to ciągłe zapisywanie robi się nieco uciążliwe nieprawdaż Score nie więc dobrodziejstw Visual Studio Code żeby nieco ułatwić sobie życie kliknij my zębatkę a następnie Wejdźmy w serii X i wyszukaj my opcje auto Save zmienimy jej wartość na on Windows Change dzięki temu nasze pliki zostaną automatycznie zapisany po tym jak klikniemy w okno i inne niż to zawierające Visual Studio Code dla potwierdzenia dodajemy jakieś zmiany w naszym tekście ale nie zapisujemy pliku kliknij My natomiast na przycisk odśwież w naszej przeglądarce zmiany są widoczne nie będziemy musieli dzięki temu zapisywać naszych plików za każdym razem kiedy będziemy chcieli coś sprawdzić Sorry ale wracając do naszego CV powinniśmy w nim umieścić też takie informacje jak doświadczenie zawodowe wykształcenie i zainteresowania Dodajmy teraz kolejne nagłówki reprezentujące detekcję pamiętamy że tak którego używamy do tworzenia nagłówków to H1 po odświeżeniu widzimy na naszej stronie że nowe nagłówki się pojawiły patrząc na czytelność naszego CV Byłoby dobrze gdyby nagłówek na górze był głównym nagłówkiem i miał większy rozmiar od pozostałych jak już wiemy nazwa taką H1 wzięła się od słowa hering jednak Co oznacza 11 to rozmiar nagłówka przeglądarka rozpoznaje sześć różnych tagów ha H1 H2 H3 h4 H5 H6 Im większa liczba tym mniejszy rozmiar nagłówka użyjmy więc taką H2 dzięki temu nazwy sekcji będą miały mniejszy rozmiar niż główny nagłówek No wygląda to dużo lepiej [Muzyka] nagłówki naszych nowych lekcji są już gotowe zacznijmy dodawać pod nimi treść na początek zajmiemy się sekcją doświadczenie zawodowe powinniśmy tutaj umieścić listę stanowisk na których pracowaliśmy wraz z nazwą firmy i okresem zatrudnienia spróbujmy więc pisać w osobnych liniach te informacje W moim przypadku doświadczenie zawodowe to dwie firmy w których pracowałem jako front-end developer Jak pamiętamy z poprzedniej lekcji enter nie są wyświetlane na stronie po odświeżeniu strony widzimy więc że informacje zlewają się w jedną linię Żeby je od siebie oddzielić możemy użyć znanego nam już up jego użycie skutkuje oddzieleniem bloku tekstu więc informacje zostaną rozbite na dwie linie istnieje jednak para targów która jest wręcz stworzona do wyświetlania informacji w liście mowa o tagach l i oraz URL tak i oznacza list-item więc idealnie nadaje się do reprezentowania naszej informacji najpierw zastąpimy nasze tak IP Tagiem Eli następnie oba tagi obejmy Tagiem ul Jak pamiętamy dodawanie tego w środku innych Targów jest jak najbardziej możliwe musimy jedynie pilnować ich poprawnego otwierania i zamykania może się to wydawać teraz czasochłonne i uciążliwe jednak z biegiem czasu wyrobimy sobie nawyk poprawnego pisania kodu HTML Trening czyni mistrza po odświeżeniu strony widzimy że przeglądarka nadała naszej liście specyficzny wygląd poprawiający czytelność naszej strony jest coraz bogatsze a co za tym idzie zwiększa się również ilość kodów naszym pliku warto więc zadbać o jego czytelność praca z uporządkowanymi czytelnym kodem jest Jak praca przy dopiero co posprzątane biurku czy warsztacie jest znacznie przyjemniejsza i efektywniejsza prawda jedną z dobrych praktyk poprawiających czytelność kodu HTML jest używanie zagnieceń fragów na stronie którą tworzymy [Muzyka] zajmijmy się teraz sekcją wykształcenie będzie ona wyglądała podobnie do sekcji doświadczenie zawodowe znajdującej się w wyżej użyjemy zatem ponownie taką Fuel oraz Eli żeby dodać informacje o naszym wykształceniu najpierw Dodajmy tak ul Pod nagłówkiem wykształcenie następnie zagnieść my w nim jeden element i wpisz my w nim okres nauki nazwę uczelni bądź szkoły i kierunek Na jakim się uczyliśmy dodajemy pozostałe elementy reprezentujące nasze etapy edukacji po odświeżeniu przeglądarki dane informacje wyświetlają się jako lista jak widzicie Studiowałem na Politechnice Krakowskiej i byłoby świetnie dodać jakieś dodatkowe informacje na temat tej uczelni HTML daje nam możliwość umieszczenia w naszym podzielić tutaj innych stron umieść my więc w naszej liście link do strony uczelni żeby to zrobić użyjemy tagua jego Nazwa pochodzi od angielskiego słowa ale czyli kotwica tak a jest więc pewnego rodzaju kotwicą do innej strony owiniemy nazwę uczelni w tak a podobnie jak robiliśmy to z tagami b i span Jak sprawić żeby po kliknięciu w elementa otworzyła się inna strona internetowa przede wszystkim potrzebujemy adresu tej zewnętrznej strony Wyszukaj my więc w Google adres uczelni i skopiuj jego skopiowany adres musimy przekazać do elementu a żeby to zrobić wykorzystamy atrybut atrybut to nic innego jak dodatkowa informacja przekazywana do elementu czy tagu używamy jej w następujący sposób w otwarciu taką wpisujemy najpierw nazwy atrybutu A w przypadku linku do innej strony ta nazwa to HF następnie przypisujemy mu wartości żeby to zrobić po nazwie atrybutu używamy znaku równa się i podajemy w cudzysłowie nasz link atrybut HF przyjmuje Więc wartość rynku Jak widzimy przeglądarka zmienia wygląd napisu Politechnika Krakowska jest on teraz niebieski i podkreślony przez co intuicyjnie wiemy że jest on linkiem w którym możemy kliknąć po kliknięciu w link zostaniemy przeniesieni na stronę uczelni nauczyliśmy się więc jak możemy na naszej stronie dodawać odnośniki do innych stron internetowych co jest bardzo Ważną umiejętnością dodajemy link do strony mojego liceum dla treningu i sprawdźmy czy działa nasza strona wygląda coraz lepiej przy okazji jak widzicie moje wykształcenie nie ma nic wspólnego z programowaniem zaczynałem swoją przygodę z kodem wieku 2 stu trzech lat od źródeł dostępnych w internecie jeśli martwicie się więc że programowanie nie jest dla was bo nie robiliście tego od małego to bez obaw każdy czas jest dobry żeby zacząć naukę [Muzyka] CV zawiera już sporo informacji na nasz temat żeby dać się lepiej poznać dodajemy zdjęcie przy nagłówków w pierwszej kolejności Przygotujcie swoje zdjęcie najlepiej żeby było ono kwadratowe jeśli nie chcecie używać swojego zdjęcia możecie wykorzystać przykładowe zdjęcie dostępne do pobrania pod wideo tej lekcji umieścimy zdjęcie w naszym folderze roboczym klikając prawym przyciskiem myszy na obrazku i wybierając opcję Zapisz obrazek jako Zapisz mi zdjęcie w tym samym miejscu w którym znajduje się plik index HTML przy okazji jeśli klikniemy w ikonę w lewym górnym rogu Visual Studio Code to zauważymy że na liście wyświetla się plik który właśnie dodaliśmy z jeśli zdjęcie jest już pobrane i gotowe do użycia to przejdźmy do dodania go w naszym kodzie w tym celu wykorzystamy tak IMG czyli lecz dodajemy go nad Tagiem H1 żeby połączyć tak ze zdjęciem które znajduje się w naszym folderze użyjemy atrybutu SR co jest skrótem od Source czyli z angielskiego źródło z poprzedniej lekcji pamiętamy że przypisujemy wartość do atrybutu poprzez wpisanie nazwy atrybutu oraz wartości w cudzysłowie w przypadku atrybutu Source działa to na podobnej zasadzie jak atrybut have tak Acha Jednak zamiast podawać link do strony internetowej podajemy nazwę pliku ze zdjęciem w otwarciu tego ING wpisujemy więc serce równa się Default myślnik Avatar kropka PNG bo właśnie taka jest nazwa naszego pliku który pobraliśmy Zwróćmy uwagę że w nazwie musimy podać również rozszerzenie pliku czyli w naszym przypadku www.pgnig.pl świeże nie widzimy że obrazek pojawił się na naszej stronie i jest on jednak ogromny żeby ograniczyć jego wymiary użyjemy kolejnych atrybutów taguj mgr with i Hyde możemy Dzięki nim zmniejszyć rozmiar obrazków na stronie nawet jeśli w rzeczywistości obrazki są dużo większe jak Łatwo się domyślić atrybutów w określa szerokość zdjęcia Aha i jego wysokość dodawanie wielu atrybutów do jednego tego jest bardzo proste jedyne o czym Musimy pamiętać to oddzielenie ich odstępami niech nasz obrazek będzie miał wymiary 150 pikseli na 150 pikseli po atrybucie serce wpiszemy więc kolejny o&w równe 150x serii oraz Hyde równe 150 pikseli i jednostki w pikselach zapisujemy używając skrótu PX i odświeżyć stronę zobacz jak widzimy obrazek się zmniejszył i z ze zdjęciem prezentuje się znacznie lepiej w odróżnieniu od wszystkich ptaków których używaliśmy do tej pory tak IMG nie ma w środku żadnej treści dzieje się tak dlatego że Jego zadaniem jest wyświetlenie obrazka zewnętrznego który łączymy z Tagiem za pomocą atrybutu SRC Nie musi on więc wyświetlać dodatkowej treści zapis bez teściowych tagów możemy uprościć w następujący sposób pozbywamy się zamknięcia tagu a ukośnik umieszczamy na końcu otwarcia zaraz przed strzałkowym nawiasem w prawo po odświeżeniu strony widzimy że pomimo skróconego zapisu obrazek Działa tak samo jak już wiemy im czytelniejszy kot tym lepiej Dlatego tej pory będziemy używać taką ING właśnie w ten sposób [Muzyka] poznaliśmy już podstawy HTML języka który pozwala nam dodawać jeszcze oraz budować szkielet naszej strony internetowej jednak jak widzicie CD nie przypomina na razie żadnej ze znanych nam stron jest czarno-białe i w wyglądzie podobne raczej do dokumentu tekstowego tworzonego na kursie Worda w kolejnych lekcjach poznamy język CSS pomoże on nam nadać naszej stronie lepszy wygląd CSS z angielskiego cascading Style sheets jest językiem który pozwala nam do szkieletu strony HTML dodać nową warstwę wizualną Ale co to tak naprawdę znaczy wspominałem już o tym że Studiowałem budownictwo prawda Wyobraźmy sobie że strona zapisana w języku HTML to świeżo wybudowany dom składający się jedynie z gołych ścian na upartego można w nim mieszkać jednak nie będzie to spełnienie naszych estetycznych marzeń CSS jest dla języka html tym czym dla domu są farby dachówki piękna stolarka i ozdoby cały ten zestaw sprawia Bytom wygląda znacznie przyjemniej zerknij na naszą stronę wszystkie zmiany które zaraz zobaczycie zostały osiągnięte przy użyciu języka CSS będziemy dokonywać krok po kroku w następnych lekcjach przy użyciu CSS możemy zmieniać takie rzeczy jak kolor i wielkość napisów rodzaje czcionek tła elementów czy pozycję elementów na ekranie CSS jest tą składową która powoduje że nasza strona staje się czytelniejsze a i bardziej atrakcyjna wizualnie kod CSS może być swobodnie łączony z kodem HTML nauczymy się teraz Jak łączyć te dwa języki Zacznijmy od czegoś prostego i ustawny kolor napisami reprezentującą nasz zawód pamiętacie atrybuty prawda aby szybko dodać Style do elementu span reprezentującego nasze stanowisko użyjemy atrybutu Style wpisujemy więc w otwarciu tak ustalone Style równa się cudzysłów Style które przekazujemy przez atrybut składają się z reguł regułę zapisujemy w następujący sposób najpierw wpisujemy nazwę własności CSS następnie dwukropek a po nim wartość w ten sposób nadajemy danej własności CSS pewną wartość przykładowo reguła odpowiadająca za zmianę koloru będzie wyglądała tak najpierw nazwa wartości Czyli kolor następnie dwukropek i wartość wpisana oczywiście po angielsku czyli na przykład Red Color napisów ustawiamy używając reguły o nazwie kolor po regule wpisujemy dwukropek a po nim wartość na przykład kolor Grey przejdźmy do przeglądarki i Sprawdźmy co się stało kiedy widzimy szary napis Gratulacje Właśnie użyliśmy CSS po raz pierwszy nauczmy się kolejnej właściwości CSS Forces pozwala ona nam ustawić wielkość napisów powiększymy nieco nasze nagłówki żeby to zrobić Dodajmy do tego H1 atrybut Style i regułę font-size 36 pikseli dla każdego z nagłówków H2 ustawmy natomiast font-size równy 28 pikseli ścięło odświeżeniu strony widzimy że nagłówki są jeszcze większe niż poprzednio dzięki czemu odpowiednio się wyróżniają Dzięki CSS Wiemy już jak dowolnie kontrolować kolor i rozmiar tekstu na naszej stronie zmiany wizualne które wprowadziliśmy nie są jeszcze zbytnio imponujące ale spokojnie to dopiero początek [Muzyka] WOW już sporo materiału za nami Pamiętaj że jeśli coś sprawia ci problem to w każdej chwili możesz stosować lub cofnąć wideo żeby spróbować przetworzyć nowe informacje jeszcze raz na początku swojej przygody z programowaniem Byłem przerażony Bo każda lekcja wydawała się bardzo trudna Jeśli masz podobne odczucia to chciałem cię uspokoić i dzieci świetnie z biegiem czasu zobaczysz że rzeczy które teraz są dla ciebie niezrozumiałe i sprawiają ci kłopot halo się oczywiste potrzeba jedynie trochę cierpliwości i praktyki Zresztą Spójrz na nasz kot zaczynaliśmy od imienia i nazwiska w dokumencie tekstowym a teraz mamy już coraz lepiej wyglądającą stronę i poznaliśmy solidne podstawy HTML Może być tylko lepiej w poprzedniej lekcji nauczyliśmy się jak zmieniać kolor i ustawiać wielkość napisów w przypadku taką H2 musieliśmy wpisywać Style aż trzy razy łatwo się przy tym pomylić dodatkowo jeśli chcielibyśmy teraz zmienić wielkość napisów taka H2 musielibyśmy dokonywać zmian w trzech miejscach dodawanie tych samych styli do każdego elementu jest więc potwornie nużące w rzeczywistości reguły CSS dodaje się do strony internetowej w nieco inny sposób żeby go wykorzystać zacznijmy oddania przeglądarce informacji że korzystamy z języka html wersji standardowej samouzdrawianie rozszerzenia pliku na kropka HTML niestety nie jest wystarczające Witam serdecznie zacznijmy więc od zmodyfikowania naszego kodu w pierwszej linii w piszemy teraz następujący tekst w nawiasach strzałkowych wykrzyknik doctype HTML mimo że ta linijka jest podobna do tagu to akurat nie jest to język HTML jest to specjalny napis nazwany deklaracjom Dzięki tej deklaracji unikniemy problemów z wyświetlaniem naszej strony na niektórych przeglądarkach nasza strona korzysta więc teraz HTML wersji standardowej Musimy przygotować resztę naszej strony do efektywniejszego wykorzystania z języka CSS zaczniemy więc objęcia wszystkich tak w na stronie w główny tak HTML pamiętajmy że deklaracja doctype nie jest Tagiem nie posiada więc zamknięcia otwarcie tagów HTML umieszczamy zaraz za nią zamknięcie tego HTML Dodajmy na samym dole dodatkowo skoro nasze pozostałe taki znajdują się teraz wewnątrz taka html Dodajmy wcięcia nie musimy tego robić linijka po linijce Wystarczy że zaznaczymy cały tekst i naciśniemy Tab Dzięki dodaniu tego HTML podjęliśmy tak od deklaracji doctype HTML strona nie składa się jednak tylko i wyłącznie z targów reprezentujących treść do strony internetowej możemy dodać również wiele innych informacji zwanych metadanymi metadane to Innymi słowy dane o treści są to takie dane które nie wpływają bezpośrednio na treść strony ale mogą się okazać użyteczne dla przeglądarki lub wyszukiwarek typu Google do metadanych możemy zaliczyć tytuł strony który zobaczymy w zakładce domyślny język strony czy na przykład dane kontaktowe do autora strony umieszczamy je w specjalnym tagu head który dodajemy zaraz po otwarciu tagów HTML sekcja hetma jedną reguły której musimy przestrzegać Musi ona zawierać w sobie tak title który powie przeglądarce jaki jest z naszej strony i wyświetli go w zakładce Zwróćmy uwagę że przez brak tak tutaj to obecnie tytuł naszej strony wyświetlany na zakładce to index shtml czyli nazwa naszego głównego pliku Dodajmy teraz ten tag title i wpisz my w nim tytuł naszej strony a więc imię nazwisko CV po odświeżeniu strony widzimy że zakładka przeglądarki ma teraz dokładnie taki tytuł dodaliśmy więc tak head w którym umieszczamy składniki naszej strony niebędącej treścią wyświetlaną na ekranie treść wyświetlana na ekranie reprezentowana jest przez poprzednią dodane przez nas tagi aby oddzielić je od tagged owiniemy jest tak boli również musimy pamiętać obciach Podzieliliśmy więc naszą stronę w elegancki sposób na tak head który zawiera metadane oraz tak bardziej zawierający treści naszego CV żeby zapamiętywanie kolejny tych targów Przyszło nam lepiej Wyobraźmy sobie ludzkie ciało z głową na górze i resztę ciała na dole To właśnie stąd wzięły się nazwy tych targów dodatkowo sekcji head używamy aby powiedzieć przeglądarce gdzie powinno szukać styli CSS dla naszej strony żeby to zrobić musimy dodać do head tak style w jego wnętrzu możemy wpisać reguły CSS w końcu możemy wrócić do naszego głównego problemu Czyli dodawania tej samej reguły CSS wszystkim na główką H2 na stronie zgodziliśmy się już że jest to czasochłonne i nużące chcielibyśmy aby każdy z nagłówków H2 na naszej stronie miał rozmiar 28 pikseli aby to osiągnąć użyjemy selektora Czym jest selektor Jest to napis w języku CSS który mówi przeglądarce do których elementów ma zastosować wybrane przez nas Style umieszcza się go wewnątrz tagu Style wewnątrz tak wstaję piszemy więc selektor h2x chcemy wycelować l pycha 2 Zwróćmy uwagę że podajemy tutaj tylko nazwę targu nie musimy dodawać ostrych kwadratów tworzących tagu następnie wpisz mi klamrę otwierającą i zamykająca mną teraz wpisujemy znaną nam regułę font-size dokładnie tak jak robiliśmy to w tagu H2 regułę kończymy średnikiem skoro dodaliśmy style w naszym tagged możemy usunąć że atrybuty stylestars H2 artykuł to przejdźmy teraz do przeglądarki widzicie co się stało napisaliśmy w CSS że chcemy aby wszystkie takich A2 miały 28 pikseli i mają wybranie wszystkich elementów h2w tagu Style i przypisanie do nich styli dało dokładnie taki sam efekt jak dodawanie styli poprzez atrybuty w HTML dla pewności sprawdźmy czy stylu umieszczone w tagged działają i zmienimy rozmiar H2 na przykład na 12 pizzerii po odświeżeniu przeglądarki widzimy że nagłówki H2 znacząco się zmniejszyły Style umieszczone wh2 działają Więc jak najbardziej poprawnie co więcej zmian we wszystkich nagłówka H2 możemy teraz dokonać zmieniając reguły CSS tylko w jednym miejscu udało nam się więc osiągnąć to co chcieliśmy przywróćmy teraz taką H2 poprzedni rozmiar Zamiast wpisywać zmiany możemy po prostu je cofnąć jak w każdym edytorze tekstowym gdy mamy Jednak teraz trochę bałaganu wschodzie część serii dodaliśmy przy użyciu selektora a część przy użyciu atrybutu Style HTML Sprawdźmy to zacznijmy od tego H1 podobnie jak przyjechała 2 piszemy w tagu stają selektor H1 klamry a w środku regułę font-size 36 pikseli usuńmy Style z tego h1 w naszym budynku teraz zajmiemy się takim span wpisujemy selektor z nazwą taką czyli span ponownie klamry i reguły odpowiadającym za kolor z targu Sponge Bob i Usuń My Style przypisane w atrybucie po odświeżeniu strony widzimy że wygląda ona dokładnie tak samo jak na początku lekcji Teraz jednak dzięki tego v-style odseparować liśmy nasze style od elementów HTML taki zapis jest znacznie czytelniejszy i prostszy w rozwijaniu kodu w [Muzyka] poprzedniej lekcji nauczyliśmy się jak wpisywać CSS w tak ustawił Dzięki niemu odseparować liśmy warstwę wizualną od treści strony nasz tak IMG ciągle korzysta jednak z atrybutów i Hyde które wpływają na jego wygląd skoro wpływają na wygląd strony to powinny się znaleźć w sensie usuniemy jest HTML i Dodajmy do naszych styl i wpisz my więc selektor ING Dodajmy klamry i Dodajmy następujące reguły with opisującą szerokość oraz Hyde opisującą wysokość Zapisz myje w osobnych liniach Zwróćmy uwagę że w odróżnieniu od atrybutów HTML tutaj w celu przypisania wartości używamy dwukropka a nie znak równości dodatkowo wartości nie są wpisywane w cudzysłowach po odświeżeniu strony widzimy g-style przypisane do obrazka mają być może zastanawiałeś się do czego służą średniki ich zadanie to oddzielenie reguł CSS dzięki czemu do jednego selektora można przypisać wiele reguł Zobaczmy co się stanie kiedy usuniemy średniki po odświeżeniu strony widzimy g-style dlatego ING przestały działać Visual Studio Code jest bardzo inteligentnym narzędziem i wychwytuje podobne błędy Jak widzimy podświetlane na czerwono miejsce w którym popełniliśmy błąd i mówi W czym jest problem wystarczy najechać na czerwone podświetlenie semikolon expected średnik wymagany Dodajmy więc średnik na końcu obu linii czerwone podkreślenie znika na strona po odświeżeniu wraca do normalnego stanu informacje wyświetlane w Visual Studio Code są więc często niezwykle pomocne nasz tak stają zawiera coraz więcej linii Aby łatwiej nam było pracować Przenieśmy nasze style do innego pliku repliki nie będą tak szybko rosnąć oraz kod HTML nie będzie wymieszany z kodem CSS w pierwszym kroku stwórzmy nowy plik CSS moglibyśmy to zrobić przechodząc do naszego folderu jednak jest szybszy sposób ponownie z pomocą przychodzi nam Visual Studio Code rozwijamy listę po lewej i kliknij w przycisk Nie ufaj ale w polu które nam się pojawiło wpisz mi nazwę nowego pliku CSS żeby stworzyć plik CSS podobnie jak w przypadku plików HTML musimy dać mu odpowiednie rozszerzenie Nazwijmy więc plik style.com ssp2ilawa się na liście możemy swobodnie poruszać się między plikami klikając w zakładkę znajdujące się nad kodem Wróćmy do pliku html is kopiujemy całą treść tagu Style następnie przejdźmy do pliku style.css i wklej myją plik ze stylami jest gotowy ale jak połącz aż plik CSS z naszym plikiem HTML najpierw Wróćmy do pliku html sam tak Style nie będzie nam już potrzebne możemy go usunąć w sekcji head musimy dodać bez treściowy tak link Pamiętajcie że bez treściowe taki takie jak ING nie potrzebują zamknięcia nazwa Ta guling pochodzi od html5 trener Resource link jak sama nazwa wskazuje tak link jest linkiem dzięki któremu możemy połączyć znasz kod HTML zewnętrznym zasobem w naszym przypadku chcemy połączyć HTML z plikiem styl żeby poinformować o tym przeglądarkę Dodajmy do tego linka atrybut Real równy start Real mówi przeglądarce jakiego typu zawartości ma się spodziewać Astrid to z angielskiego arkusz styli dodatkowo musimy również przekazać do tego link ścieżkę do pliku ze stylami aby to zrobić użyjemy atrybutu hf-e podamy nazwę pliku czyli style.com s gdy przeglądarka interpretuje więc link następująco Połącz HTML zewnętrznym źródłem które jest arkuszem styli arkusz styli znajduje się w pliku style.css po odświeżeniu strony nie widzimy żadnych zmian Jednak ponownie udało nam się uczynić nasz kot czym poprzez rozdzielenie kodu HTML i CSS na osobne pliki w stronach internetowych tworzonych przez zawodowych frontem deweloperów właśnie w ten sposób tworzy się warstwę wizualną i warstwę treści [Muzyka] nasze CV wyglądałoby zdecydowanie lepiej gdybyśmy zamiast domyślnego funta czyli kroju pisma użyli ariala być Może znacie kogoś z popularnych programów tekstowych Arial jest przyjemny dla oka i dobrze wygląda na stronach internetowych font danego elementu możemy zmienić przy użyciu CSS Przejdźmy więc do naszych typ pliku Style aby zmienić font dla danego elementu musimy użyć reguły font-family jako jej wartość będziemy podawali Ariel zaczynamy od h2i h1 i dodajemy w nich regułę font-family Arial następnie to samo zróbmy w stylach elementów span ING nie posiada żadnego tekstu nie musimy więc zmieniać mu font Family z Zobaczmy efekty w przeglądarce widzimy że font zmienił się na elementach H1 span eh2 jednak paragrafy i listy mają jeszcze stary font dopiszemy więc Style dla tych elementów po odświeżeniu wszystkie napisy na stronie mają już nowy ładniejszy font uzyskaliśmy efekt który chcieliśmy jednak czujesz że coś jest nie tak prawda jeśli pamiętasz przypisywanie styl do każdego elementu przez atrybuty było dość nieefektywne teraz przypisujemy ten sam styl do wielu różnych elementów na szczęście istnieje sposób na zapisanie reguły font-family w jednym miejscu tak aby zadziałała dla wszystkich elementów to żeby to osiągnąć najpierw cofnijmy wszystkie zmiany które zrobiliśmy w tej lekcji do momentu w którym nasz plik style.css nie zawierał jeszcze żadnej reguły font-family następnie na samej górze plików dodajemy selektor Barbie jak pewnie się domyślasz dzięki temu określimy Style dla tak bawi w klamrach firmy regułę font-family Arial po odświeżeniu widzimy że wszystkie elementy na naszej stronie mają ciągle zmieniony funt jak to się stało przecież dodaliśmy reguły tylko dla jednego selektora spróbujmy sobie wyobrazić strukturę HTML jako drzewo genealogiczne tak bardziej obejmuje wszystkie taki jest On więc rodzicem dlatego wh1 span ul i tak dalej dodatkowo tagi ul sam rodzicami targów Eli ataki Eli rodzicami targów A właśnie dodaliśmy dlatego body i regułę font-family Arial oznacza to że font-family tak Buddy zmieni się na Arial ale co z jego dziećmi wnukami i prawnukami okazuje się że niektóre reguły CSS są dziedziczone podobnie jak w prawdziwym drzewie genealogicznym jeśli Dziadkowie mieli rude włosy to dziecko i wnuki też będą mieli rude włosy wstecz oczywiście jest to duże uproszczenie na potrzeby wytłumaczenia CSS Zdaję sobie sprawę że nie jest to takie proste w naturze podobnie jak kolor włosów reguła font-family również jest dziedziczona oznacza to że po ustawieniu font-family tragedii Wszyscy jego potomkowie przejmą tę wartość i właśnie to stało się na naszej stronie Innym przykładem reguły która jest dziedziczona jest kolor ustawy więc dla testu kolor Red vbga.de Zobaczmy co się stało po odświeżeniu strony widzimy że wszystkie elementy na naszej stronie mają teraz kolor czerwony Zaraz wszystkie oprócz elementu span z naszym zawodem i linków na naszej No cóż element span ma również określony kolor w naszym kilku style.css prawda nie jeśli Wyobraźmy sobie to na naszym drzewie genealogicznym to span po prostu napisał geny swojego rodzica gdyby pan miał dzieci One odziedziczyły szary a nie czerwony kolor Natomiast w przypadku linków to przeglądarka nadała im niebieski kolor dziedziczenie w CSS jest więc bardzo podobne do dziedziczenia w prawdziwym życiu Zobaczcie jakie to wygodne możemy używać jednej reguły a stresować ją dla wielu elementów ułatwia to pracę zmniejsza ilość kodu A jeśli będziemy potrzebowali go zmienić zmieniamy tylko w jednym miejscu i otrzymujemy ten sam efekt [Muzyka] Dodajmy więcej treści do naszego CV najpierw Uzupełnimy nasze zainteresowania i jak we wcześniejszych lekcjach użyjemy do tego celu listy ul i elementów Eli to moje główne zainteresowania to kino literatura gry planszowe i bieganie na podobnej zasadzie Dodajmy jeszcze sekcje z językami jakie znamy każde CV Powinno ją zawierać Możemy też wpisać na jakim poziomie znamy dany język jest to stosunkowo ważna sekcja Dodajmy ją więc pomiędzy doświadczeniem zawodowym a wykształceniem Zacznijmy od nagłówka h2a Potem dodajemy kolejną listę URL i elementy Eli napisaliśmy już całkiem sporo html-a i nie wiem jak ty ale ja zaczynam mieć przed oczami lekki mentlik dość trudno było znaleźć odpowiedni punkt do wpisania języków moglibyśmy co prawda oddzielić poszczególne sekcje na przykład centrami ale jest to jedynie obchodzenie problemu a nie naprawię niego HTML posiada specjalny taki które pozwalają podzielić na szkło analogiczne sekcje jednym z nich jest tak section widzimy że w naszym kodzie powtarzają się fragmenty składające się z nagłówków H2 oraz treści pod nimi o widzimy więc każdy z takich fragmentów tak section q&a dodatkowo ujednolicić my fragment strony z notatką o naszej osobie z pozostałymi sekcjami W tym celu Dodajmy nad paragrafem nagłówek H2 z treścią o mnie I całość również omówimy w tak section nad wszystkimi sekcjami znajduje się jeszcze grupa tagów IMG h1e span w celu poprawienia czytelności możemy je również zgrupować jeden tak różni się on jednak nieco od pozostałych fragmentów strony więc tak section odpada wykorzystaliśmy go do zgrupowania fragmentów składających się z nagłówka h2i treści w postaci list i paragrafów Bądźmy więc konsekwentni i nie obejmujemy w niego zdjęcia głównego nagłówka oraz dodatkowego napisu reprezentującego nasz zawód na szczęście istnieje tak Heather który mówiąc dość łopatologicznie pozwala grupować tagi znajdujący się na górze naszej strony obejmy w niego więc nasze zbłąkane tagi q&a dodatkowo zgrupuj my wszystkie taki section obejmując je w tak Maine Służy on do oznaczenia głównej sekcji strony q Wow dodaliśmy ogrom targów jednak na pierwszy rzut oka nie Przyniosły one zbyt wiele w końcu wygląd naszej strony praktycznie się nie zmienił pomimo tego że dodaliśmy więcej kodu nasz plik jest teraz dużo czytelniejszy to trochę tak jakbyśmy porównywali ściany tekstu z tekstem podzielonym na części i akapity dodatkowo taka organizacja ułatwi nam odnalezienie się w kodzie oczywiście pisząc kod na świeżo pamiętamy co gdzie się znajduje jednak w pracy programisty często musimy wracać do kodu który Pisaliśmy już jakiś czas temu i Wierzcie mi rzadko kiedy pamiętamy szczegóły co więcej często musimy pracować z kodem innych osób używanie powszechnie znanych targów zgodnie z ich przeznaczeniem bardzo ułatwia innym osobom zrozumienie o co chodzi w naszym kodzie kod HTML napisane w taki sposób nazywamy semantycznym HTML Starajmy się do niego dążyć [Muzyka] w tej lekcji skupimy się na narzędziu które niezwykle ułatwia życie frontendowca zostanie ono z nami już do końca kursu narzędzie to nazywa się Chrome devtools i jest dostępne w przeglądarce Google Chrome Dev to skrót od developers mamy więc do czynienia z narzędziami dla deweloperów w tej lekcji nie będziemy pracować z Visual Studio Code otworzę więc przeglądarkę na cały ekran żeby otworzyć devtools zacznijmy skrót Control shift i lub F12 jeśli korzystacie z innej przeglądarki niż Chrome bez obaw praktycznie każda oferuje podobnie działający narzędzie devtools Google Chrome są jednak powszechnie panel za najlepsze tego typu narzędzie ponownie Zachęcam cię więc zainstalowania przeglądarki Google Chrome w przeglądarce otwiera nam się nowe okno możemy zmienić jego położenie klikając w trzy kropki w prawym górnym rogu dodatkowo jeśli devtools są otwarte po raz pierwszy na dole mogła się otworzyć sekcja umocnił możemy ją zamknąć mamy tutaj bardzo dużo opcji jednak na razie skupiamy się tylko na zakładce element Upewnij się że mamy ją aktywną Czyli że pod nazwą element znajduje się Niebieska Linia w tej zakładce możemy zobaczyć kod HTML naszej strony Zobaczcie co się stanie gdy na jedziemy na któryś z elementów w tym kodzie na przykład Heather element na stronie po lewej się potwierdził możemy kliknąć strzałkę znajdującą się przetargu Heather aby go rozwinąć i zobaczyć jego treść widzimy że tak jak w naszym kodzie są w nim zawarte taki IMG A1 oraz span Cześć jeśli klikniemy teraz element H1 to po prawej stronie Zobaczymy jakie style.css zostały dodane temu elementowi oraz w którym plik zostały wpisane widzicie styl font-size 36 pikseli został wpisany w kilku style.css i faktycznie tak jest devtools pozwalają nam pozmieniać Style na żywo zobaczmy jak to działa zmienimy fonts elementu H1 na 120 pikseli klikając wartość znajdującą się przy regulacji widzimy po lewej że rozmiar naszego elementów znacznie się zwiększył jest to jednak zmiana wprowadzona tylko w devtools nie zostanie ona zapisana w naszym kodzie po odświeżeniu strony widzimy że rozmiar nagłówka wrócił do normy eksperymentujący w devtools nie musimy więc się obawiać że podpisujemy nasz kod html Bardzo przydatną funkcją devtools jest wybierak elementów jeśli klikniemy w lewym górnym rogu devtools ikonkę z kursorem a potem na jedziemy na dowolny element na naszej stronie możemy go wybrać i zobaczyć jego właściwości w oknie deptus wybierzmy element a Zobaczmy że znowu możemy podglądać Style elementu pamiętacie jak tłumaczyli wydziedziczenie w zakładce Styles widzimy że wartość Arial jest odziedziczona zesty Lidla tak bading powiedzieliśmy wtedy również że pomimo dodania czerwonego koloru dla tła bardziej to tak a nie jest czerwony ponieważ otrzyma od przeglądarki niebieski kolor tutaj widzimy dokładnie to działanie user-agent Style sheets oznacza arkusz styli dodany przez przeglądarkę co ciekawe styli nadanych przez przeglądarkę nie możemy zmienić na żywo żeby zobaczyć jaki dokładnie Kolor został nadany elementowi możemy wejść w sekcję computed Pokazuje ona ostateczne wartości Jakie przyjął dany elementy widzimy zatem że kolor tego elementu rzeczywiście jest niebieski gdy Przejdźmy z powrotem do zakładki elementz tutaj też możemy wprowadzać zmiany devtools pozwala nam w łatwy i szybki sposób eksperymentować możemy na przykład sprawdzić jak z wyglądałoby gdyby notka o nas była znacznie dłuższa kliknij my wybierak i następnie naszą nogę podświetla się ona w devtools klikniemy prawym przyciskiem myszy wybierzmy adidasy Gmail i wprowadzimy więcej tekstu loading w kliknij my poza oknem edytowania aby sprawdzić nasze zmiany po lewej stronie widzimy że nasza notatka znacznie się wydłużyła podobnie jak zmiany w stylach dokonane W ten sposób w kodzie HTML również nie są trwałe nie zmieniamy kodu naszej strony internetowej więc po odświeżeniu wróciło do normy devtools to naprawdę potężne narzędzie z ogromnym opcji Mało który front-end developer zadaje wszystkie więc jeśli czujesz się przytłoczony nadmiarem możliwości to bez obaw zbiegiem kursu będziemy jeszcze ćwiczyć korzystanie z devtools mimo to zachęcam cię do eksperymentowania w nich ze swoją stroną [Muzyka] znając już devtools Wykorzystajmy je do naszej nauki i Przyjrzyjmy się niektórym taką na stronie wybierzmy tak H1 widzimy że na stronie pojawiło się ramka która Jaki obszar zajmuje dany element pomimo że tekst jest stosunkowo krótki to ramka tagu H1 pojawia się na całej szerokości ekranu Otóż elementów HTML to w pewnym sensie prostokąty które układamy jeden pod drugim element H1 zajął całą szerokość więc kolejny element span znajduje się pod nim ale zaraz kiedy na jedziemy na element span to widzimy że jego Ramka jest dużo mniejsza podświetlony jest tylko napisanie cała linia tak jak w przypadku H1 O co tutaj chodzi Otóż każdy z elementów HTML ma specjalną cesarzową regułę Display podobnie jak w przypadku dodawania niebieskiego koloru Lincoln tak w przypadku reguły Display przeglądarka nadaje poszczególnym elementom różne wartości Korzystając z devtools możemy wejść w sekcjach komputer i sprawdzić jaką wartość Display ma tak span widzimy że ta wartość to inline możemy więc łatwo wywnioskować że jeśli dany element ma Display inline to zajmuje on tylko tyle miejsca Ile zajmuje jego treść wybierzmy znowu element h1 i Sprawdźmy jego wartość Display tym razem Display przyjmuje wartość blog intuicyjnie czujemy więc że elementy z Display Block zajmują całą dostępną szerokość od lewej do prawej niezależnie od treści tagu element blog wypełnia więc szerokość ekranu przez co element inline pojawia się pod nim Co jednak stanie się gdy w kodzie HTML dodamy po sobie dwa elementy inline żeby przeprowadzić ten eksperyment moglibyśmy oczywiście wrócić do kodu zaoszczędzimy jednak trochę czasu i skorzystałem z drzew Tools klikniemy prawym przyciskiem myszy na tak Heather wybierzmy Adidas Gmail i Dodajmy drugi span zaraz pod pierwszym gdy widzimy że oba spany pojawiły się obok siebie Jest to dość logiczne prawda Skoro pierwszy span zajął Tylko trochę miejsca i zostawił pusty obszar po prawej stronie to drugi span zostanie wyświetlony w tym wolnym obszarze a nie w Nowej Hucie zupełnie tak jak gdyby był zwykłym tekstem odświeży stronę żeby pozbyć się dodatkowego tak zwane Korzystając z wybieraka devtools zaznaczmy teraz element B W sekcji o mnie on też ma displayed in Light Jak widzimy z tej samej linii co tekst koło niego tagów które są wyświetlane inline jest dużo więcej mówiliśmy już o span i b kolejnym Tagiem z tym miejscem Display inline jest tak a wrócę na chwilę do Visual Studio code i obejmy słowo front-end Tagiem a Witam serdecznie dodam w nim link do tego Czym jest front and Development chłopcy po powrocie na stronę Widzę że dodanie tego inline w środku tekstu również nie spowoduje rozbicia tekstu na wiele linii podobnie działa taki służący do wyświetlania tekstu kursywą Wróćmy do kodu i obejmy nim wzmiankę o moich studiach Sprawdźmy efekt w tekście umieściliśmy wiele innych ptaków które mają Display inline i wszystkie te taki wyświetliły się ciągiem w jednej linii Oczywiście ta linia załamuje się kiedy dochodzi do krawędzi ekranu i przechodzi do następnej linii podobnie jak w edytorach tekstowych przy okazji Dzięki devtools możemy zobaczyć że tak Bema wartość Display Block podobnie jak H1 zajmuje on więc całą dostępną szerokość skąd mamy wiedzieć które elementy mają Display Block na które Display inline domyślnie każdy element HTML jest inline ale taką takim Jak beczy H1 blogerka zmienia Display na blog podobnie jak korektach atak w przypadku Display Block widzimy że jest on nadany przez user-agent Style hit czyli Style przeglądarki różnica jest również widoczna w sekcji computed dlatego up Display Block jest wyświetlany Czarnym kolorem Natomiast jeśli podglądamy Style elementu A to widzimy że domyślny Display inline jest wyświetlany na szaro w tej lekcji przyswoi liśmy bardzo dużo informacji Zdaję sobie sprawę że od ich natłoku może raz boleć głowa dlatego nie spiesz się i spróbuj krok po kroku prześledzić To czego się nauczyliśmy nauka wymaga powtórzeń i praktyki więc jeśli coś nie jest dla ciebie w stu procentach jasne to bez obaw to normalne [Muzyka] Wiemy już jak Display inline oraz Display Block wpływają na wyświetlanie tak na naszej stronie w tej lekcji dowiemy się więcej o tym jak wyświetlane są pojedyncze tagi HTML i jak możemy wpłynąć na ich wymiary Przejdźmy więc do devtools i wybierzmy nagłówek H1 zobaczcie jak zaznaczył się ten element treść jest podświetlona niebieską a pusty obszar nad i pod napisem na pomarańczowo o co w tym chodzi rzućmy okiem na sekcję stays na jej końcu widzimy schemat który dokładnie obrazuje wymiary elementu każdy z targów tworzą następujące składowe treść margines wewnętrzny czyli tak zwane właściwości padding obramowanie właściwość border i marginesy zewnętrzne właściwość Marcin wielkość sekcji treści Możemy również określać używając właściwości with i Hyde tak jak robiliśmy to z naszym zdjęciem brzmi to wszystko bardzo atrakcyjnie więc spróbujmy na to spojrzeć w nieco inny sposób Wyobraźmy sobie pustą ścianę Aż prosi się o to żeby powiesić na niej zdjęcie wywołujący fotografów zdjęcie możemy wybrać jego wymiary podobnie w języku CSS możemy zmienić wymiary elementów jak wiemy służą do tego właściwości with I hate Wyobraźmy sobie że nadajemy naszemu zdjęciu wymiary za pomocą tych reguł jak już Zauważyliśmy tagi na stronie dodają się od góry do dołu podobnie nasze zdjęcie zajmie więc miejsce w lewym górnym rogu ale przecież nikt nie wiesza zdjęcia w samym rogu ściany prawda zazwyczaj odsuwamy od krawędzi żeby uzyskać ten sam efekt przypadku elementów HTML na stronie możemy dodać marginesy zewnętrzne żeby odsunąć element od lewej krawędzi używamy reguły margin-left IV wiemy wartość w pikselach żeby odsunąć element od górnej krawędzi używamy reguły margin-top w ten sposób dodajemy margines na górze jak łatwo się domyśleć istnieją również reguły margin-right oraz margin-bottom jednak na razie ich nie potrzebujemy okej nasze zdjęcie nie znajduje się już w rogu no ale przecież nikt nie przykleja po prostu zdjęcia na ścianę dla lepszego efektu wizualnego oprawiamy je zawsze w bramkę i podobnie w CSS możemy dodać taką ramkę używając reguły border jako jej wartość podajemy szerokość ramki No ale to nie wszystko Możemy również wybrać jej styl najpopularniejszy styl to Solid który oznacza ciągłą jednolitą ramkę taką jak widzicie na obrazku co więcej Możemy również wybrać kolor ramki wpisując na końcu nazwę koloru teraz dodatkowo na pewno niejednokrotnie widzieliśmy że pomiędzy zdjęciem a ramką znajduje się dodatkowe miejsce w jednolitym kolorze po raz kolejny taki efekt Możemy również uzyskać CSS na posłuży nam do tego reguła adding podobnie jak w przypadku reguły margines żeby odsunąć nasz obrazek od każdej z krawędzi ramki możemy użyć czterech reguł Jeśli jednak każda z reguły ma tę samą wartość 15 pikseli to możemy użyć skróconego zapisu padding 15 pikseli i zastąpić cztery linijki jedną Tak wygląda to w teorii Mam nadzieję że zrozumienie diagramu Który widzieliśmy przed chwilą przyjdzie ci teraz dużo łatwiej Wróćmy do naszego CV i jeszcze raz przećwicz my poznane tutaj reguły pozycjonowanie i wymiarowanie elementów to kluczowa umiejętność warto poświęcić więc na nią nieco więcej czasu czujesz My element H1 na stronie w devtools możemy nie tylko zmieniać reguły CSS ale również dodawać nowe żeby to zrobić Wystarczy że klikniemy w stylach danego sektoru pod ostatnią z reguł ustawmy mu szerokość 250 pikseli i wysokość 250 pikseli zmniejszyliśmy szerokości więc tekst złamał się na spacji zmiana wysokości spowodowała z kolei odsunięcie elementu span znajdującego się pod Tagiem H1 zauważmy że nowe wymiary elementu pojawiły się na schemacie Dodajmy obramowanie do naszego H1 robimy to dodając właściwość border border jest regułą która oczekuje podania kilku wartości szerokości obramowania stylu obramowania na przykład jednolite lub kropkowane oraz koloru obramowania Dodajmy border szczególne wartości oddzielam spacją najpierw szerokość 1 piksel następnie Style Solid Solid oznacza że chcemy aby styl obramowania był ciągłą linią i na koniec kolor Red ten czerwony kolor jest paskudny ale pamiętajmy o tym że dodajemy go jedynie w devtools żeby lepiej zrozumieć tę lekcję Zobaczmy że na schemacie pojawił się border liczba 1 oznacza tutaj szerokość obramowania zmienimy szerokość napięć pikseli widzicie zmiana jest zauważalna i na stronie i na schemacie świetnie Dodajmy teraz margines wewnętrzny padding piszemy kolejną rurę padding 20 pikseli wewnątrz naszego obramowania pojawił się 20 pikselowy odstęp od każdej z krawędzi reprezentuje go zielony kolor na koniec Dodajmy margine zewnętrzny mardin wpiszemy więc regułę margines 20 pikseli tak odsunął się od lewej krawędzi o 20 pikseli oraz jest oddalone od dodatkowe 20 pikseli od obrazka i z pana reprezentuje go kolor pomarańczowy Zobaczcie że po najechaniu na nasz element widzimy już 4 kolory pomarańczowy reprezentujący margines wewnętrzny ciemniejszy pomarańczowy reprezentujące obramowanie zielony reprezentujący margines wewnętrzny padding oraz niebieski i reprezentujący treść tagu W schemacie widzimy również wszystkie komponenty i składowe wraz z dokładnymi wymiarami w stylach które dodaliśmy obok właściwości border padding imagin pokazała się na ma ostrzałka klikamy w nią Co znaczy ten zapis Otóż Marcin 20 pikseli jest skrótem zapisem który mówi dla każdego z boków prostokąta Ustaw margines na dwadzieścia pikseli równie dobrze moglibyśmy chcieć aby Dolny miał 40 pikseli a pozostałe 20 pikseli możemy to zrobić pisząc margin-bottom 40 pikseli na dole reguł widzicie przeglądarka nałożyła 2style i wzięła z nich część wspólną to znaczy Dolny margines materac 40 pikseli a pozostałe 25 serii w CSS kolejność wpisywania reguł ma znaczenie dla naszego elementu H1 przyjęte zostaną Style które zostały wpisane niżej przykładowo Jeśli dodamy do naszego elementu regułę kolor blue to tak jak widzimy działa gdyż tekst zmienił swój kolor na niebieski natomiast Jeśli dodamy potem kolejnym regułę tym razem kolor Red to opisuje ona regułę wyżej devtools sygnalizuje to Przekraczając regułę kolor blue A my widzimy że tekst ma teraz kolor czerwony w przypadku marginesów najpierw mówimy przeglądarce aby ustawiła margines przy każdej krawędzi na dwadzieścia pizzerii dopiero potem mówimy żeby ustawiła Dolny margines na 40 pikseli Dolny margines o wartości 20 pizzerii Zostaje więc nadpisany przez regułkę podaną niżej i przyjmuje wartość 40 pikseli Możemy też wybrać różne marginesy dla różnych boków mamy tutaj dwa alternatywne sposoby zapisu z możemy napisać w każdej linii osobno margin-top 40 pikseli margin-right 20 pikseli margin-bottom 60 pikseli i margin-left 35 decybeli widzimy wtedy na schemacie że konkretne marginesy przyjęły właśnie takie wartości możemy jednak powyższe cztery linijki zastąpić jedną mardin 40 pikseli odstęp 20 pikseli octem 60 pikseli odstęp 35 pikseli każda wartość reprezentuje jeden margines zaczynając od górnego 40 pikseli kolejne wartości dodajemy zgodnie z ruchem wskazówek zegara right Bottom i kończymy na Left dokładnie taką samą sztuczkę możemy zastosować dla parkingu widzimy że tym razem to kolejne padding i mają różne wartości pamiętajmy o tym że dodaliśmy style w devtools więc nie zostaną one zapisane w naszym kodzie tworzeniu strony jej wygląd wróci do stanu początkowego pomimo tego że nie wprowadziliśmy w naszym CV jeszcze żadnych zmian to wiedza nabyta w tej lekcji będzie kluczowa w następnych etapach nauki [Muzyka] poprzednich lekcjach skupiliśmy się raczej na teorii i nie dokonywali zmian w naszym CV czas wykorzystać zdobytą wiedzę w praktyce Zacznijmy od tagów section to dajmy im odpowiednie padding i dzięki temu poszczególne sekcje naszego CV zostaną nieco oddzielone od siebie i od krawędzi ekranu co poprawić czytelność strony to Wykorzystajmy skrócony zapis i Dodajmy następujące padding i dlatego section 10 pikseli od góry 60x z prawej 20 pikseli od dołu E60 pikseli z lewej po odświeżeniu przeglądarki widzimy odstępy między elementami section teraz tylko nagłówek wygląda inaczej Dodajmy mu więc takie same padding i ciało i otwieramy stronę Jak widzimy zarówno Heather jaki section przyjmują dokładnie te same style.css pozwala nam uprościć taki zapis jeśli chcemy nadać same Style różnym sektorom w naszym przypadku section leader to wystarczy że przed klamrami wpiszemy oba selektory i od Dzielimy je przecinkiem dzięki temu zarówno wszystkie taki section jaki Heather otrzymają określone przez na sparingi możemy pozbyć się styli nadanych pojedynczo obóz elektrom po odświeżeniu strony widzimy że efekt jest ten sam a my pozbyliśmy się nadmiernej ilości kodu występujemy naszą stronę tak żeby przypominała kartkę papieru zaczniemy od ustawienia koloru tła dlatego boli kolor tła ustawiamy regułą background-color którego wartość przyjmuje kolor użyjemy więc kolor Red spokojnie tylko żartowałem Poszukajmy jakieś ładniejsze i barwy Otwórzmy devtools i znaliśmy nasz tak bawi Witam was Bądźmy się tego czerwonego koloru i jak widzicie devtools podsuwa nam sporo propozycji możemy je zmieniać klikając strzałkę w dół iw górę i obserwować efekty po lewej kolor Alice Blue wygląda całkiem przyzwoicie pamiętajmy że wybraliśmy go na razie tylko devtools więc musimy dodać tę wartość w naszym kodzie CSS Zrobić pranie po odświeżeniu widzimy że cała strona jest teraz lekko niebieskawa pamiętacie gdy mówiliśmy o dziedziczeniu w CSS dziedziczenie polega na tym że gdy dodajemy elementowi niektóre reguły CSS owe jak na przykład kolor to wszyscy jego potomkowie też otrzymują tę regułę na pierwszy rzut oka w przypadku background-color Wygląda to bardzo podobnie prawda Przejdźmy jednak do devtools wybierzmy section Jak widzimy tak section ze stali które dodaliśmy dziedziczy jedynie font-family nie ma tu mowy o background-color a mimo to section ma niebieski kolor chodzi o to że taki w HTML są domyślnie przezroczyste ich kolor tła będzie taki sam jak kolor tagu ich rodzica tak section ma przezroczyste tło widzimy więc niebieski kolor tła tak boli reguła background-color nie jest dziedziczona możemy to oczywiście zmienić i dlatego W czym podać własny kolor tła ustawmy więc dlatego w section i Heather białe tło przykryję one niebieskie tło tak boli Jak widzimy section leader są elementami z Display Block więc zajmują prawie całą stronę prawie ponieważ margines body dodany przez przeglądarkę ma osiem pikseli dlatego widzimy niebieskawy kawałek tła boding zaraz przy krawędziach CV ma już kolor kartki jednak jest nieco zbyt szerokie Dodatkowo od początku mojego kursu okno przeglądarki było nieco powiększone specjalnie dla was abyście lepiej widzieli co dzieje się na stronie użyję teraz skrótu kontroli 0 aby przywrócić ją do domyślnego zooma ograniczymy więc szerokość TV tak żeby bardziej przypominało pionową kartkę A4 a nie poziom pamiętacie reguły with użyjemy jej teraz niech nagłówek i sekcji 1960 pikseli przejdźmy teraz do przeglądarki CV przypomina kartkę A4 jednak dużo lepiej by wyglądało gdyby znajdowało się na środku strony prawda jak to zrobić noc pomocą znowu przyjdzie nam margines chcemy zrobić tak aby nasza kolumna z treścią miała taki sam margines strony lewej jak i prawej dzięki temu znajdzie się na środku Dodajmy więc margin-left 110 pikseli q&c znajduje się na środku możemy więc zamknąć devtools i No niestety Mamy problem wartość marginesu 110 pikseli była OK dla mniejszego okna niestety po jego zamknięciu przestrzeń powiększyła się Zobaczcie nie wiemy dokładnie Ile pikseli będzie miała wolna przestrzeń na jednym ekranie może mieć trochę więcej na innym trochę mniej niektóre osoby mogą używać przy cienia tak jak ja przez cały kurs z kolei inny oddalenia Jak ustawić margines tak żeby zawsze osiągną odpowiednią wartość Niezależnie od tego na jakim ekranie zostanie otwarta nasze strona możemy to osiągnąć używając specjalnej wartości właściwości Marcin ta wartość to auto ustawienie marginesu na auto mówi przeglądarce Ustaw maksymalną wartość marginesu jeśli ustawimy margin-left auto to element Przyklej nam się to prawej strony bo auto wykorzystało całą przestrzeń po lewej Jeśli jednak ustawimy jeszcze margines sprawy na auto to przeglądarka będzie musiała podzielić wolną przestrzeń na dwa marginesy I tym oto sposobem mamy element który zawsze marudny margines lewy i prawy Teraz wystarczy że ustawimy taką wartość dla wszystkich sekcji i nagłówka Płońsk Super nawet gdy używam przybliżenia i oddalenia Co zmniejsza i zwiększa obszar po bokach To CV pozostaje na środku widzicie że marginesy letni rajd oraz topi Bottom mają takie same wartości prawda W takich sytuacjach CSS pozwala nam zapisać to krócej margin 0 auto pierwsza wartość odnosi się do marginesów górnego i Dolnego a druga do prawego i lewego z zwiększymy nieco niebieską przestrzeń nad IPTV tak żeby lepiej się wyróżniało możemy to osiągnąć ustawiając padina boli to żeby dodać padding górny i Dolny na 40 pikseli ponownie użyjemy skrótowe go zapisu padding górny i Dolny 240 pikseli a prawy i lewy zero super nasze CV wygląda teraz jak wyjęte prosto z drukarki [Muzyka] w następnych lekcjach będziemy zajmowali się zaawansowanym pozycjonowaniem elementów jest to bardzo ważny temat dlatego żeby lepiej go zrozumieć przygotujmy się do niego ponownie śledząc nieco bardziej życiowy przykład Tęskniliście za naszą ścianą Wyobraźmy sobie że jest ona odpowiednikiem Taga section obejmującego całą stronę powiesimy na naszej ścianie zdjęcie tak jakbyśmy dodawali do tego section inne tak jak widzimy ma on określone wymiary ramkę i padding byłoby dobrze gdybyśmy na ścianie powiesili nieco więcej obramowany zdjęć jeśli elementy reprezentujące takie zdjęcie miałyby Display Block to jak już wiemy zaczną ustawiać się jeden pod drugim każdy z nich ma ten sam padding i border swobodnie obrazki 1 2 i 4 mają też ten sejf i Hyde numer 3 jest nieco wyższy co Gdybyśmy chcieli powiesić te obrazki w jednej poziomej linii na środku ściany moglibyśmy próbować ustawić elementem reprezentującym zdjęcia Display inline wtedy elementy ustawiły się obok siebie w poziomie Jednak musielibyśmy się sporo namęczyć żeby ustawić je na środku strony tylko przy użyciu marginesów istnieje jednak dużo prostszy sposób na umieszczenie elementów na środku zarówno w poziomie jak iw pionie Pamiętacie że nasza ściana to odpowiednik tagu który zawiera w sobie inne elementy prawda tak ten zajmuje całą wysokość i szerokość ekranu w języku CSS dostępny jest mechanizm Flex Box który pozwala zarządzać pozycjami elementów i przestrzeniami pomiędzy nimi istnieje specjalna właściwość Display zwana Display Flex jeśli ustawimy ją na naszym tagu obejmującym które zwyczajowo nazywamy kontenerem to elementy ustawiają się w tej poziomej linii nasz kontener stał się teraz elementem Flex i dał nam dostęp do całego szeregu reguł CSS pomagających w pozycjonowaniu elementów przykładowo jeśli podległą Display Flex do dalibyśmy regułę justify-content i dali jej wartość Center to elementy zostaną ustawione dokładnie na środku kontenera z gwiazd ich content to po polsku w luźnym tłumaczeniu justowanie treści zupełnie tak jak w Wordzie jeśli chcielibyśmy ustawić elementy tak żeby skrajne przylegały do krawędzi a pomiędzy pozostałymi znajdował się równy odstęp to wystarczy że ustalimy regule justify-content wartość space-between w naszym przypadku jeszcze lepiej sprawdzi się jednak reguła space-around I jak widzimy ustawia ona proporcjonalne odstępy między elementami i krawędziami widzimy że reguła justify-content jest więc niezwykle przydatna pamiętajmy o tym że zadziała ona tylko Jeśli element obejmujący jest elementem Flex okej A jak ustawić elementy na środku strony w pionie pomaga w tym reguła align-items jeśli ustawimy jej wartość na Center to elementy zajmą miejsce na środku strony w pionie nie możemy również użyć wartości Flex and żeby wyrównać elementy do dolnej krawędzi wartość Flex start wyrównaj je do górnej krawędzi pozostańmy jednak przy wartości align-items-center nauczyliśmy się więc jak przy użyciu Display Flex możemy manipulować pozycjami elementów na stronie używamy Display Flex na elemencie abyśmy mogli korzystać na nim z reguły eksportowych justify-content pomogło nam w ustawieniu elementów poziomie a items w ustawieniu elementów w pionie w następnych lekcjach będziemy intensywnie ćwiczyć wykorzystanie Flex Vox [Muzyka] ac4tv powinny się również znajdować nasze dane kontaktowe Dodajmy je używając Nowego semantycznego Targu adres dane adresowe z tej podaje się w dobrze wyeksponowany miejscu w CV więc umieścimy je w naszym nagłówku w środku tego adresu mieliśmy tak ul a w nim tagi Eli tak jak robiliśmy to do tej pory Ja dodam swój numer telefonu email datę urodzenia ruchu oraz miejsce zamieszkania Zauważyliśmy już zapewne że elementy w dokumencie HTML układają się w pionie czyli od góry w kierunku dołu ekranu przypomina to układ znany nam z klasycznych dokumentów tekstowych i faktycznie HTML w swoim pierwotnym założeniu powstał po to aby można było łatwo tworzyć i udostępniać dokumenty w formie elektronicznej Szybko okazało się że nie jest to wystarczające i ze względów estetycznych i praktycznych chcielibyśmy układać elementy obok siebie w osi poziomej z podobnie w naszym CV byłoby świetnie gdyby wszystkie takiej w naszym tagu Heather ustawiły się w jednej linii mówimy o tagu image h1 span i właśnie dodanym tagu adres Poznajmy mechanizm który pozwoli nam ustawić elementy tak aby zajęły całą dostępną szerokość z równymi odstępami od siebie ten mechanizm testowy to Flex pozwala on w łatwy sposób pozycjonować elementy na stronie wybierzmy element którego dzieci mają rozciągnąć się w poziomie w naszym przypadku jest oczywiście Heather Zwróćmy uwagę że pomimo tego że wyżej znajdują się już tyle przypisane do resection to nic nie stoi na przeszkodzie żebyśmy dopisali style tylko do hedera Oczywiście musimy użyć osobną pojedynczego selektora żeby użyć w X Boxa Dodajmy tego Wicher reguły Display Flex po odświeżeniu strony widzimy że elementy ustawiły się w jednej linii z tak h1e span znajdują się na różnych wysokościach dzieje się tak dlatego że przez marginesy i większy font-size tak H1 jest znacznie wyższy od tagu span żeby wycentrować elementy w pionie możemy dodać do tego Heather regułę i Knights Center połączeniu z listy Flex skutkuje ona ustawieniem elementów w tej samej odległości od górnej i dolnej krawędzi rodzica wygląda to lepiej mimo wszystko wypadałoby ustawić tak span pod Tagiem H1 żeby to zrobić moglibyśmy objąć je w dodatkowy tak ze zwyczajnym Display zamiast Display Flex dzięki temu elementy ustawiły się w pionie a nie w poziomie w naszym HTML obejmy Więc h1e span w tak No właśnie w jaki tak powinniśmy je objąć pomimo całej gamy semantycznych tagów HTML rozpoznawanych przez przeglądarkę prędzej czy później trafimy na o której będziemy potrzebowali dodać Tak niepasujący definicją do żadnego innego w takim przypadku z pomocą przychodzi nam tak drzew nazwa Drive pochodzi od content Division element sunreef nie ma żadnego wyglądu nie wpływa w żaden sposób na swoje dzieci i ma domyślnie ustawione Display Block to po co nam taki tak który nic nie robi paradoksalnie świetnie nadaje się on do tego aby zgrupować elementy i nadać im Style treść wewnątrz taglich nie musi mieć żadnego specjalnego wyróżnionego znaczenia z obejmy więc takich A1 i span Taken with po odświeżeniu strony nagłówek wygląda dużo lepiej zerknij my w devtools aby lepiej zrozumieć co tak właściwie się stało A jak widzimy tak Heather zajmuje całą szerokość strony ma ustawiony Display Flex Więc jego dzieci zamiast pojawiać się jedno pod drugim ustawiają się obok siebie nie zajmują więc całej szerokości tak div który właśnie dodaliśmy zawiera w sobie tak h1e span this Place nie jest dziedziczony tagdiv ciągle ma więc Display Block jego dzieci ustawiają się więc jedno po drugim to nasz nagłówek mógłby jednak wyglądać inaczej idealnie by było gdyby zdjęcie było wyrównany do lewej strony a sekcja adresowa do prawej do takiego pozycjonowania ponownie wykorzystamy Flex aby ustawić w ten sposób elementy w poziomie wystarczy dodać do hetera regułę justify-content space-between Rozmieść i ona elementy w poziomie tak żeby pierwszy i ostatni znajdował się przy krawędzi a pozostałe były oddzielone równym odstępem flixbus wydaje się skomplikowany ale spokojnie z biegiem czasu przekonasz się że tak naprawdę jest bardzo intuicyjne narzędziem [Muzyka] popracujemy nieco nad naszym nagłówkiem na samym początku wyeksponuje my trochę kategorie danych kontaktowych użyjemy do tego tagu b i obejmiemy nim poszczególne kategorię jak zapewne pamiętasz bez powoduje że napisy będą wytłuszczone Bema też Display inline więc nie będzie przełamywaniu linii kropki przy poszczególnych elementach listy wyglądają OK W sekcjach niżej w nagłówku nie są jednak konieczne możemy się ich pozbyć również przy użyciu CSS Wystarczy że użyjemy na targu ul reguły list-style none dzięki temu zmienimy domyślny styl listy z kropką zwanej na listę bez stylową ale zaraz chcieliśmy się pozbyć jedynie kropek w chederze tymczasem zniknęły z całej strony dzieje się tak dlatego że dodaliśmy Style dla tagu ul a więc mówimy przeglądarce że chcemy żeby każdy elementu ale na stronie miał list-style none jak możemy ustawić tę regułę tylko data-url znajdującego się w chederze Wystarczy że nasz selektor zamienimy na Heather locklear dzięki temu wybierzemy tylko te tagi ul które znajdują się chederze jeśli wątpliwości co do tego zapisu to Spokojnie zdążymy go jeszcze przećwiczyć tej lekcji tymczasem odświeżyłem stronę Super widzimy że dzięki naszemu nowemu dyrektorowi kropki zniknęły tylko z taką ul który znajdował się w chederze nasza Lista jest dość mocno zbita dodajemy trochę przestrzeni pomiędzy poszczególnymi elementami listy możemy to zrobić poprzez dodanie marginesu dolnego do każdego elementu Eli znajdującego się w chederze spróbujmy więc zapisać taki selektor zaczynamy więc od rodzica najpierw hedera później Eli Dodajmy teraz margin-bottom 15 pikseli po odświeżeniu strony widzimy że zmiany zostały zaaplikowane jedynie na elementach Eli znajdujących się w kadrze na początku każdej linii tagu adres dodamy teraz ikonkę przykładowo dla numeru telefonu Będzie to ikonka telefonu dla mailu koperta z najpierw Pobierz ikony z linku dostępnego w opisie i wklej folder images do naszego folderu roboczego kierunek jeśli skończyłeś to na liście po lewej powinien pojawić się nowy folder o nazwie images możemy w nim podglądnąć ikony ich rozmiar to 16 na 16 pikseli Jak widzimy są stosunkowo małe i mają rozszerzenie PNG to rozszerzenie oznacza w bardzo dużym uproszczeniu że ikonki przyjmą taki kolor tła i jaki ma element na którym nie umieścimy oczywiście dodamy je za pomocą tagów IMG tagi te umieścimy zaraz za otwarciem targów Eli tak aby ikonki znalazły się przed tekstami przekażmy ścieżkę do danego zdjęcia dla poszczególnych elementów pliki z ikonami znajdują się w folderze images musimy Więc najpierw wejść do tego folderu przykładowo Żeby zrobić to dla plików on PNG wpisujemy najpierw nazwa folderu czyli images ukośnik VPN gier dla maila jest to images ukośnik mail.dsg trening dla urodzin images ukośnik birthday Cake kropka PNG a dla miejsca zamieszkania images ukośnik PIN PNG po odświeżeniu strony widzimy że nasze ikonki są ogromne dzieje się tak przez to że na samym początku kursu daliśmy Style dla tagu ING Jak widzimy wszystkie obrazki na stronie przyjmują wymiary 150 na 150 pikseli podczas gdy rozmiar naszych małych ikon powinien wynosić zaledwie 16 na 16 pikseli Dodajmy więc selektor wybierający tagi ING znajdujący się w tagu adres tym razem napisanie Heather ING nie wystarczy w końcu pierwsze zdjęcie również znajduje się w sferze dlatego wybierzmy tak ING który znajduje się w tagu adres który znajduje się w taką weather Już wiem jak to zrobić wpisujemy Heather odstęp adres odstęp IMG dla tych ptaków ING w piśmie with ty również 16 pikseli ich i tu również 16 pikseli po odświeżeniu widzimy że rozmiary wróciły do normy jednak ikonki są w pewien sposób niewidoczne skorzystają z pomocy devtools Jak widzimy ikonki są dostępne na stronie roku wspominaliśmy o tym że mają one format PNG No a jako że ikonki są białe to zlewają się z białym Tłem tagu Heather żeby to naprawić ustawmy tego v-img background-color na przykład cornflower Blue dodajemy go również w naszym kodzie brawo super ikonki są już widoczne poprawnie jednak trochę ich wygląd najpierw ocenimy ikonki od napisów tym razem użyjemy reguły margin-right 10px Eli i Dodajmy też padding aby odsunąć nieco ikonkę od krawędzi elementu Facebook kiedy Widzimy tutaj do czego przydają się dwa typy marginesów background-color wpływa na padding ale na margines już nie możemy powiedzieć że Marcin służy do pozycjonowania elementów względem innych elementów a padding służy do dodawania odstępów wewnątrz elementu ikonki są piękne jednak nie są wyrównane względem napisów dodanie parkingu dla ikonki zmieniło jej faktyczną wysokość Dlatego jest teraz wyższa niż tekst po prawej przeglądarka przylepił a elementy do dolnej krawędzi elementu Eli aby powiedzieć przeglądarce żeby ustawiła naszej ikonki na środku użyjemy regułki vertical-align Middle czyli z angielskiego wyrównanie pionowej ta reguła działa tylko dla elementów z Display inline całkiem podobnie jak align-items działa tylko dla elementów z Display Flex dodajemy już ostatnie szlify w devtools znajdziemy Style dla naszych ikon i dopiszemy regułę border-radius przyjmuje ona wartość w pikselach Ale co właściwie robi spróbujmy dodawać coraz więcej pikseli trzymając strzałkę w górę widzicie rogi ikony zaokrąglają się co więcej jeśli ustawimy jako border-radius wymiar naszej ikony czyli 16 pikseli to z kwadratu zmienia się ona wkoło czad Ten sam efekt możemy uzyskać wpisując border-radius 50 procent Dodajmy tę regułę w naszym kodzie możemy dodatkowo zwiększyć nieco wymiary naszego głównego zdjęcia na przykład do 180 pikseli Wow nasz nagłówek wygląda o niebo lepiej [Muzyka] I jak widzimy w naszym CSS selector stają się coraz dłuższe zaczyna być to niewygodne i dość ryzykowne w życiu zamiast używać tak rozległych selektorów możemy wykorzystać koncept klas klasy pozwalają nam oznaczyć element HTML tak żebyśmy mogli go swobodnie wybierać Niezależnie od tego gdzie się znajduje przykładowo Żeby dodać do naszych ikonkę Wystarczy że dodamy atrybut o nazwie klas IV piszemy nazwę klasy Musi ona być zapisana ciągłym tekstem w naszym przypadku Nazwijmy ją więc adres myślnik ikon to samo działanie Powtórzmy dla pozostałych elementów reprezentujących ikonki w adresie z dzięki temu w CSS możemy pozbyć się naszego drugiego selektora i zamiast niego wybrać wszystkie elementy z klasą adres ikon jak to zrobić jak już wiemy taki wybieramy wpisując nazwę tagu natomiast elementy z daną klasą wybieramy wpisując nazwę klasy poprzedzona kropką zmienię więc Heather adres ING na kropka adres ikon w ten sposób tworzymy styl który dla każdego elementu z klasą adres ikon przypisuje style w klamerkach Jak widzimy Po odświeżeniu strony ikony wyglądają tak samo zachowały więc one swoje Style widzimy więc że Wiele elementów może mieć tę samą klasę co więcej do jednego elementu możemy dodać kilka klas Dodajmy do naszych i konklawe circle a następnie w CSS wybierzmy wszystkie elementy z klasą Circle już w osobnym stylu z na dajmy im border-radius 50 procent sobie możemy pozbyć się więc reguły border-radius ze styrii dla kasy adres ikon wszystkie elementy z klasą Circle będą miały teraz zaokrąglone boki jeśli przejdziemy więc do HTML i do głównego zdjęcia dodamy klasy circled to po odświeżeniu strony Zobaczymy że robi zdjęcia również są zaokrąglony wygląda to super dzięki klasą możemy więc używać CSS znacznie efektywniej [Muzyka] w tej lekcji będziemy dalej ćwiczyć użycie Flex boksu e-class zaczniemy od dopracowania sekcji zainteresowania jeśli jeszcze tego nie zrobiliśmy to Dodajmy 4 wpisy do naszej listy z zainteresowaniami zaczniemy od dodania do nich ikon poznamy teraz bardzo fajne narzędzie iconmonster jest to strona z której legalnie i za darmo Możemy pobrać ikonki jest ich naprawdę dużo Icon series prosty w użyciu najpierw wybieramy rodzaj ikonek które nas interesują mamy do wyboru ikonki pełne film Bolt albo konturowe Thin ja wybiorę ten drugi rodzaj interesują mnie ikonki z kategorii Sport wpisuję więc sport i widzę wyniki wyszukiwania żeby pobrać interesującą mnie ikonkę muszę w nią kliknąć i wybrać format pliku w moim przypadku będzie to PNG mogę teraz dostosować wielkość ikonki jej kolor i kolor tła Ja chciałbym żeby ikonka miała 32 piksele była niebieskawa i miała przezroczyste tło zgadzam się na warunki korzystania z serwisu i Pobieram ikonkę Zachęcam cię teraz do pobrania czterech ikon które reprezentują twoje zainteresowania W razie problemów z pobraniem po prostu Cofnij wideo i przemyśleć powoli kroki które Wykonałem na stronie ekomonster możesz również pobrać te ikonki których użyłem ja link jest dostępny w opisie filmu po pobraniu z silikonem nazwy i umieściłem je w folderze images Dodajmy najpierw ikonki do listy tak jak robiliśmy to w przypadku ikonek w tagu adres a więc po otwarciu tagu Eli dodajemy tak ING i w atrybucie SRC podajemy adres do pobranych przez nas obrazów PNG nie Zapomnijmy o tym żeby adres rozpocząć od nazwy folderu a następnie podać ukośnik po odświeżeniu strony widzimy że mamy ten sam problem co poprzednio nasze nowe ikonki przyjęły Style przypisane do każdego tagu ING ta sytuacja będzie się powtarzał A za każdym razem gdy będziemy dodawać tak ING na stronie zmienimy więc taktykę i do tego IMG z naszym zdjęciem dodajemy trasę profile picture a następnie w CSS wybierzmy tę klasę wpisując kropkę jej nazwę i dodajemy do niej reguły f180 pikseli i Hyde 180 pizzerii was Bądźmy się wcześniejszych styl i przypisanych do każdego tagu IMG ale jak widzimy Po odświeżeniu strony tylko tak z klasą profile Picture czyli nasze zdjęcie główne otrzyma Style zmieniające wymiary t-style nie będą już wpływały na pozostałe taki ING ponieważ tagi te nie mają klasy profile Picture teraz powiększymy trochę nazwy naszych zainteresowań użyjemy do tego taką H3 używamy H3 gdyż sekcja zainteresowania nie jest tak ważna jak napisy wyróżnione tagami H1 i H2 poniżej taką wh3 Dodajmy taki p a w nich krótki opis naszych zainteresowań ja te opisy mam już gotowe pozwolicie więc żyje wkleję w odpowiednich miejscach z okej sekcja zainteresowania zawiera już docelową treść przejdźmy teraz do jej o stylowania najpierw zajmiemy się usunięciem domyślnych parkingów i punktorów czyli kropek W elementach URL jak już wiemy przeglądarka dodała je domyślnie na naszej liście wybierzmy więc tak URL znajdujący się w section podobnie jak w poprzedniej lekcji ustawmy list-style none dodatkowo dodamy padding 0 aby wyzerować odstępy wewnętrzne Jak widzimy punktory i parkingi zniknęły z wszystkich elementów URL znajdujących się w tak section ponownie mamy ten sam problem dodaliśmy zbyt ogólny selektor żeby go rozwiązać tak jak poprzednio użyjemy klas 5F HTML Dodajmy więc klasę hobbies do interesującego nas tak ul w którym zawarte są nasze zainteresowania horror a następnie CSS zmienimy selectors elementu ul znajdującego się w section na element o klasie hobbies zapisujemy więc kropka i nazwa klasy czyli hobbies po odświeżeniu strony widzimy że klasy Po raz kolejny przyszły nam z odsieczą spróbujmy teraz ustawić po dwa elementy Eli obok siebie żeby to zrobić Dodajmy do naszej listy ul okresie hobbies Display Flex Jak pamiętamy Dzięki Kleksowi wszystkie dzieci taką L czyli elementy Eli ustawiają się w jednej linii nie mamy więc obok siebie cztery elementy a nie 2 wybierzmy więc elementy l i znajdujące się w taką okresie hobbies i ustawmy im szerokość 50 procent sobie Jak widzimy wpisując selektor możemy swobodnie łączyć ze sobą nazwy tagów e-class taki zapis oznacza więc że wybieramy elementy l i które znajdują się w elementach o klasie hobbies Niestety pomimo ustawienia szerokości na 50 procent fritz.box dalej ustawia obok siebie cztery elementy domyślnie Flex ignoruje wymiary elementów i po prostu upycha je w jednej linii żeby zmienić to zachowanie dodajemy regułę Flex brap brap brap angielskiego oznacza zabili i faktycznie widzimy że po odświeżeniu pierwszy element zajmuje 50 procent szerokości drugi również natomiast trzeci nie mieści się już i przeskakuje do kolejnej linii jeśli Chcielibyśmy zrobić układ 3 kolumnowy to wystarczyło by zmienić wf dla Eli na 33 procent kontenera czyli elementu obejmującego Eli wstańmy jednak czy szerokości 50 procent i układzie dwuelementowym teraz chcielibyśmy jeszcze aby ikonka wyświetliła się po lewej stronie nazwy naszego hobby jak to zrobić znowu użyjemy Flex boksu jeśli ustawimy Display Flex dla Eli to przeglądarka Wyświetli nam trzy kolumny ikonkę nazwę hobby i opis użyjemy więc Diva aby zgrupować nazwę hobby i opis było wow co tu się stało użyjmy devtools żeby lepiej zrozumieć problem Po pierwsze nasz tak klimat Display Flex umieszcza on więc obok siebie dwa elementy ikonkę i tak difu obejmujący tekst to zachowanie jest okej dokładnie to chcieliśmy osiągnąć jednak Dlaczego ikonkę jest tak rozciągnięta odpowiedź ukryta jest w sekcji computed i domyślnej wartości align-items pamiętasz tę regułę użyliśmy jej aby wyrównać elementy hedera w pionie Jak widzimy tutaj przyjmuje wartość normal co skutkuje rozciągnięcie miej na całą wysokość kontenera jeśli ustawimy na ikonce align-items-center tak jak wcześniej to jej wymiary wracają do normy natomiast Żeby ustawić ją dodatkowo na górze kontenera użyjmy wartości Flex start i Dodajmy ją w naszym kodzie jest lepiej ale czemu ikonka nie jest wyrównana do napisu Zobaczmy w Tulcach H3 ma domyślnie ustawione margines Górny zmniejszymy go trochę i ustawne go na 5 pikseli Dodajmy nowy selektor najlepiej przy pozostałych nagłówkach w ich piszmy margin-top 5 pikseli zostało przy okazji przesuńmy H1 H2 taka kolejność wygląda znacznie lepiej odsuniemy Jeszcze kolumnę z napisami od kolumny ikoną poprzez dodanie do tagu Death znajdującego się w elemencie okresie Hobbit margin-left 20 pikseli w Ustaw my również kolor paragrafu na szary brawo dodatkowo zwiększy nieco odstęp pomiędzy poszczególnymi liniami zamkniętego tekstu czyli jego interlinie interlinie ustawiamy poprzez regułę Reinhard ustawienie line-height 1,5 oznacza że wysokość linii ma być półtora razy większa niż wielkość czcionki elementu p tekst wygląda Teraz znacznie lepiej widzimy że interlinię ułatwia czytelność możemy więc dodać ją do wszystkich elementów p na stronie w tym celu stwórzmy nowy selektor wybierzmy wszystkie taki b i skopiuj regułę wpisaną przed chwilą jeszcze tylko jedna zmiana odsuniemy od siebie elementy Eli znajdujące się w sekcji zainteresowania dodając im margines Dolny 40 pikseli ekstra Ta sekcja wygląda teraz naprawdę super i [Muzyka] a w tej lekcji zajmiemy się linkami na naszej stronie Zacznijmy od szybciej powtórki i Dodajmy linki do firm w których już pracowaliśmy obejmujemy więc nazwę firmy linkiem a Dodajemy do niego atrybut Chef i wpisujemy adres strony internetowej danej firmy Wszystko działa okej Co ciekawe linki mogą prowadzić nie tylko do innych stron internetowych przykładowo link możemy ustawić tak aby po kliknięciu w niego otworzył się nasz klient pocztowy Przejdźmy więc do naszego tagu adres tak samo jak w przypadku linków wskazujących na inne strony internetowe obejmujemy adres mailowy Tagiem a w atrybucie HF wpisujemy adres e-mail poprzedzając go specjalnym prefiksem mail to głęboko prefiks ten powie przeglądarce żeby po kliknięciu na zawartość linku otworzyła program pocztowy a nie próbowała otwierać stronę internetową Sprawdźmy jak to działa w przeglądarce Jak widzimy otworzył się klient pocztowy z nową wiadomością której adresatem jest podany przez nas adres email to bardzo zgrabne udogodnienie można też ustawić link do numeru telefonu Jest to szczególnie wygodne dla użytkowników mobilnych którzy oglądają naszą stronę na komórce jeśli kliknąć oni na taki link to numer sam się wybierze na ekranie telefonu a jak to zrobić bardzo podobnie jak z mailem Jednak zamiast prefiksu mail to musimy użyć prefiksów tel i dodać numer który chcemy wybrać hotel pomimo tego że wirtualne CV jest niezwykle przydatne to wielu pracodawców wymaga aby dostarczyć im CV w formie pliku pdf dodamy teraz link do pobrania takiego pliku w naszym CV jeśli posiadacie swoje CV wersji PDF to najpierw wrzućmy je na jakąś darmową stronę przechowującą pliki na przykład go File i o ja swoje CV w PDF mam już przygotowany jeśli nie masz swojego CV w formacie PDF to bez obaw Użyj przygotowanego przez nas pliku pdf żeby przećwiczyć dodawanie linków na stronie link do tego pliku jest dostępny w opisie lekcji płytki wejdę więc na stronę i wybiorę uploadfiles a następnie mój plik i kliknąłem przycisk upload widzimy że plik PDF się dodał Kliknij teraz w link Jak widzimy Po kliknięciu na download dochodzi do pobrania pliku dokładnie takiego zachowania potrzebujemy w naszym wirtualnym CV kliknij my więc prawym przyciskiem myszy na download i wybierzmy Kopiuj adres linku Wróćmy do naszej strony następnie dodajemy w nagłówku tak a ich piszmy atrybut HF po czym w kleimy skopiowany link wchodzimy w treści targów piszmy Pobierz CV ale pojawił się link Jeśli klikniemy na niego to widzimy że z naszego wirtualnego CV można już pobrać plik PDF super zajmiemy się teraz oscylowanie tego linku zarówno span jaki tak a mają Display inline przez co umieszczone są w jednej linii powinny świeżo dodany tak atakiem death tak Death ma Display Block dzięki temu link przeskoczy do następnej linii do naszego linku Dodajmy klasę TV download link Dzięki temu będziemy mogli swobodnie stylizować ten element bez obawy że dodane reguły wpłyną na inne linki na stronie najpierw dodamy obramowanie w CSS do naszego rynku czyli elementu z klasą CV downloading Dodajmy regułę border 2 piksele Solid o kolorze cornflower blue wśród zmienimy kolor tekstu w linku na czarny A dodatkowo pozbądź my się podkreślenia ustawiając regułę text-decoration none w Dodajmy elementowi padding tak aby odsunąć nieco tekst od ramki wpisz my więc padding górny i Dolny 10 pikseli a prawy i lewy 20 pikseli Witam serdecznie Co tutaj się stało Zobaczmy do devtool Suv Facebook Live przeskoczył do kolejnej linii i zajął ją całą tak jak chcieliśmy ale co się stało z parkingami na rynku Zobaczcie że tekst przycisku znajduje się dokładnie w dupie ale jego obramowanie wypłynęło po Sativa jeśli spróbujemy ustawić margines Górny żeby odsunąć go od góry to widzimy że to nic nie daje jest to domyślne zachowanie elementów z Display inline dodawanie marginesów i parkingów w pionie nie powoduje przemieszczania się treści elementu tak jak w przypadku elementów z Display Block Jak sobie z tym poradzić możemy użyć właściwości Display która łączy w sobie niektóre cechy Display Block i Display inline wygodnie taka właściwości ma wartość inline-block ustawienie Display inline-block powoduje że element dalej będzie wyświetlał się w jednej linii tak jak elementy Display inline jednak dodanie marginesów w pionie poskutkuje jeszcze nim się elementów tak jak w przypadku elementów z Display Block dodajemy zarówno Display inline-block jaki margin-top 20 pikseli dostali naszego rynku Dla lepszego efektu wizualnego Dodajmy mu też border-radius 26 pikseli Jak widzimy ta reguła ponownie w bardzo ładny sposób wygładzania krawędzi elementu zanim przejdziemy dalej To słowo o tym jak działają linki w HTML Zobaczcie że linki domyślnie mają niebieski kolor i podkreślenie Czasami jednak mają kolor fioletowy o co w tym chodzi na fioletowo zaznaczone są linki które już kiedyś odwiedziliśmy dodatkowo linki wspierają nawigację przy użyciu klawiatury Jeśli wciśniemy Tab to linki zostaną otoczone obramowaniem wciskając dalej Tab możemy przechodzić pomiędzy rynkami na naszej stronie wciskając fifty ich możemy wrócić do poprzedniego zaznaczonego ringu wciśnięcie entera mając tak zaznaczony link spowoduje że przeglądarka przejdzie do adresu podanego linku teraz na przykład wciśniemy któryś z linków ale nie puszczaj my lewego klawisza myszy widzicie link zmienił kolor na czerwony dopóki trzymaliśmy wciśnięty klawisz bardzo ważne jest to żeby pamiętać o tym że nasz link zmienia stany i powinien wyświetlać się inaczej w zależności od stanu w którym się znajduje dodając własne Style do naszego linku popsuł liśmy to zachowanie przykładowo jeśli Przytrzymam lewy przycisk myszy to nikt nie zrobił się czerwony jak poprzednio jedynie zaznaczenie tabem działa poprawnie aczkolwiek teraz gdy przycisk jest zaokrąglony prostokąt na obramowanie Wygląda trochę dziwnie poprawny to wszystko gdy poznamy teraz nowy mechanizm CSS pseudoklasy Brzmi strasznie ale bez obaw pseudoklasy pozwalają nam dodawać Style do elementów które są w różnych stanach zaczniemy od bardzo prostego przykładu i zmienimy Style dla rynku kiedy znajduje się nad nim kursor żeby to zrobić wybierzmy selektor naszego linku czyli TV downloading a następnie dodajemy dwukropek teraz wpisz my stan który nas interesuje stan w którym nad elementem znajduje się kursor nazywa się hover dla takiego elementu możemy dodać następujące Style kolor White i background-color cornflower Blue jeśli nad elementem o klasie CV download link znajduje się więc kursor to kolor tekstu zmieni się na biały a kolor tła na niebieski Sprawdźmy efekt Wygląda super prawda zajmijmy się teraz pozostałymi stanami zaczynają stanu Focus jeśli przejdziemy do naszego elementów klikając Tab lub shift It Up to pojawia się brzydka obramówkę o której już wspominaliśmy ten stan to właśnie Focus wybierzmy więc nasz element TV downloading i pseudoklasę Focus następnie dodajemy do niej regułę outline dzięki niej pozbędziemy się tej obramówki dodatkowo zmienimy kolory na takie same jak dla stanu Over czyli Color White i background-color cornflower Blue gdy po odświeżeniu strony widzimy że fokusuje nad stawem dany element brzydka linia zniknęła A zamiast tego pojawiły się nowe barwy super po przytrzymaniu lewego przycisku myszy na naszym rynku nie dzieje się nic specjalnego żeby ostylować ten stan użyjemy pseudoklasy Active dla selektora CV download Active Dodajmy regułę text-decoration underline po odświeżeniu strony widzimy że przytrzymując teraz przycisk nasz link zostaje podkreślony super udało nam się oscylować wiele stanów naszego rynku Na koniec dodajemy prawdziwą wisienkę na torcie Zobaczcie że teraz gdy najeżdżam myszką na link to kolor tła zmienia się natychmiastowo chcielibyśmy aby zmiana ta następowała płynnie czyli żeby kolor tła przechodził powoli od białego do niebieskiego CSS pozwala nam na osiągnięcie tego efektu do naszego podstawowego selektora CV download nich Dodajmy regułę Transition z angielskiego przejście reguła Transition jako wartość oczekuje nazwy reguły którą chcemy zajmować oraz ile czasu ma trwać nasza animacja chcemy żeby z animowany został background-color piszemy więc Transition background-color pół sekundy Co to znaczy dla przeglądarki mówi jej tyle jeśli kiedykolwiek zmieni się kolor tła dla elementu klasy CV download link to zanim mój kolor tła w czasie pół sekundy Zobaczmy efekt zmiana koloru tła odbywa się teraz powoli dając bardzo przyjemny efekt przechodzenia od jednego koloru do drugiego najeżdżając na link zmieniliśmy stan elementu na hover a co za tym idzie zmieniliśmy również jego buckland kolor Zobaczcie że animacja uruchamia się za każdym razem gdy zmieniamy wartość reguły background-color najpierw gdy background-color przechodzi od białego do niebieskiego apotem drugi raz gdy kolor Przechodzi od niebieskiego do białego Warto dodać że Transition można zastosować dla wielu reguł CSS poznane przez nas kolor border background Color Display font-size i inne mogą być animowane całą listę znajdziecie w opisie lekcji możemy animować wiele reguł CSS w jednym miejscu żeby to zrobić po wartości background-color pół sekundy Dodajmy przecinek i wpisz my kolor pół sekundy dzięki temu również kolor tekstu będzie się zmieniał w sposób płynny nasz link wygląda teraz naprawdę świetnie [Muzyka] zajmijmy się już ostatnimi szlifami w naszym CV najpierw zwiększymy nieco odstęp treści CV od górnej krawędzi kartki W tym celu do wypad kingtop dla hedera Musimy pamiętać że reguła wyżej section Heather dodaję już regułę padding dla samego hedera musimy dodać więc tylko padding-top 60 pikseli w ten sposób napiszemy padding-top znajdujący się wyżej dobrze teraz przesuniemy jeszcze nazwę naszego zawodu trochę bliżej imienia i nazwiska W tym celu nad piszmy margines Dolny element uh-1 który ustawiła mu przeglądarka ustawmy go na 10 pikseli moglibyśmy również nieco oddalić od siebie poszczególne elementy na listach w sekcjach W tym celu każdemu elementowi Eli znajdującemu się na stronie ustawmy margin-bottom 15 pikseli możemy tego dokonać zmieniając selektor który poprzednio dodawał ten margines jedynie w ten w ten sposób wszystkie elementy Eli zostały od siebie odsunięte Poznajmy teraz jeszcze jedną regułę CSS pozwoli nam ona dodawać cień pod elementami a jej nazwa to box-shadow na początku dodamy cień pod naszym linkiem do pobrania CV od szukajmy więc selektor CV download link box-shadow przyjmuje szereg wartości pierwsze dwie mówią nam o tym o Ile pikseli cień ma być przesunięty względem elementu któremu nakładamy cień trzecia wartość to Blur czyli rozmycie koloru cienia jako czwartą wartość możemy podać kolor cienia brzmi to niezwykle abstrakcyjnie więc żeby lepiej zrozumieć co jest grane odświeżamy stronę i zerknij my w devtools z Odszukaj my naszą regułę tak jak wspominaliśmy pierwsze dwie wartości mówią nam o tym o Ile pikseli cień ma być przesunięty względem elementu któremu nakładamy cienie czyli w naszym przypadku naszemu rynkowi zmieniając pierwszą wartość możemy przemieszczać go w poziomie A zmieniając drugą w pionie trzecia wartość odpowiada za rozmycie im wyższa tym większe rozmycie cienia z natomiast czwarta wartość to po prostu kolor jaki przyjmuje cień skoro rozumiemy Już Jak działa reguła box-shadow to spróbujmy dodać cień pod całym CV Skopiuj regułę i wklejamy ją do Syrii hedera i sekcji które tworzą nasze CV Sprawdźmy efekt No i niestety dzień dodał się do każdego elementu osobno przez co widzimy cienie pomiędzy sekcjami tak naprawdę nie mamy jednego elementu który ma takie wymiary jak nasze CV to Heather i tagi section Tworzą go układając się jeden na drugim obejmy więc tak Heather i wszystkie taki section w tak div psuła yyy Dajmy mu klasę container chce ssi wybierzmy teraz ten kontener i Dodajmy mu regułę box-shadow usuniemy ją również ze styl dla hedera i section powinniśmy się teraz pozbyć poziomych linii które powstały na krawędziach elementów jest nieco lepiej ale dalej mamy problem z tyle dzięki którym nasza kartka znajduje się na środku są w nieodpowiednim miejscu skoro to container jest teraz Głównym elementem obejmującym nasze CV to on powinien je przyjąć i ustawić się na środku Przenieśmy więc zarówno reguł f960 pikseli jaki margin 0 auto ze styl dla Hitlera i section i I nadajemy je targowi o klasie container nie możemy to samo zrobić z kolorem tła nie ma sensu dodawać go do każdego elementu osobno voila diffs Tagiem container materac 960 pikseli jest wyśrodkowane i rzuca cień na niebieskie tło nasze CV możemy uznać za zakończone [Muzyka] nasze CV jest już gotowe czas zaprezentować je światu w folderze w którym znajdują się nasze pliki ze stroną widzimy również ścieżkę do naszych plików Jeśli ją kopiujemy a następnie w kleimy w nowym oknie przeglądarki gdy dodamy na końcu nazwę pliku index.hr ale to Po wciśnięciu enter nasza strona otworzy się zupełnie tak jak każda inna strona dostępna w internecie do tej pory pracowaliśmy tylko na naszym komputerze Cały czas mamy więc dostęp do naszego pliku index HTML jeśli przesłali byśmy komuś ten link to nie udałoby się mu otworzyć tej strony Adres naszej strony to w tym momencie po prostu ścieżka do pliku na naszym komputerze aby nasza strona mogła być odwiedzana przez innych musimy opublikować ją w internecie moglibyśmy zainstalować program który służy do publikowania stron internetowych tak zwany serwer na naszym komputerze jednak ma to szereg problemów po pierwsze nasza strona byłaby dostępna w internecie tylko wtedy gdy nasz komputer był włączony dodatkowo Gdyby coś się stało z naszym serwerem to sami musielibyśmy go naprawiać nie chcemy tego robić na szczęście z pomocą przychodzą nam wyspecjalizowane firmy zajmują się one tak zwanym hostingiem czyli utrzymywaniem serwerów i dbanie o to aby działały 24/7 firmy takie udostępniają później swoim klientom miejsce na serwerze na które mogą oni wgrać strony internetowe oczywiście tego typu usługi są zazwyczaj płatne Jednak wiele z firm hostingowych oferuje darmowe plany dla użytkowników indywidualnych skorzystamy z usług jednej z takich firm Network z native i dostarcza świetną usługę która dodatkowo jest za darmo więc z czystym sercem możemy ją polecić Przejdźmy więc do rejestracji wnetfm ja użyję do tego swojego maila Płońsk po podaniu maila i wybraniu hasła musimy potwierdzić rejestrację na naszą skrzynkę powinien przejść maila od Netii Five klikamy w mail Szykujemy się przez quick start guide that If I ma bardzo dużo funkcji my na razie skupimy się na zakładce sites Jak wgrać naszą stronę do Nerf nic prostszego Wystarczy że prze ciągniemy folder z naszym CV i u prosimy go w obszarze one two different site without Getting it to wszystko widzimy że nasza strona się wgrywa gdy zobaczymy komunikat your site is employed to znaczy że nasza strona została poprawnie opublikowano w sieci super adres naszej strony znajduje się na górze Wygląda trochę dziwnie bo netif samo wygenerowało nazwę naszej strony możemy to zmienić przechodząc dosyć Settings If All site name wpisać nazwę naszej strony przykładowo Filip malcharczyk Zobaczcie że zmienił się też adres strony możemy teraz w niego kliknąć z pola nasza strona jest teraz dostępna w internecie ten adres możecie już wysyłać znajomym czy też potencjalnym rekruterom pamiętajmy że po każdej zmianie W naszym kodzie aby zobaczyć te zmiany na stronie w internecie musimy wygrać zmienione pliki do nekliff wystarczy przejść do zakładki diploid i ponownie przeciągnąć katalog ze stroną do wskazanego obszaru [Muzyka] okej nasze CV jest już gotowe napisaliśmy całkiem sporo kodu HTML w tym gąszczu targów i styli dość łatwo się pogubić e fajnie by było gdyby istniała możliwość aby zweryfikować czy kod który napisaliśmy jest poprawny z pomocą przychodzi nam organizacja w tracie stworzyła ona specjalny program którego możemy użyć aby sprawdzić czy nasz kod HTML spełnia wszystkie powszechne standardy wystarczy przejść do www.e-teatr.pl www.org i wkleić adres naszej strony w pole adres klikamy czek okazało się że mamy kilka błędów an image element Must Have download under certain conditions o co w tym chodzi obrazki potrafią niejednokrotnie przekazać więcej niż tysiąc słów mają jednak jedną bardzo dużą wadę w kontekście stron internetowych internet jest niezwykle popularny korzystają z niego dzieci ludzie młodzi i seniorzy osoby doświadczone oraz nowe w świecie technologii w końcu Korzystając z niego ludzie którzy mają różne niepełnosprawności obrazki nie przekazują żadnej treści ludziom z poważnymi wadami wzroku aby korzystać z internetu osoby takie na codzień używają czytnika stron internetowych który syntetycznym głosem czyta dla nich treść strony Pokażę wam o co chodzi mam zainstalowany na swoim komputerze program nvidii się pomaga ludziom mającym problemy ze wzrokiem korzystać ze stron internetowych wejdę teraz na naszą stronę Filip Mam tarczyk CV baner punkt orientacyjny grafika bez etykiety aby uzyskać brakujące opisy obrazów Otwórz menu kontekstowe nagłówek poziom 1 Filip Mam tarczyk front-end developer link Pobierz CV lista elementów 4 numer telefonu link 123 456 789 e-mail link Filip kropka Mam tarczyk małpa gmail.com data urodzenia 10 września 1993 roku miejsce zamieszkania Kraków koniec lista słyszycie czytnik przeczytał stronę Jednak gdy doszedł do naszego zdjęcia powiedział grafika bez etykiety aby uzyskać brakujące opisy obrazów Otwórz menu kontekstowe czytnik zobaczył że dodaliśmy taki mg na stronę ale nie w stanie rozpoznać Co znajduje się na zdjęciu każdy z obrazków na naszej stronie powinien mieć dodatkowy atrybut alt Do czego służy alt mówią przeglądarce jaki tekst wyświetlić gdyby nie udało się jej załadować obrazka w wyniku pomyłki w podawaniu atrybutów serce lub problemów z Internetem dodatkowo Jednak gdy czytnik napotka obrazek to przeczyta on treść która znajduje się w ta Guard Dodajmy więc alt czyli tekst alternatywny do naszego taką ING reprezentującego zdjęcie naszej osoby ja wpiszę zdjęcie profilowe Filipa malcharczyk A w tym przypadku nasz tekst alternatywny zupełności wystarcza jednak gdybyśmy dodali zdjęcie na którym dużo się dzieje to w art powinniśmy wpisać tekst zwięzły jednocześnie dość dobrze opisujący dane zdjęcie po zapisaniu zmian i wrzuceniu nowej wersji strony na netif i usłyszymy że czytnik opowie użytkownikowi Co znajduje się na obrazku Filip Mam tarczyk CV bannery punkt orientacyjny grafika zdjęcie profilowe Filipa mamcarczyk a nagłówek poziom 1 Filip Mam czarczyk No dobra ale co z kochankami walidator powiedział nam że one też muszą mieć atrybut alt możemy dodać do nich tekst alternatywny jednak nie ma to zbyt wiele sensu po co czytnik miałby przeczytać że w danym miejscu znajduje się ikonka ikonki są ozdobami na stronie jeśli usunęliśmy teraz ikonki z naszej strony to treści ucierpiały na tym są one dodatkiem ładnymi przyjemnym ale tylko dodatkiem w tym momencie czytniki tak nie przeczytał ikonki ale walidator i dalej się to nie podoba co możemy zrobić można ustawić alt na pustą wartość i to wszystko czytnik nic nie przeczyta a walidator nie pokażę błędu nvidii ma jeszcze jedną ciekawą funkcję pozwala użytkownikowi używać klawiatury Aby czytać naszą stronę internetową Jeśli będę naciskać ha to czytnik będzie przechodził do kolejnych nagłówków zgodnie z hierarchią Filip Mam tarczyk nagłówek poziom 1 główny punkt orientacyjny o mnie nagłówek poziom 2 doświadczenie zawodowe nagłówek poziom dwa języki nagłówek poziom 2 wykształcenie nagłówek poziom 2 zainteresowania nagłówek poziom 2 lista elementów 4 kino nagłówek poziom 3 literatura nagłówek poziom 3 gry planszowe nagłówek poziom 3 bieganie nagłówek poziom 3 dlatego ważne jest aby nagłówki stosować w kolejności od H1 do H6 bez przeskakiwania poziomów dobrze uporządkowany nagłówki powinny móc tworzyć ładny i logiczny spis treści naszej strony internetowej podobnie jak dzieje się to w przypadku edytorów tekstowych takich jak Word warto wspomnieć że na stronie internetowej powinien występować tylko Jeden nagłówek najwyższego stopnia h1e opisywać o czym będzie Strona internetowa którą właśnie czytamy to Zauważcie też co się stało gdy czytnik napotkał listę lista elementów 4 numer telefonu przeczytał ile będzie elementów listy teoretycznie nic nie stany Oby na przeszkodzie aby listę taką którą mamy w tagu adres stworzyć używając divów czytnik nie byłoby się wtedy że jest to lista i strona byłaby trudniejsza w zrozumieniu ze słuchu warto używać więc semantycznych targów tak jak zrobiliśmy to między innymi w Polsce adresem w tej lekcji nauczyliśmy się sporo o dostępności stron internetowych jest to temat bardzo rozbudowany i zrobienie dostępnej strony internetowej i jest trudne chcieliśmy jednak o tym wspomnieć gdyż zależy nam aby od samego początku uczyć poprawnych praktyk budowania stron internetowych Bądźmy odpowiedzialnymi programistami i budujmy strony które mogą być użytkowane przez wielu ludzi niezależnie od ich niepełnosprawności ruchu