Zbuduj własne portfolio z Tailwind CSS: Powitanie
Tworzenie Responsywnych Stron Internetowych
2 godz. 33 min · HTML i CSS · Full-stack i Programowanie
Daniel NoworytaFull stack DeveloperCzego się nauczysz
- Zrozumienie, czym jest TailwindCSS i jak można go wykorzystać.
- Przykłady zastosowań i możliwości TailwindCSS.
- Praktyczne prowadzenie przez proces instalacji TailwindCSS.
- Wykonanie pierwszej strony w TailwindCSS.
- Tworzenie własnej strony portfolio od zera.
Wstęp i co będziemy budować.
Zacznijmy od przedstawienia projektu, który razem zbudujemy podczas tego warsztatu. Będziemy pracować nad stworzeniem nowoczesnej, responsywnej strony portfolio. Podczas budowania strony, zapoznam Cię z podstawowymi i zaawansowanymi funkcjami TailwindCSS, które pomogą Ci w efektywnym projektowaniu i stylizowaniu Twojej strony.
Konfiguracja środowiska.
Zanim zaczniemy kodować, ważne jest, abyś miał dobrze skonfigurowane środowisko do pracy z TailwindCSS. Przeprowadzę Cię przez proces instalacji i konfiguracji TailwindCSS w Twoim projekcie. Pomoże to zrozumieć, jak TailwindCSS jest zbudowany i jak można go dostosować do swoich potrzeb.
Implementacja pełnowymiarową sekcję hero.
Sekcja hero to wizytówka Twojej strony, więc ważne jest, aby była ona atrakcyjna i responsywna. Nauczę Cię, jak zaimplementować sekcję hero, która rozciąga się na całą wysokość i szerokość ekranu. Omówimy różne techniki, takie jak używanie tła obrazu, dodawanie ikon czy efektów obracania i zaznaczania tekstu.
Implementacja widoków na wszystkie rozdzielczości ekranu.
W dzisiejszych czasach, gdzie ludzie korzystają z różnych urządzeń do przeglądania internetu, ważne jest, aby Twoja strona była responsywna i wyglądała dobrze na wszystkich typach urządzeń. Dowiesz się, jak korzystać z podejścia mobile first przy projektowaniu strony, co pomoże Ci zoptymalizować doświadczenie użytkownika na wszystkich rozdzielczościach ekranu.
Dowiedz się jak skutecznie używać klasy container
Klasa container w TailwindCSS jest potężnym narzędziem, które pomaga w zarządzaniu układem Twojej strony. Przeprowadzę Cię przez różne sposoby korzystania z klasy container, aby uzyskać optymalny układ i design dla Twojej strony. Dowiesz się, jak zarządzać marginesami, paddingami, a także jak używać containera do tworzenia układów siatki.
Dla kogo jest ten kurs?
Ten warsztat jest dla początkujących programistów, którzy chcą nauczyć się projektowania stron internetowych przy użyciu TailwindCSS. Idealny dla junior-deweloperów, oraz dla wszystkich, którzy chcą zrozumieć i wykorzystać moc nowoczesnych frameworków CSS.
Cześć, Ja nazywam się Daniel Noworyta
i witam Cię serdecznie w warsztacie poświęconym framework'owi Tailwind CSS.
W warsztacie, w którym stworzysz swój
pierwszy projekt do portfolio właśnie przy pomocy tego framework'a.
Jeżeli chodzi o wymagania,
które są potrzebne do ukończenia tego warsztatu, to myślę, że tylko dobra chęć
do nauki i podstawowa znajomość CSS i HTML jak najbardziej wystarczą Ci tutaj do
tego, żeby zrozumieć wszystko o czym będę mówił w tym warsztacie.
Warsztat jest ułożony chronologicznie, tzn najpierw zaczniemy sobie od konfiguracji
naszego projektu, potem będziemy pokażę Ci co będziemy sobie budować w tym projekcie.
Wszystkie pliki źródłowe, obrazki czy kod
znajdziesz w osobnym repozytorium, które udostępnię Ci w notatkach do tego kursu.
Poza tym, jeżeli masz jakieś pytania, pisz
śmiało tutaj w pytaniach w kursie postaram się na nie wszystkie odpowiedzieć.
I tak jak mówiłem zaczniemy sobie ten warsztat
od konfiguracji Twojego środowiska, żebyśmy wszyscy byli na
jednym poziomie i potem zaczniemy sobie budować to, co pokażę Ci na ekranie.
Będzie to strona do portfolio, tak żebyś mógł, mogła pokazać pochwalić się
swoim pierwszym projektem przy wykorzystaniu tego framework'a Tailwind CSS.
Tak że zachęcam Cię serdecznie do nauki i witam
Cię serdecznie jeszcze raz i lecimy z konfiguracją.