Etap 5: Ożywiamy stronę!

To już ostatni etap wyzwania Zacznij kodować z Kodillą! Mamy nadzieje, że Wasze strony nabrały już pożądanych kształtów, kolorów i wymiarów :) Przykładowe rozwiązanie:

Na zakończenie wyzwania nadasz swojej stronie ostateczny, indywidualny rys oraz sprawisz, że stanie się nieco bardziej interaktywna. Moduł 6. tego etapu, dostosowanie strony do urządzeń mobilnych, jest przeznaczony dla chętnych, ale gorąco zachęcamy do zmierzenia się z nim.

Zaczynamy!

1. Rzut oka na całość

Zanim przejdziemy do zasadniczej części ostatniego etapu, poświęć chwilę, aby przyjrzeć się temu, co masz zrobione do tej pory. Obejrzyj swoją stronę w całej okazałości, klikając button "Change View", a potem "Full Page View" i upewnij się, że strona wygląda tak, jak tego chcesz. Czy wszystkie elementy są ostylowane? Czy nic się nie rozjeżdża?

Zadanie 1

Jeżeli jest taka potrzeba, dokończ stylowanie swojej strony. Możesz cofnąć się do poprzednich części Wyzwania po wskazówki.

Ponadto, jeżeli chcesz, możesz zmienić kolejność sekcji na stronie: w “pudełku” HTML po prostu zaznacz daną sekcję w całości, wytnij ją i wklej w innym miejscu. Zachowaj jednak sekcję “Splash” na pierwszej pozycji. Pamiętaj tylko, aby przez przypadek nie wkleić jednej sekcji w środku drugiej: nowa sekcja powinna zaczynać się pod tagiem zamykającym sekcji poprzedniej.

Wszystko zrobione? Idziemy dalej!

2. Dodajemy nawigację

Ostatnim elementem, który dodamy na naszej strony, będzie nawigacja w postaci poziomego paska na samej górze.

Zadanie 2

Nad sekcją “Splash”, na samym początku pliku HTML, dodaj tag <nav> z klasą navigation. Wewnątrz niego umieść <div> z klasą container. W środku tego diva wstaw tag <ul> (bez żadnej klasy), a w nim:

