1.1. Üdv!

Üdvözöllek a "Frontend fejlesztés asztali kódszerkesztővel" című modulunkban.

A következő pár leckében hátrahagyjuk az online kódszerkesztőket, és

megismerkedünk egy speciálisan kódolásra szánt asztali szövegszerkesztő
programmal. A következőket fogod megtanulni:

 hogyan tölts le és telepíts egy asztali kódszerkesztőt,

 hogyan hozz létre egy új projektet,
 hogyan alakíts ki egy mappastruktúrát és hogyan navigálj benne,

hogyan mentsd el és nyisd meg a munkádat,

hogyan használd ki a szoftver speciális képességeit.

Mire végzünk, gyorsan és hatékonyan tudsz majd dolgozni a saját gépedről.

Készen állsz? Akkor vágjunk bele!

1.2. Miért van erre szükségem?

Megértem, ha most valami ilyesmi fogalmazódott meg benned: “Álljunk meg
egy pillanatra! Miért van szükségem egy újabb szerkesztőre? Nekem tetszenek
az online kódszerkesztők.”

Az online szerkesztők kétségtelenül menők, de sajnos a tudásuk még nem

elegendő minden feladathoz. Kiválóak, amikor egy pici weboldalt akarsz
összedobni, de abban a pillanatban, hogy több HTML-, CSS- vagy JS-fájlra van
szükséged, használhatatlanná válnak.

A projektek többsége több fájlt és mappát igényel, ezek kezeléséhez pedig

szükséged lesz egy asztali szerkesztőre.

Ezen felül, a dedikált szerkesztők további előnye, hogy kifejezetten

programozóknak tervezték őket. Rengeteg hasznos funkcióval bírnak, mint
például: automatikus kódkiegészítés, behúzási segédlet, keresés fájlokban, stb.
Ezek nemcsak gyorsabbá, de élvezetesebbé is teszik a kódolást.

Most, hogy mindezt megbeszéltük, ideje megismerkedned a

választott szerkesztőnkkel.

2.1. Miért a VS Code-ot választottuk?

Rengeteg kódszerkesztő található az interneten, a választás közöttük
legtöbbször egyéni preferencia kérdése. Például, mi is többféle programot
használunk itt a CodeBerrynél, pedig egy csapatban dolgozunk.

A sok opció között azonban van egy, amely kifejezetten a kezdő fejlesztők
számára hasznos: a VS Code.

A VS Code egy nyílt forráskódú, ingyenes kódszerkesztő, amelyet a Microsoft

csapata fejleszt és tart karban. A rengeteg hasznos tulajdonsága közül a
következők teszik igazán nagyszerűvé:

 Ingyenes. Semmit sem kell fizetned azért, hogy használhasd.

 Van benne egy automatikus kódkiegészítő, amely segít a kód
megírásában.
 Mivel a VS Code az egyik legelterjedtebb asztali szerkesztő, így rendkívül
sok kiegészítővel rendelkezik. Ezen kiegészítőknek hála még jobban
személyre szabhatod a kódszerkesztődet.

A legtöbb dolog, amit ebben a modulban tanulni fogsz, nem specifikus a VS

Code-ra nézve – a többi kódszerkesztőben is ugyanúgy, vagy nagyon hasonlóan
működnek. Azért ezt a programot választottuk, mert tud mindent, amit az online
kódszerkesztőkben már megszoktál, ugyanakkor megismerheted rajta a
specializált szoftverek előnyeit is. Egyfajta híd lesz számodra a két világ között.

Megjegyzés: Ha nem jön be a VS Code, nyugodtan használhatsz másik

kódszerkesztőt a projekt során. Fontos, hogy olyan eszközökkel dolgozz,
amelyeket szeretsz használni. Arra viszont készülj fel, hogy biztosan lesznek
eltérések a szoftveredben a VS Code-hoz képest, és ezeket nem tudjuk majd
lefedni a modul során.

Pro tipp: A teljesség kedvéért itt van napjaink másik legelterjedtebb

szerkesztője, az Atom. Ez szintén ingyenes, próbáld ki nyugodtan, ha szeretnéd.
2.2. VS Code telepítése
A VS Code letöltéséhez és telepítéséhez elkészítettünk neked egy videót, hogy
lásd, hogy mit kell csinálni lépésről lépésre.

