Wie kann ich anfangen, Webentwicklung zu lernen?

22

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?

JFW
quelle
4
Ich würde vorschlagen, W3Schools als Lernwerkzeug zu meiden. Sie können hier nachlesen, warum: meta.stackexchange.com/questions/87678/…
aslum
1
Ich würde vorschlagen, dass, wenn w3schools für Sie arbeitet, Sie es verwenden. Ja, es besteht die Möglichkeit, dass etwas nicht genau ist, niemand ist perfekt. Ich habe ihnen einige Probleme auf einigen Seiten gemeldet, auf denen ich einen Fehler festgestellt habe. Viele Leute haben meine primitiven Englischkenntnisse auf dieser Seite korrigiert. Ich habe sogar ein paar Ausgaben vor Jahren bis zum W3C selbst mitgemacht, als ein neuer Entwurf veröffentlicht wurde. Es ist kein Problem, eine Website zu "verbieten", sondern zu verbessern.
Rafael

Antworten:

12

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.

Robert Koritnik
quelle
25

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.


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


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 !

Zach Saucier
quelle
1
Ich würde Lynda.com hinzufügen. Für Redakteure, die auf einem Mac arbeiten, sollte BBEdit oder die kostenlose Version textmate verwendet werden.
DᴀʀᴛʜVᴀᴅᴇʀ
1
Ich stimme voll und ganz zu, möchte aber hinzufügen, dass ich raten würde, von Anfang an von Frameworks Abstand zu nehmen. Lerne, wie man kriecht, bevor du lernst, wie man geht. Dies gibt Ihnen eine viel bessere, solide Basis, um in Zukunft weiter zu lernen, und hilft Ihnen dabei, schöne, strukturierte und semantische Webseiten zu erstellen.
Sommer,
@ JaneDoe1337 das kommt darauf an wen du fragst. Manchmal ist ein Framework einfacher zu erlernen und unterstützt eine schnellere Bereitstellung. Nachdem Sie die Grundlagen eines Frameworks erlernt haben, können Sie immer wieder Überstunden machen, wenn das Framework gut übernommen wurde und bessere Optionen zur Verfügung stehen.
DᴀʀᴛʜVᴀʀᴛʜ
@Darth_Vader Deshalb habe ich gesagt, es sei mein Ratschlag;) Meine persönliche Erfahrung ist, dass die Leute im Allgemeinen nicht zurückgehen und die Grundlagen erlernen, wodurch sie in bestimmten Teilen über mangelndes Wissen verfügen.
Sommer
4

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

Littlemad
quelle
3

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.

rsdimitrov
quelle
"Ich möchte Ihre Aufmerksamkeit auf den Designteil des Webdesigns lenken." Oh mein Gott, wie viel Weisheit in dieser Zeit! Es gibt nicht genug fröhliche Gesichter auf dieser Seite: o)
Rafael
0

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.

Jeff
quelle
2
"Um ehrlich zu sein, würde ich zunächst lernen, wie man WordPress-Sites entwickelt. Ja, ich kann eine Site mit HTML, CSS, PHP ... codieren." Sie müssen sowohl mit CSS als auch mit HTML arbeiten, um eine WordPress-Site zu entwickeln.
e100 20.02.12
Ich bin anderer Meinung, das OP würde eher Regeln und Grundlagen lernen, die sich auf WordPress konzentrieren. Ein sauberes Grundwissen in der Sprache wird Sie langfristig weiterbringen, wenn Sie versuchen, andere Sprachen zu lernen oder Probleme zu lösen.
Sommer,
-3

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

Nicolò Borghi
quelle
2
Während dies theoretisch die Frage beantworten kann, wäre es vorzuziehen, wenn Sie ein paar Worte
hinzufügen