k_ kodly
Wróć do kursu
HTML + CSS

Instalacja VS Code i przeglądarki

Skoro strona to zwykły plik z tekstem, wystarczy Notatnik. Tak da się zrobić. Przez pierwsze dziesięć minut nawet wygodnie.

Potem piszesz <h1>Wiedźmin 3</h!> zamiast </h1>, zapisujesz, odświeżasz i widzisz pustą stronę. Notatnik nie powie Ci ani słowa. Będziesz szukać jednego znaku w stu linijkach.


Edytor kodu robi dwie rzeczy, których Notatnik nie robi. Koloruje to, co piszesz, i podpowiada, kiedy coś nie trzyma się kupy. Literówka wyskakuje na Ciebie kolorem, zanim odświeżysz przeglądarkę.

Druga sprawa to godziny przed ekranem. Domyślne ustawienia VS Code są zrobione pod kogoś z dobrym wzrokiem i dużym monitorem. Pięć minut na motyw i rozmiar czcionki oszczędza mnóstwo mrużenia oczu.


Potrzebujesz dwóch programów. Nic więcej.

Edytor kodu to program do pisania plików tekstowych, który rozumie, co piszesz. VS Code jest darmowy, działa na Windowsie i na Macu, i ma go w pracy większość ludzi od stron. Bierzemy jego.

Przeglądarka to program, który te pliki rysuje. Masz ją już zainstalowaną, ale nie każda nadaje się do nauki tak samo. My będziemy używać Chrome albo Edge, bo mają identyczne narzędzia deweloperskie. To ten sam panel, który otwierałaś klawiszem F12 w poprzedniej lekcji.

Jest jeszcze trzecia kategoria programów, którą trzeba omijać. Word i Dokumenty Google to nie są edytory kodu. Word zamienia proste cudzysłowy na drukarskie i zapisuje plik w swoim formacie. HTML z takiego pliku nie zadziała, a przyczyna będzie niewidoczna gołym okiem.


Ten sam fragment, w Notatniku i w VS Code:

<h1>Wiedźmin 3: Dziki Gon</h1>
<p>Ostatnia gra o Geralcie z Rivii.</p>

W Notatniku to jest jednolita czarna ściana tekstu. W VS Code nazwy znaczników mają jeden kolor, tekst drugi, a nawiasy trzeci. Widzisz strukturę, zanim ją przeczytasz.

Teraz to samo z błędem:

<h1>Wiedźmin 3: Dziki Gon<h1>

Brakuje ukośnika w domknięciu. W Notatniku ta linijka wygląda normalnie. VS Code pokoloruje ją inaczej, niż się spodziewasz, i podkreśli falowaną linią. To jeden z tych błędów, które kosztują pół godziny, jeśli nie masz podpowiedzi.


Kolorowanie składni działa prosto. Edytor czyta plik i rozpoznaje w nim wzorce. Nazwa znacznika dostaje jeden kolor, wartość atrybutu inny.

Kolorowanie pilnuje tylko zapisu. Czy Twoja strona ma sens, sprawdzi dopiero walidator W3C w lekcji 16.

Motyw wybierz pod swoje oczy. W ciemnym pokoju jasny ekran męczy, w jasnym bywa odwrotnie. Sprawdź oba i zostań przy tym, przy którym po godzinie czujesz się lepiej.

Przy rozmiarze czcionki mam konkretną radę. Zacznij od 16 pikseli i podnieś, jeśli musisz się pochylać do ekranu. Na małej czcionce przeoczysz brakujący znak.

Praktyka

Krok 1: VS Code

  1. Wejdź na code.visualstudio.com. Tylko ta strona, nic z wyszukiwarki.
  2. Kliknij duży niebieski przycisk pobierania. Strona sama rozpoznaje system.
  3. Windows: uruchom pobrany plik .exe. Klikaj dalej, aż dojdziesz do listy zadań dodatkowych. Zaznacz tam Add "Open with Code" action to Windows Explorer directory context menu. To pozwoli Ci otwierać folder projektu prawym przyciskiem myszy.
  4. Mac: otwórz pobrany plik .zip, a ikonę VS Code przeciągnij do folderu Aplikacje. Bez tego program będzie uruchamiał się z folderu Pobrane i zniknie przy pierwszym sprzątaniu.
  5. Uruchom VS Code. Powita Cię ekran startowy z listą ostatnich projektów, na razie pustą.

Krok 2: Przeglądarka

Jeśli masz już Chrome albo Edge, przejdź dalej. Jeśli nie, pobierz Chrome ze strony google.com/chrome.

Nie musisz jej ustawiać jako domyślnej. Musisz tylko wiedzieć, w której przeglądarce oglądasz swoją stronę, bo w lekcji 4 podepniemy ją do edytora.

Krok 3: Motyw

  1. W VS Code naciśnij Ctrl + K, puść, potem Ctrl + T. Na Macu zamiast Ctrl jest Cmd.
  2. Otworzy się lista motywów. Przechodź po niej strzałkami góra i dół.
  3. Podgląd zmienia się na żywo, więc widzisz efekt od razu.
  4. Zatrzymaj się na tym, który Ci pasuje, i naciśnij Enter.

Domyślny Dark Modern jest dobrym wyborem i takiego będę używać w zrzutach ekranu.

Krok 4: Rozmiar czcionki i zawijanie

  1. Naciśnij Ctrl + , (przecinek). To skrót do ustawień.
  2. W polu wyszukiwania na górze wpisz font size.
  3. Znajdź Editor: Font Size i wpisz 16.
  4. Wyczyść pole wyszukiwania i wpisz word wrap.
  5. Przy Editor: Word Wrap wybierz z listy on.

Zawijanie wierszy sprawia, że długa linijka zwija się do następnego wiersza zamiast uciekać poza ekran. Bez tego będziesz przewijać w bok, a to najszybszy sposób na przeoczenie błędu.

Ustawienia zapisują się same, przycisku zapisu tu nie ma. Zamknij zakładkę ustawień.

Krok 5: Sprawdzenie

Naciśnij Ctrl + N, żeby otworzyć nowy plik, i wpisz:

<h1>Cześć</h1>

Tekst będzie na razie jednolity, bo VS Code nie wie jeszcze, że to HTML. Dowie się w lekcji 5, kiedy zapiszesz plik z rozszerzeniem .html. Na teraz wystarczy, że edytor się uruchamia i da się w nim pisać.

Zamknij zakładkę bez zapisywania.

Uwaga na to

Instalator pyta o wersję User albo System. Wybierz User Installer. Nie wymaga uprawnień administratora i instaluje się tylko dla Ciebie. To domyślny wybór na stronie pobierania.

Mac mówi, że nie może otworzyć programu od niezidentyfikowanego dewelopera. Kliknij ikonę prawym przyciskiem i wybierz Otwórz, potem potwierdź. Zwykłe dwukliknięcie w tym przypadku nie zadziała.

Widzę propozycję instalacji polskiej wersji językowej. Odrzuć ją. W całym kursie będę podawać angielskie nazwy poleceń, bo tak wygląda VS Code u wszystkich i tak wyglądają wszystkie poradniki w internecie.

Ustawiłam czcionkę na 16 i nic się nie stało. Sprawdź, czy to na pewno Editor: Font Size, a nie Terminal: Font Size. Podobnych pozycji jest kilka, a wyszukiwarka pokazuje je wszystkie naraz.

Podsumowanie

  • Do całego kursu potrzebujesz dwóch programów: VS Code i przeglądarki Chrome albo Edge.
  • Edytor kodu koloruje składnię i pokazuje literówki, zanim odświeżysz stronę. Notatnik tego nie robi.
  • Word i Dokumenty Google nie nadają się do HTML-a, bo zmieniają znaki i format pliku.
  • Motyw wybierasz pod swoje oczy, rozmiar czcionki zaczynasz od 16 pikseli.
  • Zawijanie wierszy włączamy od razu, żeby żadna linijka nie uciekała poza ekran.

Zadanie

Poziom 1. Przejdź wszystkie pięć kroków z sekcji „Praktyka". Na koniec otwórz nowy plik, wpisz w nim jedną linijkę tekstu i sprawdź, czy czcionka jest wyraźnie większa niż na starcie.

Poziom 2. Przejrzyj listę motywów spokojnie, nie tylko dwa pierwsze. Wybierz jeden ciemny i jeden jasny, popracuj chwilę w każdym i zapisz, przy którym łatwiej Ci rozróżnić kolory znaczników.

Poziom 3. Wejdź w ustawienia i znajdź Editor: Line Numbers oraz Editor: Minimap. Sprawdź, co robi wyłączenie każdego z nich. Zastanów się, które z tych dwóch przyda Ci się przy pliku na trzysta linijek.