Etap 2: Zaczynamy stylowanie!

Witaj w drugim dniu wyzwania Zacznij kodować z Kodillą! Poprzednim razem stworzyliśmy HTML trzech sekcji naszej strony. Przykładowe rozwiązanie:

Dziś opowiemy sobie o podstawach języka CSS, który będzie potrzebny, aby nadać naszej stronie charakter.

Lecimy!

1. Czym jest CSS?

CSS (ang. Cascading Style Sheets – kaskadowe arkusze stylów) służy do opisywania, jak elementy HTML powinny prezentować się na ekranie: jakie powinny mieć rozmiary, kolory, obramowanie... CSS daje nam mnóstwo możliwości. W wyzwaniu poznamy tylko niektóre z nich – jeżeli chcesz dowiedzieć się więcej, zajrzyj tutaj: https://cssreference.io/

2. Jak piszemy CSS?

Podobnie jak elementy HTML, reguły CSS mają własną strukturę, której należy się trzymać, aby kod działał poprawnie. Spójrz na przykład poniżej:

Z czego składa się reguła CSS?

• selektor – element HTML, na który ma działać dany styl. W tym przykładzie są to wszystkie elementy <p> na stronie.
• nawias klamrowy ({ }) – występuje zaraz po selektorze. Umieszczamy w nim wszystkie właściwości CSS dla danego elementu.
• właściwość (ang. property) – określa, co chcemy zmienić w wyglądzie danego elementu HTML. Po właściwości wstawiamy dwukropek. W naszym przykładzie użyliśmy właściwości color, odpowiedzialnej za kolor czcionki w elemencie.
• wartość (ang. value) – określa, w jaki sposób chcemy zmodyfikować daną właściwość. W przykładzie nadaliśmy naszej właściwości wartość green, co oznacza, że kolor czcionki zmieni się na zielony. Po wartości zawsze stawiamy średnik.

Jeżeli chcemy przypisać więcej niż jedną właściwość do selektora, robimy to w ten sposób:

Proste? Proste! :) Za chwilę przejdziemy do zadań, ale przedtem musimy wyjaśnić jeszcze jedną rzecz.

3. CSS a SCSS

Pisanie CSS w przypadku większych stron może być żmudne. Z tego powodu społeczność programistów udostępniła różne narzędzia służące do uproszczenia tej czynności. Jedną z najważniejszych grup takich narzędzi są preprocesory, które rozbudowują składnię CSS o nowe możliwości. W tym Wyzwaniu użyjemy preprocesora o nazwie SCSS, ale wykorzystamy tylko kilka z dodatkowych opcji, które zapewnia. Jeżeli w przyszłości zdecydujesz się pogłębiać swoją wiedzę programistyczną, poznasz ich dużo więcej.

Aby pisać w SCSS, upewnij się, że w swoim Codepenie w “pudełku” na CSS widzisz to, co na obrazku poniżej:

Jeżeli tak nie jest, kliknij ikonę koła zębatego:

a następnie z listy preprocesorów wybierz SCSS:

Na końcu kliknij “Save & close”.

Zadanie 1

Zacznijmy od magii preprocesora! SCSS umożliwia nam używanie w kodzie CSS zmiennych. Mówiąc najprościej, zmienna to pudełko, w którym przechowujemy jakąś wartość. Później możemy odwołać się do tej wartości, umieszczając w kodzie zmienną.

Jak zmienne mogą ułatwić nam życie?

Wyobraź sobie, że wiodącym kolorem strony, którą kodujesz, ma być czerwony. Ta barwa ma być używana w wielu miejscach: na linkach, przyciskach, obramowaniach, jako tło niektórych elementów... Lista może być naprawdę pokaźna. Bez zmiennych trzeba byłoby z osobna nadać kolor czerwony każdemu z tych elementów, a gdyby była później konieczność zmiany czerwonego na niebieski, wymagałoby to zmiany koloru we wszystkich tych miejscach. A gdyby kolorów było jeszcze więcej...? Używając zmiennych, daną wartość deklarujemy tylko raz. Gdy później chcemy ją zmodyfikować, wystarczy to zrobić w jednym miejscu.

Stwórzmy sobie teraz kilka zmiennych dla naszego projektu.

Wszystkie zmienne będziemy trzymać na samej górze naszego kodu CSS. W “pudełku” CSS w swoim Codepenie wklej następujący kod:

Tak właśnie wyglądają zmienne. Zmiennym możemy nadawać dowolne nazwy.

Pod zmiennymi umieść następujący kod:

Zwróć uwagę na to, jak zmienił się podgląd w edytorze. Przyjrzyj się też, jak działają zmienne: w selektorze body, html wykorzystaliśmy zmienną $color-text, więc tekst na stronie przybrał kolor przypisany do tej zmiennej (#444444).

Czas na Twoje działanie: wybierz kolor, który będzie przewodnią barwą Twojej strony i umieść go w zmiennej $color-main (zastąp nim obecny kolor). Najprościej jest zrobić to, wchodząc na stronę Flat UI Colors, następnie wybierając paletę kolorystyczną, która Ci się podoba, a na końcu klikając na kolor, którego chcesz użyć. Jego wartość automatycznie skopiuje się do Twojego schowka, więc wystarczy tylko wkleić ją w odpowiednim miejscu w kodzie.

Jeżeli w podglądzie zobaczysz, że link w sekcji “Splash” zmienił kolor na ten, który wybrałaś/wybrałeś, zadanie zostało wykonane prawidłowo :)

