Pinetco Blog

HTML & CSS Lernen – Die ultimative Anleitung

Die Auszeichnungssprachen HTML & CSS heutzutage zu erlernen, ist um einiges einfacher geworden. Geld muss hierfür niemand ausgeben oder langweilige Bücher lesen, die uneffektiv und am Erscheinungstag meist veraltet sind. In diesem Blogeintrag möchte ich dir aufzeigen, wie einfach es ist HTML & Co - nicht nur die Grundlagen - zu erlernen. Dieser Eintrag richtet sich in erster Linie an Anfänger, jedoch bin ich mir sicher, dass auch Fortgeschrittene von diesem Beitrag profitieren können.

Die von mir genannten Quellen beinhalten fast ausschließlich englischsprachige Tutorials (Anleitungen) in Form von Videos und Texten. Da Englisch weit mehr vertreten ist als Deutsch, ist die Anzahl an englischsprachigen Tutorials für angehenden Entwickler, um einiges größer und meiner Erfahrung nach deutlich qualitativer. Grundkenntnisse in Englisch sollten in den meisten Fällen ausreichen.

Das Werkzeug des Entwicklers

Der Editor

Als angehender Entwickler benötigst du ein Programm bzw. einen Editor in dem du Webseiten oder Anwendungen erstellst. Editoren gibt es zahlreiche und über die Jahre habe ich viele kennengelernt. Eine Auflistung von Editoren möchte ich dir an dieser Stelle ersparen, da ich nur einen empfehlen kann: Sublime Text 2.

 

  Sublime Text 2 - Der Editor

Sublime Text 2 ist ein absolut flexibler Editor, der auf deine Bedürfnisse nahezu grenzenlos angepasst werden kann. Sogenannte Plugins (Erweiterungen) ermöglichen es dir, die Arbeit mit dem Editor zu vereinfachen und zu beschleunigen. Dank der wachsenden Beliebtheit von Sublime Text 2, wächst auch die Anzahl der Plugins stetig. Mit der Installation von Plugins solltest du noch warten. Zu Beginn solltest du dich mehr auf das Lernen von HTML & CSS konzentrieren, als auf die Einrichtung von Erweiterungen.

Ein weiterer großer Vorteil dieses Editors ist, dass du ihn als portable Version laden kannst. Das bedeutet, dass du deine Arbeit an einem anderen PC mit dem gewohnten Editor verrichten kannst.

Wenn du wissen möchtest, wie man diesen Editor richtig einrichtet und optimiert, solltest du dir mein Tutorial durchlesen!

Der Browser 

Wenn du anfängst Webseiten zu erstellen, wirst du relativ schnell feststellen, dass ein einziger Browser zum Testen nicht ausreicht. Browser kochen gerne ihr eigenes Süppchen und stellen Ihre Arbeit unterschiedlich dar. Für den Start empfehle ich daher den Browser Google Chrome. Dieser wurde nicht ausschließlich für Endverbraucher erstellt, sondern bietet auch für Entwickler einige Vorteile.

Google Chrome hat von sich aus ein umfangreiches Entwickler-Werkzeug implementiert. Dieses Werkzeug ist erreichbar über die Taste F12. Das Fantastische daran erfährst du in dem von den Google Developers veröffentlichtem Video Chrome Dev Tools Reloaded, das verständlicher wird, sobald du dich ein wenig mit der Materie HTML & CSS vertraut gemacht hast.

Quellen zum Lernen

Ist der Editor installiert, brauchst du Lernmaterial. Als Quelle für Lernmaterial empfehle ich ausschließlich das Internet. Das Internet ist voll mit kostenlosen und guten Anleitungen, die ein einfaches und schnelles erlernen von HTML & CSS ermöglichen. Die meisten Tutorial-Seiten bieten die Möglichkeit Tutorials via RSS zu abonnieren. Falls du noch kein Programm besitzt, mit dem du RSS-Feeds empfangen kannst, empfehle ich dir Feedly.

tutsplus.com – Tutorials ohne Ende

