Ich interessiere mich sehr für das Erlernen der Webentwicklung und habe einige Grundlagen zu HTML und CSS vor einigen Jahren von W3Schools gelernt, aber ich habe nie gelernt, wie man Websites entwickelt, die den heutigen Standards entsprechen, dh frei fließende Websites ohne die Verwendung von Tabellen die Gestaltung der Website zu regeln.

Mit welchen guten Ressourcen kann ich beginnen?

CSS Zen Garden

Schauen Sie sich CSS Zen Garden an und blättern Sie durch die verschiedenen Ergebnisse. Sie sind sehr vielseitig und bieten einen großen Unterschied zum selben Quellcode. Sie werden viel über moderne CSS-Techniken lernen. Selbst wenn Sie sie nicht vollständig zerlegen, werden Sie zumindest eine Menge Inspiration und CSS-Fähigkeiten gegenüber normal zugänglichem HTML finden. Das Tolle an CSS Zen Garden ist die Semantik gegen den Stil. Inhalt ist überhaupt nicht Stile. Alle Stile, die Sie sehen, werden ausschließlich von CSS erstellt. Dies ist die richtige Methode, da Daten von vielen verschiedenen Clients verarbeitet werden können und nur von denjenigen, die sie visualisieren.

Bücher

Wenn es darum geht, aus Büchern zu lernen, scheint dies ein guter Anfang zu sein : CSS: The Missing Manual .

Internet

Ich habe das Smashing Magazine im Internet gelesen , das viele Beispiele und Ansätze enthält. Es reicht von Artikeln aus der Designbranche bis hin zu großartigen Ansätzen im Bereich Webdesign.

Der beste Weg, um zu lernen, wie man Websites und Anwendungen erstellt, ist , dies tatsächlich zu tun , dh, Sie sollten Projekte erstellen und dies die ganze Zeit tun. Dieses kurze Video vermittelt die Emotionen eines Neulings und gibt einige gute Ratschläge zu diesem Thema.

Ich habe auch einige andere Empfehlungen für Leute geschrieben, die daran interessiert sind, Webentwicklung zu lernen, die Sie lesen sollten, bevor Sie anfangen.

Da Sie jedoch keine Sprachen sprechen können, in denen Sie keine Wörter sprechen, müssen Sie die Grundlagen gut verstehen, bevor Sie ein nützliches Projekt erstellen können. In den folgenden Ressourcen finden Sie einige Grundlagen und Websites, mit denen Sie sich selbst vertraut machen können.

Es gibt großartige Orte, an denen Sie kostenlos die Grundlagen der Webentwicklung erlernen können. Fangen Sie hier an, aber spielen Sie mit Dingen, die sie nicht direkt lehren. Versuchen Sie nach einigen Versuchen, andere Websites / Projekte von Grund auf neu zu erstellen. Auf diese Weise werden die Konzepte gestärkt, Implementierungsdetails vermittelt und wahrscheinlich auch zusätzliche Informationen vermittelt. Sie können einfach kein guter Entwickler oder Designer werden, wenn Sie nur lesen, Sie müssen erstellen !

Ich habe einen Crashkurs für Designer gemacht, die Webentwicklung lernen

Hör zu! Sie sind auf ein designorientiertes Publikum zugeschnitten, gelten jedoch für alle Lernenden. Sie vermitteln die Grundlagen in den Folien / Posts / Videos und weisen am Ende jeweils ein kleines Projekt zu, um die reale Front-End-Entwicklung zu vermitteln.

• Lektion 1 - Das Warum und Was hinter der Webentwicklung
• Lektion 2 - Starten von HTML & CSS
• Lektion 3 - Starten von JavaScript (JS)

Andere gute Tutorial-Websites

• CodeAcademy - Grundkenntnisse in mehreren Sprachen.
• Mozillas "Learning the Web" -Reihe - Diese beginnt am Anfang und kann Sie in einige komplexere Themen einführen. Tolle Ressource, ich kann es nur empfehlen.
• Udacity - Allgemeine Webentwicklungsklasse.
• Tuts + - Tutorials zu spezifischeren Themen.
• KhanAcademy - Ich habe es nicht persönlich benutzt, aber es scheint von Tag zu Tag besser zu werden.

Verwenden Sie W3Schools nicht , es ist im Allgemeinen veraltet und sehr fehleranfällig. Verwenden Sie stattdessen eine Tutorial-Website wie oben, um eine der unten aufgeführten Dokumentationsseiten zu erlernen und zu verwenden, wenn Sie nach etwas Bestimmtem suchen.

Dokumentation

Der Blick auf die Dokumentation von Eigenschaften, Bibliotheken usw. ist entscheidend, um ein guter Webentwickler zu werden. Die folgenden Dokumente gehören zu den besten, die Sie verwenden können:

