Masz już konto? Zaloguj się

Kurs Tailwind CSS

W trakcie kursu uczestnicy nauczą się podstawowych pojęć i koncepcji związanych z frameworkiem TailwindCSS oraz jak używać klas CSS, aby szybko i łatwo stylować swoje strony internetowe.

42 lekcji

3h 55min

4 (6 oceny)

Tailwind CSS - od Podstaw

Kurs wprowadzający do frameworka TailwindCSS jest przeznaczony dla programistów i web developerów, którzy chcą nauczyć się używać jednego z najnowocześniejszych narzędzi do stylowania stron internetowych. Framework TailwindCSS został stworzony w celu ułatwienia i przyspieszenia procesu projektowania interfejsów użytkownika poprzez dostarczenie gotowych klas CSS, które pozwalają na szybkie tworzenie stylów strony bez konieczności pisania indywidualnego kodu CSS. W trakcie kursu uczestnicy nauczą się podstawowych pojęć i koncepcji związanych z frameworkiem TailwindCSS oraz jak używać klas CSS, aby szybko i łatwo stylować swoje strony internetowe. Głównym zadaniem będzie dokładne odwzorowanie dostarczonego designu fikcyjnej strony The Eduweb Times z uwzględnieniem wymagań na poszczególne rodzaje urządzeń.

Pierwszy rzut oka na TailwindCSS

W tej sekcji zapoznasz się z frameworkiem TailwindCSS i poznasz podstawowe pojęcia związane z systemem klas. Dowiesz się, czym jest TailwindCSS, jakie problemy rozwiązuje i jakie zalety posiada. Będziesz miał okazję zobaczyć, jak wyglądają gotowe klasy CSS, które oferuje TailwindCSS i jak można je wykorzystać w projektach.

Projekt The Eduweb Times

Ta sekcja zawiera praktyczne zadanie polegające na zbudowaniu strony internetowej projektu The Eduweb Times na urządzenia mobilne. Będziesz mieć okazję zastosować swoje nowo zdobyte umiejętności w praktyce, tworząc atrakcyjną i funkcjonalną stronę internetową.

The Eduweb Times i responsywność

Ta sekcja skupia się na stylowaniu strony internetowej projektu The Eduweb Times w sposób responsywny, czyli tak, aby strona dobrze wyglądała na różnych urządzeniach. Zaczniemy od stylowania na Tablety. Nauczysz się, jak tworzyć style, które dostosowują się do rozmiaru ekranu, na którym jest wyświetlana strona.

The Eduweb Times i duże ekrany

Ta sekcja skupia się na stylowaniu strony internetowej projektu The Eduweb Times w sposób dedykowany dla wyświetlania na dużych ekranach, takich jak monitory desktopowe. Nauczysz się, jak wykorzystać różne techniki stylowania, aby stworzyć atrakcyjny i funkcjonalny wygląd strony na większych ekranach.

Dla kogo jest ten kurs?

Ten kurs wprowadzający do frameworka TailwindCSS jest przeznaczony dla programistów i web developerów, którzy mają już podstawową wiedzę i umiejętności z zakresu HTMLa i CSSa, ale chcą nauczyć się używać jednego z najnowocześniejszych narzędzi do stylowania stron internetowych.

Czego się nauczysz?

  • Zrozumienie podstawowych koncepcji i zalet frameworka TailwindCSS.

  • Instalacja i konfiguracji frameworka TailwindCSS.

  • Tworzenie stylów strony internetowej przy użyciu gotowych klas CSS.

  • Stylowanie strony internetowej w sposób responsywny, tak aby dostosowywała się do różnych rozmiarów ekranów.

  • Stylowanie strony internetowej w sposób dedykowany dla wyświetlania na dużych ekranach.

  • Zastosowanie różnych technik stylowania, takich jak tworzenie układów za pomocą display flex i display grid.

  • Zbudowanie atrakcyjnej strony internetowej, korzystając z frameworka TailwindCSS.

  • Optymalizacja pracy i przyspieszenia procesu projektowania interfejsów użytkownika dzięki wykorzystaniu gotowych klas CSS oferowanych przez framework TailwindCSS.

Zawartość

Tailwind CSS

