Hast du jemals mit dem Kopf genickt, um zu zeigen, dass du etwas verstehst, obwohl das gar nicht stimmte? Und dann dachtest du: Oh, mein Gott, warum habe ich das getan? Denn das Nächste, was du weißt, ist, dass dir eine Frage dazu gestellt wurde, oder schlimmer noch, dir wurde eine Aufgabe zugewiesen in genau dem Bereich, wo du nur so getan hast, als hättest du Ahnung. Ein Albtraum! Aber du hast Glück: Wenn du weiterliest, wirst du dieses Problem nicht mehr haben, wenn es um CSS, HTML und Javascript geht. In anderen Bereichen deines Lebens wirst du vielleicht immer noch so tun als ob, zum Beispiel, um dein Date zu beeindrucken. Etwa so: "Oh ja, ich liebe diese Band" (*googelt Band im Badezimmer*). Übrigens solltest du wirklich damit aufhören, aber hey, eins nach dem anderen, wir sind alle nur Menschen ;).
Wie auch immer, kommen wir zur Sache, oder? Wenn du schon mal mit dem Gedanken gespielt hast, eine eigene Website zu erstellen, oder jemals eine Website verwalten musstest, bist du höchstwahrscheinlich mit HTML, CSS und Javascript in Berührung gekommen. Das sind die drei Hauptbausteine jeder Website oder Homepage. Sie greifen ineinander, spielen jedoch, wie wir erklären werden, alle eine unterschiedliche Rolle, wenn es um Coding und Webdesign geht.
Was ist HTML?
Vielleicht hast du irgendwann in deinem Leben schon einmal auf das kleine HTML-Symbol (</>) geklickt und eine ganze Menge verwirrenden Text und wie zufällig verstreute Symbole entdeckt, sodass du das Gefühl hattest, in einer konfusen Low-Budget-Version von „The Matrix“ gelandet zu sein. Und dann hast du ein paarmal Esc gedrückt in der Hoffnung, dass das alles verschwindet? Hast du gebetet, du hättest nichts vermasselt? Das, mein Freund, ist die Welt von HTML. Wir können dir aber versprechen, dass es nicht so verwirrend oder gar beängstigend ist, wie es aussieht. Sobald du es verstanden hast, ist es einfach eine andere Sprache und eine andere Welt, die du schätzen und vielleicht sogar lieben wirst. Beginnen wir also mit der Bezeichnung HTML: Es ist die Abkürzung für „Hypertext Markup Language“. Ein Hypertext ist im Wesentlichen ein Text mit einer durch Links verbundenen netzförmigen Struktur. Und Markup Language ist eine spezielle Sprache oder Inhalte, die Computer verstehen und die ursprünglich entwickelt wurde, um Webseiten zu beschreiben und Inhalte interaktiv zu machen. Der HTML-Code ist das Skelett einer Website. HTML wurde 1989 als offizielle Sprache des World Wide Web eingeführt und ist der erste Baustein zur Erstellung von Websites. Es gibt drei Hauptelemente von HTML: Tags, Elemente und Attribute. Die neueste Version ist HTML5. HTML5 hat alle ursprünglichen Funktionen von regulärem HTML, ist aber dynamischer und enthält viel weniger Code – und es ermöglicht es dir, in kürzester Zeit etwas Brillantes zu bauen!
Was ist CSS?
CSS ist zwei unterschiedliche Dinge. Es ist eine Killergirl-Alternative-Rockband aus den 2000er-Jahren, die wir dir dringend empfehlen, weil sie total groovt! Aber das andere CSS, um das es hier geht und von dem du bestimmt auch schon gehört hast, ist ein wesentlicher Baustein für die Codierung einer Website.
CSS steht in der Tech-Welt für „Cascade Styling Sheets“ (wie cool ist das denn?!). Wie der Name schon sagt, definiert CSS das Aussehen und den Style einer Website. Es hilft bei der Bestimmung von Dingen wie Farbe, Schriftart und Positionierung bestimmter Elemente. Und CSS schafft sogar auch ein bisschen Animation. CSS macht also einen ziemlich wichtigen Teil einer Website aus, nämlich die visuellen Elemente und die Ästhetik. CSS folgte nach der Erfindung von HTML, um Websites optisch schöner zu gestalten. Und tatsächlich würde sonst alles gleich aussehen: schwarze Schrift auf weißem Grund mit einigen blauen Hyperlinks dazwischen, Schriftart Times New Roman. (LANGWEILIG!) Wenn also HTML das Skelett ist, ist CSS Haut, Augen, Haare, Nase und Füße einer Website, die sie einzigartig und unterscheidbar machen.
Obwohl HTML und CSS gut zusammenarbeiten, sind sie ziemlich unterschiedliche Sprachen. Und wenn du beide lernst, kannst du sie auch separat verwenden, da beide eine Vielzahl von verschiedenen Anwendungen haben! Du kannst dich auf diese beiden Sprachen konzentrieren und mit unserem Experten Uros Cirkovic in nur 60 Minuten KOSTENLOS eine Website erstellen. Klingt ziemlich gut – fast ein bisschen zu gut? Wir versprechen dir, dass du keine bösen Überraschungen erfahren wirst, sondern nur exzellentes Wissen. Und am Ende hast du deine ganz eigene Website. Interessiert? Hier findest du die Anleitung: "So erstellst du eine Website mit HTML und CSS in 60 Minuten"
k., wir sind schon fast da ...
Was ist Javascript?
Hier wird es ein bisschen komplizierter. Javascript gibt es auf fast jeder funktionsfähigen Website. Javascript macht es möglich, Websites dynamisch und interaktiv zu gestalten. Es ist die Sprache, die Entwickler verwenden, um Websites zu erstellen, die auf die Befehle und Bewegungen des Users reagieren. Und Javascript kann dir es tatsächlich auch ermöglichen, HTML und CSS auf einer Website zu ändern. Es ist wie ein Puppenspieler.
Mit Javascript kannst du beispielsweise Folgendes tun:
Spiele eine Vorschau ab, wenn der Mauszeiger über ein Video fährt.
Spiele eine Animation ab, wenn du nach unten scrollst.
Lass ein Menü erscheinen, wenn du eine Taste auf der Tastatur drückst.
Erstelle Tastenkombinationen für deine Website.
Erstelle eine bewegliche Fotogalerie, damit User zwischen den Slides wechseln können.
Und die Liste ist noch viel länger ...
Wie arbeiten HTML, CSS und Javascript zusammen?
Ein kurzes Beispiel: Wenn du etwa einen Onlineshop für Mode hast und das Erste, was du auf der Website siehst, ist ein Popup mit "10 % Rabatt, wenn Sie sich heute anmelden" – das ist Javascript. Demgegenüber ist HTML der Preis, die Größen, die Beschreibung, das Bild des Artikels usw., und CSS ist das Aussehen deines Onlineshops, die Farben, die Schriftart, die Bildgröße, die Boards und vieles mehr.
Nachdem du nun den Unterschied zwischen HTML, CSS und Javascript kennst und weißt, wie sie einander ergänzen, haben wir hier noch einige wichtige Tipps für die Planung deiner Website. Denke immer daran: Dies ist ein Prozess, den du wirklich genießen kannst!
Gefällt dir dieser Artikel? Lerne mehr über Webentwicklung!
Mache den ersten Schritt in Richtung Tech und erfahre mehr über unser Web Development Bootcamp.
Lade den Lehrplan herunter.
8 Tipps, die du befolgen musst, um eine Website von Grund auf zu erstellen:
Auswählen!
Wähle aus, was du in die Praxis umsetzen möchtest, z. B. einen Lebenslauf, ein Portfolio oder eine Landingpage über ein bestimmtes Serviceangebot.
Könntest du dich bitte nicht darauf konzentrieren, wie es in dieser Phase aussieht?
Nimm hier sofort Druck raus! Du wirst deine Website bald "aufpolieren" können, aber in dieser Phase musst du erst einmal Struktur und Inhalt sortieren.
Raus damit!
Es gibt einen Grund für das Wort Entwurf; dieser ist eine grobe Materialisierung deiner brillanten Idee, die bald zur vollen Verwirklichung kommt. Betrachte die Skizze als Rohdiamanten, der bald poliert wird.
Denke über die Struktur nach
Du kannst dir jederzeit andere Websites ansehen, um dich inspirieren zu lassen, aber halte es für den Anfang simpel. Überlege dir beispielsweise, wo sich die Hauptnavigation befinden und was im Footer angezeigt werden soll. Ehrlich gesagt, greifen viele von uns Entwicklern einfach zu Stift und Papier und zeichnen es auf, um sich das grundlegende Layout vorzustellen. (Viele von uns zeichnen immer noch schlechter als Siebenjährige, also erwarte kein Meisterwerk; das brauchst du hier auch gar nicht.)
Nutze deine Fähigkeiten als Texter!
Du kannst erst einmal überall „Lorem ipsum“ als Blindtext einfügen, aber wenn dir hier bereits erste Ideen kommen, solltest du sie zumindest grob notieren. Das erspart es dir, zurückzugehen: Der Text ist schon da und wartet nur darauf, noch besser ausformuliert zu werden. Wenn du dich zum Beispiel dafür entscheidest, dein Portfolio als Website umzusetzen, solltest du auch in ein paar Zeilen sagen, was du tust und wer du bist, in welchem Bereich du arbeitest, welche Ausbildung und welche Arbeitserfahrung du hast.
Checke vorab einige mögliche Designs.
Führe einige Recherchen zur visuellen Inspiration durch. Wenn es um CSS geht, musst du über das Design selbst nachdenken, also über Breite, Höhe, Rand, Padding, Position, Hintergrundfarbe, Schriftgröße usw. Daher empfehlen wir dir, einige Websites zu besuchen, die dir gefallen und als Bezugspunkte dienen, um ein klareres visuelles Konzept zu entwickeln.
Baue deine Website, indem du dir unser Webinar ansiehst :)
Lass dich von uns unterstützen! Vertraue uns. Das macht es viel einfacher. Und wir sind wirklich freundlich :). Wir sind sicher, dass es Spaß macht, mit Ironhack Lernerfahrungen zu sammeln. Hier kannst du Wissen einfach absorbieren, anstatt dir alles selbst anzulesen und alles selbst auszuprobieren. Unser Webinar ist fast wie ein Privatunterricht – und in nur 60 Minuten bist du fertig!
Zelebrieren!
Oh ja, du hast es geschafft! Wie auch immer die Seite im Moment aussieht: Du hast einen Riesensprung gemacht! Um diesen Prozess noch angenehmer zu gestalten, ist es Zeit, zu feiern! Möchtest du ein Glas Wein trinken? Tanzt du in deinem Zimmer zu deinem Lieblingssong? Umarmst du jemanden, den du liebst? Was auch immer deine Form des Zelebrierens ist: Wir empfehlen es dringend!
Jetzt, wo du diesen Artikel gelesen und ein oder zwei grundlegende Dinge über das Erstellen einer Website erfahren hast, denkst du vielleicht: „Das ist interessant“, „Das gefällt mir“, „Ich könnte das beruflich machen“. Überlege mal, wie viel du dann feiern würdest. Nein, ganz ehrlich: Du kannst daraus ernsthaft deinen Beruf machen und ein absoluter Profi werden. (Glaube uns, du wirst sehr gefragt sein!) Besuche unsere Bootcamps, wenn du große Träume hast und ein Meister in Webentwicklung werden möchtest!
