Tailwind CSS: Sekcja reklamy i podstawowa struktura
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.
Jeżeli podążałeś/podążałaś ze mną w
poprzednich lekcjach tego kursu, to już zapewne masz zaimplementowane header,
masz zaimplementowaną tą główną sekcję z główną wiadomością na naszej stronie
i sekcję z tymi poszczególnymi wiadomościami, które mamy poniżej.
Jeżeli wszystko udało się tak jak jest, to to samo powinno być widoczne na Twoim
ekranie teraz, jeżeli sobie sprawdzisz ten projekt.
Jeżeli miałeś/miałaś problem z
odwzorowaniem tego, to plik ze stanem na chwilę obecną będzie również
dołączony do materiałów dodatkowych w tym kursie.
Teraz skupimy się na odwzorowaniu kolejnej rzeczy w naszym dizajnie, mianowicie tej
reklamy, którą tutaj mamy dostarczoną przez naszego designera.
Przejdźmy teraz już do implementacji.
Wrócimy tutaj na naszą stronę, żeby mieć podgląd.
No i już zaczniemy sobie pisać nasz kod.
Rozpocznijmy od zakomentowania tych dwóch
sekcji, żeby nam nie przeszkadzały tutaj, w naszym widoku,
w naszym dizajnie. Postaramy się skupić
naszą uwagę tylko i wyłącznie na tym fragmencie, który mamy tutaj.
No to zaczniemy od stworzenia nowej sekcji na naszej stronie.
I tutaj w środku widzimy, że potrzebujemy
na pewno jeden wrapper, który jest tym jaśniejszym szarym kolorem.
Dodatkowo potrzebujemy drugi wrapper, który jest tym kolorem ciemniejszym.
Dlatego zacznijmy od tych dwóch divów.
Div1 i w środku zrobimy sobie numer dwa.
No i tutaj na pewno potrzebujemy miejsce na ten obrazek, który reklamuje książkę.
Dodatkowo potrzebujemy miejsce na ten tekst, który który będzie obok obrazka.
Zróbmy sobie więc jeden div,
w którym zrobimy sobie image, a w drugim divie
tutaj potrzebujemy, też będą trzy elementy
tak naprawdę, cztery.
Jeden element to będą te gwiazdki.
Drugi element to będzie ta h3, którą możemy zrobić.
Trzeci element to będzie to p.
I czwarty będzie podpis.
Czyli zacznijmy najpierw od gwiazdek.
Będzie 1 div.
Później mamy tę h3.
Możemy sobie od razu skopiować, Get it today.
Poniżej zaimplementujemy sobie p i tutaj skopiujemy sobie z naszego designu cały ten tekst.
No i ostatni element możemy też sobie zrobić p.
I tutaj potrzebujemy imię i nazwisko osoby, która polecała tą książkę.
Zapiszemy sobie nasz plik.
No i mamy póki co wszystko co potrzebujemy.
Oczywiście potrzebujemy tutaj wrzucić
odpowiedni obrazek i tutaj też prawdopodobnie te gwiazdki to będą obrazki.
Dlatego teraz proszę Cię zerknij do
folderu, który dostarczyłem Ci razem z plikami źródłowymi i znajdź tam
plik z gwiazdką i z tym obrazkiem, który będzie na tego ebooka.
Ja skorzystam teraz z magii kina i po prostu dodam to do mojego katalogu.
Ja już tutaj przeniosłem do swojego folderu images dwa obrazki.
Mianowicie jeden to jest ebook, drugi to
jest Star, który będziemy teraz wykorzystywać w tym komponencie.
Zamknę sobie te dwa obrazki i tutaj w
środku tego diva potrzebujemy wrzucić sobie 5 obrazków z
gwiazdkami, czyli zrobimy sobie image i tutaj odniesiemy się do naszych images
i mamy star.png. Jako alt zrobimy sobie start.
I tutaj tak samo musimy odnieść się do
obrazka z naszym ebookiem, żeby było to widoczne.
Dlatego przejdźmy sobie do obrazków
i odniesiemy się do ebook, ebook Codzienność na autopilocie.
Zapiszemy to sobie.
Wróćmy do naszego projektu.
Widzisz, mamy już obrazki, z których możemy skorzystać.
Oczywiście potrzebujemy 5 gwiazdek, dlatego teraz
za pomocą skrótu klawiszowego ja sobie po prostu skopiuje to razy 5.
Mam już 5 gwiazdek i zacznijmy może sobie od.