Website programmieren: So gehen Sie vor

Als jemand, der sich selbst erst einmal in der komplexen Welt der Webentwicklung zurechtfinden musste, weiß ich, wie schwierig es ist, das Programmieren einer Website zu lernen – und das auch noch kostenlos. Das Internet ist meine Anlaufstelle für alles, von der Suche nach den besten Restaurants in der Nähe bis zum Erlernen der Kunst des Webdesigns. Daher möchte ich nun Sie auf diesem Weg begleiten.

Wenn Sie eine Website kostenlos erstellen möchten, geht es Ihnen in der Regel nicht nur darum, Kosten zu sparen, sondern Ihnen ist vor allem wichtig, sich in unserer digitalen Welt zu behaupten. Egal, ob Sie in einem kleinen Unternehmen tätig sind, das eine erste Online-Präsenz aufbauen möchte, oder wie ich einst neugierig darauf sind, Neues zu lernen – lassen Sie mich meine Erfahrungen teilen, die ich auf meinem Weg gewonnen habe.

Häufige Fragen zum Programmieren einer Website

Beginnen wir mit zwei häufigen Fragen, die sich viele Menschen stellen, wenn sie mit der Webentwicklung beginnen.

1. Wie lange dauert das Einrichten einer Website?

Antwort: Das ist je nach Komplexität sehr unterschiedlich. Für eine einfache Homepage reichen vielleicht ein paar Stunden, während eine umfangreiche E-Commerce-Website Wochen oder mehr in Anspruch nehmen kann. Denken Sie daran, dass eine Website im Laufe der Zeit weiterentwickelt wird; ein einfacher Anfang ist völlig in Ordnung.

2. Muss ich programmieren können, um eine Website zu erstellen?

Antwort: Nicht unbedingt. Beim Erstellen einer Website haben Sie zwei Möglichkeiten: Sie können einen Website-Builder verwenden oder von Grund auf neu programmieren. Lassen Sie mich die Unterschiede für Sie kurz aufschlüsseln.

Website-Builder: Der schnelle und benutzerfreundliche Weg

CMS-Plattformen wie Content Hub von HubSpot bieten benutzerfreundliche Oberflächen. Viele CMS bieten Drag-and-Drop-Funktionen, mit denen Sie Elemente (z. B. eine Schaltfläche) einfach an der gewünschten Stelle auf der Seite positionieren können. Wenn Sie jedoch die Grundlagen von HTML und CSS verstehen, haben Sie damit deutlich mehr Möglichkeiten zur individuellen Gestaltung.

Programmieren von Grund auf: Der Weg zur Individualisierung

Auf der anderen Seite ist die Programmierung einer Website von Grund auf mit HTML, CSS und möglicherweise JavaScript vergleichbar mit dem Selbstkochen eines Gerichts. Das kostet mehr Zeit und Mühe, aber das Ergebnis ist eine Website, die genau auf Ihren Geschmack und Ihre Bedürfnisse zugeschnitten ist.

Wenn Sie das Programmieren lernen, haben Sie die vollständige Kontrolle über Ihre Website. Sie sind nicht auf die Vorlagen oder Funktionen eines Website-Baukastens beschränkt. Dieser Weg gibt Ihnen leistungsstarke Möglichkeiten in der Anpassung, um Ihr Design einzigartig zu machen.

Website-Builder oder komplett neu programmieren

Wenn Sie es eilig haben oder sich nicht in eine Programmiersprache einarbeiten wollen, sehen Sie sich unsere Liste der besten Website-Builder an. Sie sind eine gute Ausgangsbasis.

Wenn Sie jedoch eine Herausforderung suchen und eine ganz eigene Website erstellen möchten, dann ist die Programmierung der richtige Weg für Sie. Wenn Sie bereit sind, Website-Entwicklung zu lernen, lassen Sie uns diesen Prozess gemeinsam durchgehen.

Webentwicklung lernen

Füllen Sie dieses Formular aus, um den kostenlosen Leitfaden zu erhalten.

