Mit meiner Challenge bin ich nicht so weit wie ich gerne wäre aber dafür habe tatsächlich durchgehalten und 16 Posts geschrieben und veröffentlicht. Nicht immer am selben Tag sondern meistens spät Nachts oder am frühen Morgen. Für mich ist es eine super Übung dran zu bleiben und durchzuhalten, Tag für Tag.
Vorgehen bei den Übungsaufgaben
Das erste Video zu diesem Projekt habe ich mir erst komplett angeschaut und danach das Top-Menü nachgebaut, korrigiert und ausprobiert. Ich bin immer wieder zwischen Video, der HTML-Seite und dem CSS-Stylesheet hin und her gesprungen um zu vergleichen oder zu verbessern.
Beim zweiten Video habe ich alles gleich nachgemacht, um voran zu kommen.Dadurch wurde ich um einiges schneller .
Der BBC Clone
heute bin ich so gut voran gekommen, dass mir Zeit bleibt das Video nochmal anzuschauen.
Um das Originalmenü nachzubauen, hangeln wir uns von links nach rechts den Menüs entlang. Zuerst schaue ich das Menü auf der Originalseite an. Um was handelt es sich? Ist es eine Schrift? Ein Bild oder ein Link? Für jedes Element wird in ein <Anfangstag>Inhalt</Endtag> (Schematischer Aufbau eines HTML-Tags) gesetzt.
HTML Dokumente verwenden <tags> um Browsern mitzuteilen wie sie unseren Inhalt (content) darstellen sollen.
<tags>
<h1> bis <h6> Überschriften und Unterüberschriften: Je größer die Zahl desto kleiner die Schrift!
<h1>Ich bin die Hauptüberschrift</h1>
<h2>Ich bin die Sub-Überschrift</h2>
<h6>Ich bin die Kleinste</h6>
Damit Seitenbesucher Informationen jeder Art eingeben können wird das <input> Tag verwendet.
Am häufigsten wird dieses Tag wahrscheinlich zur Eingabe von „Adressdaten“ verwendet. Damit die Dateneingabe bestätigt werden kann erstellt das „submit“ Tag einen Bestätigungs-Button.
<input type="email" placeholder="Deine Emailadresse"> <input type="submit">
Tags können Erweiterungen enthalten, die Attribute. Attribute teilen dem Tag mit was es genau tun soll!
<Anfangstag Attribut="wert"> Inhalt</Endtag>
Das Tag um eine Pizza zu beschreiben könnte so aussehen:
<pizza size="groß" kruste="dünn" type="pepperoni">
Ich verwende CSS und HTML immer noch in einer Seite deshalb bin ich ständig am nach oben und unten scrollen. Sehr Lästig!
Ganz klar, ein extra Dokument für CSS wird das arbeiten übersichtlich machen. Wie das genau geht erklärt Rob hoffentlich in einem der nächsten Videos.
CSS gibt HTML Format!
Was mir besonders gefällt ist, dass Rob viel ausprobiert und mit der Pixelanzahl bei Höhe und Größe spielt. Noch etwas padding hier oder margin dort? Sieht das Ergebnis mit position oder mit margin-top besser aus? Das animiert zum selber ausprobieren. Bis hierher bin ich sehr zufrieden.
CSS-Code Darstellung: Selektor { Eigenschaft: Wert }
Hilfreiche Webseiten
Eine Dokumentation und auch Tutorials findest du unter w3schools.com in englischer Sprache und in deutscher Sprache unter selfhtml.org
Lernen auf Englisch
HTML und CSS auf englisch zu lernen hat den Vorteil, dass du die Tags, Attribute und Selektoren gleich in der Sprache lernst in der du sie anwenden wirst. Der Code wird auf englisch geschrieben. Die Erklärungen und Beispiele sind viel einfacher gehalten. Auf deutsch wird vieles umständlich.
Leider gibt es bei Udemy auf deutsch zur Zeit keine kostenlosen Kurse für HTML5 und CSS3. Wer mit englisch kein Problem hat wird aber auf jeden Fall fündig. Schreibe dich einfach in die Kurse ein. Probiere aus ob dir die Stimme und Sprechweise des Tutors zusagt. Auch die Darstellungsart und der Inhalt der Lehrvideos ist sehr unterschiedlich.
Kostenloser Online-Kurs auf englisch
Wer sich nicht bei Udemy anmelden will kann bei codecademy.com durchstarten. Einfach eine Emailadress angeben und Passwort festlegen dann kann es losgehen.
stackovrflow
Happy Coding
