Kurs HTML i CSS od podstaw: darmowy plan nauki krok po kroku
HTML i CSS opanujesz od podstaw za darmo, mając tylko przeglądarkę i edytor kodu, a przy 30-60 minutach nauki dziennie podstawy zajmą około czterech tygodni. HTML opisuje strukturę strony, a CSS jej wygląd. Uczysz się w kolejności: szkielet dokumentu, tekst, linki i obrazy, listy, tabele i formularze, a potem selektory, model pudełkowy, Flexbox, Grid i responsywność. Na koniec publikujesz własną stronę.
Ten tekst działa jak minikurs: każdy etap to wyjaśnienie, przykład kodu i zadanie. Przy większości etapów znajdziesz link do bezpłatnej lekcji z kursu HTML i CSS w CodeWorlds, gdzie przećwiczysz temat w przeglądarce. Nie wiesz jeszcze, czy tworzenie stron to kierunek dla Ciebie? Przeczytaj najpierw, od czego zacząć naukę programowania.
Czym są HTML i CSS
HTML (HyperText Markup Language) to język znaczników opisujący strukturę strony, czyli to, gdzie jest nagłówek, akapit czy obrazek. CSS (Cascading Style Sheets) odpowiada za wygląd: kolory, czcionki, odstępy i układ. HTML mówi, co jest na stronie, a CSS, jak to wygląda. Trzecia warstwa, JavaScript, dodaje zachowanie, ale na start nie będzie Ci potrzebna.
Treść zapisujesz znacznikami. Większość ma wersję otwierającą i zamykającą, na przykład <p> i </p>, a pomiędzy nimi jest zawartość elementu. Niektóre, jak <img>, nie mają zamknięcia. Atrybuty dodają informacje: href mówi linkowi, dokąd prowadzi, a alt opisuje obrazek osobom, które go nie widzą. Na początek wystarczą:
<h1>do<h6>: nagłówki, od najważniejszego,<p>: akapit,<a>: link,<img>: obrazek,<ul>,<ol>i<li>: listy punktowane i numerowane,<div>: uniwersalny kontener,<button>: przycisk.
Pełną listę elementów ma dokumentacja MDN, a na rozgrzewkę przejdź lekcję Wprowadzenie do HTML.
Plan nauki na cztery tygodnie
Plan zakłada 30-60 minut nauki dziennie. Jeśli masz więcej czasu, skończysz szybciej, a jeśli mniej, rozłóż go na dwa miesiące. Najważniejsza jest regularność, o której więcej przeczytasz w tekście o tym, jak nauczyć się programować.
| Tydzień | Tematy | Co masz na koniec |
|---|---|---|
| 1 | szkielet dokumentu, semantyka, tekst, linki, obrazy | kilka podstron połączonych linkami |
| 2 | listy, tabele, formularze, selektory CSS | ostylowana strona z formularzem kontaktowym |
| 3 | kaskada, model pudełkowy, Flexbox, Grid | menu, karty i galeria ułożone w siatce |
| 4 | responsywność, projekt końcowy, publikacja | własna strona pod publicznym adresem |
Potrzebujesz edytora kodu, na przykład darmowego Visual Studio Code, i przeglądarki z narzędziami deweloperskimi (klawisz F12, a na Macu Cmd+Option+I). Klikasz w nich dowolny element, widzisz jego style i zmieniasz je na żywo, więc to najlepsze miejsce do eksperymentów.
Szkielet dokumentu HTML
Każda strona ma ten sam szkielet. Utwórz folder na projekt, a w nim plik index.html:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Witaj, świecie!</h1>
<p>To jest mój pierwszy akapit napisany w HTML.</p>
</body>
</html><!DOCTYPE html> oznacza współczesny HTML, a lang podaje język treści czytnikom ekranu i wyszukiwarkom. <head> zawiera informacje o stronie: kodowanie znaków, tytuł karty i ustawienie viewport, bez którego telefon pokaże stronę pomniejszoną jak na monitorze. Widoczna treść trafia do <body>.
Zadanie: otwórz plik w przeglądarce, zmień nagłówek, zapisz i odśwież kartę. To Twój cykl pracy na cały kurs.
Semantyczne znaczniki
Nagłówki tworzą hierarchię: <h1> to tytuł strony, <h2> rozdziały, a <h3> podrozdziały. Wybieraj je według ważności, a nie wielkości, bo rozmiar ustawisz w CSS. Stronę dzielisz na części znacznikami semantycznymi, których nazwa mówi, co zawierają:
<body>
<header>
<nav>
<a href="index.html">Start</a>
<a href="projekty.html">Projekty</a>
<a href="kontakt.html">Kontakt</a>
</nav>
</header>
<main>
<article>
<h1>Jak powstała moja pierwsza strona</h1>
<p>Wszystko zaczęło się od jednego pliku index.html.</p>
</article>
<aside>
<h2>Przydatne linki</h2>
</aside>
</main>
<footer>
<p>Kontakt: ania@example.com</p>
</footer>
</body>Na ekranie <header> wygląda tak samo jak <div>, ale czytnik ekranu pozwala przeskoczyć od razu do <main> albo do nawigacji, a wyszukiwarka lepiej rozumie, co jest główną treścią. <div> zostaw na kontenery potrzebne wyłącznie do stylowania. Temat rozwija lekcja Semantyka w HTML.
Zadanie: rozpisz na kartce ulubioną stronę na części header, nav, main i footer.
Tekst, linki i obrazy
Tekst dzielisz na akapity <p>, ważne fragmenty oznaczasz <strong>, a wyróżnione <em>. Te znaczniki niosą znaczenie, a nie wygląd, więc pogrubienie dla ozdoby zrobisz w CSS.
<p>Pierwszą stronę da się zbudować w <strong>jeden wieczór</strong>.</p>
<p>Zobacz moje <a href="projekty.html">projekty</a> albo napisz na
<a href="mailto:ania@example.com">ania@example.com</a>.</p>
<img src="img/zdjecie.jpg" alt="Ania przy biurku z laptopem" width="600" height="400">Link to znacznik <a> z atrybutem href, który może być względny (projekty.html), bezwzględny (zaczyna się od https://) albo specjalny, jak mailto:, otwierający program pocztowy. W <img> atrybut src wskazuje plik, a alt opisuje zawartość: przeczyta go czytnik ekranu, a przeglądarka pokaże, gdy obrazek się nie wczyta. Atrybuty width i height rezerwują miejsce, więc treść nie skacze podczas ładowania. Przećwiczysz to w lekcji Formatowanie tekstu w HTML.
Zadanie: zrób podstrony index.html i projekty.html i połącz je linkami w obie strony.
Listy i tabele
<ul> tworzy listę punktowaną, <ol> numerowaną, a każdy punkt to <li>. Tabela służy do danych w wierszach i kolumnach, jak plan zajęć czy cennik.
<ol>
<li>Napisz strukturę w HTML</li>
<li>Dodaj style w CSS</li>
<li>Opublikuj stronę</li>
</ol>
<table>
<caption>Plan tygodnia</caption>
<thead>
<tr><th>Dzień</th><th>Temat</th></tr>
</thead>
<tbody>
<tr><td>Poniedziałek</td><td>Linki i obrazy</td></tr>
<tr><td>Wtorek</td><td>Formularze</td></tr>
</tbody>
</table>Nagłówki kolumn wpisuj w <th>, a nie w <td>, żeby czytnik ekranu wiedział, do której kolumny należy wartość. Tabelami nie układa się już całych stron, bo od tego są Flexbox i Grid.
Formularze
Formularz zbiera dane: logowanie, wyszukiwanie, kontakt. Kluczowa zasada to etykieta <label> połączona z polem atrybutami for i id. Kliknięcie etykiety ustawia wtedy kursor w polu, a czytnik ekranu zna jego nazwę.
<form action="/kontakt" method="post">
<label for="email">E-mail</label>
<input type="email" id="email" name="email" required>
<label for="wiadomosc">Wiadomość</label>
<textarea id="wiadomosc" name="wiadomosc" rows="4" required></textarea>
<button type="submit">Wyślij</button>
</form>Przy typie email telefon pokaże klawiaturę ze znakiem @, a przeglądarka sprawdzi format adresu. Atrybut required blokuje wysłanie pustego pola. To wygoda, a nie zabezpieczenie, bo dane i tak musi sprawdzić serwer. Sam HTML nie wyśle też wiadomości na Twoją skrzynkę: do tego potrzebny jest serwer albo usługa obsługująca formularze. Typy pól opisuje lekcja Formularze HTML.
Zadanie: dodaj formularz kontaktowy i sprawdź, co się stanie po kliknięciu Wyślij przy pustym polu.
Selektory CSS i kaskada
Style zapisujesz w osobnym pliku, na przykład style.css, i dołączasz go w <head> linijką <link rel="stylesheet" href="style.css">. Reguła CSS to selektor, który wskazuje elementy, i deklaracje, które mówią, co z nimi zrobić.
p {
line-height: 1.6;
color: #1f2937;
}
.przycisk {
background-color: #2563eb;
color: white;
padding: 12px 24px;
border-radius: 8px;
}
#kontakt {
margin-top: 48px;
}
nav a:hover {
text-decoration: underline;
}Selektor elementu p działa na wszystkie akapity, selektor klasy .przycisk na elementy z class="przycisk", a selektor identyfikatora #kontakt na jeden element z id="kontakt". Ostatnia reguła łączy selektor potomka z pseudoklasą i dotyczy linków w nav pod kursorem.
Gdy kilka reguł ustawia tę samą właściwość, wygrywa wyższa specyficzność: identyfikator jest silniejszy od klasy, a klasa od elementu. Przy remisie wygrywa reguła zapisana później. Na co dzień stylujesz głównie klasami, bo ich siła jest przewidywalna i łatwo je nadpisać. Kolor tekstu i czcionka dziedziczą się z rodzica, więc ustawione na body zmieniają całą stronę. Selektory przećwiczysz w lekcji Klasy i identyfikatory w CSS.
Zadanie: ustaw czcionkę na body i zmień kolor linków w menu po najechaniu kursorem.
Model pudełkowy
Każdy element to prostokątne pudełko złożone z czterech warstw, licząc od środka: treści, wewnętrznego odstępu (padding), obramowania (border) i zewnętrznego marginesu (margin). Padding odsuwa treść od krawędzi, a margin cały element od sąsiadów.
*,
*::before,
*::after {
box-sizing: border-box;
}
.karta {
width: 300px;
padding: 16px;
border: 2px solid #d4a017;
margin: 24px auto;
}Domyślnie width dotyczy samej treści, więc karta z przykładu miałaby 336 pikseli szerokości: 300 na treść oraz po 16 na padding i po 2 na obramowanie z każdej strony. Reguła box-sizing: border-box wlicza padding i obramowanie w szerokość, więc karta ma dokładnie 300 pikseli. Od tej reguły zaczyna się większość projektów.
Zapis margin: 24px auto daje 24 piksele odstępu u góry i u dołu, a automatyczne marginesy po bokach wyśrodkowują kartę. Narzędzia deweloperskie rysują model pudełkowy każdego elementu, więc tam znajdziesz źródło niechcianego odstępu. Więcej przykładów ma lekcja Box model CSS, a opis z ilustracjami znajdziesz na MDN.
Flexbox
Flexbox układa elementy w jednym wymiarze: w wierszu albo w kolumnie. Wystarczy nadać kontenerowi display: flex, a jego bezpośrednie dzieci ustawią się obok siebie.
.menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.projekty {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.projekt {
flex: 1 1 250px;
}justify-content rozmieszcza elementy na osi głównej, która w wierszu biegnie poziomo, a align-items wyrównuje je na osi poprzecznej. Te dwie właściwości rozwiązują większość codziennych problemów z wyrównaniem, a gap ustala odstępy bez marginesów. flex-wrap: wrap przenosi karty do nowej linii, a flex: 1 1 250px mówi każdej karcie: zacznij od 250 pikseli, rośnij, gdy jest miejsce, i kurcz się, gdy go brakuje. Resztę poznasz w lekcji Flexbox, elastyczny układ.
Zadanie: zrób nagłówek strony z logo po lewej i menu po prawej, wyrównanymi w pionie.
CSS Grid
Grid układa elementy w dwóch wymiarach naraz, w wierszach i kolumnach. Siatkę opisujesz na kontenerze, a elementy same trafiają do kolejnych komórek.
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}Jednostka fr oznacza część wolnego miejsca. Zapis repeat(auto-fit, minmax(200px, 1fr)) tworzy tyle kolumn o szerokości co najmniej 200 pikseli, ile się zmieści, i dzieli resztę miejsca po równo. Galeria ma więc jedną kolumnę na telefonie i kilka na szerokim monitorze, bez żadnego media query. Układ z panelem bocznym zobaczysz w sekcji o responsywności, a wstęp do siatki daje lekcja CSS Grid.
Zadanie: ułóż sześć obrazków w galerię z przykładu i zmieniaj szerokość okna, obserwując liczbę kolumn.
Flexbox czy Grid
Krótka ściąga dla każdego, kto poznał obie techniki:
| Cecha | Flexbox | Grid |
|---|---|---|
| Wymiar | jeden: wiersz albo kolumna | dwa: wiersze i kolumny naraz |
| Kto decyduje o rozmiarze | treść elementów | siatka opisana na kontenerze |
| Typowe zastosowania | menu, pasek przycisków, wyśrodkowanie | galeria, karty w równych kolumnach, układ strony |
| Najważniejsze właściwości | justify-content, align-items, flex | grid-template-columns, grid-area, gap |
| Wsparcie przeglądarek | wszystkie współczesne | wszystkie współczesne |
Obie techniki często się łączą: Grid układa stronę albo sekcję, a Flexbox wyrównuje drobiazgi w komórkach, jak ikonę obok tekstu w przycisku. Reguła na start: jeden rząd albo kolumna to Flexbox, a siatka to Grid. Wsparcie nowszych właściwości sprawdzisz w serwisie Can I use.
Responsywność
Strona responsywna dopasowuje się do szerokości ekranu. Najprościej pracować w podejściu mobile first: najpierw piszesz style dla wąskiego ekranu, a potem dokładasz zmiany dla szerszych w media queries.
img {
max-width: 100%;
height: auto;
}
.uklad {
display: grid;
gap: 24px;
}
@media (min-width: 768px) {
.uklad {
grid-template-columns: 250px 1fr;
}
}Na wąskim ekranie .uklad ma jedną kolumnę z panelem bocznym nad treścią, a od 768 pikseli dwie: stałą na panel i elastyczną na treść. Reguła dla img pilnuje, żeby żaden obrazek nie wyszedł poza swój kontener.
Dodaj trzy nawyki: max-width zamiast sztywnych szerokości, jednostki rem dla czcionek i odstępów oraz testy w trybie urządzeń mobilnych w narzędziach deweloperskich i na prawdziwym telefonie. Pamiętaj też o znaczniku viewport z pierwszego etapu, bo bez niego media queries nie zadziałają na telefonie tak, jak oczekujesz. Wszystko to ćwiczy lekcja Media queries.
Pierwszy projekt: strona wizytówka
W czwartym tygodniu zbuduj kompletną stronę o sobie. Nie musi być piękna, ma działać. Wystarczą index.html, style.css i folder img na zdjęcia, a strona powinna mieć:
- nagłówek z imieniem i menu ułożonym Flexboxem,
- sekcję o sobie ze zdjęciem z opisem
alt, - sekcję projektów z kartami w siatce Grid,
- formularz kontaktowy z etykietami,
- stopkę z linkami do Twoich profili.
Zacznij od samego HTML i sprawdź, czy strona ma sens bez stylów, a potem dodawaj CSS sekcja po sekcji. Układ naszkicuj najpierw na kartce albo w Figmie, bo łatwiej trzymać się planu niż wymyślać wygląd w trakcie kodowania. Na koniec sprawdź plik walidatorem W3C, który wskaże niezamknięte znaczniki i literówki w atrybutach.
Jak opublikować stronę
Stronę statyczną, czyli złożoną z plików HTML, CSS i obrazków, opublikujesz bez własnego serwera i płatnego hostingu. Trzy popularne drogi:
- GitHub Pages. Tworzysz na GitHubie publiczne repozytorium, wgrywasz pliki przyciskiem Add file, a w ustawieniach, w zakładce Pages, wybierasz publikację z gałęzi
main. Po chwili strona działa pod adresem w rodzajutwoj-login.github.io/nazwa-repozytorium. Szczegóły opisuje dokumentacja GitHub Pages. - Netlify. Po założeniu konta przeciągasz folder z plikami na stronę Netlify Drop i dostajesz publiczny adres. Więcej w tekście o Netlify.
- Vercel. Łączysz konto z repozytorium na GitHubie, a każda wypchnięta zmiana publikuje się sama. Szczegóły opisuje tekst o Vercelu.
Na początek wybierz GitHub Pages: dla publicznych repozytoriów jest darmowe i uczy obsługi repozytorium, która przyda się w każdej pracy programisty. Wszystkie trzy drogi porównuje lekcja Hosting statycznych stron.
Najczęstsze błędy na starcie
- Niezamknięte znaczniki. Przeglądarka zgaduje, co autor miał na myśli, więc zamiast komunikatu o błędzie widzisz dziwnie wyglądającą stronę. Walidator znajdzie przyczynę w kilka sekund.
- Brak opisu
altprzy obrazkach. Bez kilku słów opisu część odwiedzających nie dowie się, co jest na zdjęciu. - Walka ze stylami przez
!important. Gdy reguła nie działa, sprawdź w narzędziach deweloperskich, która wygrywa i dlaczego. - Kopiowanie kodu bez zrozumienia. Fragment z internetu albo od asystenta AI pomaga dopiero wtedy, gdy wiesz, co robi każda linijka, więc przepisz go ręcznie i pozmieniaj wartości.
Ćwiczenia w CodeWorlds
Jeśli wolisz uporządkowaną ścieżkę z natychmiastową informacją zwrotną, sprawdź kurs HTML i CSS w CodeWorlds. To świat Starożytny Egipt: 9 modułów i 429 zadań, od pierwszych znaczników przez podstawy CSS, Flexbox, responsywność, animacje i SASS po CSS Grid i projekt końcowy. Przewodnikiem jest Mohamed, a zadania rozwiązujesz w przeglądarce, część z nich w edytorze kodu z podglądem na żywo, więc niczego nie instalujesz. Opis kursu szacuje całość na 40-60 godzin nauki. Darmowy plan daje 10 jednostek paliwa dziennie, więc możesz ćwiczyć codziennie bez opłat. Zobacz też pozostałe kursy programowania.
Co dalej po HTML i CSS
Gdy Twoja strona działa w sieci, masz trzy sensowne kierunki. Pierwszy to JavaScript, który dodaje stronie zachowanie: rozwijane menu, sprawdzanie formularza, pobieranie danych. Plan tej nauki opisuje tekst o JavaScripcie dla początkujących.
Drugi to narzędzia do CSS. Tailwind CSS pozwala stylować stronę klasami prosto w HTML, ale ma sens dopiero wtedy, gdy rozumiesz zwykły CSS, bo każda jego klasa to znane Ci już właściwości. Pomaga też czytanie cudzego kodu: w bibliotece Uiverse znajdziesz mnóstwo przycisków i kart w CSS do rozłożenia na części.
Trzeci to pogłębienie podstaw: dostępność, animacje, SASS i nowoczesne funkcje CSS, na przykład z darmowym kursem Learn CSS w serwisie web.dev od Google.
FAQ
Czy da się nauczyć HTML i CSS za darmo?
Tak. Dokumentacja MDN, kursy na web.dev i walidatory W3C są bezpłatne, a do pracy wystarczą darmowy edytor kodu i przeglądarka. W CodeWorlds darmowy plan daje 10 jednostek paliwa dziennie, więc możesz ćwiczyć codziennie bez kosztów.
Ile czasu zajmuje nauka HTML i CSS od podstaw?
Podstawy opanujesz w 2-4 tygodnie regularnej nauki, co odpowiada planowi z tego tekstu. Swobodne budowanie prostych stron wymaga zwykle kilku miesięcy praktyki. Najwięcej daje regularność: codzienne pół godziny działa lepiej niż długie sesje raz w tygodniu.
Czy muszę znać HTML, zanim zacznę naukę CSS?
Tak, bo CSS stylizuje elementy HTML. Wystarczą jednak nagłówki, akapity, linki, obrazki i listy, żeby pisać pierwsze reguły CSS i równolegle poznawać resztę.
Czy HTML to język programowania?
Nie w ścisłym sensie. HTML to język znaczników: opisuje strukturę treści, ale nie ma zmiennych, warunków ani pętli. CSS również zwykle nie jest zaliczany do języków programowania. Programowania w pełnym znaczeniu uczysz się dopiero z JavaScriptem, dlatego HTML i CSS są łagodnym wstępem.
Czy po HTML i CSS znajdę pracę jako programista?
Z samym HTML i CSS rzadko, bo większość ofert dla frontendowców wymaga też JavaScriptu i frameworka. To jednak fundament, bez którego nie ruszysz dalej. Całą ścieżkę opisuje tekst o tym, jak zostać programistą.