Willkommen bei der Webentwicklung: Ein praktischer Leitfaden für alle, die bei Null anfangen

Themen

• Einführung
• Was ist das Web und wie funktioniert es?
• So machen Sie Ihre Website der Welt zugänglich
• Unverzichtbare Tools für Entwickler
• Wie viel kann man in der Webentwicklung verdienen?
• Tipps für Anfänger
• Fazit: Beginnen Sie noch heute

Einführung

Wenn Sie hier sind, dann deshalb, weil Sie verstehen möchten, wie die Welt der Webentwicklung funktioniert, und, wer weiß, Ihre ersten Schritte in einer neuen Karriere machen möchten. Dieser Leitfaden richtet sich an diejenigen, die sich in diesem Bereich noch nicht auskennen und von vorne beginnen und die Grundlagen verstehen möchten, bevor sie sich mit Sprachen und Werkzeugen befassen. Lassen Sie uns gemeinsam auf praktische und leicht zugängliche Weise erkunden, wie wir diese Reise beginnen können.

Was ist das Web und wie funktioniert es?

Das Web ist ein globales Netzwerk, das Millionen von Geräten und Systemen verbindet und den Zugriff auf und die Weitergabe von Informationen in Echtzeit ermöglicht. Mit anderen Worten: Das Web ist wie eine große digitale Bibliothek. Wenn Sie eine Website aufrufen, fragen Sie nach Informationen, die irgendwo auf der Welt gespeichert sind. Der Browser (wie Google Chrome oder Firefox) ist wie der „Bibliothekar“, der diese Informationen für Sie durchsucht und organisiert.

Hier sind die Schlüsselelemente, die dafür sorgen, dass alles funktioniert:

1. Browser und Server
Lassen Sie uns verstehen, was passiert, wenn Sie auf die Website https://www.pudim.com.br/ zugreifen. Der Browser stellt eine Anfrage an den Server, der mit den für die Anzeige der Seite erforderlichen Dateien antwortet. Im Fall von Pudim gibt der Server eine HTML-Datei zurück, die eine Grundstruktur der Website enthält, einschließlich eines Titels, eines Bildes und eines E-Mail-Links.

• Der Browser ist das Programm, mit dem Sie auf das Internet zugreifen (Chrome, Firefox usw.). Es stellt Informationsanfragen und zeigt Seiten organisiert an.

• Der Server ist der Computer, der die Dateien der Website (Texte, Bilder, Videos) speichert und sie an Ihren Browser sendet, wenn Sie als Benutzer dies anfordern. Stellen Sie sich den Server als einen „spezialisierten Computer“ vor, der die Dateien der Website (Texte, Bilder, Videos) speichert und auf Browseranfragen reagiert, indem er diese Dateien sendet. Es ist wichtig, dass die Website im Web zugänglich ist.
  Im Fall von Pudim gibt der Server eine HTML-Datei zurück, die eine Grundstruktur der Website enthält, einschließlich eines Titels, eines Bildes und eines E-Mail-Links.

2. Wie kommunizieren Browser und Server?
Wenn Sie auf eine Website wie Pudding zugreifen, müssen Browser und Server „sprechen“, damit der Inhalt korrekt angezeigt wird. Diese Kommunikation erfolgt über HTTP (HyperText Transfer Protocol), eine Reihe von Regeln, die definieren, wie Informationen gesendet und empfangen werden sollen. Der Browser sendet eine Anfrage an den Server (sogenannte HTTP-Anfrage), und der Server antwortet mit den erforderlichen Dateien (z. B. HTML, CSS und JavaScript), um die Seite im Browser zusammenzustellen. Dieser Informationsaustausch erfolgt schnell und effizient und stellt sicher, dass die Website korrekt angezeigt wird.

Praktisches Beispiel: Geben Sie „https://www.pudim.com.br/“ in den Browser ein und drücken Sie die Eingabetaste. Sie sehen eine einfache Seite mit einem Puddingbild und einem E-Mail-Link.

