Wie lange um HTML zu lernen?

5 Antworten

Hallo, die wichtigsten Sachen die du brauchst, lernst du sehr schnell. Was wichtig zu beachten ist, lerne NICHT einfach nur trockene Syntax.

Mache dir immer Gedanken, was will ich erreichen? Dann kannst du im Internet, einem Buch oder sonst wo nachschauen wie es funktioniert. Du lernst es also einfach durch anwenden, sprich du musst sie nicht auswendig lernen ;)

HTML und CSS lernst du gleichzeitig. HTML gibt die Struktur an. CSS gibt vor, wie die Struktur "designed" ist.

Lass dich also von den Zahlen hier nicht einschüchtern. Du lernst alles auf dem Weg. Mein Tipp an dich ist, zuerst kleine Mini-Websites zu erstellen und zur Übung, Websites nachbauen. Mein Softwareentwicklungslehrer hat uns oft die Aufgabe gegeben, die Startseite eines Unternehmens möglichst genau nachzubauen. Damit lernst du neues und überprüfst dein Wissen.

Woher ich das weiß:Studium / Ausbildung – Fachzweig Betriebsinformatik an einer HTL
Wie lange um HTML zu lernen?

Für die Grundlagen brauchst du 8 Stunden. Für eine erste brauchbare Seite brauchst du 16 Stunden, um HTML perfekt zu verstehen etwa einen Monat (160 Stunden).

Und ist CSS genauso leicht?

Nein. Dafür verdreifachst oder vervierfachst du die o. g. Zeiten.

Alex


GuteFrageXY13  07.07.2023, 12:01

Was man beachten sollte, im Normalfall lernt man die Sprachen parallel und nicht einzeln. Außerdem braucht man sehr viele HTML Syntax nur in ganz speziellen Fällen und dann schaut man einfach kurz im Internet nach wie etwas bestimmtes funktioniert.

EinAlexander  07.07.2023, 12:08
@GuteFrageXY13
Außerdem braucht man sehr viele HTML Syntax nur in ganz speziellen Fällen

Dennoch muss man sie kennen. Denn wenn man die Existenz einzelner Elemente gar nicht kennt, kann man die auch nicht nachschlagen.

So gibt es z. B. immer noch massenhaft Autoren, die für ein Akkordeon zeitintensive Plugins und Bibliotheken laden anstatt einfach das Element <details> dafür zu verwenden.

GuteFrageXY13  07.07.2023, 12:11
@EinAlexander

Ich suche halt nicht nach konkreten Befehlen, sondern z.B. nach einem Youtube Tutorial, dass genau mein Problem behandelt. Da finde ich meistens eine Lösung. Andernfalls kann man grob Websites wie W3schools überfliegen und schauen ob man durch Zufall den Richtigen findet.

EinAlexander  07.07.2023, 12:13
@GuteFrageXY13
Ich suche halt nicht nach konkreten Befehlen, sondern z.B. nach einem Youtube Tutorial, dass genau mein Problem behandelt.

Das beantwortet nicht die Frage, wie lange man benötigt, um HTML und CSS zu beherrschen.

GuteFrageXY13  07.07.2023, 12:16
@EinAlexander

Meiner Meinung nach sind hier Zahlen nichtsaussagend. Wovon geht man denn bei den Zahlen aus, einfach alle Befehle durchlesen und mindestens einmal verwenden?

EinAlexander  07.07.2023, 12:22
@GuteFrageXY13
einfach alle Befehle durchlesen und mindestens einmal verwenden?

Nein. Es geht um das Verstehen. Es geht darum zu begreifen, warum man in HTML eine Adresse nicht so angibt

<div id="address">
Hans Müller<br>
Marktstraße 23<br>
80137 München
</div>

warum die Elemente <b> und <strong> nicht "fett darstellen" bedeuten, wann <hr> (nicht) verwendet wird, wann man die Elemente <img> und <picture> (nicht) verwendet und dgl. mehr.

Das lernst du nicht in einer Woche.

GuteFrageXY13  07.07.2023, 12:24
@EinAlexander

