{ "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-elements", "title": "HTML Block & Inline", "description": "Zrozum podstawową różnicę między elementami kontenerowymi (blokowymi) a elementami liniowymi", "mode": "html", "difficulty": "beginner", "lessons": [ { "id": "block-vs-inline-intro", "title": "Elementy blokowe vs liniowe", "description": "Elementy HTML dzielą się na dwie główne kategorie:

Elementy blokowe (kontenery) zaczynają się w nowej linii i zajmują pełną szerokość. Przykłady: <div>, <p>, <h1>, <section>

Elementy liniowe płyną wewnątrz tekstu i zajmują tylko potrzebną szerokość. Przykłady: <span>, <a>, <strong>, <em>", "task": "Otocz słowo ważne tagami <strong>, aby je pogrubić. Zauważ, jak akapit (blok) zajmuje pełną szerokość, podczas gdy strong (liniowy) płynie z tekstem.", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }", "sandboxCSS": "", "initialCode": "

To jest akapit z ważne słowem.

", "solution": "

To jest akapit z ważne słowem.

", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "p", "message": "Dodaj element akapitu <p>" }, { "type": "parent_child", "value": { "parent": "p", "child": "strong" }, "message": "Otocz słowo ważne tagami <strong>" } ] }, { "id": "semantic-containers", "title": "Tagi semantyczne", "description": "Nowoczesny HTML używa semantycznych kontenerów, które opisują swoją zawartość:

<header> - Nagłówek strony lub sekcji
<nav> - Linki nawigacyjne
<main> - Główna treść
<section> - Grupa tematyczna
<article> - Samodzielna treść
<footer> - Stopka strony lub sekcji", "task": "Stwórz podstawową strukturę strony:
1. Dodaj <header> z <h1> zawierającym tekst Moja Strona
2. Dodaj element <main> z akapitem mówiącym Witaj na mojej stronie!
3. Dodaj <footer> z akapitem mówiącym Copyright 2026", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }", "sandboxCSS": "", "initialCode": "", "solution": "
\n

Moja Strona

\n
\n
\n

Witaj na mojej stronie!

\n
\n", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "header", "message": "Dodaj element <header>" }, { "type": "element_exists", "value": "main", "message": "Dodaj element <main>" }, { "type": "element_exists", "value": "footer", "message": "Dodaj element <footer>" }, { "type": "parent_child", "value": { "parent": "header", "child": "h1" }, "message": "Dodaj nagłówek <h1> wewnątrz header" } ] } ] }