Podstawy HTML + CSS w dwie godziny - kurs krok po kroku!

Od półkowych nagrań warsztatowych po Bezpłatny kurs dla początkujących Pierwotnie planowane warsztaty zdalne stały się osobiste, pozostawiając nagrane lekcje niewykorzystane. Materiały te zostały zredagowane w darmowy, dwugodzinny samouczek HTML i CSS skierowany do absolutnie początkujących. Znaczniki czasu sekcji i wymagane pliki do pobrania ułatwiają wstrzymywanie i wznawianie. Wystarczy komputer i internet, a wsparcie publiczności sygnalizuje, czy produkować więcej.

Zbuduj internetowe CV z podstawami HTML Projekt jest wirtualnym CV zbudowanym krok po kroku w prostym HTML. Kodowanie łączy teorię z praktyką, kończąc na udostępnianym CV online. Zacznij od traktowania programowania jako pisania tekstu w prostym edytorze. Każdy krok zamienia tekst w ustrukturyzowaną zawartość internetową.

Zamień zwykły tekst w stronę internetową za pomocą indeksu.html Wpisz swoje imię i nazwisko w edytorze tekstu i zapisz plik jako indeks.html w wybranym folderze. W systemie Windows wpisz .rozszerzenie html jawnie; w systemie macOS wybierz format strony internetowej lub dołącz rozszerzenie. Rozszerzenie HTML sprawia, że system otwiera go w przeglądarce. Otwarcie pliku wyświetla pierwszą stronę internetową z wpisanym tekstem.

Edytuj, Zapisz, odśwież: podstawowa pętla programistyczna Aby zmodyfikować stronę, otwórz indeks.html w edytorze poprzez " Otwórz za pomocą."Dokonaj zmiany, Zapisz i odśwież przeglądarkę, aby natychmiast ją zobaczyć. Tworzenie stron internetowych wymaga tylko edytora i przeglądarki. Ta ciasna pętla stanowi podstawę wszystkich dalszych postępów.

Pracuj szybciej w Visual Studio Code Visual Studio Code to darmowy, wieloplatformowy edytor, który przyspiesza pisanie i zarządzanie kodem. Otwórz folder projektu, aby wyświetlić pliki na pasku bocznym i edytować indeks.html bezpośrednio. Przełączaj się między ciemnymi i jasnymi motywami i ukryj panele, aby zmniejszyć bałagan. Środowisko jest dostosowane do rozszerzonych sesji kodowania.

Trzymaj przeglądarkę pod ręką, zaleca się Chrome Umieść przeglądarkę obok edytora, aby szybko wyświetlić podgląd zmian. Każda przeglądarka działa,ale Google Chrome upraszcza śledzenie. Przy widocznym obu oknach Testowanie i iteracja stają się płynniejsze. Mniejsze przełączanie okien oznacza szybsze uczenie się.

Struktura treści za pomocą tagów HTML i H1 HTML zawija zawartość w tagach otwierających i zamykających za pomocą nawiasów kątowych. Umieszczenie swojego imienia i nazwiska w tagu h1 powoduje, że jest to duży nagłówek. Przeglądarka ignoruje nazwy znaczników w danych wyjściowych i stylizuje załączony tekst. Kolorowanie składni VS Code odróżnia znaczniki od treści dla przejrzystości.

Dodaj rolę i biografię z rozpiętością i akapitem Użyj span dla krótkiego, wbudowanego tekstu, takiego jak Stanowisko pod nazwą. Zatrudnij p na dłuższy akapit biograficzny. Podziały wierszy w źródle nie wymuszają przerw na stronie; akapity przepływają automatycznie. Prawidłowe otwieranie i zamykanie ma większe znaczenie niż spacje.

Podkreśl części, zagnieżdżając znaczniki Tagi można zagnieżdżać, aby utworzyć nacisk bez zmiany struktury. Zawiń określone słowo w znacznik b, aby pogrubić je w akapicie. Daje to efekt pogrubionego formatowania bezpośrednio w HTML. Przemyślane zagnieżdżanie poprawia czytelność i ostrość.