Trotzdem kann man hier nur sehr grob geschätzte Zahlen abgeben. (Grundsätzlich sage ich aber nicht, dass du Unrecht hast)

Beides relativ leicht kann man aber nicht so pauschal sagen kommt auf die Person an und wie dedicated man ist.


MrAmazing2  07.07.2023, 01:07

Also CSS würd ich jetz nich unbedingt leicht nennen, manche Sachen sind übelst schwer zu machen. Aber die Basics sind zumindest leicht, ja. Wenn auch etwas viel.

EinAlexander  07.07.2023, 12:10
@GuteFrageXY13
Welche Sachen sind in CSS schwer?

Ein animiertes Pulldownmenü mit reinem HTML und CSS umzusetzen. Ohne Code-Schnipsel von anderen Seiten zu kopieren.

MrAmazing2  07.07.2023, 12:14
@GuteFrageXY13
  1. Ein ausklappbares Div mit dynamischer Höhe (z.B. von height: 100px; zu height: auto;) mit ner Transition auf die Höhe.
  2. Eine Liste bzw. ein Grid an dynamisch großen Elementen mit justify-content: space-around / space-evenly / space-between wobei die Elemente in der letzten Zeile linksbündig sein sollen. (Hab ich bis heute nicht hinbekommen, obwohl ich eigentlich verdammt gut bin in CSS…)
GuteFrageXY13  07.07.2023, 12:14
@EinAlexander

Kommt drauf an wie detailliert die Animation sein muss. Ansonsten finde ich es nicht schlimm Code zu kopieren. Das wichtigste ist: man muss wissen wie der Code funktioniert! Code zu kopieren ohne ihn zu verstehen ist schwachsinnig und kann manchmal auch gefährlich sein. Wichtig ist es, daraus zu lernen, wie so etwas funktioniert.

EinAlexander  07.07.2023, 12:16
@GuteFrageXY13
Ansonsten finde ich es nicht schlimm Code zu kopieren.

Das heißt dann also, CSS ist nicht schwer, weil man ja Sachen von anderen kopieren kann. Nun ja ...

GuteFrageXY13  07.07.2023, 12:19
@EinAlexander

CSS ist auch nicht schwer, vorallem im Vergleich mit anderen Sprachen. Wenn du etwas noch nie gemacht hast, ist es (zumindest meiner Meinung nach) nachzuschauen, wie es andere machen und daraus lernen. Nur weil man etwas nachschauen muss, ist etwas nicht automatisch schwer.

GuteFrageXY13  07.07.2023, 12:21
@MrAmazing2

Also Punkt 1 kann man glaube ich zumindest relatov schnell hinbekommen. Gibt sicher dutzende Tutorials. Fall 2 ist spezifischer und müsste sich genauer angesehen werden. Danke für die Beispiele ;)

EinAlexander  07.07.2023, 12:24
@GuteFrageXY13
CSS ist auch nicht schwer

Ja, mit der Logik "Es ist leicht, weil ich's von anderen kopieren kann" ist nichts schwer. Mit derselben Logik könnte ich sagen, Polnisch sei (obwohl sie als eine der schwierigsten Sprache gilt) eine leichte Sprache. Wenn ich was wissen will, kann ich ja bei Google translate nachschauen.

MrAmazing2  07.07.2023, 12:27
@GuteFrageXY13

Versuch dich mal an Punkt 1, is nich so leicht wie es sich anhört :D

Gibt seit neustem so nen Trick mit Display: Grid um es zu schaffen, den fast niemand kennt, aber versuchs mal ohne den Trick…

GuteFrageXY13  07.07.2023, 12:31
@EinAlexander

Für mich sind Sprachen wie hier genannt "Polnisch" nur reines auswendig lernen. Die Wörter sind meistens einfach "zusammengewürfelte" Buchstaben. Beim Programmieren hat alles einen bestimmten Sinn. Hier geht es wirklich um Verständniss und nicht um das auswendig Lernen. Außerdem ist es nicht nur leicht, da man leicht kopieren kann, sondern weil der "Code" leicht verständlich ist. Wie im genannten Beispiel: Polnisch macht keinen direkten Sinn wieso jetzt das Wort "XY" heißt und nicht "Z". Beim "Programmieren" sehr wohl. Logisch ist zum Beispiel, dass "color: Farbe;" eine Farbe angibt.