• Methoden zum Lernen von Webentwicklung
• Programmiersprachen in der Webentwicklung
• Trends in der Webentwicklung
• Hilfreiche Tipps und Ressourcen

Jetzt kostenlos herunterladen

So programmieren Sie eine Website

1. Code-Editor wählen
2. HTML schreiben
3. CSS-Stylesheet erstellen
4. HTML und CSS zusammenfügen
5. Responsive oder statische Website erstellen
6. Einfache oder interaktive Website erstellen

1. Code-Editor auswählen

Ich möchte Ihnen zunächst einen kleinen Einblick in meinen Programmierweg geben. Als ich als neuer Entwickler anfing, musste ich mich durch ein Labyrinth an Code-Editoren arbeiten. Es ist, als ob man das perfekte Paar Laufschuhe sucht – sie machen das Laufen einfach so viel angenehmer.

Ich weiß noch, wie froh ich war, als ich Visual Studio Code entdeckte. Es bietet Syntax-Vorschläge, so dass Sie einfache Tippfehler, die Probleme in Ihrem Code verursachen, vermeiden können. Darüber hinaus vervollständigt es automatisch schließende Tags für HTML und fügt visuelle Markierungen zu Ihren Dateien hinzu, so dass Sie verschiedene Codeteile leicht auseinanderhalten können.

Im Folgenden habe ich den Unterschied zwischen einem normalen Texteditor und einem Code-Editor hervorgehoben. Der Code funktioniert in beiden Dokumenten gleich, aber das eine ist gleich auf den ersten Blick viel einfacher zu verstehen als das andere.

Hier ein persönlicher Tipp: Ich neige zwar zu Visual Studio Code, aber die Welt der Technik ist groß. Es gibt zahlreiche kostenlose Code-Editoren, von denen jeder mit einzigartigen Funktionen aufwartet. Einige haben erstaunliche Erweiterungen, wie z. B. den Schalter für den Hell-Dunkel-Modus in Visual Studio Code. Entscheidend ist, dass Sie eine Lösung finden, die zu Ihrem Lern- und Codierungsstil passt.

Ich teile Screenshots aus Visual Studio Code, damit Sie in diesem Tool einfach folgen können, wenn wir uns im nächsten Schritt mit dem Programmieren befassen.

2. HTML verfassen

Jetzt ist es an der Zeit, die Ärmel hochzukrempeln und mit HTML loszulegen. Ich betrachte das gern als die Bausteine des Webs. Meine ersten Erfahrungen mit HTML haben sich wie das Erlernen einer neuen Sprache angefühlt, aber genau genommen geht es darum, die Struktur, den Rahmen des eigenen Hauses Stück für Stück zu errichten. Diese Metapher wird gerne bei HTML- und CSS-Schulungen verwendet, weswegen ich sie auch hier nutze.

Jetzt, da wir das richtige Tool haben und unser Ziel kennen, befassen wir uns mit dem Grund, aus dem Sie hier sind: dem Programmieren.

Erstellen Sie ein HTML-Dokument

1. Legen Sie dazu zunächst einen neuen Ordner auf Ihrem Computer an. Ich habe meinen Ordner „Demo“ genannt.
   
2. Öffnen Sie diesen Ordner in Ihrem Code-Editor.
3. Erstellen Sie eine neue Datei und nennen Sie sie z. B. „index.html“. Denken Sie daran: „.html“ ist hier der Schlüssel. Es ist, als würde man dem Browser sagen: „Hey, ich bin eine Webseite!“
   

Strukturieren Sie Ihr Dokument

Unsere Datei ist derzeit noch leer, also fügen wir die HTML-Dokumentenstruktur hinzu. Ich habe alles im folgenden Ausschnitt dargestellt, damit Sie es kopieren und in Ihre Datei einfügen (oder schreiben) können.

Lassen Sie uns jeden dieser Bausteine kurz betrachten:

• <!DOCTYPE html>: Das ist die Erklärung an den Browser, dass es sich um einen HTML-Dokumententyp handelt, damit er weiß, wie er unseren Code verarbeiten soll.