Przyjrzyj się tej strukturze. Mamy w niej znane Ci już tagi <li>, które otaczają tagi <a>. Jak pamiętasz, tagi <a> służą do tworzenia linków. W naszych linkach jako wartość atrybutu href podajemy identyfikatory naszych sekcji (poprzedzone znakiem #). Dzięki temu, po kliknięciu linka w nawigacji, przeniesiemy się od razu do danej sekcji.

Zadanie dla Ciebie: dostosuj podaną przykładową nawigację do swojej strony. Ułóż linki w odpowiedniej kolejności (takiej, w jakiej występują sekcje na Twojej stronie) i nadaj im odpowiednie nazwy.

Zadanie 3

Czas na stylowanie!

Przypomnij sobie, jaką klasę ma nasz tag <nav> i utwórz dla niego selektor w CSS. Nadaj mu background-color pasujący do szaty graficznej Twojej strony oraz padding, np. padding: 12px 0;. Za chwilę wrócimy do tego selektora i nadamy mu więcej stylów, ale najpierw zajmijmy się linkami.

1. Utwórz selektor .navigation ul i wyzeruj mu margines oraz padding (margin: 0; oraz padding: 0;).
2. Stwórz selektor .navigation ul li i spraw, by linki były wyświetlane w poziomie poprzez dodanie mu deklaracji display: inline-block.. Samodzielnie nadaj temu selektorowi margin-right, by odsunąć linki od siebie.
3. Utwórz selektor .navigation ul li a i wybierz style dla linków: czcionkę, rozmiar, kolor, wagę, itp. Nadaj także style dla .navigation ul li a:hover.
4. Wróć teraz do selektora .navigation. Poprzez ustawienie właściwości text-align na center lub right przesuń linki na środka lub na prawo. Jeżeli chcesz, by linki pozostały po lewej stronie, nie musisz nic zmieniać.
5. Jeżeli chcesz, aby nawigacja nie znikała z widoku gdy przesuwasz stronę, dodaj selektorowi .navigation: position: fixed;, width: 100%; oraz z-index: 9999;.

3. Fajny efekt niskim kosztem - animacja przejścia

Jedną z wielu ciekawych opcji wprowadzonych w CSS 3 (którym posługujemy się w tym Wyzwaniu) są animacje. Oferują one masę możliwości i można ich używać do tworzenia naprawdę zaawansowanych efektów, ale na razie stworzymy tylko jeden prosty efekt: animację przejścia linków i buttonów.

Zadanie 4

W pliku CSS dodaj do swojej kolekcji zmiennych jeszcze jedną: $transition: all 0.5s;. Jeżeli chcesz, możesz zmienić wartość 0.5s (czyli pół sekundy) na inną, np. 1s. Następnie do selektora .btn, do linków w nawigacji i do ikonek w sekcji "Contact" (.social-links li i .social-links li a) dodaj właściwość transition: $transition;.

Dla ambitnych: spraw, by ikony w sekcji "Features" animowały się w momencie najechania na nie kursorem. W jaki sposób? Przeczytaj tutaj na temat różnych transformacji (rotate, scale, itp.), stwórz selektor .feature i:hover i dodaj mu wybraną transformację. Następnie selektorowi .feature i dodaj stworzoną przed chwilą właściwość transition: $transition;, aby transformacja była płynna.

4. Dodajemy slider

Nawigacja jest na swoim miejscu? Świetnie! Zostawimy więc na moment HTML i CSS, aby przez chwilę pobawić się trzecim z najważniejszych narzędzi web developera – JavaScriptem (JS).

Nie będziemy tu wchodzić w szczegóły składni JS – moglibyśmy napisać o tym drugie, równie długie wyzwanie! Na tę chwilę musisz wiedzieć tyle, że JS umożliwia dodawane dynamicznych efektów do stron internetowych.

Podobnie jak w przypadku CSS, społeczność programistów udostępnia różne gotowe rozwiązania JS, zwane pluginami. Są to skrypty, które wystarczy podpiąć do swojej strony, by móc od razu z nich korzystać. W wyzwaniu użyjemy jednego z takich pluginów, by dodać slider (karuzelę) na naszą stronę. Na pewno wiele razy zdarzyło Ci się widzieć podobne rozwiązanie:

Zadanie 5

Pluginem, którego użyjemy, będzie Flickity (https://flickity.metafizzy.co/). Jest to czysto JavaScriptowy plugin, co oznacza, że nie musimy instalować oprócz niego żadnych dodatkowych skryptów ani bibliotek.

Aby podpiąć Flickity:

1. W swoim edytorze Codepen kliknij ikonę kółka zębatego obok “pudełka” CSS i w okienku wklej link do arkusza stylów Flickity: https://unpkg.com/flickity@2/dist/flickity.min.css: Kliknij Save & Close.
2. 2. Następnie liknij ikonę kółka zębatego obok “pudełka” JS i w okienku wklej link do samego skryptu Flickity: https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js:

   Ponownie kliknij Save & Close.

3. 3. W “pudełku” JS wklej:

4. Slider działa! Prawie wszystko gotowe – ostatnią rzeczą, którą musimy zrobić, to dopracowanie stylów karuzeli. Stwórz selektor .quote (najlepiej pod pozostałymi stylami dla tej sekcji w pliku CSS, żeby trzymać porządek w kodzie) i nadaj mu width: 100%; oraz padding: 0 72px;. Zrobione!
5. Jeżeli masz ochotę, możesz ostylować nawigację slidera (kropki pod slajdami i strzałki przewijania). Dla kropek użyj selektora .flickity-page-dots .dot: możesz zmienić im width, height, background-color i border-radius. Dla strzałek wykorzystaj selektor .flickity-button-icon. Aby zmienić jego kolor, użyj właściwości fill. Aby zmienić tło strzałki, zmodyfikuj wartość właściwości background-color selektora .flickity-button.

Dla ambitnych: zapoznaj się z dokumentacją Flickity (https://flickity.metafizzy.co/options.html) i zobacz, jakie inne opcje oferuje ten plugin. Spróbuj włączyć kilka z nich w swoim sliderze (np. autoplay, czyli automatycznie przesuwanie slajdów).

5. Płynne przewijanie do sekcji

Kolejnym popularnym efektem na stronach internetowych jest płynne przewijanie do odpowiednich sekcji na stronie po kliknięciu linka w nawigacji.

W "pudełku" JS w swoim edytorze Codepen wklej następujący kod:

Nie musisz go teraz dokładnie rozumieć - jeżeli zdecydujesz się podążać ścieżką web developera, JavaScript stanie się Twoim chlebem powszednim :) Przyjrzyj się jednak, jak wygląda JavaScript i czym różni się od poznanych Ci do tej pory języków HTML i CSS. Spróbuj znaleźć w kodzie JS nawiązania do stworzonych przez Ciebie elementów HTML i zastanowić się, do czego są wykorzystywane w tym skrypcie.

6.* Kompatybilność z urządzeniami mobilnymi

Już od jakiegoś czasu dostęp do internetu na urządzeniach mobilnych jest powszechny, a przeglądanie stron z telefonu lub tabletu stało się oczywistością. Z tego powodu każdy dobry web developer powinien wiedzieć, jak dostosowywać budowane przez siebie strony do mniejszych ekranów.

Istnieje wiele technik i podejść do tworzenia stron kompatybilnych z urządzeniami mobilnymi – jeżeli zdecydujesz się kontynuować naukę web developmentu, na pewno je poznasz. W wyzwaniu stworzymy podstawową kompatybilność za pomocą tak zwanych media queries.

Czym są media queries?

Najprościej rzecz ujmując, media queries to instrukcje warunkowe w CSS, mówiące przeglądarce na przykład: Jeżeli ekran jest węższy niż 768px, rozciągnij dany element na 100% szerokości okna.

Podstawowa struktura media queries wygląda następująco:

• Pisanie media query rozpoczynamy wstawieniem wyrażenia @media.
• Później definiujemy warunki, które muszą zostać spełnione, by reguły zawarte w media query zostały zastosowane. W powyższym przykładzie zdecydowaliśmy, że style mają działać w przedziale od 768px do 991px szerokości ekranu.
• Podobnie jak w CSS, tworzymy parę nawiasów klamrowych ({ }).
• Wewnątrz nawiasów tworzymy selektory CSS, których style chcemy zmodyfikować dla danych szerokości ekranu. W powyższym przykładzie zdecydowaliśmy, że wielkość czcionki elementu section-title na ekranach w zdefiniowanym zakresie (czyli 768-991px) ma wynosić 24px. Selektory wewnątrz media queries umieszczamy tak, jak zwykle w CSS - jeden pod drugim.

Może wydawać Ci się to skomplikowane, ale za chwilę zobaczysz, że media queries są proste i przyjazne w obsłudze. W media queries można używać jednego lub więcej warunków (np. tylko min-width, tylko max-width lub obu).

Wszystkie style, które dotychczas napisaliśmy, tworzone były z myślą o ekranach powyżej 992px szerokości. Dostosujemy teraz stronę do mniejszych rozdzielczości: telefonów i tabletów. Przyjmiemy, że style dla telefonów będą obejmować ekrany do 767px szerokości, a dla tabletów – od 768px do 991px.

Zacznijmy od stylów dla telefonów. Uruchom swoją stronę w trybie Full Page View (w edytorze: "Change View" > "Full Page View"), skopiuj jej adres i wklej go tutaj: http://responsiv.eu/, by obejrzeć symulację swojej strony na różnych urządzeniach.

Zadanie 6

Co można poprawić na najmniejszych rozdzielczościach? Na pewno warto sprawić, by “pudełka” w sekcji “Features” znajdowały się jedno pod drugim.

Na samym dole swojego pliku CSS stwórz swoje pierwsze media query:

W środku, pomiędzy nawiasami klamrowymi, dodaj znany Ci już selektor .features-wrapper i nadaj mu display: block;. Pod nim dodaj kolejny selektor, .feature, któremu z kolei nadaj flex: 0 0 100%; i max-width: 100%;. Jeżeli chcesz, możesz dodać też dolny margines o wybranej wartości (margin-bottom), by “pudełka” zachowywały odstęp od siebie.

Zadanie 7

Kolejnym elementem, który warto dostosować, jest galeria zdjęć. Wyświetlmy na telefonach dwa obrazki w rzędzie, żeby były większe i czytelniejsze.

Wewnątrz tego samego media query, co w poprzednim zadaniu, w kolejnej linii, dodaj selektor .gallery-item i nadaj mu style flex: 0 0 50%; oraz max-width: 50%;.

Jeżeli wolisz, by widoczny był jeden obrazek w rzędzie, w obu linijkach zmień 50% na 100%.

Jak widzisz, pisząc media queries, dodajemy selektorom tylko te właściwości, które chcemy zmodyfikować dla danej rozdzielczości. Jeżeli więc przykładowo kolor czcionki danego elementu ma być taki sam na wszystkich szerokościach ekranu, ustawiamy go tylko raz i nie powtarzamy go w media queries.

Zadanie 8

Obejrzyj swoją stronę dokładnie na symulacjach telefonów na http://responsiv.eu/. Zdecyduj, które jeszcze elementy wymagają dostosowania do małych ekranów i wprowadź odpowiednie zmiany w swoim kodzie.

Wskazówka: dobrą praktyką jest używanie na mniejszych ekranach większego rozmiaru czcionki i interlinii (line-height), by zwiększyć czytelność tekstu.

Jeżeli nie chcesz, by na telefonach nawigacja była przyklejona do górnej części ekranu, w media query zmień jej position z fixed na static.

Zadanie 9

Obejrzyj swoją stronę na symulacjach tabletów na http://responsiv.eu/. Jeżeli uznasz, że wymaga ona dostosowania do tych ekranów, pod poprzednim media query stwórz kolejne: @media (min-width: 768px) and (max-width: 991px) { } i wpisz w nim odpowiednie style.

Zadanie 10

Dostosowanie strony do małych ekranów to jedno – często potrzeba też poprawek dla większych rozdzielczości. http://responsiv.eu/ oferuje również symulację dużych ekranów – zerknij, jak wygląda na nich strona. Na pewno można byłoby nieco rozciągnąć wszerz całą naszą treść, by nie była tak ściśnięta na środku ekranu. W tym celu stwórz kolejne media query: @media (min-width: 1200px) { } (jeżeli chcesz, możesz wybrać inną szerokość ekranu). W środku dodaj selektor .container i nadaj mu max-width: 1140px.

Reszta będzie Twoim zadaniem - tak samo jak w przypadku małych ekranów, popracuj nad czytelnością strony na większych rozdzielczościach.

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

6. Podsumowanie

I oto ona – Twoja autorska strona. Gratulacje :) Nie zapomnij wrzucić linka do ukończonego projektu na naszej grupie na Facebooku :)

Mamy nadzieję, że udział w wyzwaniu rozbudził Twoje zaciekawienie sztuką web developmentu i zachęcił Cię do własnych poszukiwań. Jeżeli potrzebujesz wskazówek, gdzie szukać materiałów do nauki, nie wahaj się napisać do nas na grupie FB lub przez chat.

Powodzenia w dalszej drodze!