Zmniejsz tarcie dzięki automatycznemu zapisywaniu W VS Code Włącz automatyczne zapisywanie przy zmianie okna, aby zmiany były kontynuowane po przejściu do przeglądarki. Ręczne zapisywanie przed każdym odświeżeniem nie jest już wymagane. Małe optymalizacje przepływu pracy łączą się podczas aktywnych eksperymentów. Iteracja staje się niemal natychmiastowa.

Użyj poziomów nagłówka H1-H6, aby uzyskać przejrzystą hierarchię Zachowaj górną nazwę jako główny nagłówek i przypisz h2 do tytułów sekcji, takich jak doświadczenie i Edukacja. Wyższe liczby dają mniejsze nagłówki, tworząc kontur semantyczny. Przełączanie nagłówków sekcji na h2 poprawia równowagę wizualną. Spójna hierarchia pomaga w skanowaniu i zrozumieniu.

Reprezentuj doświadczenie z ul i li Przeglądarka zwija dodatkowe spacje, więc same podziały wierszy nie oddzielają wpisów. Użyj ul dla nieuporządkowanych list i li dla każdej roli, aby uzyskać odpowiednie odstępy i punktory. Zastąp br znacznikami listy semantycznej dla struktury. Wyraźne listy zwiększają czytelność.

Zachowaj czytelność znaczników dzięki wcięciom Wcięcie zagnieżdżonych tagów, aby odzwierciedlić strukturę dokumentu. Czyste formatowanie sprawia, że nawigacja po rosnących plikach jest łatwiejsza i mniej podatna na błędy. Wizualizacje VS Code obsługują wyrównywanie zagnieżdżonych bloków. Tidy code przyspiesza przyszłe edycje.

Szczegółowe informacje o Edukacji i powiązaniu z instytucjami Zbuduj listę edukacji z wpisami ul i li zawierającymi daty, szkołę i kierunek studiów. Kliknij nazwę szkoły, zawijając ją w tag A. Podaj docelowy adres URL za pomocą atrybutu href wewnątrz tagu otwierającego. Kliknięcie linku powoduje przejście do witryny zewnętrznej.

Zacznij w dowolnym momencie: tła nie muszą być techniczne Programowania można się nauczyć bez formalnej edukacji CS, nawet gdy zaczynasz w wieku dwudziestu kilku lat. Zasoby Online wystarczą, aby rozpocząć i postępować. Późne rozpoczęcie nie jest barierą; decydująca jest stała praktyka. CV internetowe to praktyczna prezentacja nowych umiejętności.

Personalizuj za pomocą zdjęcia profilowego Zapisz kwadratowe zdjęcie w tym samym folderze co indeks.html. Wstaw go nad głównym nagłówkiem za pomocą znacznika img. Podaj nazwę pliku z rozszerzeniem za pomocą atrybutu src, aby go wyświetlić. Obraz pojawia się w linii obok treści.

Ogranicz wymiary obrazu szerokością i wysokością Zmniejsz duże zdjęcia, dodając atrybuty szerokości i wysokości do znacznika img. Określ wartości pikseli, takie jak 150 pikseli, Aby uzyskać spójny rozmiar. Elementy Void, takie jak img, można zapisać w zwartej, samozamykającej się formie. Powściągliwy awatar poprawia równowagę układu.

Wprowadzenie CSS do stylu strony HTML zapewnia strukturę, podczas gdy CSS dostarcza kolory, czcionki, odstępy i układ. Pomyśl o CSS jako o warstwie estetycznej-farbie, wykończeniach i dekoracjach—nad gołą strukturą. Stylizacja przekształca stronę tekstową w czytelną, atrakcyjną witrynę. Kolejne kroki zmieniają rozmiary kolorów i typów dla przejrzystości.

Wypróbuj style inline, aby nauczyć się podstaw CSS Użyj atrybutu style, aby zastosować szybki CSS, taki jak color: gray; na rozpiętości. Dostosuj rozmiar czcionki W h1 i h2, aby ustawić różne skale nagłówków. Zapisz reguły jako właściwość: wartość; pary oddzielone średnikami. Style Inline oferują natychmiastową informację zwrotną podczas eksperymentowania.

Standaryzacja struktury dokumentu Dodaj aby zapewnić renderowanie zgodne ze standardami. Załącz wszystko w html, podziel metadane i zawartość na head i body oraz umieść tytuł w head. Tytuł zastępuje domyślną nazwę pliku Karty. Wcięcie elementów nadwozia wzmacnia nową strukturę.

