Zbuduj własne portfolio z Tailwind CSS: Implementacja sekcji o mnie - 2
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.
Jeśli chcemy wprowadzić ten element, to musimy zacząć od tego, że podzielimy sobie
ten nasz wraper tutaj na dużych ekranach na dwie części.
W jaki sposób możemy do tego podejść?
Otóż myślę, że najlepszym rozwiązaniem tutaj będzie grid
ustawiony na domyślne na jedną kolumnę na małych i średnich ekranach.
Natomiast na dużym ekranie przełączamy go po prostu w modus na dwie kolumny.
Czyli teraz przejdźmy sobie tutaj do naszego edytora kodu
i w miejscu, w którym mamy nasz container może nie, natomiast ten div,
który tutaj opakowuje nasz tekst, musimy nadać mu klasy i ustawimy go sobie na grid.
Na ekranie xl-grid-cols-2, żeby ustawić po prostu kolumny na 2.
No i ustawimy też gap, żeby odsunąć od siebie te elementy na wartość 32.
Zapiszę to sobie w tym momencie.
Jak przejdę na duży ekran to zobacz, że tekst przesunął mi się tutaj na lewą stronę.
Tak?
Dobrze, to mamy za sobą, mamy nasz tekst.
Natomiast myślę, że jeszcze możemy
pomyśleć o tym, żeby te elementy się od siebie tak nie usuwały.
No to myślę, że warto byłoby opakować ten
cały tekst po prostu w jakiś element wrapujący.
Który zamknie nam te wszystkie teksty.
Zapiszę to sobie teraz na dużym ekranie.
Już nam się te dwie, te paragrafy tak od siebie nie odsuwają jak przed chwilką.
Dobrze, paragrafy mamy już załatwione, teraz potrzebujemy kolejnego elementu,
który będzie odpowiedzialny za obrazek i za ten,
za tą ikonkę i adres e-mail kontakt.
Tak, to nasz.
Przejdźmy sobie do naszego edytora kodu
i tutaj stworzymy sobie kolejny wraper i w tym wraperze
będziemy potrzebowali dwie rzeczy.
Otóż jedną z nich będzie nasz obrazek,
czyli potrzebujemy kolejny wraper na obrazek i image.
Jeżeli chodzi o src.
set'u nie potrzebujemy
w naszym przypadku. Tu też możemy sobie wpisać Daniel Noworyta.
I jeżeli chodzi o src to w naszym przypadku ustawmy sobie to na
image i tutaj za chwilkę wrzucę sobie obrazek, którego nazwę about me picture.
To będzie jpg.
Zapiszę to sobie.
Teraz skopiuję sobie obrazek do
odpowiedniego folderu. No i już po skopiowaniu obrazka se powiększa.
To już obrazek pojawia się w miejscu, w którym powinien się pojawić.
Tu oczywiście go nie będziemy chcieli, dlatego będziemy musieli odpowiednio
wystylizować tutaj prawdopodobnie ten wraper.
Dlatego myślę, że zacznijmy od tego.
Na pewno nadamy tutaj pozycję relative.
Będziemy chcieli sobie sterować wielkością tego obrazka na pozycję relative na wraper.
Wyizolujemy sobie ten wraper od całej reszty.
Dodatkowo aspect-ratio ustawimy na kwadrat.
Chcemy, żeby ten obrazek zawsze miał aspect-ratio w postaci kwadratu 1 do 1.
Width ustawimy tak naprawdę na wartość custom'ową, którą chcemy sobie ustawić.
Ja zmierzyłem to na tym designie i to jest 448 pixeli.
Dodatkowo overflow ustawimy sobie na hidden,
żeby nie było widać żadnych scrollbar'ów i zaokrąglimy sobie na rounded,
myślę, że na 3xl. W tym momencie już powinniśmy dostać tutaj okrągłe rogi.
Jak sobie zwiększę tą stronę, już mamy to bliżej tego co jest przedstawione na naszym designie.
Dobrze, kolejne rzeczy, które potrzebujemy, potrzebujemy ten divider tutaj i
potrzebujemy troszeczkę ostylować nasz obrazek.
Także przejdźmy sobie najpierw do stylowania naszego obrazka, żeby on odpowiednio
zachowywał się na wszystkich wielkościach ekranów.
Czyli tutaj przejdziemy sobie na klasę.
I ustawiamy sobie absolute inset na 0 żeby zajmował całą powierzchnię.
Wysokość na full, szerokość też na full.
Ustawimy dla tego obrazka, żeby po prostu
przyjmował całą wysokość, całą szerokość elementu w którym się znajduje.
I object ustawimy na cover,
żeby też zawsze środek obrazka był odpowiednio wyeksponowany.
Mamy ten obrazek za sobą.
Kolejna rzecz, którą potrzebujemy kolejnego wrapera, bo tu będzie potrzebny jakby
ikonka tego adresu e-mail i adres e-mail, tak jak widzimy na designie, jakby ta rzecz,
myślę, że możemy to zamknąć w jednym
div'e w flex'ie i tutaj będzie ikonka po prostu adres e-mail wpisany.
Tak, że przejdźmy sobie do naszego edytora kodu.
No i ja skopiuję sobie svg, które też
przygotowałem sobie już z boku, mianowicie tą ikonkę.
I jeszcze potrzebujemy.
Oprócz tej ikonki potrzebujemy tutaj naszego tekstu.
Niech to będzie normalny span i adres
programistafrontend@gmail.com.
Zapiszę sobie ten element.
Ustawmy sobie style tutaj na nasz element.
Ustawmy sobie class oczywiście, dodajmy sobie flex'a.
Gap ustalimy sobie na 4, żeby odsunąć od siebie te elementy.
Padding na top też ustawimy na 6.
Troszkę od siebie odsunąć.
Sprawdźmy jak to wygląda.
Style nam się przestały przebudowywać.
Sprawdźmy czy wszystko tu jest ok, w input'cie.
Uruchomimy sobie jeszcze raz skrypt pnpm Tailwind.
Oczywiście błędem jest to, że zamknęliśmy
ten element tutaj w naszym div'ie, który odpowiada za wrapowanie
obrazka, czyli musimy to wyciągnąć poza ten div.
Już w tym momencie nam się element tutaj pojawił.
Ten obrazek możemy sobie zminimalizować, żeby nam nie przeszkadzał.
Na dużych ekranach już wygląda to dosyć obiecująco bym powiedział.
Natomiast potrzebujemy jeszcze zrobić ten divide tutaj i Tailwind CSS
tutaj kolejny raz przychodzi nam z pomocą.
Otóż możemy sobie wykorzystać klasę divide
na tym głównym wraperze. I tu w tym miejscu ustalamy ten gap na 32.
Tego nie będziemy ruszać. Natomiast tutaj ten
div, który odpowiada za trzymanie obrazka i trzymanie tego adresu e-mail.
Tu możemy sobie znowu skorzystać z klasy i tutaj możemy nadać klasę
flex, flex-col, ustawić to po prostu jako kolumny wyśrodkować nasze itemy.
Justify też zrobić na start, żeby
zaczynało się od góry tak naprawdę naszego elementu. Gap ustawić na 8.
I kolejna klasa nowa, którą teraz sobie wprowadzimy to jest divide.
Potrzebujemy rozdzielnika na Y wielkości 2.
Jak sobie teraz to zapiszę.
To zauważ, że już ładnie nam się to tutaj ustawiło i pojawił się tutaj
ta przedziałka, która jest odpowiedzialna za oddzielenie tego adresu e-mail
od całej reszty, którą mamy tutaj. No wiadomo, że musimy schować ten element.
Jeżeli chodzi o jakby te
średnie ekrany, tak? Nie potrzebujemy tego elementu na ekranach średnich.
To oznacza ni mniej ni więcej, że po prostu musimy przejść do tego elementu,
który nam wrapuje ten obrazek, czyli to jest cały ten tutaj
flex kolumn i zaznaczyć mu, że po prostu on jest od ekranów md na flex, a na
początku mobilnie ma być po prostu niewidoczny.
Teraz jak przejdziemy na duże ekrany
dopiero pojawia się ten element, czyli na ekranach xl
tak naprawdę. Sprawdzimy sobie
tak na ekranach xl będziemy chcieli, żeby się pojawił. Na większych ekranach już nam się
pojawia element z obrazkiem i z adresem e-mail.
Jeszcze musimy sobie wystylizować tutaj jeden
header, bo on nie zmienia w ogóle jakby swojego rozmiaru.
Tutaj chodzi tylko o to, żeby zmienić
rozmiar tych kulek i zmienić rozmiar tego tekstu.
Przejdźmy do tego elementu tutaj.
I tutaj musimy sobie responsywnie postylizować
ten element właśnie z tymi kulkami pomarańczowymi.
Czyli złapiemy sobie dwie kulki tutaj i
korzystamy z modyfikatora md i na md ustawimy sobie wysokość na 5,
one mają 20 pixeli, czyli 5 razy 4 jest 20 i na md szerokość też sobie ustawimy na 5.
Zapiszemy to sobie, już teraz
zwiększyły się odpowiednio i tak samo tekst.
Jeżeli chodzi o tekst to też chcemy na
średnim ekranie, żeby tekst był większy, czyli zrobimy text-6xl.
No i już sekcja o mnie odpowiednio się zmieniła.
Myślę, że wygląda to w miarę tak jak na designie.
Sprawdźmy sobie nasz design.
No tutaj te odległości są znacznie większe,
czyli musimy padding'i powiększyć na medium od medium
zwiększają się nam padding'i, tak?
Tutaj mamy mniejsze jeszcze i tu już nam się zwiększają i tu jest jeszcze większy.
Czyli przejdźmy sobie do naszego
naszej implementacji i tutaj, gdzie mamy margin bottom.
Sprawdźmy gdzie mamy margin bottom.
Tutaj mam margin bottom ustalimy na mb
na 8.
Na ekranach średnich.
I na large mb ustawimy sobie na 12.
No i już zwiększył nam się margin na dużym
ekranie też odsunęliśmy ten element od siebie.
Wygląda to dużo lepiej. Dobrze.
Sekcje o mnie mamy zamkniętą.
Jak widzisz poprzez takie zamykanie
elementów we wrapery mamy większą kontrolę nad tym jak one się zachowują.
I tutaj na przykładzie właśnie tych,
tego header'a, jakby 3 elementy zamknęliśmy sobie w jeden
wraper i to odpowiada nam za dokładnie za to co tutaj widzisz w tym miejscu.
I zauważ, że oprócz tego gradientu, który do tej pory musieliśmy wykorzystać, żeby
mieć jeden fajny efekt zaciemnienia po tych dwóch stronach tego zdjęcia.
Oprócz tego nie musieliśmy w ogóle pisać żadnej custom'owe klasy CSS.
Wszystko jest generowane za nas za pomocą tego silnika
just in time z framework'a Tallinn CSS.
Dobrze, przejdźmy sobie teraz do implementacji kolejnego elementu na naszej stronie.
Mianowicie co mamy teraz na liście?
No wybrane projekty.
Czyli zaczniemy sobie znowu od widoku mobilnego i przejdziemy przez kolejne widoki.