• <html lang=“en”>: Das öffnende Tag umschließt unseren gesamten HTML-Code, damit der Browser weiß, wo unser Code beginnt und wo er endet (beachten Sie das schließende Tag </html> ).
• <head>: Dieser Bereich wird nicht direkt auf der Webseite angezeigt, enthält aber wichtige Informationen wie Ihren Seitentitel, auch bekannt als Ihre Metadaten.
• <body>: Hier befinden sich alle Ihre Inhalte. Als Nächstes fügen wir Elemente hinzu.

Tipp: Wenn Sie mit der HTML-Syntax noch nicht so vertraut sind, empfehle ich Ihnen unseren HTML-Leitfaden als gute Möglichkeit, Ihre Kenntnisse aufzufrischen, bevor Sie fortfahren.

Fügen Sie Ihrer Seite Textinhalte hinzu

Jetzt ist es an der Zeit, Ihrer Website den persönlichen Touch zu geben. Ich habe den Inhalt unserer Webseite hinzugefügt, damit wir auch etwas zum Anschauen haben. Normalerweise beginne ich mit einer Überschrift (<h1>) und einem Absatz (<p>). Links sehen Sie das aktualisierte HTML unter <body> und rechts, was Besuchenden auf der Seite angezeigt wird.

See the Pen How to Code Website Example: Basic HTML Doc by HubSpot (@hubspot) on CodePen.

Profi-Tipp: Die Reihenfolge der Attribute innerhalb des HTML-Tags spielt keine Rolle, solange sie alle innerhalb des Tags stehen.

Überprüfen Sie Ihre Arbeit

Der Moment der Wahrheit: Wenn Sie es bis hierher geschafft haben, freuen Sie sich wahrscheinlich darauf, Ihre ganze Arbeit auf dem großen Bildschirm (auch Webbrowser genannt) zu sehen. Am einfachsten kehren Sie dazu zu Ihrem Datei-Explorer zurück und klicken mit der rechten Maustaste auf Ihre HTML-Datei:

Sobald Sie den Webbrowser Ihrer Wahl ausgewählt haben (ich empfehle Chrome, aber die anderen funktionieren auch), sollten Sie Ihre HTML-Datei wie eine Live-Webseite sehen können. Keine Sorge, das können vorerst nur Sie sehen.

Profi-Tipp: Wenn Sie zusätzliche Änderungen vornehmen, müssen Sie Ihre Datei speichern und die Seite anschließend aktualisieren, damit die Änderungen im Browser wirksam werden. Dies wird im nächsten Abschnitt, in dem wir uns mit der Änderung der Ästhetik unserer Seite befassen, von größerer Bedeutung sein.

3. CSS-Stylesheet erstellen

Jetzt können wir Ihrer Website mit CSS ein einzigartiges Styling und Aussehen verleihen. Stellen Sie sich Ihr HTML als die Struktur eines Hauses vor; CSS fügt dieser Struktur Farbe und Persönlichkeit hinzu. Als ich das begriff, hat alles, was mit Webdesign zu tun hat, bei mir Klick gemacht.

Quelle: onurdongel / iStock / Getty Images Plus

Tipp: Wenn Sie mit CSS nicht vertraut sind, empfehle ich Ihnen, unseren CSS-Leitfaden zu lesen, um sich mit Eigenschaften, Syntax, Selektoren und Spezifität vertraut zu machen.

CSS-Dokument erstellen

1. Erstellen Sie genau wie bei HTML eine neue Datei für CSS. Ich nenne meine normalerweise „style.css“, aber Sie können ihre Datei natürlich nennen, wie Sie wollen. Der wichtige Teil ist die Erweiterung „.css“.
2. Speichern Sie diese Datei in demselben Ordner wie Ihre HTML-Datei. Stellen Sie sich das so vor, als packen Sie alle Ihre Designtools in einen Werkzeugkasten – Ihren Ordner.

CSS-Regel hinzufügen