VS Code letöltése és telepítése Windowsra

Tipp: Macen az a legegyszerűbb, ha a Cmd + Szóköz kombináció után elkezded

begépelni, hogy Visual Studio Code, majd amikor megjelenik a program, akkor
nyomj egy Entert. Az is megoldás, ha az Alkalmazások mappából indítod el a
programot.

Megjegyzés: A Mac operációs rendszere figyelmeztetni fog, hogy a VS Code egy

internetről származó program, biztosan meg akarod-e nyitni. Nyugodtan nyisd
meg, biztonságos.

Amikor először indítod el a VS Code-ot, megnyílik egy „Kezdeti Lépések”

útmutató (Getting Started Guide). Ezt egészen nyugodtan hagyd figyelmen kívül,
ebben a modulban megtartjuk neked a saját bemutatónkat róla.

2.3. Kiegészítők telepítése

Most, hogy fut a VS Code, ideje megnéznünk, hogyan kell kezelni a
kiegészítőket.

Megjegyzés: A kiegészítők nem mások, mint kisebb programok, amelyek

további funkcionalitást adnak hozzá a szerkesztőprogramhoz.

A kiegészítők telepítéséhez kattints a bal oldalon található navigációs sávból az

utolsó gombra.
Ez megnyitotta a kiegészítő kezelő panelt. Ennek a tetején található beviteli
mezőt használva rákereshetünk a szükséges kiegészítőkre.

Kezdésnek egy hasznos kiegészítőt telepítünk fel, amelyet a frontend fejlesztés

során többször is használhatsz.

Live Preview telepítése

A Live Preview segítségével betekintést kaphatunk a HTML fájlok aktuális

állapotába, azaz, hogy miként néznek ki a böngészőben.

Első lépés: A beviteli mezőbe írd be a következőt: live preview.

2.3. Kiegészítők telepítése

Most, hogy fut a VS Code, ideje megnéznünk, hogyan kell kezelni a
kiegészítőket.

Megjegyzés: A kiegészítők nem mások, mint kisebb programok, amelyek

további funkcionalitást adnak hozzá a szerkesztőprogramhoz.

Miután megnyitod az alkalmazást, a következő ablak fogad:

A kiegészítők telepítéséhez kattints a bal oldalon található navigációs sávból az

utolsó gombra.
Ez megnyitotta a kiegészítő kezelő panelt. Ennek a tetején található beviteli
mezőt használva rákereshetünk a szükséges kiegészítőkre.

Kezdésnek egy hasznos kiegészítőt telepítünk fel, amelyet a frontend fejlesztés

során többször is használhatsz.

Live Preview telepítése

A Live Preview segítségével betekintést kaphatunk a HTML fájlok aktuális

állapotába, azaz, hogy miként néznek ki a böngészőben.

Első lépés: A beviteli mezőbe írd be a következőt: live preview.

Második lépés: Kattints a keresett kiegészítőre.

Ezzel egy új ablak nyílt meg, ahol egy pontos leírást láthatsz a kiegészítőről. Ezt
most nyugodtan hagyd figyelmen kívül.

Harmadik lépés: Kattints a kék „Install” feliratú gombra.

Végül pedig elindult a letöltés, illetve a telepítés is. Más feladatunk már nincs is
vele.

Ezzel készen vagyunk az első kiegészítőd telepítésével!

Az előző három lépést megismételve bármikor új kiegészítőt telepíthetsz fel.

Tipp: A kiegészítők telepítésénél fontos, hogy mindenképp nézd meg, mikor

készült a legutolsó frissítés.

Ha azt látnád, hogy évek óta nem lett frissítve, akkor előfordulhat, hogy nem az
elvárt módon fog működni.

3.1. A hercegnő projekt

Ebben a fejezetben egy projektet fogsz elkészíteni, mindeközben megnézzük
hogyan működik a VS Code. A feladatod egy mikrooldal megépítése lesz a saját
gépeden a VS Code segítségével.

Ez egy borzasztóan egyszerű weblap lesz – egy HTML-fájl, egy CSS-fájl és egy kép
az egész.

3.2. A projekt elkészítése

