Logo
Zostań autorem

Koszyk jest pusty

0

Kategorie

  • Chcesz się dzielić wiedzą?

Zaloguj się

Nie pamiętasz hasła? Kliknij tutaj

Tworzenie stron z Tailwind CSS - dwa praktyczne projekty

Opanuj Tailwind CSS i wykorzystaj tę wiedzę, aby stworzyć razem ze mną 2 gotowe projekty: strona internetowa dla firmy oraz przykładowa strona logowania.

5.0(1)
99% pozytywnych recenzji

Stworzony przez Krystian Lisowski

Ostatnia aktualizacja: 03/03/2021
00:00
00:00
x

Darmowe lekcje

Zobacz darmowe fragmenty tego szkolenia przed zakupem.

Trailer
Przedstawienie projektu oraz koncepcji Tailwind CSS
|03:35
Przykład użycia Tailwind CSS - tworzymy przycisk
|07:34
Trailer
Przedstawienie projektu oraz koncepcji Tailwind CSS
Przykład użycia Tailwind CSS - tworzymy przycisk
Tworzymy sekcję o firmie cz. 2
39
99

18 % taniej

49.00 zł

Ikona kalendarza30 dni gwarancji zwrotu pieniędzy
Ikona zegaraZapłać nawet za 21 dni
Flaga PolskiPolska obsługa i faktura

Szkolenie obejmuje:

  • Bezterminowy dostęp
  • 19 wykładów
  • 3 godz. 33 min. materiałów wideo
  • 1 slajdów
  • Regularne aktualizacje
  • Certyfikat ukończenia
  • Wsparcie autora na każdym etapie
  • Dostęp do zamkniętej grupy dyskusyjnej

Masz pytania dotyczące tego szkolenia?.

questionZadaj pytanie autorowi

Czego się nauczysz?

  • Poznasz zamysł i koncepty Tailwind CSS
  • Nauczysz się tworzenia prostych elementów za pomocą Tailwind
  • Nauczysz się rozbudowywać framework o swoje elementy
  • Nauczysz się towrzyć responsywne strony internetowe bez pisania stylów CSS

Wymagania

Podstawowa znajomość HTML i CSS

Opis kursu

Co zawiera szkolenie:

W tym kursie przeprowadzę Cię krok po kroku po ekosystemie Tailwind CSS, pokaże Ci jak framework dodać do swojego projektu, jaki jest jego zamysł, jak tworzyć za jego pomocą proste elementy, jak radzić sobie z responsywnością i tematem rozszerzania gotowych elementów. Wykorzystując tę wiedzę, stworzymy dwa praktyczne projekty, jakimi będą strona internetowa dla przykładowej firmy budowlanej, oraz gotowa strona logowania dla przykładowej aplikacji. 


Dla kogo jest ten kurs:

To szkolenie przeznaczone jest dla różnej grupy ludzi, zarówno dla początkujących frontend developerów, którzy chcą poznać nowe technologie, jak i również dla tych, którzy usłyszeli już o Tailwind i chcą zobaczyć jak tworzyć w tej technologii projekty. Poznając Tailwind CSS nauczysz się jak w szybkim tempie stworzyć gotową, w pełni responsywną i świetnie wyglądającą stronę internetową. 


Co to jest Tailwind:

Tailwind CSS jest frameworkiem CSS, który stworzyli wspólnie Adam Wathan i Steve Schoger. Adam i Steve wykorzystali lata wiedzy do tego, aby stworzyć narzędzie będące alternatywą dla znanych frameworków takich jak Material UI czy Bootstrap


Główna koncepcja Tailwind CSS:

Podczas tworzenia elementów strony bądź aplikacji internetowej chcąc nadać im wygląd, piszesz własne style. Drugą opcją może być skorzystanie z gotowych komponentów z różnych źródeł. Tailwind natomiast pozwala Ci tworzyć komponenty z gotowych klas tzw. "utilities". Tailwind oferuje mnóstwo gotowych klas dla większości składowych CSS. Możesz formatować tekst, tworzyć układ siatki Grid, kontenery Flexbox oraz wiele innych nie pisząc kodu CSS. 


Responsywność:

Tailwind świetnie wspiera koncept media queries, mamy gotowe tzw. "breakpointy" dla różnej wielkości urządzeń, tak aby elementy, które tworzymy świetnie wyglądały na każdym urządzeniu. Możemy je stosować bezpośrednio w kodzie HTML, ponieważ każda klasa wbudowana w Tailwind może być użyta warunkowo w zależności od rozmiaru ekranu. 


Pseudoklasy:

Jeżeli zastanawiasz się, czy można używać pseudoklas typu :hover bądź :focus bez pisania stylów CSS to odpowiedź brzmi tak. Tailwind zapewnia możliwość obsługi tych konceptów bez najmniejszego problemu.


Utrzymanie i podobieństwo do stylów inline:

Patrząc na przykłady używania Tailwind mógłbyś pomyśleć, że jest to tożsame z pisaniem stylów w atrybucie "style", jednak zapewniam Cię, że jest to dużo bardziej elastyczne i czytelne. Klasy, które często się powtarzają możemy wydzielić do osobnych za pomocą dyrektyw, które oferuje Tailwind.


Gotowe motywy i rozszerzanie:

Tailwind ma domyślnie wbudowaną paletę kolorów, rozmiarów teksu, wartości dla rozstawu elementów (margin, padding, width, height), z których możemy skorzystać. Mamy również możliwość tworzenia własnych motywów w pliku konfiguracyjnym.


Dlaczego warto kupić ten kurs:

Ponieważ najlepszym sposobem nauki jest praktyka, a razem ze mną stworzysz 2 praktyczne projekty i nauczysz się jak używać Tailwind w codziennej pracy. Kurs jest odpowiednio podzielony, tak aby oglądanie materiałów wideo i tworzenie projektów było dla Ciebie wygodne i zrozumiałe.


UPDATE: Kurs został wzbogacony o rozdział bonusowy zawierający opis nowych funkcjonalności, które są dostępne po ukazaniu się Tailwind CSS w wersji 2.0 :)

Spis treści

Czas trwania: 03:33:45Rozwiń wszystkie tematy
downPrzygotowanie środowiska i wprowadzenie do Tailwind CSS
6 wykłady
  • Przedstawienie projektu oraz koncepcji Tailwind CSS|03:35
  • Instalacja Tailwind CSS w projekcie05:42
  • UPDATE - Poprawka dla Tailwind w wersji 2.0Slajdy: 1
  • Przykład użycia Tailwind CSS - tworzymy przycisk|07:34
  • Responsywność w Tailwind CSS03:35
  • Rozszerzanie domyślnych klas Tailwind CSS10:08
downPraktyczny projekt - strona firmy
8 wykłady
downPraktyczny projekt - strona logowania
1 wykłady
downBONUS - Tailiwind CSS 2.0
4 wykłady

O autorze

avatar
Krystian LisowskiFrontend Developer
Kursy: 5
O mnie
Ukończone studia inżynierskie na kierunku Informatyka Stosowana, profil - Inżyniera systemów informatycznych. Posiadam doświadczenie w tworzeniu aplikacji webowych. W codziennej ...Czytaj więcej
Zobacz profil autora
5.0
100 %
0 %
0 %
0 %
0 %
avatar
quotemark
Jacek Michalski
08.03.2021

Bardzo ciekawe narzędzie, bardzo zachęcające do pracy z nim, bardzo rzeczowo, zwięźle i zrozumiale przedstawione przez autora. Obecnie robię już trzeci kurs autorstwa Krystiana Lisowskiego.

Czy ta opinia była pomocna? 0 0