3. Wprowadzenie do Visual Studio Code

> Dodaj do ulubionych

Visual Studio Code to zaawansowany edytor kodu firmy Microsoft, umo┼╝liwiaj─ůcy prac─Ö w wielu j─Özykach komputerowych, w tym HTML, CSS, JavaScript czy C++. Ma m.in. wiele funkcji usprawniaj─ůcych projektowanie stron internetowych przy u┼╝yciu HTML i CSS oraz jest ┼éatwy w obs┼éudze, co czyni go ┼Ťwietnym wyborem tak┼╝e do nauki tych j─Özyk├│w.

W tym rozdziale nauczysz si─Ö podstaw pracy z edytorem Visual Studio Code. Dowiesz si─Ö, jak go zainstalowa─ç, jak skonfigurowa─ç jego podstawowe ustawienia oraz jak utworzy─ç swoj─ů pierwsz─ů stron─Ö. Zaczniemy od pobierania programu i jego instalacji.

Pobieranie i instalacja

Aby pobra─ç najnowsz─ů wersj─Ö programu Visual Studio Code, wejd┼║ na stron─Ö https://code.visualstudio.com/ i kliknij przycisk Download for Windows (Stable Build).

Po zako┼äczeniu pobierania kliknij dwukrotnie pobrany plik, aby uruchomi─ç instalator. Gdy to zrobisz, pojawi si─Ö okno wyboru j─Özyka instalacji z domy┼Ťlnie wybranym j─Özykiem angielskim.

Instalacja Visual Studio Code - wyb├│r j─Özyka instalacji

W oknie Select Setup Language (Wybierz j─Özyk instalacji) wybierz interesuj─ůcy Ci─Ö j─Özyk (obecnie nie ma polskiego), a nast─Öpnie kliknij przycisk OK. Pojawi si─Ö okno zawieraj─ůce tre┼Ť─ç licencji. Zaznacz pole wyboru I accept the agreement (Akceptuj─Ö warunki umowy) i kliknij przycisk Next, aby przej┼Ť─ç dalej.

Instalacja Visual Studio Code - licencja

Kolejne okno umo┼╝liwia wyb├│r folderu instalacji. Mo┼╝esz pozostawi─ç domy┼Ťlny lub wskaza─ç dowolny inny.

Instalacja Visual Studio Code - folder

Kliknij przycisk Next, aby przej┼Ť─ç do okna wyboru folderu menu Start. Je┼Ťli nie zamierzasz go zmienia─ç, ponownie kliknij przycisk Next. Pojawi si─Ö okno dialogowe z paroma dodatkowymi opcjami.

Instalacja Visual Studio Code - dodatkowe opcje

Znaczenie poszczeg├│lnych opcji w tym oknie:

  • Create a desktop icon ÔÇô Utw├│rz ikon─Ö na pulpicie
  • Add "Open with Code" action to Windows Explorer file context menu ÔÇô Dodaj opcj─Ö ÔÇ×Otw├│rz w CodeÔÇŁ do menu kontekstowego plik├│w w Eksploratorze Windows
  • Add "Open with Code" action to Windows Explorer directory context menu ÔÇô Dodaj opcj─Ö ÔÇ×Otw├│rz w CodeÔÇŁ do menu kontekstowego folder├│w w Eksploratorze Windows
  • Register Code as an editor for supported file types ÔÇô Zarejestruj Code jako edytor dla obs┼éugiwanych typ├│w plik├│w
  • Add to PATH (requiers shell restart) ÔÇô Dodaj do zmiennej ┼Ťrodowiskowej PATH (wymaga restartu pow┼éoki)

Wybierz interesuj─ůce Ci─Ö opcje, a nast─Öpnie kliknij przycisk Next. Zostanie wy┼Ťwietlone okno z podsumowaniem wybranych ustawie┼ä, w kt├│rym mo┼╝esz klikn─ů─ç przycisk Back, aby si─Ö cofn─ů─ç i co┼Ť zmieni─ç, lub Install, aby rozpocz─ů─ç instalacj─Ö. Je┼Ťli wszystkie ustawienia s─ů poprawne, kliknij przycisk Install.

Gdy instalacja dobiegnie ko┼äca, na ekranie pojawi si─Ö okno finalne z przyciskiem Finish, kt├│ry nale┼╝y klikn─ů─ç. Je┼Ťli pozostawisz zaznaczon─ů opcj─Ö Launch Visual Studio Code, po klikni─Öciu przycisku Finish nast─ůpi uruchomienie programu.