3. Was ist eine API und wie passt sie dazu?
Stellen Sie sich nun vor, dass die Pudim-Website auch die Wettervorhersage anzeigen möchte. Dazu könnte er eine API (Application Programming Interface) nutzen. APIs fungieren als Brücken, die es verschiedenen Systemen ermöglichen, Informationen auszutauschen.
Stellen Sie sich zum Beispiel vor, dass auf der Pudding-Website auch eine Meldung angezeigt wird wie „Heute ist ein guter Tag, um Pudding zu essen!“ basierend auf dem aktuellen Wetter. Der Browser würde eine Anfrage an eine Wetter-API senden, die Informationen über die Temperatur und die Wetterbedingungen zurückgeben würde. Die Website könnte diese Nachricht dann dynamisch anzeigen.

Zusammenfassung: APIs sind wesentliche Werkzeuge in der modernen Webentwicklung, da sie es Ihnen ermöglichen, dynamische Funktionen, wie z. B. Daten, von allem hinzuzufügen, die in Echtzeit aktualisiert werden.
Nachdem Sie nun die Grundlagen verstanden haben, beginnen wir mit dem Erlernen der grundlegenden Tools zum Erstellen einer Website.

1. HTML: Die Struktur der Website
HTML (HyperText Markup Language) definiert die Struktur der Seite. Es besteht aus Tags, das sind Elemente, die angeben, wie der Inhalt organisiert und im Browser angezeigt wird. Jedes Tag hat eine bestimmte Funktion und kann unter anderem Text, Bilder, Links und andere Elemente enthalten.
Beispiel-Tags:

• : Legt einen Haupttitel fest.

• : Definiert einen Textabsatz.

• : Fügt ein Bild auf der Seite ein.
• : Erstellt einen Link.

Praktisches Beispiel: Erstellen Sie eine Datei mit dem Namen index.html und fügen Sie den folgenden Code ein:

  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>


  <h1 id="Olá-mundo">Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>

 

Öffnen Sie die Datei im Browser und sehen Sie Ihre erste Webseite!

2. CSS: Der Seitenstil
CSS (Cascading Style Sheets) wird verwendet, um der Website Farbe, Form und Stil zu verleihen und sie schön aussehen zu lassen.
So funktioniert CSS:

• Selektoren: Identifizieren Sie die Elemente, die Sie formatieren möchten. Zum Beispiel body für den Seitentext oder h1 für Titel.
• Eigenschaften und Werte: Geben Sie den angewendeten Stil an. Zum Beispiel Farbe: blau; Ändert die Textfarbe in Blau.

Beispiel für CSS-Regeln:

