Rozvrhnutie a vývoj webových stránok. Pokročilá úroveň Web Develop - kurz 1990 rub. od Stepika, tréning 131 lekcií, Termín: 1.12.2023.
Rôzne / / December 04, 2023
Ahoj!
Volám sa Dima. A pozývam vás, aby ste sa ponorili do hlbín tvorby a rozloženia webových stránok!
Tento kurz je určený pre tých, ktorí už ovládajú základy, no chcú sa posunúť z dobrej úrovne tvorby webových stránok na výbornú.
Kurz je pre tých, ktorí ovládajú základy HTML a CSS, no vedia, že stále existuje veľa techník, vývojových techník a technológií, ktoré používajú skutoční pro-vývojári.
Ak vám to znie povedome, potom je tento kurz pre vás)
Oživte svoje webové stránky pomocou moderných animácií prostredníctvom CSS
Začneme zavedením dynamiky do našich stránok, to znamená, že urobíme animáciu. Naučíme sa animovať tlačidlá, texty a nadpisy pomocou čistého CSS, naučíme sa vytvárať animácie kariet, vytvárať dynamické navigačné menu a to všetko bez jediného riadku JS kódu, iba čistého CSS.
Tento kurz obsahuje osvedčené postupy v oblasti responzívneho dizajnu.
Naučíte sa nové spôsoby a triky ako responzívne navrhovať svoje stránky, používať nové techniky na definovanie a písanie mediálnych dopytov a naučíte sa prispôsobte všetky prvky stránky zmenou iba jednej vlastnosti CSS, aby vaša stránka vyzerala lepšie ako kedykoľvek predtým na akomkoľvek mobilnom zariadení zariadenie
Naučte sa všetky zložitosti a výhody moderných preprocesorov
Dozviete sa, ako niekoľkonásobne zrýchliť tvorbu vašej webovej stránky s využitím všetkých možností SASS preprocesora, ako sú mixíny, premenné a funkcie.
Základné základy používania NPM
Balíky NPM s doplnkami potrebnými pre každého profesionálneho vývojára nám dajú príležitosť vytvárať a optimalizovať webové stránky rýchlejšie a efektívnejšie ako kedykoľvek predtým.
Systém kontroly verzií Git vám pomôže vo vývoji
Okrem toho sa naučíte potrebné základy pre prácu so systémom riadenia verzií git, aby ste to mali vždy schopnosť vrátiť sa na správnu verziu vášho webu bez ohľadu na to, ako veľmi ste to naposledy pokazili aktualizovať stránku)
Vytvárate 2 moderné weby pre svoje portfólio
Tento kurz je postavený na praxi a je rozdelený do malých video lekcií, v ktorých krok za krokom vytvoríme 2 veľké moderné projekty na na float systéme - aby ste mohli podporovať staré projekty a samozrejme na systéme GRID CSS, ktorý vám umožňuje vytvárať layouty neuveriteľnej zložitosti.
A samozrejme, nebudete sa hanbiť ukázať tieto projekty vašim potenciálnym zákazníkom alebo budúcim zamestnávateľom.
Vždy som v kontakte!
A buďte si istí, že nezostanete sami, pretože po každej malej lekcii budete mať možnosť porovnať svoj kód s mojím alebo jednoducho položiť otázku, odpovede na seba zvyčajne nenechajú dlho čakať.
Garancia vrátenia peňazí!
A ak máte stále pochybnosti, tento kurz poskytuje možnosť vrátiť peniaze zaň vynaložené, ak sa vám nepáči do 30 dní.
Pridajte sa ku mne a spoločne sa naučíme vytvárať profesionálne, moderné webové stránky.
Uvidíme sa v triede!
9
kurzyOd roku 2016 vytváram originálne online kurzy. Profesionálne učím prácu s grafickými editormi Adobe, učím dizajn a web development.
Ahoj! Moje meno je Dima! Nechcem sa chváliť, ale musím) Učil som viac ako 5 000 študentov po celom svete v mojich vlastných online kurzoch. Viac ako 2 000 reálnych recenzií s priemerným hodnotením 4,83 z 5,00! Učím webdizajn, web development a potrebný softvér (Photoshop Illustrator, Figma). Moja pedagogická skúsenosť pozostáva z 5-ročného doučovania na voľnej nohe, ako aj vyučovania prostredníctvom online škôl a kurzov na globálnych platformách dištančného vzdelávania. Študenti mojich kurzov zaznamenávajú moje najlepšie vlastnosti v tom, ako prezentujem materiál bez prepchania, zábavným a zaujímavým spôsobom.
Príprava / Opakovanie / Prvé animácie
1. Dobrý deň!) Stiahnite si materiály pre kurz
2. Nainštalujte a nakonfigurujte potrebný softvér
3. Nová klipová cesta vlastnosti. Začneme vytvárať prvú časť stránky
4. Ak vám skautská aplikácia nefunguje
5. Cvičenie: Vytvorte si tvar pomocou Clip-path
6. Vertikálne zarovnanie prvkov pomocou absolútneho polohovania
7. Zoznámte sa s @KeyFrames. Vytvorme prvú animáciu.
8. Viditeľnosť zadnej strany a vytváranie tlačidiel prostredníctvom pseudotried
9. Animácia tlačidla pomocou pseudoprvkov
10. Režim animácie. Spustenie animácie z určitého bodu.
11. 3 princípy vývoja webu
12. Použite REM namiesto PX
Git a GitHub
1. O čom je tento blok?
2. Základné príkazy v termináli
3. Ako upravovať súbory cez terminál
4. Nainštalujte systém git na náš počítač
5. Ako spustiť git v konkrétnom projekte
6. Vytvorenie prvého odovzdania
7. Odoslanie projektu na GitHub
8. Ak sa pri odosielaní projektu na GitHub vyskytne chyba
9. Chyba prihlásenia pri pokuse o zaslanie projektu na GitHub
10. Cvičenie: Vytvorte si vlastné úložisko
11. Ako odstrániť úložisko GitHub
12. Ako sťahovať úložiská z GitHub
13. Napodobňujeme prácu 2 vývojárov na jednom úložisku
14. Ako zobraziť informácie o commitoch v termináli. Git denník
15. Čo sú pobočky
16. Ako vytvárať a navigovať pobočky.
17. Medzeru zo začiatku mini kurzu uzatvárame zápismi -u a -M
18. Neuložená chyba potvrdenia počas platby
19. Ako preniesť vytvorené zmeny do novej pobočky
20. Ako preniesť viacero commitov do novej vetvy
21. Aký je stav oddelenej hlavy? Oddelená HLAVA
22. Ako obnoviť konkrétny súbor z predchádzajúceho odovzdania
23. Pokročilý git log a git show
24. Ako zlúčiť pobočky pomocou Git merge. Metóda rýchleho posunu vpred
25. Ako odstrániť pobočky
26. Ako odstrániť súbory adresára z nesledovaného stavu
27. Reset Gitu -- tvrdý. Ako tvrdo vrátiť potvrdenie
28. Druhý spôsob, ako nájsť zaseknutý commit pomocou ORIG_HEAD
29. Git reset --soft
30. Git commit --amend zmena komentára predchádzajúceho odovzdania
31. Git reset --mixed
32. Rozdiel medzi git reset a git restore
33. Úvod do git diff. Vytlačenie rozdielu niekoľkých záväzkov do konzoly
34. Praktický príklad použitia git diff
35. Ako zobraziť schému vetvy v termináli. Git log --graph
36. Vetvy spájame pomocou git merge. Metóda "Skutočná fúzia"
37. Ako sa vrátiť späť po zlúčení
38. Ako skopírovať konkrétny commit pomocou git cherry-pick
39. Zlúčenie vetiev s git rebase
40. Čo je lepšie git rebase alebo git merge
41. Ako používať súbor .gitignore
42. Slovo na záver
Pokročilé rozloženie - CSS/SASS
1. O čom je tento blok?
2. Ako fungujú premenné SASS
3. Ako fungujú mixíny
4. Ako pridať argumenty do mixinov
5. Čo sú šablóny SASS
6. Ako fungujú funkcie SASS
7. Organizovanie súborov SASS pre veľký projekt
8. 3 spôsoby umiestnenia prvkov
9. Ako funguje float?
10. Vytvorenie vlastného mriežkového systému
11. Použitie prechodu na text. Klip na pozadí
12. Ako vytvoriť symboly pomocou HTML
13. Animácia a dokončenie druhej časti
14. Ako vytvoriť vlastné písma ikon
15. Vlastnosť perspektívy používame na vyjadrenie perspektívy prvkov
16. Ako funguje režim prelínania v CSS
17. Dokončenie časti s kartami
18. Ako zaokrúhliť text pomocou vlastnosti shape-outside
19. Ako fungujú CSS filtre
20. Ako pridať video na stránku
21. Zoznámenie sa so značkou formulára a jej obsahom
22. Animácia formulára
23. Vytvorenie vlastného prepínača pomocou CSS
24. Vytvorenie päty webovej stránky
25. Vytvorenie navigačnej ponuky pomocou čistého CSS, časť 1
26. Nastavenie prechodov rýchlosti animácie pomocou cubic-bezier
27. Animácia hamburgera
Adaptívny dizajn
1. O čom je tento blok?
2. Ako vytvoriť responzívne webové stránky
3. Vytvorenie mixu s pravidlami médií
4. Úprava projektovej časti 1
5. Úprava projektovej časti 2
6. Úprava projektovej časti 3
7. Čo sú responzívne obrázky
8. Ako prispôsobiť obrázky v HTML
9. Prispôsobme HTML obrázky v našom projekte
10. Úprava CSS obrázkov
11. Niekoľko záverečných úprav stránky
Správca balíkov uzlov
1. O čom je tento blok?
2. Čo je node.js a npm
3. Príprava prvého balíka npm na použitie
4. Spustenie prvého balíka npm
5. Použitie dúška v našom projekte
6. Ako otvoriť webovú stránku na mobilnom telefóne
Úvod do CSS GRID
1. O čom je tento blok?
2. Príprava
3. Ako vytvoriť šablónu mriežky. Šablóna mriežky
4. Ako fungujú jednotky fr
5. Ako presunúť prvok do inej bunky
6. Umiestnenie viacerých položiek do jednej bunky
7. Cvičenie: Vytvorte rozloženie webovej stránky
8. Príklad učiteľa. Vytvorte rozloženie
9. Ako premenovať každý riadok v mriežke
10. Ako vytvoriť šablónu mriežky pomocou schémy pomenovania
11. Čo sú explicitné a implicitné mriežky?
12. Ako zarovnať prvky vo vnútri buniek
13. Ako zarovnať mriežku vo vnútri nádoby
14. Obsah min-max
15. Automatické dopĺňanie a automatické prispôsobenie. Veľkosti buniek podľa obsahu
16. Záver. Mriežková záhrada
Projekt CSS GRID
1. O čom je tento blok?
2. Príprava
3. Vytvorte šablónu mriežky časť 1
4. Vytvorte šablónu mriežky časť 2
5. Ako fungujú SVG škriatkovia
6. Dokončujeme druhú časť stránky
7. Vytvorenie sekcie "Banner", časť 1
8. Vytvorenie sekcie "Banner", časť 2
9. Vytvorenie sekcie s kartami
10. Vytvorenie galérie
11. Vytvorenie päty
12. Príprava "hamburgera"
13. Vytvorenie časti hlavičky 1
14. Vytvorenie časti hlavičky 2
15. Stránku prispôsobujeme
Uvídime sa znovu!
1. Zbohom!
Získajte svoj certifikát
1. Test na získanie certifikátu o absolvovaní kurzu