Most, hogy fut a VS Code, ideje megtanulnod új projektet létrehozni benne.

Hello, fájlok!

A HTML-, CSS- és JS-fájlok tulajdonképpen sima szöveges

fájlok .html, .css vagy .js kiterjesztéssel. Amikor egy projekten dolgozol a saját
gépeden, az ahhoz tartozó fájljaidat egy mappába kell gyűjtened.

Az online szerkesztők ezt automatikusan végrehajtják a háttérben, de a saját

gépeden ezt magadnak kell elvégezned. Először egy új projektmappát kell
létrehoznod, majd el kell helyezned bennük a szükséges fájlokat (és
almappákat).

Egy mappa mind fölött

Remélhetőleg még rengeteg különböző projekted lesz a jövőben. Szükséged

lesz egy helyre („mestermappára”), ahol tárolni tudod ezeket.
Nyisd meg a fájlkezelőd, és hozz létre egy ilyen mappát valahol a gépeden. A
mappát nevezd el frontend-projects-nek. Ez lesz az a mappa, ahol ki tudod
próbálni a megírt kódod.

Megjegyzés: Ugyan használhatnál szóközöket és nagybetűket a fájlok és

mappák elnevezése során, viszont jó gyakorlat a kisbetű plusz kötőjelek
megoldásnál maradni. Ez különösen akkor lesz majd hasznos, amikor szeretnéd
Git segítségével követni a projektjeid.

A gépeden a mappát tedd oda, ahova szeretnéd. Egy dologra figyelj: ezek a
könyvtárak gyorsan meg tudnak nőni, úgyhogy mindenképp olyan meghajtóra
tedd a mestermappád, ahol sok a szabad tárhely.

Feladat

Az első feladatod a megfelelő mappa létrehozása lesz a hercegnős projekthez.

Ehhez hozz létre a frontend-projects mappán belül egy princess-
project nevű mappát.

Most, hogy lett gyökérkönyvtárad, nyisd is meg VS Code-ban.

1. Indítsd el a szerkesztőt, és válaszd ki a "File > Open Folder..." opciót.

2. Keresd meg a princess-project mappát, amelyet épp most hoztál létre.
3. Nyisd meg.

Ha minden jól ment, valami ilyesmit kell látnod:

Gratulálunk! Létrehoztad az első projektmappádat a saját gépeden. Következő

lépésként hozzáadunk néhány fájlt a mappához.

3.3. Fájlok hozzáadása

Most már tudod, hogyan kell megnyitni egy mappát VS Code-on belül. Innentől
minden további fájlt és mappát létrehozhatsz közvetlenül a szerkesztőből
is. Próbáld ki: nyisd meg a frontend-projects mappát (ha közben bezártad
volna).

Látod a panelt a bal oldalon? Ez a VS Code fájlkezelő panelje, amely megmutatja

a gyökérkönyvtár tartalmát. Egyelőre a princess-project mappa van csak
benne, de ezen hamarosan változtatunk.

Megjegyzés: Ha esetleg nem látod a fájlkezelő panelt, akkor kattints az

„Explorer” gombra (legfelső ikon, a két írólap egymáson) és meg fog jelenni a
fájkezelő.

Kattints jobb egérgombbal valahol a panelen, és válaszd ki a New file („Új fájl”)
opciót a megjelenő menüből. Nevezd el index.html-nek, és nyomj Entert.

A fájl megjelent a gyökérkönyvtár neve alatt a panelen, jelezve, hogy bekerült a

mappába. Ezen kívül a VS Code megnyitotta neked a fájlt a paneltől jobbra. Ez
lesz a szerkesztőfelület, itt tudod szerkeszteni a megnyitott fájlt.

Megjegyzés: Arról nem beszéltünk konkrétan, hogy miként tudsz mappákat

létrehozni, de a logikája megegyezik a fájl létrehozásával.

Feladat

Itt az ideje egy kis gyakorlásnak. A princess-project mappán belül hozz létre
egy index.html és egy style.css fájlt, valamint egy assets nevű almappát.
3.4. A HTML
Eljött az ideje, hogy nekiálljunk magának a weboldalnak. A szükséges fájlokat az
előző leckében megcsináltuk, ezek közül elsőként a HTML-t nézzük meg.

