Kurs Tailwind CSS

Powitanie

Koszyk Koszyk
  • Opis
  • Recenzje
  • Autor
  • Transkrypt
  • Pytania i odpowiedzi
  • QA

1 ocen

Wprowadzenie

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ń.

  1. Zrozumienie podstawowych koncepcji i zalet frameworka TailwindCSS.
  2. Instalacja i konfiguracji frameworka TailwindCSS.
  3. Tworzenie stylów strony internetowej przy użyciu gotowych klas CSS.
  4. Stylowanie strony internetowej w sposób responsywny, tak aby dostosowywała się do różnych rozmiarów ekranów.
  5. Stylowanie strony internetowej w sposób dedykowany dla wyświetlania na dużych ekranach.
  6. Zastosowanie różnych technik stylowania, takich jak tworzenie układów za pomocą display flex i display grid.
  7. Zbudowanie atrakcyjnej strony internetowej, korzystając z frameworka TailwindCSS.
  8. Optymalizacja pracy i przyspieszenia procesu projektowania interfejsów użytkownika dzięki wykorzystaniu gotowych klas CSS oferowanych przez framework TailwindCSS.

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.

Dlaczego wybrać właśnie ten kurs?

  1. 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!
  2. 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.
  3. 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ń.

Autor: Daniel Noworyta

5

Średnia ocen autora

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje

Autor: Daniel Noworyta

Czas: 3 godzin 55 minut

Aktualizacja: 04.04.2023

  • Certyfikat w ramach Ścieżki
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół
Podaruj w prezencie

Wstęp

  • Powitanie

  • Co to jest TailwindCSS?

Pierwszy rzut oka na TailwindCSS

  • Wstępna konfiguracja środowiska

  • Debugowanie klas w przeglądarce

  • Osie XY i wrapper na listę

  • Heroicons i nagłówek listy

  • Stylowanie pierwszego elementu listy

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

  • Modyfikatory klas

  • Grupowanie elementów

  • Podsumowanie wstępu

Projekt The Eduweb Times

  • Wstęp do głównego projektu

  • Konfiguracja środowiska

  • Struktura elementu Header

  • Konfiguracja własnych fontów w projekcie

  • Header content i klasa container

  • Header i dodawanie globalnego fontu

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

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

  • Filtry na obrazkach w TailwindCSS

  • Sekcja reklamy i podstawowa struktura

  • Sekcja reklamy - stylowanie wrappera i klasa uppercase

  • Sekcja reklamy i stylowanie contentu

  • Opinie - klasa rouded i object-cover

  • Opinie - stylowanie tekstu i obrazów

  • Sekcja ścieżek i zawartość elementu

  • Sekcja ścieżek - grid w TailwindCSS

  • Sekcja partnerów Eduweb

  • Footer - część górna

  • Footer - część środkowa

  • Footer i budowa ostatniego elementu

The Eduweb Times - style responsywne

  • Wstęp do responsywności w TailwindCSS

  • Widok na tablety i pierwsze cztery sekcje

  • Sekcja partnerów na tabletach

  • Footer na tabletach

The Eduweb Times - style na desktopy

  • Wstęp i omówienie strategii

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

  • Customizowanie grida

  • Partnerzy i scieżki - klasy divide i reverse

  • Footer na urządzenia desktopowe

  • BONUS - Header na ekrany desktopowe

Podziękowanie

  • Zakończenie i podziękowanie

}