Scentralizuj Style za pomocą znacznika stylu i selektorów Zdefiniuj znacznik stylu w head i zapisz selektory, takie jak h2 { font-size: 28px;}. Usuń powtarzające się Style inline z pasujących elementów. Jedna reguła kontroluje teraz wszystkie instancje, zmniejszając powielanie. Rozdzielenie obaw poprawia łatwość konserwacji.

Przenoszenie Prezentacji z atrybutów HTML do reguł CSS Przenieś atrybuty prezentacyjne do CSS, takie jak img { width: 150px; height: 150px; }. W CSS używaj dwukropków i średników bez cudzysłowów. Brakujące średniki przerywają parsowanie, które VS flagi kodu z błędami. Koncentracja stylizacji w CSS utrzymuje strukturę HTML.

Wyodrębnij style do zewnętrznego arkusza stylów Stwórz styl.css, przenieś tam wszystkie CSS i Usuń tag stylu z head. Połącz arkusz stylów w head z elementem void link. Dzięki izolowanym stylom HTML i CSS mogą ewoluować niezależnie i pozostać zorganizowane. Karty VS Code upraszczają przełączanie między plikami.

Połącz zewnętrzny arkusz stylów, aby oddzielić strukturę i styl Połącz HTML z zewnętrznym plikiem CSS za pomocą linku z rel="arkusz stylów" i href wskazujący styl.css. Przeglądarka odczytuje to jako " załaduj arkusz stylów ze stylu.css."Strona może się nie zmieniać wizualnie, ale baza kodu staje się czystsza, oddzielając zawartość od prezentacji. Profesjonalne witryny przechowują HTML i CSS w różnych plikach, aby zapewnić łatwość konserwacji.

Przełącz stronę na Arial z font-family Ustaw nowy krój, deklarując font-family: Arial w CSS. Zastosowanie go indywidualnie do nagłówków, rozpiętości, akapitów i list zmienia tekst zgodnie z potrzebami. Powtarzanie tej samej reguły w wielu selektorach jest kłopotliwe. To wskazuje na lepsze podejście do zdefiniowania go raz.

Zadeklaruj czcionki raz na ciele poprzez dziedziczenie Umieść font-family: Arial na ciele, aby wpłynąć na wszystkich potomków. Pomyśl o DOM jako o drzewie genealogicznym, w którym ciało jest przodkiem, a elementy takie jak h1, span, ul, li i A są jego dziećmi i wnukami. Dziedziczne właściwości, takie jak rodzina czcionek, propagują się automatycznie do potomków. Jedna reguła utrzymuje teraz spójność typografii na całej stronie.

Zobacz, jak kolory dziedziczą, a kiedy nie Ustawienie koloru: czerwony na ciele zmienia większość tekstu na Czerwono poprzez dziedziczenie. Elementy z własnym kolorem zachowują go, a linki otrzymują niebieski kolor z arkusza stylów agenta użytkownika przeglądarki. Dziecko o specjalnie kolorowym elemencie dziedziczy kolor tego dziecka, a nie czerwień ciała. Centralizacja stylów zmniejsza kod i ułatwia późniejsze zmiany.

Wzbogać CV O zainteresowania i języki Dodaj zainteresowania za pomocą ul przedmiotów li, takich jak Kino, Literatura, Gry planszowe i bieganie. Wstaw sekcję języków z biegłością, umieszczoną między doświadczeniem a edukacją. Wraz z rozwojem dokumentu znalezienie odpowiedniego miejsca staje się trudniejsze. Proste separatory wizualne maskowałyby tylko problem strukturalny.

Grupuj powiązane treści z sekcją i nagłówkiem "O mnie" Zawiń każdy powtarzający się blok-h2 i jego zawartość-wewnątrz sekcji. Dodaj O mnie h2 powyżej akapitu wprowadzającego i zawiń go również, aby uzyskać spójność. Struktura staje się wyraźniejsza i łatwiejsza w nawigacji. Jednolite bloki przygotowują stronę do lepszej stylizacji i konserwacji.

Użyj nagłówka dla górnej i głównej zawartości rdzenia Pogrupuj obraz, tytuł główny i etykietę zawodu w nagłówku, aby zaznaczyć górny obszar. Umieść wszystkie sekcje w głównym, aby oznaczyć podstawową zawartość strony. Te znaczniki semantyczne nie zmieniają wizualizacji, ale znacznie poprawiają przejrzystość. Semantyczny HTML pomaga tobie i innym zrozumieć intencje podczas późniejszego powrotu do kodu.

Otwórz Chrome DevTools i sprawdź stronę NA ŻYWO Uruchom DevTools (Zakładka elementy), aby zobaczyć dom na żywo i style zastosowane z określonych plików. Najechanie kursorem podświetla elementy na stronie. Edycja stylu, takiego jak rozmiar czcionki, pokazuje natychmiastowe, tymczasowe efekty. Odświeżanie przywraca zmiany, więc eksperymentowanie jest bezpieczne.

Wybierz elementy, odczytaj obliczone wartości i bezpiecznie Edytuj HTML Użyj selektora elementów, aby skierować dowolny węzeł i wyświetlić jego style i panele obliczone. Dziedziczenie jest widoczne, a style user-agent wyjaśniają wartości domyślne, takie jak niebieskie linki. Obliczone ujawnia wartości końcowe po wszystkich kaskadach. Możesz także edytować tekst HTML na miejscu, aby prototypować długość zawartości, wiedząc, że odświeżenie go resetuje.

Zrozumieć Wyświetlacz: blok wypełnia wiersz, Inline pasuje do tekstu Element blokowy, taki jak h1, rozciąga się na całej szerokości, przesuwając następny element poniżej. Element wbudowany, taki jak span, zajmuje tylko szerokość jego zawartości. Dwa wbudowane przęsła siedzą obok siebie, tak jak słowa w zdaniu. DevTools ujawnia wyświetlanie każdego elementu i jego pochodzenie.

Rozpoznawanie typowych elementów wbudowanych i blokowych oraz wartości domyślnych Elementy wbudowane obejmują span, b, a i kursywę. Nagłówki i podobne elementy są domyślnie blokowe ze względu na style przeglądarki. DevTools pokazuje te wartości domyślne jako reguły stylu user‑agent i wyświetla obliczony wyświetlacz. Elementy Inline przepływ wewnątrz tekstu; bloki stos pionowo.

Opanuj Model pudełka, aby kontrolować przestrzeń Każdy element zawiera zawartość, dopełnienie, obramowanie i margines. szerokość i wysokość definiują pole zawartości. DevTools wizualizuje te warstwy za pomocą wyraźnego diagramu i kodowania kolorami. Wyobraź sobie zdjęcie na ścianie, aby zrozumieć przesunięcia od krawędzi i otaczającej przestrzeni.

Zastosuj Szerokość, obramowanie, dopełnienie i margines w praktyce Ustaw szerokość i wysokość na h1, aby oglądać zawijanie tekstu i przesuwanie sąsiednich elementów. Dodaj jednolitą, kolorową ramkę i zobacz, jak pojawia się w modelu pudełkowym. Wstaw dopełnienie, aby utworzyć wewnętrzne odstępy, a następnie marginesy, aby oddzielić element od innych i od krawędzi strony. Diagram aktualizuje się na żywo, aby odzwierciedlić każdą zmianę.

Użyj skrótów i zrozum kaskadę margines: 20px dotyczy wszystkich stron; późniejszy margines-dolny zastępuje tylko dolny. Czterowartościowy Skrót porządkuje strony zgodnie z ruchem wskazówek zegara: Góra, Prawo, Dół, Lewo. Te same skrócone wzory działają w przypadku wyściółki. Późniejsze deklaracje zastępują wcześniejsze, co wskazuje DevTools, wykreślając zastąpione reguły.

Sekcje spacji i Nagłówek z dopełnieniem i mniejszą liczbą reguł Dodaj dopełnienie do sekcji skrótem o czterech wartościach, aby oddzielić zawartość od krawędzi. Zastosuj identyczne wypełnienie do nagłówka, aby uzyskać spójność. Połącz selektory z przecinkiem, aby jedna reguła stylizowała zarówno nagłówek, jak i sekcję. Rezultatem jest ten sam odstęp Z mniej powtarzalnym kodem.

Ustaw tło ciała i zrozum przezroczystość Wybierz subtelny kolor tła ciała w DevTools, a następnie zatwierdź go w CSS. Elementy potomne pokazują ten kolor Nie poprzez dziedziczenie koloru tła, ale dlatego, że ich własne tła są przezroczyste. Przypisz białe tła do nagłówka i sekcji, aby w razie potrzeby pokryć Kolor nadwozia. Domyślny margines treści 8 pikseli pozostawia cienką ramkę tła strony wokół zawartości.

Ogranicz Szerokość treści, aby przypominała drukowaną stronę Ogranicz nagłówek i sekcję do stałej szerokości kolumny, aby układ wywoływał arkusz A4. Elementy blokowe honorują ustawioną szerokość zamiast rozciągać się całkowicie w poprzek. Poprawia to czytelność i tworzy skoncentrowaną kolumnę treści. Przywróć domyślne powiększenie przeglądarki, aby dokładnie ocenić proporcje.

Wyśrodkuj kolumnę niezawodnie za pomocą automatycznych marginesów margin-left: auto przykleja kolumnę w prawo; dodawanie margin-right: auto równomiernie dzieli resztki miejsca. Skrócony margines: 0 auto ustawia marginesy pionowe na zero, a poziome na auto. Dzięki temu kolumna jest wyśrodkowana niezależnie od szerokości ekranu lub powiększenia. Zwiększ górną i dolną wyściółkę ciała, aby dodać przestrzeń do oddychania nad i pod prześcieradłem.

Ułóż Elementy Poziomo Za Pomocą Flexbox Zamień rodzica w elastyczny pojemnik z wyświetlaczem: flex, aby ustawić dzieci w rzędzie. justify-content: centrum umieszcza elementy w środku poziomo. przestrzeń-między popycha końce do krawędzi z równymi przerwami między przedmiotami, podczas gdy przestrzeń-wokół rozkłada proporcjonalną przestrzeń po obu stronach. Flexbox upraszcza umieszczanie w poziomie bez żonglowania marginesami.

Wyrównaj wzdłuż osi Krzyża za pomocą align-items align-items: wyśrodkuj pionowo wyśrodkuj dzieci w kontenerze flex. flex-start wyrównuje je do góry i flex-end do dołu. Połącz wyrównaj elementy z justify-content, aby kontrolować obie osie jednocześnie w celu precyzyjnego pozycjonowania.

Dodaj dane kontaktowe z adresem i wygnij nagłówek Wstaw dane kontaktowe do elementu adresu w nagłówku, używając ul z elementami li dla telefonu, e-maila, daty urodzenia i miasta. Ustaw nagłówek na display: flex, aby obraz, blok tytułu i adres współdzielały jedną poziomą linię. Użyj align-items: center, aby wyrównać ich pionowe pozycje. Nagłówek staje się schludny i czytelny na pierwszy rzut oka.

Zagnieżdżaj tekst w div I rozdzielaj spację spacją między Zawiń H1 i zakres zawodu w div, aby układały się pionowo, podczas gdy nagłówek pozostaje elastyczny. Div pozostaje na poziomie bloku, więc jego dzieci przepływają jeden pod drugim. Zastosuj justify-content: spacja między nagłówkiem, aby przesunąć zdjęcie w lewo i adres w prawo. Ostateczny układ jest zrównoważony i profesjonalny.

Równomiernie rozstawiony nagłówek z Flexbox Flexbox układa elementy nagłówka poziomo, tak aby pierwszy i ostatni dotykały krawędzi, podczas gdy pozostałe są równomiernie rozmieszczone. Przekształcenie nagłówka w elastyczny pojemnik umieszcza jego dzieci w jednym rzędzie. Układ wydaje się czysty i zrównoważony bez ręcznych odstępów.

Pogrubione, wbudowane etykiety kontaktów i czystsze listy Kategorie kontaktów podkreślają znacznik b, który pogrubia tekst bez łamania linii, ponieważ jest wbudowany. Domyślne punktory listy w częściach nagłówka dodają szum, więc są usuwane za pomocą list-style: none. Znaczniki pozostają zwarte, zachowując czytelność.

