Codieren Sie Ihre eigene Website

Wollten Sie schon immer lernen, wie man Webseiten gestaltet oder eine Website online erstellt? Heute zeigen wir Ihnen, wie Sie Ihre eigene persönliche Website erstellen! Schauen Sie sich das Tutorial-Video an, um zu sehen, wie Juni Instructor Maya Sie durch jeden Schritt des Weges führt.

Lesen Sie weiter, um weitere Informationen über die Bedeutung des Lernens der Webentwicklung, eine Schritt-für-Schritt-Anleitung zum Video und Tools zu erhalten, mit denen Sie Ihre Webentwicklungserfahrung weiter verbessern können.

MERKEN:

  • Die Website in diesem Tutorial ist nur ein Beispielprojekt für Unterrichtszwecke. Bevor Sie beginnen, denken Sie daran, dass Minderjährige keine persönlichen Informationen wie Ihren vollständigen Namen, Ihre Adresse oder Ihre Telefonnummer online veröffentlichen sollten! Seien Sie auch vorsichtig, wenn Sie persönliche Fotos online hochladen.
  • Wenn Sie sich nicht sicher sind, was Sie hochladen dürfen, wenden Sie sich immer an einen Erwachsenen.

Für wen ist das?

Die Lernergebnisse für Anfänger HTML / CSS-Codierung Projekt Persönliche Website.
Diese Projektinfo und Zusammenfassung der Lernergebnisse hilft Ihnen bei der Entscheidung, ob dieses HTML / CSS-Codierungsprojekt für Sie geeignet ist.

Dieses Projekt fällt unter unsere JavaScript Level 1 Coding class für Kinder. Dieses HTML / CSS-Tutorial für Anfänger richtet sich an Schüler, die ein Projekt mit mittlerer Herausforderung und einer Länge von etwa 121 Codezeilen wünschen. Es wird helfen, ein grundlegendes Verständnis davon zu haben, wie HTML und CSS vorher funktionieren, aber wenn Sie völlig neu sind, erklären wir auch mehr Grundlagen in diesem Video!

Dieses Tutorial ist ideal für Anfänger in der Codierung, vor allem diejenigen, die sich für Design oder Kunst interessieren. Wir empfehlen, dass die Schüler 12 Jahre oder älter sind, um mitzumachen.

Für Lernergebnisse erhalten Sie viel Übung mit div, Listen, Links, Position, Anzeige, Text (h1 / h2 / p), Schriftarten und allgemeinem CSS. Es wird geschätzt, dass dieses Projekt ungefähr 40 Minuten oder länger dauert, je nachdem, wie kreativ Sie werden, aber Sie sollten sich in Ihrem eigenen Tempo schneller oder langsamer bewegen!

Warum Webentwicklung lernen?

Heutzutage müssen Sie keine Webentwicklung oder Codierung kennen, um eine Website zu erstellen. Gegen Ende dieses Artikels zeigen wir Ihnen einige Drag-and-Drop-Website-Ersteller, die den Vorgang unglaublich einfach machen. Warum sollten Sie Webentwicklung lernen? Das ist eine tolle Frage.

Unbegrenzte Anpassung

Alle einfachen Tools zur Erstellung von Websites sind tatsächlich begrenzt. Sie bieten Ihnen eine Reihe von Themen und Plugins, die für Anfänger sehr einfach zu bedienen sind – solange Sie sie nicht ändern müssen.

Wenn Sie ein Thema ändern oder etwas Benutzerdefinierteres mit Ihrer Website tun müssen, benötigen Sie jedoch mindestens ein grundlegendes Verständnis des Webentwicklungscodes. Zum Beispiel können Sie mit ein wenig Javascript-Wissen fast jeden Social-Media-Feed in Ihre Website integrieren!

Coding Careers & Foundations

Wenn Sie jemals eine Karriere in der Codierung in Betracht gezogen haben, werden Ihnen Webdesign- und Webentwicklungskenntnisse auch einen großen Vorsprung verschaffen. Die Webentwicklung hilft Kindern und neuen Programmierern, die sich für Kunst und Design interessieren, ihre Leidenschaft zu erkunden und gleichzeitig die Grundlagen des Programmierens zu erlernen. Abgesehen von der Karriere gibt es auch unzählige Vorteile für das Erlernen des Codierens für Kinder.

Anwendbar auf viele Bereiche

Schließlich ist es im heutigen digitalen Zeitalter eine wertvolle Fähigkeit, eine eigene Website zu erstellen. Blogger möchten, dass Entwickler sie zu benutzerdefinierten Blogs machen. Internetunternehmen suchen Entwickler, um E-Commerce-Websites zu erstellen, anstatt nur Artikel bei Amazon zu veröffentlichen.

Es ist ein goldenes Zeitalter für Website-Design und -Entwicklung und eine großartige Zeit, um zu lernen, wie Sie Ihre eigene Website erstellen!

Los geht’s!

Wir werden grundlegendes HTML und CSS verwenden, um zu lernen, wie man eine einfache persönliche Website erstellt.

Projektdemo

Bevor Sie mit dem Schreiben von Code beginnen, sehen Sie sich an, wie unser fertiges Projekt als Referenz funktioniert. Sehen Sie sich das Video an, um alle Funktionen unserer Projektwebsite zu sehen.

Sie können auch unseren Projektlösungscode anzeigen, wenn Sie nicht weiterkommen.

Was Sie vor dem Start beachten sollten:

  • Es gibt einen Bildheader mit Text. Der Text ist unterschiedlich groß und verwendet zwei verschiedene Schriftarten. Es hat auch einen weißen Umriss.
  • Der weiße Abschnitt darunter hat zwei Teile nebeneinander.
  • Wir haben eine Liste von Hyperlinks, die auf eine andere Seite verweisen. Wenn Sie den Mauszeiger über sie bewegen, ändern sie sich in Blau.
  • Es gibt auch einen Abschnitt über mich mit Text.
  • Darunter befindet sich ein Erfahrungsbereich mit einem anderen farbigen Hintergrund.

Schritte zum Codieren des Projekts

Um unsere Website zu erstellen, folgen wir dieser Reihenfolge der Schritte. Sehen Sie sich das Tutorial an, um zu sehen, wie Instructor Maya jedes Teil codiert, und befolgen Sie die folgenden Erklärungen.

  1. Fügen Sie den Bildkopf & den Text hinzu, der darauf steht.
  2. Erstellen Sie die Liste der Links, die Sie freigeben möchten.
  3. Erstellen Sie den Abschnitt Über mich.
  4. Erstellen Sie den Abschnitt Erfahrung.

Schritt-für-Schritt-Anleitung

Schritt 1: Fügen Sie den Bildkopf & den Text hinzu, der darauf steht.

  • Erstellen Sie ein div mit relativer Positionierung, um das Bild und den Text zu enthalten.
  • Erstellen Sie ein div, das den Text enthält, und verwenden Sie die absolute Positionierung, um ihn auf dem Bild zu platzieren.
  • Verwenden Sie <h1> und <h3>, um den Text hinzuzufügen.
  • Verwenden Sie CSS, um die Schriftart zu ändern.
  • Verwenden Sie CSS, um den zusätzlichen Rand & um das Bild herum zu entfernen.

Schritt 2: Erstellen Sie die Liste der Links, die Sie freigeben möchten.

  • Erstellen Sie ein Div mit relativer Positionierung, um die Links und den Abschnitt Über mich zu enthalten.
  • Fügen Sie dem div Polsterung hinzu.
  • Erstellen Sie ein Div mit Inline-Blockanzeige, um die Linkliste zu enthalten.
  • Verwenden Sie <ul>, um eine Liste zu erstellen.
  • Verwenden Sie <li> und <a>, um die Links zu erstellen.
  • Verwenden Sie <i> und einen font-awesome-Link, um Symbole hinzuzufügen.
  • Ändern Sie das CSS, damit es wie das Original aussieht.

Schritt 3: Erstellen Sie den Abschnitt Über mich.

  • Erstellen Sie ein Div mit Inline-Blockanzeige, um den Abschnitt Über mich zu enthalten.
  • Verwenden Sie <h3> und <p>, um Text hinzuzufügen.

Schritt 4: Erstellen Sie den Abschnitt Erfahrung.

  • Erstellen Sie ein div mit relativer Positionierung, um den Erfahrungsabschnitt zu enthalten.
  • Erstellen Sie ein div für die erste Erfahrung und verwenden Sie <h4> und <p>, um Text hinzuzufügen.
  • Fügen Sie mehr Erfahrung divs!