Tuts+ ist ein Netzwerk von Envato für Tutorials verschiedenster Themengebiete, wie z. B. Webdesign, Web-Programmierung, Photoshop, App-Programmierung etc. Die Ersteller der Tutorials werden für ihre Werke entlohnt. Dies hat zur Folge, dass diese Tutorials ein hohes Niveau aufweisen.

 

  30 Tage um HTML & CSS zu lernen

Interessant zum Lernen von HTML5 & CSS3 sind für dich die Seiten Webdesigntuts+ und Nettuts+. Die Tutorials von Jeffrey Way, dem Programmier-Guru von Tuts+, empfehle ich dir nicht ohne Grund. Mit der „30 Days to Learn HTML & CSS“ Tutorial-Serie von Jeffrey Way solltest du anfangen, wenn du verstehen möchtest, wie Webseiten entstehen. Er spricht in seinen Videos deutliches, langsames und akzentfreies Englisch. Grundsätzlich solltest du dir dieses Tutorial Schritt für Schritt ansehen, wobei nicht zwangsläufig nur ein Video am Tag angesehen werden sollte. Es ist möglich, mehrere der einzelnen Tutorialabschnitte hintereinander abzuarbeiten oder sogar alle an einem Tag zu bewerkstelligen.

Weitere Quellen

Mit den Tutorials von Tuts+ solltest du für den Anfang mit Sicherheit reichlich bedient sein. Folgende Seiten kann ich im Anschluss an die obigen Basics zur Verfeinerung bzw. Vertiefung ebenfalls empfehlen:

Google ist dein Freund. Kaum ein Thema im Internet wird so umfassend erklärt und beschrieben, wie das Internet selbst. Folgende Suchwörter solltest du nutzen, um an weitere Informationsquellen zu gelangen:

  • HTML CSS Tutorials
  • Webdesign Tutorials
  • Learn HTML CSS

Achte dabei immer auf das Erstelldatum der gefundenen Seite. Vermeide es veralteten Seiten deine Aufmerksamkeit zu schenken.

HILFE! – Wer kann mir helfen?

Leider, jedoch völlig unausweichlich, geratest du als angehender Entwickler in die Situation, dass du ein Problem nicht gelöst bekommst und nicht mehr weiter weißt. Meist erweist sich Google als eine große Hilfe. Du wirst mit Sicherheit auf kein Problem stoßen, das nicht bereits in den Weiten des Internets behandelt und gelöst wurde.

Solltest du auf Deutsch keine Hilfe finden, versuche dein Anliegen in Englisch zu beschreiben. Die Entwickler-Community auf Englisch ist deutlich größer. Dementsprechend wurden mehr Fehler von englischsprachigen Entwicklern produziert und gelöst.

Sofern Google ausnahmsweise keine helfende Antwort liefern kann, empfehle ich dir Foren aufzusuchen, in denen man sich mit HTML & CSS bzw. Webentwicklung befasst. Ich empfehle dir, die Forenregeln zu beachten und die Foren-Suchfunktion zu benutzen, bevor du einen Beitrag erstellst, der womöglich bereits existiert.Unter diesen Umständen könnte keine Reaktion erfolgen oder dein Beitrag wird kommentarlos gelöscht.

Anbieter von Tutorials in Form eines Blogeintrages bieten dir oft die Möglichkeit Kommentare zu hinterlassen. Wenn Du bei einem Tutorial mal nicht weiter kommst, solltest du dir die Kommentarfunktion zu Nutze machen.

Übung, Übung, Übung…

Wenn du das Prinzip von HTML & CSS verstanden hast, solltest du viel üben, um Routine zu erlangen. Erstelle Webseiten für dich, deine Familie oder deine Zimmerpflanze. Als weitere Möglichkeit des Lernens empfehle ich Webseiten rein optisch nachzubauen.

Jetzt Newsletter abonnieren!

Gefällt dir, was du siehst? Lies unsere neusten Beiträge in Zukunft als erster und verpasse keine neuen Inhalte mehr. Jetzt kostenlos Blog abonnieren:

Zum Blog-Abo!