Instalacja Visual Studio Code - koniec instalacji

Pierwsze uruchomienie

Kiedy po raz pierwszy uruchomisz Visual Studio Code, pojawi si─Ö okno powitalne pokazane na poni┼╝szym zrzucie ekranu.

Instalacja Visual Studio Code - ekran powitalny

Ekran ten zawiera kilka podstawowych opcji. W oknie g┼é├│wnym po lewej stronie mo┼╝esz np. wybra─ç palet─Ö kolor├│w (Browse Color Themes), a po prawej stronie znajdziesz cztery motywy do wyboru ÔÇô Dark (ciemny), Light (jasny), Dark High Contrast (ciemny z wysokim kontrastem) oraz Light High Contrast (jasny z wysokim kontrastem). Mo┼╝esz klikn─ů─ç ka┼╝dy z nich, aby sprawdzi─ç, jak b─Ödzie wygl─ůda┼éo okno i wybra─ç najbardziej odpowiedni dla siebie. Dalej b─Ödziemy u┼╝ywa─ç motywu jasnego z normalnym kontrastem.

Przy lewej kraw─Ödzi okna programu znajduje si─Ö pionowy pasek menu, kt├│ry w g├│rnej cz─Ö┼Ťci zawiera kolejno przycisk pozwalaj─ůcy w┼é─ůczy─ç lub wy┼é─ůczy─ç okno eksploratora plik├│w (Explorer), przycisk z ikon─ů lupy w┼é─ůczaj─ůcy lub wy┼é─ůczaj─ůcy funkcj─Ö wyszukiwania, przycisk funkcji kontroli wersji Git (na razie nie b─Ödziemy tego u┼╝ywa─ç), przycisk debugera (nie dotyczy plik├│w HTML i CSS) oraz przycisk przegl─ůdarki rozszerze┼ä (nied┼éugo jedno zainstalujemy).

W dolnej cz─Ö┼Ťci pionowego paska po lewej stronie znajduj─ů si─Ö dwa przyciski. Pierwszy, z ikon─ů przedstawiaj─ůc─ů cz┼éowieka, kryje opcje dotycz─ůce synchronizacji, pracy w chmurze i dost─Öpu do tunelu zdalnego (tunel to bezpieczne po┼é─ůczenie z innym komputerem). Drugi, z ikon─ů ko┼éa z─Öbatego, wy┼Ťwietla menu z r├│┼╝nymi ustawieniami.

Dodatkowo u g├│ry znajduje si─Ö pasek menu, a na dole wida─ç pasek stanu.

Rozpocz─Öcie pracy

Prac─Ö rozpoczniemy od zmiany j─Özyka interfejsu na polski. W tym celu naci┼Ťnij kombinacj─Ö klawiszy Ctrl+Shift+P i w polu wyszukiwania, kt├│re pojawi si─Ö u g├│ry okna, wpisz s┼éowo display. Nast─Öpnie kliknij pozycj─Ö Configure Display Language (Skonfiguruj j─Özyk interfejsu) i z listy j─Özyk├│w wybierz polski (kliknij wybrany j─Özyk). Zostanie wy┼Ťwietlone okno z pytaniem, czy chcesz ponownie uruchomi─ç program, aby wprowadzi─ç zmian─Ö. Kliknij przycisk Restart i poczekaj na ponowne uruchomienie programu.

Teraz mo┼╝emy zacz─ů─ç w┼éa┼Ťciw─ů prac─Ö. Kliknij przycisk Eksploratora (ten z ikon─ů przedstawiaj─ůc─ů dwie kartki) na pionowym pasku po lewej stronie okna powitalnego, a nast─Öpnie, w okienku, kt├│re si─Ö pojawi, kliknij przycisk Otw├│rz folder. W oknie Otw├│rz folder, kt├│re zostanie wy┼Ťwietlone, mo┼╝esz wybra─ç folder na swoim dysku, w kt├│rym zamierzasz przechowywa─ç pliki swojego projektu. Ewentualnie w oknie tym mo┼╝esz utworzy─ç nowy folder.

Aby utworzy─ç nowy folder, w oknie Otw├│rz folder przejd┼║ do wybranego folderu, w kt├│rym zamierzasz przechowywa─ç wszystkie swoje strony internetowe. Nast─Öpnie kliknij w pustym miejscu prawym przyciskiem myszy i kolejno kliknij opcje Nowy i Folder. Nadaj swojemu nowemu folderowi nazw─Ö Moja strona.

