Rozvržení a vývoj webových stránek. Pokročilá úroveň Web Develop - kurz 1990 rub. od Stepiku, trénink 131 lekcí, Termín: 1.12.2023.

Od roku 2016 tvořím originální online kurzy. Profesně vyučuji práci s grafickými editory Adobe, učím design a vývoj webových aplikací.

Ahoj! Jmenuji se Dima! Nechci se chlubit, ale musím) Učil jsem více než 5 000 studentů po celém světě ve svých proprietárních online kurzech. Více než 2 000 skutečných recenzí s průměrným hodnocením 4,83 z 5,00! Vyučuji webdesign, web development a potřebný software (Photoshop Illustrator, Figma). Moje pedagogická zkušenost se skládá z 5 let doučování na volné noze a také z výuky prostřednictvím online škol a kurzů na globálních platformách dálkového vzdělávání. Studenti mých kurzů zaznamenávají moje nejlepší vlastnosti v tom, jak prezentuji látku bez přecpávání, zábavnou a zajímavou formou.

Příprava / Opakování / První animace
1. Dobrý den!) Stáhněte si materiály ke kurzu
2. Nainstalujte a nakonfigurujte potřebný software 
3. Nová klipová cesta vlastnosti. Začínáme vytvářet první sekci webu 
4. Pokud vám skautská aplikace nefunguje
5. Cvičení: Vytvořte svůj tvar pomocí Clip-path
6. Vertikální zarovnání prvků pomocí absolutního umístění
7. Seznamte se s @KeyFrames. Vytvoříme první animaci.
8. Viditelnost zadní strany a vytváření tlačítek pomocí pseudotříd
9. Animace tlačítka pomocí pseudoprvků
10. Režim animace. Spuštění animace od určitého bodu.
11. 3 principy vývoje webu
12. Místo PX použijte REM
Git a GitHub
1. O čem je tento blok?
2. Základní příkazy v terminálu
3. Jak upravovat soubory přes terminál
4. Nainstalujte systém git na náš počítač
5. Jak spustit git v konkrétním projektu
6. Vytvoření prvního potvrzení
7. Odeslání projektu na GitHub
8. Pokud se při odesílání projektu na GitHub vyskytne chyba
9. Chyba přihlášení při pokusu o odeslání projektu na GitHub
10. Cvičení: Vytvořte si vlastní úložiště
11. Jak odstranit úložiště GitHub
12. Jak stahovat repozitáře z GitHubu
13. Emulujeme práci 2 vývojářů na jednom úložišti
14. Jak zobrazit informace o commitech v terminálu. Git log
15. Co jsou pobočky
16. Jak vytvářet a procházet větve.
17. Mezeru ze začátku mini kurzu uzavíráme zápisy -u a -M
18. Chyba neuloženého potvrzení při placení
19. Jak přenést vytvořené změny do nové větve
20. Jak poslat více commitů do nové větve
21. Jaký je stav oddělené hlavy? Oddělená HLAVA
22. Jak obnovit konkrétní soubor z předchozího odevzdání
23. Pokročilý git log a git show
24. Jak sloučit větve pomocí Git merge. Rychlý postup vpřed
25. Jak odstranit větve
26. Jak odstranit soubory adresáře z nesledovaného stavu
27. Reset Git -- tvrdý. Jak tvrdě vrátit zpět odevzdání
28. Druhý způsob, jak najít zaseknutý commit pomocí ORIG_HEAD
29. Git reset --soft
30. Git commit --amend změnou komentáře předchozího commitu
31. Git reset --mixed
32. Rozdíl mezi git reset a git restore
33. Úvod do git diff. Tisk rozdílu několika potvrzení do konzole
34. Praktický příklad použití git diff
35. Jak zobrazit schéma větvení v terminálu. Git log --graph
36. Slučujeme větve pomocí git merge. Metoda "Opravdová fúze"
37. Jak se vrátit zpět po sloučení
38. Jak zkopírovat konkrétní commit pomocí git cherry-pick
39. Sloučení větví s git rebase
40. Což je lepší git rebase nebo git merge
41. Jak používat soubor .gitignore
42. Závěrečné slovo
Pokročilé rozložení - CSS/SASS
1. O čem je tento blok?
2. Jak fungují proměnné SASS
3. Jak mixiny fungují
4. Jak přidat argumenty do mixinů
5. Co jsou šablony SASS
6. Jak fungují funkce SASS
7. Organizace souborů SASS pro velký projekt
8. 3 způsoby umístění prvků
9. Jak plovák funguje?
10. Vytváření vlastního gridového systému
11. Použití přechodu na text. Klip na pozadí
12. Jak vytvářet symboly pomocí HTML
13. Animace a dokončení druhé části
14. Jak vytvořit vlastní písma ikon
15. Vlastnost perspektivy používáme k vyjádření perspektivy prvků
16. Jak funguje režim prolnutí v CSS
17. Dokončení sekce s kartami
18. Jak zaokrouhlit text pomocí vlastnosti shape-outside
19. Jak fungují CSS filtry
20. Jak přidat video na stránku
21. Seznámení se značkou formuláře a jejím obsahem
22. Animace formuláře
23. Vytvoření vlastního přepínače pomocí CSS
24. Vytvoření zápatí webu
25. Vytvoření navigační nabídky pomocí čistého CSS část 1
26. Nastavení přechodů rychlosti animace pomocí cubic-bezier
27. Animace hamburgeru
Adaptivní design
1. O čem je tento blok?
2. Jak vytvářet responzivní weby
3. Vytvoření mixu s pravidly médií
4. Úprava projektové části 1
5. Adaptace projektové části 2
6. Adaptace projektové části 3
7. Co jsou responzivní obrázky
8. Jak upravit obrázky v HTML
9. Upravme HTML obrázky v našem projektu
10. Adaptace CSS obrázků
11. Pár finálních úprav webu
Správce balíčků uzlů
1. O čem je tento blok?
2. Co je node.js a npm
3. Příprava prvního balíčku npm k použití
4. Spuštění prvního balíčku npm
5. Použití doušku v našem projektu
6. Jak otevřít webovou stránku na mobilním telefonu
Úvod do CSS GRID
1. O čem je tento blok?
2. Příprava
3. Jak vytvořit šablonu mřížky. Šablona mřížky
4. Jak fungují jednotky fr
5. Jak přesunout prvek do jiné buňky
6. Umístění více položek do jedné buňky
7. Cvičení: Vytvořte rozvržení webu
8. Příklad učitele. Vytvořte rozvržení
9. Jak přejmenovat každý řádek v mřížce
10. Jak vytvořit šablonu mřížky pomocí schématu pojmenování
11. Co jsou explicitní a implicitní mřížky?
12. Jak zarovnat prvky uvnitř buněk
13. Jak zarovnat mřížku uvnitř kontejneru
14. Obsah min-max
15. Automatické vyplňování a automatické přizpůsobení. Velikosti buněk podle obsahu
16. Závěr. Mřížková zahrada
Projekt CSS GRID
1. O čem je tento blok?
2. Příprava
3. Vytvořte šablonu mřížky část 1
4. Vytvořte šablonu mřížky část 2
5. Jak fungují skřítci SVG
6. Dokončujeme druhou část webu
7. Vytvoření sekce "Banner", část 1
8. Vytvoření sekce "Banner", část 2
9. Vytvoření sekce s kartami
10. Vytvoření galerie
11. Vytvoření zápatí
12. Výroba "hamburgerů"
13. Vytvoření části záhlaví 1
14. Vytvoření části záhlaví 2
15. Stránky přizpůsobíme
Uvidíme se znova!
1. Ahoj!
Získejte svůj certifikát
1. Test pro získání osvědčení o absolvování kurzu