Lernen Sie HTML und CSS mit diesen Step-by-Step-Tutorials

Wenn Sie es wagen, sich mit Code zu beschäftigen, gibt es einfach keine Beschränkung für die Anzahl der Tutorials, Videos und Online-Kurse, die Sie ausprobieren können. Aber manchmal ist der beste Weg, etwas zu lernen, indem man rein taucht und es aus erster Hand versucht. Webentwicklung ist nicht anders.

Wenn Sie neugierig auf HTML, CSS und JavaScript sind oder denken, Sie könnten etwas von Grund auf lernen, wie man Websites von Grund auf erstellt - es gibt ein paar großartige Schritt für Schritt Anleitungen einen Versuch wert.

Die folgende Liste von Tutorials führt Sie durch die Grundlagen von HTML und CSS und bietet Ihnen sogar eine Einführung in die komplexe Welt von JavaScript. Was ist JavaScript und kann das Internet ohne es existieren? Was ist JavaScript und kann das Internet ohne es existieren? JavaScript ist eines der Dinge, die viele als selbstverständlich betrachten. Jeder nutzt es. Lesen Sie mehr - zumindest für Anfänger. Was sie jedoch nicht tun, ist, Sie auf ein Leben als Entwickler vorzubereiten. Die meisten dieser Dienste sind einfach ein Startplatz.

Es wird noch viel mehr dauern, um Websites professionell zu entwickeln. Diese Werkzeuge, von denen die meisten kostenlos sind, geben Ihnen die Möglichkeit Grundbausteine ​​für die Webentwicklung, und wird es viel einfacher machen, in die komplizierteren Kurse einzutauchen.

General Assembly's Dash

Die Mitglieder der General Assembly haben ein kostenloses Tool, das Sie mit den Grundlagen von HTML, CSS und JavaScript vertraut und der perfekte Einstieg für Anfänger ist. Durch eine Reihe von fünf Projekten, Sie erlernen die Terminologie und die grundlegenden Codierfähigkeiten, mit denen Sie eine Website erstellen können, die einer about.me-Seite ähnelt, wie Sie einen responsiven Blog erstellen, und eine Restaurant-Website.

In den Dash-Tutorials erfahren Sie nicht nur, wie Sie einfache Websites erstellen. Sie können auch die Möglichkeiten von HTML, CSS und JavaScript nutzen, um einen Roboter mit Formen und Linien oder sogar einem Mad Libs-Spiel zu erstellen.

Die Dash-Tutorials bewegen sich in einem vernünftigen Tempo und führen Sie Schritt für Schritt einige Zeilen Code durch. Wie bei jedem Tutorial würde ich Ihnen empfehlen, sich bei der Arbeit Notizen zu machen. Dies hilft Ihnen, die verschiedenen Werkzeuge, die Sie lernen, auswendig zu lernen. Wenn Sie eine Phase abgeschlossen haben, scheint es mit den Tutorials der Generalversammlung nicht möglich zu sein, sie zu wiederholen.

Fazit: Mit Dash werden Sie mit all dem Wissen ausgestattet, das Sie benötigen, um eine moderne Website zusammenzustellen - von der Navigation bis zum responsiven Design. Sie werden sogar in die Grundlagen der Erstellung eines benutzerdefinierten Tumblr-Themas eingeführt. Insgesamt gibt es im Dash nur vier Lektionen. Während Sie die erlernten Konzepte auf verschiedene Arten anwenden können, müssen Sie Ihr Wissen durch andere Kurse ergänzen, die in dieser Liste aufgeführt sind.

Codecademy

Die Codecademy gibt es schon viel länger als Dash und fügt ihren Angeboten oft neue Lektionen hinzu. Mit den gleichen Schritt-für-Schritt-Lektionen, die Sie auch in Dash finden, geht Codecademy noch einen Schritt weiter und gibt den Benutzern einen allgemeinen Überblick über das Erstellen einer Website mit HTML und CSS. Sie erhalten jedoch auch ausführliche Anleitungen zu den einzelnen Sprachen , HTML, CSS und JavaScript.

Wie andere Dienste zeigt Ihnen Codecademy, wie Sie ein Navigationsmenü erstellen, Hintergrundbilder hinzufügen, eine Galerie mit Bildern erstellen oder sogar eine Anmeldeseite erstellen. (Um Ihrer Anmeldeseite weitere Funktionen hinzuzufügen, lesen Sie unbedingt das Ruby on Rails-Tutorial.)