Kliknij folder Moja strona, po czym kliknij przycisk Wybierz folder. Gdy to zrobisz, pojawi si─Ö okno dialogowe z pytaniem Czy ufasz autorom plik├│w w tym folderze?. Kliknij przycisk Tak, ufam autorom.

Instalacja Visual Studio Code - okna zaufania autorom

Po wybraniu zaufanego folderu do przechowywania plik├│w mo┼╝na rozpocz─ů─ç prac─Ö nad swoim serwisem. Ten folder b─Ödzie Twoj─ů przestrzeni─ů robocz─ů w programie, czym┼Ť na kszta┼ét projektu obejmuj─ůcego ca┼é─ů witryn─Ö, nad kt├│r─ů zamierzasz pracowa─ç. Dla wygody zamknij jeszcze kart─Ö powitaln─ů, aby nie przeszkadza┼éa. Teraz okno programu powinno wygl─ůda─ç mniej wi─Öcej tak, jak na poni┼╝szej ilustracji.

Instalacja Visual Studio Code - gotowe okno

Tworzenie pierwszego pliku HTML

Aby rozpocz─ů─ç prac─Ö, nale┼╝y utworzy─ç pierwszy plik HTML. W tym celu kliknij kart─Ö Moja strona w oknie Eksploratora, aby j─ů rozwin─ů─ç i uzyska─ç dost─Öp do kilku opcji, w┼Ťr├│d kt├│rych jest tak┼╝e przycisk pozwalaj─ůcy utworzy─ç nowy plik w projekcie.

Kliknij ikon─Ö kartki z zagi─Ötym rogiem i znakiem plus znajduj─ůc─ů si─Ö na pierwszym miejscu po prawej stronie paska tytu┼éu karty Moja strona. W polu tekstowym, kt├│re si─Ö pojawi pod spodem, wpisz nazw─Ö swojego nowego pliku, np. test.html i naci┼Ťnij klawisz Enter.

Instalacja Visual Studio Code - strona test

Masz gotowe ┼Ťrodowisko pracy z testowym plikiem HTML, w kt├│rym mo┼╝esz zacz─ů─ç wpisywa─ç sw├│j kod. Teraz, aby wypr├│bowa─ç podstawowe funkcje edytora, wpiszemy par─Ö wierszy kodu HTML. Kliknij w pierwszym wierszu pliku w okienku edycji po prawej stronie i wpisz poni┼╝szy kod, a nast─Öpnie naci┼Ťnij kombinacj─Ö klawiszy Ctrl+S, aby zapisa─ç zmiany. Je┼Ťli w pliku b─Öd─ů niezapisane zmiany, na jego karcie b─Ödzie widoczna du┼╝a czarna kropka. Naci┼Ťni─Öcie klawiszy Ctrl+S spowoduje zapisanie zmian i znikni─Öcie tej kropki.


<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Tytuł</title>
  </head>
  <body>
    <p>To jest  moja testowa tre┼Ť─ç.</p>
  </body>
</html>

Teraz okno programu powinno wygl─ůda─ç tak:

Instalacja Visual Studio Code - testowy kod

Podstawowe funkcje edytora

Zwr├│─ç uwag─Ö, ┼╝e poszczeg├│lne elementy sk┼éadni j─Özyka HTML s─ů pokolorowane ÔÇô nazwy element├│w maj─ů kolor br─ůzowy, atrybuty s─ů czerwone, warto┼Ťci atrybut├│w s─ů niebieskie, a tre┼Ť─ç element├│w jest czarna. Ponadto edytor numeruje wiersze kodu, co tak┼╝e u┼éatwia prac─Ö (zwr├│─ç te┼╝ uwag─Ö, ┼╝e kod ┼║r├│d┼éowy prezentowany na listingach nie ma numeracji wierszy).

Kiedy w oknie edytora najedziesz kursorem myszy na puste pole mi─Ödzy numerami wierszy a kodem, pojawi─ů si─Ö ma┼ée strza┼éki skierowane w d├│┼é. Umo┼╝liwiaj─ů one zwijanie sekcji kodu obejmowanych przez poszczeg├│lne elementy. W tym przypadku mo┼╝emy zwin─ů─ç zawarto┼Ť─ç element├│w html, head i body, poniewa┼╝ tylko one obejmuj─ů wi─Öcej ni┼╝ jeden wiersz. Na poni┼╝szym zrzucie ekranu wida─ç okno edytora ze zwini─Öt─ů zawarto┼Ťci─ů elementu body.