Fangen wir ganz einfach an. Ich erinnere mich, dass die erste Regel, die ich je geschrieben habe, darin bestand, die Textfarbe zu ändern. Es war wie ein Zauberstab.

Hier ist ein Beispiel:

Diese Regel zielt auf alle Absatzelemente (<p>) in Ihrem HTML und ändert deren Textfarbe in rot. Es ist erstaunlich, wie ein bisschen Farbe eine Seite verwandeln kann.

Sie werden feststellen, dass auf der Seite erst einmal nichts passiert, nachdem Sie diese CSS-Regel zu Ihrer Datei hinzugefügt haben. Das liegt daran, dass wir unser HTML und CSS noch miteinander verknüpfen müssen, was wir uns im nächsten Abschnitt ansehen werden.

4. HTML und CSS zusammenstellen

Nun ist es an der Zeit, Ihr HTML und CSS zusammenzubringen. Damit verleihen Sie Ihrer Website ihre einzigartige Persönlichkeit.

CSS mit HTML verknüpfen

Damit Ihre CSS-Stile auf Ihr HTML angewendet werden, müssen Sie sie über Links miteinander verknüpfen. Dies geschieht mit einer einfachen, aber entscheidenden Zeile im Abschnitt <head> Ihrer HTML-Datei. So wird's gemacht:

Weitere CSS-Regeln

Nach der Verlinkung werden auf Ihrer Webseite die in Ihrer CSS-Datei definierten Styles angezeigt. Ich stelle mir das gerne so vor, dass eine Schwarz-Weiß-Zeichnung mit Farbe ausgefüllt wird.

See the Pen How to Code Website Example: More CSS Rules by HubSpot (@hubspot) on CodePen.

Hier ist ein Beispiel dafür, wie Sie Ihrer Website mehr Persönlichkeit verleihen können:

• Ändern Sie die Hintergrundfarbe Ihrer Webseite.
• Passen Sie die Schriftgröße Ihrer Überschriften an.
• Wenden Sie verschiedene Farben auf Text mit Hilfe von Klassenselektoren an.

Für mich war dieser Schritt der wirkungsvollste. Damit wurden meine einfachen Webseiten komplett verwandelt. Sehen wir uns nun an, wie Sie Ihre Webseite mit diesen neuen Styles aufpeppen können.

Profi-Tipp: Denken Sie daran, dass Sie für bestimmte Stile, die Sie mit Hilfe von Klassen oder IDs in Ihrem CSS anwenden möchten, diese Klassen oder IDs zu den entsprechenden Elementen in Ihrem HTML hinzufügen müssen.

Webentwicklung lernen

Füllen Sie dieses Formular aus, um den kostenlosen Leitfaden zu erhalten.

• Methoden zum Lernen von Webentwicklung
• Programmiersprachen in der Webentwicklung
• Trends in der Webentwicklung
• Hilfreiche Tipps und Ressourcen

Jetzt kostenlos herunterladen

5. Responsive Website oder statische Website einrichten

Um responsives Webdesign zu erklären, möchte ich gerne eine weitere Metapher verwenden. Stellen wir uns einen Teich vor. Das Wasser im Teich hat immer die gleiche Form, da sich die Ufer des Teiches nicht verändern. Auf der anderen Seite haben wir einen Fluss. Die Ufer des Flusses verändern sich durch das fließende Wasser ständig, der Fluss dehnt sich aus und verengt sich, um sich dem Flussbett anzupassen.

Ich betrachte statische und responsive Websites auf dieselbe Weise. Die statische Website reagiert nicht auf eine Änderung der Browsergröße. Der Inhalt hat immer die gleiche Form. Dagegen passt sich die responsive Website ständig an verschiedene Browser und Bildschirmgrößen an.

Bis jetzt haben wir eine statische Website erstellt. Die Größe der Textelemente wird standardmäßig angepasst, aber andere Elemente behalten ihre ursprüngliche Form und Größe bei, egal wie sich die Anzeige ändert.

