0
Bekeken
Lay-out en webontwikkeling van websites. Gevorderd niveau Web Develop - cursus 1990 wrijven. van Stepik, opleiding 131 lessen, Datum: 1 december 2023.
Gemengde Berichten / / December 04, 2023
Hallo!
Mijn naam is Dima. En ik nodig u uit om in de diepten van het maken en opmaken van websites te duiken!
Deze cursus is bedoeld voor degenen die de basis al kennen, maar van een goed niveau in het maken van websites willen overstappen naar een uitstekend niveau.
De cursus is voor degenen die de basis van HTML en CSS kennen, maar weten dat er nog veel technieken, ontwikkeltechnieken en technologieën zijn die door echte pro-ontwikkelaars worden gebruikt.
Klinkt dit bekend, dan is deze cursus iets voor jou)
Breng uw websites tot leven met moderne animaties via CSS
We beginnen met het introduceren van dynamiek in onze sites, dat wil zeggen, we zullen animatie doen. We zullen leren hoe we knoppen, teksten en kopjes kunnen animeren met behulp van pure CSS, hoe we kaartanimaties kunnen maken, hoe we een dynamisch navigatiemenu kunnen maken, en dit alles zonder een enkele regel JS-code, alleen pure CSS.
Deze cursus bevat best practices op het gebied van responsive design.
U leert nieuwe manieren en trucs om uw sites responsief te ontwerpen, u gebruikt nieuwe technieken voor het definiëren en schrijven van mediaquery's en u leert hoe u pas alle pagina-elementen aan door slechts één CSS-eigenschap te wijzigen, zodat uw site er op elk mobiel apparaat beter dan ooit uitziet apparaat
Leer alle fijne kneepjes en voordelen van moderne preprocessors
U leert hoe u het maken van uw website meerdere keren kunt versnellen door gebruik te maken van de volledige mogelijkheden van de SASS-preprocessor, zoals mixins, variabelen en functies.
Essentiële basisprincipes voor het gebruik van NPM
Bovendien geven NPM-pakketten met de plug-ins die nodig zijn voor elke professionele ontwikkelaar ons de mogelijkheid om websites sneller en efficiënter dan ooit tevoren te maken en te optimaliseren.
Het Git-versiecontrolesysteem helpt u bij uw ontwikkeling
Daarnaast leer je de nodige basisprincipes voor het werken met het git versiebeheersysteem, zodat je dat altijd bij de hand hebt de mogelijkheid om terug te keren naar de juiste versie van uw site, ongeacht hoe erg u de vorige keer een fout heeft gemaakt update de site)
U maakt 2 moderne websites voor uw portfolio
Deze cursus is gebaseerd op de praktijk en is opgedeeld in kleine videolessen waarin we stap voor stap op basis van 2 grote moderne projecten gaan creëren op het float-systeem - zodat u oude projecten kunt ondersteunen en natuurlijk op het GRID CSS-systeem, waarmee u lay-outs van ongelooflijke complexiteit kunt maken.
En uiteraard schaam je je er niet voor om deze projecten aan je potentiële klanten of toekomstige werkgevers te laten zien.
Ik heb altijd contact!
En wees gerust, u zult niet alleen gelaten worden, want na elke kleine les krijgt u de gelegenheid om uw code met de mijne te vergelijken of gewoon een vraag te stellen; de antwoorden laten meestal niet lang op zich wachten.
Geldteruggarantie!
En als je toch nog twijfelt, biedt deze cursus de mogelijkheid om het geld dat je eraan hebt besteed binnen 30 dagen terug te storten als het je niet bevalt.
Doe mee en samen leren we hoe we professionele, moderne websites kunnen maken.
Tot ziens in de klas!
Dmitri Fokejev
9
cursussenSinds 2016 maak ik originele online cursussen. Ik geef professioneel les in het werken met grafische editors van Adobe, geef les in ontwerp en webontwikkeling.
Hallo! Mijn naam is Dima! Ik wil niet opscheppen, maar ik moet wel) Ik heb meer dan 5.000 studenten over de hele wereld les gegeven in mijn eigen online cursussen. Ruim 2.000 echte beoordelingen met een gemiddelde beoordeling van 4,83 uit 5,00! Ik geef les in webdesign, webontwikkeling en de benodigde software (Photoshop Illustrator, Figma). Mijn leservaring bestaat uit 5 jaar freelance bijles geven, maar ook lesgeven via online scholen en cursussen, op wereldwijde platforms voor afstandsonderwijs. Studenten van mijn cursussen merken mijn beste eigenschappen op in de manier waarop ik de stof zonder te proppen, op een leuke en interessante manier presenteer.
Voorbereiding / Herhaling / Eerste animaties
1. Hallo!) Download materialen voor de cursus
2. Installeer en configureer de benodigde software
3. Nieuw eigenschappenclippad. We beginnen met het maken van het eerste gedeelte van de site
4. Als scout-app niet werkt voor jou
5. Oefening: Creëer uw vorm met behulp van Clip-path
6. Elementen verticaal uitlijnen met behulp van absolute positionering
7. Maak kennis met @KeyFrames. Laten we de eerste animatie maken.
8. Backface-zichtbaarheid en het maken van knoppen via pseudo-klassen
9. Een knop animeren met behulp van pseudo-elementen
10. Animatie-vulmodus. Een animatie starten vanaf een specifiek punt.
11. 3 principes van webontwikkeling
12. Gebruik REM in plaats van PX
Git en GitHub
1. Waar gaat dit blok over?
2. Basisopdrachten in de terminal
3. Bestanden bewerken via terminal
4. Installeer het git-systeem op onze computer
5. Hoe git in een specifiek project uit te voeren
6. De eerste commit maken
7. Een project indienen bij GitHub
8. Als u een fout ondervindt bij het indienen van uw project bij GitHub
9. Inlogfout bij het pushen van een project naar GitHub
10. Oefening: Maak uw eigen repository
11. Hoe een GitHub-repository te verwijderen
12. Hoe u repository's kunt downloaden van GitHub
13. We emuleren het werk van twee ontwikkelaars op één repository
14. Hoe informatie over commits in de terminal wordt weergegeven. Git-logboek
15. Wat zijn takken
16. Hoe u takken kunt maken en navigeren.
17. We dichten het gat vanaf het begin van de minicursus met de notaties -u en -M
18. Fout bij niet-opgeslagen commit tijdens het afrekenen
19. Hoe u gemaakte wijzigingen naar een nieuwe vertakking kunt pushen
20. Hoe je meerdere commits naar een nieuwe branch kunt pushen
21. Wat is de toestand van het vrijstaande hoofd? Vrijstaand HOOFD
22. Hoe u een specifiek bestand van een eerdere commit kunt herstellen
23. Geavanceerde git log en git show
24. Hoe branches samen te voegen met Git merge. Fast-forward-methode
25. Hoe takken te verwijderen
26. Hoe directorybestanden uit de niet-bijgehouden status te verwijderen
27. Git-reset --hard. Hoe je een commit hard kunt terugdraaien
28. Tweede manier om een vastgelopen commit te vinden met behulp van ORIG_HEAD
29. Git-reset --zacht
30. Git commit --wijzig het commentaar van een eerdere commit
31. Git reset --gemengd
32. Verschil tussen git-reset en git-herstel
33. Inleiding tot git diff. Het verschil van verschillende commits afdrukken naar de console
34. Praktisch voorbeeld van het gebruik van git diff
35. Hoe u het filiaaldiagram in de terminal kunt weergeven. Gitlog --graph
36. We voegen branches samen met git merge. Methode "Ware Fusion"
37. Terugdraaien na een samenvoeging
38. Hoe je een specifieke commit kopieert met git cherry-pick
39. Takken samenvoegen met git rebase
40. Wat is beter: git rebase of git merge
41. Hoe het .gitignore-bestand te gebruiken
42. Laatste woord
Geavanceerde lay-out - CSS/SASS
1. Waar gaat dit blok over?
2. Hoe SASS-variabelen werken
3. Hoe mix-ins werken
4. Hoe argumenten aan mixins toe te voegen
5. Wat zijn SASS-sjablonen
6. Hoe SASS-functies werken
7. SASS-bestanden organiseren voor een groot project
8. 3 manieren om elementen te positioneren
9. Hoe werkt floaten?
10. Ons eigen rastersysteem creëren
11. Een verloop op tekst toepassen. Achtergrondclip
12. Hoe symbolen te maken met HTML
13. Animatie en afwerking van het tweede deel
14. Hoe u uw eigen pictogramlettertypen kunt maken
15. We gebruiken de perspectiefeigenschap om het perspectief van de elementen weer te geven
16. Hoe de overvloeimodus werkt in CSS
17. Het gedeelte afmaken met kaarten
18. Tekst afronden met de eigenschap shape-outside
19. Hoe CSS-filters werken
20. Hoe u een video aan een pagina toevoegt
21. Kennismaken met de formuliertag en de inhoud ervan
22. Het formulier animeren
23. Je eigen keuzerondje maken met CSS
24. Een websitevoettekst maken
25. Een navigatiemenu maken met pure CSS deel-1
26. Animatiesnelheidsovergangen instellen met behulp van kubieke Bezier
27. Een hamburger animeren
Adaptief ontwerp
1. Waar gaat dit blok over?
2. Hoe responsieve websites te maken
3. Een mix creëren met mediaregels
4. Aanpassing van het project deel 1
5. Aanpassing van het project deel 2
6. Aanpassing van het projectdeel 3
7. Wat zijn responsieve afbeeldingen
8. Afbeeldingen aanpassen in HTML
9. Laten we HTML-afbeeldingen in ons project aanpassen
10. Aanpassing van CSS-afbeeldingen
11. Nog een paar laatste site-bewerkingen
Knooppuntpakketbeheerder
1. Waar gaat dit blok over?
2. Wat is node.js en npm
3. Het eerste npm-pakket gereedmaken voor gebruik
4. Lancering van het eerste npm-pakket
5. Gulp gebruiken in ons project
6. Hoe een website op een mobiele telefoon te openen
Inleiding tot CSS-GRID
1. Waar gaat dit blok over?
2. Voorbereiding
3. Hoe u een rastersjabloon maakt. Rastersjabloon
4. Hoe fr-eenheden werken
5. Hoe een element naar een andere cel te verplaatsen
6. Meerdere items in één cel plaatsen
7. Oefening: Maak een website-indeling
8. Voorbeeld van een leraar. Maak een lay-out
9. Hoe u elke lijn in een raster kunt hernoemen
10. Een rastersjabloon maken met behulp van een naamgevingsschema
11. Wat zijn expliciete en impliciete rasters?
12. Hoe elementen in cellen uit te lijnen
13. Hoe u een raster in een container kunt uitlijnen
14. Min-Max-inhoud
15. Automatisch aanvullen en automatisch aanpassen. Celgroottes op basis van inhoud
16. Conclusie. Raster tuin
GRID CSS-project
1. Waar gaat dit blok over?
2. Voorbereiding
3. Maak een rastersjabloon deel 1
4. Maak een rastersjabloon deel 2
5. Hoe SVG-sprites werken
6. We zijn het tweede deel van de site aan het afronden
7. De sectie "Banner" maken, deel 1
8. De sectie "Banner" maken, deel 2
9. Een sectie met kaarten maken
10. Een galerij maken
11. Een voettekst maken
12. "Hamburger" maken
13. Koptekstdeel 1 maken
14. Koptekstdeel 2 maken
15. Wij passen de site aan
Tot ziens!
1. Tot ziens!
Ontvang uw certificaat
1. Test voor het verkrijgen van een certificaat van voltooiing van de cursus
Inschrijven
YOU MIGHT ALSO LIKE
