Schnelleres Schreiben von Code mit Emmet

1. Code schreiben: Hallo an alle. Ich freue mich sehr, heute mit dir über Emmet zu reden. Mein Name ist Sandra. Ich bin Digital Designer und arbeite sowohl an Print als auch an Webprojekten. Mein Ziel ist es, mit Ihnen die besten Praktiken zu teilen, die ich auf dem Weg gelernt habe Emmet ist einer meiner Top-Tipp, wenn es darum geht, Code zu lernen. In dieser Klasse werde ich Ihnen zeigen, wie Sie Emmet verwenden, damit Sie es dann für sich selbst verwenden und viel effizientere Programmierer werden können . Emmet ist wirklich nützlich. So nützlich, das ist die meisten modernen Web-Editoren ermöglicht es Ihnen, es zu verwenden? Für diese Klasse habe ich die Plattform verwendet, die ich fast täglich verwende, und sie heißt Code-Stift. Aber zögern Sie nicht, den Web-Editor zu verwenden, mit dem Sie sich wohler fühlen. Diese Klasse richtet sich an Personen, die bereits Grundkenntnisse über HTML haben und es ist für Leute, die mehr darüber erfahren möchten, wie man die Codierung optimiert. Wenn das für Sie ist, legen Sie den Kessel an und beginnen wir. 2. Was ist Emmet: Beginnen wir also mit dem Prinzip von Emmet. Wenn Sie beispielsweise einen Absatz in HTML erstellen möchten, erstellen Sie ein öffnendes Tag für den Absatz und dann ein schließendes Tag für den Absatz. Also, das ist, was Sie tippen werden. Dann hätten Sie einen Absatz erstellt. Mit Emmets können Sie es viel einfacher machen. Das einzige, was Sie Emmet sagen müssen, ist, Sie einen Absatz wollen und dann wird es automatisch das Öffnen und das schließende Tag generieren , indem Sie einfach die Tabulatortaste drücken. Also lasst es uns versuchen. Ich tippe P ein und klicke dann auf Tab. Dann haben wir das öffnende und das schließende Tag für den Absatz. Sie können dies mit allen Tags tun, die in HTML verfügbar sind. Sie können dies für die Spanne tun, Sie können dies mit Überschrift tun. Sie können dies mit einem div tun, oder Sie können dies mit einer Tabelle oder irgendetwas tun. Es wird genau das gleiche funktionieren. Sie sehen also, dass es sehr einfach ist, aber es hat viel Potenzial, um Ihnen zu helfen, Ihre Codierung zu beschleunigen. 3. Geschwister: Wenn ich Geschwister sage, bedeutet das Tags, die sich auf der gleichen Ebene befinden. Es ist ein Tag gefolgt von einem anderen Tag gefolgt von einem anderen Tag. Sagen Sie, wenn Sie eine Überschrift H1 gefolgt von einem Absatz haben, gefolgt von einer Tabelle sind sie alle auf der gleichen Ebene und sie sind Geschwister. Sagen Sie zum Beispiel, wenn Sie eine Kopfzeile H1 haben und dann einen Absatz möchten, gibt es verschiedene Möglichkeiten, dies zu tun. Sie könnten H1 tun und dann drücken Sie die Tabulatortaste und Sie haben Ihre H1 erstellt. Gehen Sie dann am Ende der Zeile, drücken Sie B, und drücken Sie dann die Tabulatortaste und dann haben Sie Ihre Überschrift eins und Ihren Absatz. Es gab nicht viel Eingabe dort, weil ich am Ende meines schließenden Tags von H1 gehen musste , um mein nächstes Tag zu erstellen. Sie müssen nur H1 plus P tun und dann drücken Sie die Tabulatortaste, und dann wurde für Sie das H1 gefolgt von dem P-Tag erstellt. Das sind die Geschwister. 4. Nesting: Wenn ich Verschachtelung sage, meine ich ein Element, das in einem Element eingeschlossen ist. Sagen Sie, wenn Sie einen Absatz haben und innerhalb des Absatzes eine Spanne haben. Dann wird die Spanne innerhalb des Absatzes verschachtelt. Der Absatz ist das übergeordnete, daher ist die Spanne das untergeordnete Element. Wenn Sie beispielsweise einen Absatz und innerhalb des Absatzes haben, haben Sie eine Spanne. Das ist eine Verschachtelung. Dafür verwenden Sie mit Emmet das Größer-als-Zeichen. Schauen wir uns mal an. Sie haben Ihren Absatz und möchten dann innerhalb eines Absatzes eine Spanne. Wir tun p größer als und dann geben Sie span. Sie drücken „Enter“ und dort haben Sie es. Sie haben Ihre Spanne, die in Ihrem Absatz eingeschlossen ist. 5. Gruppierung: Jetzt wissen wir, wie man die Geschwister macht, wir wissen, wie man die Verschachtelung macht. Also lasst uns versuchen, diese zusammen zu gruppieren. Wenn ich eine Überschrift hätte und dann wollte ich , dass ihr ein Absatz folgt, der eine Spanne darin hat. Was Sie tun würden, ist h1, und dann ist der Absatz ein Geschwister p. Innerhalb des Absatzes, also tun Sie die Größer-als, Sie tun die Spanne. Sie drücken Tabulatortaste. Jetzt haben Sie Ihre Überschrift mit dem Absatz. Innerhalb des Absatzes haben Sie die Spanne. Stellen Sie sich nun vor, Sie wollten sich innerhalb der h1 erstrecken, und dann wollten Sie den Absatz danach, also tun Sie h1 und innerhalb der h1 wollen Sie Ihre Spanne. Sie möchten Ihren Absatz als Geschwister, also tun Sie plus p. Sie drücken die Tabulatortaste. Jetzt können Sie sehen, dass Ihr Absatz in Ihre Überschrift eingefügt wurde. Dies liegt an der Gruppierung. Was ML tut, ist, dass die Spanne und die p auf der gleichen Ebene sind und beide untergeordnete Elemente der Überschrift eins sind. Was Sie tun müssen, ist, sich zu gruppieren. In diesem Fall möchte ich Klammern zwischen meine h1 und die Spanne setzen und ich möchte, dass die h1 und der Absatz auf der gleichen Ebene liegen, also sind sie Geschwister. Nun, da ich meine Klammern in ich drücke Tab, und jetzt können Sie sehen, dass meine Spannweite in meiner Überschrift eins ist, und dann folgt der Absatz. 6. Multiplizieren: Schauen wir uns die Situation an, in der wir zehn Absätze erstellen wollen. Also, was Sie tun können, ist, dass wir wissen, wie man Geschwister schafft. Also erschaffen wir Völker. Zehn ist ziemlich viel und sagen, wenn Sie 100 tun wollen, wäre das viel zu viel. Was Sie also verwenden müssen, sind die Multiplikationsfunktion Durchmesser. Und es ist wie in einem Taschenrechner, Sie müssen nur Stern auf Ihrem Bildschirm drücken. Also, wenn ich 10 Absätze wollte, würde ich p und dann den Stern setzen, und dann 10. Drücken Sie die Tabulatortaste, und jetzt habe ich 10 Absätze, die erstellt wurden. Es funktioniert auch mit den Gruppierungen. Also sagen, wenn ich einen Absatz habe und dann innerhalb des Absatzes möchte ich spannen, und ich gruppierte sie und sagen, wenn ich drei von denen wollte, Ich habe einfach Stern drei, und dann drücke ich Tab. Dann können Sie sehen, dass ich dreimal einen Absatz habe, und in jedem dieser Absätze habe ich eine Spanne. Also, wenn ich es jetzt ohne die Gruppierung tat und ich das p tat, und dann mit der Versuchsspanne mal drei, was es tun würde, ist drei Spannen innerhalb des Absatzes zu erstellen. Deshalb ist es wichtig, die Gruppierung zu verstehen wenn ein [unhörbar] verwendet wird. 7. Challenge 01: Jetzt ist es herausforderungszeit. Laden Sie die Herausforderung Nummer eins herunter. Wie wir uns den Drahtrahmen ansehen, den ich vorschlage, und versuchen, einen schnellen Weg zu finden , dieses Diagramm mit MS zu erstellen Also haben wir einen Header, und innerhalb der Kopfzeile Sie haben ein div und ein nav, innerhalb des div haben Sie eine Spanne, und in einem Navi haben Sie eine ungeordnete Liste und in dieser ungeordneten Liste haben Sie fünf LIs. Also haben wir den Header, einen Insider-Header, den Sie alle Ihre Kinder haben. Ich gehe nur zur Gruppe. Nur um es einfacher zu machen. Sie haben ein div und auf der gleichen Ebene, so ist es ein Geschwister. Sie haben nav getan. Jetzt innerhalb des div haben Sie die Spanne. Sie haben also innerhalb des div, das ein Kind ist, wird das Größer-als-Zeichen verwendet, wenn das span ist. Also lasst uns das zusammen gruppieren und dann innerhalb des nav, haben Sie eine ul und innerhalb der ul haben Sie fünf LI's. Lets gruppieren dies auch, drücken Sie Tab und Sie haben es, Sie haben Ihren Header und innen haben Sie Ihr div und dann die Spanne und dann das nav innen und dann innerhalb nav haben Sie ul mit all Ihren fünf LI's. Also werde ich dich jetzt ins Geheimnis lassen. Sie müssen keinen vollständigen Code erstellen und dann die Tabulatortaste drücken, damit alles geschrieben wird. Sie können es Schritt für Schritt tun, wenn Sie es einfacher finden, und ist dann leichter zu beheben, wenn irgendwo Probleme auftreten. Erstellen Sie zuerst einen Header und dann innerhalb der Kopfzeile haben Sie Ihr div und Ihr nav. Also div und nav. Innerhalb des div haben Sie eine Spanne. Innerhalb des nav, haben Sie eine ul, und in der ul, haben Sie fünf LI's. Es ist sehr wichtig, die Gruppierung und die Verschachtelung, et cetera zu verstehen. Aber Sie müssen keinen langen Satz erstellen, um dann Tab zu drücken und alles zu sehen, und denn wenn es irgendein Problem gibt, dann musst du wieder hineingehen und herausfinden, wo das Problem mit der Gruppierung irgendwo war oder anstatt ein Geschwister über sie von Verschachtelung oder solchen Dingen. So ist es einfach schneller, es Schritt für Schritt zu tun. Es ist nur gut, es zu wissen. All die verschiedenen Funktionen, die emittiert können zeigen und dann ist es nur eine Sache für Sie damit zu spielen und sich damit wohl zu fühlen und zu wissen, mit welcher Art Sie lieber arbeiten. 8. Kurse und ID: Jetzt, da wir das Prinzip von Emmet verstehen und wir wissen, wie Geschwister zu schaffen, Verschachtelung, Multiplikation. Werfen wir einen Blick auf andere Funktionen, die sehr nützlich sein könnten , wenn Sie Ihren Code schreiben. Eine nützliche Sache ist also, wie man eine Klasse hinzufügt und wie man einem Tag eine ID hinzufügt. Es ist also sehr einfach mit Emmet, es funktioniert wie CSS. Wenn Sie also einen Absatz haben und dieser Absatz eine Klasse namens MyClass haben soll. Sie müssen nur p sagen und dann Punkt für Klasse, wie in CSS und Auszeichnungen MyClass, und dann drücke ich „Tab“. Jetzt habe ich einen Absatz, der eine Klasse namens MyClass hat. Genauso, wenn Sie eine ID erstellen möchten, verwenden Sie auch dasselbe wie CSS und den Hash. Wenn Sie p haben und dann Hash und MyID haben, und drücken Sie dann „Tab“. Jetzt haben Sie einen Absatz , der einen Ausweis bekam, MyID. So können Sie es jetzt kombinieren. Sie haben also Ihren Absatz, der eine Klasse namens MyClass hat, und dann möchten Sie, dass er eine ID hat. Also setzen Sie einen Hash und dann MyID, und Sie drücken „Tab“. Dann haben Sie einen Absatz, der eine Klasse hat und eine ID hat. 9. Artikelnummerierung: Sie können auch mehrere Klassen haben, und dafür müssen Sie nur den Punkt und den Namen der zweiten Klasse hinzufügen, et cetera, bis Sie alle Namen Ihrer Klassen haben. Sie haben p Punkt Klasse eins, Punkt Klasse zwei, Punkt Klasse drei, und Sie drücken die Tabulatortaste. Und Sie können jetzt sehen, dass Sie einen Absatz haben, der mehrere Klassen hat. Es funktioniert auch mit dem Multiplikator. Wenn Sie drei Absätze haben, die eine Klasse namens „myclass“ haben, müssen Sie nur p dot myclass tun und dann mit drei multiplizieren, und dann drücken Sie die Tabulatortaste, und dann können Sie sehen, dass Sie drei Absätze haben, die eine Klasse namens „myclass“, was wirklich gut ist. Aber was, wenn Sie das mit dem Ausweis machen wollten? Offensichtlich würden Sie p haben und dann myID hash, und dann mal drei, und Sie drücken die Registerkarte, und dann würden Sie drei Absätze haben, aber das Problem gibt es, dass sie alle die gleiche ID haben, und offensichtlich wird eine ID angenommen eindeutig zu sein, sodass Sie nicht drei Elemente mit derselben ID haben können. Dazu benötigen Sie die Artikelnummerierung. Wenn Sie p haben, und dann haben Sie den Hash, und dann werde ich myID erstellen, und dann habe ich das $ Zeichen verwendet, und das $ Zeichen ist was? Ist die Artikelnummerierung. Und dann multipliziere ich es mit drei, und wenn ich Tab drücke, siehst du, dass du p ID, MyID eins, MyID zwei, MyID drei hast. Was Sie also getan haben, war, Sie sagten, ich möchte, dass alle meine Absätze eine ID haben, die dreimal mit MyID beginnt, und Sie werden von eins bis drei zählen. Die erste wird MyID eins sein, die zweite MyID zwei und die dritte wird MyID drei sein. Dies ist sehr nützlich, wenn Sie für jedes Mal einzigartige Inhalte möchten. 10. Attribute: Jetzt wissen wir, wie man eine Klasse hinzufügt, wir wissen, wie man eine ID hinzufügt, was wäre, wenn wir einem Tag andere Attribute zu einem Element hinzufügen wollten? Das ist sehr einfach mit MX. Was Sie verwenden müssen, ist die quadratische Klammer. Angenommen, Sie haben einen Absatz und innerhalb des Absatzes möchten Sie eine Formatvorlage einfügen. Also tun Sie P, und dann setzen Sie die eckigen Klammern und Sie tun Stil, Equal. Und dann öffnen Sie die Anführungszeichen. Und dann können Sie sagen „Farbe: blau“, zum Beispiel. Und dann gehst du am Ende, und du drückst die Tabulatortaste. Und jetzt haben Sie Ihren Absatz, der einen Stil hat, einen Inline-Stil. Die Schriftfarbe wird blau sein. Es gibt einige Elemente, die das Bild automatisch Attribute geben wird. Wenn Sie also nur mit einem Bild begonnen haben, wenn Sie die Tabulatortaste drücken, werden Sie sehen, dass das Bild automatisch die Quelle und das ALT-Tag in die Bildelemente einfügen würde . Ähnlich mit dem [unhörbaren] Anker. Wenn Sie A haben und dann die Tabulatortaste drücken, sehen Sie, dass die Href automatisch dort sein würde. Aber Sie können sofort an die Quelle schreiben. Zum Beispiel für das Bild. Also, wenn Sie das Bild haben und dann eckige Klammern verwenden, um die Attribute hinzuzufügen. Und dann setzen Sie Quelle gleich, dann setzen Sie „myimage.jpg“. Sie können dort auch mehrere Attribute hinzufügen. Sie müssen nur die Leertaste beim nächsten drücken. So könnten Sie zum Beispiel die Breite gleich 100 setzen. Und dann gehen Sie am Ende und drücken Sie die Tabulatortaste. Und Sie werden sehen, dass das Bild das Bild mit der Quelle und mit der Breite erstellt. Aber Sie werden das am alt-Tag sehen, weil es wichtig ist, das alt-Tag hinzuzufügen und Sie können sofort eingeben. Mein alternativer Text, der das Bild beschreiben würde. 11. Challenge 02: Jetzt ist eine weitere Herausforderungszeit. Ich lade Sie ein, die Challenge Nummer 2 herunterzuladen. Sie einen Blick auf den Drahtrahmen, versuchen Sie herauszufinden, wie es mit Ihrem Emmet zu tun und dann kommen Sie zurück und sehen, wie ich es angehen würde. Sie haben ein DIV, das zwei Klassen und eine ID hat. Innerhalb des DIV haben Sie drei Bilder, die Bild eins, Bild zwei und Bild drei genannt werden , und sie haben Attribute von Breite und Höhe. Lassen Sie uns damit beginnen, indem Sie Ihr DIV erstellen. Du hast dein DIV und es hat zwei Klassen, Punktklasse eins, also Punktklasse zwei. Es hat einen Ausweis namens meinen Ausweis. Wenn ich die Tabulatortaste drücke, habe ich mein DIV erstellt. Eine Sache, die interessant ist, ist, dass, wenn Sie eine leere Klasse erstellen, Emmet davon ausgehen wird, dass es sich um ein DIV handelt. Wenn ich Punktklasse eins, Punktklasse zwei und dann Hash, meine ID und ich Tabulatortaste setze, wird automatisch ein DIV erstellt. Also, das ist eine nette Sache zu wissen. Jetzt haben wir drei Bilder. Wir haben das Bild-Tag und dann haben wir Attribute darin. Ich habe die eckigen Klammern gesetzt und dann muss ich Quelle. Und es nennt sich Bild 123 JPEG. Ich werde einen Multiplikator verwenden. Die Artikelnummerierung wäre das $ Zeichen Punkt JPEG. Dann hat es eine Breite von 100 und eine Höhe von 100. Ich will drei von ihnen. Ich multipliziere mit drei und drücke Tab. Jetzt habe ich meine drei Bilder, die ich image1.jpeg nennen werde, zwei, drei Punkte JPEG. 12. Text nummerieren: Lassen Sie uns nun lernen, wie Sie Text hinzufügen, wenn Sie Code mit emmet erstellen. Nehmen wir an, Sie möchten einen Link erstellen, der nur „Klicken Sie mich“ sagt. Was Sie mit emmet tun müssen, ist die geschweiften Klammern zu verwenden. Sie haben Ihren Anker, Sie geben a ein, und dann haben Sie Ihre HREF, die Sie mit den Attributen verwenden können, die die eckigen Klammern sind. Wir haben HREF gleich, ich werde es vorerst leer legen. Sie wollen einige Texte, so dass Sie die geschweiften Klammern haben, und dann können Sie den Text eingeben, den Sie dort wollen, „Klicken Sie mich“ Ich drücke Tab. Jetzt haben Sie Ihren Anker, der einen Link dazu hat, und es hat einen Text in „Klicken Sie mich“. Der Text funktioniert auch mit Multiplikatoren. Wenn Sie beispielsweise eine ungeordnete Liste, Ihre UL und dann innerhalb der Liste hatten , haben Sie fünf Listenelemente. Es wird LI mal fünf sein und dann jedes dieser Elemente, Sie wollen, dass sie einen Text dazu haben. Ich werde einfach in Listenelement setzen. Ich gehe am Ende und drücke Tab. Versuchen wir es nochmal. Das Problem ist, dass ich plus so das Plus bedeutet, dass seine Geschwister, was bedeutet, dass die UL und LI die gleiche Ebene sind, aber wirklich möchte ich, dass das LI-Tag innerhalb der UL ist. Was wir wollen, ist das Nächste. Anstelle des Plus haben wir das Größer-als-Zeichen. Versuchen wir es nochmal. Drücken Sie die Registerkarte. Jetzt haben Sie Ihre Liste, und innerhalb der Liste hat jedes Listenelement das Textlistenelement. Nun, wenn Sie wollten, dass der Text anders ist und Listenelement eins, Listenelement zwei, Listenelement drei haben , ist es sehr einfach. Wir haben schon einmal gelernt, wie man es macht. Es ist mit der Artikelnummerierung. Gehen wir wieder hinein. Sie haben Listenelement, und dann können wir das $ Zeichen am Ende setzen und dann, wenn Sie Tab drücken, können Sie sehen, dass Sie Listenelement eins, Listenelement zwei, drei, vier und fünf haben . 13. Lorem Ipsum: Also, was ist, wenn Sie zufälligen Text generieren wollen? Der berühmte Lorem Ipsum. Emmet hat diese Funktion, bei der Sie dies tatsächlich verwenden können. Wenn Sie Ihren Absatz haben und dann innerhalb des Absatzes möchten Sie Ihren Lorem-Text. Sie drücken „Tab“ und dann haben Sie Ihren Absatz, und Sie haben einen kleinen Absatz mit etwas zufälligen Text in ihn erzeugt. Jetzt können Sie auch die Anzahl der Wörter steuern, die Sie setzen können. Also, sagen Sie, wenn Sie die Überschrift haben und Sie wollen nur ein paar Worte hinein. Alles, was Sie tun müssen, ist „H1", und dann wollen Sie Ihr „Lorem“. Und du willst drei Worte. Also, Sie tun „Lorem3", Sie drücken „Tab“, und jetzt haben Sie Ihre H1, die drei Wörter mit dem Lorem Ipsum Zufallstextgenerator hat . 14. Challenge 03: Das ist die letzte Herausforderung. Laden Sie die Challenge Nummer 3 herunter, schauen Sie sich die Art und Weise an, wie Sie es gestalten. Versuchen Sie, Emmet zu verwenden, um dies so schnell wie möglich für Ihren Rahmen zu erstellen und dann kommen Sie zurück und ich werde Ihnen zeigen, wie ich diese Herausforderung angehen würde. In dieser letzten Herausforderung haben Sie einen Header, der eine Klasse hat. In der Kopfzeile haben Sie ein div. In einem div haben Sie ein Bild, und dann auf der gleichen Ebene wie das div, haben Sie ein nav und darin haben Sie eine URL, die fünf Listenelemente enthält, LI's, die unterschiedliche Ideen und verschiedene fünf Wörter darin haben. Beginnen wir mit dem Hauptcontainer, der Ihr Header ist, dann Klasse eins, und Sie drücken die Registerkarte und Sie haben das. Jetzt werde ich mein div erstellen, in dem Sie ein Bild haben, das eine Quelle hat. Das nennt man Bild eins das JPEG, und es hat einen alten Stapel, der mein Bild genannt wird. Jetzt haben Sie ein div mit dem Bild im Inneren, und dann haben Sie Ihr nav. Und im Navi haben Sie Ihre ungeordnete Liste. Und dann haben Sie Ihre Listengegenstände mal fünf. Sie möchten, dass jedes dieser LIs eine ID hat, also setzen Sie Hash und dann nennen Sie es id-1, id-2 usw. Es wäre id und dann das Dollarzeichen, und dann möchten Sie in jedem dieser LI's einen Lorem-Text haben, der fünf ist Wort lang. Jetzt drücken Sie die Tabulatortaste und jetzt haben Sie Ihre Navigation mit Ihren Listen darin. Das hat verschiedene IDs eins, zwei, drei, vier und dann hat es fünf war in jedem dieser Listenelemente. 15. Vielen Dank!: Vielen Dank, dass Sie heute an dieser Klasse teilgenommen haben. Ich hoffe, es hat dir gefallen. Ich ermutige Sie wirklich, auf die Emmet Dokumentationswebsite zu gehen , um mehr herauszufinden, sobald Sie sich mit diesem Prozess vertraut machen. Wenn Sie Fragen haben oder wenn Sie irgendwelche Kommentare haben, zögern Sie nicht, mich zu kontaktieren, um mich wissen zu lassen und sehen Sie bald.