Aspect și dezvoltare web a site-urilor web. Nivel avansat Web Develop - curs 1990 rub. de la Stepik, antrenament 131 de lecții, Data: 1 decembrie 2023.
Miscelaneu / / December 04, 2023
Buna ziua!
Numele meu este Dima. Și vă invit să vă plonjați în profunzimile creării și aspectului site-ului!
Acest curs este pentru cei care cunosc deja elementele de bază, dar doresc să treacă de la un nivel bun de creare de site-uri la unul excelent.
Cursul este pentru cei care cunosc elementele de bază ale HTML și CSS, dar știu că există încă multe tehnici, tehnici de dezvoltare și tehnologii care sunt folosite de adevărații pro-dezvoltatori.
Dacă vă sună familiar, acest curs este pentru dvs.)
Dați viață site-urilor dvs. web cu animații moderne prin CSS
Vom începe prin a introduce dinamica în site-urile noastre, adică vom face animație. Vom învăța cum să animam butoanele, textele și titlurile folosind CSS pur, vom învăța cum să creăm animații de card, să creăm un meniu de navigare dinamic și toate acestea fără o singură linie de cod JS, doar CSS pur.
Acest curs conține cele mai bune practici în design responsive.
Veți învăța noi moduri și trucuri de a vă proiecta site-urile în mod receptiv, veți folosi noi tehnici pentru definirea și scrierea interogărilor media și veți învăța cum să adaptați toate elementele paginii modificând o singură proprietate CSS, astfel încât site-ul dvs. să arate mai bine ca niciodată pe orice dispozitiv mobil dispozitiv
Aflați toate complexitățile și avantajele preprocesoarelor moderne
Veți învăța cum să vă grăbiți crearea site-ului dvs. de mai multe ori utilizând capacitățile complete ale preprocesorului SASS, cum ar fi mixuri, variabile și funcții.
Noțiuni de bază esențiale pentru utilizarea NPM
De asemenea, pachetele NPM cu pluginurile necesare fiecărui dezvoltator profesionist ne vor oferi posibilitatea de a crea și optimiza site-uri web mai rapid și mai eficient decât oricând.
Sistemul de control al versiunilor Git vă va ajuta în dezvoltarea dvs
În plus, veți învăța elementele de bază necesare pentru a lucra cu sistemul de control al versiunilor git, astfel încât să aveți întotdeauna abilitatea de a reveni la versiunea corectă a site-ului dvs., indiferent cât de rău ați greșit ultima dată actualiza site-ul)
Creezi 2 site-uri web moderne pentru portofoliul tău
Acest curs este construit pe practică și este împărțit în mici lecții video în care vom crea pas cu pas 2 proiecte mari moderne bazate pe pe sistemul float - astfel încât să puteți susține proiecte vechi și bineînțeles pe sistemul GRID CSS, care vă permite să creați layout-uri de o complexitate incredibilă.
Și, desigur, nu vă va fi rușine să prezentați aceste proiecte potențialilor dvs. clienți sau viitorilor angajatori.
Sunt mereu în legătură!
Și fiți siguri că nu veți rămâne singuri, pentru că după fiecare mică lecție, veți avea ocazia să vă comparați codul cu al meu sau pur și simplu să puneți o întrebare; de obicei, răspunsurile nu durează mult să ajungă.
Banii inapoi garantat!
Și dacă mai aveți îndoieli, acest curs oferă posibilitatea de a returna banii cheltuiți pentru el dacă nu vă place în 30 de zile.
Alătură-te și împreună vom învăța cum să creăm site-uri web profesionale, moderne.
Ne vedem la ore!
9
cursuriAm creat cursuri online originale din 2016. Predau profesional lucrul cu editorii grafici Adobe, predau design și dezvoltare web.
Buna ziua! Numele meu este Dima! Nu vreau să mă laud, dar trebuie să) Am predat peste 5.000 de studenți din întreaga lume în cursurile mele online. Peste 2.000 de recenzii reale cu o evaluare medie de 4,83 din 5,00! Predau web design, dezvoltare web și software-ul necesar (Photoshop Illustrator, Figma). Experiența mea de predare constă în 5 ani de îndrumare independentă, precum și în predare prin școli și cursuri online, pe platforme globale de învățământ la distanță. Studenții la cursurile mele notează cele mai bune calități ale mele în modul în care prezint materialul fără înghesuială, într-un mod distractiv și interesant.
Pregătire / Repetiție / Primele animații
1. Bună ziua!) Descarcă materiale pentru curs
2. Instalați și configurați software-ul necesar
3. Calea clipă de proprietate nouă. Începem să creăm prima secțiune a site-ului
4. Dacă aplicația scout nu funcționează pentru tine
5. Practică: creează-ți forma folosind Clip-path
6. Alinierea elementelor pe verticală folosind poziționarea absolută
7. Faceți cunoștință cu @KeyFrames. Să creăm prima animație.
8. Vizibilitatea feței din spate și crearea de butoane prin pseudo-clase
9. Animarea unui buton folosind pseudo-elemente
10. Animație-umplere-mod. Pornirea unei animații dintr-un anumit punct.
11. 3 principii ale dezvoltării web
12. Folosiți REM în loc de PX
Git și GitHub
1. Despre ce este acest bloc?
2. Comenzi de bază în terminal
3. Cum se editează fișiere prin terminal
4. Instalați sistemul git pe computerul nostru
5. Cum să rulați git într-un anumit proiect
6. Crearea primului commit
7. Trimiterea unui proiect la GitHub
8. Dacă aveți o eroare la trimiterea proiectului dvs. la GitHub
9. Eroare de conectare când încercați să împingeți un proiect în GitHub
10. Practică: creează-ți propriul depozit
11. Cum să ștergeți un depozit GitHub
12. Cum să descărcați depozite de pe GitHub
13. Emulăm munca a 2 dezvoltatori într-un singur depozit
14. Cum să afișați informații despre commit-uri în terminal. Jurnal Git
15. Ce sunt ramurile
16. Cum să creați și să navigați în ramuri.
17. Închidem decalajul de la începutul mini-cursului cu notațiile -u și -M
18. Eroare de comitere nesalvată în timpul plății
19. Cum să împingeți modificările create într-o nouă ramură
20. Cum să împingeți mai multe comite într-o nouă ramură
21. Care este starea capului detașat? CAP detașat
22. Cum să restabiliți un anumit fișier dintr-o comitere anterioară
23. Jurnal git avansat și spectacol git
24. Cum să îmbinați ramuri folosind Git merge. Metoda de avansare rapidă
25. Cum să ștergi ramurile
26. Cum să eliminați fișierele director din starea neurmărită
27. Git reset --hard. Cum să anulați greu o comitere
28. A doua modalitate de a găsi un commit blocat folosind ORIG_HEAD
29. Resetare Git --soft
30. Git commit --amenda modificarea comentariului unei comisii anterioare
31. Git reset --mixt
32. Diferența dintre git reset și git restore
33. Introducere în git diff. Imprimarea diferenței mai multor comite pe consolă
34. Exemplu practic de utilizare a git diff
35. Cum să afișați diagrama ramurilor în terminal. Git log --graph
36. Îmbinăm ramuri folosind git merge. Metoda „True Fusion”
37. Cum să derulezi înapoi după o îmbinare
38. Cum să copiați un anumit commit folosind git cherry-pick
39. Fuzionarea ramurilor cu git rebase
40. Care este mai bine git rebase sau git merge
41. Cum se utilizează fișierul .gitignore
42. Ultimul cuvânt
Aspect avansat - CSS/SASS
1. Despre ce este acest bloc?
2. Cum funcționează variabilele SASS
3. Cum funcționează mixin-urile
4. Cum se adaugă argumente la mixuri
5. Ce sunt șabloanele SASS
6. Cum funcționează funcțiile SASS
7. Organizarea fișierelor SASS pentru un proiect mare
8. 3 moduri de a poziționa elementele
9. Cum funcționează plutitorul?
10. Crearea propriului nostru sistem de rețea
11. Aplicarea unui gradient textului. Clip de fundal
12. Cum se creează simboluri folosind HTML
13. Animarea și finalizarea celei de-a doua secțiuni
14. Cum să vă creați propriile fonturi pentru pictograme
15. Folosim proprietatea perspective pentru a reflecta perspectiva elementelor
16. Cum funcționează modul de amestecare în CSS
17. Terminarea secțiunii cu cărți
18. Cum se rotunjește textul folosind proprietatea shape-outside
19. Cum funcționează filtrele CSS
20. Cum să adăugați un videoclip pe o pagină
21. Cunoașterea etichetei formularului și a conținutului acesteia
22. Animarea formularului
23. Creați-vă propriul buton radio folosind CSS
24. Crearea unui subsol pentru site-ul web
25. Crearea unui meniu de navigare folosind CSS pur partea-1
26. Configurarea tranzițiilor de viteză a animației folosind cubic-bezier
27. Animarea unui hamburger
Design adaptiv
1. Despre ce este acest bloc?
2. Cum se creează site-uri web receptive
3. Crearea unui mixin cu regulile media
4. Adaptarea proiectului partea 1
5. Adaptarea proiectului partea 2
6. Adaptarea proiectului partea 3
7. Ce sunt imaginile receptive
8. Cum să adaptezi imaginile în HTML
9. Să adaptăm imaginile HTML în proiectul nostru
10. Adaptarea imaginilor CSS
11. Câteva modificări finale ale site-ului
Manager de pachete Node
1. Despre ce este acest bloc?
2. Ce este node.js și npm
3. Pregătirea primului pachet npm pentru utilizare
4. Lansarea primului pachet npm
5. Folosind gulp în proiectul nostru
6. Cum se deschide un site web pe un telefon mobil
Introducere în CSS GRID
1. Despre ce este acest bloc?
2. Pregătirea
3. Cum se creează un șablon de grilă. Șablon grilă
4. Cum funcționează unitățile fr
5. Cum să mutați un element într-o altă celulă
6. Plasarea mai multor elemente într-o singură celulă
7. Practică: creați un aspect al site-ului web
8. Exemplu de profesor. Creați un aspect
9. Cum să redenumești fiecare linie dintr-o grilă
10. Cum se creează un șablon de grilă utilizând o schemă de denumire
11. Ce sunt grilele explicite și implicite?
12. Cum să aliniați elementele în interiorul celulelor
13. Cum să aliniați o grilă în interiorul unui container
14. Conținut min-max
15. Auto-umplere și Auto-fit. Dimensiunile celulelor în funcție de conținut
16. Concluzie. Gradina grila
Proiectul GRID CSS
1. Despre ce este acest bloc?
2. Pregătirea
3. Creați un șablon de grilă partea 1
4. Creați un șablon de grilă partea 2
5. Cum funcționează sprite-urile SVG
6. Terminăm a doua secțiune a site-ului
7. Crearea secțiunii „Banner”, partea 1
8. Crearea secțiunii „Banner”, partea 2
9. Crearea unei secțiuni cu carduri
10. Crearea unei galerii
11. Crearea unui subsol
12. Pregătirea „Hamburger”
13. Crearea antetului partea 1
14. Crearea antetului partea 2
15. Adaptăm site-ul
Ne mai vedem!
1. La revedere!
Obțineți certificatul dvs
1. Test pentru obținerea unui certificat de absolvire a cursului