Základy moderného layoutu - bezplatný kurz od Hexlet, školenie 9 hodín, Termín: 5.12.2023.
Rôzne / / December 06, 2023
Dozviete sa viac o značkách HTML a možnostiach moderného štandardu HTML5. Získate aj základné znalosti o štýloch pomocou CSS: naučíte sa spájať štýly, používať selektory a pracovať s kaskádovaním. Okrem HTML a CSS sa naučíte pracovať s nástrojmi na ladenie rozloženia, ktoré sú vstavané v prehliadači, najmä s Google Chrome DevTools. Vďaka tomu sa naučíte používať značkovací jazyk HTML na rozloženie textu na webovej stránke a tiež sa zoznámite so základnými pravidlami používania CSS a štýlov textu.
Svoje nové zručnosti budete môcť okamžite uplatniť v praxi – naštudujeme si k nim editory layoutov a pluginy. Na konci každej lekcie nájdete malé samostatné úlohy. Sú zamerané na praktickejšie pochopenie preberanej témy, a preto sa dôrazne odporúčajú na implementáciu.
Základy layoutu sa vám zídu, ak sa rozhodnete študovať web development bez ohľadu na smer. Poznatky z tohto kurzu pomáhajú programátorom označovať dáta a zobrazovať ich na stránke. Tento kurz je vhodný pre začiatočníkov a vývojárov, ktorí sa ešte nestretli
Úvod
Kurz „Základy moderného rozloženia“ je základom pre osvojenie si základov HTML a CSS rozloženia webových stránok. V tejto lekcii si stručne povieme o tom, čo sa na kurze naučíme a ako sa dajú tieto poznatky aplikovať v praxi.
Úvod do HTML
Lekcia je venovaná rozloženiu HTML od začiatku. Hovoríme o úlohe atribútov a študujeme všeobecnú schému na popis HTML značiek.
Blokový model
Ktoré prvky sú zodpovedné za rámec stránky a ktoré pomáhajú v procese jej štylizácie alebo pridávania funkčných častí? Zoznámime sa s blokovými a inline HTML prvkami a naštudujme si vplyv štýlov na konečnú šírku prvkov.
Sémantické HTML
Hlavným cieľom akéhokoľvek rozloženia HTML je vyjadriť význam blokov. V tejto lekcii preskúmame sémantické možnosti najnovšieho štandardu HTML5 a dozvieme sa o dostupnosti webu.
Základná štruktúra HTML dokumentu
Každý HTML dokument má základnú štruktúru pozostávajúcu zo značiek a prvkov služby. Prehliadač ich potrebuje na správne zobrazenie informácií. V tejto lekcii sa pozrieme na každý riadok tejto štruktúry.
Základy CSS
Jazyk CSS bol vytvorený pre vizuálny dizajn webovej stránky. Študujeme základné možnosti jazyka, zisťujeme, ako ich používať spolu s HTML. Učíme sa zaraďovať CSS súbory a oboznamujeme sa so základnými typmi selektorov.
Kaskádovanie v CSS
Čo je kaskádovanie a ako to funguje v CSS? Lekcia je venovaná rozdielom v prioritách selektora a schopnosti využiť ich vo svojich projektoch.
Chrome DevTools
Pri usporiadaní webovej stránky je dôležité nájsť chyby včas alebo pochopiť, ako správne previesť blok, ktorý potrebujeme. Predtým sa to robilo predovšetkým ručne. V súčasnosti majú moderné prehliadače funkciu webového inšpektora. Pozrime sa na možnosti jedného z nich - Chrome DevTools.
Editory kódu
Ak chcete uložiť svoju prácu, potrebujete editor kódu. V tejto lekcii sa pozrieme na to, ako nainštalovať Visual Studio Code. Ide o výkonný nástroj, ktorý možno použiť nielen na rozloženie, ale aj na programovanie v akomkoľvek jazyku.
Emmet
Poďme študovať jeden z najužitočnejších doplnkov pre dizajnérov rozloženia - Emmet. Zrýchli to značenie HTML kódu a odstráni väčšinu rutinných krokov.
Publikácia na internete
Ak chcete umiestniť projekt na internet, musíte použiť hosting - špeciálny server, ktorý bude ukladať súbory a poskytovať k nim prístup prostredníctvom názvu domény. V tomto návode sa pozrieme na bezplatný hosting GitHub.
Grafický editor
Na trhu je niekoľko významných editorov. Niektoré z nich sú špecifické len pre jeden operačný systém, iné je možné nainštalovať na ktorýkoľvek z nich. V tejto časti sa pozrime na hlavné kroky, keď dizajnér rozloženia pracuje s online editorom Figma.
Samostatná práca
Ďalšie úlohy, ktoré vám umožnia upevniť získanú teóriu
Dodatočné materiály
Články a videá kurátorom tímu Hexlet. Pomôže vám ponoriť sa hlbšie do témy kurzu