Mein Code-Portfolio & Technologie-Guide
Hier sehen Sie eine Auswahl an Code-Beispielen aus verschiedenen Technologien, die meine Arbeitsweise demonstrieren. Jeder Block enthält eine detaillierte Erklärung und eine Empfehlung, mit welchem Editor Sie den Code selbst ausprobieren können.
🛠️ Meine Empfehlungen für Entwickler
Diese Tools nutze ich selbst – sie helfen Ihnen, Ihre Projekte professionell abzusichern und zu vermarkten.
* Affiliate-Links: Bei einem Kauf über diese Links erhalten wir eine kleine Provision – für Sie entstehen keine zusätzlichen Kosten.
Technologie-Schnellübersicht
Wählen Sie eine Technologie aus und springen Sie direkt zu den passenden Erklärungen und Code-Beispielen.
Sie möchten nicht nur lesen, sondern eine konkrete Idee umsetzen?
📋 Projektidee unverbindlich schildernWarum dieser Guide?
Dieser Guide zeigt nicht nur einzelne Befehle, sondern auch, wie ich technische Aufgaben strukturiere und verständlich erkläre. Die Beispiele vermitteln einen Eindruck davon, wie Frontend, Backend, Datenbanken und Automatisierung in echten Projekten zusammenspielen können.
Für Kleinunternehmer und Selbstständige bedeutet das: Sie müssen keine Programmiersprache auswählen, bevor Sie Kontakt aufnehmen. Gemeinsam klären wir zuerst Ihr Ziel und entscheiden anschließend, welche Technologie zuverlässig, wartbar und wirtschaftlich sinnvoll ist.
HTML5 – Das Gerüst des Internets
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Willkommen auf meiner Seite!</h1>
<p>Das ist mein erster Absatz in HTML.</p>
</body>
</html>📌 Was macht dieser Code?
Das ist das Grundgerüst jeder Webseite. Er definiert den Dokumenttyp, die Sprache (Deutsch) und den sichtbaren Bereich (body). Der <h1> ist die Hauptüberschrift, <p> ist ein Textabsatz.
<a href="https://www.google.de" target="_blank">Zu Google gehen</a>
<img src="bild.jpg" alt="Beschreibung des Bildes" width="300">📌 Was macht dieser Code?
Das <a>-Tag erstellt einen Hyperlink. target="_blank" sorgt dafür, dass der Link in einem neuen Tab geöffnet wird. Das <img>-Tag bindet ein Bild ein. Der alt-Text ist wichtig für Barrierefreiheit und Suchmaschinen.
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ul>
<ol>
<li>Erster Schritt</li>
<li>Zweiter Schritt</li>
</ol>📌 Was macht dieser Code?
Hier lernen Sie den Unterschied zwischen einer ungeordneten Liste (<ul> mit Punkten) und einer geordneten Liste (<ol> mit Zahlen). Das ist die Grundlage für Menüs und Schritt-für-Schritt-Anleitungen.
CSS3 – Das Design der Webseite
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
h1 {
color: #2C5F8A;
text-align: center;
}📌 Was macht dieser Code?
Hier wird das Design definiert. Der body bekommt eine helle Hintergrundfarbe und eine Standardschriftart. Das h1 (Überschrift) wird in der Firmenfarbe Blau eingefärbt und im Zentrum ausgerichtet.
.container {
display: flex;
justify-content: space-between;
gap: 20px;
}
.box {
flex: 1;
background: #eee;
padding: 20px;
}📌 Was macht dieser Code?
Flexbox ist die moderne Methode, um Elemente nebeneinander anzuordnen. justify-content: space-between sorgt dafür, dass die Boxen gleichmäßig über die Breite verteilt werden – das ist die Grundlage für responsive Design.
PHP – Der Motor für dynamische Webseiten
<?php
$name = "Murat";
echo "Hallo " . $name . "! Willkommen auf meiner Seite.";
?>📌 Was macht dieser Code?
PHP läuft auf dem Server. Dieser Code erstellt eine Variable $name und gibt sie dann mit dem Befehl echo als Text aus. So können Webseiten personalisiert werden.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars($_POST['name']);
echo "Hallo " . $name . "!";
}
?>📌 Was macht dieser Code?
Dieses Skript fängt Daten ab, die ein Nutzer über ein HTML-Formular abgeschickt hat. Mit $_POST['name'] holt es den eingegebenen Namen und gibt ihn sicher (htmlspecialchars) wieder aus.
MySQL / SQL – Datenbanken verwalten
CREATE TABLE kunden (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) UNIQUE
);
INSERT INTO kunden (name, email)
VALUES ('Max Müller', 'max@example.com');📌 Was macht dieser Code?
CREATE TABLE erstellt eine neue Datenbanktabelle für Kunden. INSERT fügt dann einen echten Datensatz (Max Müller) in diese Tabelle ein. Das ist die Basis jeder dynamischen Webseite.
SELECT * FROM kunden;
SELECT name, email FROM kunden WHERE id = 1;📌 Was macht dieser Code?
Die erste Zeile holt alle Spalten (*) aller Kunden aus der Tabelle. Die zweite Zeile holt nur name und email von dem Kunden, der die ID 1 hat. Das ist die Basis für jede dynamische Webseite.
JavaScript – Interaktion für Ihre Webseite
let count = 0;
function klickMich() {
count++;
alert("Du hast " + count + " Mal geklickt!");
}📌 Was macht dieser Code?
JavaScript läuft direkt im Browser des Nutzers. Dieser Code definiert eine Variable count, die bei jedem Klick auf einen Button um 1 erhöht wird. Ein Popup-Fenster (alert) zeigt dann die aktuelle Anzahl an.
document.getElementById("ueberschrift").innerHTML = "Neuer Text!";
document.getElementById("ueberschrift").style.color = "blue";📌 Was macht dieser Code?
Hier interagiert JS mit dem HTML-Code. Es findet ein Element mit der ID ueberschrift und ändert den Text in "Neuer Text!" und die Farbe auf Blau. Das ist das Herzstück interaktiver Webseiten!
React – Moderne Benutzeroberflächen
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Du hast {count} Mal geklickt</p>
<button onClick={() => setCount(count + 1)}>Klick mich!</button>
</div>
);
}
export default Counter;📌 Was macht dieser Code?
React erstellt interaktive Komponenten. useState speichert den aktuellen Zählerstand. Wenn man auf den Button klickt, wird die Funktion setCount aufgerufen, die Zahl erhöht sich, und die Webseite aktualisiert sich automatisch ohne Neuladen.
const produkte = ["Apfel", "Banane", "Kirsche"];
return (
<ul>
{produkte.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);📌 Was macht dieser Code?
React nutzt .map(), um aus einer Liste (Array) automatisch HTML-Elemente zu generieren. Jeder Eintrag in der Liste wird zu einem <li>-Tag. Das ist extrem effizient für dynamische Daten.
Vue.js – Leichtgewichtige Frontend-Entwicklung
<template>
<div>
<input v-model="nachricht">
<p>Eingabe: {{ nachricht }}</p>
</div>
</template>
<script>
export default {
data() { return { nachricht: "Hallo Welt!" } }
}
</script>📌 Was macht dieser Code?
Vue.js nutzt eine "Zwei-Wege-Datenbindung". Sobald man in das Eingabefeld tippt (v-model), ändert sich der Text im <p>-Tag sofort. Das ist extrem effizient für Formulare und Live-Eingaben.
<ul>
<li v-for="name in namen" :key="name">
{{ name }}
</li>
</ul>
<script>
export default {
data() { return { namen: ["Anna", "Ben", "Clara"] } }
}
</script>📌 Was macht dieser Code?
Mit v-for erzeugt Vue automatisch eine Liste. Es geht durch das Array namen durch und erstellt für jeden Namen einen <li>-Eintrag. Einfach, sauber und schnell.
Python – Vielseitig und Mächtig
import pandas as pd
# Daten in einer Liste
daten = {"Monat": ["Jan", "Feb", "Mär"], "Umsatz": [10000, 15000, 12000]}
df = pd.DataFrame(daten)
# Durchschnitt berechnen
durchschnitt = df["Umsatz"].mean()
print("Ø-Umsatz:", durchschnitt)📌 Was macht dieser Code?
Dieser Code nutzt die Bibliothek pandas, um Daten zu strukturieren. Er erstellt eine kleine Tabelle (DataFrame) aus Monaten und Umsätzen und berechnet automatisch den Durchschnittswert aller Umsätze.
name = input("Wie heißt du? ")
print("Hallo " + name + "!")📌 Was macht dieser Code?
Mit input() stoppt Python den Programmablauf und wartet, bis der Benutzer etwas eintippt. Das Getippte wird in der Variable name gespeichert und dann mit print begrüßt.
Java – Robuste Unternehmenssoftware
public class HalloWelt {
public static void main(String[] args) {
String name = "Murat";
System.out.println("Hallo " + name + "!");
}
}📌 Was macht dieser Code?
Java ist eine streng typisierte Sprache. public class definiert eine Datei, main ist der Startpunkt jedes Programms. System.out.println gibt den Text ("Hallo Murat!") auf der Konsole aus.
int alter = 20;
if (alter >= 18) {
System.out.println("Volljährig!");
} else {
System.out.println("Minderjährig.");
}📌 Was macht dieser Code?
Java bewertet Bedingungen mit if. Wenn alter 18 oder größer ist, wird der erste Text ausgegeben, ansonsten der zweite. So lenkt man den Programmfluss.
C# – Moderne .NET-Entwicklung
using System;
class Programm
{
static void Main()
{
string text = "Hallo Welt";
Console.WriteLine(text);
}
}📌 Was macht dieser Code?
Dies ist ein klassisches C#-Programm. using System; importiert grundlegende Funktionen. Console.WriteLine ist der Befehl, um Text im Ausgabefenster anzuzeigen.
for (int i = 0; i < 5; i++) {
Console.WriteLine("Zähler: " + i);
}📌 Was macht dieser Code?
Die for-Schleife zählt von 0 bis 4 (weil < 5 bedeutet, sie stoppt bei 5) und gibt die aktuelle Zahl auf der Konsole aus. Das ist die Grundlage für das Durchgehen von Listen.
APIs – Daten mit der Welt austauschen
fetch('https://api.openweathermap.org/data/2.5/weather?q=Berlin&appid=DEIN_API_KEY')
.then(response => response.json())
.then(data => console.log(data.main.temp));📌 Was macht dieser Code?
APIs sind Schnittstellen. Dieser Code fragt mit fetch() die OpenWeatherMap-API an, um die aktuelle Temperatur in Berlin abzufragen. Die Antwort (JSON) wird dann in der Konsole angezeigt.
{
"name": "Murat Göcmen",
"beruf": "Programmierer",
"skills": ["HTML", "CSS", "PHP"]
}📌 Was macht dieser Code?
JSON ist das "Austauschformat" der APIs. So sehen Daten aus, wenn sie von einem Server an eine Webseite geschickt werden. Es ist leicht lesbar für Menschen und Maschinen.
Git – Versionskontrolle für Profis
# Änderungen speichern
git add .
git commit -m "Meine erste Änderung"
# Zum Server hochladen
git push origin main📌 Was macht dieser Code?
Git ist kein Programmier-Editor, sondern ein System zur Versionierung. git add fügt neue Dateien hinzu. git commit speichert sie lokal mit einer Nachricht. git push lädt die Änderungen auf einen Server (wie GitHub) hoch.
# Neuen Branch "neue-features" erstellen
git branch neue-features
# In diesen Branch wechseln
git checkout neue-features
# Kurzform (Erstellen und Wechseln in einem Schritt)
git checkout -b neue-features📌 Was macht dieser Code?
Mit Git "Branches" (Ästen) kann man parallel an verschiedenen Funktionen arbeiten, ohne das Hauptprogramm (main) zu stören. Wenn das Feature fertig ist, wird es später wieder zusammengeführt (merge).
Excel VBA – Excel automatisieren
Sub Begruessung()
Dim name As String
name = InputBox("Wie heißt du?")
MsgBox "Hallo " & name & "!"
End Sub📌 Was macht dieser Code?
Dieses VBA-Makro fragt den Benutzer nach seinem Namen und zeigt dann eine personalisierte Begrüßung an. Es zeigt die grundlegende Interaktion mit dem Benutzer in Excel.
Sub DatenSchreiben()
Dim i As Integer
For i = 1 To 10
Cells(i, 1).Value = i
Next i
MsgBox "Daten wurden geschrieben!"
End Sub📌 Was macht dieser Code?
Dieses Makro schreibt die Zahlen 1 bis 10 in die erste Spalte (Spalte A) von Excel. Es zeigt, wie Schleifen in VBA funktionieren und wie man auf Zellen zugreift.
WordPress – Professionelle Webseiten
// Shortcode [mein_shortcode]
function mein_shortcode() {
return "<p>Hallo Welt! Das ist ein Shortcode.</p>";
}
add_shortcode('mein_shortcode', 'mein_shortcode');📌 Was macht dieser Code?
Dieser Code erstellt einen Shortcode für WordPress. Mit [mein_shortcode] im Editor wird der Text "Hallo Welt! Das ist ein Shortcode." angezeigt. Shortcodes sind praktisch, um dynamische Inhalte in Beiträgen und Seiten einzubinden.
functions.php des Themes eingefügt.
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 5
);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo "<h2>" . get_the_title() . "</h2>";
echo get_the_excerpt();
}
}
wp_reset_postdata();
?>📌 Was macht dieser Code?
Dieser Code erstellt eine benutzerdefinierte WordPress-Schleife, die die 5 neuesten Beiträge anzeigt. Er zeigt Titel und Auszug jedes Beitrags an. Das ist die Grundlage für viele individuelle WordPress-Seiten.
JSON – Daten sicher austauschen
{
"name": "Max Mustermann",
"alter": 35,
"verheiratet": true,
"hobbies": ["Lesen", "Programmieren", "Wandern"],
"adresse": {
"strasse": "Hauptstraße 1",
"stadt": "Berlin"
}
}📌 Was macht dieser Code?
JSON ist ein standardisiertes Format für den Datenaustausch. Dieses Beispiel zeigt, wie verschiedene Datentypen (String, Zahl, Boolean, Array, Objekt) in JSON dargestellt werden. Es ist die Grundlage für API-Kommunikation.
const jsonString = '{"name":"Max","alter":35}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // "Max"
const neuesObj = { name: "Anna", alter: 28 };
const neuerString = JSON.stringify(neuesObj);
console.log(neuerString); // '{"name":"Anna","alter":28}'📌 Was macht dieser Code?
JSON in JavaScript umwandeln: JSON.parse() wandelt einen JSON-String in ein JavaScript-Objekt um. JSON.stringify() macht das Gegenteil. Das ist essenziell für die Arbeit mit APIs.
Technologie-Vergleich – Welche Technologie für welches Projekt?
Die folgende Übersicht bietet eine erste Orientierung. Die endgültige Auswahl hängt unter anderem von Funktionsumfang, vorhandenen Systemen, Budget und späterer Wartung ab.
| Projekttyp | Geeignete Technologien | Warum diese Auswahl? |
|---|---|---|
| Einfache Unternehmenswebsite | HTML5, CSS3, JavaScript, PHP, WordPress | Schnelle Darstellung, klare Inhalte und bei Bedarf ein verarbeitetes Kontaktformular. WordPress bietet zusätzlich eine benutzerfreundliche Verwaltung. |
| Interaktive Web-Anwendung | React oder Vue.js, JavaScript, API, JSON | Dynamische Oberflächen reagieren ohne vollständiges Neuladen und tauschen Daten gezielt über APIs im JSON-Format aus. |
| Datenanalyse und Berichte | Python, pandas, SQL, Excel VBA | Größere Datenmengen lassen sich bereinigen, auswerten und wiederholbar visualisieren. Excel VBA bietet direkte Integration in bestehende Excel-Arbeitsmappen. |
| Backend-Systeme und APIs | Java, C#, PHP, REST API, SQL | Geschäftslogik, Datenzugriffe und Schnittstellen können strukturiert im Hintergrund arbeiten. Datenbanken mit SQL verwalten die persistenten Daten. |
| Automatisierung und Makros | Excel VBA, Python, Git | Wiederkehrende Arbeitsschritte werden per Schaltfläche oder Skript zuverlässig ausgeführt. Git hilft, den Code zu versionieren und Änderungen nachzuvollziehen. |
| Content-Management (CMS) | WordPress, PHP, HTML, CSS, JavaScript | WordPress bietet ein flexibles CMS mit tausenden Erweiterungen. Für individuelle Anpassungen können PHP, HTML, CSS und JavaScript eingesetzt werden. |
Sie müssen die Technologie nicht selbst auswählen – beschreiben Sie einfach das gewünschte Ergebnis.
🔍 Passende Technologie finden lassenHäufige Fragen zu Technologien
Welche Technologie ist für meine kleine Webseite am besten geeignet?
Für eine übersichtliche Unternehmensseite reichen häufig HTML5, CSS3 und etwas JavaScript. Wenn Formulare verarbeitet oder Inhalte dynamisch geladen werden sollen, kann beispielsweise PHP oder WordPress hinzukommen. Entscheidend sind jedoch Ihre konkreten Funktionen und Pflegewünsche.
Kann ich verschiedene Technologien miteinander kombinieren?
Ja, das ist bei modernen Projekten üblich. Eine Oberfläche kann zum Beispiel mit React entstehen, während ein Java- oder PHP-Backend Daten über eine API bereitstellt und SQL die Informationen speichert. Wichtig ist eine klar geplante Zusammenarbeit der Komponenten.
Wie lerne ich am besten eine neue Technologie?
Beginnen Sie mit einem kleinen, konkreten Ziel und bauen Sie es schrittweise aus. Lesen allein reicht selten aus; deshalb helfen kurze Übungen, eigene Anpassungen und das bewusste Prüfen von Fehlermeldungen besonders gut.
Welche Technologien sind zukunftssicher?
Keine Technologie ist dauerhaft garantiert, doch offene Standards wie HTML, CSS, JavaScript und SQL bilden seit vielen Jahren eine stabile Grundlage. Ebenso wichtig sind saubere Strukturen, Dokumentation und übertragbare Programmierprinzipien, weil sie spätere Wechsel erleichtern.
Wann sollte ich Excel VBA statt Python verwenden?
Excel VBA ist ideal, wenn Sie direkt in Excel automatisieren möchten und Ihre Benutzer mit Excel vertraut sind. Python eignet sich besser für komplexe Datenanalysen, die Verarbeitung großer Datenmengen oder wenn Sie die Automatisierung in andere Systeme integrieren möchten.
Was ist der Unterschied zwischen React und Vue.js?
Beide sind moderne JavaScript-Frameworks für interaktive Oberflächen. React wird von Facebook entwickelt und hat eine größere Community und mehr Erweiterungen. Vue.js ist leichter zu erlernen und oft einfacher in bestehende Projekte zu integrieren. Die Wahl hängt vom Projekt und den persönlichen Vorlieben ab.
Sie haben eine technische Frage zu Ihrem eigenen Projekt?
✉️ Frage persönlich klärenJetzt durchstarten – Ihr Projekt wartet
Von der einfachen Webseite bis zur datenbankgestützten Anwendung: Gemeinsam wählen wir aus der gezeigten Technologie-Bandbreite genau die Werkzeuge aus, die zu Ihrem Ziel passen.
📋 Jetzt unverbindlich anfragen – ich helfe Ihnen bei der richtigen Auswahl