0
Ansichten
Grundlagen des modernen Layouts – kostenloser Kurs von Hexlet, Schulung 9 Stunden, Datum: 5. Dezember 2023.
Verschiedenes / / December 06, 2023
Sie erfahren mehr über HTML-Markup und die Möglichkeiten des modernen HTML5-Standards. Darüber hinaus erwerben Sie Grundkenntnisse im Stil mit CSS: Erfahren Sie, wie Sie Stile verbinden, Selektoren verwenden und mit Kaskadierung arbeiten. Zusätzlich zu HTML und CSS lernen Sie, mit den integrierten Layout-Debugging-Tools des Browsers zu arbeiten, insbesondere mit den Google Chrome DevTools. Dadurch lernen Sie, wie Sie die HTML-Auszeichnungssprache zum Layouten von Text auf einer Website verwenden und machen sich außerdem mit den Grundregeln für die Verwendung von CSS und Textstil vertraut.
Sie können Ihre neuen Fähigkeiten sofort in die Praxis umsetzen – wir erlernen dafür Layout-Editoren und Plugins. Am Ende jeder Lektion finden Sie kleine eigenständige Aufgaben. Sie zielen auf ein praktischeres Verständnis des behandelten Themas ab und werden daher zur Umsetzung dringend empfohlen.
Die Grundlagen des Layouts werden Ihnen nützlich sein, wenn Sie sich für ein Studium der Webentwicklung entscheiden, unabhängig von der Richtung. Das Wissen aus diesem Kurs hilft Programmierern, Daten zu markieren und auf der Website anzuzeigen. Dieser Kurs eignet sich für Anfänger und Entwickler, die noch keine Erfahrung damit haben
Einführung
Der Kurs „Grundlagen des modernen Layouts“ ist die Grundlage für das Erlernen der Grundlagen des HTML- und CSS-Website-Layouts. In dieser Lektion sprechen wir kurz darüber, was wir im Kurs lernen und wie dieses Wissen in der Praxis angewendet werden kann.
Einführung in HTML
Die Lektion ist dem HTML-Layout von Grund auf gewidmet. Wir sprechen über die Rolle von Attributen und untersuchen das allgemeine Schema zur Beschreibung von HTML-Tags.
Blockmodell
Welche Elemente sind für den Rahmen der Seite verantwortlich und welche helfen bei der Gestaltung oder dem Hinzufügen funktionaler Teile? Machen wir uns mit Block- und Inline-HTML-Elementen vertraut und untersuchen den Einfluss von Stilen auf die endgültige Breite von Elementen.
Semantisches HTML
Das Hauptziel jedes HTML-Layouts besteht darin, die Bedeutung der Blöcke zu vermitteln. In dieser Lektion erkunden wir die Semantikfunktionen des neuesten HTML5-Standards und lernen die Barrierefreiheit im Internet kennen.
Grundstruktur eines HTML-Dokuments
Jedes HTML-Dokument hat eine Grundstruktur, die aus Tags und Serviceelementen besteht. Der Browser benötigt sie, um Informationen korrekt anzuzeigen. In dieser Lektion werden wir uns jede Zeile dieser Struktur ansehen.
CSS-Grundlagen
Die CSS-Sprache wurde für die visuelle Gestaltung einer Webseite erstellt. Wir studieren die grundlegenden Fähigkeiten der Sprache und finden heraus, wie man sie zusammen mit HTML verwendet. Wir lernen, CSS-Dateien einzubinden und machen uns mit den Grundtypen von Selektoren vertraut.
Kaskadierung in CSS
Was ist Kaskadierung und wie funktioniert sie in CSS? Die Lektion ist den Unterschieden in den Selektorprioritäten und der Möglichkeit gewidmet, diese in Ihren Projekten zu nutzen.
Chrome DevTools
Bei der Gestaltung einer Website ist es wichtig, Fehler rechtzeitig zu finden oder zu verstehen, wie man den benötigten Block richtig umwandelt. Bisher erfolgte dies überwiegend per Hand. Heutzutage verfügen moderne Browser über eine Web-Inspector-Funktion. Betrachten wir die Fähigkeiten eines davon – Chrome DevTools.
Code-Editoren
Um Ihre Arbeit zu speichern, benötigen Sie einen Code-Editor. In dieser Lektion schauen wir uns an, wie man Visual Studio Code installiert. Dabei handelt es sich um ein leistungsstarkes Tool, das nicht nur für das Layout, sondern auch für die Programmierung in jeder beliebigen Sprache verwendet werden kann.
Emmet
Schauen wir uns eines der nützlichsten Plugins für Layout-Designer an: Emmet. Dadurch wird die HTML-Code-Markierung beschleunigt und die meisten Routineschritte entfallen.
Veröffentlichung im Internet
Um ein Projekt ins Internet zu stellen, müssen Sie Hosting verwenden – einen speziellen Server, der Dateien speichert und über einen Domänennamen den Zugriff darauf ermöglicht. In diesem Tutorial schauen wir uns das kostenlose GitHub-Hosting an.
Grafikeditor
Es gibt mehrere große Editoren auf dem Markt. Einige von ihnen sind nur für ein Betriebssystem spezifisch, andere können auf jedem von ihnen installiert werden. Schauen wir uns in diesem Abschnitt die wichtigsten Schritte an, wenn ein Layoutdesigner mit dem Figma-Online-Editor arbeitet.
Selbstständige Arbeit
Zusätzliche Aufgaben, die es Ihnen ermöglichen, die erworbene Theorie zu festigen
Zusätzliche Materialien
Vom Hexlet-Team kuratierte Artikel und Videos. Wird Ihnen helfen, tiefer in das Thema des Kurses einzutauchen
Abonnieren
YOU MIGHT ALSO LIKE