Zostań autorem, opublikuj szkolenie i odbierz profesjonalny zestaw z mikrofonem!

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.

Autor: Codease KL

Aktualizacja: 02/12/2020

00:00
00:00
x

Darmowe lekcje

down
Trailer
Przedstawienie projektu oraz koncepcji Tailwind CSS
03:35
Przykład użycia Tailwind CSS - tworzymy przycisk
07:34
Tworzymy sekcję o firmie cz. 2
06:42
Trailer
Przedstawienie projektu oraz koncepcji Tailwind CSS
Przykład użycia Tailwind CSS - tworzymy przycisk
Tworzymy sekcję o firmie cz. 2
49.00 zł
calendar30 dni gwarancji zwrotu pieniędzy
helpwsparcie autora na każdym etapie nauki
updateregularne aktualizacje

Szkolenie obejmuje:

  • Dożywotni dostęp
  • 18 wykładów
  • 3 godz. 33 min. materiałów wideo
  • Testy i ćwiczenia
  • Dostęp do zamkniętej grupy dyskusyjnej
  • Kontakt z autorem
  • Imienny certyfikat ukończenia

Zadaj pytanie przed zakupem!

Masz pytania dotyczące tego szkolenia? Skorzystaj z możliwośći kontaktu z autorem i rozwiej swoje wątpliwości.

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:45
Przygotowanie środowiska i wprowadzenie do Tailwind CSS
5 wykładydown
Praktyczny projekt - strona firmy
8 wykładydown
Praktyczny projekt - strona logowania
1 wykładydown
BONUS - Tailiwind CSS 2.0
4 wykładydown

O autorze

avatar
Codease KLFrontend 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 pr...Czytaj więcej
Zobacz profil autora