Selektory Zakresowe Zapobiegają Skutkom Ubocznym W Całym Miejscu Globalny selektor ul usuwał punktory wszędzie, więc zakres jest zawężony do nagłówka ul, aby wpływać tylko na nagłówek. Odstępy między wierszami są dodawane przez celowanie w nagłówek li i zastosowanie dolnego marginesu. Skoncentrowane selektory zapobiegają przypadkowym zmianom w całej witrynie.

Dodawanie linii adresowych z ikonami Małe ikony PNG pojawiają się przed każdą linią adresu, wstawiając img bezpośrednio do każdej ścieżki li. Image do folderu Obrazy, na przykład obrazy/telefon.png lub obrazy / poczta.png. Ikony poprzedzają tekst, aby na pierwszy rzut oka wzmocnić znaczenie.

Naprawianie zbyt dużych ikon i przywracanie kontrastu Wcześniejszy globalny styl img (150×150) wysadził małe ikony, więc określony adres nagłówka selektora img przywraca Wymiary 16×16. Białe ikony PNG zniknęły na białym tle, więc kolor tła, taki jak cornflowerblue, sprawia, że są widoczne. Precyzyjne selektory i kolory ustalają zarówno skalę, jak i kontrast.

Margines a wypełnienie, wyrównanie w pionie i zaokrąglenie Ikony zyskują przestrzeń oddechową z marginesem i wewnętrzną wyściółką. Margines ustawia element względem sąsiadów, podczas gdy dopełnienie dodaje przestrzeń wewnątrz tła elementu. Wyrównanie w pionie jest korygowane za pomocą vertical-align: middle dla elementów wbudowanych, a zaokrąglone kształty pojawiają się z obramowaniem-promień ustawiony na 16 pikseli lub 50%.

Zastąpienie długich selektorów klasami wielokrotnego użytku Długie selektory potomne ustępują klasom wielokrotnego użytku. Klasa taka jak ikona adresu jest skierowana na wszystkie ikony kontaktu, podczas gdy oddzielna Klasa okręgu zaokrągla rogi dowolnego elementu. Zdjęcie profilowe ponownie wykorzystuje okrąg i jest powiększone do 180 pikseli, udowadniając, że style klas są czyste.

Wypełnianie listy zainteresowań niestandardowymi ikonami Lista zainteresowań pobiera ikony z Iconmonstr-bezpłatne, legalne i konfigurowalne. Pliki png o rozmiarze do 32 pikseli z niebieskim odcieniem i przezroczystym tłem są pobierane i dodawane do każdego li. tak jak poprzednio, globalnie stosowane reguły img przeszkadzałyby, więc są unikane.

Struktura semantyczna i stylizacja listy zakresowej Tylko zdjęcie profilowe otrzymuje wyraźne rozmiary za pośrednictwem klasy zdjęcie profilowe, zastępując wszelkie globalne rozmiary img. Nazwy zainteresowań używają h3, a krótkie opisy używają p dla jasnej hierarchii. Punktory listy i wyściółka są usuwane przez przypisanie klasy hobby do UL i samą stylizację tej klasy.

Zainteresowania dwukolumnowe z opakowaniem Flexbox Flexbox układa zainteresowania w kolumny, ustawiając wyświetlacz: flex na ul.hobby. Każdy li otrzymuje Szerokość: 50%, ale flex początkowo umieszcza wszystkie elementy w jednej linii. Włączenie funkcji flex-wrap umożliwia przejście trzeciego elementu do następnego wiersza, dając dwa elementy w wierszu; 33% utworzyłoby trzy kolumny.

Ikona-Lewy, Tekst‑Prawy Układ Bez Rozciągania Wewnątrz każdego zainteresowania li staje się kontenerem flex z ikoną i opakowaniem tekstu div jako kolumnami. Domyślne wyrównanie rozciągnęło ikonę, więc align-items jest ustawiony na flex-start, aby utrzymać ją w naturalnym rozmiarze. Niewielka redukcja górnego marginesu h3 (do 5 pikseli) lepiej wyrównuje tekst z ikoną.

Czytelny tekst główny i wygodne odstępy Kolumna tekstowa przesuwa się od ikony z lewym marginesem, poprawiając czytelność. Akapity zmieniają kolor na szary i zwiększają wysokość linii do 1,5, aby ułatwić czytanie, a wysokość linii jest rozszerzona na wszystkie elementy P w całej witrynie. Pozycje odsetkowe otrzymują również dolny margines 40 pikseli, aby je rozdzielić.