Hier sehen wir, dass die rechte Seite unseres Smileys abgeschnitten ist, weil das Ansichtsfenster jetzt schmaler ist als seine feste Breite von 300 Pixeln (beachten Sie aber, dass ein Zeilenumbruch eingefügt wurde, um den Text unseres Absatzes passend zu machen).

Meta-Viewport-Tag

Warum ist responsives Verhalten wichtig? Als ich meine Website zum ersten Mal auf einem Handy anschaute und zum Lesen heranzoomen musste, wusste ich, dass ich etwas ändern musste. Dann habe ich vom Tag <meta name="viewport" content="width=device-width, initial-scale=1"> erfahren.

Fügen Sie diesen Tag zu Ihrem HTML <head> hinzu. So wird sichergestellt, dass Ihre Website für jedes Gerät korrekt angepasst und ausgespielt wird.

Das sieht schon besser aus, und jetzt können wir sicher sein, dass sich unsere Seite auf allen Geräten und Bildschirmgrößen einheitlich verhält, was eine Menge Frust erspart. Jetzt können wir unsere Webseite mit Hilfe von Medienabfragen und Fluid-Design-Praktiken für Mobilgeräte optimieren.

Medienabfragen

Eine Medienabfrage ist eine CSS-Regel, die das CSS anweist, sich je nach Breite des Viewports (d. h. der Breite des Bildschirms bzw. Browsers, in dem die Webseite angezeigt wird) unterschiedlich zu verhalten. Sie legen die Breite fest und bestimmen, wie sich das CSS ändert.

Ich habe zum Beispiel die Breite unseres Smileys auf 400 Pixel erhöht, damit es auf größeren Bildschirmen mehr Präsenz hat. Ich möchte jedoch sicherstellen, dass es auf kleineren Bildschirmen nicht abgeschnitten wird. Ich habe also eine Medienabfrage geschrieben, die besagt, dass die Breite des Smileys auf 300 Pixel reduziert wird, sobald der Bildschirm 400 Pixel oder kleiner ist.

Ich habe die Medienabfrage an das Ende unseres CSS-Stylesheets angefügt. Stellen Sie sicher, dass Sie sie immer nach Ihren regulären CSS-Regeln einfügen und gruppieren Sie sie nacheinander. Zum Beispiel kommt eine 500-Pixel-Medienabfrage vor einer 400-Pixel-Medienabfrage.

See the Pen How to Code Website Example: Media Query by HubSpot (@hubspot) on CodePen.

Fluid Design (flüssiges Design)

Medienabfragen funktionieren am besten, wenn wir feste Breiten für unsere Elemente beibehalten wollen. Wie Sie oben gesehen haben, wollte ich, dass mein Smiley 400 Pixel breit angezeigt wird und dann wieder auf 300 Pixel skaliert wird. Doch was passiert, wenn der Bildschirm eine Breite von 300 Pixeln erreicht? Dann bräuchte ich eine weitere Medienabfrage, um die Größe wieder zu reduzieren.

Ein alternativer Ansatz ist das Fluid Design (flüssiges Design). Fluid Design bedeutet die Verwendung relativer Einheiten wie Prozentwerte anstelle von festen Pixeln. Also man sorgt zum Beispiel dafür, dass das Bild 50 Prozent des Bildschirms einnimmt, unabhängig davon, wie groß oder klein der Bildschirm ist. Auf diese Weise müssen Sie nicht mehrere Medienabfragen schreiben. Es geht darum, dass Ihre Website sich wie ein Fluss verhält und sich in den ihr gegebenen Raum einfügt.

In meinem Code ist die Umgebung für das Smiley-Bildelement der Body, ein Container, der sich über die gesamte Seite erstreckt. Die relative Einheit, die wir verwenden, ist der Prozentsatz, um mein Smiley-Gesicht auf diesen Anteil der Breite des Körpers zu setzen. Wenn der Textkörper beispielsweise 400 Pixel breit ist und das Smiley auf 50 Prozent der Containerbreite eingestellt ist, dann wird es 200 Pixel breit.

See the Pen How to Code Website Example: Relative Units by HubSpot (@hubspot) on CodePen.

