{"id":5318,"date":"2026-03-09T16:33:22","date_gmt":"2026-03-09T15:33:22","guid":{"rendered":"https:\/\/support.sparkles.io\/kennisbank\/how-to-html-css-naechste-schritte-teil-2\/"},"modified":"2026-05-05T09:45:21","modified_gmt":"2026-05-05T08:45:21","slug":"how-to-html-css-naechste-schritte-teil-2","status":"publish","type":"ht_kb","link":"https:\/\/support.sparkles.io\/de\/kennisbank\/how-to-html-css-naechste-schritte-teil-2\/","title":{"rendered":"How-to: HTML &amp; CSS n\u00e4chste Schritte (Teil 2)"},"content":{"rendered":"\n<p>In Teil 1 hast du die Grundlagen von HTML und CSS kennengelernt. In diesem zweiten Teil gehen wir einen Schritt weiter. Du lernst, wie du Elemente gezielter stylen kannst, wie du Bl\u00f6cke nebeneinander anordnest, wie Formulare funktionieren und wie du eine Seite besser an verschiedene Bildschirmgr\u00f6\u00dfen anpasst.  <\/p>\n\n<h2 class=\"wp-block-heading\">Class und ID<\/h2>\n\n<p>Mit <code>class<\/code> und <code>id<\/code> kannst du HTML-Elementen einen Namen geben. Dadurch kannst du sie in CSS gezielt gestalten. <\/p>\n\n<p>Eine <code>class<\/code> verwendest du, wenn mehrere Elemente das gleiche Styling erhalten sollen.<\/p>\n\n<pre class=\"wp-block-preformatted\"><p class=\"highlight\">Dieser Text f\u00e4llt auf.<\/p>\n<p class=\"highlight\">Dieser Text f\u00e4llt auch auf.<\/p><\/pre>\n\n<p>In CSS schreibst du das so:<\/p>\n\n<pre class=\"wp-block-preformatted\">.highlight {\n  background-color: yellow;\n}<\/pre>\n\n<p>Eine <code>id<\/code> ist f\u00fcr ein einzelnes, einzigartiges Element auf der Seite gedacht.<\/p>\n\n<pre class=\"wp-block-preformatted\"><h1 id=\"hoofdtitel\">Willkommen auf meiner Seite<\/h1><\/pre>\n\n<p>In CSS schreibst du eine ID mit einer Raute:<\/p>\n\n<pre class=\"wp-block-preformatted\">#hoofdtitel {\n  color: darkblue;\n}<\/pre>\n\n<p>Kurz merken:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>.<\/code> . in CSS bedeutet eine Class<\/li>\n\n\n\n<li><code>#<\/code> # in CSS bedeutet eine ID<\/li>\n<\/ul>\n\n<p>Verwende meistens eine <code>class<\/code>. Eine <code>id<\/code> nutzt du nur, wenn etwas wirklich einzigartig ist. <\/p>\n\n<h2 class=\"wp-block-heading\">Links und Buttons<\/h2>\n\n<p>Anf\u00e4nger verwechseln Links und Buttons oft. Das ist logisch, da sie sich manchmal \u00e4hnlich sehen. Dennoch haben sie nicht die gleiche Funktion.  <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Ein <strong>Link<\/strong> f\u00fchrt dich zu einer anderen Seite oder Stelle<\/li>\n\n\n\n<li>Ein <strong>Button<\/strong> f\u00fchrt meistens eine Aktion aus, wie Senden oder \u00d6ffnen<\/li>\n<\/ul>\n\n<p>Ein normaler Link sieht so aus:<\/p>\n\n<pre class=\"wp-block-preformatted\"><a href=\"https:\/\/voorbeeld.nl\">Mehr lesen<\/a><\/pre>\n\n<p>Ein Button sieht so aus:<\/p>\n\n<pre class=\"wp-block-preformatted\"><button>Absenden<\/button><\/pre>\n\n<p>Du kannst einen Link mit CSS auch wie einen Button aussehen lassen:<\/p>\n\n<pre class=\"wp-block-preformatted\"><a href=\"#\" class=\"button-link\">Jetzt starten<\/a><\/pre>\n\n<pre class=\"wp-block-preformatted\">.button-link {\n  display: inline-block;\n  background-color: #0066cc;\n  color: white;\n  padding: 12px 20px;\n  text-decoration: none;\n  border-radius: 6px;\n}<\/pre>\n\n<p>Damit bleibt es technisch ein Link, sieht aber wie ein Button aus.<\/p>\n\n<h2 class=\"wp-block-heading\">Bilder stylen<\/h2>\n\n<p>In Teil 1 hast du gesehen, wie du ein Bild mit <code>&lt;img&gt;<\/code> hinzuf\u00fcgst. Jetzt schauen wir uns an, wie du es mit CSS sch\u00f6ner gestalten kannst. <\/p>\n\n<pre class=\"wp-block-preformatted\"><img  title=\"\" decoding=\"async\" src=\"bloem.jpg\"  alt=\"bloem How-to: HTML &amp; CSS n\u00e4chste Schritte (Teil 2)\"  class=\"foto\"\/><\/pre>\n\n<pre class=\"wp-block-preformatted\">.foto {\n  width: 300px;\n  border-radius: 12px;\n}<\/pre>\n\n<p>Was passiert hier?<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Das Bild wird 300 Pixel breit<\/li>\n\n\n\n<li>Die Ecken werden abgerundet<\/li>\n<\/ul>\n\n<p>Wenn du m\u00f6chtest, dass ein Bild sauber mit dem Bildschirm skaliert, ist dies oft praktischer:<\/p>\n\n<pre class=\"wp-block-preformatted\">.foto {\n  max-width: 100%;\n  height: auto;\n}<\/pre>\n\n<p>Dann wird das Bild nie breiter als der verf\u00fcgbare Platz.<\/p>\n\n<h2 class=\"wp-block-heading\">Formulare: Input, Label, Textarea und Button<\/h2>\n\n<p>Formulare verwendest du, wenn jemand etwas ausf\u00fcllen muss. Denke an ein Kontaktformular, eine Suchleiste oder einen Login-Bildschirm. <\/p>\n\n<p>Ein einfaches Formular kann so aussehen:<\/p>\n\n<pre class=\"wp-block-preformatted\"><form>\n  <label for=\"naam\">Name<\/label>\n  <input type=\"text\" id=\"naam\" name=\"naam\"\/>\n\n  <label for=\"bericht\">Nachricht<\/label>\n  <textarea id=\"bericht\" name=\"bericht\"><\/textarea>\n\n  <button type=\"submit\">Absenden<\/button>\n<\/form><\/pre>\n\n<p>Die wichtigsten Bestandteile sind:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;form&gt;<\/code>  ist das Formular selbst<\/li>\n\n\n\n<li><code>&lt;label&gt;<\/code>  ist die Beschriftung eines Feldes<\/li>\n\n\n\n<li><code>&lt;input&gt;<\/code>  ist ein Eingabefeld<\/li>\n\n\n\n<li><code>&lt;textarea&gt;<\/code>  ist ein gr\u00f6\u00dferes Textfeld<\/li>\n\n\n\n<li><code>&lt;button&gt;<\/code>  ist der Sende-Button<\/li>\n<\/ul>\n\n<p>Ein Label ist wichtig, weil es verdeutlicht, was ausgef\u00fcllt werden muss. Auch f\u00fcr die Barrierefreiheit ist das sehr gut. <\/p>\n\n<p>Du kannst Formulare auch stylen:<\/p>\n\n<pre class=\"wp-block-preformatted\">input,\ntextarea {\n  width: 100%;\n  padding: 10px;\n  border: 1px solid #cccccc;\n  border-radius: 6px;\n  margin-bottom: 16px;\n}\n\nbutton {\n  background-color: #0066cc;\n  color: white;\n  padding: 12px 18px;\n  border: none;\n  border-radius: 6px;\n}<\/pre>\n\n<h2 class=\"wp-block-heading\">Display: block, inline und inline-block<\/h2>\n\n<p>Mit der CSS-Eigenschaft <code>display<\/code> bestimmst du, wie sich ein Element im Layout verh\u00e4lt.<\/p>\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Wert<\/strong><\/td><td><strong>Bedeutung<\/strong><\/td><\/tr><tr><td><strong>block<\/strong><\/td><td>Das Element beginnt in einer neuen Zeile und f\u00fcllt meist die volle Breite aus<\/td><\/tr><tr><td><strong>inline<\/strong><\/td><td>Das Element bleibt in der aktuellen Zeile stehen<\/td><\/tr><tr><td><strong>inline-block<\/strong><\/td><td>Es bleibt in der Zeile stehen, aber du kannst Breite und H\u00f6he festlegen<\/td><\/tr><\/tbody><\/table><\/figure>\n\n<p>Ein Absatz ist standardm\u00e4\u00dfig meist ein Block-Element. Ein <code>span<\/code> ist standardm\u00e4\u00dfig inline. <\/p>\n\n<p>Beispiel:<\/p>\n\n<pre class=\"wp-block-preformatted\">.blok {\n  display: block;\n}\n\n.inline-tekst {\n  display: inline;\n}\n\n.knopje {\n  display: inline-block;\n}<\/pre>\n\n<p>Ein Link, der wie ein Button aussehen soll, erh\u00e4lt oft <code>inline-block<\/code>, damit das Padding richtig funktioniert.<\/p>\n\n<h2 class=\"wp-block-heading\">Position: static, relative und absolute<\/h2>\n\n<p>Mit <code>position<\/code> kannst du Elemente pr\u00e4ziser platzieren. Das ist f\u00fcr Anf\u00e4nger oft etwas schwieriger, also betrachte dies vor allem als erste Einf\u00fchrung. <\/p>\n\n<p>Die am h\u00e4ufigsten verwendeten Werte sind:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>static<\/code>static, die Standardposition<\/li>\n\n\n\n<li><code>relative<\/code>relative, das Element bleibt an seinem Platz, kann aber leicht verschoben werden<\/li>\n\n\n\n<li><code>absolute<\/code>absolute, das Element wird losgel\u00f6st im Verh\u00e4ltnis zu einem Elternelement platziert<\/li>\n<\/ul>\n\n<p>Beispiel:<\/p>\n<pre class=\"wp-block-preformatted\">.box {\n  position: relative;\n}\n\n.label {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n}<\/pre>\n<p><!-- \/wp:post-content --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Damit kannst du zum Beispiel ein kleines Label oben rechts in einer Card platzieren.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Wichtig zu merken: Ein Element mit <code>position: absolute;<\/code> orientiert sich oft am n\u00e4chsten Elternelement mit <code>position: relative;<\/code>.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\">Flexbox: Elemente ordentlich nebeneinander setzen<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Flexbox ist eine sehr praktische Methode, um Elemente nebeneinander zu setzen und ordentlich zu verteilen. Dies wird in modernen Websites h\u00e4ufig verwendet. <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Angenommen, du m\u00f6chtest zwei Bl\u00f6cke nebeneinander anzeigen:<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:preformatted --><\/p>\n<pre class=\"wp-block-preformatted\">&lt;div class=\"row\"&gt;\n  &lt;div class=\"kolom\"&gt;Block 1&lt;\/div&gt;\n  &lt;div class=\"kolom\"&gt;Block 2&lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<p><!-- \/wp:preformatted --><\/p>\n<p><!-- wp:preformatted --><\/p>\n<pre class=\"wp-block-preformatted\">.row {\n  display: flex;\n  gap: 20px;\n}\n\n.kolom {\n  background-color: #f2f2f2;\n  padding: 20px;\n  flex: 1;\n}<\/pre>\n<p><!-- \/wp:preformatted --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Was passiert hier?<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<ul class=\"wp-block-list\">\n<li><code>display: flex;<\/code> display: flex setzt die Bl\u00f6cke nebeneinander<\/li>\n<li><code>gap: 20px;<\/code> gap erzeugt Platz zwischen den Bl\u00f6cken<\/li>\n<li><code>flex: 1;<\/code> flex: 1 sorgt daf\u00fcr, dass beide Bl\u00f6cke gleich viel Platz erhalten<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Andere n\u00fctzliche Flexbox-Eigenschaften sind:<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:table --><\/p>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<td><strong>Eigenschaft<\/strong><\/td>\n<td><strong>Was macht sie?<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>justify-content<\/strong><\/td>\n<td>Verteilt den Platz horizontal<\/td>\n<\/tr>\n<tr>\n<td><strong>align-items<\/strong><\/td>\n<td>Richtet Items vertikal aus<\/td>\n<\/tr>\n<tr>\n<td><strong>flex-direction<\/strong><\/td>\n<td>Bestimmt, ob Items neben- oder untereinander stehen<\/td>\n<\/tr>\n<tr>\n<td><strong>flex-wrap<\/strong><\/td>\n<td>L\u00e4sst Items in eine neue Zeile umbrechen, wenn zu wenig Platz ist<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p><!-- \/wp:table --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Beispiel:<\/p>\n<p><!-- \/wp:preformatted --><\/p>\n<pre class=\"wp-block-preformatted\">.row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}<\/pre>\n<p><!-- \/wp:preformatted --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\">Responsive Basics<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Eine Website wird auf verschiedenen Bildschirmen wie Mobilger\u00e4ten, Tablets und Desktops betrachtet. Responsive Design bedeutet, dass sich dein Layout an den Bildschirm anpasst. <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Eine h\u00e4ufig verwendete Technik hierf\u00fcr ist eine Media Query.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:preformatted --><\/p>\n<pre class=\"wp-block-preformatted\">@media (max-width: 768px) {\n  .row {\n  flex-direction: column;\n  }\n}<\/pre>\n<p><!-- \/wp:preformatted --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Was bedeutet das?<\/p>\n<p><!-- \/wp:list --><\/p>\n<ul class=\"wp-block-list\">\n<li>Wenn der Bildschirm 768 Pixel breit oder schmaler ist<\/li>\n<li>Dann stehen die Bl\u00f6cke nicht mehr nebeneinander<\/li>\n<li>Sondern untereinander<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Das ist auf dem Handy praktisch, da dort weniger horizontaler Platz zur Verf\u00fcgung steht.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Noch ein paar Responsive-Tipps f\u00fcr Anf\u00e4nger:<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:list --><\/p>\n<ul class=\"wp-block-list\">\n<li>Verwende lieber <code>max-width: 100%<\/code> statt fester Breiten f\u00fcr Bilder<\/li>\n<li>Nutze Flexbox, damit Bl\u00f6cke sich leichter anpassen<\/li>\n<li>Pr\u00fcfe immer, wie etwas auf dem Handy aussieht<\/li>\n<li>Mache Buttons und Links gro\u00df genug zum Antippen<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\">Ein komplettes Mini-Beispiel<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Hier siehst du einen einfachen Card-Block mit Bild, Titel, Text und Button:<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:preformatted --><\/p>\n<pre class=\"wp-block-preformatted\">&lt;div class=\"card\"&gt;\n  &lt;img src=\"beispiel.jpg\" alt=\"Beispielbild\" class=\"card-image\"&gt;\n  &lt;h2&gt;Lerne HTML und CSS&lt;\/h2&gt;\n  &lt;p&gt;Mit kleinen Schritten kommst du schon sehr weit.&lt;\/p&gt;\n  &lt;a href=\"#\" class=\"button-link\"&gt;Mehr lesen&lt;\/a&gt;\n&lt;\/div&gt;<\/pre>\n<p><!-- \/wp:preformatted --><\/p>\n<p><!-- wp:preformatted --><\/p>\n<pre class=\"wp-block-preformatted\">.card {\n  max-width: 400px;\n  padding: 20px;\n  border: 1px solid #dddddd;\n  border-radius: 10px;\n  background-color: #ffffff;\n}\n\n.card-image {\n  max-width: 100%;\n  height: auto;\n  border-radius: 8px;\n  margin-bottom: 16px;\n}\n\n.button-link {\n  display: inline-block;\n  background-color: #0066cc;\n  color: white;\n  padding: 12px 18px;\n  text-decoration: none;\n  border-radius: 6px;\n}<\/pre>\n<p><!-- \/wp:preformatted --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Dies ist ein sch\u00f6nes Beispiel, in dem mehrere Dinge zusammenkommen:<\/p>\n<p><!-- \/wp:list --><\/p>\n<ul class=\"wp-block-list\">\n<li>HTML f\u00fcr die Struktur<\/li>\n<li>Eine Class zum Stylen<\/li>\n<li>Ein Bild, das sauber skaliert<\/li>\n<li>Ein Link, der wie ein Button aussieht<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\">Kleine \u00dcbung 1<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Erstelle einen Block mit:<\/p>\n<p><!-- \/wp:list --><\/p>\n<ul class=\"wp-block-list\">\n<li>einem Titel<\/li>\n<li>einem kurzen Text<\/li>\n<li>einem Link, der wie ein Button aussieht<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:details --><\/p>\n<details class=\"wp-block-details\">\n<summary>Beispielantwort<\/summary>\n<p><!-- wp:preformatted --><\/p>\n<pre class=\"wp-block-preformatted\">&lt;div class=\"blok\"&gt;\n  &lt;h2&gt;Willkommen&lt;\/h2&gt;\n  &lt;p&gt;Dies ist mein erster Content-Block.&lt;\/p&gt;\n  &lt;a href=\"#\" class=\"button-link\"&gt;Mehr ansehen&lt;\/a&gt;\n&lt;\/div&gt;<\/pre>\n<p><!-- \/wp:preformatted --><\/p>\n<p><!-- wp:preformatted --><\/p>\n<pre class=\"wp-block-preformatted\">.blok {\n  padding: 20px;\n  background-color: #f3f3f3;\n}\n\n.button-link {\n  display: inline-block;\n  background-color: #0066cc;\n  color: white;\n  padding: 10px 16px;\n  text-decoration: none;\n}<\/pre>\n<p><!-- \/wp:preformatted --><\/p>\n<\/details>\n<p><!-- \/wp:details --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\">Kleine \u00dcbung 2<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Erstelle zwei Bl\u00f6cke nebeneinander mit Flexbox.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:details --><\/p>\n<details class=\"wp-block-details\">\n<summary>Beispielantwort<\/summary>\n<p><!-- wp:preformatted --><\/p>\n<pre class=\"wp-block-preformatted\">&lt;div class=\"row\"&gt;\n  &lt;div class=\"kolom\"&gt;Links&lt;\/div&gt;\n  &lt;div class=\"kolom\"&gt;Rechts&lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<p><!-- \/wp:preformatted --><\/p>\n<p><!-- wp:preformatted --><\/p>\n<pre class=\"wp-block-preformatted\">.row {\n  display: flex;\n  gap: 20px;\n}\n\n.kolom {\n  flex: 1;\n  background-color: #eeeeee;\n  padding: 20px;\n}<\/pre>\n<p><!-- \/wp:preformatted --><\/p>\n<\/details>\n<p><!-- \/wp:details --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\">Kleine \u00dcbung 3<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Sorge daf\u00fcr, dass zwei Spalten auf dem Handy untereinander stehen.<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:details --><\/p>\n<details class=\"wp-block-details\">\n<summary>Beispielantwort<\/summary>\n<p><!-- wp:preformatted --><\/p>\n<pre class=\"wp-block-preformatted\">@media (max-width: 768px) {\n  .row {\n  flex-direction: column;\n  }\n}<\/pre>\n<p><!-- \/wp:preformatted --><\/p>\n<\/details>\n<p><!-- \/wp:details --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\">H\u00e4ufige Fehler in Teil 2<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:list --><\/p>\n<ul class=\"wp-block-list\">\n<li>Eine <code>id<\/code> mehrmals auf derselben Seite verwenden<\/li>\n<li>Einen Link verwenden, wo eigentlich ein Button n\u00f6tig w\u00e4re, oder umgekehrt<\/li>\n<li>Bildern eine feste Breite geben, wodurch sie auf dem Handy zu gro\u00df werden<\/li>\n<li>Vergessen, dass <code>display: flex;<\/code> auf dem Elternelement stehen muss<\/li>\n<li><code>position: absolute;<\/code> absolute verwenden, ohne zu verstehen, im Verh\u00e4ltnis zu welchem Element es platziert wird<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\">Zusammenfassung<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>In diesem zweiten Teil hast du gelernt, wie du HTML-Elemente mit <code>class<\/code> und <code>id<\/code> besser steuern kannst, wie sich Links und Buttons unterscheiden, wie Formulare funktionieren und wie du mit Flexbox und Media Queries ein Layout besser aufbauen kannst. Dies sind wichtige Bausteine f\u00fcr fast jede moderne Webseite. <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Das Wichtigste ist, dass du klein anf\u00e4ngst. Baue erst einen einfachen Block, gestalte ihn mit CSS und f\u00fcge erst danach neue Dinge hinzu. So beh\u00e4ltst du den \u00dcberblick und lernst am schnellsten.  <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\">\u00dcbungsaufgabe f\u00fcr dich<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Erstelle selbst eine kleine Profilkarte mit:<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:list --><\/p>\n<ul class=\"wp-block-list\">\n<li>einem Bild<\/li>\n<li>einem Namen als Titel<\/li>\n<li>einer kurzen Beschreibung<\/li>\n<li>einem Link im Button-Stil<\/li>\n<\/ul>\n<p><!-- \/wp:list --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Gib der Karte eine Hintergrundfarbe, Padding, abgerundete Ecken und sorge daf\u00fcr, dass das Bild sauber mit skaliert. Wenn das klappt, hast du schon eine sehr gute Basis geschaffen. <\/p>\n<p><!-- \/wp:paragraph --><\/p>\n","protected":false},"excerpt":{"rendered":"<p class=\"qua-blog-post-description\">In Teil 1 hast du die Grundlagen von HTML und CSS kennengelernt. In diesem zweiten Teil gehen wir einen Schritt weiter. Du lernst, wie du Elemente gezielter stylen kannst, wie du Bl\u00f6cke nebeneinander anordnest, wie Formulare funktionieren und wie du eine Seite besser an verschiedene Bildschirmgr\u00f6\u00dfen anpasst. Class und ID Mit class und id kannst [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"ht-kb-category":[429],"ht-kb-tag":[],"class_list":["post-5318","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-cms"],"featured_img":false,"coauthors":[],"author_meta":{"author_link":"https:\/\/support.sparkles.io\/de\/author\/admin\/","display_name":"Sparkles Support"},"relative_dates":{"created":"Ver\u00f6ffentlicht 2\u00a0Monaten vor","modified":"Aktualisiert 1\u00a0Woche vor"},"absolute_dates":{"created":"Ver\u00f6ffentlicht am 09\/03\/2026","modified":"Aktualisiert am 05\/05\/2026"},"absolute_dates_time":{"created":"Ver\u00f6ffentlicht am 09\/03\/2026 16:33","modified":"Aktualisiert am 05\/05\/2026 09:45"},"featured_img_caption":"","tax_additional":{"ht_kb_category":{"linked":["<a href=\"https:\/\/support.sparkles.io\/artikel-categorieen\/cms\/\" class=\"advgb-post-tax-term\">CMS<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">CMS<\/span>"],"slug":"ht_kb_category","name":"Article Categories"},"ht_kb_tag":{"linked":[],"unlinked":[],"slug":"ht_kb_tag","name":"Article Tags"}},"series_order":"","_links":{"self":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/5318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/comments?post=5318"}],"version-history":[{"count":1,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/5318\/revisions"}],"predecessor-version":[{"id":5319,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/5318\/revisions\/5319"}],"wp:attachment":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/media?parent=5318"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb-category?post=5318"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=5318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}