Webdesign lernen

PDF download PDF herunterladen
PDF download PDF herunterladen

Webdesign ist eine prima Fähigkeit, vor allem in der heutigen, durch das Internet bestimmten Welt. Wenn du wirklich gut bist, kannst du mit Kunden Geld verdienen, Mitgliederseiten erstellen und andere Projekte verfolgen, die Geld einbringen. Wenn du wissen möchtest, wie du Webdesign lernst, bist du hier richtig!

Teil 1
Teil 1 von 3:

Der Anfang

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/87\/Learn-About-Web-Design-Step-1.jpg\/v4-460px-Learn-About-Web-Design-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/87\/Learn-About-Web-Design-Step-1.jpg\/v4-728px-Learn-About-Web-Design-Step-1.jpg","smallWidth":460,"smallHeight":317,"bigWidth":728,"bigHeight":501,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Webdesign ist nicht das Design von Büchern oder Postern, es ist keine Illustration und Webdesign strebt nicht die höchsten Erfolge dieser Kategorien an. Auch wenn Webseiten Spiele und Videos überbringen können und auch wenn diese hübsch anzuschauen sein können, sind solche Seiten Exemplare für Game Design und Video-Storytelling, aber nicht für Webdesign.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e8\/Learn-About-Web-Design-Step-2.jpg\/v4-460px-Learn-About-Web-Design-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e8\/Learn-About-Web-Design-Step-2.jpg\/v4-728px-Learn-About-Web-Design-Step-2.jpg","smallWidth":460,"smallHeight":291,"bigWidth":728,"bigHeight":460,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Webdesign bedeutet die Erstellung digitaler Umgebungen, die:
    • menschliche Aktivitäten erleichtern und fördern
    • individuelle Meinungen und Content widerspiegeln oder übernehmen
    • sich im Lauf der Zeit verändern, dabei aber immer ihre Identität behalten
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/44\/Learn-Web-Design-for-Free-Step-1.jpg\/v4-460px-Learn-Web-Design-for-Free-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/44\/Learn-Web-Design-for-Free-Step-1.jpg\/v4-728px-Learn-Web-Design-for-Free-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Die wichtigsten Ressourcen sind Webseiten, Videos und Bücher. Beliebte Webseiten sind Codecademy und W3Schools. Es gibt jedoch noch viel mehr, also experimentiere ruhig!
    • Registriere einen Account, wenn du dich für eine Webseite entschieden hast. Du kannst so deinen Fortschritt speichern.
    • Wenn du Videos gewählt hast, setze bei allen benötigten Videos ein Lesezeichen.
    • Gehe in die Bücherei oder in den Buchladen, wenn du dich für Bücher als Ressource entschieden hast. Wenn du etwas Günstigeres (oder sogar Kostenloses) möchtest, lade E-Books oder PDF-Dateien herunter.
    • Wenn du bereit bist, etwas zu bezahlen, könntest du individuellen Unterricht von einem professionellen Webdesigner bekommen.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e2\/Learn-Web-Design-for-Free-Step-2.jpg\/v4-460px-Learn-Web-Design-for-Free-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e2\/Learn-Web-Design-for-Free-Step-2.jpg\/v4-728px-Learn-Web-Design-for-Free-Step-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Du musst herausfinden, wie dies in deinen Tag passt, wenn du viel zu tun hast.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/87\/Learn-Web-Design-for-Free-Step-3.jpg\/v4-460px-Learn-Web-Design-for-Free-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/87\/Learn-Web-Design-for-Free-Step-3.jpg\/v4-728px-Learn-Web-Design-for-Free-Step-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Während Notepad funktioniert, ist es eine gute Idee, ein Programm wie Adobe Dreamweaver, Microsoft Expression Web oder KompoZer zu haben. Es gibt viele, viele andere, schau dich also ein wenig um und hole dir, was dir gefällt.
    Werbeanzeige
Teil 2
Teil 2 von 3:

Lernen

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b5\/Learn-Web-Design-for-Free-Step-4.jpg\/v4-460px-Learn-Web-Design-for-Free-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b5\/Learn-Web-Design-for-Free-Step-4.jpg\/v4-728px-Learn-Web-Design-for-Free-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Fange mit HTML an . HTML ist für jeden Webdesigner absolut notwendig. Meistere Tags, Klassen, IDs, Eingaben etc.
    • Die neueste Version von HTML ist HTML5. HTML5 enthält einige neue Technologien, daher ist es vermutlich die beste Version, die du dir aneignen solltest.
    • XHTML ist ebenfalls eine Option, aber ein wenig strikter in den Regeln.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5d\/Learn-Web-Design-for-Free-Step-5.jpg\/v4-460px-Learn-Web-Design-for-Free-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5d\/Learn-Web-Design-for-Free-Step-5.jpg\/v4-728px-Learn-Web-Design-for-Free-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    CSS steht für "Cascading Style Sheet". Ohne CSS gäbe es nicht die schönen Designs, die du auf manchen Webseiten siehst. HTML ist nur das Skelett, aber CSS macht daraus eine bunte, schöne Webseite.
    • CSS ist ein wenig strikter in den Regeln. Wenn du z. B. vergessen hast, am Ende einer Zeile einen Strichpunkt zu setzen, könntest du einiges an Kopfschmerzen bekommen, wenn du herausfindest, was schief gegangen ist.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d8\/Learn-Web-Design-for-Free-Step-6.jpg\/v4-460px-Learn-Web-Design-for-Free-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d8\/Learn-Web-Design-for-Free-Step-6.jpg\/v4-728px-Learn-Web-Design-for-Free-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dies ist optional, wenn du einfache Webseiten erstellen willst, aber wenn du interaktive Webseiten möchtest, dann ist es wichtig.
    • Wenn du jQuery nutzen wirst, brauchst du nur Grundlagenwissen in JavaScript, weil jQuery die Dinge ziemlich einfach macht.
    • Mit jQuery kannst du Widgets wie Akkordeon-Menüs, einen Kalender etc. einfügen. Es gibt auch verschiedene Stile, daher kannst du dir den für deine Webseite gewünschten Stil aussuchen.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a3\/Learn-Web-Design-for-Free-Step-7.jpg\/v4-460px-Learn-Web-Design-for-Free-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a3\/Learn-Web-Design-for-Free-Step-7.jpg\/v4-728px-Learn-Web-Design-for-Free-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Es gibt PHP, MySQL , Perl, Ruby und ein paar andere. Auch hier gilt, dass dies für einfache Webseiten optional ist, aber für interaktive, große Webseiten sehr nützlich.
    • Für manche dieser Sprachen, wie für PHP, brauchst du einen Testserver, stelle also sicher, dass du einen Account bei einem Webhoster hast, oder installiere Server-Software auf deinem Computer.
    Werbeanzeige