Es gibt auch spezielle Lektionen zu jQuery Making The Web Interactive: Eine Einführung in jQuery Making The Web Interactive: Eine Einführung in jQuery jQuery ist eine clientseitige Skriptbibliothek, die von fast jeder modernen Website verwendet wird - sie macht Websites interaktiv. Es ist nicht die einzige Javascript-Bibliothek, aber es ist die am meisten entwickelte, am meisten unterstützte und am weitesten verbreitete… Read More, eine Schlüsselsprache, die das Erlernen von JavaScript viel einfacher macht. Wenn Sie sich für die Backend-Entwicklung interessieren, finden Sie auch ausführliche Lektionen für Ruby, Python, PHP und mehr.

Zusätzlich zum Erlernen der Gestaltung einer Website und Eintauchen in die Feinheiten von Programmiersprachen. 7 Nützliche Tricks zum Erlernen einer neuen Programmiersprache 7 Nützliche Tricks zum Erlernen einer neuen Programmiersprache Es ist in Ordnung, beim Lernen von Code überfordert zu sein. Sie werden die Dinge wahrscheinlich so schnell vergessen, wie Sie sie lernen. Diese Tipps helfen Ihnen dabei, all diese neuen Informationen besser aufzubewahren. Weitere Informationen können Sie Codecademy verwenden, um die Grundlagen zum Erstellen von Web-Apps und zum Hinzufügen von Anmelde-, Login- und Logout-Funktionen zu Ihrer Website zu erhalten.

Fazit: Wie Dash ist die Interaktivität der Codecademy von unschätzbarem Wert. In der Lage zu sein, zu sehen, wie die einzelnen Schritte auf Ihrer Website verwirklicht werden, ist ermutigend und das Setup macht es auch leicht, Fehler zu erkennen. Wenn Sie ein Anfänger sind, ist die Codecademy ein großartiger Ort, um Ihre Zehen nass zu machen und zu entscheiden, ob Coding und Webdesign für Sie die richtige Wahl sind. Mit dieser Erfahrung können Sie dieses Wissen in einen bezahlten Kurs oder eine Klasse einbringen.

Tuts+

Tutsplus.com ist eine Website mit zahlreichen Tutorials (kostenlos und kostenpflichtig) zu einer Vielzahl von Themen, einschließlich mobiler Apps. 7 Blogs zur mobilen Entwicklung, die Sie lesen sollten, um eine bahnbrechende App zu entwerfen? 7 Blogs zu Mobile-Entwicklung, die Sie lesen sollten Der mobile Raum ist so neu, dass sich Trends ständig ändern und täglich neue Erkenntnisse gewonnen werden. Wenn Sie mobile Apps entwickeln möchten, wie können Sie mithalten, ohne verrückt zu werden? Weitere Informationen und Spieleentwicklung 4 Kostenlose Websites, auf denen Sie die Grundlagen der Spieleentwicklung lernen können 4 Kostenlose Websites, auf denen Sie die Grundlagen der Spieleentwicklung lernen können Wenn Sie nach einer guten Spieleentwicklungs-Lernserie suchen, möchten Sie eine, die Sie mit den Praktiken und der Mentalität vertraut macht gute Kodierung, weil Sie diese Praktiken dann in jede Sprache oder Plattform umsetzen können. Lesen Sie mehr zur Farbtheorie. So lernen Sie die Farbtheorie in weniger als einer Stunde. Wie lernen Sie die Farbtheorie in weniger als einer Stunde? Grundlegende Kenntnisse der Farbtheorie können den Unterschied zwischen einer "Amateur" -Ästhetik und einer "professionellen" Theorie ausmachen - und das wirklich es dauert nicht lange zu lernen. Weitere Informationen und Verwendung von Adobe Illustrator Teach Yourself Adobe Illustrator kostenlos Teach Teach Your Adobe Illustrator kostenlos Adobe Illustrator ist seit langem das bevorzugte Illustrationswerkzeug für Grafiker. Bereit, Ihre Designs zum Leben zu erwecken? So lernen Sie Adobe Illustrator kostenlos. Weiterlesen . Während nicht alle Lektionen, die auf der Website unterrichtet werden, dem Schritt-für-Schritt-Modell folgen, gibt es einige, die diesen Ansatz verfolgen und die Benutzer durch einfache Webentwicklungsanleitungen führen.

Ein besonders nützliches Tutorial führt Sie durch die Schritte zum Entwerfen und Codieren Ihrer Website. Das Tutorial stammt zwar aus dem Jahr 2009, die Designästhetik mag Sie also nicht ansprechen, aber das Tutorial vermittelt Ihnen die für das Design Ihrer Website erforderlichen Fähigkeiten, und Sie können diese Fähigkeiten dann auf ein aktualisiertes Design anwenden. Ein weiterer erwähnenswerter Nachteil in diesem Lernprogramm ist, dass Adobe Photoshop erforderlich ist. Wenn Sie keinen Zugriff auf die Software haben, können Sie sich für die Adobe Creative Cloud für eine Gebühr von 50 US-Dollar pro Monat entscheiden.

