Etap 3: Czcionki i ikonki

To już trzecia część wyzwania Zacznij kodować z Kodillą – czas szybko leci! Po pierwszych dwóch etapach wiesz już całkiem dużo na temat HTML i CSS oraz masz ostylowaną pierwszą sekcję strony. Przykładowy efekt:

Dzisiaj nadasz swojej stronie jeszcze więcej charakteru poprzez dobór odpowiednich czcionek, a także wykorzystasz dotychczasową wiedzę do samodzielnego ostylowania kolejnej sekcji.

1. Czcionki – z czym to się je?

Kiedyś było prosto. Podstawową czcionką (lub, z angielskiego, fontem) na stronach internetowych był Times New Roman (taki jak w większości edytorów tekstu typu Word), a szczytem szaleństwa była zmiana fonta na Arial. Te czasy już za nami – dziś mamy do wyboru ogromne bogactwo darmowych i płatnych czcionek, a typografia (czyli właściwy dobór czcionek i układ tekstu) stała się jednym z najważniejszych elementów dobrych projektów graficznych.

W wyzwaniu wykorzystamy najbardziej znaną kolekcję darmowych czcionek, gotowych do użycia na stronach internetowych: Google Fonts (https://fonts.google.com/).

W przykładzie wybierzemy dwa fonty: jeden dla nagłówków, drugi dla reszty tekstu. Ty oczywiście możesz w swoim projekcie użyć większej liczby krojów czcionek, ale zalecamy umiar – w typografii mniej znaczy więcej :)

Zadanie 1

1. Wejdź na stronę Google Fonts (https://fonts.google.com/) i wybierz kroje czcionek dla swojej strony (przynajmniej dwa). Jeżeli nie możesz się zdecydować, przejrzyj gotowe zestawienia tutaj:
   • https://www.reliablepsd.com/ultimate-google-font-pairings/
   • https://fontpair.co/
   • https://www.garettcreative.com/21-google-fonts-combinations-for-websites-brands/
   • https://www.typewolf.com/google-fonts
2. Następnie kliknij ikonę plusa przy każdej z wybranych czcionek:
3. Kliknij na ten pasek u dołu ekranu, aby otworzyć okno konfiguracji czcionek:
4. W oknie konfiguracji kliknij “Customize”. Dla każdej czcionki wybierz wagi (grubości), których chcesz użyć na stronie. Na dole tego okna, w sekcji “Languages”, zaznacz również opcję “Latin Extended”, jeżeli jest dostępna. Służy ona do tego, by czcionka poprawnie obsługiwała polskie znaki.
5. Kiedy już wybierzesz wagi czcionek, w oknie konfiguracji kliknij “Embed” (tuż obok “Customize”). W sekcji “Embed Font” wybierz opcję “@IMPORT” oraz zaznacz i skopiuj treść pokazaną na obrazku poniżej (znajdującą się pomiędzy znacznikami <style></style>). Oczywiście ta treść będzie się różnić w zależności od wybranych czcionek:
6. Przejdź do swojego edytora Codepen i wklej skopiowaną treść na samej górze pliku CSS, jeszcze przed zmiennymi.
7. W pliku CSS utwórz zmienne dla swoich czcionek: z okna konfiguracji na stronie Google Fonts skopiuj wartości font-family... ...i umieść je w zmiennych:
8. I to wszystko! Teraz możesz używać swoich czcionek, nadając selektorom w CSS odpowiednie wartości font-family, na przykład: font-family: $font-header;

Zadanie 2

Użyj zmiennych, aby strona wykorzystywała wybrane przez Ciebie czcionki.

Rada: aby sprawić, by któraś czcionka była używana przez wszystkie elementy na stronie, nadaj właściwość font-family na selektor body, html. Później już konkrentym elementom (np. .main-title, .main-subtitle) możesz nadawać ich własne font-family.

A co z wagami czcionek, które wybraliśmy podczas konfiguracji? Możesz użyć ich jako wartości właściwości font-weight, np. font-weight: 600;, w zależności od tego, jakie wagi zostały wybrane.

Jeżeli czcionki poszczególnych elementów zmienią się na te wybrane przez Ciebie, zadanie zostało wykonane prawidłowo :)

