Najlepszą rzeczą przy tworzeniu stron internetowych jest fakt, że tak naprawdę nie potrzebujesz wiele na start.

Potrzebujesz:

  1. Przeglądarki internetowej, by zobaczyć i przetestować swoją stronę.
  2. Edytora tekstowego zaprojektowanego do tworzenia i edycji stron web, tzw. edytor kodu.

Możesz użyć jakiejkolwiek popularnej przeglądarki (Firefox, Chrome, Internet Explorer, Edge, Safari). Wybierz tę, z której korzystasz na co dzień.

Edytory kodu, kod źródłowy i czysty tekst

Niestety, normalne edytory tekstu (właściwie procesory tekstu) jak Microsoft Word, Apple Pages czy Google Docs nie nadają się do edycji kodu źródłowego strony web.

Nie używamy programu do edycji dokumentów tekstowych (np. Word), ponieważ tego typu programy zapisują do plików znacznie więcej informacji niż tylko czysty tekst. W formatach dokumentów pojawiają się niewidoczne dla nas informacje o formatowaniu treści (styl tekstu, czcionka, rozkład marginesów itp.) zbędnych dla pliku pisanego w HTML. Niektóre z edytorów owszem, pozwalają na zapisanie pliku na potrzeby webowe, ale wynik będzie daleki od oczekiwanego.

Program, którego potrzebujesz, to edytor tekstu lub edytor kodu. Na start polecamy przyjazny początkującym program Visual Studio Code (dalej w tekście będziemy używać skrótu VSC) o przyjemnym interfejsie. Kliknij tutaj by pobrać VSC.

Program Visual Studio Code

Edytor tekstu to program, który zapisuje nasze komendy rozumiane przez komputer w najprostszy możliwy sposób. Pozwala nam pisać i edytować czysty tekst bez formatowania jak pogrubienie czy kursywa. Jest to o tyle ważne, że kod źródłowy stron oraz inne programy są pisane zawsze czystym tekstem.

Prawdopodobnie posiadasz już jakiś edytor tekstu na swoim komputerze. To właśnie stary, poczciwy Notatnik w przypadku systemu Windows, bądź TextEdit w systemie macOS. Użytkownicy Linuxa zapewne posiadają Leafpad. Programy te oczywiście działają i choć wielu programistów zaczynało swoją karierę od nich, to nie są polecane są do codziennego użytku. Lepsze będą edytory kodu, które posiadają specjalne udogodnienia ułatwiające pisanie kodu. Zostały one bowiem specjalnie zaprojektowane dla programistów by ułatwić im prace i posiadają przydatne funkcje:

  • Widok kontekstu projektu lub pliku, dzięki któremu nie musisz przełączać się między edytorem a menedżerem plików.
  • Możliwość otworzenie wielu kart edytora, co ułatwia przełączanie się między plikami (np. między plikiem HTML a CSS).
  • Podświetlanie składni, czyli różne zabarwienie części kodu w zależności od jego rodzaju. Pomaga to w odczytaniu kodu.

Niektóre z edytorów kodu dodatkowo potrafią znaleźć i wskazać błąd w twoim kodzie np. poprzez podkreślenie oraz podpowiedzieć poprawkę.

Przyjmiemy, że na potrzeby tych warsztatów będziesz korzystać z VSC, ale oczywiście istnieje wiele innych, świetnych edytorów kodu (Sublime, Atom itp.). Wszystkie mają swoje plusy i minusy oraz oddanych użytkowników. Wybór narzędzia zależy już od osobistych preferencji.

Jeśli nie posiadasz jeszcze VSC, zainstaluj go teraz i przejdź do następnego kroku.