Ta lekcja jest w bazie eduweb
Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.
Lekcja 16/ 42Header content i klasa container
Tailwind CSS: Header content i klasa container
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.
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.
Kurs Tailwind CSS
6 rozdziałów42 lekcje3h 55min
Wstęp
5min
- Powitanie1min(zablokowana)
- Co to jest TailwindCSS?4min(zablokowana)
Pierwszy rzut oka na TailwindCSS
18min
- Wstępna konfiguracja środowiska3min(zablokowana)
- Debugowanie klas w przeglądarce2min(zablokowana)
- Osie XY i wrapper na listę2min(zablokowana)
- Heroicons i nagłówek listy2min(zablokowana)
- Stylowanie pierwszego elementu listy3min(zablokowana)
- Używanie własnych wartości w klasach TailwindCSS3min(zablokowana)
- Modyfikatory klas1min(zablokowana)
- Grupowanie elementów1min(zablokowana)
- Podsumowanie wstępu1min(zablokowana)
Projekt The Eduweb Times
1h 30min
- Wstęp do głównego projektu1min(zablokowana)
- Konfiguracja środowiska3min(zablokowana)
- Struktura elementu Header6min(zablokowana)
- Konfiguracja własnych fontów w projekcie3min(zablokowana)
- Header content i klasa container5min(zablokowana)
- Header i dodawanie globalnego fontu5min(zablokowana)
- Sekcja nowości i używanie swoich wartości w klasach5min(zablokowana)
- Sekcja nowości i używanie systemu pluginów w TailwindCSS2min(zablokowana)
- Filtry na obrazkach w TailwindCSS5min(zablokowana)
- Sekcja reklamy i podstawowa struktura3min(zablokowana)
- Sekcja reklamy - stylowanie wrappera i klasa uppercase5min(zablokowana)
- Sekcja reklamy i stylowanie contentu6min(zablokowana)
- Opinie - klasa rouded i object-cover5min(zablokowana)
- Opinie - stylowanie tekstu i obrazów4min(zablokowana)
- Sekcja ścieżek i zawartość elementu4min(zablokowana)
- Sekcja ścieżek - grid w TailwindCSS6min(zablokowana)
- Sekcja partnerów Eduweb4min(zablokowana)
- Footer - część górna7min(zablokowana)
- Footer - część środkowa4min(zablokowana)
- Footer i budowa ostatniego elementu5min(zablokowana)
The Eduweb Times - style responsywne
32min
- Wstęp do responsywności w TailwindCSS4min(zablokowana)
- Widok na tablety i pierwsze cztery sekcje12min(zablokowana)
- Sekcja partnerów na tabletach6min(zablokowana)
- Footer na tabletach10min(zablokowana)
The Eduweb Times - style na desktopy
44min
- Wstęp i omówienie strategii4min(zablokowana)
- Rozkładanie głównych elementów za pomocą grida7min(zablokowana)
- Customizowanie grida8min(zablokowana)
- Partnerzy i scieżki - klasy divide i reverse8min(zablokowana)
- Footer na urządzenia desktopowe7min(zablokowana)
- BONUS - Header na ekrany desktopowe11min(zablokowana)
Podziękowanie
- Zakończenie i podziękowanie1min(zablokowana)
Ten kurs jest w bazie eduweb
Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.