Uwaga: czasem czcionka może świetnie wyglądać na Google Fonts, ale na Twojej stronie już niekoniecznie. Nie zniechęcaj się tym, tylko eksperymentuj z różnymi krojami, aby znaleźć te właściwe. Może być też konieczne dostosowanie właściwości font-size lub letter-spacing (wyrażonej w pikselach), aby czcionka była czytelna.

2. Szybka powtórka: stylowanie tytułów sekcji

Wiesz już tyle o CSS, że zadania w tym module nie powinny sprawić Ci problemu :)

Kiedy zerkniesz do kodu HTML, zobaczysz, że tytuły poszczególnych sekcji (pod sekcją “Splash”) mają klasę section-title. Wykorzystamy ją teraz do nadania tytułom odpowiednich styli.

Zadanie 3

W kodzie CSS, w nowej linii, stwórz selektor dla klasy section-title. Czy pamiętasz, jak to się robi? Najpierw w CSS wpisujesz nazwę klasy, którą chcesz ostylować (poprzedzoną kropką). Później wciskasz spację, tworzysz parę nawiasów klamrowych, a wewnątrz nawiasów umieszczasz właściwości.

Dodaj temu selektorowi następujące style:

• position: relative;
• margin: 0 0 60px 0;
• text-align: center;

Następnie, już samodzielnie:

• zdefiniuj kolor tego elementu
• zdefiniuj jego czcionkę
• zdefiniuj wagę czcionki
• jeżeli chcesz, nadaj nagłówkom jeszcze inne efekty, które już znasz

Zadanie 4

Dodamy teraz niewielką dekorację do naszych nagłówków. W naszym przykładzie będzie to niewielka pozioma linia pod nagłówkiem:

W nowej linii CSS wpisz następujący kod:

Nie modyfikuj ani nie usuwaj właściwości position, display ani content tego elementu. Są one niezbędne do tego, by w ogóle wyświetlił się on na stronie.

Twoim zadaniem będzie modyfikacja tego elementu dekoracyjnego zgodnie z własnymi preferencjami. Co możesz zmienić:

• width (szerokość)
• height (wysokość)
• background-color
• bottom
• margin-left (aby dekoracja była wyśrodkowana w stosunku do tytułu sekcji, wartość tej właściwości powinna być równa wartości właściwości width podzielonej przez 2 i poprzedzona znakiem minus, tak jak w przykładzie)

Zachęcamy do eksperymentów!

Dla chętnych: sprawdź, co się stanie, gdy elementowi dekoracyjnemu usuniesz background-color, ale za to zamiast content: ''; użyjesz np. content: '***';.

3. Szybka powtórka: stylowanie sekcji “About”

Dokończymy teraz stylowanie sekcji “About”. W przykładzie nadamy jej kolor tła i margines dla tekstu, ale nie wahaj się użyć innych efektów, jeżeli tylko masz na to ochotę.

Zadanie 5

W nowej linii w CSS stwórz selektor .about. Dodaj mu background-color o wartości $color-background. Jeżeli chcesz, wróć do tej zmiennej i zmodyfikuj jej wartość (przypisany do niej kolor).

Następnie zerknij do HTML i przypomnij sobie, jaką klasę ma akapit tekstu (<p>) w sekcji “About”. Stwórz dla niego selektor w CSS i nadaj mu margin równy 36px 0 0 0;. Możesz też zmienić kolor czcionki (color) tego elementu, lub inne właściwości - co tylko podpowie Ci wyobraźnia.

4. Ikonki, czyli FontAwesome w praktyce

Ikony na stronach WWW, podobnie jak czcionki, zyskały w ostatnich latach na znaczeniu i popularności. Za pomocą ikon możemy w łatwy sposób przyciągnąć uwagę użytkownika oraz wzbogacić nasz przekaz tekstowy o warstwę wizualną.

W Wyzwaniu używamy zestawu czcionek o nazwie FontAwesome, który jest prosty i przyjemny w implementacji. Wejdź na stronę https://fontawesome.com/icons, aby zobaczyć dostępne ikony.

