Einfache Profilkarte

Teil des Abschnitts Grundlagen der HTML-Journey von Coddy. Lektion 57 von 60.

Aufgabe

Einfach

Erstelle eine einfache Profilkarte ausschließlich mit HTML. Die Karte sollte einen Titel, ein Bild und einen kurzen Absatz enthalten, die alle übersichtlich angeordnet sind.

Orientiere dich bei Struktur und Text am Bild unten:

Verwende die folgende URL für das Bild – https://storage.googleapis.com/coddy-15505.appspot.com/public/avatars/avatar8.png

Probier es selbst

Alle Lektionen in Grundlagen

1HTML-Grundlagen

Was ist HTML?Grundstruktur von HTML Tags und Elemente Verschachtelung und schließende Tags Kommentare in HTML

4Rezeptkarte

Projektübersicht Rezepttitel und Beschreibung

Zutaten

Schritte

7Persönliche Profilseite

Projektübersicht Header-Bereich

Profilbild

Über-mich-Bereich

Social Links

10Tabellen

Tabellen-Grundlagen Beschriftungen hinzufügen Zeilen und Spalten verbinden Zusammenfassung - Tabellen

2Text und Formatierung

Überschriften Absätze Zeilenumbrüche Fetter und kursiver Text Nochmals fett und kursiv Wiederholung – Formatierung

5Inhalte hinzufügen

HTML-Attribute Links Links zu neuen Seiten Bilder Bild-Attribute

8Formulare und Eingaben Teil 1

Formular-Grundlagen Texteingaben Input-Attribute Passwortfeld Labels für Eingaben Zusammenfassung – Einfaches Formular

11Event-Registrierungsseite

Projektübersicht Header-Bereich

Event-Details-Bereich

Registrierungsformular

Footer-Bereich

3Arbeiten mit Listen

Ungeordnete Liste Geordnete Liste Verschachtelte Listen Zusammenfassung – Listen

6Seitenlayout

Bereiche (Divisions)Inline-Spans Semantische Tags Sections und Articles Zusammenfassung – Layout

9Formulare und Eingaben Teil 2

Radio-Buttons Checkboxen Dropdowns Buttons Buttons in Formularen Wiederholung - Formulare #1 Wiederholung - Formulare #2

12Abschlussherausforderungen

Einfache ProfilkarteEvent-Einladungskarte Einfache Artikelseite Lieblingsbücher-Liste

Übe selbstständig: Web-Playground