Twój pierwszy plik i folder na stronę

Przygotujemy folder, w którym będzie mieszkać twoja strona, i sprawdzimy, czy wszystko działa.

Strona mieszka w folderze

Każda strona na świecie to tak naprawdę stos plików w folderze. Przygotujmy twój.

Utwórz folder o nazwie my-website. Na pulpicie kliknij prawym → New Folder (na Macu też New Folder, na Windows New → Folder) i nazwij go my-website.
Otwórz folder w VS Code. Uruchom VS Code i z menu wybierz File → Open Folder… i znajdź folder my-website. Jeśli VS Code zapyta, czy ufasz autorom tego folderu, kliknij Yes, I trust the authors – w końcu to ty jesteś autorem!
Utwórz plik o nazwie index.html. Na lewym panelu najedź na nazwę folderu i kliknij ikonę New File (kartka z plusem). Wpisz dokładnie: index.html i naciśnij Enter.

💡

Dlaczego akurat index.html? To ustalona nazwa głównej strony. Gdy przeglądarka wchodzi do folderu, szuka najpierw pliku index.html – jak wejście do szkoły prosto do swojej klasy.

Napisz swój pierwszy kod

W pliku index.html wpisz to (albo skopiuj przyciskiem u góry po prawej):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My website</title>
  </head>
  <body>
    <h1>It works!</h1>
    <p>This is my very first file. From here I'll build a whole website.</p>
  </body>
</html>

Zapisz plik: Ctrl+S (na Macu Cmd+S). Zapisuj często – niezapisany plik ma małą kropkę obok nazwy w VS Code.

Otwórz stronę w przeglądarce

Znajdź plik index.html w folderze (na pulpicie → my-website) i kliknij dwukrotnie, żeby otworzyć. Otworzy się przeglądarka z twoją stroną i napisem „It works!”.

✅

Sprawdź się: W przeglądarce widzisz duży nagłówek „It works!”. Jeśli tak – masz działający warsztat webowy i możesz iść prosto do Poziomu 1!

💡

Przydatny trik: trzymaj VS Code i przeglądarkę obok siebie. Gdy coś zmienisz w kodzie, zapisz (Ctrl+S) i naciśnij F5 w przeglądarce, żeby odświeżyć. Zmiana pojawi się od razu.

Co wyniesiesz z tej lekcji

Strona to folder pełen plików. Twój nazywa się my-website.
Główna strona zawsze nazywa się index.html.
Pętla pracy: piszesz kod → zapisujesz (Ctrl+S) → odświeżasz przeglądarkę (F5). Będziesz to robić w kółko.