Teil 3
Teil 3 von 3:

Dein Wissen anwenden

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b0\/Learn-Web-Design-for-Free-Step-8.jpg\/v4-460px-Learn-Web-Design-for-Free-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b0\/Learn-Web-Design-for-Free-Step-8.jpg\/v4-728px-Learn-Web-Design-for-Free-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Experimentiere einfach und erstelle Webseiten von Grund auf. Dies hilft dir, dein Wissen umzusetzen, statt es in deinem Gehirn Rost ansetzen zu lassen.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/50\/Learn-Web-Design-for-Free-Step-9.jpg\/v4-460px-Learn-Web-Design-for-Free-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/50\/Learn-Web-Design-for-Free-Step-9.jpg\/v4-728px-Learn-Web-Design-for-Free-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Du könntest sie kostenlos erstellen, um ein wenig Erfahrung zu sammeln!
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/ff\/Learn-Web-Design-for-Free-Step-10.jpg\/v4-460px-Learn-Web-Design-for-Free-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/ff\/Learn-Web-Design-for-Free-Step-10.jpg\/v4-728px-Learn-Web-Design-for-Free-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Erstelle deine eigene Webseite . Sie kann sich um alles drehen, was du möchtest, aber du bekommst damit die Gelegenheit, deine Arbeit der Öffentlichkeit zu zeigen.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6f\/Learn-Web-Design-for-Free-Step-11.jpg\/v4-460px-Learn-Web-Design-for-Free-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6f\/Learn-Web-Design-for-Free-Step-11.jpg\/v4-728px-Learn-Web-Design-for-Free-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Berechne ein angemessenes Honorar und poste ein Portfolio auf deiner Seite. Deine Firma wächst vielleicht irgendwann zu einem ausgewachsenen Unternehmen heran.
    Werbeanzeige

Tipps

  • PDF-Dateien sind etwas vielseitiger als E-Books. PDFs kannst du auf jedem Computer lesen, während du für E-Books normalerweise ein bestimmtes Gerät wie einen Kindle, ein iPad etc. brauchst.
  • Lass dir Zeit! Wenn du alles in sechs Stunden in dich aufnehmen willst, wirst du es sehr schnell vergessen.
  • Glaube nicht, dass du für einen guten HTML Editor bezahlen musst. Es gibt kostenlose, die genauso gut sind wie die, die hunderte Euro kosten.
  • Wenn du ein Projekt fertiggestellt hast, nimm einen Teil des Codes und mache eine Bibliothek daraus. So kannst du verhindern, dass du in jedem Projekt immer das Gleiche eintippen musst. Wenn sie groß wird, könntest du sie sogar verkaufen!
  • Wenn du einen Freund oder jemanden in der Familie hast, der Webdesign kann, bitte ihn, dir Unterricht zu geben. Er sollte es (hoffentlich) kostenlos machen.
Werbeanzeige

Warnungen

  • Überarbeite dich nicht! Wenn du müde bist, vergisst du Dinge und lernst gar nichts.
  • In Skript-Sprachen gibt es eine sogenannte Endlosschleife. Endlosschleifen sind unter Programmierern gefürchtet, pass also auf, dass dir dies nicht passiert!
  • Wenn du dich auf einer Webseite registrierst, recherchiere zuerst ein wenig. Wenn es natürlich eine bekannte Webseite ist, solltest du dir keine großen Gedanken machen müssen, aber weniger bekannte könnten auch von Betrügern sein, die nur Geld machen wollen.
  • Pass beim Download von Programmen auf! Alles könnte ein Virus sein.
Werbeanzeige

Was du brauchst

  • Einen Computer
  • Ein Webdesign-Programm
  • Tutorial-Webseiten, Bücher oder Videos

Verwandte wikiHows

Kostenlos jedes Video von jeder Webseite herunterladen
Jemanden leicht mittels einer Bildersuche finden
Ein Facebook-Profil ansehen, ohne angemeldet zu sein
Bumble Premium kostenlos bekommen
Cookies deaktivieren
Tipps zur Fehlerbehebung, wenn du eine bestimmte Webseite nicht aufrufen kannst
Kurze URL Links generieren
Lustige, freche und kreative Bumble-Bios für Frauen
Was bedeuten all die lächelnden Emojis Gesichter?
Eine Webseite in die Favoriten aufnehmen
Wie man jemanden auf Tinder findet: 5 Dinge zum ausprobieren
Den Browserverlauf im WLAN Router überprüfen
Ein Buch auf Amazon veröffentlichen
NSFW Content auf Reddit aktivieren
Werbeanzeige

Über dieses wikiHow

In anderen Sprachen
Diese Seite wurde bisher 13.818 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige