Modern elrendezés alapjai - ingyenes tanfolyam a Hexlettől, képzés 9 óra, Időpont: 2023. december 5.
Vegyes Cikkek / / December 06, 2023
Többet megtudhat a HTML jelölésről és a modern HTML5 szabvány képességeiről. Alapvető ismereteket is szerezhet a CSS használatával kapcsolatos stílustervezésről: megtanulja a stílusok összekapcsolását, a szelektorok használatát és a lépcsőzetes munkavégzést. A HTML-en és a CSS-en kívül megtanulhat dolgozni a böngésző beépített elrendezés-hibakereső eszközeivel, különösen a Google Chrome DevTools-szal. Ennek eredményeként megtanulja, hogyan kell a HTML jelölőnyelvet használni szövegek elrendezésére egy webhelyen, valamint megismeri a CSS és a szövegstílus használatának alapvető szabályait.
Azonnal átültetheti új készségeit a gyakorlatba – tanulmányozzuk az elrendezésszerkesztőket és a hozzájuk tartozó beépülő modulokat. Minden óra végén kisebb önálló feladatokat találsz. Céljuk a tárgyalt téma gyakorlatiasabb megértése, ezért kifejezetten ajánlott a megvalósítás.
Az elrendezés alapjai jól jönnek, ha úgy döntesz, hogy webfejlesztést tanulsz, iránytól függetlenül. A tanfolyamon szerzett ismeretek segítenek a programozóknak az adatok megjelölésében és a webhelyen való megjelenítésében. Ez a tanfolyam kezdőknek és fejlesztőknek szól, akik még nem találkoztak
Bevezetés
A „Modern elrendezés alapjai” kurzus az alapja a HTML és CSS weboldalelrendezés alapjainak elsajátításának. Ebben a leckében röviden beszélünk arról, hogy mit tanulunk a tanfolyamon, és hogyan lehet ezt a tudást a gyakorlatban alkalmazni.
Bevezetés a HTML-be
A leckét a HTML-elrendezésnek szenteljük a semmiből. Beszélünk az attribútumok szerepéről, és tanulmányozzuk a HTML-címkék leírásának általános sémáját.
Blokkmodell
Mely elemek felelősek az oldal keretéért, és melyek segítik a formázást vagy a funkcionális részek hozzáadását? Ismerkedjünk meg a blokk és inline HTML elemekkel, és tanulmányozzuk a stílusok hatását az elemek végső szélességére.
Szemantikus HTML
Bármely HTML-elrendezés fő célja a blokkok jelentésének közvetítése. Ebben a leckében a legújabb HTML5 szabvány szemantikai lehetőségeit tárjuk fel, és megismerjük a webes kisegítő lehetőségeket.
A HTML dokumentum alapvető szerkezete
Minden HTML-dokumentumnak van egy címkékből és szolgáltatáselemekből álló alapstruktúrája. A böngészőnek szüksége van rájuk az információk helyes megjelenítéséhez. Ebben a leckében ennek a szerkezetnek minden sorát megvizsgáljuk.
CSS alapok
A CSS nyelvet egy weboldal vizuális tervezésére hozták létre. Tanulmányozzuk a nyelv alapvető képességeit, kitaláljuk, hogyan használhatjuk őket a HTML-lel együtt. Megtanuljuk a CSS fájlok beillesztését és megismerkedünk a szelektorok alapvető típusaival.
Lépcsőzetes CSS-ben
Mi a kaszkádolás és hogyan működik a CSS-ben? A leckét a kiválasztók prioritásai közötti különbségeknek és annak a lehetőségnek szenteljük, hogy ezeket a projektekben felhasználhassuk.
Chrome DevTools
A webhely elrendezése során fontos, hogy időben megtaláljuk a hibákat, vagy megértsük, hogyan kell megfelelően átalakítani a szükséges blokkot. Korábban ez elsősorban kézzel történt. Napjainkban a modern böngészők webellenőrző funkcióval rendelkeznek. Nézzük meg az egyik képességeit - a Chrome DevTools.
Kódszerkesztők
A munka mentéséhez kódszerkesztőre van szüksége. Ebben a leckében megvizsgáljuk, hogyan kell telepíteni a Visual Studio Code-ot. Ez egy hatékony eszköz, amely nem csak az elrendezéshez használható, hanem bármilyen nyelvű programozáshoz is.
Hangya
Tanulmányozzuk az egyik leghasznosabb beépülő modult az elrendezéstervezők számára - Emmet. Felgyorsítja a HTML-kód jelölését, és eltávolítja a legtöbb rutinlépést.
Publikáció az interneten
Ahhoz, hogy egy projektet az internetre helyezzen, tárhelyet kell használnia - egy speciális szervert, amely fájlokat tárol, és hozzáférést biztosít hozzájuk egy domain néven keresztül. Ebben az oktatóanyagban az ingyenes GitHub-tárhelyet tekintjük meg.
Grafikus szerkesztő
Számos jelentős szerkesztő van a piacon. Némelyikük csak egy operációs rendszerre vonatkozik, mások bármelyikre telepíthetők. Ebben a részben nézzük meg azokat a fő lépéseket, amikor egy elrendezéstervező dolgozik a Figma online szerkesztővel.
Önálló munkavégzés
További feladatok, amelyek lehetővé teszik a megszerzett elmélet megszilárdítását
Kiegészítő anyagok
A Hexlet csapata által összeállított cikkek és videók. Segít mélyebbre merülni a kurzus témájában