• body { Hintergrundfarbe: #f0f0f0; } legt die Hintergrundfarbe der Seite fest.
• h1 { Schriftgröße: 24px; Farbe: #0066cc; } ändert die Größe und Farbe des Titels.

Praktisches Beispiel: Erstellen Sie eine Datei mit dem Namen „styles.css“ und fügen Sie Folgendes hinzu:

  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>


  <h1 id="Olá-mundo">Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>

 

Verbinden Sie CSS mit HTML, indem Sie die folgende Zeile in das Feld

einfügen. aus der Datei index.html:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
  text-align: center;
}
h1 {
  color: #0066cc;
}

Aktualisieren Sie Ihren Browser und sehen Sie sich die Änderungen im Seitenstil an.

3. JavaScript: Interaktivität hinzufügen
JavaScript ist die Sprache, die die Seite interaktiv macht und es Ihnen ermöglicht, Animationen hinzuzufügen, Formulare zu validieren, Elemente zu manipulieren und mehr. (Wir werden in einem anderen Beitrag mehr über Javascript sprechen, bleiben Sie dran ❤)

Beispiel für Interaktivität:

• Eine Warnung, die angezeigt wird, wenn der Benutzer auf eine Schaltfläche klickt.
• Ändern Sie den Text eines Elements, indem Sie mit der Maus darüber fahren.

Praktisches Beispiel: Fügen Sie den Javascript-Teil <script> in Ihrer index.html-Datei. Es wird so aussehen:<br> </script>

 <link rel="stylesheet" href="styles.css"> 

Wenn Sie nun auf den Titel klicken, wird eine Meldung auf dem Bildschirm angezeigt.

So machen Sie Ihre Website der Welt zugänglich

Sie fragen sich vielleicht: „Wie kann mein HTML-, CSS- und JavaScript-Code für andere Menschen verfügbar sein, so wie ich auf die Pudim-Website zugegriffen habe?“ Nun, während Sie Ihre Website auf Ihrem Computer erstellen und testen, ist sie nur für Sie sichtbar. Damit andere Benutzer im Internet auf Ihre Arbeit zugreifen können, müssen Sie sie auf einem Server veröffentlichen.

Stellen Sie sich den Server als eine Bibliothek vor, die alle Dateien Ihrer Website speichert. Wenn jemand die Adresse Ihrer Website in seinen Browser eingibt, sendet der Server die für die Anzeige der Seite erforderlichen Dateien. Ohne dies wäre Ihre Website für andere nicht zugänglich.

Dieser Prozess der weltweiten Bereitstellung der Website wird als Hosting bezeichnet. Es gibt verschiedene Arten von Servern und Hosting-Diensten, die dies erleichtern. Nachdem Sie das Konzept nun verstanden haben, ist es an der Zeit, zu erkunden, wie Sie umfassendere Projekte erstellen und diese schließlich veröffentlichen können, damit die Welt sie sehen kann!

Wesentliche Tools für Entwickler

1. Code-Editor: Verwenden Sie einen Editor wie Visual Studio Code, um Ihren Code zu schreiben und zu organisieren.

2. Versionskontrolle mit Git: Mit Git können Sie Codeänderungen verfolgen und GitHub hilft Ihnen, Ihre Projekte online zu teilen.

3. Online-Ressourcen: Plattformen wie FreeCodeCamp, MDN Web Docs und W3Schools bieten hervorragende kostenlose Tutorials.

Wie viel kann man in der Webentwicklung verdienen?

Der Webentwicklungsbereich hat eine gute Bezahlung und eine hohe Nachfrage. Hier sind die durchschnittlichen Gehälter in Brasilien:

• Junior: 2.500 bis 4.000 R$ pro Monat.
• Voll: 5.000 bis 8.000 R$ pro Monat.
• Senior: 9.000 bis 13.000 R$ pro Monat.

Diese Werte basieren auf Daten von Glassdoor und können je nach Unternehmen und Region variieren.

Tipps für Einsteiger

1. Üben Sie jeden Tag: Auch wenn es nur für kurze Zeit ist, ist tägliches Üben unerlässlich.
2. Communitys beitreten: Discord-Gruppen und Foren wie Dev.to und Rocketseat eignen sich hervorragend zum Lernen und zum Stellen von Fragen.
3. Erstellen Sie ein Portfolio: Präsentieren Sie Ihre Projekte, um Ihre Chancen auf Chancen zu erhöhen.
4. Seien Sie neugierig: Entdecken Sie verschiedene Technologien und bleiben Sie auf dem Laufenden.

Beginnen Sie noch heute

In diesem Leitfaden werden die Grundlagen für diejenigen vorgestellt, die mit der Webentwicklung beginnen. Ziel war es, die ersten Schritte zu zeigen und einen allgemeinen Überblick darüber zu geben, was Sie lernen müssen, um mit der Erstellung Ihrer eigenen Projekte zu beginnen.

Webentwicklung ist jedoch ein weites Feld voller Möglichkeiten. Was wir beispielsweise über HTML gezeigt haben, ist nur der Ausgangspunkt. Erfahren Sie mehr über HTML5, semantische Elemente und Best Practices, um Ihre Websites zugänglich und gut strukturiert zu gestalten.

Hier sind einige Vorschläge für Websites, auf denen Sie Ihr Studium fortsetzen können:

• MDN-Webdokumente: Eine der besten Quellen zum Erlernen von HTML, CSS und JavaScript.
• W3Schools: Eine benutzerfreundliche Plattform zum Erlernen und Üben des Programmierens.
• FreeCodeCamp: Kostenlose und praktische Kurse, die Ihnen bei der Entwicklung realer Projekte helfen.

Üben Sie, wann immer Sie können, erkunden Sie verschiedene Tools und haben Sie keine Angst, Fehler zu machen.

Das Wichtigste ist, weiter zu lernen und nach und nach werden Sie sich sicherer fühlen, komplette Projekte zu realisieren und sogar in den Arbeitsmarkt einzusteigen. Lasst uns gemeinsam auf diese Reise gehen!

Das obige ist der detaillierte Inhalt vonWillkommen bei der Webentwicklung: Ein praktischer Leitfaden für alle, die bei Null anfangen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!