Weboldalak elrendezése és webfejlesztése. Emelt szintű Web Develop - tanfolyam 1990 dörzsölje. Stepiktől, képzés 131 tanóra, Időpont: 2023. december 1.
Vegyes Cikkek / / December 04, 2023
Helló!
A nevem Dima. Meghívom Önt, hogy merüljön el a weboldalkészítés és az elrendezés legmélyebb részében!
Ez a tanfolyam azoknak szól, akik már ismerik az alapokat, de szeretnének egy jó szintű weboldalkészítésről egy kiválóra lépni.
A tanfolyam azoknak szól, akik ismerik a HTML és CSS alapjait, de tudják, hogy még mindig sok olyan technika, fejlesztési technika és technológia létezik, amelyet igazi fejlesztőbarátok használnak.
Ha ez ismerősen hangzik, akkor ez a tanfolyam neked szól)
Keltse életre webhelyeit a CSS-en keresztüli modern animációkkal
Kezdjük azzal, hogy a dinamikát bevezetjük oldalainkba, vagyis animációt fogunk készíteni. Megtanuljuk, hogyan animálhatunk gombokat, szövegeket és címsorokat tiszta CSS használatával, hogyan készíthetünk kártyaanimációkat, hozzunk létre dinamikus navigációs menüt, és mindezt egyetlen sor JS kód nélkül, csak tiszta CSS-t.
Ez a kurzus a reszponzív tervezés bevált gyakorlatait tartalmazza.
Új módszereket és trükköket tanulhat meg webhelyei reszponzív kialakításához, új technikákat használ a médialekérdezések meghatározására és írására, valamint megtanulhatja, hogyan igazítsa az összes oldalelemet egyetlen CSS-tulajdon módosításával, így webhelye minden mobileszközön jobban néz ki, mint valaha eszköz
Ismerje meg a modern előfeldolgozók összes fortélyait és előnyeit
Megtanulja, hogyan gyorsíthatja fel többszörösen a webhely létrehozását a SASS előfeldolgozó teljes képességeinek, például mixineknek, változóknak és függvényeknek a használatával.
Alapvető tudnivalók az NPM használatához
Emellett a minden professzionális fejlesztő számára szükséges bővítményekkel ellátott NPM-csomagok lehetőséget adnak számunkra, hogy minden eddiginél gyorsabban és hatékonyabban készítsünk és optimalizáljunk weboldalakat.
A Git verziókezelő rendszer segít a fejlesztésben
Ezenkívül megtanulja a git verzióvezérlő rendszerrel való munkavégzéshez szükséges alapokat, hogy mindig rendelkezzen a lehetőség, hogy visszatérjen webhelye megfelelő verziójához, függetlenül attól, hogy milyen nagyot rontott el legutóbb frissítse az oldalt)
2 modern weboldalt készít a portfóliójához
Ez a tanfolyam gyakorlatra épül, és kis videóleckékre oszlik, amelyekben lépésről lépésre hozunk létre 2 nagy modern projektet. a float rendszeren - hogy támogassa a régi projekteket és természetesen a GRID CSS rendszeren, amivel hihetetlen bonyolultságú elrendezéseket hozhat létre.
És természetesen nem szégyelli ezeket a projekteket megmutatni potenciális ügyfeleinek vagy leendő munkaadóinak.
Mindig kapcsolatban vagyok!
És biztos lehetsz benne, hogy nem maradsz egyedül, mert minden apró lecke után lehetőséged lesz összehasonlítani a kódodat az enyémmel, vagy egyszerűen csak feltenni egy kérdést, a válaszok általában nem tartanak sokáig.
Pénzvisszafizetési garancia!
És ha továbbra is kétségei vannak, ez a tanfolyam lehetőséget ad arra, hogy 30 napon belül visszafizesse az erre fordított pénzt, ha nem tetszik.
Csatlakozz hozzám, és együtt megtanuljuk, hogyan készítsünk professzionális, modern weboldalakat.
Találkozunk az osztályban!
9
tanfolyamok2016 óta készítek eredeti online kurzusokat. Szakmailag tanítok Adobe grafikus szerkesztőkkel való munkavégzést, tanítok tervezést és webfejlesztést.
Helló! A nevem Dima! Nem akarok dicsekedni, de muszáj) Több mint 5000 diákot tanítottam szerte a világon saját fejlesztésű online kurzusaimon. Több mint 2000 valós vélemény 4,83/5,00 átlagos értékeléssel! Webtervezést, webfejlesztést és a szükséges szoftvereket (Photoshop Illustrator, Figma) tanítok. Tanítási tapasztalatom 5 év szabadúszó oktatói gyakorlatból, valamint online iskolákban és kurzusokon keresztül végzett tanításból áll, globális távoktatási platformokon. A kurzusaim hallgatói abban mutatják meg legjobb tulajdonságaimat, ahogyan zsúfoltság nélkül, szórakoztatóan és érdekesen adom elő az anyagot.
Előkészítés / Ismétlés / Első animációk
1. Sziasztok!) Töltse le a tanfolyam anyagait
2. Telepítse és konfigurálja a szükséges szoftvert
3. Új tulajdonság clip-path. Elkezdjük létrehozni a webhely első részét
4. Ha a scout-app nem működik az Ön számára
5. Gyakorlat: Készítse el alakját a Clip-path segítségével
6. Elemek függőleges igazítása abszolút pozicionálással
7. Ismerje meg @KeyFrames-et. Készítsük el az első animációt.
8. Hátoldali láthatóság és gombok létrehozása pszeudoosztályokon keresztül
9. Egy gomb animálása pszeudoelemekkel
10. Animáció-kitöltés mód. Animáció indítása egy adott pontról.
11. A webfejlesztés 3 alapelve
12. Használjon REM-et a PX helyett
Git és GitHub
1. Miről szól ez a blokk?
2. Alapvető parancsok a terminálban
3. Fájlok szerkesztése terminálon keresztül
4. Telepítse a git rendszert a számítógépünkre
5. A git futtatása egy adott projektben
6. Az első commit létrehozása
7. Projekt elküldése a GitHubba
8. Ha hibát észlel a projekt GitHubba való elküldésekor
9. Bejelentkezési hiba a projekt GitHubba küldésekor
10. Gyakorlat: Hozzon létre saját tárolót
11. Hogyan lehet törölni egy GitHub adattárat
12. Lerakatok letöltése a GitHubról
13. Egy tárhelyen 2 fejlesztő munkáját emuláljuk
14. Hogyan jelenítsünk meg információkat a véglegesítésekről a terminálban. Git log
15. Mik azok az ágak
16. Elágazások létrehozása és navigálása.
17. A mini tanfolyam elejétől a rést -u és -M jelölésekkel zárjuk
18. Nem mentett véglegesítési hiba a fizetés során
19. A létrehozott módosítások áthelyezése egy új ágba
20. Több commit áthelyezése egy új ágra
21. Mi a levált fej állapota? Levált FEJ
22. Egy adott fájl visszaállítása egy korábbi véglegesítésből
23. Speciális git napló és git show
24. Az ágak egyesítése a Git Merge segítségével. Gyors előretekerési módszer
25. Az ágak törlése
26. Hogyan lehet eltávolítani a könyvtárfájlokat a követetlen állapotból
27. Git reset -- nehéz. Hogyan lehet keményen visszavonni egy kötelezettségvállalást
28. Második módja az elakadt véglegesítés megtalálásának az ORIG_HEAD használatával
29. Git reset --soft
30. Git commit -- egy korábbi véglegesítés megjegyzésének módosítása
31. Git reset --mixed
32. Különbség a git reset és a git visszaállítás között
33. Bevezetés a git diff-be. Több commit különbségének kinyomtatása a konzolra
34. Gyakorlati példa a git diff használatára
35. Az elágazási diagram megjelenítése a terminálban. Git log --graph
36. Az ágakat a git merge segítségével egyesítjük. "True Fusion" módszer
37. Hogyan lehet visszalépni az összevonás után
38. Hogyan másolhatunk le egy adott véglegesítést a git cherry-pick használatával
39. Ágak egyesítése git rebase-sel
40. Melyik a jobb a git rebase vagy a git merge
41. A .gitignore fájl használata
42. Utolsó szó
Speciális elrendezés - CSS/SASS
1. Miről szól ez a blokk?
2. Hogyan működnek a SASS változók
3. Hogyan működnek a mixinek
4. Hogyan adhatunk argumentumokat a mixinekhez
5. Mik azok a SASS sablonok
6. Hogyan működnek a SASS funkciók
7. SASS fájlok rendszerezése nagy projektekhez
8. 3 mód az elemek elhelyezésére
9. Hogyan működik az úszó?
10. Saját grid rendszer kialakítása
11. Színátmenet alkalmazása a szövegre. Háttér-klip
12. Hogyan készítsünk szimbólumokat HTML használatával
13. A második rész animálása és befejezése
14. Hogyan készítsünk saját ikon-betűtípusokat
15. A perspektíva tulajdonságot használjuk az elemek perspektívájának tükrözésére
16. Hogyan működik a keverési mód a CSS-ben
17. A szakasz befejezése kártyákkal
18. Szöveg kerekítése a shape-outside tulajdonság használatával
19. Hogyan működnek a CSS-szűrők
20. Videó hozzáadása az oldalhoz
21. Az űrlapcímke és tartalmának megismerése
22. Az űrlap animálása
23. Saját választógomb készítése CSS segítségével
24. Weboldal láblécének létrehozása
25. Navigációs menü létrehozása tiszta CSS part-1 használatával
26. Animációs sebesség-átmenetek beállítása cubic-bezier segítségével
27. Egy hamburger animálása
Adaptív kialakítás
1. Miről szól ez a blokk?
2. Hogyan készítsünk reszponzív weboldalakat
3. Mixin létrehozása médiaszabályokkal
4. A projektrész 1. adaptációja
5. 2. projektrész adaptálása
6. 3. projektrész adaptálása
7. Mik azok a reszponzív képek
8. A képek adaptálása HTML-ben
9. Alakítsunk HTML képeket projektünkben
10. CSS-képek adaptálása
11. Néhány utolsó webhelyszerkesztés
Node csomagkezelő
1. Miről szól ez a blokk?
2. Mi a node.js és az npm
3. Az első npm csomag előkészítése használatra
4. Az első npm csomag elindítása
5. A gulp használata projektünkben
6. Hogyan lehet megnyitni egy weboldalt mobiltelefonon
Bevezetés a CSS GRID-be
1. Miről szól ez a blokk?
2. Készítmény
3. Hogyan készítsünk rácssablont. Rács sablon
4. Hogyan működnek az fr egységek
5. Hogyan helyezzünk át egy elemet egy másik cellába
6. Több elem elhelyezése egy cellában
7. Gyakorlat: Hozzon létre egy weboldal elrendezést
8. Példa egy tanárra. Hozzon létre egy elrendezést
9. Hogyan nevezzünk át minden sort egy rácsban
10. Rácssablon létrehozása elnevezési séma használatával
11. Mik azok az explicit és implicit rácsok?
12. Hogyan igazítsuk el az elemeket a cellákon belül
13. Hogyan igazítsunk rácsot egy tartályban
14. Min-Max tartalom
15. Automatikus kitöltés és automatikus illeszkedés. A cellaméretek tartalom alapján
16. Következtetés. Rácsos kert
GRID CSS projekt
1. Miről szól ez a blokk?
2. Készítmény
3. Hozzon létre egy rácssablont 1. rész
4. Hozzon létre egy rácssablont 2. rész
5. Az SVG sprite működése
6. Befejezzük az oldal második részét
7. A „Szalaghirdetés” szakasz létrehozása, 1. rész
8. A „Szalaghirdetés” szakasz létrehozása, 2. rész
9. Szakasz létrehozása kártyákkal
10. Galéria létrehozása
11. Lábléc létrehozása
12. "Hamburger" készítése
13. Fejléc létrehozása 1. rész
14. Fejléc létrehozása 2. rész
15. Az oldalt adaptáljuk
Viszlát!
1. Viszontlátásra!
Szerezze meg a tanúsítványát
1. Teszt a tanfolyam elvégzéséről szóló bizonyítvány megszerzéséhez