Następnie w swoim edytorze Codepen kliknij ikonę koła zębatego w “pudełku” CSS i upewnij się, że FontAwesome jest podpięty do Twojego projektu dokładnie w ten sposób:

Zadanie 6

Wreszcie przyszedł czas na dodanie nieco różnorodności do kolejnej sekcji! Jak pamiętasz, w sekcji “Features” umieściliśmy trzy “pudełka“ z ikoną, tytułem i opisem.

1. W HTML sekcji “Features”, jeżeli potrzeba, dopracuj treści – niech każde “pudełko” ma inny tytuł i opis.
2. Na stronie https://fontawesome.com/icons wyszukaj ikony pasujące do treści każdego z “pudełek“. Na tej stronie ikony w jasnoszarym kolorze dostępne są tylko dla wersji premium, więc będą interesować nas tylko ciemnoszare, darmowe ikony.
3. Jak już wiesz, aby wyświetlić ikonę na stronie, potrzebujemy tagu <i> z odpowiednią klasą. Aby uzyskać tag dla danej ikony, kliknij ją, a później wstaw zaznaczony na obrazku element do swojego HTML:

Twoim zadaniem jest podmiana ikon w kodzie HTML na takie, jakie wybrałaś/wybrałeś.

Zadanie 7

Mamy już całą treść “pudełek” - ikony, tytuły i opisy. Czas je teraz porządnie ułożyć i dokończyć stylowanie. Zerknijmy do HTML – wszystkie “pudełka” znajdują się w elemencie o klasie features-wrapper. Stwórz selektor dla tej klasy w swoim pliku CSS i daj mu tylko jedną właściwość: display: flex;.

W kolejnej linii CSS wklej:

Mamy to! “Pudełka” są już w jednej linii.

Zadanie 8

Potrzebnych nam jest jeszcze kilka styli, aby nadać tej sekcji ostateczny sznyt. Zacznijmy od stylowania ikonek. Potrzebny nam będzie do tego selektor .feature i – dodaj go do swojego pliku CSS i nadaj mu następujące style:

• width: 100px;
• height: 100px;
• line-height: 100px;

Następnie, już samodzielnie:

• zdefiniuj kolor (color) tego elementu. Jeżeli chcesz, by był biały, użyj wartości #ffffff;
• zdefiniuj jego font-size (wyrażony w px)
• zdefiniuj jego background-color. Możesz ustawić go na główny kolor Twojej strony.
• zdefiniuj jego border-radius, jeżeli chcesz zaokrąglić brzegi elementu. Możesz użyć wartości w pikselach lub procentach. border-radius: 50%; sprawi, że element stanie się kołem, pod warunkiem, że jego width i height są identyczne (czyli pod warunkiem, że jest kwadratem)
• dodaj dowolne inne style według swojej fantazji. Może Twoje ikonki będą miały białe tło, ale za to kolorową obwódkę? Może zechcesz dodać im np. cień?

Dla chętnych: zmodyfikuj wartości width i height ikonek i sprawdź, co się stanie. Pamiętaj, że wartość line-height musi być równa wartości height, żeby ikonki były wycentrowane w pionie.

Zadanie 9

Ostylujemy teraz tytuły “pudełek”. Zerknij do HTML i sprawdź, jaką klasę mają te elementy. Utwórz odpowiedni selektor w CSS i nadaj mu margin: 24px 0 0 0;. Resztę stylów – czcionkę, kolor, wagę, itp. dodaj samodzielnie.

Zadanie 10

Ostatnie zadanie na dzisiaj – opisy “pudełek”! Podobnie jak poprzednio, sprawdź w HTML, jaką klasę mają opisy i utwórz dla nich selektor w CSS. Nadaj mu margin: 24px 0 0 0; oraz padding: 0 24px;. Resztę właściwości pozostawiamy Twojej fantazji!

Pamiętaj, aby zapisać swoją pracę, klikając button Save w editorze.

W kolejnej części wyzwania dodamy i ostylujemy kolejne elementy na stronie.

Powodzenia!