Jetzt brauche ich keine Medienabfrage mehr; das Smiley wird immer so skaliert, dass es den Container bis zur angegebenen Menge ausfüllt. Eben: flüssig. Dennoch sollten Sie Medienabfragen noch nicht ganz abschreiben.

Verwenden von Medienabfragen und Fluid Design

Obwohl sie auf den ersten Blick als Gegensätze erscheinen, lassen sich Medienabfragen und flüssiges Design gut kombinieren, um eine responsive Gestaltung zu erreichen.

Ein beliebter Trick von mir ist die Verwendung der CSS-Eigenschaft „max-width“ (maximale Breite), die auf eine maximale Pixelanzahl eingestellt ist, zusammen mit einer „width“ (Breite), die auf einen Prozentsatz eingestellt ist. Nehmen Sie das folgende Beispiel.

See the Pen How to Code Website Example: Media Query and Relative Units by HubSpot (@hubspot) on CodePen.

Ich habe mein Smiley zunächst auf eine feste Breite von 400 Pixeln eingestellt. Dann skaliere ich es zurück auf 300 Pixel, wenn der Viewport 400 Pixel erreicht. Dann habe ich es auf eine maximale Breite von 300 Pixel eingestellt, aber so, dass es immer auf 100 Prozent der verfügbaren Breite des Containers für alle Bildschirme, die kleiner als 300 Pixel sind, skaliert.

6. Einfache Website oder interaktive Website einrichten

Auch für diesen Abschnitt – Sie ahnen es vielleicht schon – ziehe ich eine Metapher heran. Stellen Sie sich vor, Sie stehen auf der Straße und sehen an einer Hauswand ein Flugblatt für Gitarrenunterricht. Sie sind interessiert, und auf dem Flugblatt steht eine Telefonnummer zur Anmeldung.

Dies ist das, was wir als eine einfache Website bezeichnen würden. Sie zeigt Informationen über etwas an und kann Sie sogar zu einer Aktion auffordern, aber das Lesen ist das Äußerste, was Sie auf der Website tun können. Sie müssen die Nummer mit Ihrem Telefon anrufen.

Jetzt stehen wir wieder vor der Hauswand. Dieses Mal sehen wir ein Schild, auf dem Gitarrenunterricht angeboten wird, daneben ist eine Tür, durch die man das Studio betreten kann, um sich bei Interesse gleich anzumelden. Die Wand zeigt immer noch Informationen an, aber jetzt können Sie sozusagen mit ihr interagieren, um gleich den nächsten Schritt zu tun. Dies ist das, was wir als interaktive Website bezeichnen würden. Sehen Sie, woher die Bezeichnung kommt?

Gestatten, JavaScript

Bis zu diesem Punkt haben wir eine Website erstellt, die wie unser Flyer ist – informativ und statisch. Aber im Internet geht es heute vor allem um Interaktionen, und da kommt JavaScript ins Spiel.

JavaScript bringt Leben in Ihre Website. Es ist, als würde man ein Gemälde in einen Film verwandeln. Sie ermöglicht es Ihrer Website, auf Benutzeraktionen wie Klicks, Scrollen oder Tastatureingaben zu reagieren.

Ihr erstes JavaScript-Programm

Leider sprengt es den Rahmen dieses Beitrags, uns mit der Syntax und den Mechanismen von JavaScript zu beschäftigen. Stattdessen stelle ich Ihnen ein vorgefertigtes Programm zur Verfügung, so dass wir uns auf die Implementierung innerhalb unserer Website konzentrieren können.

Dieser Code findet ein Bild mit der ID „smiley“ und führt eine Aktion aus, wenn es angeklickt wird – in diesem Fall erscheint eine Willkommensnachricht.

Ich zeige Ihnen das mal in Aktion.

Hinzufügen von JavaScript zu Ihrer Seite

Um JavaScript einzubinden, verwenden Sie einen <script> Tag in Ihrem HTML. Dieser wird normalerweise direkt vor dem abschließenden Body-Tag (</body>) platziert. Sie sagen Ihrer Website quasi: „Hey, hier gibt es mehr als nur Klartext und Stile“.

