Tailwind CSS: Sekcja reklamy i stylowanie contentu
od Podstaw
3 godz. 55 min · HTML i CSS · Full-stack i Programowanie
Daniel NoworytaFull stack DeveloperCzego się nauczysz
- Zrozumienie podstawowych koncepcji i zalet frameworka TailwindCSS.
- Instalacja i konfiguracji frameworka TailwindCSS.
- Tworzenie stylów strony internetowej przy użyciu gotowych klas CSS.
- Stylowanie strony internetowej w sposób responsywny, tak aby dostosowywała się do różnych rozmiarów ekranów.
- Stylowanie strony internetowej w sposób dedykowany dla wyświetlania na dużych ekranach.
- Zastosowanie różnych technik stylowania, takich jak tworzenie układów za pomocą display flex i display grid.
- Zbudowanie atrakcyjnej strony internetowej, korzystając z frameworka TailwindCSS.
- Optymalizacja pracy i przyspieszenia procesu projektowania interfejsów użytkownika dzięki wykorzystaniu gotowych klas CSS oferowanych przez framework TailwindCSS.
Pierwszy rzut oka na TailwindCSS
W tej sekcji zapoznasz się z frameworkiem TailwindCSS i poznasz podstawowe pojęcia związane z systemem klas. Dowiesz się, czym jest TailwindCSS, jakie problemy rozwiązuje i jakie zalety posiada. Będziesz miał okazję zobaczyć, jak wyglądają gotowe klasy CSS, które oferuje TailwindCSS i jak można je wykorzystać w projektach.
Projekt The Eduweb Times
Ta sekcja zawiera praktyczne zadanie polegające na zbudowaniu strony internetowej projektu The Eduweb Times na urządzenia mobilne. Będziesz mieć okazję zastosować swoje nowo zdobyte umiejętności w praktyce, tworząc atrakcyjną i funkcjonalną stronę internetową.
The Eduweb Times i responsywność
Ta sekcja skupia się na stylowaniu strony internetowej projektu The Eduweb Times w sposób responsywny, czyli tak, aby strona dobrze wyglądała na różnych urządzeniach. Zaczniemy od stylowania na Tablety. Nauczysz się, jak tworzyć style, które dostosowują się do rozmiaru ekranu, na którym jest wyświetlana strona.
The Eduweb Times i duże ekrany
Ta sekcja skupia się na stylowaniu strony internetowej projektu The Eduweb Times w sposób dedykowany dla wyświetlania na dużych ekranach, takich jak monitory desktopowe. Nauczysz się, jak wykorzystać różne techniki stylowania, aby stworzyć atrakcyjny i funkcjonalny wygląd strony na większych ekranach.
Dla kogo jest ten kurs?
Ten kurs wprowadzający do frameworka TailwindCSS jest przeznaczony dla programistów i web developerów, którzy mają już podstawową wiedzę i umiejętności z zakresu HTMLa i CSSa, ale chcą nauczyć się używać jednego z najnowocześniejszych narzędzi do stylowania stron internetowych.
Tutaj teksty mają być białe.
W naszym przypadku póki co
mamy wszystko czarne, dlatego, że to jest domyślny, domyślny kolor tekstu na naszej
stronie jest zinc-900, dlatego musimy sobie zmienić.
Możemy to zrobić dla całej sekcji, natomiast lepiej jest to ustawić tylko i
wyłącznie dla tego diva, który tutaj oplata nasze teksty.
Ustalimy sobie, że tekst ma być koloru zinc,
to jest prawdopodobnie 50.
Jeszcze to sobie sprawdzimy.
Sprawdźmy to sobie w designie.
E4.
Wróćmy do palety kolorów, e4, nie, to jest zinc-200.
Tak że możemy sobie to zmienić.
I już mamy kolory takie jakie byśmy chcieli.
Musimy sobie teraz wyśrodkować to wszystko, co mamy tutaj, w tym wrapperze.
Otwórzmy sobie teraz tutaj ten content.
Tutaj mamy wszystkie nasze gwiazdki.
Czyli to już jest za daleko.
Musimy złapać ten element, który ma tą width 1/2.
Nadać mu Display-Flex, Flex-Column, justify-center.
Już mamy w wyśrodkowany tak jak chcieliśmy mieć w designie.
Jeżeli sobie spojrzysz tu na stronę,
to mamy to wszystko wśrodkowane mniej więcej w tym wrapperze I teraz ten napis musi być
wyrównany, musi być wyrównanie do prawej strony.
Cała reszta jest wyrównana do lewej.
Dlatego możemy sobie przejść na napis Marcin K., Class,
text-right to jest text align tylko po prostu po prawej stronie.
Jeżeli to sobie zapiszemy to już nasz
tekst powinien się przesunąć na prawą stronę wrappera.
Teraz potrzebujemy nadać tutaj odpowiedni
padding z tej strony, wystylizować ten tekst.
Tak że wróćmy sobie do designu.
Zobaczymy co tutaj nasz designer mówi.
Tu potrzebujemy Crimson Text Bold i 16,
czyli wejdźmy sobie na ten element Font-bold.
I Font-Crimson.
Zapiszemy.
Mamy już 16 Crimson-Text.
Jeszcze zobaczmy sobie odstępność tych literek czy jest taka sama.
Wszystko jest domyślnie ustawione.
Tak że teraz możemy przejść do tego elementu.
To jest też Crimson Text, natomiast jest wielkości 12.
Przejdźmy do tego p. To jest gdzie jest nasz tekst.
Class=font-crimson, czego nie musimy generalnie nadawać, bo jest to font globalny.
Dlatego tutaj też możemy sobie to usunąć.
Natomiast tutaj potrzebujemy powiedzieć text-small.
To jest 14 xs 12, czyli zrobimy xs i wróćmy do naszego elementu.
Już mamy to zrobione bliżej, tak jak
designer tego od nas oczekuje i zmierzmy sobie dokładnie tą odległość tutaj.
Ile to wynosi?
Prawdopodobnie jest to tyle samo co obrazek po prawej stronie.
To jest około 20 pikseli, dlatego możemy sobie zacząć mniej więcej tutaj.
Widać, że designer chciał mieć tą samą odległość po prawej i po lewej stronie.
Dlatego możemy sobie zacząć od tych 20 pikseli.
Zobaczymy jak to będzie wyglądało finalnie na naszym design'ie tutaj.
Załóżmy sobie tutaj dla tego wrappera padding po prawej stronie odpowiedniej
wielkości, czyli to jest wrapper, który jakby oplata nasze teksty i gwiazdki.
Zróbmy sobie padding po prawej stronie wielkości 4 najpierw.
No przesunęliśmy troszkę bardziej,
natomiast może piątka będzie lepszym wartością.
Szóstka, no już wygląda to lepiej.
Już wygląda to bliżej tego, co mieliśmy zadane przez designera.
I zobaczmy na wysokość linii w tym tekście czy było to zmieniane? Nie.
Tu jest wszystko zrobione standardowo.
I musimy odsunąć sobie ten tekst tutaj od tego, tego tekstu i ten tekst od tego Get it today.
Bo z tego co widać, to tutaj odstępy są większe.
Dlatego zmierzymy sobie dokładnie ten odstęp.
Około 22 pikseli.
I ten poniżej.
To jest około 16 pikseli.
Czyli ten troszkę większy niż ten na dole.
Przejdźmy do naszej strony.
Przejdźmy do Marcin K.
Wstaw margin top na 4.
Najpierw już przesunie nam nasz napis i tutaj "Get it today" zrobimy margin bottom na 2.
Tu też na 4.
Myślę, że to jest podobna wartość,
tutaj sobie zmienimy na 3, żeby troszeczkę
zmniejszyć tę odległość i już mamy wartości takie jak na naszym design'ie.
No i generalnie rzecz biorąc, to byłby
finish, gdyby nie to, że mamy tutaj jeszcze paddingi.
Tak jak w każdym naszym,
całym naszym designie, tak że możemy sobie złapać te sekcje.
Klasa px=4 analogicznie jak w innych i już to powinno nam zawęzić tę reklamę.
Już jedna rzecz, która się rzuca w oczy to
tutaj jest troszeczkę za wysoko ta część w stosunku do tej.
Zobaczmy sobie jak jest designie i czy ten
font przypadkiem nie jest troszkę ustawiony na mniejszy.
Tak, dokładnie jest 14.
Dlatego musimy sobie ten Advertisement tutaj
zmienić na text i to będzie wartość small.
Już to powinno nam pomóc w tym, żeby te dwie odległości były podobne.
Natomiast jeszcze nie wygląda to dokładnie tak samo jak na naszym design'ie.
Zmierzmy sobie dokładnie ile ma wysokość tego,
to wrapper ma wysokość 24 dokładnie.
Ten kwadracik.
Dlatego przejdźmy sobie, zmierzmy sobie to po na naszej stronie
ile to dokładnie wynosi na chwilę obecną?
Tutaj jak widać 48 mamy 200%, czyli dokładnie tyle chcemy mieć też na dole.
Na dole na razie mamy 32, czyli musimy
padding bottom zwiększyć tutaj na wartość 6 prawdopodobnie.
Tak.
To będzie dokładnie ta wartość.
Teraz zmierzymy sobie tą odległość jest 48
pikseli podzielone na 2, jest 24, czyli tyle dokładnie ile mamy w design'ie. No i już udało
nam się odzwierciedlić tutaj kolejną sekcję
na naszej stronie. Mamy reklamę.
Włączmy sobie teraz całą resztę.
Czy to wszystko wygląda tak jak powinno wyglądać?
Ja sobie odkomentuje te pozostałe dwie sekcje, przewiniemy sobie.
No i tu widzimy, że całą sekcję musimy sobie troszeczkę
odsunąć od ostatniego newsa, który mieliśmy.
Sprawdźmy sobie tą odległość.
Od razu nadamy ten margin top i tutaj ta odległość to będzie 20, około 24 pikseli.
Czyli wróćmy do naszej sekcji z naszą reklamą.
Czyli to jest ta ostatnia sekcja i tutaj możemy sobie zrobić margin top na
sześć, 6x4=24.
Już powinienem to odsunąć od całej reszty. Tak już wygląda to lepiej.
No i na tym skończyliśmy odwzorowywanie kolejnej sekcji w naszym design'ie.
Teraz przejdziemy sobie do następnej sekcji i spróbujemy odwzorować sobie
właśnie tutaj te opinie Alberta Einsteina, Sokratesa i Napoleona.