Tailwind CSS: Heroicons i nagłówek listy
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.
Wróćmy sobie na naszą stronę, na której pracujemy no i będziemy
potrzebowali tutaj tego szewrona, który jest otwarty w dół.
Generalnie przyjęło się, że twórcy Tailwind'a
też mają swoją bibliotekę ikon, które używają. Heroicons
sobie wyszukamy to.
No i tutaj możemy sobie poszukać szewron i mamy szewron w dół.
Kopiujemy go sobie jako svg do naszego pliku i tutaj w naszym wrapperze
stworzymy sobie nowy wrapper, którym wkleimy sobie nasze svg, zapiszemy to sobie.
W tym momencie już na naszej stronie powinno pojawić się szewron w dół, mamy ten
znaczek. Natomiast potrzebujemy jeszcze tak jak to tutaj jest na tej stronie
ogólne kanały, czyli jeszcze przyda się jakiś span,
ogólne kanały, zapiszemy sobie.
No, na razie jak widać nie jest to
umiejscowione tak jak powinno być, natomiast za chwilkę to do nas należy cała
broszka, żeby to zrobić, żeby to wyglądało tak jak tutaj.
Tak że przejdźmy sobie teraz do stylowania naszych elementów.
Musimy sobie nadać mu klasy.
Zrobimy sobie class tutaj i nadamy mu flex,
żeby ułożyć te elementy wzdłuż jego długości.
Zrobimy item center, żeby je wyśrodkować i
zrobimy padding na itery, czyli przypominam padding, który jest prawy, lewa strona.
No i zrobimy jeszcze padding na y wartości 1,5.
No i po zapisaniu już mamy bliżej tego co jest na stronie ahoy.
Teraz musimy sobie troszeczkę ostylować
ten szewron tutaj, dlatego on tu ma width i height ustawiony na 6.
Jest to troszkę za dużo,
jeżeli porównasz to właśnie z tym co jest na stronie.
Ten szewron jest troszeczkę mniejszy niż
ten cały napis po prawej stronie, dlatego zmienimy sobie width i height na 4.
Mamy już mniejszy szewron, jeszcze nadamy mu margin po prawej stronie 4,
żeby odsunąć go troszkę od całego napisu,
tak jak to mamy analogicznie tutaj na stronie.
Teraz potrzebujemy jeszcze wystylować sobie troszeczkę ten napis, dlatego
przejdziemy sobie tutaj do styli na tym spanie.
No i nadamy tutaj font semibold i zrobimy
text troszeczkę mniejszy, sm zmniejszy nam całą wielkość tego fonta,
dzięki czemu mamy podobny wygląd do tego co jest tutaj po lewej stronie. Wygląda
podobnie, dlatego mamy już pierwszy element zbudowany.
Teraz przejdziemy do budowania tych poszczególnych elementów listy.
Na razie bez żadnych styli na hover tylko
i wyłącznie zajmiemy się statycznym tutaj html i CSS'em.