Základy obsahové úpravy - kurz 3 900 RUB. z Hexlet, školení 18 hodin, Termín: 1. prosince 2023.
Různé / / December 04, 2023
Dnes poskytují šablony stylů skvělé příležitosti pro stylování textu a bloků na stránce: pozadí, barva, použití zvuku a videa. Všechny tyto prvky umožňují vytvářet barevné a přístupné stránky pro uživatele. Hodně času bylo stráveno učením se nových selektorů, pseudotříd a pseudoprvků. Umožňují vám stylizovat obsah mimořádným způsobem.
Testy
Jedná se o praktické úkoly, které doporučujeme splnit po absolvování kurzu. Úkoly vám pomohou získat další zkušenosti s programováním a upevnit získané dovednosti. Obvykle doporučujeme absolvovat 3-5 testů. Pokud to ale nevyjde, nezoufejte. Jen se k nim vraťte později.
1. Úvod
Práce s obsahem je základní součástí při tvorbě projektu. Za krásnými animacemi, bloky a obrázky se skrývá obsah. Uživatel přijde na web nebo pro něj otevře aplikaci. V této lekci se stručně podíváme na témata, která budou v průběhu kurzu studována.
teorie
2. Box Model a CSS
Jaké vlastnosti CSS ovlivňují velikost prvků při zobrazení na stránce? Připomeňme si koncept krabicového modelu a prostudujte si, jak vlastnosti margin, padding a border fungují pro nastavení vnějšího/vnitřního odsazení a viditelných hranic prvku. Pojďme se seznámit s vlastností box-sizing, která mění standardní chování boxového modelu
teorie
3. Styly textu
Vytvoření stránky je především práce s textem. Bez ohledu na to, jak krásný je design, pokud jsou informace obtížné nebo nemožné přečíst, uživatel stránku rychle opustí. V této lekci se seznámíme se základními vlastnostmi stylování textu.
teorie
testy
cvičení
4. Fonty a práce s nimi
Už jste slyšeli frázi „hrát si s fonty“? Je čas to udělat. Učíme se propojovat písma pomocí CSS, ovládat velikost textu, design a nastavovat řádkování. Na konci lekce si prostudujeme zobecněnou vlastnost písma, pomocí které můžete nastavit 6 různých stylů textu najednou
teorie
testy
cvičení
5. Seznamy
Nedílnou součástí textu jsou seznamy. Umožňují vám seskupit související fragmenty a sjednotit je podle jejich významu. V této lekci prozkoumáme dostupné typy seznamů v HTML, procvičíme si vnořování seznamů a dotkneme se tématu stylingu značek seznamu
teorie
testy
cvičení
6. Sloupce
Vytvoření vícesloupcového rozvržení časopisu bylo problematické pomocí CSS. S příchodem standardu CSS3 se objevil nový modul - CSS Multi-column Layout, který umožňoval vytvářet sloupce s automatickým přenosem obsahu. Pojďme si prostudovat možnosti modulu CSS Columns a omezení, která tato metoda stylování textu přináší
teorie
testy
cvičení
7. Jednotky
Stejně jako ve skutečném světě používá svět rozvržení měrné jednotky k označení velikostí prvků, odsazení, velikosti textu a tak dále. V této lekci se seznámíme se základními měrnými jednotkami a jejich vztahem k prvkům na webu. Pojďme studovat koncept relativních a absolutních jednotek a identifikovat rozdíl mezi jednotkami em a rem
teorie
testy
cvičení
8. Mediální prvky
Návštěvníci webu nejen rádi čtou text, ale také vnímají informace prostřednictvím mediálních prvků: obrázky, video, zvuk. Jak je správně přidat a zohlednit rozdíly v prohlížečích? Proč má obrázek na webu ve spodní části malé odsazení? Podívejme se na to a trochu více v lekci.
teorie
testy
cvičení
9. Tabulky
Tabulky jsou noční můrou designéra rozvržení. K jejich tvorbě se používá spousta tagů a drobné chybičky dokážou zkazit náladu. V této lekci budeme krok za krokem studovat tvorbu jednoduchých i složitých tabulek, pochopíme, odkud mohou vzniknout chyby a jak jim předcházet. Na konci lekce budete schopni sebevědomě vytvářet tabulky a přestanete se jich bát.
teorie
testy
cvičení
10. formuláře
Formuláře jsou důležitým interaktivním prvkem webové stránky. Stejně jako odkazy poskytují formuláře interakci mezi uživatelem a stránkou a umožňují vám odesílat data. Pojďme se naučit vytvářet formuláře, přidávat textová pole, výběrová pole, seznamy a tlačítka. Dotkněme se tématu přístupnosti formulářů pro osoby se zdravotním postižením
teorie
testy
cvičení
11. Selektory
V této lekci jsme se naučili a otestovali jednoduché selektory, které nám umožnily vybrat prvky podle třídy, identifikátoru nebo značky. Jak jinak můžete vybrat prvek na stránce? V této lekci analyzujeme související a sousední selektory, naučíme se používat selektory podle atributu
teorie
testy
cvičení
12. Pseudotřídy
Pokračujme v tématu selektorů v CSS a seznamme se s konceptem pseudotřídy. Pojďme se naučit, jak je používat k výběru sudých nebo lichých prvků, jak přidávat nové styly přechodu myši na prvek a proč budou i prvky takové při použití pouze určitého pseudotřída. Pojďme pochopit stavy prvků a strukturální pseudotřídy
teorie
testy
cvičení
13. Pseudoprvky
Chybějící prvky na stránce? Na pomoc přicházejí pseudoprvky - prvky vytvořené pomocí CSS. V této lekci se podíváme na to, jak se vytvářejí pseudoprvky, proč jsou potřeba a jaké mají vlastnosti. Podívejme se, jak jsou v CSS stylizovány značky seznamu
teorie
testy
14. Přetékat
Přetečení je situace, kdy je obsah uvnitř kontejneru větší než velikost samotného kontejneru. Tato situace může zkazit dispoziční řešení i zkušenému dispozičnímu designérovi. V této lekci se naučíme, co s tím dělat a jak spravovat skrývání obsahu pomocí vlastnosti overflow. Podívejme se na vlastnost text-overflow a naučíme se, jak přidat elipsu do textů, pokud pro ni není dostatek místa
teorie
testy
cvičení
15. CSS proměnné
Představte si, že na webu je tucet bloků s pozadím stejné barvy. Musíte změnit všechny tyto barvy. Jak to udělat, aniž byste neustále vyměňovali barvu v každém selektoru a jak mohou proměnné pomoci, se naučíme v této lekci. Podívejme se, jak se vytvářejí a používají proměnné, dozvíme se o rozsahu a proč jsou globální proměnné lepší než proměnné na selektor
teorie
testy
16. Pozadí
Návrhář rozvržení poměrně často čelí potřebě stylizovat nejen specifické prvky, jako jsou tabulky, seznamy, text, mediální prvky a formuláře. Někdy je také potřeba stylizovat bloky, které se nacházejí uvnitř. Chcete-li to provést, můžete nastavit pozadí pro blok s obsahem a v této lekci se naučíme, jak to provést pomocí vlastnosti pozadí. Pojďme si prostudovat vlastnosti pro nastavení barvy, obrázku, naučíme se, jak umístit pozadí a nastavit jeho velikost
teorie
testy
17. Přechody
Jednobarevné pozadí nebo obrázek není jediný způsob, jak upravit styl bloku. Umělci a návrháři často používají přechody k vytváření pozadí – hladké přechody z jedné barvy do druhé. V tomto tutoriálu se naučíme vytvářet lineární a radiální gradienty. Pomocí přechodů a triků budeme studovat vytváření ostrých přechodů mezi barvami a také se seznámíme s barevným kruhem a jak s jeho pomocí najít barevné kombinace pro přechody.
teorie
cvičení
18. Samostatná práce
Doplňkové úkoly, které umožňují upevnit nabytou teorii
19. Doplňkové materiály
Články a videa kurátorem týmu Hexlet. Pomůže vám ponořit se hlouběji do tématu kurzu