6 rozdziały 42 lekcji 3h 55min

  • Wstęp

    5min

    Powitanie

    Podgląd lekcji

    1min

    Co to jest TailwindCSS?

    4min

  • Pierwszy rzut oka na TailwindCSS

    18min

    Wstępna konfiguracja środowiska

    3min

    Debugowanie klas w przeglądarce

    2min

    Osie XY i wrapper na listę

    2min

    Heroicons i nagłówek listy

    2min

    Stylowanie pierwszego elementu listy

    3min

    Używanie własnych wartości w klasach TailwindCSS

    3min

    Modyfikatory klas

    1min

    Grupowanie elementów

    1min

    Podsumowanie wstępu

    1min

  • Projekt The Eduweb Times

    1h 30min

    Wstęp do głównego projektu

    1min

    Konfiguracja środowiska

    3min

    Struktura elementu Header

    6min

    Konfiguracja własnych fontów w projekcie

    3min

    Header content i klasa container

    5min

    Header i dodawanie globalnego fontu

    5min

    Sekcja nowości i używanie swoich wartości w klasach

    5min

    Sekcja nowości i używanie systemu pluginów w TailwindCSS

    2min

    Filtry na obrazkach w TailwindCSS

    5min

    Sekcja reklamy i podstawowa struktura

    3min

    Sekcja reklamy - stylowanie wrappera i klasa uppercase

    5min

    Sekcja reklamy i stylowanie contentu

    6min

    Opinie - klasa rouded i object-cover

    5min

    Opinie - stylowanie tekstu i obrazów

    4min

    Sekcja ścieżek i zawartość elementu

    4min

    Sekcja ścieżek - grid w TailwindCSS

    6min

    Sekcja partnerów Eduweb

    4min

    Footer - część górna

    7min

    Footer - część środkowa

    4min

    Footer i budowa ostatniego elementu

    5min

  • The Eduweb Times - style responsywne

    32min

    Wstęp do responsywności w TailwindCSS

    4min

    Widok na tablety i pierwsze cztery sekcje

    12min

    Sekcja partnerów na tabletach

    6min

    Footer na tabletach

    10min

  • The Eduweb Times - style na desktopy

    44min

    Wstęp i omówienie strategii

    4min

    Rozkładanie głównych elementów za pomocą grida

    7min

    Customizowanie grida

    8min

    Partnerzy i scieżki - klasy divide i reverse

    8min

    Footer na urządzenia desktopowe

    7min

    BONUS - Header na ekrany desktopowe

    11min

  • Podziękowanie

    Zakończenie i podziękowanie

Autor kursu

Daniel Noworyta

Full stack Developer

Średnia ocen autora: 5

Inne kursy tego autora
Zbuduj własne portfolio z Tailwind CSS Next.js 13 w Praktyce Tailwind CSS

Dołącz do ponad 10 tys. zadowolonych z naszych kursów

Straszny chaos nie jest to kurs dla początkujących, a jak już ogarniasz to polecam bardziej dokumentacje jak ten kurs. Autor sprawia wrażenie jakby gdzieś się spieszył. Obejrzałem bo mam abonament jak też masz to śmiało może coś wyciągniesz dla siebie, ale kupowanie tego kursu nie ma sensu.

Damian

30 kwietnia 2023

Łukasz Mordasiewicz

27 czerwca 2023

Grzegorz Róg

19 lipca 2023

Robert Dębicki

20 października 2023

Imię Nazwisko

12 listopada 2023

Oglądałem kurs jako osoba, która pracowała już wcześniej troszkę w tailwindzie i po obejrzeniu kursu na tej platformie "Tailwind CSS - Czy zastąpi Bootstrapa?". Moim założeniem było, żeby jeszcze lepiej poznać tego frameworka. Na pewno rozszerzył moją wiedzę. Trochę rzeczy się dowiedziałem nowych np. o używaniu dividerów, gap-ów, fajnie jest zaprezentowane używanie grida w tailwindzie. Jak dla mnie, to trochę długi materiał w stosunku do porcji wiedzy, którą dostarcza. A jeśli już jest w takiej dłuższej formie realizacji projektu od początku do końca, to do paru rzeczy bym się przyczepił np. brak dodania fontów webowych, wrażenie jakby niektóre wartości było odwzorowywane zbyt "na oko". To moje subiektywne odczucie, może jestem zbyt dokładny - chociaż uważam, że nie jestem pixel perfect, uważam, że niektórych wartości trzeba pilnować :) i sprawdzać z projektem. Np szerokość kontenera (container) - mogę założyć, że autor zna na tyle dobrze te wartości, czy są dla niego na tyle oczywiste, że pominął sprawdzenie w szkoleniu, czy się zgadza z projektem ale wnosi to wrażenie jakby to nie było weryfikowane (dopuszczam jeszcze możliwość, że to przeoczyłem). W każdym razie dzięki za porcję wiedzy.

Dominik Jandy

15 listopada 2023

Kurs Tailwind CSS

  • 42 lekcji wideo

  • 3h 55min materiału

  • Ostatnia rewizja 03.04.2023

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych

Dlaczego wybrać właśnie ten kurs?

Efektywna nauka

Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!

Wiedza ekspertów

Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.

Praktyczne przykłady

Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.

Pytania i odpowiedzi

Przeczytaj najczęściej zadawane pytania

Masz więcej pytań?

Porozmawiaj z nami na na czacie

Wyślij nam e-mail

Zadzwoń +48 880880606

Czy każdy kurs ma pliki źródłowe?

Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.

Jak jest skonstruowany kurs?

Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.

Jak najlepiej wykorzystać kurs?

Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!

Jak mogę uzyskać dostęp do kursu?

Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.

Czy kurs jest aktualny?

Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.

Czym się różni kurs od warsztatu i ścieżki?

Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.

We frontendzie nie można stać w miejscu, niezależnie od tego, czy jest się początkującym, czy zaawansowanym. Narzędzia i techniki się zmieniają, więc trzeba cały czas trzymać rękę na pulsie. Jako twórca kursów i programista mogę spokojnie polecić eduweb.pl jako aktualne i dobre źródło wiedzy.

Adam Romański

helloroman.com

Zacznij naukę w Tailwind CSS

  • 42 lekcji wideo

  • 3h 55min materiału

  • Ostatnia rewizja 03.04.2023

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych