Izgled i web razvoj web stranica. Napredna razina Web Develop - tečaj 1990 rub. iz Stepika, obuka 131 lekcija, Datum: 01.12.2023.
Miscelanea / / December 04, 2023
Zdravo!
Moje ime je Dima. I pozivam vas da uronite u same dubine izrade i izgleda web stranice!
Ovaj tečaj je za one koji već znaju osnove, ali žele prijeći s dobre razine izrade web stranice na izvrsnu.
Tečaj je za one koji poznaju osnove HTML-a i CSS-a, ali znaju da postoje još mnoge tehnike, razvojne tehnike i tehnologije koje koriste pravi pro-developeri.
Ako vam ovo zvuči poznato, onda je ovaj tečaj za vas)
Oživite svoje web stranice s modernim animacijama putem CSS-a
Počet ćemo s uvođenjem dinamike u naše stranice, odnosno radit ćemo animaciju. Naučit ćemo kako animirati gumbe, tekstove i naslove koristeći čisti CSS, naučiti kako izraditi animacije kartica, izraditi dinamički navigacijski izbornik, a sve to bez ijednog retka JS koda, samo čisti CSS.
Ovaj tečaj sadrži najbolje prakse u responzivnom dizajnu.
Naučit ćete nove načine i trikove kako responzivno dizajnirati svoje web-lokacije, koristiti nove tehnike za definiranje i pisanje medijskih upita i naučiti kako prilagodite sve elemente stranice promjenom samo jednog CSS svojstva kako bi vaša stranica izgledala bolje nego ikad na bilo kojem mobilnom uređaju uređaj
Naučite sve zamršenosti i prednosti modernih pretprocesora
Naučit ćete kako ubrzati izradu svoje web stranice za nekoliko puta korištenjem svih mogućnosti SASS pretprocesora, kao što su mixins, varijable i funkcije.
Osnove korištenja NPM-a
Također, NPM paketi s dodacima potrebnim svakom profesionalnom developeru dat će nam mogućnost izrade i optimizacije web stranica brže i učinkovitije nego ikad prije.
Git sustav kontrole verzija pomoći će vam u razvoju
Osim toga, naučit ćete potrebne osnove za rad sa sustavom kontrole verzija git tako da uvijek imate mogućnost povratka na ispravnu verziju vaše stranice, bez obzira na to koliko ste zabrljali posljednji put ažuriraj stranicu)
Izrađujete 2 moderne web stranice za svoj portfelj
Ovaj tečaj je izgrađen na praksi i podijeljen je na male video lekcije u kojima ćemo korak po korak kreirati 2 velika moderna projekta temeljena na float sustavu - kako biste mogli podržati stare projekte i naravno na GRID CSS sustavu koji vam omogućuje izradu layouta nevjerojatne složenosti.
I naravno, nećete se sramiti ove projekte pokazati svojim potencijalnim kupcima ili budućim poslodavcima.
Uvijek smo u kontaktu!
I budite sigurni, nećete ostati sami, jer nakon svake male lekcije, imat ćete priliku usporediti svoj kod s mojim ili jednostavno postaviti pitanje, odgovori obično ne čekaju dugo.
Povrat novca zagarantovan!
A ako još uvijek imate nedoumica, ovaj tečaj pruža mogućnost povrata novca potrošenog na njega ako vam se ne sviđa u roku od 30 dana.
Pridružite mi se i zajedno ćemo naučiti kako izraditi profesionalne, moderne web stranice.
Vidimo se u razredu!
9
tečajeviKreiram originalne online tečajeve od 2016. godine. Profesionalno podučavam rad s Adobe grafičkim urednicima, podučavam dizajn i web development.
Zdravo! Moje ime je Dima! Ne želim se hvaliti, ali moram) Podučavao sam više od 5000 učenika diljem svijeta na svojim vlasničkim online tečajevima. Preko 2000 stvarnih recenzija s prosječnom ocjenom 4,83 od 5,00! Predajem web dizajn, web development i potrebne programe (Photoshop Illustrator, Figma). Moje iskustvo u podučavanju sastoji se od 5 godina samostalnog podučavanja, kao i podučavanja putem online škola i tečajeva, na globalnim platformama za učenje na daljinu. Studenti mojih kolegija ističu moje najbolje kvalitete u načinu na koji gradivo prezentiram bez naguravanja, na zabavan i zanimljiv način.
Priprema / Ponavljanje / Prve animacije
1. Pozdrav!) Preuzmite materijale za tečaj
2. Instalirajte i konfigurirajte potrebni softver
3. Novi isječak svojstva. Počinjemo stvarati prvi dio stranice
4. Ako vam scout-app ne radi
5. Vježbajte: stvorite svoj oblik koristeći Clip-path
6. Okomito poravnavanje elemenata korištenjem apsolutnog pozicioniranja
7. Upoznajte @KeyFrames. Kreirajmo prvu animaciju.
8. Vidljivost pozadine i kreiranje gumba kroz pseudo-klase
9. Animiranje gumba pomoću pseudoelemenata
10. Animation-fill-mode. Pokretanje animacije od određene točke.
11. 3 principa web razvoja
12. Koristite REM umjesto PX
Git i GitHub
1. O čemu se radi u ovom bloku?
2. Osnovne naredbe u terminalu
3. Kako uređivati datoteke putem terminala
4. Instalirajte git sustav na naše računalo
5. Kako pokrenuti git u određenom projektu
6. Stvaranje prve predaje
7. Slanje projekta na GitHub
8. Ako imate grešku prilikom slanja projekta na GitHub
9. Pogreška pri prijavi prilikom pokušaja guranja projekta na GitHub
10. Vježbajte: Stvorite vlastito spremište
11. Kako izbrisati GitHub repozitorij
12. Kako preuzeti repozitorije s GitHuba
13. Emuliramo rad 2 programera na jednom repozitoriju
14. Kako prikazati informacije o obvezama u terminalu. Git zapisnik
15. Što su grane
16. Kako kreirati grane i kretati se njima.
17. Prazninu s početka mini tečaja zatvaramo oznakama -u i -M
18. Nespremljena pogreška predaje tijekom naplate
19. Kako gurnuti stvorene promjene u novu granu
20. Kako gurnuti više obveza u novu granu
21. Što je stanje odvojene glave? Odvojena GLAVA
22. Kako vratiti određenu datoteku iz prethodnog urezivanja
23. Napredni git log i git show
24. Kako spojiti grane pomoću Git spajanja. Metoda brzog premotavanja
25. Kako izbrisati grane
26. Kako ukloniti datoteke imenika iz nepraćenog stanja
27. Git reset --hard. Kako teško vratiti commit
28. Drugi način za pronalaženje zaglavljenog predavanja pomoću ORIG_HEAD
29. Git reset --soft
30. Git commit --amend mijenjanje komentara prethodnog commita
31. Git reset --mješovito
32. Razlika između git reset i git restore
33. Uvod u git diff. Ispis razlike nekoliko obveza na konzolu
34. Praktičan primjer korištenja git diff
35. Kako prikazati dijagram grananja u terminalu. Git log --graf
36. Spajamo grane koristeći git merge. Metoda "Prava fuzija"
37. Kako se vratiti nakon spajanja
38. Kako kopirati određeni commit pomoću git cherry-pick
39. Spajanje grana s git rebase
40. Što je bolje git rebase ili git merge
41. Kako koristiti datoteku .gitignore
42. Završna riječ
Napredni izgled - CSS/SASS
1. O čemu se radi u ovom bloku?
2. Kako rade SASS varijable
3. Kako rade miksini
4. Kako dodati argumente miksinima
5. Što su SASS predlošci
6. Kako funkcionira SASS
7. Organiziranje SASS datoteka za veliki projekt
8. 3 načina pozicioniranja elemenata
9. Kako radi plovak?
10. Stvaranje vlastitog grid sustava
11. Primjena gradijenta na tekst. Pozadinski isječak
12. Kako stvoriti simbole pomoću HTML-a
13. Animiranje i dorada drugog dijela
14. Kako izraditi vlastite fontove ikona
15. Koristimo svojstvo perspektive da odražavamo perspektivu elemenata
16. Kako način miješanja radi u CSS-u
17. Završetak dijela s karticama
18. Kako zaokružiti tekst pomoću svojstva shape-outside
19. Kako rade CSS filteri
20. Kako dodati video na stranicu
21. Upoznavanje s tagom obrasca i njegovim sadržajem
22. Animiranje forme
23. Izrada vlastitog radio gumba pomoću CSS-a
24. Izrada podnožja web stranice
25. Stvaranje navigacijskog izbornika korištenjem čistog CSS-a part-1
26. Postavljanje prijelaza brzine animacije pomoću cubic-beziera
27. Animiranje hamburgera
Adaptivni dizajn
1. O čemu se radi u ovom bloku?
2. Kako izraditi responzivne web stranice
3. Stvaranje mixina s medijskim pravilima
4. Adaptacija projekta dio 1
5. Adaptacija projekta dio 2
6. Adaptacija projekta dio 3
7. Što su responzivne slike
8. Kako prilagoditi slike u HTML-u
9. Prilagodimo HTML slike u našem projektu
10. Prilagodba CSS slika
11. Nekoliko završnih izmjena stranice
Upravitelj paketa čvora
1. O čemu se radi u ovom bloku?
2. Što je node.js i npm
3. Priprema prvog npm paketa za korištenje
4. Pokretanje prvog npm paketa
5. Korištenje gulp-a u našem projektu
6. Kako otvoriti web stranicu na mobilnom telefonu
Uvod u CSS GRID
1. O čemu se radi u ovom bloku?
2. Priprema
3. Kako izraditi predložak mreže. Predložak mreže
4. Kako fr jedinice rade
5. Kako premjestiti element u drugu ćeliju
6. Stavljanje više stavki u jednu ćeliju
7. Vježbajte: Napravite izgled web stranice
8. Primjer učitelja. Napravite izgled
9. Kako preimenovati svaki redak u rešetki
10. Kako stvoriti predložak mreže pomoću sheme imenovanja
11. Što su eksplicitne i implicitne mreže?
12. Kako poravnati elemente unutar ćelija
13. Kako poravnati rešetku unutar spremnika
14. Min-Max sadržaj
15. Auto-fill i Auto-fit. Veličine ćelija na temelju sadržaja
16. Zaključak. Mrežasti vrt
GRID CSS projekt
1. O čemu se radi u ovom bloku?
2. Priprema
3. Napravite predložak mreže 1. dio
4. Napravite predložak mreže 2. dio
5. Kako rade SVG spriteovi
6. Završavamo drugi dio stranice
7. Izrada odjeljka "Banner", 1. dio
8. Izrada odjeljka "Banner", 2. dio
9. Izrada odjeljka s karticama
10. Izrada galerije
11. Izrada podnožja
12. Pravljenje "Hamburgera"
13. Stvaranje dijela zaglavlja 1
14. Stvaranje dijela zaglavlja 2
15. Adaptiramo stranicu
Vidimo se opet!
1. Doviđenja!
Dobijte svoj certifikat
1. Test za stjecanje uvjerenja o završenom tečaju