Przydatne linki: firmy, E-mail, telefon i PDF Kotwice zawijają nazwy firm, aby połączyć się z pracodawcami. E-mail i telefon stają się zaskarżeniu z mailto: i tel: linki, otwieranie klienta poczty lub wybieranie na telefon komórkowy. Hostowane CV PDF jest połączone, aby odwiedzający mogli je pobrać bezpośrednio.

Bezpiecznie stylizuj dedykowany Link do pobrania Link do pobrania znajduje się na własnej linii wewnątrz opakowania na poziomie bloku i otrzymuje klasę cv-download-link. Zyskuje obramowanie w Kolorze Chabrowym 2px, czarny tekst, brak podkreślenia i wygodne wypełnienie. Elementy wbudowane ignorują odstępy w pionie, ujawniając potrzebę innego trybu wyświetlania.

Wbudowane przyciski blokowe i ustawienia domyślne przyjazne dla Klawiatury Przełączanie łącza na display: inline-block umożliwia pionowe marginesy przy zachowaniu przepływu inline. Górny margines 20px i promień obramowania 26px tworzą wyraźny przycisk w kształcie pigułki. Domyślne zachowania linków pozostają ważne-odwiedzane kolorowanie, kontury ostrości i nawigacja za pomocą klawiatury za pomocą Tab i Enter.

Pseudoklas i płynne przejścia dla Stanów Pseudoclasses tailor interactive states:: najechanie kursorem zmienia tekst na biały na niebieskim tle,: fokus usuwa kontur i kolory unoszenia luster oraz: aktywne podkreślenia po naciśnięciu. Przejście na kolor tła i kolor 0,5 s zmiękcza zmianę. Każdy stan czuje się teraz responsywny i dostępny.

Poprawki Global Spacing dla dopracowanego wyglądu Globalne odstępy są dopracowane: dopełnienie nagłówka-Góra rośnie do 60 pikseli, dolny margines H1 zmniejsza się do 10 pikseli, a wszystkie li otrzymują dolny margines 15 pikseli. Rezultatem jest bardziej przewiewna struktura bez utraty zwartości. Małe korekty zmieniają się w bardziej dopracowany układ.

Jedna karta do cienia: Pojemnik, szerokość i centrowanie Cienie pól dodają głębi, najpierw na łączu pobierania, a następnie w całym układzie. Zastosowanie cieni do nagłówka i sekcji oddzielnie tworzy widoczne szwy między blokami. Zawijanie wszystkiego w kontener div konsoliduje szerokość, centrowanie, tło i pojedynczy cień, aby uzyskać czystą kartę na niebieskim tle.

Wdrażanie metodą przeciągnij i upuść za pomocą Netlify Wdrożenie przenosi CV z plików lokalnych do sieci Web za pośrednictwem Netlify. Po potwierdzeniu rejestracji i wiadomości e-mail folder projektu jest przeciągany do obszaru witryn i wdrażany do aktywnego adresu URL. Nazwę witryny można dostosować, a przyszłe aktualizacje są ponownie wdrażane, przeciągając folder ponownie.

Sprawdź poprawność znaczników i dodaj znaczący Tekst alternatywny Walidacja za pomocą flagi narzędzi W3C problemy, takie jak brakujące atrybuty alt. Tekst alternatywny pojawia się, gdy obrazy nie ładują się i daje czytelnikom ekranu znaczące opisy, więc zdjęcie profilowe otrzymuje zwięzłą, dokładną wartość alt. Dostępność zaczyna się od spełnienia tych podstawowych standardów.

Dostępne według projektu: ikony, nagłówki i semantyka Dekoracyjne ikony otrzymują pusty alt, więc technologia wspomagająca pomija je, spełniając walidator bez dodawania szumu. Właściwa hierarchia H1-H6 tworzy logiczny zarys, przez który mogą przechodzić czytniki ekranu, a rzeczywiste listy i znaczniki semantyczne, takie jak adres, ujawniają strukturę. Strony integracyjne witają użytkowników wszystkich umiejętności.