edytor Visual Studio Code

Do pisania kodu wystarczy najprostszy edytor tekstu (nawet systemowy notatnik). Dlaczego jednak się "męczyć" skoro możemy użyć (WAŻNE: dostępnego na egzaminie) systemu wspomagającego piasie kodu, czyli Visual Studio Code.
Ułatwia on pracę z dokumentem, ma wbudowane autouzupełnianie, podpowiedzi, schematy kolorowania, konfigurację "pod użytkownika".

Visual Studio Code

Pierwsze kroki po uruchomieniu:

• Ctrl+N - tworzymy nowy dokument
• zmieniamy typ dokumentu na HTML (pasek statutu, prawa strona:
• następnie na górze strony wpisujem html i zaznaczamy:
• VSC wprowadzi za nas podstawową strukturę dokumentu, wystarczy wpisać: html:5 i nacisnąć ENTER
• Zmieniamy ustawienia narodowe na polskie:
• Podstawowa struktura dokumentu jest gotowa, zapisujemy: index.html to główny plik projektu wysyłany do użytkownika po podaniu adresu strony.

System skrótów EMMET

W edytorze domyśnie zaimplementowana jest wtyczka skrótów EMMET.
Jest to system podpowiedzi i kodów umożliwiających wprowadzenie złożonego kodu HTML na podstwie jednego wiersza polecenia.
Pierwszy już poznaliśmy, był to html:5 wprowadzający podstawową strukturę dokumentu HTML5.

Pełen wykaz skrótów i ściągawka znajduje się pod adresem: https://docs.emmet.io/cheat-sheet/

Zapoznanie się z systemem bardzo ułatwi i przyśpieszy wprowadzanie kodu.
Przykładowo wprowadzanie kodu tabeli o 5 wierszach po 10 komórek w każdym może trochę potrwać, gdy wpisywać będziemy je standardowo.
Użycie emmet sprowadza się do jednego wiersza (w trakcie wpisywania pojawia się, w dymku, generowany kod):

table>tr*5>td*10