HTML/CSS

 

Zaczynamy z podstawami HTML/CSS

Czas na poznanie pierwszych tajników budowania stron internetowych. Sam ich wygląd budujesz używając HTML oraz CSS. Znając już JavaScript, dodanie do tego elementów wizualnych to łatwiejsza część. Obejrzyj materiał znajdujący się poniżej, który wprowadzi Cię w podstawy. HTML/CSS to bardzo stare technologie, znajdziesz ogrom przykładów, poradników, fragmentów kodu gotowych do skopiowania na praktycznie każdy element, jaki chcesz uzyskać.

 

 

Jeżeli nigdy wcześniej nie widziałeś HTML i ta godzinna lekcja jest dla Ciebie niewystarczająca, możesz poszukać dodatkowych materiałów na YouTube. Jest ich naprawdę sporo, a godne polecenia wydaje się być to wprowadzenie:

 

Osobiście w przypadku stylowania stron wolałbym nie zagłębiać się dość mocno, w każdej chwili można znaleźć przykład w internecie, lekko go przerobić i gotowe, ale to, co musisz koniecznie wiedzieć, to...

 

Flexbox zmienił reguły gry!

Dawniej stylowanie było o wiele bardziej upierdliwe, różnice pomiędzy przeglądarkami, czy wspieranie starego IE6, to na szczęście wyzwania, z którymi dzisiejszy młody programista się nie zmierzy. Dziś jest dużo łatwiej, gdyż wszystkie przeglądarki wspierają Flexboxa. Koniecznie zrozum, na czym polega stylowanie z jego użyciem i staraj się stylować wszystkie elementy w ten właśnie sposób. Flexbox przegrywa z Gridem, innym sposobem układania elementów, ale tylko w bardzo specyficznych sytuacjach. Warto natomiast znać dobrze Flexboxa i wiedzieć, czym jest Grid.

 

Materiały, które dogłębnie wprowadzają do Flexboxa i Grida, to na przykład:

 

 

Jeżeli chcesz uczyć się bardziej w praktyce, możesz spróbować obejrzeć tylko ten krótki, wprowadzający filmik. Wystarczy, żebyś zrozumiał, o co chodzi i w miarę potrzeb szukał informacji dalej:

Polecam również strony typu "cheat sheet", dobrym przykładem jest np. ta: https://yoksel.github.io/flex-cheatsheet/. Znajdziesz tu opis wszystkich najważniejszych opcji Flexboxa, analogicznie dla Grida: https://yoksel.github.io/grid-cheatsheet/

 

Tailwind CSS

Osobiście nie jestem ogromnym fanem, ale dużą popularność zyskuje teraz framework do stylowania o nazwie Tailwind CSS. Jest to sposób stylowania bez pisania jakichkolwiek styli CSS. Na wszystko masz przygotowane klasy, których używasz na danym elemencie. Warto, żebyś wiedział, co to jest i jak to działa, gdyż jest to prosty sposób dla początkujących i wiele firm decyduje się na używanie tej technologii.

Zerknij na stronę https://www.creative-tim.com/twcomponents. Znajdziesz tam tysiące gotowych do przekopiowania przykładów, które czekają, aby je lekko przerobić i użyć w swoich projektach. Proste, prawda?

 

Zadanie

Pobaw się chwilę stylami w trybie Castle Defense. Używamy tam Reacta, więc będzie Ci nieco ciężej, ale ze zdobytą wiedzą powinieneś móc zmienić kolory czy podstawowe elementy.