Layout og webudvikling af hjemmesider. Avanceret niveau Webudvikling - kursus 1990 rub. fra Stepik, træning 131 lektioner, Dato: 1. december 2023.
Miscellanea / / December 04, 2023
Hej!
Mit navn er Dima. Og jeg inviterer dig til at kaste dig ud i selve dybden af hjemmesideoprettelse og layout!
Dette kursus er for dem, der allerede kender det grundlæggende, men ønsker at gå fra et godt niveau af hjemmesideoprettelse til et fremragende.
Kurset er for dem, der kender det grundlæggende i HTML og CSS, men ved, at der stadig er mange teknikker, udviklingsteknikker og teknologier, som bliver brugt af rigtige pro-udviklere.
Hvis dette lyder bekendt, så er dette kursus for dig)
Bring liv til dine hjemmesider med moderne animationer via CSS
Vi vil starte med at introducere dynamik på vores websteder, det vil sige, vi vil lave animation. Vi vil lære at animere knapper, tekster og overskrifter ved hjælp af ren CSS, lære at lave kortanimationer, lave en dynamisk navigationsmenu, og alt dette uden en enkelt linje JS-kode, kun ren CSS.
Dette kursus indeholder bedste praksis inden for responsivt design.
Du lærer nye måder og tricks til at designe dine websteder responsivt, bruge nye teknikker til at definere og skrive medieforespørgsler og lære, hvordan du tilpasse alle sideelementer ved kun at ændre én CSS-ejendom, så dit websted ser bedre ud end nogensinde på enhver mobilenhed enhed
Lær alle forviklingerne og fordelene ved moderne præprocessorer
Du vil lære, hvordan du fremskynder oprettelsen af din hjemmeside flere gange ved at bruge de fulde muligheder i SASS-forprocessoren, såsom mixins, variabler og funktioner.
Væsentlige grundlæggende for brug af NPM
NPM-pakker med de nødvendige plugins til enhver professionel udvikler vil også give os mulighed for at skabe og optimere hjemmesider hurtigere og mere effektivt end nogensinde før.
Git versionskontrolsystem vil hjælpe dig i din udvikling
Derudover vil du lære det nødvendige grundlæggende for at arbejde med git-versionskontrolsystemet, så du altid har muligheden for at vende tilbage til den korrekte version af dit websted, uanset hvor slemt du rodede sidste gang opdatere siden)
Du opretter 2 moderne hjemmesider til din portefølje
Dette kursus er bygget på praksis og er opdelt i små videolektioner, hvor vi trin for trin skaber 2 store moderne projekter baseret på float-systemet - så du kan understøtte gamle projekter og selvfølgelig på GRID CSS-systemet, som giver dig mulighed for at lave layouts af utrolig kompleksitet.
Og selvfølgelig vil du ikke skamme dig over at vise disse projekter til dine potentielle kunder eller fremtidige arbejdsgivere.
Jeg er altid i kontakt!
Og vær sikker på, du bliver ikke efterladt alene, for efter hver lille lektion vil du have mulighed for at sammenligne din kode med min eller blot stille et spørgsmål; svarene tager normalt ikke lang tid at nå frem.
Pengene tilbage garanti!
Og hvis du stadig er i tvivl, giver dette kursus mulighed for at returnere pengene brugt på det, hvis du ikke kan lide det inden for 30 dage.
Slut dig til mig, og sammen lærer vi at skabe professionelle, moderne hjemmesider.
Vi ses i klassen!
9
kurserJeg har lavet originale onlinekurser siden 2016. Jeg underviser professionelt i arbejdet med Adobes grafiske redaktører, underviser i design og webudvikling.
Hej! Mit navn er Dima! Jeg vil ikke prale, men jeg er nødt til at) Jeg har undervist mere end 5.000 studerende rundt om i verden i mine proprietære onlinekurser. Over 2.000 rigtige anmeldelser med en gennemsnitlig vurdering på 4,83 ud af 5,00! Jeg underviser i webdesign, webudvikling og den nødvendige software (Photoshop Illustrator, Figma). Min undervisningserfaring består af 5 års freelance vejledning, samt undervisning gennem online skoler og kurser, på globale fjernundervisningsplatforme. Studerende på mine kurser bemærker mine bedste kvaliteter i den måde, jeg præsenterer materialet på uden at proppe, på en sjov og interessant måde.
Forberedelse / Gentagelse / Første animationer
1. Hej!) Download materialer til kurset
2. Installer og konfigurer den nødvendige software
3. Ny ejendom klippesti. Vi begynder at oprette den første sektion af webstedet
4. Hvis scout-app ikke virker for dig
5. Øv: Skab din form ved hjælp af Clip-path
6. Justering af elementer lodret ved hjælp af absolut positionering
7. Mød @KeyFrames. Lad os skabe den første animation.
8. Bagsidens synlighed og oprettelse af knapper gennem pseudo-klasser
9. Animering af en knap ved hjælp af pseudo-elementer
10. Animation-fill-tilstand. Start af en animation fra et bestemt punkt.
11. 3 principper for webudvikling
12. Brug REM i stedet for PX
Git og GitHub
1. Hvad handler denne blok om?
2. Grundlæggende kommandoer i terminalen
3. Sådan redigeres filer via terminal
4. Installer git-systemet på vores computer
5. Hvordan man kører git i et specifikt projekt
6. Oprettelse af den første commit
7. Indsendelse af et projekt til GitHub
8. Hvis du har en fejl, når du sender dit projekt til GitHub
9. Loginfejl ved forsøg på at skubbe et projekt til GitHub
10. Øv: Opret dit eget lager
11. Sådan sletter du et GitHub-lager
12. Sådan downloader du repositories fra GitHub
13. Vi efterligner arbejdet fra 2 udviklere på ét lager
14. Sådan viser du information om commits i terminalen. Git log
15. Hvad er grene
16. Sådan opretter og navigerer du i grene.
17. Vi lukker hullet fra begyndelsen af miniforløbet med notationerne -u og -M
18. Ikke-gemt commit-fejl under kassen
19. Sådan skubber du oprettede ændringer til en ny filial
20. Sådan skubber du flere commits til en ny filial
21. Hvad er tilstanden med løsrevet hoved? Fritstående HOVED
22. Sådan gendanner du en specifik fil fra en tidligere commit
23. Avanceret git-log og git-show
24. Sådan flettes grene ved hjælp af Git Merge. Fast-forward metode
25. Sådan sletter du grene
26. Sådan fjerner du mappefiler fra usporet tilstand
27. Git reset --hårdt. Sådan ruller du en forpligtelse tilbage
28. Anden måde at finde en fast commit ved hjælp af ORIG_HEAD
29. Git reset --soft
30. Git commit --ændre ved at ændre kommentaren til en tidligere commit
31. Git reset --mixed
32. Forskellen mellem git reset og git restore
33. Introduktion til git diff. Udskrivning af forskellen på flere commits til konsollen
34. Praktisk eksempel på brug af git diff
35. Sådan vises grendiagrammet i terminalen. Git log --graf
36. Vi slår grene sammen ved hjælp af git merge. Metode "True Fusion"
37. Sådan ruller du tilbage efter en sammenlægning
38. Sådan kopierer du en specifik commit ved hjælp af git cherry-pick
39. Sammenlægning af grene med git rebase
40. Hvilket er bedre git rebase eller git merge
41. Sådan bruger du .gitignore-filen
42. Sidste ord
Avanceret layout - CSS/SASS
1. Hvad handler denne blok om?
2. Sådan fungerer SASS-variabler
3. Hvordan mixins virker
4. Sådan tilføjer du argumenter til mixins
5. Hvad er SASS-skabeloner
6. Sådan fungerer SASS-funktioner
7. Organisering af SASS-filer til et stort projekt
8. 3 måder at placere elementer på
9. Hvordan fungerer float?
10. At skabe vores eget netsystem
11. Anvendelse af en gradient til tekst. Baggrundsklip
12. Sådan opretter du symboler ved hjælp af HTML
13. Animering og færdiggørelse af andet afsnit
14. Sådan opretter du dine egne ikonskrifttyper
15. Vi bruger perspektivegenskaben til at afspejle elementernes perspektiv
16. Sådan fungerer blandingstilstand i CSS
17. Afslutning af afsnittet med kort
18. Sådan afrundes tekst ved hjælp af egenskaben shape-outside
19. Sådan fungerer CSS-filtre
20. Sådan tilføjer du en video til en side
21. Lær formulartagget og dets indhold at kende
22. Animering af formularen
23. Lav din egen radioknap ved hjælp af CSS
24. Oprettelse af en sidefod på et websted
25. Oprettelse af en navigationsmenu ved hjælp af ren CSS del-1
26. Opsætning af animationshastighedsovergange ved hjælp af cubic-bezier
27. Animering af en hamburger
Adaptivt design
1. Hvad handler denne blok om?
2. Sådan opretter du responsive hjemmesider
3. Skaber en blanding med medieregler
4. Tilpasning af projektet del 1
5. Tilpasning af projektet del 2
6. Tilpasning af projektet del 3
7. Hvad er responsive billeder
8. Sådan tilpasses billeder i HTML
9. Lad os tilpasse HTML-billeder i vores projekt
10. Tilpasning af CSS billeder
11. Et par sidste redigeringer af webstedet
Node pakke manager
1. Hvad handler denne blok om?
2. Hvad er node.js og npm
3. Klargøring af den første npm-pakke til brug
4. Lancering af den første npm-pakke
5. Bruger gulp i vores projekt
6. Hvordan man åbner en hjemmeside på en mobiltelefon
Introduktion til CSS GRID
1. Hvad handler denne blok om?
2. Forberedelse
3. Sådan opretter du en gitterskabelon. Gitter skabelon
4. Hvordan fr-enheder fungerer
5. Sådan flyttes et element til en anden celle
6. Placering af flere elementer i én celle
7. Øv: Opret et webstedslayout
8. Eksempel på en lærer. Opret et layout
9. Sådan omdøbes hver linje i et gitter
10. Sådan opretter du en gitterskabelon ved hjælp af et navngivningsskema
11. Hvad er eksplicitte og implicitte gitter?
12. Sådan justeres elementer inde i celler
13. Sådan justeres et gitter inde i en beholder
14. Min-Max indhold
15. Auto-fyld og Auto-tilpas. Cellestørrelser baseret på indhold
16. Konklusion. Gitterhave
GRID CSS-projekt
1. Hvad handler denne blok om?
2. Forberedelse
3. Opret en gitterskabelon del 1
4. Opret en gitterskabelon del 2
5. Sådan fungerer SVG sprites
6. Vi er ved at afslutte den anden del af siden
7. Oprettelse af "Banner"-sektionen, del 1
8. Oprettelse af "Banner"-sektionen, del 2
9. Oprettelse af en sektion med kort
10. Oprettelse af et galleri
11. Oprettelse af en sidefod
12. At lave "Hamburger"
13. Oprettelse af overskrift del 1
14. Oprettelse af header del 2
15. Vi tilpasser siden
Vi ses!
1. Farvel!
Få dit certifikat
1. Test for at opnå et certifikat for gennemførelse af kurset