Zadanie 2

Mamy już kilka zmiennych w kodzie. Wykorzystamy je już niedługo, na razie jednak dodajmy nieco życia sekcji “Splash”. Tuż pod kodem z poprzedniego zadania wklej następujący fragment:

Zaczniemy od zmiany zdjęcia w tle sekcji.

1. Znajdź darmowe zdjęcie, które Ci się podoba, na stronie https://www.pexels.com. Kliknij w jego miniaturkę.
2. Kliknij strzałkę na przycisku “Free Download” i wybierz rozmiar “Large”, a potem kliknij “Download”.
3. Masz już obrazek na dysku. Teraz należy go wrzucić na serwer, by można było go użyć na stronie. W tym celu wejdź na https://postimages.org/ i kliknij “Wybierz zdjęcia”, aby wybrać obrazek z dysku. Kiedy zdjęcie załaduje się poprawnie, skopiuj jego adres z okienka "Bezpośredni odnośnik".
4. Wklej go w swoim kodzie CSS, zastępując nim obecny obrazek we właściwości background-image.

Jeżeli zdjęcie w podglądzie zmieniło się, to zadanie zostało wykonane poprawnie.

Dla chętnych: poczytaj tutaj o właściwości background-position i spróbuj zmienić jej wartość w swoim kodzie.

Zadanie 3

Wszystko bardzo fajnie, tylko... sekcja “Splash” nie wygląda zbyt imponująco. Jest za mała! Aby zmienić jej wysokość, dodaj w jej kodzie CSS właściwość height. Jeżeli chcesz, żeby sekcja zajmowała całą wysokość ekranu, ustaw wartość tej właściwości na 100vh. Możesz też zdefiniować wysokość w pikselach, np. 500px, lub w procentach (np. 40%). Poeksperymentuj i dobierz taką wysokość sekcji “Splash”, która podoba Ci się najbardziej.

Aby zobaczyć swoją stronę w całej okazałości, kliknij "Change View" w górnej belce edytora i przełącz się na "Full Page".

Później możesz wrócić do edytora, klikając "Editor View".

Dla chętnych: poeksperymentuj z właściwością margin elementów znajdujących się w sekcji “Splash” i sprawdź, jak działa ta właściwość. Przydatne informacje znajdziesz tutaj: https://cssreference.io/property/margin/.

Zadanie 4

W tym zadaniu ostylujemy tekst w sekcji “Splash”. W kodzie CSS (zaczynając od nowej linii) wstaw następujący fragment:

Poświęć chwilę na porównanie tego kodu CSS z kodem HTML, który już masz. Czy pamiętasz, który element HTML miał klasę main-title? Czy widzisz odwołanie do tego elementu w kodzie CSS? Zrozumienie zależności między HTML i CSS jest podstawą sprawnego posługiwania się oboma językami.

Zadania dla Ciebie:

• Wybierz kolory dla main-title i main-subtitle i wstaw odpowiednie właściwości w kodzie CSS tych elementów. Możesz użyć zmiennych lub po prostu kodu koloru. Tak jak poprzednio, możesz użyć palety z Flat UI Colors.
• Zmień rozmiary czcionek obu elementów (za pomocą właściwości font-size). Użyj jednostki px (czyli pikseli). Przykładowo, rozmiar czcionki może wynosić 22px. Nie wahaj się używać większych wartości - niech główne hasło się wyróżnia!
• Znajdź inne ciekawe efekty tekstu na tej stronie: https://cssreference.io/typography/ i użyj ich w swoim kodzie CSS w selektorach .main-title i .main-subtitle.

Dla chętnych: poczytaj tutaj o właściwości font-weight i o tym, jakie wartości może przyjmować.

Zadanie 5

Ostatnie zadanie na dzisiaj – stylowanie linku w sekcji “Splash”! W naszym przykładzie sprawimy, że będzie on wyglądał jak przycisk. Od Ciebie zależy, czy zachowasz jego wygląd, czy zmodyfikujesz go według własnego pomysłu.

W nowej linii pliku CSS wstaw następujący kod:

Parametr :hover oznacza wygląd elementu, na który najedziesz kursowem myszy. Zwróć uwagę na właściwość background: darken($color-main, 3%); w kodzie CSS. Co stanie się, jeżeli zamienisz słowo darken na lighten albo gdy zmienisz wartość procentową i najedziesz kursorem na przycisk w podglądzie?

Twoim zadaniem jest ostylowanie przycisku według własnych preferencji. Przydatne efekty możesz znaleźć tutaj: https://cssreference.io/typography/, https://cssreference.io/property/background-color/, https://cssreference.io/property/box-shadow/, https://cssreference.io/property/border-radius/. Wielkością przycisku manipulujesz, zmieniając wartości właściwości padding.

Spróbuj nadać różne efekty na przycisk "w stanie spoczynku" i na :hover i sprawdzaj, co się dzieje, gdy najeżdżasz kursorem na button w podglądzie.

Wykaż się kreatywnością :)

Nie zapomnij zapisać swojej pracy, klikając button Save w editorze.

Powodzenia!