Zadanie: Stwórz minimalny dokument HTML z poprawnym doctype, <head> (meta charset, title) oraz <body> zawierającym <h1> i <p>.
<!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <title>Moja strona</title> </head> <body> <h1>Tytuł</h1> <p>Akapit tekstu.</p> </body> </html>
Zadanie: Wstaw akapit zawierający cytat i słowo wyróżnione (<em> lub <strong>). Użyj encji HTML dla znaku & oraz < i >.
<p>To jest przykład: & — znak ampersand. Cytat: <q>Ucz się codziennie</q>. <strong>Ważne!</strong></p>
Zadanie: Wstaw obraz z atrybutem alt i atrybutem width ustawionym na 300px. Dodaj opis pod obrazem (figcaption w elemencie figure).
<figure> <img src="https://placekitten.com/600/400" alt="Kot" width="300"> <figcaption>Kot w pudełku</figcaption> </figure>
Zadanie: Utwórz link otwierający zewnętrzną stronę w nowej karcie i dodaj rel="noopener noreferrer". Stwórz też link do sekcji na tej samej stronie (anchor).
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Zewnętrzny</a> <a href="#sekcja1">Idź do sekcji 1</a>
Zadanie: Ułóż strukturę artykułu z zastosowaniem h1 (tytuł), h2 (sekcje) i h3 (podsekcje). Zadbaj o logiczną hierarchię nagłówków.
<h1>Tytuł artykułu</h1> <h2>Sekcja pierwsza</h2> <h3>Podsekcja</h3> <h2>Sekcja druga</h2>
Zadanie: Zbuduj tabelę z nagłówkiem (thead), ciałem (tbody) i stopką (tfoot). Dodaj 3 kolumny i 2 wiersze danych.
<table>
<thead>
<tr><th>Imię</th><th>Nazwisko</th><th>Wiek</th></tr>
</thead>
<tbody>
<tr><td>Jan</td><td>Kowalski</td><td>20</td></tr>
<tr><td>Anna</td><td>Nowak</td><td>22</td></tr>
</tbody>
</table>
Zadanie: Utwórz ul, ol oraz dl z 2 definicjami (dt + dd).
<ul> <li>Punkt 1</li> </ul> <ol> <li>Krok 1</li> </ol> <dl> <dt>HTML</dt> <dd>Język znaczników</dd> </dl>
Zadanie: Zbuduj szkielet strony używając elementów semantycznych: header, nav, main, article, aside, footer.
<header></header> <nav></nav> <main> <article></article> <aside></aside> </main> <footer></footer>
Zadanie: Zrób prosty layout: lewy pasek 200px i treść obok, użyj float, a potem zrób to samo z flex (zamień float na flex i porównaj).
/* float */
.sidebar{float:left;width:200px}
.content{margin-left:200px}
/* flex */
.container{display:flex}
.sidebar{width:200px}
.content{flex:1}
Zadanie: Stwórz formularz z input (text), email, checkbox, radio i select. Dodaj label dla każdego pola.
<form> <label>Imię <input type="text" name="imie"></label> <label>Email <input type="email" name="email"></label> <label><input type="checkbox" name="zgoda"> Zgoda</label> <label><input type="radio" name="płeć" value="m"> M</label> <select><option>Wybierz</option></select> </form>
Zadanie: Napisz reguły stylów: dla elementu o id #logo ustaw rozmiar, dla klasy .btn ustaw padding. Zademonstruj selektor atrybutu (input[type="email"]).
#logo{font-size:24px}
.btn{padding:8px 12px}
input[type="email"]{border:1px solid #ccc}
Zadanie: Pokaż 3 sposoby dodania CSS: inline, <style> w head i zewnętrzny plik. Wyjaśnij, który ma priorytet.
/* inline */ <h1 style="color:red">A</h1>
/* head */ <style> h1{color:green} </style>
/* external */ <link rel="stylesheet" href="styles.css">
Zadanie: Pokaż przykład zapisu kolorów: nazwa, hex, rgb, rgba, hsl.
color: red; color: #ff0000; color: rgb(255,0,0); color: rgba(255,0,0,0.5); color: hsl(0,100%,50%);
Zadanie: Ustaw font-family, font-size, line-height i text-align dla nagłówka i paragrafu.
h1{font-family:Arial, sans-serif;font-size:28px}
p{line-height:1.6;text-align:justify}
Zadanie: Wyśrodkuj blok o stałej szerokości poziomo i pionowo w oknie przeglądarki.
.box{width:300px;height:200px;margin:auto;position:absolute;left:0;right:0;top:0;bottom:0}
/* lub flex */
.container{display:flex;align-items:center;justify-content:center;height:100vh}
Zadanie: Pokaż różnicę między margin i padding; ustaw box-sizing: border-box i przetestuj zachowanie szerokości.
*{box-sizing:border-box}
.box{width:200px;padding:20px;border:5px solid #333;margin:10px}
Zadanie: Nadaj linkom różne style dla stanów: normal, hover, active, visited, focus.
a{color:#7be28a}
a:hover{color:#fff}
a:active{opacity:0.8}
a:visited{color:#9aa6ad}
a:focus{outline:2px solid #7be28a}
Zadanie: Zrób element z zaokrąglonymi rogami, gradientowym obramowaniem (border-image lub pseudo-elementy) i cieniem.
.card{border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.6);border:2px solid rgba(255,255,255,0.03)}
/* prosty gradient background */
.card::before{content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none}
Zadanie: Ostyluj tabelę: border-collapse, padding komórek, wyróżnienie pierwszego wiersza, zebra-styling dla wierszy.
table{border-collapse:collapse;width:100%}
th,td{padding:8px;border:1px solid #222}
tr:nth-child(even){background:#0f1416}
thead th{background:#161a1b;color:#7be28a}
Zadanie: Usuń domyślne wypunktowanie i dodaj ikonę zamiast bullet (np. za pomocą pseudo-elementu).
ul{list-style:none;padding:0}
li::before{content:'•';color:#7be28a;margin-right:8px}
Zadanie: Ostyluj input, select i button (padding, border-radius, focus state).
input,select,button{padding:8px 10px;border-radius:6px;border:1px solid #333}
input:focus{outline:2px solid #7be28a}
Zadanie: Umieść element o klasie .badge absolutnie względem rodzica (parent: position:relative), oraz przyklej stopkę fixed do dołu strony.
.parent{position:relative}
.badge{position:absolute;right:10px;top:10px}
footer{position:fixed;bottom:0;left:0;right:0}
Zadanie: Pokaż przykład użycia jednostek px, %, em, rem, vw i vh.
.box{width:300px;height:50vh;padding:1rem;font-size:1.2em}
.container{width:80%}
Zadanie: Przygotuj krótką ściągawkę 10 najważniejszych właściwości CSS (np. display, position, margin, padding, width, height, color, background, border, box-shadow) i zamieść je w bloku pre.
display position margin padding width height color background border box-shadow