EinAlexander  07.07.2023, 12:36
@GuteFrageXY13
Logisch ist zum Beispiel, dass "color: Farbe;" eine Farbe angibt.

Und Autoren die sich auf dieses Wissen beschränken, schreiben dann ins CSS

p { color:red }

Warum das falsch ist, versteht keiner. Du etwa?

GuteFrageXY13  07.07.2023, 12:43
@EinAlexander

Was ist abgesehen von dem fehlenden Semikolon falsch? Färbt den Text aller Elemente mit <p> rot.

MrAmazing2  07.07.2023, 12:45
@GuteFrageXY13

Wobei ich es nicht logisch finde, dass color die Textfarbe angibt. Hätten sie „textcolor“ nennen sollen.

Machst ein Div, änderst die Farbe (color), aber die die Farbe ändert sich nicht. Hat mich als Anfänger etwas verwirrt, da musste dann erstmal googlen wieso :D

Also nich alles is unbedingt logisch.

Oder dass in den meisten Programmiersprachen alles Pass-By-Value ist, aber bei Objekten die Referenz als Value gepasst wird, wohingegen bei primitiven Variablen eine Kopie des Wertes gepasst wird.

Macht natürlich Sinn wenn man versteht wieso, aber als Anfänger fand ich das auch verwirrend. Programmieren ist erst dann leicht, wenn man versteht, was so behind the scenes passiert und wenn man alle unlogischen Design-Entscheidungen der Programmiersprache auswendig gelernt hat :D

EinAlexander  07.07.2023, 12:48
@GuteFrageXY13
Was ist abgesehen von dem fehlenden Semikolon falsch?

da fehlt kein Semikolon.

Färbt den Text aller Elemente mit <p> rot.

Richtig. Und hier unterscheidet sich die Spreu ("ich hab das aus einem YouTube Tutorial kopiert") vom Weizen ("ich verstehe die Zusammenhänge").

Man gibt im CSS niemals eine Farbe an, ohne gleichzeitig eine Hintergrundfarbe anzugeben.

MrAmazing2  07.07.2023, 12:49
@EinAlexander

Hä what 😂 Noch nie gehört diese Regel. Und ich bin schon seit vielen Jahren Webdeveloper.

Welche Begründung hätte das denn?

GuteFrageXY13  07.07.2023, 12:51
@EinAlexander

Ich gebe alles immer mit einem Semikolon an😅

Man gibt im CSS niemals eine Farbe an, ohne gleichzeitig eine Hintergrundfarbe anzugeben

Du machst Scherze? Ohne Kontext weiß das niemand! Du gibst mir eine funktionsfähige Codezeile und erwartest von mir, dass ich mir noch etwas dazudichte ohne Kontext? Die Zeile funktioniert auch ohne Background-Color einfach auf den "Basic-Einstellungen".

EinAlexander  07.07.2023, 13:34
@GuteFrageXY13
Du gibst mir eine funktionsfähige Codezeile

die dann nicht mehr "funktionsfähig"ist, wenn z. B. im User-Stylesheet für body eine andere Hintergrundfarbe - z. B. red - definiert ist.

EinAlexander  07.07.2023, 13:38
@MrAmazing2
Welche Begründung hätte das denn?

Da du die Hintergrundfarbe des übergeordneten Elements nicht kennst, ist es falsch, für ein bestimmtes Element nur die Fontfarbe anzugeben. Zudem weißt du nicht, wie Drucker die nicht angegebene Hintergrundfarbe umsetzen.

Stillschweigend davon auszugehen, dass

p { color:red }

als Ergebnis einen roten Text auf weißem Hintergrund liefert, ist falsch. Wenn du dieses Verhalten garantieren möchtet, musst du explizit schreiben

p { color:red; background-color:white }

Lernt man in wenigen Minuten/Stunden.

Das Prinzip ist leicht, das Zusammenspiel, kann aber komplex sein.

Vor allem bei CSS-Gestaltung.