Wollten Sie schon immer eine Website erstellen? Vielleicht haben Sie einige unserer HTML-Tools (5 Schritte zum Verständnis von grundlegendem HTML-Code 5 Schritte zum Grundwissen zum Lesen von HTML-Code) und CSS-Tutorials 5 Baby-Schritte zum Erlernen von CSS und zum Kick-Ass-CSS-Zauberer in 5 Baby-Schritten gelesen CSS erlernen und Kick-Ass werden CSS-Zauberer CSS ist die wichtigste Veränderung, die im letzten Jahrzehnt in den letzten Jahren beobachtet wurde. Sie hat den Weg für die Trennung von Stil und Inhalt geebnet. Auf moderne Art definiert XHTML die semantische Struktur… Lesen Sie mehr, wissen aber nicht, wie Sie diese Sprachen in einem größeren Projekt verwenden sollen.

Heute werde ich Sie durch den gesamten Prozess der Erstellung einer kompletten Website führen. Machen Sie sich keine Sorgen, wenn dies eine schwierige Aufgabe zu sein scheint. Ich werde Sie bei jedem Schritt des Weges begleiten.

Sie erstellen diese Website mit HTML, CSS und JavaScript mit einem Hauch von jQuery (Anleitung zu jQuery. Ein grundlegender Leitfaden zu JQuery für Javascript-Programmierer. Ein grundlegender Leitfaden zu JQuery für Javascript-Programmierer. Wenn Sie ein Javascript-Programmierer sind, wird diese Anleitung zu JQuery hilfreich sein Sie beginnen, wie ein Ninja zu programmieren. Du wirst nichts tun Ja wirklich blutender Vorteil, daher sollte dieser Code in den meisten modernen Browsern gut funktionieren.

Wenn Sie sich bezüglich CSS nicht sicher sind, werfen Sie einen Blick auf den CSS-Leitfaden von W3Schools.com.

Das Design

Hier ist das Design für diese Website. Schauen Sie sich ein hochauflösendes Bild an, wenn Sie ein besseres Aussehen haben oder das gesamte Projekt hier herunterladen möchten.

Ich habe diese Website für eine fiktive Firma in Adobe Photoshop CC 2017 entworfen. Wenn Sie interessiert sind, sollten Sie die .PSD-Datei aus dem Paket-Download herunterladen. Das bekommen Sie in der Photoshop-Datei:

In der PSD finden Sie alle Ebenen gruppiert, benannt und farbcodiert:

Sie benötigen ein paar Schriftarten, damit die Dinge richtig aussehen. Die erste ist Font Awesome, die für alle Symbole verwendet wird. Die anderen beiden Schriftarten sind PT Serif und Myriad Pro (im Lieferumfang von Photoshop enthalten). Wenn Sie nicht sicher sind, wie Sie Schriftarten installieren, lesen Sie unser Handbuch So installieren Sie Schriftarten unter Windows, Mac und Linux. So installieren Sie Schriftarten unter Windows, Mac und Linux Weitere Informationen .

Machen Sie sich keine Sorgen, wenn Sie kein Photoshop haben, Sie brauchen es nicht, um fortzufahren.

Anfangscode

Nun, da das Design klar ist, beginnen wir mit der Codierung! Erstellen Sie eine neue Datei in Ihrem bevorzugten Texteditor (ich verwende Sublime Text 3). Speichern Sie dies als index.html. Sie können dies beliebig nennen. Der Grund, warum viele Seiten als Index bezeichnet werden, ist auf die Funktionsweise von Webservern zurückzuführen. Die Standardkonfiguration für die Mehrzahl der Server ist die Bereitstellung der Seite index.html, wenn keine Seite angegeben ist.

Wenn Sie die Details nicht erfahren möchten, holen Sie sich den vollständigen Code aus dem Download.

Hier ist der Code, den Sie benötigen:

Dies bewirkt mehrere Dinge:

• Definiert das minimale erforderliche HTML.
• Definiert einen Seitentitel von “Geräuschmedien”
• Enthält jQuery, das auf Google CDN gehostet wird (Was ist ein CDN? Was sind CDNs und warum ist Speicher kein Problem mehr? Was ist CDNs? Warum ist Speicher nicht länger? Ein Problem? , Bandbreite kostet Geld, das wissen wir von befristeten Verträgen nur zu gut. Nicht nur Sie… Lesen Sie weiter).
• Enthält den auf Google CDN gehosteten Font Awesome.
• Definiert a Stil Tag zum Schreiben Ihres CSS in.
• Definiert a Skript Tag, um Ihr JavaScript in zu schreiben.

Speichern Sie Ihre Datei erneut und öffnen Sie sie in Ihrem Webbrowser. Sie werden wahrscheinlich nicht viel merken und es sieht auf jeden Fall noch nicht so aus wie eine Website.

Beachten Sie, wie der Seitentitel ist Geräuschmedien. Dies wird durch den Text innerhalb der definiert Titel Etikett. Diese hat im Inneren sein Kopf Stichworte.

Die Kopfzeile

Lassen Sie uns den Header erstellen. So sieht das aus:

Beginnen wir mit diesem kleinen grauen Stück oben. Es ist ein Hellgrau mit einem leichten Dunkelgrau darunter. Hier ist eine Nahaufnahme:

Fügen Sie dieses HTML in das Karosserie Tag oben:

Wenn Sie hier sind, lassen Sie uns das abbauen. EIN div ist wie ein Container für andere Sachen “andere Sachen” kann mehr Container, Text, Bilder, wirklich alles sein. Es gibt einige Einschränkungen, was in bestimmte Tags eingehen kann, aber divs sind ziemlich generische Dinge. Es hat eine Ich würde von Top-Bar. Dies wird verwendet, um es mit CSS zu formatieren und bei Bedarf mit JavaScript zu zielen. Stellen Sie sicher, dass Sie nur ein Element mit einer bestimmten ID haben - sie sollten eindeutig sein. Wenn mehrere Elemente denselben Namen haben sollen, verwenden Sie a Klasse Stattdessen ist es das, wofür sie bestimmt sind! Hier ist das CSS, das Sie benötigen, um es zu gestalten (setzen Sie es oben in Ihr Stil Etikett):

html, body margin: 0; Polsterung: 0; Schriftfamilie: 'Helvetica', 'Arial'; / * Anfangsschriftarten * / # top-bar width: 100%; Hintergrund: # F1F1F1; / * hellgrau * / Rand unten: 1px fest # D4D4D4; / * dunkelgrau "unterstreichen" * / height: 25px; 

Beachten Sie, wie das Hash-Zeichen (#, Hashtag, Pfund-Zeichen) vor dem Namen verwendet wird. Dies bedeutet, dass das Element eine ID ist. Wenn Sie eine Klasse verwenden, verwenden Sie stattdessen einen Punkt (.). Das html und Karosserie Bei Tags wird der Abstand und der Rand auf Null gesetzt. Dies verhindert unerwünschte Abstände.

Es ist Zeit für das Logo und die Navbar. Bevor Sie beginnen, benötigen Sie einen Container, um diesen Inhalt einzufügen. Lassen Sie uns dies zu einer Klasse machen (damit Sie es später erneut verwenden können) nicht eine responsive Website, machen Sie 900 Pixel breit.

HTML:

CSS:

.normaler Wrapper width: 900px; Marge: 0 auto; Polsterung: 15px 40px; Hintergrund: rot; Überlauf: Auto; 

Es kann schwierig sein, zu erkennen, was los ist, bis Sie den Code abgeschlossen haben. Daher kann es hilfreich sein, einen (temporären) farbigen Hintergrund hinzuzufügen, um zu sehen, was passiert:

Hintergrund: rot;

Jetzt ist es an der Zeit, das Logo zu erstellen. Font Awesome wird für das Symbol selbst benötigt. Font Awesome ist eine Reihe von Icons, die als Vektor-Font verpackt sind - super! Der anfängliche Code oben ist bereits Font Awesome eingerichtet, also ist alles einsatzbereit!

Fügen Sie dieses HTML hinzu Innerhalb das Normal-Wrapper div:

  
Geräuschmedien
 

CSS:

.Logo-Symbol Farbe: # 000000; Schriftgröße: 60pt; Schwimmer: links;  h1 float: left; Marge: 21px 0 0 25px; 

Machen Sie sich keine Sorgen, dass die anderen Schriftarten nicht zum Design passen - Sie werden dies später aufräumen. Wenn Sie andere Symbole verwenden möchten, gehen Sie zur Seite mit den fantastischen Symbolen für Schriftarten über und ändern Sie sie fa-volume-down auf den Namen des Symbols, das Sie verwenden möchten.

Wenn Sie in die Navigationsleiste wechseln, verwenden Sie eine ungeordnete Liste (UL) dafür. Fügen Sie dieses HTML hinzu nach dem das Logo-Container (aber immer noch in der Normal-Wrapper):

 
Zuhause
 
Über
 
Bewertungen
 
Kontakt
 

Das href wird verwendet, um auf andere Seiten zu verlinken. Diese Tutorial-Website hat keine anderen Seiten, aber Sie können den Namen und den Dateipfad (falls erforderlich) hier angeben, z. reviews.html. Stellen Sie sicher, dass Sie diese beiden Anführungszeichen verwenden.

Hier ist das CSS:

#navbar list-style-type: none; / * Aufzählungspunkte entfernen * / Marge: 29px 0 0 0; Polsterung: 0; schweben rechts; Schriftgröße: 16pt;  #navbar li display: inline; / * Artikel horizontal erzeugen * / #navbar li a: link, #navbar li a: besucht, #navbar li a: aktiv text-decoration: none; / * Unterstrich entfernen * / color: # 000000; Auffüllen: 0 16px 0 10px; / * Leerzeichen sind getrennt * / Marge: 0; Rand rechts: 2px fest # B4B4B4; / * divider * / #navbar li a: link.last-link / * remove divider * / border-right: 0px;  #navbar li a: hover / * Farbe ändern bei hover (mouseover) * / color: # EB6361; 

Dieses CSS beginnt mit einem ungeordnete Liste. Es entfernt dann die Aufzählungspunkte mit Typ des Listentyps: keine;. Links sind etwas voneinander beabstandet und erhalten eine Farbe, wenn Sie mit der Maus darüber fahren. Der kleine graue Teiler ist ein rechter Rand für jedes Element, der dann mit dem letzten Element entfernt wird Letzter Link Klasse. So sieht das aus:

Alles, was für diesen Abschnitt übrig bleibt, ist der rote horizontale Farbton. Fügen Sie dieses HTML nach dem hinzu Normal-Wrapper:

Und hier ist das CSS:

# top-color-splash width: 100%; Höhe: 4px; Hintergrund: # EB6361; 

Das ist der oberste Abschnitt. So sieht es aus - ziemlich ähnlich wie das Design?

Hauptinhaltsbereich

Es ist jetzt an der Zeit, sich auf den Hauptinhaltsbereich zu begeben - den sogenannten “oberhalb der Falte”. So sieht dieser Teil aus:

Dies ist ein ziemlich einfacher Teil, links ein Text mit einem Bild auf der rechten Seite. Dieser Bereich wird sein lose in Drittel geteilt, annähernd annähernd den Goldenen Schnitt mit dem Goldenen Schnitt in der Fotografie für eine bessere Komposition Mit dem Goldenen Schnitt in der Fotografie für eine bessere Komposition Haben Sie Schwierigkeiten mit der Fotokomposition? Hier sind zwei auf dem Golden Ratio basierende Techniken, die Ihre Aufnahmen mit wenig Aufwand drastisch verbessern. Weiterlesen .

Sie benötigen das Beispielbild für diesen Teil. Es ist im Download enthalten. Dieses Bild ist 670px breit und stammt aus unserer Panasonic Lumix DMC-G80 / G85 Testbericht Panasonic Lumix DMC-G80 / G85 Testbericht Panasonic Lumix DMC-G80 / G85 Testbericht Die Lumix G85 ist die neueste spiegellose Kamera von Panasonic die Videoabteilung mit HDMI-Ausgang und 4K-Aufnahme - alles für 1000 Dollar! Weiterlesen .

Fügen Sie den HTML-Code hinzu nach dem das Top-Farbspritzer Element:

 
 
Herzlich willkommen!
 
Noise Media ist ein auf Tech-Reviews spezialisiertes Technologieunternehmen.
 
Wir sind sehr gut in dem, was wir tun, aber leider sind wir kein echtes Unternehmen.
 
Besuchen Sie makeuseof.com, um eine vollständige Anleitung zum Erstellen dieser Website zu erhalten.
 
Alternativ können Sie unseren Testbericht der Panasonic G80 auf der rechten Seite lesen!
 
 
  
 

Beachten Sie, wie die Normal-Wrapper Element ist zurückgekehrt (das ist die Freude an der Verwendung von Klassen). Sie fragen sich vielleicht, warum das Bild (img) Tag wird nicht geschlossen. Dies ist ein selbstschließendes Tag. Der Schrägstrich (/>) zeigt dies an, da es nicht immer sinnvoll ist, ein Tag zu schließen.

CSS:

.ein Drittel Breite: 40%; Schwimmer: links; Box-Dimensionierung: Border-Box; / * Stellen Sie sicher, dass Füllungen und Ränder die Größe nicht vergrößern. * / margin-top: 20px; . zwei Drittel Breite: 60%; Schwimmer: links; Box-Dimensionierung: Border-Box; / * Stellen Sie sicher, dass das Auffüllen und der Rand die Größe nicht erhöhen. * / Auffüllen-Links: 40px; Textausrichtung: rechts; Rand oben: 20px;  .featured-image max-width: 500px; / * Bildgröße unter Beibehaltung des Seitenverhältnisses reduzieren * / .no-margin-top margin-top: 0; / * Rand von Kopfzeilen entfernen * /

Das wichtigste Attribut hier ist Box-Dimensionierung: Border-Box;. Dies stellt sicher, dass die Elemente immer eine Breite von 40% oder 60% haben. Der Standardwert (ohne dieses Attribut) ist Ihre angegebene Breite plus Auffüllung, Ränder und Ränder. Die Bildklasse (Vorgestelltes Bild) hat ein maximale Breite von 500px. Wenn Sie nur eine Dimension angeben (Breite oder Höhe) und die andere leer lassen, ändert css das Bild unter Beibehaltung des Seitenverhältnisses.

Zitatbereich

Lassen Sie uns den Zitatbereich erstellen. So sieht das aus:

Dies ist ein weiterer einfacher Bereich. Es enthält einen dunkelgrauen Hintergrund mit weiß zentriertem Text.

Fügen Sie dieses HTML hinzu nach dem der Vorherige Normal-Wrapper:

 
 
“makeuseof ist die beste Website aller Zeiten”
 
Joe Coburn
 
 

Und dann dieses CSS:

# Zitatbereich Hintergrund: # 363636; Farbe: #FFFFFF; Text ausrichten: Mitte; Polsterung: 15px 0;  h3 font-weight: normal; Schriftgröße: 20pt; Rand oben: 0px;  h4 font-weight: normal; Schriftgröße: 16pt; Rand unten: 0; 

Hier ist nicht viel los. Die Größenanpassung ist die Hauptanpassung, die erforderlich ist - Schriftgröße, Abstand usw. So sieht das Ganze jetzt aus - es sieht aus wie eine Website!

Symbolbereich

Lass uns weiter machen - es ist fast fertig! Hier ist der nächste Bereich, der erstellt werden muss:

Dieser Teil verwendet mehrere Klassen. Die drei Symbole sind mit Ausnahme des Inhalts größtenteils gleich. Daher ist es sinnvoll, Klassen anstelle von IDs zu verwenden. Fügen Sie dieses HTML hinzu nach dem der Vorherige Zitatbereich:

 
 
  
 
Youtube
 
Besuchen Sie unseren YouTube-Kanal, um weitere Testberichte, Tutorials und Werbegeschenke zu erhalten!
 
 
 
  
 
Bewertungen
 
Wenn Sie vorhaben, ein neues Gadget zu kaufen, überprüfen Sie zuerst hier. Wir geben Ihnen ausführliche Bewertungen der neuesten Geräte.
 
 
 
  
 
Kaufberatung
 
Bei Buying Guides bemühen wir uns, den Lesern die Werkzeuge zur Verfügung zu stellen, um das Beste für den geringsten Geldbetrag zu erhalten.
 
 

Diese drei Symbole sind auch Font-Awesome. Das HTML verwendet wieder das Normal-Wrapper Klasse. Hier ist das CSS:

.icon-outer box-size: border-box; / * Stellen Sie sicher, dass Füllungen und Ränder die Größe nicht vergrößern. * / float: left; Breite: 33,33%; Polsterung: 25px; Marge: 0; Text ausrichten: Mitte;  .icon-circle background: #EEEEEE; Farbe: # B4B4B4; Breite: 200px; Höhe: 200px; Grenzradius: 200px; / * abgerundete Ecken machen * / Rand: 0 Auto; Rand: 2px fest # D6D6D6; Box-Dimensionierung: Border-Box; / * Stellen Sie sicher, dass das Auffüllen und der Rand die Größe nicht erhöhen. * / font-size: 75pt; Auffüllen: 30px 0 0 0; Cursor: Zeiger;  .icon-circle: hover / * Farbe ändern bei hover (mouseover) * / color: #FFFFFF; Hintergrund: # EB6361;  h5 Marge: 15px 0 10px 0; Schriftgröße: 20pt; 

Es gibt ein paar neue Dinge in der CSS. Die abgerundeten Ecken werden durch gesetzt Grenzradius: 200px;. Wenn Sie diesen Wert auf die Breite einstellen, erhalten Sie einen perfekten Kreis. Sie können dies reduzieren, wenn Sie ein Quadrat mit abgerundeten Ecken bevorzugen. Beachten Sie, wie Hover-Aktionen auf die divs angewendet werden - sie sind nicht nur auf Links beschränkt. So sieht dieser Abschnitt jetzt aus:

Die Fußzeile

Das letzte, was Sie tun müssen, ist die Fußzeile! Dies ist sehr einfach, da es sich nur um eine graue Fläche ohne Text handelt. Fügen Sie dieses HTML nach den Symbolbereichen hinzu. ' Normal-Wrapper:

Hier ist das CSS:

#footer width: 100%; Hintergrund: # F1F1F1; / * hellgrau * / rand oben: 1px fest # D4D4D4; / * dunkelgrau "topline" * / höhe: 150px; 

Sehen Sie - wirklich einfaches Zeug.

Fügen Sie etwas Pizzazz hinzu

Das ist es, die Codierung ist fertig! Sie können die Dinge absolut so lassen, wie sie sind, es ist eine fertige Webseite. Möglicherweise haben Sie jedoch bemerkt, dass es nicht aussieht genau wie das Design. Der Hauptgrund dafür sind die verwendeten Schriftarten. Lass uns das klären.

Die für die meisten Titel verwendete Schriftart ist Myriad Pro. Dies ist im Lieferumfang von Adobe Create Cloud enthalten, jedoch nicht als Webfont verfügbar. Die aktuell auf der Webseite verwendete Schriftart ist Helvetica. Das sieht in Ordnung aus, man könnte es aber so belassen PT Sans ist als webfont verfügbar. Die Schriftart für den gesamten Text ist PT Serif, das ist als webfont verfügbar.

Webfonts sind ein einfacher Prozess. Genauso wie das Laden einer neuen Schrift auf Ihrem Computer, können Webseiten bei Bedarf Schriftarten laden. Eine der besten Möglichkeiten dazu ist Google Fonts.

Fügen Sie dieses CSS hinzu, um zu den besseren Schriftarten zu wechseln:

@import url ("https://fonts.googleapis.com/css?family=PT+Sans"); @import url ("https://fonts.googleapis.com/css?family=PT+Serif"); h1, h2, h4, h5, h6 Schriftfamilie: 'PT Sans', 'Helvetica', 'Arial'; 

Ändern Sie nun Ihre HTML- und Body-Elemente, um die neuen Schriftarten zu verwenden:

Schriftfamilie: 'PT Serif', 'Helvetica', 'Arial';

Beachten Sie, dass das Element h3 nicht in der Liste enthalten ist. Dies wird standardmäßig verwendet PT-Serif anstatt PT-Sans.

Als letzten Teil der Schönheit verwenden wir JavaScript, um durch drei verschiedene Bilder zu blättern. Du wirst brauchen Image_2 und Image_3 für diesen Teil und wieder ist es optional. Die Website ist zu diesem Zeitpunkt ohne diese Funktion vollständig funktionsfähig. So wird es aussehen (beschleunigt):

Ändern Sie Ihren HTML-Code so, dass drei Bilder enthalten sind. Beachten Sie, dass zwei davon eine CSS-Klasse haben versteckt. Jedes Bild wurde mit einer ID versehen, sodass das JavaScript jedes von ihnen unabhängig anvisieren kann.

Hier ist das CSS, das zum Ausblenden der zusätzlichen Bilder benötigt wird:

.versteckte Anzeige: keine; 

Nun, da HTML und CSS erledigt sind, wechseln wir zu JavaScript. Es ist hilfreich, das Document Object Model-JavaScript und die Webentwicklung zu verstehen: Verwenden des Document-Objektmodells JavaScript und die Webentwicklung: Verwenden des Document-Objektmodells In diesem Artikel werden Sie mit dem Dokument-Grundgerüst vertraut gemacht, mit dem JavaScript arbeitet. Wenn Sie mit diesem abstrakten Dokumentobjektmodell vertraut sind, können Sie JavaScript schreiben, das auf jeder Webseite funktioniert. Lesen Sie mehr (DOM) für diesen Teil, aber es ist keine Voraussetzung.

Finden Sie das Skript Bereich am unteren Rand der Seite:

Fügen Sie das folgende JavaScript in das Skript Etikett:

/ * JavaScript geht hier weiter unten auf der Seite * / $ (document) .ready (function () // wird ausgeführt sobald die Seite fertig ist var time = 2500; // Abrufen der Bildcontainer $ im1 = $ (' # f-image-1 '); $ im2 = $ (' # f-image-2 '); $ im3 = $ (' # f-image-3 '); setInterval (function () // Funktion aufrufen alle x Millisekunden (in der Zeitvariablen oben definiert) changeImage ();, time); var currentImage = 1; function changeImage () switch (currentImage) case 1: // show image 2 $ im1.hide (); $ im2 .show (); $ im3.hide (); currentImage = 2; break; case 2: // show image 3 $ im1.hide (); $ im2.hide (); $ im3.show (); currentImage = 3 ; break; default: // show image 1 $ im1.show (); $ im2.hide (); $ im3.hide (); currentImage = 1;);

Hier passiert einiges. Der Code ist in enthalten $ (Dokument) .ready (). Das heißt, es wird ausgeführt, sobald Ihr Browser die Seite fertig dargestellt hat. Dies ist eine gute Vorgehensweise. Das setInterval () Funktion wird verwendet, um die Funktion aufzurufen changeImage () Funktion regelmäßig in einem vordefinierten Intervall in Millisekunden (1000 Millisekunden = 1 Sekunde). Dies ist im gespeichert Zeit Variable. Sie können diesen Wert erhöhen oder verringern, um den Bildlauf zu beschleunigen oder zu verlangsamen. Schließlich wird eine einfache Fallanweisung verwendet, um verschiedene Bilder anzuzeigen und das aktuell angezeigte Bild zu verfolgen.

Coding Challenge

Das ist es! Hoffentlich haben Sie während des Prozesses viel gelernt. Wenn Sie Lust auf eine Herausforderung haben und Ihre neuen Fähigkeiten unter Beweis stellen möchten, versuchen Sie, diese Änderungen zu implementieren:

Fügen Sie eine Fußzeile hinzu: Fügen Sie etwas Text in die Fußzeile ein (Hinweis: Sie können den Text erneut verwenden Normal-Wrapper und ein Drittel / zwei Drittel Klassen.).
Verbessern Sie das Bildlaufbild: Ändern Sie das JavaScript, um die Bildänderungen zu animieren (Hinweis: Sehen Sie sich jQuery fadein und animate an).
Implementieren Sie mehrere Anführungszeichen: Ändern Sie die Anführungszeichen, um zwischen verschiedenen zu wechseln (Hinweis: Sehen Sie sich den Bildlaufcode für einen Startpunkt an).
Einen Server einrichten: Richten Sie einen Server ein und senden Sie Daten zwischen der Webseite und dem Server (Tipp: Lesen Sie unser Handbuch zu JSON und Python. So erhalten Sie Python und JavaScript für die Kommunikation mit JSON. So erhalten Sie Python und JavaScript für die Kommunikation mit JSON. Heute zeige ich Ihnen, wie JSON verwenden, um Daten von JavaScript an Python zu senden. In diesem Artikel wird beschrieben, wie Sie einen Webserver einrichten und den gesamten Code angeben, den Sie benötigen. Weitere Informationen.

Hast du heute neue Fähigkeiten gelernt? Wie sind Sie zu den Codierungsherausforderungen gekommen? Welche Änderungen haben Sie vorgenommen, um diese Website zu Ihrer eigenen zu machen? Lassen Sie uns in den Kommentaren wissen, was wir gerne wissen würden!

Erfahren Sie mehr über: CSS, HTML, Webdesign.