Zbuduj własne portfolio z Tailwind CSS: Implementacja headera - 3
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.
Dobrze. Zacznijmy od tego efektu.
Tego gradientu, który mamy tutaj dookoła
tego zdjęcia, który jest na naszym designie.
Przejdźmy sobie do edytora kodu i do przeglądarki.
Żeby uzyskać taki efekt, musielibyśmy skorzystać tutaj z gradientu.
Przejdźmy do naszego wrapera na nasz image.
Prawdopodobnie tutaj dodamy sobie nowy element div
i musimy go odpowiednio wystylizować tutaj, żeby znaleźć gradient.
Czyli zaczniemy od tego, że chcemy mieć bg
gradient z radial gradient, czyli radial gradient.
Zostawimy to na razie w taki sposób.
Dodatkowo dodamy tutaj klasę absolute.
Chcemy, żeby ten element zajmował całą jakby powierzchnię.
Czyli też musimy tutaj zrobić inset-0-z-10.
Wysokość na full.
I szerokość też na full. Zapiszemy to sobie.
Natomiast na razie ta klasa tutaj nic nie robi.
Nie jest to klasa wbudowana w Tailwind'a.
I teraz pokażę Ci w jaki sposób możesz
rozszerzać funkcjonalność Tailwind'a tak, żeby budować swoje customowe klasy.
Żeby to zrobić musimy sobie przejść do pliku konfiguracyjnego tutaj
do pliku, z którego tak naprawdę te style są zaczytywane.
Czyli tutaj ten imput CSS to jest pierwszy plik, z którego Tailwind zaczytuje
swoje style bazowe i będziemy musieli sobie tutaj stworzyć custom'ową klasę.
Mianowicie ja ją nazwałem.
Tutaj bg radial gradient, czyli możemy sobie skopiować tą nazwę.
Przejdziemy tutaj.
No i tutaj standardowo tak jak w CSS'ie piszemy sobie ten background image, tak?
Chcemy na background imagei ustawić sobie na radial gradient, czyli radial gradient.
I tutaj w naszej funkcji zrobimy sobie od
koloru transparent do koloru 070707.
Niech to będzie taki kolor.
Zapiszę sobie te zmiany.
Zauważ, że pojawiły nam się gradient wokół tego zdjęcia.
No i już teraz wygląda to bardziej klimatycznie, tak jak powinno.
Jeszcze tutaj widzę, że mamy margin cop ustawiony, skasujemy tą wartość,
no i już mamy cały nasz hero section zrobiony tak jak powinien być.
Teraz musimy przejść do stylowania responsywnego.
Mamy już ten gradient tutaj nadany,
zauważ, że prostym div'em, który jest jakby wypozycjonowanie absolutnie możemy tutaj
nadawać różne efekty, jeżeli sobie zmieniłbym ten kolor tutaj np.
na deeppink.
No to też to zadziała, ale efekt będzie myślę przeciwny do zamierzonego.
Czyli tutaj swobodnie możesz tworzyć też
custom'owe klasy i wykorzystywać je w swoich projektach.
No i za pomocą właśnie wstrzykiwania ich niejako do tutaj do pliku input.CSS.
Zauważ teraz jak tutaj przejdę do style CSS.
To ta klasa background gradient też została tutaj w wynikowym pliku zaaplikowany.
Dzięki temu moja, plik index html, który zaczytuje sobie ten plik tutaj styli.
Jeżeliby przyjąć, że te do góry dodaliśmy ten plik styli ma dostęp do tej klasy
bg radial gradient dzięki temu może
ją wykorzystać do tego, żeby stworzyć właśnie taki efekt, który tutaj widzimy.
Kolejna rzecz, którą potrzebujemy, to musimy teraz przejść do responsywnego
wystylizowania tego header'a, bo jak przejdziemy do naszego designu, to
widzimy, że te odległości tutaj się zwiększają.
Na widoku tabletu i na tablecie już
pojawia nam się napis z e-mailem tego tutaj użytkownika z tej strony internetowej.
Na jeszcze większym ekranie też mamy
zupełnie inną sytuację, bo też te odległości się znacznie zwiększają.
I tutaj też pojawia się ten adres e-mail i ten znaczek przechodzi
na środek i też pojawia się dodatkowa opcja.
Czyli przejdźmy sobie teraz do wystylizowania widoków na
tablety, czyli wróćmy do naszego edytora kodu.
Mamy tutaj naszą stronę po prawej stronie
i musimy sobie, jakby zacząć edytować tego header'a w taki
sposób, że tutaj musimy zwiększyć padding'i
w momencie, w którym będziemy na jakby na ekranie medium i w Tailwind CSS
responsywne stylowanie odbywa się tak, że mamy tzw.
modyfikatory, które możemy sobie
wykorzystywać do tego, żeby responsywnie stylować elementy na naszej stronie.
I my sobie w przypadku naszego header'a tutaj zrobimy sobie, że na
na ekranach medium chcemy sobie zrobić padding x, ustawić sobie na 8.
Ja sobie to zapiszę. W tym momencie
tutaj nie widzisz różnicy, bo to jest cały czas ekran small.
Natomiast jeżeli przejdę sobie na medium, no to już tutaj ten element padding'u się zwiększył.
Tak? Za chwilę będzie to bardziej
widoczne, jeżeli będziemy przeskakiwać sobie na duże ekrany, to będzie przeskakiwać
na środek i tutaj będzie pojawiał się dodatkowy element.
Czyli jeżeli chodzi o medium to padding mieć chcemy na 8.
Jeżeli chodzi o inne ekrany xl no to ten
padding ma być jeszcze większy z tego względu, że jak tutaj sobie
pomierzymy te odległości to zobacz, że tutaj mamy tak naprawdę 32.
Tutaj ta odległość jest już połowę mniejsza.
A tutaj ta odległość jest jeszcze tyle większa.
Czyli tak naprawdę mamy 4,8 i
prawdopodobnie na największym ekranie będziemy mieli 16.
Czyli przejdźmy do naszego edytora kodu i tutaj wykorzystamy sobie przedrostek xl.
To jest na duże ekrany i tutaj ustawimy padding na x na wartość 16.
Zapiszemy to sobie w tym momencie jak
sobie zrobię stronę na pełny ekran, zobaczy padding'i
odpowiednio też przyjmują dużo większą odległość niż, niż to było wcześniej. Tak?
Oczywiście wszystkie te elementy tutaj nie są
jeszcze wystylowane responsywne, dlatego zostały na swoim starym miejscu.
Natomiast już nasz header, który za to odpowiada jest wystylizowany odpowiednio.
Natomiast jeden problem, ten element mi wskakuje na środek.
Z tego względu, że jeszcze nie mamy tutaj dodatkowo stworzonego tego elementu kontakt,
którym się teraz może zajmiemy, czyli przejdźmy do naszego header'a.
Przypominam, że jest on w tym miejscu, to
sobie na razie minimalizujemy, żeby nam nie przeszkadzało.
I tutaj mamy tą h1, czyli nasze logo.
Tutaj mamy nasz svg odpowiedzialny za
nasze menu, czyli prawdopodobnie tutaj poniżej
musimy stworzyć div.
I w tym div'e chcemy sobie jakby wypozycjonować flex'em elementy,
które będą odpowiedzialne za napis kontakt i za te kółeczko
pomarańczowe, jak zobaczymy nasz design tutaj.
No to mamy taki element.
Składa się tak naprawdę z trzech elementów.
Jest to jedno kółko, napis i kolejnę kółku.
Te dwa elementy są takie same.
I te dwa elementy stworzymy sobie też przy pomocy klasy Tailwind'owych.
Czyli teraz przejdźmy sobie do kodu.
Mamy tutaj jednego div'a, dodatkowo pod spodem jest kolejny div, który będzie
to są te dwie kulki pomarańczowe, które sobie stworzymy za chwilkę za pomocą
naszych styli i w środku nich będzie span i tu będzie napis kontakt, tak?
Już sobie to zapiszemy. Zobacz, że pojawił się tu trzeci element.
Oczywiście teraz ten element jest na
każdym ekranie, czego nie chcemy, na widokach mobilnych
chcemy, żeby to znikło.
Natomiast na chwilę obecną zajmiemy się tylko i wyłącznie wystylizowaniem tego,
żeby widzieć, czy to wszystko dobrze wygląda, te dwa elementy będą takie same.
To są te dwie pomarańczowe kulki, które będziemy mieli po boku.
Czyli tutaj wykorzystujemy sobie klasę i
wpisujemy tak: wysokość na 1, szerokość też na 1.
To są po 4pixele z lewej i z prawej strony.
Dodatkowo potrzebujemy zaokrąglić te elementy, czyli rounded na full ustawiamy.
No i backgraoud orange.
Prawdopodobnie też 600, bo taką samą wartość miał ten nasz pierwszy napis.
No jeżeli sobie to teraz zapiszę,
zauważ, że powstały nam tutaj dwie kulki koło napisu kontakt.
Teraz wystylizujemy sobie ten napis.
Czyli zaczniemy od text-lg.
Dodatkowo będziemy potrzebowali font semibold.
Troszeczkę ten napis, już widzisz się troszeczkę zmienił.
Dodatkowo myślę, że uppercase to jest też klasa, którą Tawilwind daje nam od razu.
Zobacz, że mamy text transform uppercase.
Nie musimy korzystać tutaj, jakby z CSS'a pisać osobnej klasy tylko tutaj
stosując to mamy od razu zastosowany uppercase do naszego napisu kontakt.
I jak już mamy nasz napis kontakt to też zmienimy sobie na text zinc na 50,
w naszym przypadku niech to będzie troszkę ciemniejszy będzie ten odcień.
Dobrze natomiast widzisz, że
wypozycjonowanie tych elementów nie jest odpowiednie, dlatego musimy przejść do
tego naszego elementu wrapującego te trzy elementy.
No i ustawić items na center i ustawić na gap na 2.
Już to nam powinno jakoś usunąć.
Natomiast jeszcze nie mamy flex'a, tak? I ustawmy sobie flex
na ten element.
No już w tym momencie mamy to wypozycjonowane dobrze.
Natomiast my chcemy, żeby ten element domyślnie był ukryty.
Nie chcemy go na widokach mobilny, chcemy go dopiero na widoku desktop'owym.
Tutaj w tym momencie jak ja sobie zwiększe ten
ekran, to dopiero tutaj chcę widzieć ten napis kontakt.
Jeżeli chcę coś takiego uzyskać, no to pamiętaj, że w
Tailwind CSS stylujemy mobile first, czyli zaczynamy od widoku mobilnego, czyli
domyślnie ten element jest ukryty, czyli ustawiamy sobie na hidden.
Już w tym momencie nam zniknął.
I jako że mamy teraz klasy, które się kłócą ja sobie ustawię.
Użyjemy sobie przedrostka na xl flex.
I w tym momencie powinno nam to rozwiązać naszą sprawę.
Jeżeli sobie zwiększymy ten ekran i przejdziemy na ekran xl no to już zauważ, że kontakt
mi się pojawia menu i tutaj przeskakuje na środek naszego header'a.
Już myślę, że tą sekcję hero tak naprawdę mamy prawie z głowy.
Oprócz tych tutaj
elementów na dole, które też musimy responsywnie odpowiednio poprzesuwać.
Przejdźmy sobie teraz do nich.
Ten element sobie zminimalizujemy.
Header myślę, że mamy już z głowy.
Przejdźmy sobie teraz tutaj do tego głównego elementu.
I tutaj mamy tak.
Mamy nasz obrazek hero phase.
Czego nie chcemy zmieniać w żaden sposób.
Mamy nasz gradient redial, którego też nie chcemy w żaden sposób modyfikować.
I tutaj mamy element to jest ten element po lewej stronie.
Tego też musimy sobie tutaj odpowiednio zmodyfikować odległości.
Jeżeli chodzi o, mamy tutaj left 4.
Analogicznie do tego co robiliśmy tutaj w headerze.
Zauważ, że też robiliśmy na md:px-8 i px-16.
Analogicznie możemy sobie zrobić tutaj na nd:left-8.
I xl:left-16. Zwiększamy sobie odległości tego elementu od lewej strony.
I zauważ jak teraz sobie zapiszę, no to ten element już mi się odpowiednio
przesunął jest równolegle właśnie z tym elementem.
Na największy ekranie jest jeszcze dalej odsunięty.
Tutaj po lewej stronie to samo sobie zrobimy tutaj z tymi ikonami, czyli
przejdziemy sobie do wrapera, który wrapuje nam te wszystkie svg, tutaj te ikonki.
No i tutaj, analogicznie jak w tym przypadku mieliśmy left,
bo to element jest, odsuwamy go z lewej strony, ten element chcemy odsuwać z prawej strony.
Czyli tak naprawdę możemy sobie skopiować tutaj tą klasę, skopiować sobie wkleić ten wraper.
No i tutaj zamiast left wykorzystamy sobie right.
Zapisujemy sobie to i zobacz, że już elementy się odpowiednio nam od siebie odsunęły.
Jeżeli przejdziemy na ekran mobilny,
to już są bliżej krawędzi, a jeżeli dam fullscreen no to też odpowiednio się
przesunęły zgodnie z tym co mamy tutaj na designie, prawda?
Dobrze.
Jeszcze jedna rzecz, której zapomnieliśmy, no na tabletach i na widoku
tutaj desktop'owym pojawia nam się dodatkowy element w postaci tego adresu e-mail.
Przejdźmy sobie teraz do naszego edytora kodu i
potrzebujemy stworzyć dodatkowy element w postaci span'a na końcu.
Myślę, że tutaj wrapujemy te wszystkie ikonki.
Tutaj wrapujemy sobie ten element, który mówi nam o tym, żeby scrollować w dół, prawda?
No to teraz możemy też przejść do tego,
żeby na końcu tutaj stworzyć dodatkowy span w postaci adresu e-mail.
Powiedzmy, że niech to będzie taki adres, albo wpiszmy sobie
programistafronted@gmail.com. Zapiszę to sobie.
Na razie nic tutaj nie jest pokazane z tego względu, że on jest pod spodem.
Ten span jest jeszcze niewidoczny, dlatego musimy sobie go odpowiednio wystylizować.
I w naszym przypadku tu też będzie pozycja absolute.
Potrzebujemy wypozycjonować go absolutnie. Zrobić na bottom-1/3.
30% ekranu na bottom
chcemy pozycjonować ten element.
Zauważ, że już się nam tutaj pojawił.
Z tego względu, że miał taki kolor po
prostu nie widzieliśmy go wcześniej, ale jest wypozycjonowany absolutnie.
Mniej więcej na takiej wysokości, którą potrzebujemy.
Która jest tutaj też w designie.
No, teraz jest kolejny.
Pojawia się problem tego, w jaki sposób
ten element tutaj obrócić, żeby on wyglądał tak jak na designie
natomiast zanim to zrobimy,
potrzebujemy odsunąć go od lewej strony, mianowicie odsunąć go 16 pixeli.
Dodatkowo musimy nadać mu odpowiedni kolor i obrócić go.
Czyli najpierw zaczniemy od obrotu, czyli - rotate 180.
Tu też widzisz też są klasy Tailwind'owe, które pomagają nam obracać elementy.
Ja sobie to teraz zapiszę.
Zauważ, że ten element się obrócił, jest do góry nogami.
Zaraz sobie go wystylizujemy dalej.
Dodatkowo kolejna rzecz, którą będziemy potrzebować to zwiększyć text na lg.
Zrobić ten text
jaśniejszy, bo tak naprawdę go na razie na chwilę obecną nie widzimy.
Zrobimy go zinc-200.
Żeby to też ten tekst nie był tak bardzo
wyróżniający się jak cała reszta na naszej stronie.
Zapiszę sobie to wszystko już nam
tekst się tutaj pojawił w tym miejscu.
Dodatkowo będziemy potrzebowali
skorzystać tutaj z custom'owych wartości z tego względu, że Tailwind nie przychodzi
nam z pomocą i nie daje nam klas do writing mode, a za pomocą writing
mode będziemy mogli sprawić, że ten tekst tutaj będzie pisany z dołu na górę.
I w tym momencie możemy sobie skorzystać z tzw.
wartości arbitrary value.
I tutaj wpisujemy sobie normalnie tak jak byśmy pisali w CSS czyli writing mode.
I tu my chcemy skorzystać z wartości vertical-lr.
No i zobacz, że już tekst się obrócił do góry.
Natomiast jest jedna rzecz, którą ja bym tutaj jeszcze chciał usprawnić.
Otóż teraz, żeby ktoś skopiował sobie tego maila. Zobacz
nawet jak kliknę dwa razy, to nie mogę skopiować całego maila, prawda?
Musiałbym po prostu tak wziąć i przeciągnąć.
Czyli też możemy sobie skorzystać tutaj z klasy
Tailwind'owej mianowicie select all, która pozwoli użytkownikowi naszej strony
jednokrotnie tylko kliknąć i już mamy zaznaczony cały adres e-mail do szybkiego kopiowania.
Jeżeli ktoś chciałby się ze mną
skontaktować od razu to może sobie od razu tak na prawdę taki adres e-mail skopiować.
Oprócz tego chciałbym jeszcze to
odpowiednio wystylizować, bo na razie widzisz, że mamy domyślny styl takie niebieskie.
Czyli teraz możemy sobie tą selekcję tak
naprawdę wystylizować tak jak byśmy chcieli.
Czyli łapiemy modyfikatorem selection.
Tutaj też Tailwind przychodzi nam z pomocą i możemy sobie zrobić bg jak np.
zinc-50 żeby był background.
Dodatkowo zmienimy sobie text tej selekcji
czyli text-zinc i ustawmy sobie na 950 to myślę, że da fajny,
ciekawy efekt. Zgodny z designem całej tej strony, którą mamy.
I zapiszemy sobie to, zobaczmy jaki jest efekt.
Zobacz, że już to wygląda lepiej.
Już to nie wygląda tak domyślnie niebiesko, jakby ten kolor niebieski.
Z tego względu chciałem się go pozbyć, bo on nie ma nic do czynienia z jakby designem
naszej strony, a jest domyślnie nadawany przez przeglądarkę.
I dodatkowo co potrzebujemy na pewno zrobić.
No to widzisz, że to nie jest jak by fajnie w jednej linii tutaj.
Tylko ten test jest jednak troszeczkę za
blisko, czyli potrzebujemy odpowiednio go przesunąć.
Od lewej strony mamy domyślnie left-4.
My tutaj jeszcze chodzi, jeżeli chodzi o md
to też musimy tak naprawdę zrobić left-8 i left-16.
W tym momencie powinno to mieć wszystko
ręce i nogi i powinno być równo w tym samym miejscu umiejscowione.
Dobrze. Myślę, że sekcję hero mamy zakończoną.
Teraz przejdziemy sobie do kolejnej sekcji na naszej stronie.
Otóż mianowicie sekcja o mnie, która też na pierwszy rzut oka nie wygląda za bardzo
skomplikowanie, natomiast tutaj mogą być schody.