Während wir uns unser Photoshop-Mockup ansehen, beginnen wir mit dem Schreiben von HTML, um zu beschreiben, was wir sehen. Wir verwenden natürlich HTML5, wann immer es sinnvoll ist, um so semantisch wie möglich zu bleiben. Zum Beispiel verwenden wir das <time>-Element für das Veröffentlichungsdatum des <article>, weil das, wie Sie wissen, schlau und semantisch ist.
Wir streifen Zen Coding ein wenig und springen zu CodePen, da es diese Funktion integriert hat. Außerdem ist Command-Klicken in Sublime Text 2 großartig.
Wir verwenden (derzeit) HTML-Kommentare, um schließende Tags zu kennzeichnen, die weit von ihrem öffnenden Gegenstück entfernt sind. z.B.
<div class='page-wrap'>
... lots of space
<div><!-- END div.page-wrap -->Für unsere Titel verwenden wir einige echte Titel von der Live-Website, sodass wir mit echten Inhalten arbeiten.
Ich bekomme diese Fehlermeldung
„Kein Video mit unterstütztem Format oder MIME-Typ gefunden“
Hallo Chris, wie bekommst du Chrome automatisch aktualisiert? Browser-Addon oder spezielle Sublime-Aktion?
Mir gefällt die Art, wie du das aktive Menüelement über die Body-Klasse einstellst.
CodeKit
Einige der Videos stürzen immer wieder ab und stoppen :((
Und ich kann das Video auch nicht herunterladen.
Versuchen Sie, die Seite zu aktualisieren und auf die Schaltfläche „Video-Datei herunterladen“ zu klicken. Andernfalls können Sie Probleme direkt an mich unter [email protected] melden.
Ich werde das hier begraben, um die Kommentar-Threads direkt auf den Inhalt zu beschränken.
Es gibt ein ST2-Paket namens „AutoFileName“ (https://github.com/BoundInCode/AutoFileName), das den Dateinamen für Sie automatisch vervollständigt ... sehr praktisch
Chris, benutzt du die Apple-Tastatur, die mit den Macs kommt, die du benutzt? Hast du jemals erwogen, eine Tastatur von Drittanbietern zu kaufen? Die Anzahl der Tippfehler, die ich im Laufe der Jahre in deinen Screencasts gesehen habe, ist unglaublich! ;)
Ich benutze die Microsoft Ergonomic Keyboard, da ich RSI-Probleme habe.
Ich mache sicher viele Tippfehler. Ein Teil davon mag an den Screencasts liegen (der Druck ist hoch!). Findest du das sehr ablenkend? Wenn du raten müsstest, glaubst du, dass du mehr oder weniger Tippfehler machst, wenn du entwickelst?
Ah, ich bin nicht fremd bei RSI-Problemen, aber zum Glück waren keine davon langwierig. Offensichtlich muss man bei solchen Dingen vorsichtig sein, besonders wenn man auch Musikinstrumente spielt!
Ich finde es überhaupt nicht ablenkend – außer wenn man ein $-Symbol bei einer Variablen vergisst und ein paar Minuten damit verbringt, herauszufinden, was das Problem ist, aber das ist ein Fehler, den wir alle von Zeit zu Zeit machen. Es ist tatsächlich humorvoll ärgerlich, wenn so etwas während eines Screencasts passiert!
Ich würde sagen, ich mache deutlich weniger Tippfehler beim Programmieren, aber ich hatte schon Situationen, in denen ich viele gemacht habe und eine andere Tastatur sehr geholfen hat. Ich stand jedoch nicht unter dem Druck – wie Sie sagen – gleichzeitig zu sprechen und einen Screencast aufzunehmen.
Hallo Chris,
Es gibt einen coolen Trick in Zen Coding, mit dem du durch einen ganzen Abschnitt von Navigationslinks tabulieren kannst, um den Ankertext einzugeben. Funktioniert vielleicht auch mit Klassennamen. Anstatt also den Cursor zu bewegen oder zu klicken, um „home“, „snippets“ usw. einzugeben… drückst du einfach Tab und tippst… Tab und tippst… ziemlich cool und ich finde es sehr nützlich.
Gibt es einen Grund, warum du CSS-Tricks nicht in ein h1 gewrapt hast oder die Hauptnavigation in einer ul hattest?
Ich spare mir das h1-Tag für Artikelüberschriften auf. Ich denke, in einer perfekten Welt hätte ich es auf der Homepage ein h1-Tag ausgeben lassen, aber auf jeder anderen Seite nur einen Link. Dann irgendwie so gestalten, dass es optisch keinen Unterschied macht.
Ich kenne einen Typen, der tatsächlich Screenreader benutzt und sagt, dass die Navigation in Listen tatsächlich schlechter ist.
In der SEO-Welt ist das H1-Tag wie eine religiöse Debatte. Ich denke, es ist zumindest erwähnenswert, dass H1s immer noch als ein geringer Rankingfaktor für Suchmaschinen angesehen werden. Offensichtlich kann CSS-Tricks bei SEO alles tun, aber wenn Sie eine brandneue Website erstellen, lohnt es sich, darüber nachzudenken, wie Sie H1-Tags verwenden.
Chris hat hier eine gute Wahl getroffen, H1s für Artikelüberschriften zu reservieren. Es ist semantisch sinnvoll und hilft Google auch, den Inhalt besser zu verstehen. Wenn jede Seite eine H1 von „CSS-Tricks“ hätte, wäre zwar technisch gesehen jede Seite ein „CSS-Trick“, aber das hilft niemandem, weder Mensch noch Maschine.
Aber ich widerspreche mir hier auch und sage, in Bezug auf SEO, es spielt wirklich keine Rolle. Ich habe Leute in der SEO-Welt gesehen, die Kunden dazu gebracht haben, jeder Seite eine einzigartige, mit Schlüsselwörtern gefüllte H1-Überschrift zu geben, und das hat mich zum Weinen gebracht. Die Auswirkung ist sehr gering.
Sie haben Recht, dass es wie eine religiöse Debatte ist, und wie bei religiösen Debatten gibt es zu viele Leute mit absolutistischen Positionen. Semantisch wäre es wahrscheinlich sinnvoll, CSS Tricks auf der Homepage als h1 zu haben, da die Funktion der Homepage im Wesentlichen die Einleitung zur Website ist.
Ich muss zugeben, ich finde es seltsam, dass auf der Titelseite von CSS Tricks kein h1 vorhanden ist, obwohl es praktisch absolut keine Konsequenzen hat.
Hallo Chris – ich lese in letzter Zeit, dass alle Section-Tags eine h1 als Teil der HTML5-Seitenstruktur enthalten müssen. Ich habe bemerkt, dass Sie das hier nicht tun. Ich frage mich nur, was Ihre Gedanken dazu sind. Es ist einer der verwirrendsten Aspekte von HTML5.
Okay… ich werde hier korrigiert werden… aber ist nicht einer der Hauptvorteile der Verwendung eines HTML5-Doctype, dass wir Zugang zu fortgeschritteneren Dokumentengliederungstechniken erhalten? Ich dachte, die Oberseite des Dokuments sollte ein h1 sein… und dann können jede Sektion und jeder Artikel auch wieder eine h1-Überschrift haben, da sie als neue Abschnitte gelten… damit eine ordnungsgemäße Gliederung beibehalten wird… Das heißt, wenn Sie Ihr Dokument durch einen Gliederer laufen lassen würden, wäre Ihre oberste h1-Überschrift korrekt und dann wären Ihre h1-Überschriften innerhalb von Sektionen und Artikeln Unterüberschriften und Unter-Unterüberschriften des Dokuments, aber sie wären immer noch Hauptüberschriften ihrer jeweiligen Sektion oder ihres Artikels.
Hallo Chris,
Ich habe eine sehr unschuldige und vielleicht sogar dumme Frage, aber da sie mich immer wieder beschäftigt, muss ich sie stellen…
Ich habe bemerkt, dass du das class-Attribut fast immer benutzt, wenn du divs verwendest. Ich bin extra zu diesem ersten HTML-Video zurückgekehrt, um das noch einmal zu sehen & sicher zu sein.
Was verpasse ich? Warum div class=”logo” und nicht id? Planst du, noch eine „logo“-Klasse woanders im Dokument zu haben?
danke
Hier ist etwas, das du darüber lesen kannst.
Danke für die Erwähnung der ST2-Tastenkombination Cmd+Opt+Punkt zum Schließen eines Tags (ungefähr bei 12:05)! Ich habe mich gefragt.
Wenn ich jetzt nur noch herausfinden könnte, wie man den Begleiter eines öffnenden oder schließenden Tags hervorhebt (und/oder zu ihm springt); das würde mir viel Scrollen und Fluchen ersparen. Irgendwelche Ideen?
Ich genieße diese Serie, auch wenn ich spät zur Lodge komme.