Start
Produkty
Programowanie
HTML i CSS dla programistów – fundamenty frontendu

HTML i CSS dla programistów, fundamenty frontendu

W wielu projektach frontend traktowany jest jako „warstwa wizualna”, którą zajmuje się ktoś inny. Tymczasem nawet backend developer, tester czy QA powinien rozumieć, jak zbudowany jest interfejs użytkownika, z czego wynika jego struktura, styl i zachowanie. Brak znajomości HTML i CSS utrudnia analizę błędów UI, automatyzację testów oraz współpracę z frontendem. Szkolenie HTML i CSS dla programistów, fundamenty frontendu powstało po to, aby nauczyć uczestników świadomego czytania i tworzenia kodu HTML/CSS, rozumienia struktury interfejsów oraz podstaw projektowania warstwy wizualnej aplikacji.

Termin gwarantowany

HTML i CSS dla programistów – fundamenty frontendu

Pierwotna cena wynosiła: 3100,00 PLN.Aktualna cena wynosi: 2249,00 PLN.

Widoczna cena nie zawiera podatku VAT (23%)
Certyfikat ukończenia
Dodatkowe materiały po szkoleniu
30 dniowe wsparcie szkoleniowca
Praktyczne zadania
Możliwość płatności w ratach (umowa bezpośrednio z Quality Island) – Pobierz wzór umowy

8 w magazynie (może być zamówiony)

Zobacz opinie o szkoleniu

Organizacja Dla kogo Czego się nauczysz Jak pracujemy Atuty szkoleń Wymagania wstępne Program kursu Możliwości finansowania Kroki FAQ

HTML i CSS to fundament każdej aplikacji webowej, niezależnie od używanego frameworka (React, Angular, Vue).

Podczas szkolenia uczestnicy:

uczą się struktury dokumentu HTML
rozumieją semantykę znaczników
poznają mechanizmy stylowania CSS
pracują z układami (Flexbox, Grid)
budują prostą, responsywną stronę

Szkolenie ma charakter warsztatowy, uczestnicy tworzą kod od podstaw i modyfikują istniejące komponenty.

Organizacja

2 dni ( 2 x 7 h) w godzinach 8:00- 15:00
Dodatkowe materiały po szkoleniu
Certyfikat uczestnictwa
Nagranie z całego szkolenia (dodatkowo płatne)
30 dniowe wsparcie ekspertów
Praktyczne zadania
Wieloletni praktyk, ekspert w obszarze testów

Forma szkolenia
Szkolenie realizowane jest online (na żywo, na profesjonalnej platformie do pracy zdalnej ClickMeeting) lub stacjonarnie, w zależności od wybranego terminu. W obu przypadkach pracujemy warsztatowo, z aktywnym udziałem uczestników.
Czas trwania
Szkolenie trwa 2 dni ( 7 godzin pracy warsztatowej), z przerwami. Skupiamy się na konkretach, bez „rozciągania programu”.
Poziom
Szkolenie jest przeznaczone dla poziomu junior → mid (możemy również przygotować szkolenie na poziomie expert)

Dla kogo

To szkolenie jest dla Ciebie, jeśli:

rozpoczynasz naukę programowania
jesteś testerem lub QA
chcesz lepiej rozumieć kod HTML/ CSS
pracujesz jako backend developer
współpracujesz z zespołem frontendowym

To szkolenie nie jest dla Ciebie, jeśli:

szukasz zaawansowanego kursu React/ Angular
pracujesz zawodowo jako frontend senior
znasz już dobrze HTML i CSS

Czego się nauczysz

Po szkoleniu będziesz potrafić:

tworzyć poprawną strukturę HTML
rozumieć semantykę dokumentu
stylować elementy przy użyciu CSS
budować elastyczne layouty
analizować i poprawiać błędy UI
czytać i rozumieć kod frontendowy

Jak pracujemy

To szkolenie ma formę warsztatową. Pracujesz, testujesz i popełniasz błędy tu i teraz, dokładnie tak, jak w realnym projekcie.

Nasze podejście:

