Wenn du schon HTML und CSS kennst, dann ist es Zeit für dein erstes richtiges HTML CSS Projekt Kinder! In diesem Mini-Projekt erstellst du deine eigene Visitenkarten-Webseite mit allem, was du bisher gelernt hast. Das macht Spaß und zeigt allen, was du schon kannst.
Was ist eine Visitenkarten-Webseite?
Deine digitale Visitenkarte
Eine Visitenkarten-Webseite ist wie eine echte Visitenkarte, nur im Internet. Statt auf einem kleinen Stück Papier steht alles Wichtige über dich auf einer hübschen Webseite. Deine Familie und Freunde können sie im Browser anschauen und sind bestimmt beeindruckt von deinen Programmierkünsten.
Das Tolle an einer digitalen Visitenkarte ist, dass du viel mehr Platz hast als auf Papier. Du kannst Farben verwenden, Fotos einfügen und sogar kleine Animationen mit CSS machen. So wird dein erstes Webseiten-Projekt zu etwas ganz Besonderem.
Was gehört auf deine Visitenkarte?
Auf deine Visitenkarten-Webseite gehören die wichtigsten Informationen über dich. Das kann dein Name sein, dein Alter, deine Hobbys und was du gerne machst. Vielleicht willst du auch erzählen, dass du Programmieren lernst oder welche Spiele du gerne spielst.
Du kannst auch ein Foto von dir hinzufügen, damit andere sehen, wer du bist. Wichtig ist, dass du nur Sachen schreibst, die du auch anderen zeigen möchtest. Deine Adresse oder Telefonnummer gehören nicht ins Internet!
Vorbereitung für dein HTML CSS Projekt Kinder
Welche Programme brauchst du?
Für dein Visitenkarten-Projekt mit HTML und CSS brauchst du nur die Programme, die du schon kennst. Einen Texteditor wie Notepad++ oder Visual Studio Code für den Code und einen Browser wie Chrome oder Firefox zum Anschauen. Mehr brauchst du nicht!
Lege einen neuen Ordner auf deinem Computer an und nenne ihn "Meine-Visitenkarte". Dort speicherst du alle Dateien für dein Projekt. So behältst du alles schön ordentlich zusammen.
Deine Ideen sammeln
Bevor du anfängst zu programmieren, überleg dir, wie deine Visitenkarte aussehen soll. Welche Farben gefallen dir? Magst du eher helle oder dunkle Farben? Soll alles in der Mitte stehen oder lieber links?
Nimm dir ein Blatt Papier und male oder schreibe auf, was auf deine Visitenkarte soll. Das hilft dir später beim Programmieren, weil du schon weißt, was du machen willst. Auch echte Designer machen das so!
HTML-Grundgerüst für deine Visitenkarte erstellen
Die HTML-Datei anlegen
Jetzt geht es los mit dem Programmieren! Erstelle eine neue Datei und nenne sie "index.html". Das ist der Standard-Name für die Hauptseite einer Webseite. Fang mit dem HTML-Grundgerüst an, das du schon kennst.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine Visitenkarte</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="visitenkarte">
<h1>Hallo, ich bin [Dein Name]!</h1>
</div>
</body>
</html>Vergiss nicht, den Link zur CSS-Datei im Head-Bereich einzufügen. Die Datei "style.css" erstellst du gleich. So kann deine HTML-Seite später das schöne Design laden.
Deine persönlichen Infos einfügen
Jetzt füllst du deine Visitenkarte mit Leben! Ergänze nach der Überschrift weitere Informationen über dich. Du kannst Absätze mit <p> verwenden und Listen mit <ul> für deine Hobbys.
<div class="visitenkarte">
<h1>Hallo, ich bin Max!</h1>
<p>Ich bin 12 Jahre alt und lerne gerade Programmieren.</p>
<h2>Meine Hobbys:</h2>
<ul>
<li>Programmieren lernen</li>
<li>Fußball spielen</li>
<li>Bücher lesen</li>
<li>Mit Freunden spielen</li>
</ul>
<p>Ich finde es toll, eigene Webseiten zu erstellen!</p>
</div>Denk daran, deinen eigenen Namen und deine eigenen Hobbys einzusetzen. Das macht deine Visitenkarte einzigartig und persönlich. Du kannst so viele Informationen hinzufügen, wie du möchtest.
Ein Foto von dir hinzufügen
Ein Foto macht deine Visitenkarte noch persönlicher. Speichere ein Foto von dir in deinem Projekt-Ordner und gib ihm einen einfachen Namen wie "mein-foto.jpg". Dann fügst du es mit dem <img>-Tag ein.
<div class="visitenkarte">
<img src="mein-foto.jpg" alt="Das bin ich!" class="mein-foto">
<h1>Hallo, ich bin Max!</h1>
<!-- Rest deiner Inhalte -->
</div>Die Klasse "mein-foto" hilft dir später beim CSS-Styling. So kannst du das Foto rund machen oder die Größe ändern. Vergiss nicht das alt-Attribut - das ist wichtig für die Barrierefreiheit.
CSS-Styling für deine Visitenkarte
Farben und Schriften auswählen
Jetzt wird es bunt! Erstelle die Datei "style.css" in deinem Projekt-Ordner. Hier kommt das Design für deine Visitenkarte rein. Fang mit den Grundfarben und Schriften an.
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 0;
padding: 20px;
}
.visitenkarte {
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
padding: 30px;
max-width: 500px;
margin: 0 auto;
text-align: center;
}
h1 {
color: #2E8B57;
font-size: 28px;
}
p {
color: #333;
line-height: 1.6;
}Diese CSS-Regeln machen deine Visitenkarte schön zentriert mit abgerundeten Ecken und einem leichten Schatten. Du kannst die Farben natürlich ändern - nimm einfach deine Lieblingsfarben!
Das Layout schön gestalten
Jetzt gestaltest du dein Foto und die Listen schöner. Das Foto soll rund werden und die Hobbys-Liste bekommt ein hübscheres Design.
.mein-foto {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #2E8B57;
margin-bottom: 20px;
}
ul {
list-style: none;
padding: 0;
}
li {
background-color: #e8f5e8;
margin: 5px 0;
padding: 10px;
border-radius: 8px;
border-left: 4px solid #2E8B57;
}
h2 {
color: #2E8B57;
margin-top: 30px;
}Das runde Foto ist ein echter Hingucker! Mit border-radius: 50% wird jedes Bild rund. Die Hobbys bekommen durch die grünen Kästen ein professionelles Aussehen.
Deine Visitenkarte responsive machen
Damit deine Visitenkarte auch auf dem Handy gut aussieht, fügst du noch ein paar responsive Regeln hinzu. So passt sie sich automatisch an kleinere Bildschirme an.
@media (max-width: 600px) {
.visitenkarte {
margin: 10px;
padding: 20px;
}
.mein-foto {
width: 120px;
height: 120px;
}
h1 {
font-size: 24px;
}
}Diese Media Query sorgt dafür, dass alles auch auf kleineren Bildschirmen gut lesbar bleibt. Das Foto wird etwas kleiner und die Schrift passt sich an.
Deine Visitenkarte testen und verbessern
Im Browser anschauen
Jetzt ist der spannende Moment da! Öffne deine "index.html" im Browser und schau dir deine Visitenkarte an. Sieht sie so aus, wie du es dir vorgestellt hast? Falls nicht, kein Problem - das gehört zum Programmieren dazu.
Teste deine Seite in verschiedenen Größen. Mach das Browser-Fenster mal kleiner und größer. So siehst du, ob deine responsive Regeln funktionieren. Das ist wichtig, weil andere deine Seite vielleicht auf dem Tablet oder Handy anschauen.
Kleine Fehler beheben
Manchmal funktioniert nicht alles beim ersten Mal. Das ist völlig normal! Schau in die Entwickler-Tools deines Browsers - dort siehst du, wenn etwas nicht stimmt. Meistens sind es nur kleine Tippfehler im Code.
Häufige Fehler sind vergessene Anführungszeichen, falsche Dateinamen oder Tippfehler in den CSS-Regeln. Geh deinen Code Zeile für Zeile durch und vergleiche ihn mit den Beispielen hier im Artikel.
Deine fertige Webseite zeigen
Familie und Freunde beeindrucken
Glückwunsch! Du hast dein erstes richtiges HTML- und CSS-Projekt fertig. Jetzt kannst du stolz deine Visitenkarten-Webseite herumzeigen. Lade deine Eltern, Geschwister und Freunde ein, sich deine Arbeit anzuschauen.
Erkläre ihnen, was du gemacht hast. Zeig ihnen den Code und erzähl, wie HTML für den Inhalt und CSS für das Design zuständig ist. Die meisten Erwachsenen sind wirklich beeindruckt, wenn Kinder programmieren können!
Was du als Nächstes lernen kannst
Deine Visitenkarte ist erst der Anfang! Du kannst sie immer weiter verbessern und neue Sachen hinzufügen. Vielleicht willst du mehr Seiten erstellen oder andere coole Effekte mit CSS ausprobieren.
Im Webseiten Projekt Web für Kinder findest du noch viele weitere spannende Projekte und Ideen. Du könntest als Nächstes eine ganze Webseite über dein Lieblingshobby erstellen oder eine kleine Galerie mit deinen Fotos bauen. Die Möglichkeiten sind endlos!
Das Wichtigste ist, dass du weitermachst und neugierig bleibst. Jedes neue Projekt macht dich zu einem besseren Programmierer. Bald kannst du richtig komplizierte und coole Webseiten erstellen!
Neugierig auf mehr? Erfahre Was ist JavaScript!