Nyisd meg az index.html-t a fájkezelő panelről. Ezt fogod látni:

A jobb oldali nagy üres felület a szerkesztői panel, itt fogod írni a kódod.

Feladat

Itt az ideje némi programozásnak. Add hozzá ezeket a sorokat

az index.html fájlhoz:

<h1>A princess. Or is she?</h1>

<img src="https://orange.codeberryschool.com/content/images/project-
assets/princess-or-not.png" alt="Princess picture">

Tipp: A fenti kódblokk jobb felső sarkában találsz egy Copy gombot, amelyre
rákattintva kimásolja a kódblokk tartalmát.

Ha elkészültél, használd a Cmd + S (Macen) vagy a Ctrl + S (Windowson)

billentyűkombinációkat, hogy elmentsd a munkádat.

Megjegyzés: Erre különösen figyelj oda a jövőben. A VS Code sajnos nem

rendelkezik automatikus mentés funkcióval, mint a legtöbb online
kódszerkesztő.

3.5. A HTML boilerplate

Mielőtt továbbmennénk a CSS-re, van egy utolsó dolog, amit meg kell javítanunk
a HTML-ben: ez még nem egy érvényes HTML5-dokumentum. Talán már te is
észrevetted, hogy a szokásos doctype deklaráció, valamint a head és
a body tagek és tartalmuk hiányoznak. Gyorsan oldjuk meg ezt a problémát:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Princess Illusion</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
</head>
<body>

<h1>A princess. Or is she?</h1>

<img
src="https://orange.codeberryschool.com/content/images/p
roject-assets/princess-or-not.png" alt="Princess
picture">

</body>
</html>

Máris sokkal jobb.

Hogy lehet az, hogy a böngésző annak ellenére megjelenítette az oldalt, hogy
abból hatalmas részek hiányoztak?

Ennek az az oka, hogy a HTML egy meglehetősen elnéző nyelv szintaxis

szempontjából. A böngésző akkor is megpróbálja kitalálni, hogy mire
gondolhattál, ha hiányos kódot írsz, és igyekszik megjeleníteni az oldalt a
szándékaid szerint. Ezt jó tudnod, viszont semmiképp se tekintsd
felhatalmazásnak arra, hogy hanyag kódot írj. Jó, ha észben tartod – egy oldal
szédületes sebességgel tud elromlani, ha nem figyelsz arra, hogy valid HTML-t
írj.

Mit kell tartalmaznia egy HTML boilerplate-nek?

A HTML boilerplate teljesen felesleges, egyszerűen csak ki kell hagyni.

Csak a <html>, <head> és <body> tageket.
 Csak a doctype deklarációt.
A doctype deklarációt, valamint a <html>, <head> és <body> tageket.

3.6. Előnézet
Eddig amikor egy online kódszerkesztőben dolgoztál, akkor az meg tudta neked
jeleníteni valós időben a készülő weboldalad változtatásait. Például, ha
hozzáadtál egy új paragrafust, vagy kicseréltél egy képet, akkor az egyből meg is
jelent a kódszerkesztőben. Sajnos ez a funkcionalitás alapból nem része a VS
Code-nak.

Az előnézethez szükségünk lesz egy kiegészítőre: ez a Live Preview.

Szerencsére az előző fejezetben már telepítettük ezt a kiegészítőt, most pedig

végre megnézzük, miként működik.

Kétféleképpen tudod előhozni az előnézetet:

 Ha jobb egérgombbal rákattintasz egy HTML fájlra, akkor látni fogsz

egy Live Preview: Show Preview nevű lehetőséget.
 A VS Code jobb felső sarkában találsz egy gombot, amellyel szintén
előhozhatod az előnézetet.

Ez már önmagában is elég menő, de még jobb, hogy ez az előnézet

automatikusan frissül, ha bármit megváltoztatsz a kódban. Pont úgy, ahogy
az online kódszerkesztőkben már megszoktad.

Próbáljuk ki!

Szúrd be az alábbi paragrafust a kép alá:

<p>Hover over me.</p>

Láthatod, hogy a paragrafus azon nyomban megjelent a jobb oldali ablakban,

ahogy azt beszúrtad a kódba.

3.7. Saját média

Még egy lépés áll előttünk a weboldalunk kicsinosítása előtt: a weboldalon
használt kép elérése.

Ha figyelmesen megnézed az index.html fájlon belül a képet, akkor láthatod,

hogy azt a CodeBerry szerverről linkeltük be. Ez alapvetően rossz gyakorlatnak
számít. Amikor egy oldalt építesz, a különböző médiaelemeket (képek, videók
stb.) a saját szervereden illik tárolnod. Jelen esetben ez a saját gépedet jelenti.
Mindenekelőtt töltsd le a hercegnő képét erről a linkről, aztán másold be
a princess-project könyvtárad assets nevű almappájába.

Most menj vissza a VS Codeba. Láthatod, hogy a kép megjelent

az assets mappában. Ahhoz, hogy használhasd a projektben, már csak
egy relative path (relatív elérési út) deklarálására van szükséged.

"Egy relatív mire?" – kérdezhetnéd most.

Az src="" attribútum abszolút és relatív elérési utakat is képes kezelni. Eddig

csak abszolút elérési utakat használtál: URL-eket, amelyek egy adott fájlra
mutattak egy távoli szerveren. Azonban ha a saját médiafájljaidat használod,
akkor relatív elérési utakat kell megadnod. Egy ilyen relatív út azt mondja meg a
böngészőnek, hogy hol keresse az adott médiafájlt ahhoz a fájlhoz képest,
amelyben a relatív utat használjuk.

Ebben az esetben azt szeretnénk, ha a böngésző az assets mappában lévő

képet találná meg. Az index.html fájl ugyanazon a szinten van, mint
az assets mappa, ezért így fog kinézni a relatív elérési útvonal:

<img src="assets/princess-or-not.png" alt="Princess

picture">

Cseréld ki az src="" tulajdonság értékét a kódodban, és mentsd el a munkád.

Ha megnézed az előnézetet, olyan, mintha mi sem történt volna. Azonban
mostantól a kép már a gépedről jelenik majd meg, nem a CodeBerry
szervereiről. Menő, nem?

3.8. A CSS
Most, hogy a helyére került a HTML, itt az ideje feldíszíteni az oldalunkat!

Nyisd meg a style.css fájlt és illeszd be az alábbi kódot:

h1, p, img {
margin-bottom: 1rem;
}

h1,
p {
 text-align: center;
font-family: sans-serif;
font-weight: 300;
}

p {
font-style: italic;
font-size: .825rem;
}

img {
display: block;
width: 200px;
margin: 0 auto 1rem;
transition: .5s;
transition-delay: .5s;
}

img:hover {
transform: rotate(540deg);
}

Mentsd el a munkád, és nyisd meg az előnézetet. Hm... Valami nem stimmel,

nem történt változás az előnézetben.

Ez azért van, mert nem kapcsoltuk össze a HTML- és CSS-fájlunkat, így utóbbi
nem tudja érvényesíteni a hatását. Ez egy újabb különbség az online
kódszerkesztők és a VS Code között. Előbbiek automatikusan elvégzik ezt az
összekapcsolást a háttérben, míg az utóbbi nem. Amikor kódot írsz egy asztali
szerkesztőben, magadnak kell behívni a CSS-fájlokat egy link tag segítségével.

Nyisd meg az index.html fájlt, és illeszd be a következőt a head részbe:

<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>

Mentsd el és élvezd a munkád gyümölcsét:

Szép, ugye?
Ez a konkrét link tag három attribútummal bír:

 A rel="stylesheet" leírja a kapcsolatot a két fájl között. Ebben az

esetben azt jelzi a böngészőnek, hogy egy stylesheet-et (stíluslapot)
szeretnénk előhívni.
 A type="text/css" azt jelzi a böngésző felé, hogy .css kiterjesztésű
szöveges fájlra kell számítania.
 Végül a href="" tulajdonság elárulja a böngészőnek, hogy hol keresse a
stylesheet-et. (Ez egy újabb példája a relatív elérési útnak.)

Megjegyzés: Ha az adott CSS-fájlt több oldalon is szeretnéd használni, akkor

azokba a HTML-fájlokba is bele kell írnod. Megteheted azt is, hogy több CSS-fájlt
kapcsolsz egy HTML-hez, de az már egy teljesen más történet, amire később
visszatérünk.