80% praktyki, pisanie kodu od pierwszej godziny
analiza struktury gotowych stron
budowa layoutu krok po kroku
praca z DevTools
rozwiązywanie realnych problemów UI
budowa mini-projektu podsumowującego

Atuty szkoleń

Praktyka zamiast teorii

Szkolenia prowadzą praktycy, którzy na co dzień pracują z jakością i testami.
Zero „hello world”, realne przypadki i problemy z projektów.

Elastyczne formy płatności

Raty 0%, płatność odroczona lub dofinansowanie z BUR.
Pomagamy dobrać najlepszą opcję, bez presji i zbędnych formalności.

Certyfikat potwierdzający realne kompetencje

Po szkoleniu otrzymujesz certyfikat w języku angielskim, możliwy do udostępnienia rekruterom i pracodawcom.
Zakres certyfikatu jasno opisuje zdobyte umiejętności.

Profesjonalna forma online

Interaktywne zajęcia na stabilnej platformie:
współdzielenie ekranu, Q&A, nagrania, materiały i aktywny kontakt z trenerem.

Wsparcie po szkoleniu

Nie zostawiamy Cię samego po ostatnim slajdzie.
Masz pytania po szkoleniu? Możesz do nas wrócić z konkretnym problemem.

Gwarancja zadowolenia

Jeśli szkolenie nie spełni Twoich oczekiwań, porozmawiamy.
A jeśli masz uzasadnione zastrzeżenia, zwracamy pieniądze.

Wymagania wstępne

podstawowa znajomość pracy z komputerem
brak wymagań dotyczących wcześniejszej znajomości HTML/ CSS
własny laptop z przeglądarką i edytorem kodu

Program kursu

Czym jest HTML i CSS – rola w tworzeniu aplikacji webowych?

HTML jako struktura dokumentu (content layer)
CSS jako warstwa prezentacji (presentation layer)
relacja HTML/CSS z JavaScript
jak przeglądarka renderuje stronę (rendering pipeline – wprowadzenie)?
separacja treści i stylu
rola HTML/CSS w frameworkach (React, Angular, Vue)

Struktura dokumentu HTML, znaczniki, semantyka, dobre praktyki

podstawowa struktura dokumentu (<!DOCTYPE>, html, head, body)
znaczniki blokowe i liniowe
nagłówki, paragrafy, listy, linki
semantyczne znaczniki (header, nav, main, section, article, footer)
atrybuty (id, class, data-*)
dobre praktyki: czytelność, dostępność (alt, label)

Style CSS, selektory, dziedziczenie, kolory, czcionki

selektory elementów, klas, id
selektory zagnieżdżone i kombinatory
specyficzność selektorów (specificity)
dziedziczenie stylów
jednostki (px, em, rem, %, vh, vw)
kolory (hex, rgb, hsl)
praca z fontami (font-family, font-weight, line-height)

Układ strony, box model, margin/ padding/ border, display

box model: content, padding, border, margin
box-sizing: content-box vs border-box
różnica między block, inline, inline-block
overflow i kontrola rozmiaru elementów
centrowanie elementów (różne techniki)
typowe błędy w pracy z layoutem

Responsywność, media queries, projektowanie mobile- first

czym jest responsive web design?
media queries, składnia i przykłady
breakpoints, jak je dobierać?
mobile- first vs desktop-first
jednostki względne w responsywności
testowanie responsywności w DevTools

Flexbox i Grid, nowoczesne techniki układu treści

Flexbox: display: flex i jego właściwości
oś główna i poprzeczna
justify-content, align-items, flex-wrap
CSS Grid, siatka wierszy i kolumn
grid-template-columns, gap
kiedy używać Flexbox, a kiedy Grid?

Formularze, inputy, selecty, walidacja i stylowanie

podstawowe typy inputów (text, email, password, checkbox, radio)
elementy select, textarea, button
atrybuty walidacyjne (required, pattern, minlength)
powiązanie label z inputem
stylowanie formularzy (focus, hover)
podstawy UX formularzy

Zagnieżdżanie i organizacja kodu, porządek w strukturze i stylach