• W3.org - Die offizielle Dokumentation für fast alles, was von Webbrowsern implementiert wird. Das Lesen dieser Dokumente ist sehr wichtig! Dies wird nicht mit W3Schools in irgendeiner Weise verbunden.
• Mozilla Docs - Eine sehr zuverlässige Drittanbieter-Ressource von den Entwicklern von FireFox, die stets auf dem neuesten Stand ist.
• WHATWG.org - Eine Art Open Source-Konkurrent zu W3; Einige Browser setzen bestimmte Vorschläge von hier aus zeitweise über W3 um.
• DevDocs - Nicht offiziell, hat aber viele Sprachdokumente auf einer Seite. Ganz bequem.

Nützliche Feeds

• WebPlatformDaily - Eine Liste von Nachrichten, die sich mit allem befassen, was im Web täglich aktualisiert wird (außer an Wochenenden).
• SitePoint - Wirklich nützliche Artikel zu verschiedenen Themen.
• WebDesignerDepot - Kann auf der Spam-Seite sein, aber die meisten ihrer tatsächlichen Artikel sind gut.
• Smashing Magazine - Fortgeschrittene Themen, aber meistens gute Lektüre.
• A List Apart - Ein bisschen fortgeschritteneres Wissen in Blog-Form.

Herausgeber

Kleine Projekte / Spielen mit Code

• JSFiddle - Machen Sie kleine Projekte und verfolgen Sie sie.
• CodePen - Schauen Sie sich die Code-Doodles anderer an und übermitteln Sie Ihre eigenen, damit andere sie sehen können.

Volltexteditoren

• SublimeText
• Atom

Andere nützliche Websites

• Seite "Meine Ressourcen" - Eine Liste der Ressourcen, die ich zusammengestellt habe, angefangen von der Einführung über das reaktionsschnelle Design bis hin zur Analyse der verschiedenen Arten der Animation in einem Webbrowser.
• Front-End-Entwicklerhandbuch - Eine vielfältigere, aber hilfreichere Sammlung von Beiträgen zu einer Vielzahl von Front-End-Themen.
• WebFieldManual - Eine große Sammlung hilfreicher Ressourcen.
• StackOverflow - Wenn Sie eine bestimmte Frage zum Programmieren haben, ist StackOverflow unerreicht, um Hilfe zu erhalten.
• LearnLayout - Lernen Sie einige Grundlagen zum Erstellen von Layouts in CSS.
• Positionierung im Webdesign - Teil meines Crashkurses, der vielleicht am nützlichsten ist.
• 30 CSS-Selektoren, die Sie kennen sollten - Lernen Sie sie kennen und sparen Sie später Zeit. Es gibt auch ein cooles kleines Spiel , um Ihre CSS-Selektorkenntnisse zu testen.
• Codrops CSS Reference - Eine prägnante und hilfreiche Referenzseite.
• CodeMentor und Thinkful - Websites, auf denen Sie bezahlen können, um 1 zu 1 betreut zu werden.

Suchen Sie nach persönlichen Blogs von Webentwicklern und Designern, die Ihnen gefallen. Sie haben oft großartige Inhalte.

Ich habe auch eine Einführung in das UI-Design geschrieben, die sehr nützlich sein könnte. Ich habe einige zusätzliche großartige Ressourcen darin verlinkt.

Ich kann nicht genug betonen, der beste Weg zu lernen ist Dinge zu bauen, die deine Grenzen überschreiten und dies kontinuierlich zu tun .

Eine noch größere (und vielleicht überwältigende) Liste hilfreicher Websites finden Sie unter WebDesignRepo !

Die besten Orte für mich, um etwas über Webdesign zu lernen (Layout-Lösungen, Benutzerfreundlichkeit, Grafik und technische Lösung), sind:

Schauen Sie sich die gesamte Website der Personen an, die Artikel auf diesen Websites geschrieben haben:

Eine Liste abgesehen von
24ways.org

Oder etwas Technischeres über Listendesign und Floating http://css.maxdesign.com.au/index.htm

Sie müssen wissen, was Webstandards sind. Die offizielle Quelle ist: World Wide Web Consortium (w3c) Es ist ein bisschen schwierig, von dort zu lernen, weil es sehr technisch ist, aber es ist gut, es zu überprüfen, wenn Sie wissen möchten, wie die Dinge im Web funktionieren und warum über die Standards. Das nützlichste ist der Validator Ihres HTML-Codes.

Am besten ist es, sich den Quellcode guter Websites anzuschauen und natürlich den Anteil der Dinge, die zum Erlernen der Tricks ausgerichtet sind: http://www.cssbeauty.com/

Und sieh dir die Website guter Webdesigner an und was sie tun:

Jason Santa Maria
Dustin Curtis David DeSandro
Joshua Davis http://www.thinkingforaliving.org/ etc ...

und meine Delicious-Lesezeichen (es gibt eine Vielzahl von Dingen, die Sie durchsuchen und überfliegen müssen, was Sie nicht benötigen) http://www.delicious.com/Littlemad/webdesign

Bevor Sie anfangen, all diese Frameworks zu lernen ...

Ich möchte Ihre Aufmerksamkeit auf den Designteil des Webdesigns lenken .