Hogyan kötöd össze a CSS-fájlodat a HTML-eddel?

A két fájl automatikusan összekapcsolódik.

Egy <link> tag beillesztésével a <head> szekcióba, a következő
módon: <head><link rel="stylesheet" type="text/css"
href="style.css"></head>
Egy <link> tag beillesztésével a <head> szekcióba, a következő
módon: <head><link rel="stylesheet" type="text/css"
href="style.css"></link></head>
Egy <link> tag beillesztésével a <head> szekcióba, a következő
módon: <head><link rel="stylesheet" type="text/css"
src="style.css"></head>

3.9. Egy gyors összefoglaló

Gratulálunk, befejezted az első projektedet a saját, offline fejlesztői
környezetedben! Megérdemelsz egy vállveregetést magadtól.
Hogy le tudd ellenőrizni a munkádat, hoztunk neked egy példamegoldást,
amit ezen a GitHub linken tudsz megnézni.

Tipp: Egy kis segítség, ha még nem használtál GitHubot: a fájlokra és a

mappákra kattintva megnézheted azok tartalmát. Egy szinttel feljebb lévő
mappát a fájlok fölött található ..-ra kattintva nyithatsz meg.

Mielőtt még jobban elmélyedünk a VS Code rejtelmeiben, nézzük át gyorsan, mit

tanultál róla eddig. Most már tudod, hogyan kell:

 létrehozni egy új projektet VS Code-ban,

 fájlokat és mappákat hozzáadni a fájlkezelő panel segítségével,
 elmenteni a munkád,
 használni a Live Preview (élő előnézet) funkciót,
 saját médiát a projektmappában tárolni, és azt elérni relatív elérési utak
(relative paths) segítségével,
 létrehozni nulláról egy érvényes HTML5-dokumentumot, és
 összekapcsolni HTML- és CSS-fájlokat kézzel.

Ez azért egy komoly lista ám.

Mostanra megismerkedtél a VS Code alapjaival. A következő fejezetben néhány

menő, haladó szintű trükköt mutatunk be neked ezzel a szerkesztővel. Plusz egy
picit kitérünk arra is, hogyan kérj segítséget olyankor, amikor nem online
szerkesztőben dolgozol.

4.1. VS Code szupererők

Meg akarok mutatni neked két király funkciót, amellyel a VS Code fel tudja
gyorsítani a munkád: a többsoros szerkesztést és az automatikus kiegészítést.

Többsoros szerkesztés

Kellett már valaha ugyanazt a szöveget több sorban is átírnod? Ha igen, akkor
imádni fogod a VS Code többsoros szerkesztő funkcióját. Ha az Alt (vagy Macen
az Option(⌥)) billentyűt lenyomva tartod, akkor több kurzort is beszúrhatsz a
kódba kattintva.

Amikor gépelsz, a szöveg minden lent hagyott kurzornál meg fog jelenni. Így
csak egyszer kell begépelned a szöveged, ahelyett, hogy mindenhova egyesével
átmásolnád. Amint végeztél, egyszerűen nyomd meg az Esc billentyűt, és újra
csak egy kurzorod lesz.
Tipp: Ez a funkció például kifejezetten hasznos, amikor ugyanazt a CSS classt
több elemnek is meg akarod adni egyszerre.

Automatikus kiegészítés

Már valószínűleg észrevetted, hogy amikor elkezdesz begépelni egy HTML-taget

vagy egy CSS-szelektort, a VS Code javaslatokat tesz a beírtak alapján. A felugró
listából kiválaszthatod a kívánt opciót, amelyet az Enterrel megerősítve a
szerkesztő beszúr neked. Egy halom leütést megspórolhatsz így magadnak.

Megjegyzés: Ez csak néhány a sok szuperképesség közül, amelyekkel a VS Code

segítheti a munkád. Ahogy használod a szerkesztőt, nyugodtan kísérletezz a
különböző beállításokkal és képességekkel a továbbiakban is.

Hogyan tudod használni a VS Code többsoros szerkesztő funkcióját?

Ha az Alt (Macen az Option(⌥)) billentyűt nyomva tartod, akkor több helyre
kattintva több kurzort is be tudsz szúrni a kódba. Amit ezután gépelsz, minden
kurzornál egyszerre fog megjelenni a kódban, egészen addig, míg meg nem
nyomod az Esc billentyűt.
Kijelölsz egy elemet a HTML-kódban, és megnyomod az Alt + E (Macen
az Option(⌥) + E) billentyűkombinációt. Ennek eredményeként megjelenik a
beágyazott CSS-szerkesztő az elemre vonatkozó összes CSS-szabállyal,
amelyeket közvetlenül a HTML-fájlból át tudsz írni, és új szabályokat is létre
tudsz hozni.
Kijelölsz egy elemet a HTML-kódban, és megnyomod az Alt (Macen
az Option(⌥)) billentyűt. Ennek eredményeként megjelenik a beágyazott CSS-
szerkesztő az elemre vonatkozó összes CSS-szabállyal, amelyeket közvetlenül a
HTML-fájlból át tudsz írni, és új szabályokat is létre tudsz hozni.
Ha az Alt + E (Macen az Option(⌥) + E) billentyűket nyomva tartod, akkor
több helyre kattintva több kurzort is be tudsz szúrni a kódba. Amit ezután
gépelsz, minden kurzornál egyszerre fog megjelenni a kódban, egészen addig,
míg meg nem nyomod az Esc billentyűt.

4.2. VS Code gyorsbillentyűk

A VS Code, hasonlóan más alkalmazásokhoz, rendelkezik több hasznos
billentyűparanccsal, amelyekkel felgyorsíthatod a munkád.
Az előző leckében például láthattad, hogyan működik a többsoros szerkesztés:
az Alt (vagy Macen az Option(⌥)) billentyűt lenyomva tartva, majd a szöveg
bizonyos részeire kattintva tudtad használni.

Ezeket a parancsokat összefoglaló néven gyorsbillentyűknek nevezzük,

amelyek közül a legfontosabbakat összeszedtük neked egy letölthető
segédletben.

 A Windowshoz tartozó gyorsbillentyűket erre éred el.

 A Machez tartozó gyorsbillentyűket pedig ezen a linken találod meg.

Megjegyzés: A mi táblázatunk nem tartalmaz minden gyorsbillentyűt, hanem

csak azokat, amelyekről úgy gondoljuk, hogy kezdésnek a legtöbbet fogod
használni. Ha szeretnél a témában részletesebben is elmélyülni, tekintsd meg a
hivatalos oldalon található teljes listát Windowshoz vagy Machez.

4.3. Hogyan kérdezz jól

Ez egy nagy pillanat a programozói pályafutásodban: elhagytad az online
szerkesztőket egy helyi fejlesztői környezetért. Ez viszont felveti a kérdést:
hogyan kérhetsz segítséget innentől fogva.

Eddig ha valahol elakadtál, csak el kellett küldened egy linket a megfelelő Slack
csatornára, és a teljes kódod elérhető volt. Most viszont, hogy kiköltöztél a
gépedre, nincs ilyen link. Mit tudsz tenni, ha elakadsz? Ebben a leckében erre
keressük a választ, miközben megtanulsz úgy kérdezni, mint egy fejlesztő.

Ami nem változott

Az, hogy kiköltöztél az online szerkesztőkből, nem változtatja meg a jó

kérdésfeltevés alapjait. A korrekt kérdezés művészetéről itt egy gyors útmutató:

 Kezdj egy tételmondattal. Foglald össze benne a problémád röviden, hogy

