Zbuduj własne portfolio z Tailwind CSS: Co będziemy budować?
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.
Naszą przygodę rozpoczniemy od tego, że
przedstawię Ci projekt, który spróbujemy sobie tutaj wspólnie zbudować na tym
warsztacie. Jest to strona portfolio przygotowana dla
mnie, tak naprawdę przeze mnie na potrzeby tego kursu.
Na potrzeby tego warsztatu tutaj. Przygotowałem
taki design strony do portfolio, którą możemy sobie razem zbudować.
Jak widzisz mamy tutaj widok.
Po tej stronie mamy widok mobilny, tak?
Czyli wszystko co na telefony komórkowe I od tego widoku sobie zaczniemy.
Widzisz, że mamy tutaj jakiś główny header
hero section, która jest de facto rozciągnięta na całą szerokość
telefonu komórkowego i prawdopodobnie też to wszystko powinno mieć wysokość ekranu,
tak żeby ten znaczek wyraźnie wskazuje na to, że możemy sobie zescrollować na dół.
Mamy tutaj sekcję o mnie z jakimś tekstem.
Tutaj mamy kolejne nagłówki z takimi
ozdobnikami i sam header, gdzie pokazują projekty
na takiej stronie do portfolio, które można sobie odwiedzić.
I tutaj mamy usługi.
Jakby mamy jakieś usługi jako
programista początkujący możemy sobie zapisać usługi, które oferujemy.
Dodatkowo mamy opinię już osób, które jakoś tam z nami kiedyś pracowały.
I na końcu mamy standardową stopkę.
To jest widok mobilny.
Jak widzisz mamy też przygotowany widok na
tablety i mamy przygotowany widok na desktopy.
Także to jest projekt, którym się
zajmiemy, który spróbujemy sobie teraz razem w kursie tutaj zbudować.