HTML i CSS od podstaw — przewodnik dla początkujących

HTML i CSS to fundament każdej strony internetowej. Jeśli marzysz o tworzeniu witryn, aplikacji webowych albo po prostu chcesz zrozumieć, jak działa internet od środka, to właśnie od tych dwóch technologii powinieneś zacząć. W tym przewodniku poznasz najważniejsze pojęcia, zobaczysz konkretne przykłady kodu i dowiesz się, jak ćwiczyć, by szybko robić postępy.

Czym jest HTML?

HTML (HyperText Markup Language) to język znaczników, który opisuje strukturę strony. To dzięki niemu przeglądarka wie, gdzie jest nagłówek, gdzie akapit, a gdzie obrazek. HTML nie odpowiada za wygląd — od tego jest CSS. HTML mówi co jest na stronie, a CSS jak to wygląda.

Każdy element HTML zapisujemy za pomocą znaczników (tagów). Większość z nich ma znacznik otwierający i zamykający, na przykład <p> i </p>.

Podstawowe znaczniki

Oto kilka znaczników, które poznasz na samym początku:

<h1> do <h6> — nagłówki, od najważniejszego do najmniej istotnego
<p> — akapit tekstu
<a> — odnośnik (link)
<img> — obrazek
<ul>, <ol>, <li> — listy nieuporządkowane i uporządkowane
<div> — uniwersalny kontener grupujący treść
<button> — przycisk

Struktura dokumentu

Każda strona HTML ma stały szkielet. Oto minimalny, poprawny dokument:

Code

HTML

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8">
    <title>Moja pierwsza strona</title>
  </head>
  <body>
    <h1>Witaj, świecie!</h1>
    <p>To jest mój pierwszy akapit napisany w HTML.</p>
    <a href="https://codeworlds.pl">Odwiedź CodeWorlds</a>
  </body>
</html>

Sekcja <head> zawiera informacje o stronie (tytuł, kodowanie znaków, metadane), a <body> — całą widoczną treść.

Czym jest CSS?

CSS (Cascading Style Sheets) odpowiada za wygląd strony: kolory, czcionki, odstępy, rozmieszczenie elementów. Bez CSS strona wygląda jak surowy dokument tekstowy — z CSS staje się estetyczna i czytelna.

Selektory

Aby ostylować element, najpierw musimy go wskazać za pomocą selektora. Najpopularniejsze selektory to:

selektor elementu — p { } stylizuje wszystkie akapity
selektor klasy — .przycisk { } stylizuje elementy z atrybutem class="przycisk"
selektor identyfikatora — #menu { } stylizuje element z id="menu"

Code

CSS

h1 {
  color: #b8860b;
  font-family: Arial, sans-serif;
}

.przycisk {
  background-color: #2563eb;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
}

Model pudełkowy

Każdy element na stronie to prostokątne "pudełko". Model pudełkowy (box model) składa się z czterech warstw, licząc od środka:

content — sama treść (tekst, obraz)
padding — wewnętrzny odstęp między treścią a krawędzią
border — obramowanie
margin — zewnętrzny odstęp oddzielający element od sąsiadów

Zrozumienie tych czterech warstw to klucz do panowania nad rozmieszczeniem. Warto dodać box-sizing: border-box;, dzięki czemu padding i border nie powiększają zadeklarowanej szerokości elementu — to oszczędza wielu frustracji na starcie.

Podstawy flexboxa

Flexbox to nowoczesny sposób na układanie elementów w wierszach lub kolumnach. Wystarczy nadać kontenerowi display: flex, a jego dzieci ustawią się obok siebie.

Code

CSS

.kontener {
  display: flex;
  justify-content: space-between; /* odstępy w poziomie */
  align-items: center;            /* wyrównanie w pionie */
  gap: 16px;
}

justify-content steruje rozmieszczeniem wzdłuż osi głównej, a align-items — wzdłuż osi poprzecznej. To dwie właściwości, które rozwiązują większość codziennych problemów z układem strony.

Jak ćwiczyć?

Teorię poznasz w godzinę, ale prawdziwa nauka zaczyna się przy klawiaturze. Najlepiej uczyć się w praktyce, pisząc kod i od razu widząc efekt w przeglądarce.

W CodeWorlds świat pierwszy — Starożytny Egipt — wprowadza Cię w HTML i CSS poprzez interaktywne zadania osadzone w grywalnej fabule. Zamiast suchych wykładów rozwiązujesz krótkie ćwiczenia, zdobywasz postępy i budujesz swoje pierwsze strony krok po kroku. Darmowy plan daje codzienną pulę zadań, więc możesz zacząć bez żadnych kosztów.

Jeśli chcesz uczyć się systematycznie, sprawdź kurs HTML i CSS, przejrzyj pełną listę dostępnych kursów programowania albo zobacz całą ścieżkę nauki na roadmapie. Najważniejsze: ćwicz regularnie, choćby po 20 minut dziennie — konsekwencja bije zrywy.

FAQ - Najczęściej zadawane pytania

Czy muszę znać HTML, zanim zacznę naukę CSS?

Tak, warto najpierw poznać podstawy HTML, bo CSS stylizuje elementy HTML. Nie musisz być ekspertem — wystarczy znajomość kilku podstawowych znaczników, by zacząć przygodę z CSS.

Ile czasu zajmuje nauka HTML i CSS?

Podstawy opanujesz w 2-4 tygodnie regularnej nauki. Do swobodnego budowania prostych stron potrzeba zwykle kilku miesięcy praktyki. Wszystko zależy od tego, jak często ćwiczysz.

Czy do nauki potrzebuję płatnych narzędzi?

Nie. Wystarczy darmowy edytor kodu i przeglądarka. W CodeWorlds możesz ćwiczyć w przeglądarce bezpłatnie w ramach darmowego planu z codzienną pulą zadań.

Czym różni się HTML od CSS?

HTML opisuje strukturę i treść strony (co tam jest), a CSS odpowiada za wygląd (jak to wygląda). To dwie uzupełniające się technologie, których używa się razem.

Co to jest model pudełkowy?

To koncepcja, według której każdy element to prostokąt złożony z treści, paddingu, obramowania i marginesu. Zrozumienie go jest niezbędne do prawidłowego rozmieszczania elementów na stronie.

Czy flexbox jest trudny do nauczenia?

Nie. Podstawy flexboxa można opanować w jedno popołudnie. Wystarczy zapamiętać display: flex, justify-content i align-items, by ułożyć większość typowych układów.