logiczne grupowanie elementów HTML
nazewnictwo klas (np. BEM, wprowadzenie)
organizacja plików CSS
unikanie nadmiarowej specyficzności
reużywalność klas
komentarze i czytelność kodu

Debugowanie z użyciem narzędzi DevTools (Chrome/Firefox)

podgląd struktury DOM
edycja stylów w czasie rzeczywistym
analiza box model w DevTools
symulacja urządzeń mobilnych
wykrywanie nadpisanych stylów
podstawy analizy błędów layoutu

Tworzenie mini- projektu: od pustej strony do responsywnego layoutu

zaplanowanie struktury strony
budowa semantycznego HTML
stylowanie sekcji i komponentów
zastosowanie Flexbox/ Grid
dodanie responsywności
testowanie i poprawki
refaktoryzacja kodu pod czytelność

Wiele możliwości finansowania szkoleń i kursów

Środki własne

Opłać szkolenie od razu, szybko i bez formalności.
Przelew online, BLIK lub karta. Bez prowizji i ukrytych kosztów.

Płatność ratalna

Rozłóż płatność na raty 0%, bez dodatkowych opłat.
Każdą kwotę powyżej 2000 zł możesz podzielić nawet na 6 rat.

Odroczona płatność

Zapisz się dziś, zapłać dopiero za 3 miesiące.
Elastyczne podejście, w razie potrzeby możemy czasowo wstrzymać płatność.

Dofinansowanie Z BUR

Szkolenie może być objęte dofinansowaniem w ramach BUR, zazwyczaj 50- 80% kosztów.
Pomagamy sprawdzić możliwości i prowadzimy przez formalności krok po kroku.

Czytaj więcej

Szkolenie w 5 krokach

Prosty zapis na szkolenie

Wybierasz termin szkolenia i zapisujesz się w kilka sekund.
Bez skomplikowanych formularzy i zbędnych formalności.

Wybór formy płatności

Decydujesz, jak chcesz zapłacić:
jednorazowo, w ratach 0%, z odroczoną płatnością lub z dofinansowaniem (np. BUR).
Jeśli trzeba, pomagamy dobrać najlepszą opcję.

Przygotowanie do szkolenia

Przed szkoleniem otrzymujesz informacje organizacyjne i wskazówki techniczne.
Dzięki temu wchodzisz na szkolenie przygotowany, bez stresu i improwizacji.

Udział w szkoleniu (praktyka)

Bierzesz udział w intensywnym, praktycznym szkoleniu.
Celem szkolenia jest zbudowanie solidnych fundamentów frontendu, które pozwolą świadomie pracować z interfejsem użytkownika.

Materiały i dalsze wsparcie

Po szkoleniu otrzymujesz materiały oraz certyfikat.
Opcjonalnie możesz dokupić nagranie szkolenia i wracać do materiału, kiedy chcesz.
W razie pytań, jesteśmy dostępni także po zakończeniu szkolenia.

Najczęściej zadawane pytania

Czy szkolenie obejmuje JavaScript?

Nie, skupiamy się na HTML i CSS.

Czy budujemy stronę od podstaw?

Tak.

Czy omawiamy responsywność?

Tak, wprowadzająco.

Czy szkolenie jest praktyczne?

Tak, głównie warsztatowe.

Czy przyda się testerom automatyzującym?

Zdecydowanie tak.

Czy omawiamy Flexbox i Grid?

Tak.

Czy szkolenie jest odpowiednie dla backend developerów?

Tak.

Czy dostępne jest nagranie?

Tak, jako opcja dodatkowo płatna.

Czy potrzebne jest doświadczenie w programowaniu?

Nie.

Czy szkolenie można dopasować do firmy?

Tak.

Masz pytania? Porozmawiajmy o szkoleniu

Nie masz pewności, czy to szkolenie jest dla Ciebie? Zastanawiasz się, czy poziom będzie odpowiedni, jak wygląda program albo która forma finansowania ma sens w Twoim przypadku?

Porozmawiaj z naszym konsultantem, który: