0Pricing
Tailwind CSS Academy icon
HTMLCssFrontendDesignPoziomy A1 → B215 języków

Tailwind CSS Academy

Opanuj framework CSS utility-first, któremu ufają OpenAI, Vercel i Shopify. Naucz się każdego utility'ego, responsive design, dark mode, animacji i optymalizacji produkcyjnej. Ścieżka nauki CoddyKit obejmująca 30 krótkich kursów i 120 interaktywnych lekcji, z tutorem AI dostępnym przez całą dobę.

Kursy
30
Lekcje
120
Interaktywne kroki
1,559
Bezpłatny start
Kurs 1
Program nauczania

30 kursów w tej ścieżce

Każdy kurs w ścieżce Tailwind CSS Academy, w kolejności nauki. Pierwszy jest bezpłatny.

1

A14 lekcjiBezpłatny

Poznają Państwo filozofię podejścia utility-first stojącą za Tailwind CSS i zrozumieją, czym różni się ono od tradycyjnych frameworków CSS, takich jak Bootstrap. Skonfigurują Państwo Tailwind w proje…

  1. 1Wyjaśnienie podejścia utility-first w CSS
  2. 2Instalacja i konfiguracja Tailwind
  3. 3Pierwsza strona w Tailwind
  4. +1 więcej
Zacznij naukę bezpłatnie
2

A14 lekcjiPRO

Opanują Państwo bogaty zestaw narzędzi typograficznych Tailwind do kontrolowania rozmiaru i grubości czcionki, wysokości wiersza, odstępów między literami oraz wyrównania tekstu. Nauczą się Państwo t…

  1. 1Rozmiar i grubość czcionki
  2. 2Kolor i krycie tekstu
  3. 3Wysokość wiersza i odstępy między literami
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
3

A14 lekcjiPRO

Poznają Państwo rozbudowaną paletę kolorów Tailwind i nauczą się stosować kolory tła, gradienty oraz obrazy tła. Zrozumieją Państwo użycie modyfikatorów krycia i tworzenie efektownych wizualnie powie…

  1. 1Paleta kolorów Tailwind
  2. 2Gradienty tła
  3. 3Modyfikatory krycia i kolorów
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
4

A14 lekcjiPRO

Nauczą się Państwo korzystać ze spójnej skali odstępów Tailwind, aby dodawać margin i padding do dowolnego elementu. Poznają Państwo skróty kierunkowe oraz ujemne marginesy, umożliwiające precyzyjną…

  1. 1Skala odstępów Tailwind
  2. 2Narzędzia dopełnienia
  3. 3Narzędzia marginesów i marginesy automatyczne
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
5

A14 lekcjiPRO

Zastosują Państwo układy CSS Flexbox za pomocą narzędzi flex Tailwind, bez pisania ani jednej linijki niestandardowego CSS. Zbudują Państwo układy poziome i pionowe, kontrolując wyrównanie oraz zawij…

  1. 1Włączanie flex i określanie kierunku
  2. 2Justowanie zawartości i wyrównywanie elementów
  3. 3Rozrastanie, kurczenie i baza flex
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
6

A24 lekcjiPRO

Wykorzystają Państwo CSS Grid za pomocą narzędzi grid Tailwind do budowania złożonych układów dwuwymiarowych. Zdefiniują Państwo kolumny, wiersze i obszary za pomocą prostych nazw klas oraz precyzyjn…

  1. 1Definiowanie kolumn siatki
  2. 2Rozpiętość kolumn i wierszy
  3. 3Wiersze siatki i automatyczne rozmieszczanie
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
7

A24 lekcjiPRO

Opanują Państwo wymiary elementów za pomocą narzędzi Tailwind dotyczących szerokości, wysokości, ograniczeń minimum i maksimum oraz proporcji. Z pewnością zbudują Państwo responsywne komponenty i kom…

  1. 1Narzędzia szerokości
  2. 2Narzędzia wysokości
  3. 3Ograniczenia minimalne i maksymalne
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
8

A24 lekcjiPRO

Ostyczkują Państwo krawędzie i nadadzą głębię elementom za pomocą narzędzi Tailwind do obramowań i cieni. Nauczą się Państwo dodawać zaokrąglone narożniki, kontrolować szerokość i kolor obramowania o…

  1. 1Szerokość i kolor obramowania
  2. 2Promień obramowania i zaokrąglone narożniki
  3. 3Cienie elementów
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
9

A24 lekcjiPRO

Dodadzą Państwo interaktywność do interfejsu, warunkowo stosując style dla stanów hover, focus, active, disabled i innych pseudostanów. Poznają Państwo system prefiksów wariantów Tailwind, aby kontro…

  1. 1Warianty hover i active
  2. 2Warianty focus i focus-visible
  3. 3Warianty disabled i placeholder
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
10

A24 lekcjiPRO

Zbudują Państwo układy dostosowujące się do dowolnego rozmiaru ekranu dzięki responsywnym punktom przerwania Tailwind zgodnym z podejściem mobile-first. Zastosują Państwo różne klasy narzędziowe przy…

  1. 1System punktów przełamania Tailwind
  2. 2Responsywne układy z flex i grid
  3. 3Responsywna typografia i odstępy
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
11

B14 lekcjiPRO

Zaimplementują Państwo tryb ciemny w aplikacjach internetowych za pomocą wbudowanego wariantu dark Tailwind. Poznają Państwo strategię klas i strategię mediów oraz zbudują komponenty interfejsu świet…

  1. 1Strategie trybu ciemnego
  2. 2Stosowanie wariantów dark
  3. 3Budowanie przełącznika trybu ciemnego
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
12

B14 lekcjiPRO

Wykorzystają Państwo pełnię możliwości Tailwind, opanowując plik tailwind.config.js. Nauczą się Państwo rozszerzać domyślny motyw, dodawać niestandardowe wartości, konfigurować ścieżki content i zarz…

  1. 1Budowa pliku tailwind.config.js
  2. 2Ścieżki content i usuwanie nieużywanych klas
  3. 3Rozszerzanie a nadpisywanie motywu
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
13

B14 lekcjiPRO

Dostosują Państwo Tailwind do swojej marki, dodając niestandardowe kolory, integrując Google Fonts i definiując własną skalę odstępów. Zbudują Państwo język projektowy dopasowany do projektu, nadal k…

  1. 1Dodawanie niestandardowych kolorów
  2. 2Niestandardowe rodziny czcionek
  3. 3Niestandardowe wartości odstępów
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
14

B14 lekcjiPRO

Nauczą się Państwo, kiedy i jak używać dyrektywy @apply Tailwind do wydzielania powtarzających się wzorców klas narzędziowych do wielokrotnego użytku w klasach CSS. Zrównoważą Państwo podejście utili…

  1. 1Działanie @apply i zastosowania
  2. 2Tworzenie wielokrotnego użytku klas komponentów
  3. 3Organizowanie niestandardowego CSS za pomocą warstw
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
15

B14 lekcjiPRO

Dodadzą Państwo płynny ruch do interfejsu, korzystając z wbudowanych narzędzi Tailwind do przejść i animacji. Nauczą się Państwo kontrolować czas trwania, funkcję wygładzania i opóźnienie oraz stosow…

  1. 1Narzędzia przejść
  2. 2Czas trwania i funkcja easing
  3. 3Wbudowane animacje klatek kluczowych
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
16

B14 lekcjiPRO

Zbudują Państwo dopracowane, wielokrotnego użytku prymitywy interfejsu za pomocą klas narzędziowych Tailwind. Poznają Państwo standardowe wzorce przycisków z wariantami, kart z nagłówkami i stopkami…

  1. 1Warianty i stany przycisków
  2. 2Wzorce komponentów kart
  3. 3Komponenty odznak i tagów
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
17

B14 lekcjiPRO

Zbudują Państwo responsywne paski nawigacji i zwijane panele boczne za pomocą narzędzi Tailwind. Nauczą się Państwo obsługiwać mobilne menu hamburgerowe i tworzyć przyklejoną nawigację, która pozosta…

  1. 1Budowanie responsywnego navbara
  2. 2Przyklejona i stała nawigacja
  3. 3Pionowy układ panelu bocznego
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
18

B14 lekcjiPRO

Ostylują Państwo dostępne i atrakcyjne elementy formularzy za pomocą narzędzi Tailwind. Nauczą się Państwo tworzyć pola tekstowe, listy wyboru, pola wyboru, przyciski radiowe i kompletne układy formu…

  1. 1Stylowanie pól tekstowych i textarea
  2. 2Menu select i pola wyboru
  3. 3Wzorce układów formularzy
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
19

B14 lekcjiPRO

Zbudują Państwo wzorce interfejsu nakładanych elementów, takie jak modale, okna dialogowe i menu rozwijane, korzystając z Tailwind i minimalnej ilości JavaScriptu. Poznają Państwo pozycjonowanie, war…

  1. 1Struktura okna modalnego
  2. 2Animacja otwierania i zamykania modala
  3. 3Komponent menu rozwijanego
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
20

B14 lekcjiPRO

Zrozumieją Państwo działanie silnika Just-In-Time Tailwind i sposób generowania wyłącznie używanego CSS. Nauczą się Państwo optymalizować paczkę produkcyjną, analizować rozmiar wynikowy i pisać klasy…

  1. 1Jak działa silnik JIT
  2. 2Bezpieczne uwzględnianie klas tworzonych dynamicznie
  3. 3Analizowanie i zmniejszanie rozmiaru bundla
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
21

B24 lekcjiPRO

Ustanowią Państwo solidny system tokenów projektowych w konfiguracji Tailwind, umożliwiający spójne tworzenie motywów dla wielu marek. Zmapują Państwo tokeny prymitywne na semantyczne i zbudują skalo…

  1. 1Tokeny prymitywne a semantyczne
  2. 2Motywy oparte na zmiennych CSS
  3. 3Strategia motywów dla wielu marek
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
22

B24 lekcjiPRO

Zintegrują Państwo Tailwind CSS z aplikacjami React i Next.js, korzystając z oficjalnej konfiguracji. Poznają Państwo najlepsze praktyki stosowania narzędzi w JSX, zarządzania klasami warunkowymi i o…

  1. 1Konfigurowanie Tailwind w Next.js
  2. 2Warunkowe klasy w React
  3. 3Warianty komponentów za pomocą CVA
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
23

B24 lekcjiPRO

Połączą Państwo Tailwind CSS z Headless UI, aby budować w pełni dostępne, pozbawione stylów komponenty. Zastosują Państwo własne klasy Tailwind do menu, okien dialogowych, comboboxów i przejść, zacho…

  1. 1Wprowadzenie do Headless UI
  2. 2Stylizowanie menu i listy rozwijanej Headless UI
  3. 3Budowanie dostępnych okien dialogowych
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
24

B24 lekcjiPRO

Rozszerzą Państwo funkcjonalność Tailwind, pisząc niestandardowe wtyczki dodające nowe narzędzia, komponenty i warianty. Poznają Państwo API wtyczek, aby zamykać wielokrotnie używaną logikę stylów i…

  1. 1API wtyczek Tailwind
  2. 2Dodawanie niestandardowych narzędzi za pomocą wtyczki
  3. 3Dodawanie niestandardowych wariantów za pomocą wtyczki
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
25

B24 lekcjiPRO

Zbudują Państwo komponenty interfejsu spełniające standardy dostępności WCAG, korzystając z narzędzi Tailwind do zapewniania kontrastu kolorów, zarządzania fokusem i obsługi czytników ekranu. Napiszą…

  1. 1Kontrast kolorów i czytelny tekst
  2. 2Wskaźniki fokusu i nawigacja klawiaturą
  3. 3Atrybuty ARIA i czytniki ekranu
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
26

B24 lekcjiPRO

Zastosują Państwo profesjonalne najlepsze praktyki wdrażania Tailwind CSS w aplikacjach produkcyjnych. Poznają Państwo audyt paczki, strategie organizowania klas, linting i techniki optymalizacji wyd…

  1. 1Audytowanie wynikowego CSS
  2. 2Sortowanie klas i wtyczka Prettier
  3. 3Lintowanie Tailwind za pomocą ESLint
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
27

B24 lekcjiPRO

Wykorzystają Państwo dotychczas zdobytą wiedzę, aby od podstaw zbudować kompletną, responsywną stronę marketingową landing page, używając wyłącznie Tailwind CSS. Omówią Państwo sekcje hero, funkcje,…

  1. 1Sekcja hero i nawigacja
  2. 2Sekcje funkcji i dowodów społecznych
  3. 3Sekcja tabeli cenowej
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
28

B24 lekcjiPRO

Zbudują Państwo rozbudowany interfejs panelu administracyjnego za pomocą Tailwind CSS. Utworzą Państwo panel boczny, górny pasek, karty statystyk, tabele danych i zastępcze widżety wykresów w spójnym…

  1. 1Szkielet panelu i pasek boczny
  2. 2Górny pasek i okruszki nawigacji
  3. 3Karty statystyk i widżety KPI
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
29

B24 lekcjiPRO

Poznają Państwo miejsce Tailwind w szerszych strategiach architektury CSS stosowanych w dużych projektach. Nauczą się Państwo organizować pliki, strukturyzować warstwy komponentów oraz współistnieć z…

  1. 1Organizacja plików i folderów
  2. 2Współistnienie z istniejącym CSS
  3. 3CSS Modules i Tailwind
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
30

B24 lekcjiPRO

Połączą Państwo wszystkie umiejętności z tej ścieżki, aby zbudować kompletny system projektowy oparty na Tailwind. Zdefiniują Państwo tokeny, utworzą bibliotekę komponentów, napiszą wtyczkę i udokume…

  1. 1Planowanie systemu projektowego
  2. 2Budowanie warstwy tokenów i konfiguracji
  3. 3Budowanie biblioteki komponentów
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
CoddyKit PRO

Odblokuj 30 kursów w tej ścieżce oraz wszystkie kursy w pozostałych ścieżkach

Tutor AI, egzamin certyfikacyjny i certyfikat. Działa w przeglądarce, na iOS i Androidzie.

Zobacz wszystkie plany
Rocznie$29.90 / rokOkoło $2.49 miesięcznieZapłać razDożywotnio$69.99 jednorazowoBez odnowień. PRO na zawsze.
Przegląd kursu

Tailwind CSS Mastery

Opanuj framework CSS utility-first, któremu ufają OpenAI, Vercel i Shopify. Naucz się każdego utility'ego, responsive design, dark mode, animacji i optymalizacji produkcyjnej. Ten track obejmuje 30 progresywnych mini-kursów od absolutnego początkującego (A1) do zaawansowanego (B2), z krótkimi skoncentrowanymi lekcjami i szybkimi quizami, które utrwalą każde pojęcie.

Co się nauczysz

Zaczniesz od podstaw i przejdziesz przez tematy pośrednie i zaawansowane, każdy kurs buduje się na poprzednim. Każda lekcja jest praktyczna, z rzeczywistymi przykładami i dostępnym tutor AI, gdy potrzebujesz pomocy.

Jak to działa

Każdy kurs jest podzielony na cztery skoncentrowane lekcje. Ukończ kilka lekcji dziennie i opanujesz cały track w tygodnie, nie miesiące.

Narzędzia

Ćwicz z AI, nie tylko czytaj

Przyspiesz naukę dzięki narzędziom i funkcjom napędzanym AI

Chat AICzatuj z korepetytorem AIZadaj Super PytanieUzyskaj odpowiedzi na poziomie ekspertaPROUtwórz lekcjęKonstruktor lekcji napędzany AIPRORozpocznij egzamin certyfikacyjnyZdobądź swój certyfikatPRORozpocznij wyzwaniePrzetestuj swoje umiejętności

Jak się będziesz uczyć

  1. 01

    Interaktywne lekcje

    Praktyczne ćwiczenia kodowania z opinią zwrotną w czasie rzeczywistym

  2. 02

    Tutor AI

    Uzyskaj natychmiastową pomoc od naszego AI, gdy się zatniesz

  3. 03

    Wbudowany edytor

    Pisz i uruchamiaj kod bezpośrednio w przeglądarce

  4. 04

    Certyfikat

    Uzyskaj certyfikat po ukończeniu kursu

Odkrywaj dalej

Powiązane ścieżki nauki

Frontend AcademyDevelop visually stunning and responsive websites with Frontend Development Academy.Web Accessibility AcademyBuild inclusive websites everyone can use. Master semantic HTML, ARIA, keyboard and scree…Angular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.Vue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.Sveltejs AcademyBuild fast and simple user interfaces with modern techniques at Svelte Academy.HTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.
FAQ

Często zadawane pytania

Czy kurs Tailwind CSS Academy jest bezpłatny?

Tak. Możesz rozpocząć kurs Tailwind CSS Academy za darmo i ukończyć jego interaktywne lekcje bez żadnych kosztów. Opcjonalna subskrypcja PRO odblokowuje zaawansowane narzędzia AI i certyfikat możliwy do udostępnienia.

Czy potrzebuję wcześniejszego doświadczenia, aby nauczyć się HTML?

Nie. Kurs zaczyna się od podstaw i stopniowo przechodzi do bardziej zaawansowanych tematów, więc możesz zacząć nawet bez wcześniejszego doświadczenia z HTML.

Jak nauczysz się HTML na CoddyKit?

Uczysz się praktycznie. Krótkie interaktywne lekcje łączą jasne wyjaśnienie z praktycznym ćwiczeniem kodowania, które działa w czasie rzeczywistym, a tutor AI dostępny 24/7 udziela spersonalizowanej pomocy, gdy się zatniesz.

Czy dostajesz certyfikat po ukończeniu Tailwind CSS Academy?

Tak. Uczniowie PRO mogą przystąpić do egzaminu i uzyskać certyfikat ukończenia możliwy do udostępnienia z kodem możliwym do weryfikacji dla kursu Tailwind CSS Academy.

Czy możesz nauczyć się HTML na telefonie?

Tak. CoddyKit jest dostępny na stronie internetowej i jako natywne aplikacje iOS i Android, dzięki czemu możesz nauczyć się HTML na dowolnym urządzeniu, a Twoje postępy synchronizują się między nimi.

Ile kosztuje CoddyKit PRO?

Pierwszy kurs w ścieżce Tailwind CSS Academy jest bezpłatny. CoddyKit PRO odblokowuje wszystkie kursy: $5.90 tygodniowo, $7.90 miesięcznie, $29.90 rocznie lub $69.99 jednorazowo, aby uzyskać dożywotni dostęp bez odnowień.

Ile czasu zajmuje ukończenie ścieżki Tailwind CSS Academy?

Ścieżka Tailwind CSS Academy obejmuje 30 kursów i 120 lekcji. Większość lekcji zajmuje około 5–10 minut, więc cała ścieżka to mniej więcej 14 godzin praktyki we własnym tempie.

Zacznij Tailwind CSS Academy Teraz

Dołącz do tysięcy uczniów opanowujących programowanie dzięki lekcjom wspieranym AI.

Zacznij naukę bezpłatniePrzeglądaj Wszystkie Kursy