Natürlich können Sie mit Bootstrap oder einem anderen Framework problemlos eine Website erstellen. Aber das ist kein Design. Ein Framework kann eine Basis sein, aber wenn Sie nicht Ihren eigenen Dreh setzen, erhalten Sie im Grunde eine Website, die genau wie alle anderen Websites da draußen ist .

Aus diesem Grund rate ich Ihnen, die Grundlagen des Designs zu erlernen und diese selbst anzuwenden.

Wie macht man (schöne) Websites auf eigene Faust?

Das ist eine Frage, die ein Buch wert ist, aber hier sind ein paar Hinweise:

1. Lesen Sie mehr über die Grundprinzipien des Designs . Diese 7-stufige Einführung in das Webdesign soll Ihnen den Einstieg erleichtern. Auch diese Artikelserie über Smashing Magazine .
2. Beobachten Sie die Entwürfe anderer Leute. Welche Grundprinzipien haben sie angewendet und wie? Aber beobachte nicht nur, sondern notiere deine Beobachtungen .
3. Design unter Berücksichtigung des Geschäftsziels . Ein Webdesign soll einem Unternehmen helfen , sein Ziel zu erreichen und dem Benutzer zu helfen , sein eigenes Ziel zu erreichen. Wenn die beiden Tore zusammenlaufen, sind alle glücklich. Dieses Ziel sollte also immer Ihr Ausgangspunkt sein. Sie sollten jede Entwurfsentscheidung, die Sie treffen, auf dieses Ziel stützen - Schriftartenauswahl, Farbauswahl, Layout usw.
4. Stellen Sie sicher, dass Ihr Design harmonisch ist. Im Allgemeinen bedeutet dies eine Harmonie zwischen der Nachricht, die Sie senden möchten, den Farben, den Schriftarten, der Stimmung der Website und der Marke. Beginnen Sie, Harmonie in Ihre Entwürfe einzubetten, indem Sie eine modulare Skala verwenden, die Sie bei Ihren Größenentscheidungen unterstützt. Diese Mini-Serie erklärt mehr über Harmonie und die Verwendung einer modularen Skala.
5. Lesen Sie diese erstaunliche Einführung in die Typografie : Buttericks praktische Typografie oder zumindest diese Zusammenfassung

Versuchen Sie, von Grund auf neu zu entwerfen

Wenn Sie mit all diesen Dingen fertig sind und sich mit HTML und CSS auskennen, können Sie Ihr eigenes, sehr einfaches Design erstellen.

Versuchen Sie, eine einzelne Seite mit nur Text in Schwarzweiß zu gestalten .

Warum nur Text? Weil Text das bei weitem am häufigsten verwendete Medium ist, um eine Nachricht im Web zu übermitteln. Daher ist es für Sie als Webdesigner von grundlegender Bedeutung, dass Text gut aussieht und Freude am Lesen macht.

Warum schwarz und weiß? Denn die Auswahl der Farben ist ein weiteres Biest. Wenn Sie kleine Schritte unternehmen, freuen Sie sich über Ihre Fortschritte und lernen schneller.

Wenden Sie die Grundprinzipien des Designs an, die Sie gelernt haben. Verwenden Sie die Beobachtungen der Designs anderer Leute. Denken Sie über das Ziel dieser Seite nach. Passen Sie die Größe des Texts mithilfe einer modularen Skala an.

Die beste Art zu lernen ist, Dinge zu machen, also mache dich selbst zu einer Website.

Lesen Sie Standards , alistapart , tutsplus .

Wenn Sie ein Buch benötigen, schauen Sie sich SitePoints - HTML-Utopie an: Entwerfen ohne Tabellen mit CSS .

Einige Gedanken zu csszengarden und W3Schools .

Ehrlich gesagt würde ich zunächst lernen, wie man WordPress-Sites entwickelt. Ja, ich kann eine Site mit HTML, CSS, PHP, ... codieren, aber ich kann eine WordPress-Site schneller zusammenstellen und dann nach Bedarf anpassen.

Wenn Sie anfangen möchten, nur die heutigen Standards zu lernen, dann würde ich http://nettuts.com/ empfehlen . Es wäre auch von Vorteil, die Premium-Mitgliedschaft zu erwerben und Zugriff auf einige großartige Tutorials zu erhalten. Wenn Sie daran interessiert sind, von PSD zu HTML zu wechseln, dann decken sie dies ab.

Nettuts ist ein Teil von Envato. Envato bietet mehrere Tutorial-Websites, die Webentwicklung, WordPress, Vektoren, Foto- und Videobearbeitung und vieles mehr abdecken. Es ist ein großartiger Ort, um anzufangen.

Nur meine 2 Cent.

Für Anfänger von Photoshop für Webdesign würde ich diese Website empfehlen: http://psdvibe.com/

Es gibt viele Websites mit unzähligen Tutorials. Die beste Plattform zum Erlernen von Webdesign ist jedoch http://teamtreehouse.com/ . Ich hoffe es hilft! Nik