Hier ist ein Beispiel dafür, wie Sie das einbauen könnten:

See the Pen How to Code Website Example: Media Query and Relative Units by HubSpot (@hubspot) on CodePen.

Nächste Schritte beim Aufbau Ihrer Website

Wenn Sie es bis hierher geschafft haben, dann sollten Sie sich erst einmal gratulieren. Sie haben vielleicht noch nie etwas programmiert und verfügen nun über die Grundlagen zum Erstellen einer Website, die sowohl responsiv als auch interaktiv ist. Wir haben uns mit den verschiedenen Konzepten von HTML und CSS beschäftigt und sogar die Programmierung angesprochen.

Jetzt möchte ich noch erklären, wie es weitergehen kann. Dieser Weg ist noch lange nicht zu Ende, und glauben Sie mir, es wird sogar noch spannender.

Bauen Sie Ihre HTML- und CSS-Kenntnisse aus

HTML und CSS sind sehr viel komplexer als das, was wir in diesem Beitrag behandelt haben. Diese Sprachen erstellen das „Gesicht“ Ihrer Website und sind entscheidend für das Erlebnis Ihrer Besuchenden. Ich habe grundlegende Anleitungen zu HTML und CSS unten verlinkt und auch einige Links zu fortgeschritteneren CSS-Themen hinzugefügt.

Grundlegende Leitfäden:

• Leitfaden für HTML: Alles, was Sie wissen müssen, um HTML wie ein Profi einzusetzen, aus einer Hand
• Leitfaden für CSS: Alles über den Einsatz von CSS, damit Ihre Website Ihre Besuchenden begeistert

Diese Ressourcen sind am besten geeignet für Webdesign- und -entwicklerteams, die die visuelle Attraktivität und Benutzerfreundlichkeit ihrer Website verbessern möchten, und ideal für alle, die ansprechende und ästhetisch ansprechende Designs erstellen möchten.

Fortgeschrittene CSS-Themen:

• Grid: Ein starres Layout-System für die Anordnung von Inhalten auf einer Seite in Zeilen und Spalten, das mehr Anpassungsmöglichkeiten bietet als Flexbox
• Flexbox: Ein fließendes Layout-System für die Anordnung von Inhalten in Zeilen oder Spalten, das einfacher zu implementieren ist als ein Raster, aber weniger Kontrolle über die Positionen der Inhalte bietet
• Animationen: Eine Methode, mit der Sie Ihre Seite aufpeppen können, indem Sie HTML-Elemente für verschiedene Bewegungen oder visuelle Effekte animieren

Diese Optionen sind am besten geeignet für Webdesigns mit dynamischen, auffälligen Elementen und ideal für alle, die lernen wollen, wie man ansprechende Benutzererfahrungen erstellt.

Lernen Sie JavaScript

JavaScript war ein Wendepunkt für mich. Hier werden Websites zum Leben erweckt, indem sie sich von statischen Seiten in interaktive Erlebnisse verwandeln. Ganz gleich, ob Sie eine einfache Animation hinzufügen oder eine komplette Webanwendung erstellen – JavaScript eröffnet Ihnen eine Welt voller Möglichkeiten. Lassen Sie sich nicht von der Komplexität nicht einschüchtern, sondern befassen Sie sich damit.

Erlernen Sie Git und GitHub

Das Erlernen von Git und GitHub war für mich wie zu lernen, meinen Spielfortschritt beim Programmieren zu speichern. Mit Git können Sie Änderungen nachverfolgen und experimentieren, ohne Angst haben zu müssen, Ihre Fortschritte zu verlieren.

Und GitHub? Das ist wie ein Social-Media-Netzwerk für Ihren Code, in dem Sie ihn sicher speichern und mit anderen zusammenarbeiten können. Als ich das erste Mal erfolgreich einen Zweig in Git zusammengeführt habe, hatte ich das Gefühl, ein neues Level in meinem Programmierwissen erreicht zu haben.

Titelbild: HubSpot