Základy rozloženia obsahu - kurz 3 900 RUB. z Hexlet, tréning 18 hodín, Termín: 1.12.2023.

1. Úvod
Práca s obsahom je základnou súčasťou pri tvorbe projektu. Za krásnymi animáciami, blokmi a obrázkami sa skrýva obsah. Používateľ príde na stránku alebo pre ňu otvorí aplikáciu. V tejto lekcii sa stručne pozrieme na témy, ktoré sa budú počas kurzu študovať.

teória

2. Box Model a CSS
Aké vlastnosti CSS ovplyvňujú veľkosť prvkov pri zobrazení na stránke? Spomeňme si na koncept krabicového modelu a naštudujme si, ako fungujú vlastnosti margin, padding a border na nastavenie vonkajšieho/vnútorného odsadenia a viditeľných hraníc prvku. Zoznámime sa s vlastnosťou box-sizing, ktorá mení štandardné správanie boxového modelu

teória

3. Štýly textu
Vytvorenie stránky je v prvom rade práca s textom. Bez ohľadu na to, aký krásny je dizajn, ak sú informácie ťažké alebo nemožné prečítať, používateľ stránku rýchlo opustí. V tejto lekcii sa zoznámime so základnými vlastnosťami štýlu textu.

teória
testy
cvičenie

4. Písma a práca s nimi
Počuli ste už frázu „hrať sa s písmami“? Je čas to urobiť. Učíme sa spájať písma pomocou CSS, ovládať veľkosť textu, dizajn a nastavovať riadkovanie. Na konci lekcie si preštudujeme zovšeobecnenú vlastnosť písma, pomocou ktorej môžete nastaviť 6 rôznych štýlov textu naraz

teória
testy
cvičenie

5. zoznamy
Zoznamy sú neoddeliteľnou súčasťou textu. Umožňujú vám zoskupiť súvisiace fragmenty a spojiť ich podľa ich významu. V tejto lekcii preskúmame dostupné typy zoznamov v HTML, precvičíme si vnorené zoznamy a dotkneme sa témy úpravy značiek zoznamu

teória
testy
cvičenie

6. Stĺpce
Vytvorenie viacstĺpcového rozloženia časopisu bolo problematické pomocou CSS. S príchodom štandardu CSS3 sa objavil nový modul – CSS Multi-column Layout, ktorý umožnil vytvárať stĺpce s automatickým prenosom obsahu. Poďme si preštudovať možnosti modulu CSS Columns a obmedzenia, ktoré sú spojené s touto metódou úpravy textu

teória
testy
cvičenie

7. Jednotky
Rovnako ako v skutočnom svete, svet rozloženia používa merné jednotky na označenie veľkostí prvkov, výplne, veľkosti textu atď. V tejto lekcii sa zoznámime so základnými jednotkami merania a ich vzťahom k prvkom na stránke. Poďme študovať koncept relatívnych a absolútnych jednotiek a identifikovať rozdiel medzi jednotkami em a rem

teória
testy
cvičenie

8. Mediálne prvky
Návštevníci webu radi nielen čítajú text, ale informácie vnímajú aj prostredníctvom mediálnych prvkov: obrázky, video, zvuk. Ako ich správne pridať a zohľadniť rozdiely v prehliadačoch? Prečo má obrázok na stránke malú zarážku v spodnej časti? Poďme preskúmať toto a trochu viac v lekcii.

teória
testy
cvičenie

9. Tabuľky
Tabuľky sú nočnou morou dizajnéra rozloženia. Na ich vytvorenie sa používa množstvo značiek a drobné chybičky dokážu pokaziť náladu. V tejto lekcii budeme krok za krokom študovať vytváranie jednoduchých a zložitých tabuliek, pochopíme, odkiaľ môžu vzniknúť chyby a ako im predchádzať. Na konci lekcie budete môcť s istotou vytvárať tabuľky a prestať sa ich báť.

teória
testy
cvičenie

10. Formuláre
Formuláre sú dôležitým interaktívnym prvkom webovej stránky. Podobne ako odkazy, aj formuláre poskytujú interakciu medzi používateľom a stránkou, čo vám umožňuje odosielať údaje. Poďme sa naučiť vytvárať formuláre, pridávať textové polia, výberové polia, zoznamy a tlačidlá. Dotknime sa témy prístupnosti formulárov pre ľudí so zdravotným postihnutím

teória
testy
cvičenie

11. Selektory
V tejto lekcii sme sa naučili a testovali jednoduché selektory, ktoré nám umožnili vybrať prvky podľa triedy, identifikátora alebo značky. Ako inak môžete vybrať prvok na stránke? V tejto lekcii budeme analyzovať súvisiace a susedné selektory, naučíme sa, ako používať selektory podľa atribútu

teória
testy
cvičenie

12. Pseudotriedy
Pokračujme v téme selektorov v CSS a zoznámime sa s konceptom pseudotriedy. Poďme sa naučiť, ako ich použiť na výber párnych alebo nepárnych prvkov, ako pridať nové štýly vznášania myšou na prvok a prečo budú aj prvky také pri použití iba určitého pseudotrieda. Poďme pochopiť stavy prvkov a štrukturálne pseudotriedy

teória
testy
cvičenie

13. Pseudoprvky
Chýbajú prvky na stránke? Na pomoc prichádzajú pseudoprvky - prvky vytvorené pomocou CSS. V tejto lekcii sa pozrieme na to, ako sa vytvárajú pseudoprvky, prečo sú potrebné a aké majú vlastnosti. Pozrime sa, ako sú značky zoznamu štylizované v CSS

teória
testy

14. Pretečenie
Pretečenie je situácia, v ktorej je obsah vnútri nádoby väčší ako veľkosť samotnej nádoby. Táto situácia môže pokaziť dispozičné riešenie aj skúsenému dispozičnému dizajnérovi. V tejto lekcii sa naučíme, čo s tým robiť a ako spravovať skrytie obsahu pomocou vlastnosti overflow. Pozrime sa na vlastnosť text-overflow a naučíme sa, ako pridať tri bodky do textov, ak na to nie je dostatok miesta

teória
testy
cvičenie

15. Premenné CSS
Predstavte si, že na webovej stránke je tucet blokov s pozadím rovnakej farby. Musíte zmeniť všetky tieto farby. Ako to urobiť bez neustáleho nahrádzania farby v každom selektore a ako môžu pomôcť premenné, sa naučíme v tejto lekcii. Pozrime sa, ako sa vytvárajú a používajú premenné, dozvieme sa o rozsahu a prečo sú globálne premenné lepšie ako premenné na výber

teória
testy

16. Pozadie
Návrhár rozloženia pomerne často čelí potrebe upraviť štýl nielen špecifických prvkov, ako sú tabuľky, zoznamy, text, mediálne prvky a formuláre. Niekedy je tiež potrebné štylizovať bloky, ktoré sa nachádzajú vo vnútri. Ak to chcete urobiť, môžete nastaviť pozadie pre blok s obsahom a v tejto lekcii sa naučíme, ako to urobiť pomocou vlastnosti pozadia. Preštudujme si vlastnosti nastavenia farby, obrázku, naučíme sa ako umiestniť pozadie a nastaviť jeho veľkosť

teória
testy

17. Prechody
Jednofarebné pozadie alebo obrázok nie je jediný spôsob, ako upraviť štýl bloku. Umelci a dizajnéri často používajú prechody na vytváranie pozadí - hladké prechody z jednej farby do druhej. V tomto návode sa naučíme vytvárať lineárne a radiálne gradienty. Pomocou prechodov a trikov budeme študovať vytváranie ostrých prechodov medzi farbami a tiež sa dozvieme o farebnom koliesku a ako s jeho pomocou nájsť farebné kombinácie pre prechody.

teória
cvičenie

18. Samostatná práca
Ďalšie úlohy, ktoré vám umožnia upevniť získanú teóriu

19. 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