Layout und Webentwicklung von Websites. Webentwicklung für Fortgeschrittene - Kurs 1990 reiben. von Stepik, Ausbildung 131 Lektionen, Datum: 1. Dezember 2023.
Verschiedenes / / December 04, 2023
Hallo!
Ich heiße Dima. Und ich lade Sie ein, in die Tiefen der Website-Erstellung und des Website-Layouts einzutauchen!
Dieser Kurs richtet sich an diejenigen, die die Grundlagen bereits kennen, aber von einem guten Niveau der Website-Erstellung zu einem hervorragenden Niveau übergehen möchten.
Der Kurs richtet sich an diejenigen, die die Grundlagen von HTML und CSS kennen, aber wissen, dass es noch viele Techniken, Entwicklungstechniken und Technologien gibt, die von echten Profi-Entwicklern verwendet werden.
Wenn Ihnen das bekannt vorkommt, dann ist dieser Kurs genau das Richtige für Sie.)
Bringen Sie Leben in Ihre Websites mit modernen Animationen per CSS
Wir werden damit beginnen, Dynamik in unsere Websites einzuführen, das heißt, wir werden Animationen erstellen. Wir lernen, wie man Schaltflächen, Texte und Überschriften mit reinem CSS animiert, wie man Kartenanimationen erstellt, ein dynamisches Navigationsmenü erstellt und das alles ohne eine einzige Zeile JS-Code, nur mit reinem CSS.
Dieser Kurs enthält Best Practices für Responsive Design.
Sie lernen neue Möglichkeiten und Tricks kennen, um Ihre Websites responsiv zu gestalten, neue Techniken zum Definieren und Schreiben von Medienabfragen zu verwenden und zu lernen, wie das geht Passen Sie alle Seitenelemente an, indem Sie nur eine CSS-Eigenschaft ändern, damit Ihre Website auf jedem mobilen Gerät besser aussieht als je zuvor Gerät
Lernen Sie alle Feinheiten und Vorteile moderner Präprozessoren kennen
Sie erfahren, wie Sie die Erstellung Ihrer Website um ein Vielfaches beschleunigen können, indem Sie alle Möglichkeiten des SASS-Präprozessors wie Mixins, Variablen und Funktionen nutzen.
Wesentliche Grundlagen für den Einsatz von NPM
Darüber hinaus bieten uns NPM-Pakete mit den für jeden professionellen Entwickler notwendigen Plugins die Möglichkeit, Websites schneller und effizienter als je zuvor zu erstellen und zu optimieren.
Das Git-Versionskontrollsystem hilft Ihnen bei Ihrer Entwicklung
Darüber hinaus erlernen Sie die notwendigen Grundlagen für die Arbeit mit dem Git-Versionskontrollsystem, damit Sie immer zur Hand sind die Möglichkeit, zur korrekten Version Ihrer Website zurückzukehren, egal wie sehr Sie das letzte Mal Fehler gemacht haben die Seite aktualisieren)
Sie erstellen 2 moderne Websites für Ihr Portfolio
Dieser Kurs basiert auf der Praxis und ist in kleine Videolektionen unterteilt, in denen wir Schritt für Schritt zwei große moderne Projekte erstellen auf dem Float-System – damit Sie alte Projekte unterstützen können und natürlich auf dem GRID-CSS-System, mit dem Sie Layouts von unglaublicher Komplexität erstellen können.
Und natürlich werden Sie sich nicht schämen, diese Projekte Ihren potenziellen Kunden oder zukünftigen Arbeitgebern zu zeigen.
Ich bin immer in Kontakt!
Und seien Sie versichert, Sie werden nicht alleine gelassen, denn nach jeder kleinen Lektion haben Sie die Möglichkeit, Ihren Code mit meinem zu vergleichen oder einfach eine Frage zu stellen; die Antworten lassen normalerweise nicht lange auf sich warten.
Geld-Zurück-Garantie!
Und wenn Sie immer noch Zweifel haben, bietet dieser Kurs die Möglichkeit, das dafür ausgegebene Geld innerhalb von 30 Tagen zurückzuerstatten, wenn Ihnen der Kurs nicht gefällt.
Kommen Sie zu mir und gemeinsam lernen wir, wie Sie professionelle, moderne Websites erstellen.
Wir sehen uns in der Klasse!
9
KurseSeit 2016 erstelle ich originelle Online-Kurse. Ich unterrichte professionell die Arbeit mit Adobe-Grafikeditoren, unterrichte Design und Webentwicklung.
Hallo! Ich heiße Dima! Ich möchte nicht prahlen, aber ich muss) Ich habe mehr als 5.000 Studenten auf der ganzen Welt in meinen proprietären Online-Kursen unterrichtet. Über 2.000 echte Bewertungen mit einer durchschnittlichen Bewertung von 4,83 von 5,00! Ich unterrichte Webdesign, Webentwicklung und die nötige Software (Photoshop Illustrator, Figma). Meine Lehrerfahrung besteht aus 5 Jahren freiberuflicher Nachhilfetätigkeit sowie dem Unterrichten in Online-Schulen und -Kursen auf globalen Fernlernplattformen. Die Studierenden meiner Kurse bemerken meine besten Qualitäten in der Art und Weise, wie ich den Stoff ohne Überfüllung, auf unterhaltsame und interessante Weise präsentiere.
Vorbereitung / Wiederholung / Erste Animationen
1. Hallo!) Laden Sie Materialien für den Kurs herunter
2. Installieren und konfigurieren Sie die erforderliche Software
3. Neue Eigenschaft Clip-Pfad. Wir beginnen mit der Erstellung des ersten Abschnitts der Website
4. Wenn die Scout-App bei Ihnen nicht funktioniert
5. Übung: Erstellen Sie Ihre Form mit Clip-path
6. Elemente mithilfe der absoluten Positionierung vertikal ausrichten
7. Lernen Sie @KeyFrames kennen. Lassen Sie uns die erste Animation erstellen.
8. Sichtbarkeit der Rückseite und Erstellen von Schaltflächen durch Pseudoklassen
9. Animieren einer Schaltfläche mithilfe von Pseudoelementen
10. Animationsfüllmodus. Starten einer Animation von einem bestimmten Punkt aus.
11. 3 Prinzipien der Webentwicklung
12. Verwenden Sie REM anstelle von PX
Git und GitHub
1. Worum geht es in diesem Block?
2. Grundlegende Befehle im Terminal
3. So bearbeiten Sie Dateien über das Terminal
4. Installieren Sie das Git-System auf unserem Computer
5. So führen Sie Git in einem bestimmten Projekt aus
6. Erstellen des ersten Commits
7. Einreichen eines Projekts an GitHub
8. Wenn beim Einreichen Ihres Projekts an GitHub ein Fehler auftritt
9. Anmeldefehler beim Versuch, ein Projekt auf GitHub zu übertragen
10. Übung: Erstellen Sie Ihr eigenes Repository
11. So löschen Sie ein GitHub-Repository
12. So laden Sie Repositorys von GitHub herunter
13. Wir emulieren die Arbeit von zwei Entwicklern an einem Repository
14. So zeigen Sie Informationen zu Commits im Terminal an. Git-Protokoll
15. Was sind Zweige?
16. So erstellen und navigieren Sie Zweige.
17. Wir schließen die Lücke vom Beginn des Minikurses mit den Notationen -u und -M
18. Nicht gespeicherter Commit-Fehler beim Auschecken
19. So übertragen Sie erstellte Änderungen in einen neuen Zweig
20. So verschieben Sie mehrere Commits in einen neuen Zweig
21. Was ist der Zustand des abgetrennten Kopfes? Freistehender KOPF
22. So stellen Sie eine bestimmte Datei aus einem vorherigen Commit wieder her
23. Erweitertes Git-Protokoll und Git-Show
24. So führen Sie Zweige mit Git Merge zusammen. Fast-Forward-Methode
25. So löschen Sie Zweige
26. So entfernen Sie Verzeichnisdateien aus dem nicht verfolgten Zustand
27. Git-Reset – hart. So führen Sie ein Hard-Rollback eines Commits durch
28. Zweite Möglichkeit, mit ORIG_HEAD einen feststeckenden Commit zu finden
29. Git-Reset --soft
30. Git commit --amend Ändert den Kommentar eines vorherigen Commits
31. Git-Reset – gemischt
32. Unterschied zwischen Git Reset und Git Restore
33. Einführung in Git Diff. Drucken der Differenz mehrerer Commits auf der Konsole
34. Praktisches Beispiel für die Verwendung von Git Diff
35. So zeigen Sie das Verzweigungsdiagramm im Terminal an. Git log --graph
36. Wir führen Zweige mit Git Merge zusammen. Methode „True Fusion“
37. So führen Sie nach einer Zusammenführung ein Rollback durch
38. So kopieren Sie ein bestimmtes Commit mit Git Cherry-Pick
39. Zweige mit Git Rebase zusammenführen
40. Was ist besser: Git Rebase oder Git Merge?
41. So verwenden Sie die .gitignore-Datei
42. Letztes Wort
Erweitertes Layout – CSS/SASS
1. Worum geht es in diesem Block?
2. So funktionieren SASS-Variablen
3. Wie Mixins funktionieren
4. So fügen Sie Argumente zu Mixins hinzu
5. Was sind SASS-Vorlagen?
6. So funktionieren SASS-Funktionen
7. Organisieren von SASS-Dateien für ein großes Projekt
8. 3 Möglichkeiten, Elemente zu positionieren
9. Wie funktioniert Float?
10. Wir schaffen unser eigenes Gittersystem
11. Anwenden eines Farbverlaufs auf Text. Hintergrund-Clip
12. So erstellen Sie Symbole mit HTML
13. Animieren und Fertigstellen des zweiten Abschnitts
14. So erstellen Sie Ihre eigenen Symbolschriftarten
15. Wir verwenden die Eigenschaft perspective, um die Perspektive der Elemente widerzuspiegeln
16. So funktioniert der Mischmodus in CSS
17. Beenden Sie den Abschnitt mit Karten
18. So runden Sie Text mit der Eigenschaft „shape-outside“ ab
19. So funktionieren CSS-Filter
20. So fügen Sie einer Seite ein Video hinzu
21. Kennenlernen des Formular-Tags und seines Inhalts
22. Animieren des Formulars
23. Erstellen Sie Ihr eigenes Optionsfeld mit CSS
24. Erstellen einer Website-Fußzeile
25. Erstellen eines Navigationsmenüs mit reinem CSS Teil-1
26. Einrichten von Animationsgeschwindigkeitsübergängen mithilfe von Kubikbezier
27. Einen Hamburger animieren
Adaptives Design
1. Worum geht es in diesem Block?
2. So erstellen Sie responsive Websites
3. Erstellen eines Mixins mit Medienregeln
4. Anpassung des Projektteils 1
5. Anpassung des Projektteils 2
6. Anpassung des Projektteils 3
7. Was sind responsive Bilder?
8. So passen Sie Bilder in HTML an
9. Lassen Sie uns HTML-Bilder in unserem Projekt anpassen
10. Anpassung von CSS-Bildern
11. Ein paar letzte Änderungen an der Website
Knotenpaketmanager
1. Worum geht es in diesem Block?
2. Was ist node.js und npm
3. Vorbereiten des ersten npm-Pakets für die Verwendung
4. Starten des ersten npm-Pakets
5. Verwendung von Gulp in unserem Projekt
6. So öffnen Sie eine Website auf einem Mobiltelefon
Einführung in CSS GRID
1. Worum geht es in diesem Block?
2. Vorbereitung
3. So erstellen Sie eine Rastervorlage. Rastervorlage
4. Wie FR-Einheiten funktionieren
5. So verschieben Sie ein Element in eine andere Zelle
6. Platzieren mehrerer Elemente in einer Zelle
7. Übung: Erstellen Sie ein Website-Layout
8. Beispiel eines Lehrers. Erstellen Sie ein Layout
9. So benennen Sie jede Zeile in einem Raster um
10. So erstellen Sie eine Rastervorlage mithilfe eines Benennungsschemas
11. Was sind explizite und implizite Gitter?
12. So richten Sie Elemente innerhalb von Zellen aus
13. So richten Sie ein Gitter in einem Container aus
14. Min-Max-Inhalt
15. Automatisches Ausfüllen und automatische Anpassung. Zellengrößen basierend auf Inhalt
16. Abschluss. Gittergarten
GRID CSS-Projekt
1. Worum geht es in diesem Block?
2. Vorbereitung
3. Erstellen Sie eine Rastervorlage Teil 1
4. Erstellen Sie eine Rastervorlage Teil 2
5. Wie SVG-Sprites funktionieren
6. Wir stellen den zweiten Abschnitt der Website fertig
7. Erstellen des Abschnitts „Banner“, Teil 1
8. Erstellen des Abschnitts „Banner“, Teil 2
9. Einen Abschnitt mit Karten erstellen
10. Eine Galerie erstellen
11. Fußzeile erstellen
12. „Hamburger“ zubereiten
13. Header Teil 1 erstellen
14. Header Teil 2 erstellen
15. Wir passen die Seite an
Wir sehen uns wieder!
1. Auf Wiedersehen!
Holen Sie sich Ihr Zertifikat
1. Test zur Erlangung eines Abschlusszertifikats