Das Tutorial führt Sie durch das Entwerfen einer einfachen zweispaltigen Website mit Kopf- und Fußzeile. Die Website umfasst Inhalte, eine Navigationsleiste, Social Media-Schaltflächen und mehr. Nachdem Sie die Website in Photoshop entworfen haben, können Sie zu einem Code-Editor wechseln. In diesem Lernprogramm werden Sie durch den Code geführt, der für die Umwandlung Ihres Designs in eine HTML-Seite erforderlich ist. Das Tutorial erfordert einige Grundkenntnisse in HTML. Ich würde empfehlen, dieses Tutorial auszuprobieren, nachdem Sie die ersten Tutorials der General Assembly durchgearbeitet haben.

Wenn Sie eine aufwendigere Website erstellen möchten, lesen Sie ein weiteres Tuts + -Tutorial, um eine schöne Website von Grund auf zu entwerfen. Ein weiteres PSD-zu-HTMl-Lernprogramm macht das Leben etwas einfacher, da es HTML-, CSS- und Bilddateien bereitstellt. In anderen Tutorials zu Tuts + erfahren Sie, wie Sie ein Tumblr-Fototagebuch erstellen - auch wenn es sich hierbei um ein einfaches Photoshop-Design ohne Code handelt.

Fazit: Im Vergleich zu Codecademy und Dash sind die Tutorials zu Tuts + etwas aufwendiger, da Sie sich durch die einzelnen Schritte gehen müssen. Bei den anderen beiden Standorten gibt es sozusagen viel mehr Handhaltung. Wenn Sie jeden Schritt durchlaufen, ist es oft einfacher, herauszufinden, welchen Fehler Sie gemacht haben könnten. Außerdem müssen Sie Ihre eigene Software verwenden, während Dash und Codecademy über integrierte Systeme verfügen. Mit der Vielzahl der Tutorials finden Sie jedoch eine Reihe von Lektionen, die genau auf das abzielen, was Sie lernen möchten.

Lerne mit Shaye Howe zu kodieren

Mit einer Reihe von 12 Lektionen leistet Shaye Howe eine großartige Arbeit, um die Grundlagen von HTML aufzuschlüsseln und Sie mit der Terminologie und der Verwendung der verschiedenen Elemente von HTML und CSS vertraut zu machen. In verschiedenen Lektionen lernen Sie HTML und CSS kennen, verstehen das Boxmodell, positionieren Sie Inhalte, Typografie und vieles mehr.

Wenn Sie die Lektionen in diesem Lernprogramm anwenden möchten, bietet die Website keine Möglichkeit, schnell zu sehen, wie Ihr HTML- und CSS-Code aussieht. Um dies zu überwinden, können Sie ein Online-Tool verwenden, das die gleichen Funktionen wie Codecademy und Dash bietet.

Schauen Sie sich eine CSS / HTML / JavaScript-Sandbox wie CSSDeck oder LiveWeave an, in der Sie HTML, CSS und JavaScript eingeben und das Endergebnis anzeigen können. Technisch gesehen können Sie auch die HTML-, CSS- und JavaScript-Editoren in Dash und Codecademy sowie die von ihnen bereitgestellten Einstellungen verwenden.

Während Sie die Erklärungen durcharbeiten, enthält die Website auch Beispiele für Code, mit dem Sie sich selbst ausprobieren können. Am Ende jeder Lektion finden Sie eine praktische Übung, mit der Sie das Gelernte anwenden können.

Nachdem Sie die 12 Lektionen durchlaufen haben, können Sie zur erweiterten HTML- und CSS-Lektion wechseln, die Responsive Design, jQuery und mehr umfasst.

Fazit: Dieses Tutorial unterscheidet sich geringfügig von den anderen hier aufgeführten Vorschlägen. Mit einer viel ausführlicheren Erklärung verbringen Sie mehr Zeit mit dem Lesen, als Sie das Gelernte anwenden. Einige mögen langweilig klingen, aber es gibt einige wertvolle Lektionen, die den Kontext und ein besseres Verständnis für die Funktionsweise dieser Sprachen vermitteln.

Was ist dein Take??

Jetzt ist es Zeit von dir zu hören. Gibt es Online-Webentwicklungs-Tutorials, die Sie empfehlen würden? Was ist Ihrer Meinung nach der nächste Schritt nach dem Testen dieser Online-Kurse? Lass es uns in den Kommentaren wissen.

Bildnachweis: hackNY.org

Erfahren Sie mehr über: Bildungstechnologie, HTML, HTML5, Webdesign.