Definicja #
HTML (HyperText Markup Language) to język znaczników definiujący strukturę i treść dokumentów webowych. Aktualny standard to HTML5. HTML tworzy hierarchię elementów (DOM — Document Object Model): nagłówki, paragrafy, listy, formularze, obrazy, linki.
CSS (Cascading Style Sheets) to język opisujący wygląd dokumentów HTML. Kontroluje kolory, czcionki, marginesy, układ (layout), animacje i responsywność. Aktualny standard to CSS3 z ciągłymi rozszerzeniami.
Kluczowe koncepcje CSS:
- Box model — margin, border, padding, content
- Flexbox — jednowymiarowy layout (rzędy lub kolumny)
- CSS Grid — dwuwymiarowy layout siatki
- Responsive design — media queries, mobile-first
- CSS Custom Properties — zmienne CSS (--color-primary)
- Animacje — transitions, keyframes, @animation
Narzędzia: Sass/SCSS (preprocessor), Tailwind CSS (utility-first), CSS Modules (izolacja stylów w komponentach).
Zastosowania #
HTML/CSS stosuje się do:
- Budowy stron internetowych i aplikacji webowych — fundament każdego projektu frontendowego
- Projektowania responsywnych layoutów — mobile-first, media queries, CSS Grid, Flexbox
- Tworzenia komponentów UI — przyciski, formularze, karty, nawigacje
- Mailingu HTML — szablony emaili (email clients mają ograniczoną obsługę CSS)
- Landing pages, blogi, strony dokumentacji, e-commerce
Ścieżka nauki #
HTML/CSS to absolutny punkt startowy dla każdego frontendzisty.
Zacznij od:
- HTML: semantyczne tagi (header, main, section, article, nav, footer), formularze, tabele, multimedia
- CSS: selektory, box model, kolory, typografia, podstawy Flexbox
- Responsywność: media queries, viewport, mobile-first
Następnie naucz się:
- CSS Grid — zaawansowane layouty dwuwymiarowe
- Animacje CSS — transitions, keyframes, performance (GPU layers)
- Tailwind CSS lub Sass/SCSS — produktywniejsza praca ze stylami
- Dostępność (a11y) — ARIA labels, semantyczny HTML, kontrast
- Następny krok: JavaScript, potem framework (React, Vue, Angular)
FAQ #
- Czy HTML/CSS to języki programowania?
- HTML to język znaczników (markup language), nie język programowania — nie ma logiki ani obliczeń. CSS to język arkuszy stylów. Programowaniem jest JavaScript, który wraz z HTML i CSS tworzy trifecta web developmentu.
- Ile zarabia HTML/CSS Developer?
- Znajomość samego HTML/CSS bez JavaScript jest zwykle niewystarczająca do pracy jako developer. Frontend Developer ze znajomością HTML, CSS i React zarabia od 8 000 do 18 000 zł brutto, w zależności od doświadczenia.
- Jak długo uczyć się HTML i CSS?
- Solidne podstawy HTML i CSS można opanować w 4–6 tygodni. Jednak zaawansowany CSS (Grid, animacje, optymalizacja) i dobre oko do UI/UX to umiejętności rozwijane latami.
- Co to jest CSS preprocessor?
- CSS preprocessor (np. Sass, Less) to narzędzie rozszerzające CSS o zmienne, zagnieżdżanie, mixiny i funkcje. Kod preprocessora kompiluje się do zwykłego CSS. Tailwind CSS jest alternatywnym podejściem (utility-first) bez preprocessorów.