Svetainių maketavimas ir kūrimas. Aukštesniojo lygio Web Develop - kursas 1990 rub. iš Stepiko, treniruojama 131 pamoka, Data: 2023 12 01.
įvairenybės / / December 04, 2023
Sveiki!
Mano vardas Dima. Ir kviečiu pasinerti į pačias svetainės kūrimo ir maketavimo gelmes!
Šis kursas skirtas tiems, kurie jau žino pagrindus, bet nori pereiti nuo gero svetainės kūrimo lygio į puikų.
Kursas skirtas tiems, kurie išmano HTML ir CSS pagrindus, tačiau žino, kad vis dar yra daug technikų, kūrimo metodų ir technologijų, kurias naudoja tikri kūrėjai.
Jei tai skamba pažįstamai, tada šis kursas skirtas jums)
Pagyvinkite savo svetaines naudodami šiuolaikines animacijas per CSS
Pradėsime nuo dinamikos įvedimo į savo svetaines, tai yra, darysime animaciją. Išmoksime animuoti mygtukus, tekstus ir antraštes naudojant gryną CSS, išmoksime kurti kortelių animacijas, sukurti dinaminį naršymo meniu ir visa tai be vienos JS kodo eilutės, tik gryno CSS.
Šiame kurse pateikiamos geriausios interaktyvaus dizaino praktikos.
Sužinosite naujų būdų ir gudrybių, kaip tinkamai kurti svetaines, naudosite naujus medijos užklausų apibrėžimo ir rašymo metodus ir sužinosite, kaip pritaikykite visus puslapio elementus pakeisdami tik vieną CSS nuosavybę, kad jūsų svetainė atrodytų geriau nei bet kada bet kuriame mobiliajame įrenginyje prietaisas
Sužinokite visas šiuolaikinių pirminių procesorių subtilybes ir pranašumus
Sužinosite, kaip kelis kartus paspartinti svetainės kūrimą naudojant visas SASS pirminio procesoriaus galimybes, tokias kaip mišiniai, kintamieji ir funkcijos.
Pagrindiniai NPM naudojimo pagrindai
Taip pat NPM paketai su kiekvienam profesionaliam kūrėjui reikalingais įskiepiais suteiks mums galimybę greičiau ir efektyviau nei bet kada anksčiau kurti ir optimizuoti svetaines.
Git versijų valdymo sistema padės jums tobulėti
Be to, išmoksite būtinų darbo su git versijų valdymo sistema pagrindus, kad visada turėtumėte galimybė grįžti į tinkamą svetainės versiją, nesvarbu, kaip blogai suklydote paskutinį kartą atnaujinti svetainę)
Savo portfeliui kuriate 2 modernias svetaines
Šis kursas yra pagrįstas praktika ir yra padalintas į mažas vaizdo pamokas, kuriose žingsnis po žingsnio sukursime 2 didelius modernius projektus. plūduriuojančioje sistemoje – kad galėtumėte palaikyti senus projektus ir, žinoma, GRID CSS sistemoje, kuri leidžia sukurti neįtikėtino sudėtingumo maketus.
Ir, žinoma, jums nebus gėda parodyti šių projektų savo potencialiems klientams ar būsimiems darbdaviams.
Aš visada bendrauju!
Ir būkite tikri, jūs neliksite vieni, nes po kiekvienos mažos pamokos turėsite galimybę palyginti savo kodą su manuoju arba tiesiog užduoti klausimą, atsakymai paprastai netrunka sulaukti.
Pinigų gražinimo garantija!
O jei vis dar abejojate, šis kursas suteikia galimybę per 30 dienų grąžinti jam išleistus pinigus, jei nepatiks.
Prisijunk prie manęs ir kartu išmoksime kurti profesionalias, modernias svetaines.
Iki pasimatymo klasėje!
9
kursaiKuriu originalius internetinius kursus nuo 2016 m. Profesionaliai mokau dirbti su Adobe grafiniais redaktoriais, dėstau dizaino ir interneto svetainių kūrimą.
Sveiki! Mano vardas Dima! Nenoriu girtis, bet turiu) Savo patentuotuose internetiniuose kursuose mokiau daugiau nei 5000 studentų visame pasaulyje. Daugiau nei 2000 tikrų atsiliepimų, kurių vidutinis įvertinimas yra 4,83 iš 5,00! Mokau web dizaino, web kūrimo ir reikalingos programinės įrangos (Photoshop Illustrator, Figma). Mano mokymo patirtis susideda iš 5 metų laisvai samdomo kuravimo, taip pat mokymo internetinėse mokyklose ir kursuose pasaulinėse nuotolinio mokymosi platformose. Mano kursų studentai pažymi geriausias mano savybes, kaip smagiai ir įdomiai pateikiu medžiagą nesusigrūdęs.
Pasiruošimas / Kartojimas / Pirmosios animacijos
1. Sveiki!) Atsisiųskite kurso medžiagą
2. Įdiekite ir sukonfigūruokite reikiamą programinę įrangą
3. Naujos nuosavybės klipas. Pradedame kurti pirmąją svetainės dalį
4. Jei skautų programa jums neveikia
5. Praktika: sukurkite savo formą naudodami iškarpinį kelią
6. Elementų lygiavimas vertikaliai, naudojant absoliučią padėtį
7. Susipažinkite su @KeyFrames. Sukurkime pirmąją animaciją.
8. Galinio veido matomumas ir mygtukų kūrimas per pseudoklases
9. Mygtuko animavimas naudojant pseudoelementus
10. Animacijos užpildymo režimas. Animacijos pradžia nuo konkretaus taško.
11. 3 interneto kūrimo principai
12. Vietoj PX naudokite REM
Git ir GitHub
1. Apie ką šis blokas?
2. Pagrindinės komandos terminale
3. Kaip redaguoti failus per terminalą
4. Įdiekite git sistemą mūsų kompiuteryje
5. Kaip paleisti git konkrečiame projekte
6. Pirmojo įsipareigojimo kūrimas
7. Projekto pateikimas „GitHub“.
8. Jei pateikiant projektą „GitHub“ įvyko klaida
9. Prisijungimo klaida bandant perkelti projektą į „GitHub“.
10. Praktika: sukurkite savo saugyklą
11. Kaip ištrinti „GitHub“ saugyklą
12. Kaip atsisiųsti saugyklas iš GitHub
13. Mes mėgdžiojame 2 kūrėjų darbą vienoje saugykloje
14. Kaip terminale rodyti informaciją apie įsipareigojimus. Git žurnalas
15. Kas yra šakos
16. Kaip kurti ir naršyti šakas.
17. Atotrūkį nuo mini kurso pradžios uždarome žymomis -u ir -M
18. Neišsaugota įvykdymo klaida patikros metu
19. Kaip perkelti sukurtus pakeitimus į naują šaką
20. Kaip perkelti kelis įsipareigojimus į naują šaką
21. Kokia yra atskilusios galvos būklė? Atitrūkusi GALVA
22. Kaip atkurti konkretų failą iš ankstesnio įsipareigojimo
23. Išplėstinis git žurnalas ir git šou
24. Kaip sujungti filialus naudojant „Git merge“. Greito sukimo į priekį metodas
25. Kaip ištrinti šakas
26. Kaip pašalinti katalogo failus iš nesekamos būsenos
27. Git atstatyti -- sunku. Kaip sunkiai atšaukti įsipareigojimą
28. Antrasis būdas rasti įstrigusią įsipareigojimą naudojant ORIG_HEAD
29. Git reset --soft
30. Git commit – pakeiskite ankstesnio įsipareigojimo komentarą
31. Git reset --mixed
32. Skirtumas tarp git reset ir git atkūrimo
33. Įvadas į git diff. Kelių įsipareigojimų skirtumo spausdinimas konsolėje
34. Praktinis git diff naudojimo pavyzdys
35. Kaip terminale parodyti šakos schemą. Git log --graph
36. Mes sujungiame filialus naudodami git merge. Metodas „Tikroji sintezė“
37. Kaip grįžti atgal po sujungimo
38. Kaip nukopijuoti konkretų įsipareigojimą naudojant git cherry-pick
39. Filialų sujungimas su git rebase
40. Kas geriau git rebase ar git merge
41. Kaip naudoti .gitignore failą
42. Galutinis žodis
Išplėstinis išdėstymas – CSS/SASS
1. Apie ką šis blokas?
2. Kaip veikia SASS kintamieji
3. Kaip veikia miksai
4. Kaip pridėti argumentų į mixins
5. Kas yra SASS šablonai
6. Kaip veikia SASS funkcijos
7. SASS failų tvarkymas dideliam projektui
8. 3 elementų išdėstymo būdai
9. Kaip veikia plūdė?
10. Kuriame savo tinklo sistemą
11. Gradiento taikymas tekstui. Fono klipas
12. Kaip sukurti simbolius naudojant HTML
13. Antrosios dalies animavimas ir užbaigimas
14. Kaip sukurti savo piktogramų šriftus
15. Mes naudojame perspektyvos savybę, kad atspindėtume elementų perspektyvą
16. Kaip maišymo režimas veikia CSS
17. Skyriaus užbaigimas kortelėmis
18. Kaip suapvalinti tekstą naudojant „forma-outside“ savybę
19. Kaip veikia CSS filtrai
20. Kaip pridėti vaizdo įrašą į puslapį
21. Susipažinimas su formos žyma ir jos turiniu
22. Animuoti formą
23. Sukurkite savo radijo mygtuką naudodami CSS
24. Svetainės poraštės kūrimas
25. Naršymo meniu kūrimas naudojant gryną CSS 1 dalį
26. Animacijos greičio perėjimų nustatymas naudojant kubinį bezierį
27. Animuoti mėsainį
Adaptyvus dizainas
1. Apie ką šis blokas?
2. Kaip sukurti reaguojančias svetaines
3. Mišinio kūrimas su žiniasklaidos taisyklėmis
4. 1 projekto dalies pritaikymas
5. 2 projekto dalies pritaikymas
6. 3 projekto dalies pritaikymas
7. Kas yra reaguojantys vaizdai
8. Kaip pritaikyti vaizdus HTML
9. Pritaikykime HTML vaizdus savo projekte
10. CSS vaizdų pritaikymas
11. Keletas galutinių svetainės pakeitimų
Mazgo paketų tvarkyklė
1. Apie ką šis blokas?
2. Kas yra node.js ir npm
3. Pirmosios npm pakuotės paruošimas naudojimui
4. Pirmojo npm paketo paleidimas
5. „Gulp“ naudojimas mūsų projekte
6. Kaip atidaryti svetainę mobiliajame telefone
Įvadas į CSS GRID
1. Apie ką šis blokas?
2. Paruošimas
3. Kaip sukurti tinklelio šabloną. Tinklelio šablonas
4. Kaip veikia fr vienetai
5. Kaip perkelti elementą į kitą langelį
6. Kelių elementų įdėjimas į vieną langelį
7. Praktika: sukurkite svetainės maketą
8. Mokytojo pavyzdys. Sukurkite maketą
9. Kaip pervardyti kiekvieną tinklelio eilutę
10. Kaip sukurti tinklelio šabloną naudojant pavadinimo schemą
11. Kas yra eksplicitiniai ir numanomi tinkleliai?
12. Kaip sulygiuoti elementus ląstelių viduje
13. Kaip išlyginti tinklelį konteinerio viduje
14. Min-Max turinys
15. Automatinis užpildymas ir automatinis pritaikymas. Ląstelių dydžiai pagal turinį
16. Išvada. Tinklelio sodas
GRID CSS projektas
1. Apie ką šis blokas?
2. Paruošimas
3. Sukurkite tinklelio šablono 1 dalį
4. Sukurkite tinklelio šablono 2 dalį
5. Kaip veikia SVG sprites
6. Baigiame antrąją svetainės dalį
7. Skyriaus „Banner“ kūrimas, 1 dalis
8. Skyriaus „Banner“ kūrimas, 2 dalis
9. Skyriaus su kortelėmis kūrimas
10. Galerijos kūrimas
11. Poraštės kūrimas
12. Gaminame mėsainį
13. 1 antraštės dalies kūrimas
14. 2 antraštės dalies kūrimas
15. Pritaikome svetainę
Iki pasimatymo!
1. Viso gero!
Gaukite sertifikatą
1. Testas kurso baigimo pažymėjimui gauti