Nächste Schritte

Tolle Arbeit! Fühlen Sie sich jetzt frei, Ihrer Website weitere Abschnitte hinzuzufügen. Einige Ideen enthalten möglicherweise einen Abschnitt für Projekte, an denen Sie gearbeitet haben, oder Clubs, in denen Sie sich befinden. Sie können Ihre neue Website auch mit Github und Github Pages ins Web hochladen.

Tools zur Erstellung von Webseiten

Mehrere Personen verwenden ein Tool zur Erstellung von Webseiten, um eine Website zu erstellen

Wie bereits erwähnt, gibt es mehrere Website-Ersteller. Die meisten der besten Website-Builder optimieren den Prozess, indem Sie Vorlagen, Drag-and-Drop-Schnittstellen und andere Funktionen bereitstellen, die Sie zum Erstellen einer kostenlosen persönlichen Website benötigen.

Nur weil Sie ein grundlegendes Verständnis der Webentwicklung haben, bedeutet das nicht, dass Sie diese Tools vergessen sollten. Sie können Ihnen helfen, Ihre neue Website zu hosten, eine benutzerdefinierte Domain (den Namen und die Adresse Ihrer Website) zu finden und Ihnen Vorlagen, Themen und Plugins anzubieten, die Ihren Webdesignprozess beschleunigen.

Indem Sie sich um die Grundlagen kümmern, geben Ihnen diese Tools die Möglichkeit, Ihre neu gewonnenen Programmierkenntnisse darauf zu konzentrieren, Ihre Website perfekt anzupassen! Oder – selbst wenn Sie alles von Grund auf neu erstellen möchten – können Ihnen diese Tools einige großartige Ideen geben, was und wie Sie es erstellen möchten.

Hier sind einige der beliebtesten Tools für die Erstellung von Webseiten:

  • Wix

Wix ist einer der am einfachsten zu verwendenden Website-Builder. Ihr kostenloser Plan ist vollständig genug, um es zu einer großartigen Option für den Website-Builder eines Kindes zu machen, solange Sie damit einverstanden sind, dass Ihre URL eine Subdomain von Wix ist.sitename.wixsite.com ). Sie haben bezahlte Pläne mit angemessenen Preisen, wenn Sie über die kostenlose Stufe hinauswachsen.

  • Über WordPress

Obwohl die Leute es als kostenlosen Website-Builder kennen, ist WordPress wirklich ein Content-Management-System (CMS). In einem einfachen Sinne besteht der Unterschied darin, dass ein Website-Builder einfacher zu verwenden ist, ein CMS jedoch mehr Möglichkeiten zur Anpassung bietet. Obwohl WordPress selbst kostenlos ist, müssen Sie möglicherweise für einige Themen und Plugins oder für das Hosting bezahlen, wenn Sie Ihren eigenen Domainnamen wünschen.

  • Weebly

Weebly ist ein Website-Builder, ähnlich wie Wix. Der Hauptunterschied besteht darin, dass Weebly viel weniger Anpassbarkeit bietet, was es zu einer benutzerfreundlichen Option macht, die sich hervorragend zum Codieren für Kinder eignet, aber weniger wahrscheinlich mit Ihnen wächst, wenn sich Ihre Fähigkeiten zum Erstellen von Websites verbessern.Lernen Sie weiter: Web Development Classes for Kidsglückwünsche, Sie haben jetzt Ihre eigene Website! Dies ist ein aufregender Schritt, auf den Sie unglaublich stolz sein sollten. Das Lernen muss auch hier nicht aufhören.

Lernen Sie weiter: Webentwicklungskurse für Kinder

Juni Learning bietet Webprogrammierungskurse für Kinder an, die Ihnen die Fähigkeiten vermitteln, die Sie benötigen, um Ihre neue Website aufzuladen oder sogar Webanwendungen und Portfolios zu erstellen. Außerhalb der Webentwicklung unterrichten wir auch Programmierkurse für Kinder von 8 bis 18 Jahren in einer Vielzahl von Sprachen wie Scratch, Python, Java, C ++ und mehr.

Schauen Sie sich unsere Online-Kurse für Kinder an oder kontaktieren Sie unser Juni Advisors-Team, um zu erfahren, welcher Kurs für Ihren Schüler am besten geeignet ist!

Articles

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.