Szkolenie Nowoczesny HTML i CSS

Złożysz responsywny, dostępny layout w nowoczesnym CSS, bez preprocesora i zbędnego JavaScriptu.

  • Czas trwania: 3 dni
  • Poziom: od podstaw
  • Forma: warsztat dla zespołu
Zapytaj o termin Pobierz program (PDF)

Współczesny CSS potrafi to, do czego jeszcze kilka lat temu potrzebny był preprocesor albo JavaScript: zagnieżdżanie reguł, komponenty reagujące na rozmiar kontenera, a nawet motyw jasny i ciemny bez duplikowania kolorów. Stare tutoriale uczą obejść, których dziś już nie potrzebujesz, więc warto zacząć od razu od współczesnego CSS.

Na szkoleniu składasz stronę od pustego pliku do responsywnego, dostępnego layoutu zgodnego z projektem graficznym. Zaczynasz od struktury HTML, a nowoczesny CSS poznajesz dopiero wtedy, gdy fundamenty są już pewne.

Program

3 dni

  • HTML, czyli struktura i znaczenie
    • Szkielet dokumentu: <!doctype html>, lang, kodowanie, viewport
    • Semantyka: header, nav, main, article, section, aside
    • Nagłówki, listy, tabele i znaczniki tekstowe (strong a b, em a i)
    • Nowsze elementy: dialog, details, search, atrybut popover
    • Obrazy: srcset, sizes, <picture>, loading="lazy", AVIF i WebP
  • Formularze bez bólu
    • Typy pól (email, url, date) i etykiety
    • Walidacja natywna: required, pattern, :user-invalid
    • Komunikaty błędów dostępne dla czytników ekranu
  • Fundamenty CSS
    • Kaskada, specyficzność i dziedziczenie
    • Selektory, pseudoklasy i pseudoelementy, w tym :has() i :is()
    • Model pudełkowy, box-sizing, jednostki rem, ch, dvh
  • Layout
    • Flexbox do układów w jednym wymiarze
    • CSS Grid do siatek strony: grid-template-areas
    • Pozycjonowanie, sticky i kontekst nakładania (z-index)
    • Kontrast kolorów i widoczny fokus (:focus-visible)
  • Responsive Web Design
    • Mobile first i media queries
    • Container queries, czyli komponenty reagujące na swój kontener
    • Płynna typografia z clamp()
  • Nowoczesny CSS zamiast preprocesora
    • Zmienne (custom properties) i design tokens
    • Natywne zagnieżdżanie reguł
    • Warstwy kaskady @layer i porządek w stylach
    • light-dark() i motyw jasny/ciemny
    • Baseline: jak sprawdzić, czy funkcja zadziała u Twoich użytkowników, i @supports
  • Animacje i interakcje
    • transition i @keyframes
    • Które właściwości animować, żeby nie zabić wydajności
    • Szacunek dla prefers-reduced-motion
  • Co dalej w CSS i HTML (pokaz)
    • subgrid: wyrównanie kart do wspólnej siatki
    • color-mix(): kolory pochodne bez preprocesora
    • Anchor positioning: podpowiedź przypięta do przycisku bez JavaScriptu
    • View Transitions API: płynne przejścia między widokami
    • Przyciski sterujące oknem i popoverem: command i commandfor
  • Od projektu do przeglądarki
    • Odczytywanie projektu z Figmy: odstępy, fonty (@font-face), kolory
    • DevTools: inspektor layoutu Grid i Flexbox, emulacja urządzeń
    • Metadane strony: title, description, Open Graph

Dostępność rozwija szkolenie Dostępność WWW, a metadane dla wyszukiwarek szkolenie SEO.

Dla kogo?

  • Dla osób, które zaczynają przygodę z tworzeniem stron.
  • Dla programistów backendu, którzy nigdy nie składali layoutu i chcą poznać HTML i CSS od podstaw.
  • Dla testerów i projektantów, którzy chcą rozumieć, jak powstaje strona.

Co musisz umieć?

  • Obsługiwać edytor kodu i przeglądarkę.
  • Tworzyć i zapisywać pliki w folderach projektu.

Czego się nauczysz?

  • Zbudujesz semantyczną i dostępną strukturę dokumentu w HTML.
  • Zadbasz o kontrast i widoczny fokus.
  • Przygotujesz formularz z walidacją bez jednej linii JavaScriptu.
  • Złożysz responsywny layout z CSS Grid, Flexboxem i container queries.
  • Zorganizujesz style z pomocą zmiennych, zagnieżdżania i @layer, bez preprocesora.
  • Sprawdzisz, czy nowa funkcja CSS działa w przeglądarkach Twoich użytkowników.
  • Dodasz animacje, które szanują ustawienia użytkownika.
  • Odwzorujesz projekt graficzny z pomocą DevTools.
  • Przygotujesz metadane strony dla wyszukiwarek i serwisów społecznościowych.

Trener

@piecioshka

Piotr Kowalski

W branży IT od 2008 roku. Od 2014 jest mentorem dla wielu developerów. Jako trener spędził na sali szkoleniowej kilka tysięcy godzin, a na LinkedIn ma 52 rekomendacje. Każde jego szkolenie to dawka solidnej wiedzy oraz humoru.

Więcej na stronie "O mnie"

Zorganizujmy to szkolenie w Twoim zespole

Napisz, z czym pracujecie i na jakim poziomie jest grupa. Odpowiem z propozycją programu dopasowanego do Waszego projektu.

Zapytaj o szkolenie Pobierz program (PDF) Zobacz wszystkie szkolenia