Zbuduj własne portfolio z Tailwind CSS: Sprawdzenie konfiguracji

0:00Teraz jak już całą konfigurację mamy za

0:02sobą, to myślę, że powinniśmy zacząć pisać naszą stronę internetową, pisać nasz

0:07projekt tak, że wrócimy sobie do tego widoku sideview, bo za chwilkę odpalimy sobie nasz

0:12plik index html tutaj w okienku przeglądarki ja zamknę sobie tutaj ten plik.

0:17No i w tym momencie w pliku index html tutaj.

0:20Plik, który mamy w tym miejscu wykorzystajmy sobie emmet'a

0:24do tego, żeby zbudować podstawową strukturę, która będzie nam potrzebna.

0:29To jest podstawowa struktura pliku HTML.

0:31I tutaj ja sobie jako title wpiszę po

0:34prostu Daniel Noworyta i jako tytuł Software Portfolio.

0:40Zapisujemy to sobie.

0:42I teraz, żeby sprawdzić czy style będą się

0:44aplikowały, no to jeszcze kolejna rzecz, którą potrzebujemy.

0:46No to potrzebujemy te style jakoś tutaj sobie załadować.

0:49Czyli musimy wpisać link: css i tab.

0:53I w tym momencie wskazujemy miejsce, z którego mają być zaczytywane nasze style.

0:57Jako że nasz plik index html jest tutaj w

1:00tym miejscu zobacz, że mamy style, które zostały zbudowane są w folderze CSS.

1:04Także potrzebujemy tutaj powiedzieć

1:07naszemu plikowi HTML, że: Hej, słuchaj, Twoje style są w katalogu CSS/style.css.

1:12Teraz są ładowane style właśnie z tego pliku.

1:16Style będą ładowane tutaj do tego elementu HTML tego pliku HTML, który mamy tutaj.

1:21No i teraz sprawdźmy sobie czy

1:23wszystkie, wszystko działa i wszystko zostało zaaplikowane.

1:27Czyli pierwsza rzecz, którą sobie zrobię

1:28to otworzę za pomocą Live Server rozszerzenia Live Server.

1:31Tutaj ten plik index html jeszcze sprawdzę

1:35czy tylko mam czy Live Server jest tutaj zainstalowany.

1:40Instal extension, musimy sobie zainstalować ten Live Server.

1:43I teraz już za pomocą tego Live Server'a

1:45możemy sobie odpalić tą stronę internetową, która zostanie otwarta tutaj

1:50w tym miejscu. No jeszcze nic nie widzimy, natomiast jak sobie tutaj se wpiszemy:

1:54Hello, no to widzisz, że tutaj już nam się coś po prawej stronie zmienia.

1:58Czyli teraz, żeby sprawdzić, czy style Tailwind'owe są aplikowane, spróbujmy

2:02tutaj wykorzystać jakieś style czyli class no i wpisujemy mx-2 grid.

2:09Na razie nie martw się jeżeli nie rozumiesz tych styli, które

2:11w tym momencie wpisuję wszystkiego,

2:13wszystko staram się za chwilkę tłumaczyć.

2:16Natomiast w tym momencie chciałbym

2:17zobaczyć czy Tailwind CSS tutaj jest prawidłowo skonfigurowany.

2:22Ty też możesz sobie sprawdzić.

2:24Width też sobie zrobimy na screen, dodatkowo place content center.

2:28Zauważ, że Tailwind IntalliSense od razu podpowiada mi tutaj składnie.

2:32Jeżeli u Ciebie coś takiego się nie pojawia to wejdź sobie w install extention

2:38i tutaj wyszukaj Tailwind CSS IntalliSanse

2:42to rozszerzenie powinieneś mieć

2:44zainstalowane, żeby mieć takie podpowiedzi właśnie składni, które ja mam tutaj

2:48w swoim edytorze kodu czyli place content center no i tutaj na ten moment to zostawimy jeszcze

2:55sobie zrobimy tutaj w środku div, który będzie miał klasy.

2:58Zauważ, że też tutaj korzystam jakby

3:00z podpowiedzi emmet'a ja mogę sobie swobodnie korzystać z klas Tailwind'owych.

3:04Natomiast widzisz, że nie mam podpowiedzi, chociaż wykorzystuję tutaj klasą Tailwind'ową.

3:08Może to być. Jeżeli nie masz aktywowanej tutaj opcji pewnej.

3:12Wejdźmy sobie w ustawienia UI i tutaj wyszukujmy sobie emmet i na końcu

3:17powinna być opcja emmet completions dla Tailwind CSS to sobie to włączymy aktywujemy

3:23sobie to i w tym momencie jak ja tutaj będę wykorzystywał już klasy Tailwind'owe

3:27no to już zobacz, że mam autocomplete

3:29i też nawet pod spodem mamy dokumentację co dana klasa robi.

3:33Także w momencie, w którym się uczysz Tailwind'a i zaczynasz go wykorzystywać.

3:37Tutaj już widzisz w praktyce, że mt-1 to jest margin top na 4 pixele ustawione 0.25rem

3:43domyślnie, czyli ja sobie tutaj ustawię.

3:47Zacznijmy od h10.

3:49Może na tego diva.

3:51Dodatkowo chciałbym mieć tutaj klasę w-10. No na razie tabulacja,

3:55mamy dwie takie klasy.

3:57Zobacz automatycznie zostały tutaj nadane.

4:00Tak może też dosyć szybko sobie iterować po swoich widokach pisać sobie te klasy.

4:05Dodatkowo chciałbym tutaj na

4:08tego diva zrobić rounded full, żeby go całkowicie zaokrąglić.

4:12Tak? I na teraz widzi red

4:16zróbmy sobie 600, zapiszemy to sobie no i zobacz

4:19stworzyliśmy sobie kropkę na środku tutaj naszej strony internetowej.

4:22To znaczy, że style się budują.

4:26Także jeżeli nie masz.

4:27Jeszcze raz mówię, jeżeli nie masz

4:28podpowiedzi tutaj składni Tailwind IntelliSance bardzo przydatne

4:32rozszerzenie, które proszę zainstaluj sobie w tym momencie. Sortowanie klas,

4:36sprawdźmy czy sortowanie klas działa.

4:38Jeżeli sobie wezmę tą klasę, przerzucę tutaj, w to miejsce i zapiszę.

4:42No to zauważ, że ona przeskoczyła znowu tutaj gdzie powinna być.

4:46Czyli teraz tak samo jak ten margin wezmę na koniec.

4:50To jeżeli masz dobrze skonfigurowany projekt tak jak ja, to teraz jak sobie

4:53zapisze i masz format on save włączony w opcjach. No to mx przeskakuje

4:58widzisz tutaj już na to miejsce.

5:00Czyli to zapewnia nam ten plugin który

5:02sobie tutaj zainstalowaliśmy i skonfigurowaliśmy sobie tutaj.

5:06Prettier confing css to jest ten plugin,

5:09który odpowiada nam za to, żeby sortować nasze style.

5:12Dobrze.

5:12No to teraz jesteśmy już przygotowani do tego, żeby eksplorować świat

5:16Tailwind'a bardziej, no i przejdźmy sobie do budowania

5:19głównej sekcji hero na naszej stronie internetowej.