a neked segíteni akarók azonnal láthassák, mire keresel megoldást. (Pl.
"Nem tudom elvégezni a clear float-ot a clearfix hack-kel. Mi lehet a
gond?")
 A következő részben fejtsd ki a problémád. Magyarázd el, hogyan futottál
bele a hibába, és mit tettél eddig a megoldás érdekében. Írj tisztán,
érthetően és követhetően. Magyarázd el a lépéseid pontról pontra az
olvasónak.
  Jelöld meg, hogy pontosan melyik feladatnál akadtál el a tananyagban.
Mellékelj egy pontos címet (vagy linket), hogy a segítőid el tudják olvasni a
kapcsolódó anyagrészletet.
 Mellékeld a releváns kódrészleteket Slacken (egy kódblokk formájában),
vagy küldj egy linket egy működő demóhoz. (Ennek a pontos mikéntjére
mindjárt kitérünk.)
 Olvasd át a kérdésed, mielőtt elküldenéd. Ez a lépés a legfontosabb:
mielőtt megnyomod a küldés gombot, olvasd el újra, amit írtál az elejétől
a végéig. Érthető? Tartalmaz minden olyan információt, amelyre szüksége
lehet valakinek, hogy megértse a problémád? Add hozzá az esetlegesen
hiányzó részleteket.
 Figyelj a helyesírásra és a központozásra. Hidd el, semmi sem lombozza le
jobban a potenciális segítőket, mint egy hanyagul megírt kérdés. Nem
viccelek.

Ha betartod ezeket az irányelveket, akkor megkönnyíted nekünk, hogy

segíthessünk neked. Ez persze gyorsabb válaszokat is eredményez részünkről.

Megjegyzés: A tananyagra vonatkozó résztől eltekintve a fentiek valamennyi

olyan fórumra igazak, ahol emberek kódról beszélgetnek. Használd ezeket, ha
segítséget szeretnél kérni másoktól.

Ami változik

Kódot rakni a kérdésed mellé valójában nem olyan nehéz. Csak emlékezz erre a
két szabályra:

1. Csak a releváns részeket mellékeld.

2. Tedd reprodukálhatóvá a problémád.

A segítőidnek nincs szüksége a teljes programodra vagy weboldaladra, csak

azokra a részekre, amelyek elegendőek ahhoz, hogy reprodukálják, megértsék
és megoldják a problémád. Próbáld meg belőni azt a részletet, amely a fejfájást
okozza, és csak azt elküldeni a kérdésed mellett.

Tipp: Kódblokkokat úgy tudsz egyszerűen hozzáadni Slacken, ha körbeveszed

őket tripla backquote-okkal (```<!-- ide jön a kódod -->```). A másik lehetőséged, hogy
rákattintasz a plusz jelre a szövegmező mellett, és kiválasztod a "Code or text
snippet" opciót a felugró menüből. Kérlek, használd valamelyik módszert ezek
közül, és ne másolj be nyersen kódot a Slackbe.
Ha az egész oldaladra / programodra szükség van a prezentáláshoz, akkor két
lehetőséged van:

 Készíts egy demót valamelyik online szerkesztőben, amely tartalmazza a

kódod, és küldd el a linket.
 Töltsd fel a munkád GitHubra, és küldd el a repository linkjét.

Ha az utóbbi egyelőre idegenül hangzik, ne aggódj – egy másik, kifejezetten a

Gitről szóló modulunkban ki fog tisztulni.

Pro tipp: Ha szeretnél még többet megtudni arról, hogy miként érdemes kódot
mellékelni a kérdéseidhez, olvasd el ezt az angol nyelvű cikket StackOverflow-n.

Ennyi – most már tudod, hogyan kérj segítséget, ha offline környezetben

dolgozol.

Ha a saját gépeden található kóddal kapcsolatban szeretnél kérdezni,

hogyan tudod mellékelni a kódodat?
Ha asztali szerkesztőben dolgozol, nincs lehetőséged kódot mellékelni – azt
egyszerűen ki kell hagynod a kérdésedből.
A teljes kódodat be kell másolnod a kérdésedbe.
Csak a releváns kódrészletet mellékeled a kérdésedhez, annyit, amennyi elég
a problémád reprodukálásához. Ha a teljes kód releváns, akkor vagy készítesz
egy online szerkesztős demót belőle, vagy feltöltöd a munkádat a GitHubra, és
megosztod a linket.
A saját gépeden a fájlhoz vezető elérési utat kell mellékelned a kérdésedhez.

5.1. Gratulálunk
Ezzel véget ért az asztali szövegszerkesztőkről szóló modulunk. Szép munka,
remélem, élvezted az anyagot, és tetszeni fog a VS Code-dal való munka.

Ha jobban bele szeretnéd ásni magad a szerkesztőbe, javaslom a hivatalos

oldalt, ahol rengeteg hasznos dolgot találhatsz.

Mi pedig találkozunk a következő modulban. Addig is pacsi!