Instalacja Visual Studio Code - zwini─Öty element body

Funkcja zwijania kodu przydaje si─Ö, kiedy jest on bardzo d┼éugi i chcemy skupi─ç si─Ö tylko na wybranym wycinku. W├│wczas mo┼╝emy sobie zwin─ů─ç nieinteresuj─ůce nas sekcje, aby nam nie przeszkadza┼éy w koncentracji.

Kolejnym udogodnieniem s─ů podpowiedzi, kt├│re edytor wy┼Ťwietla, kiedy zaczynamy pisa─ç kod. Kliknij za znacznikiem zamykaj─ůcym akapit </p> i naci┼Ťnij klawisz Enter, aby przej┼Ť─ç do nowego wiersza. Nast─Öpnie wpisz znak <. Kiedy to zrobisz, edytor wy┼Ťwietli list─Ö podpowiedzi pasuj─ůcych do wpisanego fragmentu kodu. W tym przypadku program wy┼Ťwietli list─Ö wszystkich element├│w HTML, poniewa┼╝ znak < oznacza pocz─ůtek definicji znacznika. Znajd┼║ element p na li┼Ťcie i kliknij go.

Instalacja Visual Studio Code - podpowiedzi

Kiedy edytor wstawi pocz─ůtek znacznika <p wpisz zamykaj─ůcy nawias tr├│jk─ůtny >. Wtedy edytor automatycznie wstawi znacznik zamykaj─ůcy </p>, u┼éatwiaj─ůc w ten spos├│b utworzenie elementu akapitu. Mo┼╝esz w nim na pr├│b─Ö wpisa─ç dowolny tekst, wzoruj─ůc si─Ö na akapicie, kt├│ry ju┼╝ jest wpisany. Po sko┼äczeniu nie zapomnij nacisn─ů─ç kombinacji klawiszy Ctrl+S, aby zapisa─ç zmiany.

Wtyczka Emmet do Visual Studio Code

Emmet to dost─Öpna dla wielu edytor├│w kodu wtyczka pozwalaj─ůca znacznie usprawni─ç prac─Ö z HTML i CSS. Jej dzia┼éanie polega na dodaniu do edytora obs┼éugi specjalnych ÔÇ×skr├│t├│wÔÇŁ, dzi─Öki kt├│rym mo┼╝na dynamicznie generowa─ç powtarzalne partie kodu.

Osoba znaj─ůca HTML i CSS bardzo szybko uczy si─Ö sk┼éadni tego narz─Ödzia, poniewa┼╝ bazuje ona na sk┼éadni CSS. Wystarczy wi─Öc wpisa─ç odpowiednie wyra┼╝enie, aby szybko otrzyma─ç odpowiedni kod, kt├│rego r─Öczne wpisywanie zaj─Ö┼éoby du┼╝o wi─Öcej czasu.

Wtyczka Emmet jest standardowo zainstalowana w edytorze Visual Studio Code. Poza tym jest te┼╝ dost─Öpna dla edytor├│w Notepad++, Sublime Text czy Dreamweaver.

Zastosowanie tego narzędzia najłatwiej jest zrozumieć na konkretnym przykładzie. Dlatego przeanalizujemy parę przykładów, dzięki którym wszystko stanie się jasne.

Mno┼╝enie element├│w

Czasami potrzebujemy kilku element├│w. Powiedzmy na przyk┼éad, ┼╝e na naszej stronie chcemy utworzy─ç dziesi─Ö─ç akapit├│w. Mo┼╝emy ┼╝mudnie wpisa─ç wszystkie te elementy po kolei: <p>ÔÇŽ</p>, ewentualnie mo┼╝emy wpisa─ç jeden, a potem go skopiowa─ç i wklei─ç dziesi─Ö─ç razy. Jednak dzi─Öki wtyczce Emmet zrobimy to o wiele pro┼Ťciej. Wystarczy u┼╝y─ç operatora mno┼╝enia (*), czyli napisa─ç p*10 i nacisn─ů─ç klawisz Enter. Sp├│jrz na poni┼╝szy zrzut ekranu.

Emmet - mno┼╝enie element├│w

Kiedy wpiszesz wyra┼╝enie obs┼éugiwane przez wtyczk─Ö Emmet, edytor wy┼Ťwietli okienko podobne do widocznego na powy┼╝szym zrzucie ekranu. Teraz wystarczy nacisn─ů─ç klawisz Enter albo Tab, aby zastosowa─ç skr├│t. Poni┼╝ej wida─ç efekt u┼╝ycia tego skr├│tu.

Emmet - mno┼╝enie element├│w efekt

Edytor b┼éyskawicznie wygenerowa┼é dziesi─Ö─ç element├│w akapitu. Teraz wystarczy tylko doda─ç do nich tre┼Ť─ç. Dok┼éadnie w ten sam spos├│b mo┼╝na masowo wygenerowa─ç ka┼╝dy inny element HTML.

Generowanie zagnie┼╝d┼╝onych element├│w

Elementy HTML mog─ů znajdowa─ç si─Ö w innych elementach. Ju┼╝ to widzieli┼Ťmy, cho─çby w poprzednim przyk┼éadzie, w kt├│rym wygenerowali┼Ťmy dziesi─Ö─ç element├│w p w elemencie body. Za pomoc─ů sk┼éadni Emmet mo┼╝na przyspieszy─ç tworzenie takich zagnie┼╝d┼╝onych element├│w. Aby na przyk┼éad szybko utworzy─ç element p zagnie┼╝d┼╝ony w elemencie body, nale┼╝y u┼╝y─ç operatora generowania element├│w zagnie┼╝d┼╝onych > ÔÇô body>p.

Emmet - generowanie element├│w zagnie┼╝d┼╝onych

Efekt działania tego skrótu jest taki, jak widać na poniższym zrzucie ekranu:

Emmet - generowanie element├│w zagnie┼╝d┼╝onych efekt

Elementy siostrzane

Czasami zdarza si─Ö te┼╝ tak, ┼╝e potrzebujemy kilku element├│w okre┼Ťlonego typu kolejno po sobie, bez zagnie┼╝d┼╝ania. Powiedzmy na przyk┼éad, ┼╝e chcemy utworzy─ç now─ů stron─Ö, wi─Öc potrzebujemy kolejno element├│w head i body. Za pomoc─ů sk┼éadni wyra┼╝e┼ä wtyczki Emmet mo┼╝emy wygenerowa─ç te elementy szybciej. W tym celu pos┼éu┼╝ymy si─Ö operatorem elementu siostrzanego (+) ÔÇô head+body. Sp├│jrz na poni┼╝szy zrzut ekranu.

Emmet - generowanie element├│w siostrzanych

Efekt u┼╝ycia tego skr├│tu jest taki:

Emmet - generowanie element├│w siostrzanych efekt

Szablon strony HTML

Ka┼╝da prawid┼éowo zbudowana strona internetowa zawiera pewne standardowe i obowi─ůzkowe elementy konstrukcyjne, kt├│re rzadko si─Ö wpisuje r─Öcznie, tylko wkleja z gotowego szablonu. Wtyczka Emmet znacznie to u┼éatwia, poniewa┼╝ dzi─Öki niej wystarczy wpisa─ç ! i nacisn─ů─ç klawisz Enter, aby zosta┼é wstawiony kompletny szablon dokumentu HTML. Sp├│jrz na poni┼╝sz─ů ilustracj─Ö.

Emmet - szablon HTML5

Efekt u┼╝ycia tego skr├│tu wygl─ůda tak, jak na poni┼╝szym zrzucie ekranu.

Emmet - szablon HTML5 efekt

Jest tu par─Ö nowych rzeczy, ale nie musisz si─Ö nimi przejmowa─ç. W tej chwili s─ů nieistotne i jeszcze przyjdzie pora si─Ö z nimi zapozna─ç.

Wtyczka Emmet to fantastyczne narz─Ödzie, kt├│ra pozwala zaoszcz─Ödzi─ç mn├│stwo czasu podczas pracy nad stron─ů internetow─ů. To, co zosta┼éo opisane powy┼╝ej, to tylko wierzcho┼éek g├│ry lodowej jej mo┼╝liwo┼Ťci. Na razie nam to wystarczy, a je┼Ťli czujesz niedosyt, to na stronie https://docs.emmet.io/ znajdziesz pe┼én─ů dokumentacj─Ö.

Instalacja rozszerzeń

