0
Visningar
Layout och webbutveckling av hemsidor. Avancerad nivå Webbutveckling - kurs 1990 rub. från Stepik, träning 131 lektioner, Datum: 1 december 2023.
Miscellanea / / December 04, 2023
Hallå!
Jag heter Dima. Och jag inbjuder dig att kasta dig in i djupet av webbplatsskapande och layout!
Den här kursen vänder sig till dig som redan kan grunderna, men som vill gå från en bra nivå av webbplatsskapande till en utmärkt.
Kursen är för dig som kan grunderna i HTML och CSS, men vet att det fortfarande finns många tekniker, utvecklingstekniker och teknologier som används av riktiga pro-utvecklare.
Om detta låter bekant, då är den här kursen för dig)
Ge liv åt dina webbplatser med moderna animationer via CSS
Vi börjar med att introducera dynamik på våra sajter, det vill säga vi kommer att göra animering. Vi kommer att lära oss hur man animerar knappar, texter och rubriker med ren CSS, lära sig att skapa kortanimationer, skapa en dynamisk navigeringsmeny och allt detta utan en enda rad med JS-kod, bara ren CSS.
Den här kursen innehåller bästa praxis inom responsiv design.
Du kommer att lära dig nya sätt och knep för att designa dina webbplatser responsivt, använda nya tekniker för att definiera och skriva mediefrågor och lära dig hur du anpassa alla sidelement genom att bara ändra en CSS-egenskap så att din webbplats ser bättre ut än någonsin på någon mobil enhet enhet
Lär dig alla krångligheter och fördelar med moderna förprocessorer
Du kommer att lära dig hur du påskyndar din webbplatsskapande flera gånger genom att använda alla funktioner i SASS-förprocessorn, såsom mixins, variabler och funktioner.
Viktiga grunder för att använda NPM
Dessutom kommer NPM-paket med de plugins som krävs för varje professionell utvecklare att ge oss möjligheten att skapa och optimera webbplatser snabbare och mer effektivt än någonsin tidigare.
Git versionskontrollsystem hjälper dig i din utveckling
Dessutom kommer du att lära dig de nödvändiga grunderna för att arbeta med git-versionskontrollsystemet så att du alltid har det möjligheten att återgå till den korrekta versionen av din webbplats, oavsett hur illa du förstörde förra gången uppdatera sidan)
Du skapar 2 moderna webbplatser för din portfölj
Denna kurs är byggd på praktik och är uppdelad i små videolektioner där vi steg för steg skapar 2 stora moderna projekt baserade på float-systemet - så att du kan stödja gamla projekt och naturligtvis på GRID CSS-systemet, som låter dig skapa layouter med otrolig komplexitet.
Och naturligtvis kommer du inte att skämmas för att visa dessa projekt för dina potentiella kunder eller framtida arbetsgivare.
Jag har alltid kontakt!
Och var säker, du kommer inte att lämnas ensam, för efter varje liten lektion har du möjlighet att jämföra din kod med min eller helt enkelt ställa en fråga; svaren tar vanligtvis inte lång tid att komma fram.
Pengar tillbaka garanti!
Och om du fortfarande har tvivel, ger den här kursen möjligheten att returnera pengarna som spenderats på den om du inte gillar det inom 30 dagar.
Häng med mig så lär vi oss tillsammans hur man skapar professionella, moderna webbsidor.
Ses på lektionen!
Dmitry Fokeev
9
kurserJag har skapat originalkurser online sedan 2016. Jag undervisar professionellt och arbetar med Adobes grafiska redaktörer, undervisar i design och webbutveckling.
Hallå! Jag heter Dima! Jag vill inte skryta, men jag måste) Jag har undervisat mer än 5 000 studenter runt om i världen i mina egna onlinekurser. Över 2 000 riktiga recensioner med ett genomsnittligt betyg på 4,83 av 5,00! Jag undervisar i webbdesign, webbutveckling och nödvändig mjukvara (Photoshop Illustrator, Figma). Min undervisningserfarenhet består av 5 års frilansande handledning, samt undervisning genom onlineskolor och kurser, på globala distansutbildningsplattformar. Studenter på mina kurser noterar mina bästa egenskaper i det sätt jag presenterar materialet utan att proppa ihop, på ett roligt och intressant sätt.
Förberedelser / Upprepning / Första animationerna
1. Hej!) Ladda ner material för kursen
2. Installera och konfigurera nödvändig programvara
3. Ny fastighetsklippbana. Vi börjar skapa den första delen av webbplatsen
4. Om scout-appen inte fungerar för dig
5. Övning: Skapa din form med Clip-path
6. Justera element vertikalt med absolut positionering
7. Möt @KeyFrames. Låt oss skapa den första animationen.
8. Baksidans synlighet och skapa knappar genom pseudo-klasser
9. Animera en knapp med hjälp av pseudoelement
10. Animation-fill-läge. Starta en animation från en specifik punkt.
11. 3 principer för webbutveckling
12. Använd REM istället för PX
Git och GitHub
1. Vad handlar det här blocket om?
2. Grundläggande kommandon i terminalen
3. Hur man redigerar filer via terminal
4. Installera git-systemet på vår dator
5. Hur man kör git i ett specifikt projekt
6. Skapar den första commiten
7. Skicka in ett projekt till GitHub
8. Om du har ett fel när du skickar ditt projekt till GitHub
9. Inloggningsfel när man försöker skicka ett projekt till GitHub
10. Övning: Skapa ditt eget arkiv
11. Hur man tar bort ett GitHub-förråd
12. Hur man laddar ner repositories från GitHub
13. Vi emulerar 2 utvecklares arbete på ett arkiv
14. Hur man visar information om commits i terminalen. Git logg
15. Vad är grenar
16. Hur man skapar och navigerar i grenar.
17. Vi täpper till luckan från början av minikursen med beteckningarna -u och -M
18. Ej sparat commit-fel under kassan
19. Hur man driver skapade ändringar till en ny gren
20. Hur man pushar flera commits till en ny gren
21. Vad är tillståndet för fristående huvud? Fristående HUVUD
22. Hur man återställer en specifik fil från en tidigare commit
23. Avancerad git-logg och git-show
24. Hur man slår samman grenar med Git merge. Snabbspolning framåt
25. Hur man tar bort grenar
26. Hur man tar bort katalogfiler från ospårat tillstånd
27. Git reset --hårt. Hur man hårt återställer en commit
28. Andra sättet att hitta en fast commit med ORIG_HEAD
29. Git reset --soft
30. Git commit --ändra genom att ändra kommentaren från en tidigare commit
31. Git reset --mixed
32. Skillnaden mellan git reset och git restore
33. Introduktion till git diff. Skriver ut skillnaden på flera commits till konsolen
34. Praktiskt exempel på att använda git diff
35. Hur man visar grendiagrammet i terminalen. Git log --graf
36. Vi slår samman grenar med git merge. Metod "True Fusion"
37. Hur man rullar tillbaka efter en sammanslagning
38. Hur man kopierar en specifik commit med git cherry-pick
39. Slår ihop grenar med git rebase
40. Vilket är bättre git rebase eller git merge
41. Hur man använder .gitignore-filen
42. Sista ord
Avancerad layout - CSS/SASS
1. Vad handlar det här blocket om?
2. Hur SASS-variabler fungerar
3. Hur mixins fungerar
4. Hur man lägger till argument till mixins
5. Vad är SASS-mallar
6. Hur SASS-funktioner fungerar
7. Organisera SASS-filer för ett stort projekt
8. 3 sätt att placera element
9. Hur fungerar float?
10. Skapar vårt eget nätsystem
11. Tillämpa en gradient på text. Bakgrundsklipp
12. Hur man skapar symboler med HTML
13. Animera och avsluta det andra avsnittet
14. Hur du skapar dina egna ikonteckensnitt
15. Vi använder egenskapen perspektiv för att spegla elementens perspektiv
16. Hur blandningsläge fungerar i CSS
17. Avsluta avsnittet med kort
18. Hur man avrundar text med egenskapen shape-outside
19. Hur CSS-filter fungerar
20. Hur man lägger till en video på en sida
21. Lär känna formulärtaggen och dess innehåll
22. Animerar formuläret
23. Skapa din egen radioknapp med CSS
24. Skapa en webbplatssidfot
25. Skapa en navigeringsmeny med ren CSS del-1
26. Ställa in animeringshastighetsövergångar med cubic-bezier
27. Animerar en hamburgare
Adaptiv design
1. Vad handlar det här blocket om?
2. Hur man skapar responsiva webbplatser
3. Skapa en mixin med mediaregler
4. Anpassning av projektet del 1
5. Anpassning av projektet del 2
6. Anpassning av projektet del 3
7. Vad är responsiva bilder
8. Hur man anpassar bilder i HTML
9. Låt oss anpassa HTML-bilder i vårt projekt
10. Anpassning av CSS-bilder
11. Några sista redigeringar på webbplatsen
Nodpakethanterare
1. Vad handlar det här blocket om?
2. Vad är node.js och npm
3. Förbereder det första npm-paketet för användning
4. Lanserar det första npm-paketet
5. Använder gulp i vårt projekt
6. Hur man öppnar en webbplats på en mobiltelefon
Introduktion till CSS GRID
1. Vad handlar det här blocket om?
2. Förberedelse
3. Hur man skapar en rutnätsmall. Rutnät mall
4. Hur fr-enheter fungerar
5. Hur man flyttar ett element till en annan cell
6. Placera flera objekt i en cell
7. Övning: Skapa en webbplatslayout
8. Exempel på lärare. Skapa en layout
9. Hur man byter namn på varje rad i ett rutnät
10. Hur man skapar en rutnätsmall med hjälp av ett namnschema
11. Vad är explicita och implicita rutnät?
12. Hur man justerar element inuti celler
13. Hur man riktar ett rutnät inuti en behållare
14. Min-Max innehåll
15. Autofyll och Autopassning. Cellstorlekar baserat på innehåll
16. Slutsats. Grid trädgård
GRID CSS-projekt
1. Vad handlar det här blocket om?
2. Förberedelse
3. Skapa en rutnätsmall del 1
4. Skapa en rutnätsmall del 2
5. Hur SVG sprites fungerar
6. Vi håller på att avsluta den andra delen av webbplatsen
7. Skapa avsnittet "Banner", del 1
8. Skapa avsnittet "Banner", del 2
9. Skapa en sektion med kort
10. Skapa ett galleri
11. Skapa en sidfot
12. Att göra "hamburgare"
13. Skapa rubrik del 1
14. Skapa rubrik del 2
15. Vi anpassar sidan
Vi ses!
1. Adjö!
Få ditt certifikat
1. Testa för att erhålla ett intyg om avslutad kurs
Prenumerera
YOU MIGHT ALSO LIKE