Umiesz ju┼╝ utworzy─ç now─ů stron─Ö, umiesz doda─ç do niej tre┼Ť─ç, wi─Öc pora wy┼Ťwietli─ç nasze dzie┼éo w przegl─ůdarce internetowej, aby zobaczy─ç, jak wygl─ůda. Standardowo w Visual Studio Code nie ma opcji otwierania strony w przegl─ůdarce bezpo┼Ťrednio przez edytor, ale mo┼╝na j─ů doda─ç za pomoc─ů rozszerzenia.

Kliknij ikon─Ö rozszerze┼ä na pionowym pasku narz─Ödzi po lewej stronie okna programu i w polu wyszukiwania wpisz open in browser. Spowoduje to pojawienie si─Ö listy dost─Öpnych rozszerze┼ä dodaj─ůcych do edytora opcj─Ö otwierania stron w przegl─ůdarce. Wybierz jedno z nich, np. ÔÇ×Open in BrowserÔÇŁ autorstwa Igora Dimitrijevica. Kliknij przycisk Zainstaluj dotycz─ůcy wybranego rozszerzenia.

Instalacja Visual Studio Code - otw├│rz w przegl─ůdarce

Wr├│─ç do swojej strony, klikaj─ůc jej zak┼éadk─Ö u g├│ry okna programu. Je┼Ťli przed chwil─ů Tw├│j wyb├│r pad┼é na rozszerzenie Dimitrijevica, wystarczy nacisn─ů─ç kombinacj─Ö klawiszy Ctrl+Shift+F9, aby wy┼Ťwietli─ç menu z list─ů dost─Öpnych przegl─ůdarek do wyboru, w kt├│rych mo┼╝na otworzy─ç stron─Ö.

Instalacja Visual Studio Code - lista przegl─ůdarek

Pierwsza pozycja na li┼Ťcie oznacza domy┼Ťln─ů przegl─ůdark─Ö w systemie. Pozosta┼ée pozwalaj─ů wybra─ç dowoln─ů inn─ů przegl─ůdark─Ö, kt├│ra jest zainstalowana w Twoim systemie. Kliknij jedn─ů z dost─Öpnych opcji i ciesz oko swoj─ů pierwsz─ů stron─ů internetow─ů wy┼Ťwietlon─ů w oknie przegl─ůdarki. Powinna wygl─ůda─ç mniej wi─Öcej tak:

Testowa strona w Firefoksie

Mo┼╝e ta strona nie jest imponuj─ůca, ale ka┼╝dy musi od czego┼Ť zacz─ů─ç.

Podsumowanie

Sum

Znasz ju┼╝ podstawy obs┼éugi edytora Visual Studio Code potrzebne Ci do rozpocz─Öcia pracy nad swoimi stronami internetowymi. Ten program ma do zaoferowania o wiele wi─Öcej ni┼╝ zosta┼éo tu opisane. Je┼Ťli chcesz go dok┼éadniej pozna─ç, mo┼╝esz samodzielnie przejrze─ç opcje dost─Öpne we wszystkich menu i je wypr├│bowa─ç oraz mo┼╝esz poszuka─ç dodatkowych informacji w internecie. Mi┼éej zabawy.

W nast─Öpnym rozdziale podsumujemy sprawy zwi─ůzane z przygotowywaniem ┼Ťrodowiska pracy, np. dowiesz si─Ö paru rzeczy na temat przegl─ůdarek internetowych, organizacji folder├│w i plik├│w w folderach itp. Nast─Öpnie przejdziemy ju┼╝ do w┼éa┼Ťciwej nauki j─Özyk├│w HTML i CSS.

Ilustracje ćwiczeń

─ćwiczenia

  • Pobierz i zainstaluj edytor Visual Studio Code
  • Otw├│rz w Visual Studio Code dowolny folder, kt├│ry stanie si─Ö Twoj─ů testow─ů przestrzeni─ů robocz─ů.
  • Utw├│rz w edytorze Visual Studio Code plik HTML o dowolnej nazwie.
  • Za pomoc─ů wtyczki Emmet wygeneruj w nowo utworzonym pliku podstawowy szablon dokumentu.
  • W elemencie body szablonu wygeneruj dziesi─Ö─ç element├│w p. Wpisz w nich troch─Ö dowolnego tekstu.
  • Zainstaluj w Visual Studio Code rozszerzenie do podgl─ůdania plik├│w HTML w przegl─ůdarce i otw├│rz swoj─ů stron─Ö w przegl─ůdarce za pomoc─ů tego rozszerzenia.
  • Zwi┼ä element html w edytorze Visual Studio Code.