Przygotuj swoją własną TO-DO LISTĘ

Co stworzymy w tym Wyzwaniu?

Celem jest napisanie mini-strony internetowej. Niech Cię nie zwiedzie jej prostota – będzie to profesjonalnie zakodowany projekt, znakomity pierwszy krok w świat web developmentu! Efekt może być na przykład taki:

Strona będzie w pełni funkcjonalna i użyteczna. Na pewno już nie możesz się doczekać, by samodzienie zakodować taki projekt – przechodzimy więc do rzeczy! Najpierw opowiemy sobie pokrótce, jak zbudowane są strony internetowe i gdzie możemy je tworzyć.

1. Jak działa strona internetowa?

Każda strona internetowa składa się z plików o rozszerzeniu HTML. W tych plikach znajduje się struktura i treść danej witryny. Oprócz tego, strony mogą używać plików CSS (odpowiedzialnych za nadawanie wyglądu elementom HTML) i JavaScript (do tworzenia dynamicznych efektów na stronach). W tym Wyzwaniu skupimy się głównie na dwóch pierwszych typach plików (HTML i CSS). Dodamy też krótki kod JavaScirpt, który odpowie za funkcjonowanie aplikacji.

2. Gdzie można tworzyć strony?

Profesjonalni programiści używają w swojej pracy zaawansowanych edytorów kodu. Wielu z nich jednak, gdy chce szybko sprawdzić jakieś rozwiązanie lub przesłać komuś kawałek kodu, używa edytorów dostępnych w internecie. Zaletą tego rozwiązania jest to, że nie trzeba instalować na komputerze żadnych dodatkowych programów (wszystko dzieje się z poziomu przeglądarki) oraz nie ma konieczności żmudnej konfiguracji tzw. środowiska developerskiego.

W czasie całego Wyzwania będziemy używać jednego z takich edytorów: Codepen. Codepen udostępnia "piaskownice" developerskie (ang. pens), czyli gotowe do użytku środowisko, gdzie możemy od razu zacząć pisać nasz kod.

Przygotowanie do kodowania

Aby móc zapisać swoją pracę, będzie Ci potrzebne darmowe konto na Codepen – możesz założyć je tutaj. Dzięki temu w Twoim profilu będą zapisywać się wszystkie stworzone przez Ciebie projekty.

Po założeniu konta i zalogowaniu się do Codepen, stwórz nowy projekt – wystarczy że wejdziesz pod adres https://codepen.io/pen/.

Na razie pen jest pusty, ale nie przejmuj się – tak ma być.

Witaj w edytorze! Co tu widzimy?

1. Nazwa Twojego pena – możesz ją zmienić, klikając na ikonkę ołówka tuż obok.
2. "Pudełka", w których wpisujesz swój kod. Jak widzisz, mamy osobne "pudełko" na każdy plik: HTML, CSS i JS (JavaScript).
3. Podgląd – tu wyświetlają się efekty Twojej pracy. Na razie podgląd jest pusty, ale zaraz to zmienimy :)

Dodatkowo, w górnej belce znajduje się bardzo przydatny przycisk Save, zapisujący aktualny stan projektu. Nie zapomnij korzystać z niego w trakcie pracy :)

W każdej chwili możesz zmienić układ edytora, klikając "Change View" w górnym pasku i wybierając inny:

Zanim przejdziemy dalej, musimy zmienić jedno ustawienie – kliknij ikonę koła zębatego przy nagłówku "pudełka" CSS. Otworzy się okno ustawień, otwarte na zakładce CSS. Zmień następujące ustawienia:

1. CSS Preprocessor: SCSS
2. CSS Base: Normalize
3. Vendor Prefixes: Autoprefixer

To wszystko. Możesz zamknąć ustawienia za pomocą zielonego guzika "Close" u góry. Możemy teraz zacząć pracować nad naszym projektem!

HTML, czyli treść

Kod HTML odpowiada za strukturę i treść strony. Oznacza to, że właśnie za pomocą HTML informujemy przeglądarkę, które elementy na naszej stronie są akapitami tekstu, które nagłówkami, a które na przykład obrazkami. W kodzie HTML znajduje się też sama treść strony, czyli to, co możemy na niej przeczytać.

Zadanie 1

Pierwszym zadaniem będzie wklejenie poniższego kodu do "pudełka" HTML w swoim penie:

Przyjrzyjmy się temu fragmentowi kodu. Elementy otoczone ostrymi nawiasami to tak zwane tagi. Są to podstawowe bloki budujące kod HTML. W naszym kodzie mamy kilka typów tagów: div, h2 czy p. Każdy z nich ma swoje znaczenie i informuje przeglądarkę, jaki typ treści jest w nich zawarty. Przyjrzyj się, jak zbudowany jest tag:

W powyższym przykładzie mamy:

• Tag otwierający h1, czyli nagłówek (header) stopnia pierwszego (największy). W HTML mamy sześć stopni nagłówków, od h1 do h6. Tag otoczony jest ostrymi nawiasami.
• Treść elementu – w tym przypadku "Hello World". Treść znajduje się między tagiem otwierającym a zamykającym.
• Tag zamykający h1. Wygląda tak samo jak tag otwierający, z tą różnicą, że po pierwszym ostrym nawiasie ma znak / (slash).

Dodatkowo, tag może mieć atrybuty. W tym przypadku nadaliśmy tagowi klasę "main-title". Do klas wrócimy już za chwilę.

Spójrz, jak po wklejeniu kodu zmienił się podgląd w edytorze.

Przeglądarka nadaje domyślny wygląd dla elementów kodu HTML, co możesz zobaczyć w podglądzie projektu w moment po wstawieniu kodu HTML. Nie wygląda to może pięknie, ale od razu widzimy, które teksty są nagłówkami i że zadania do zrobienia są na liście wypunktowanej.

Zadanie 2

Zmodyfikujmy teraz nieco nasz HTML. Nie zmieniaj niczego, co znajduje się pomiędzy znakami < oraz >.

Jeśli w liście chcesz dodać kolejny akapit, najlepiej zrobić to dodając nową linię za znacznikiem </p>, i wstawiając do niej taki kod:

<p>To jest kolejny akapit</p>

W podobny sposób możesz dodawać kolejne zadania – wystarczy, że pod ostatnim (czyli przed znacznikiem </ul>) dodasz nową linię, a w niej wstawisz kod:

<li>Kolejne zadanie</li>

Dostosuj teraz całą treść swojego planera jak tylko chcesz!

CSS, czyli wygląd

Teraz, kiedy masz już gotową treść swojej aplikacji do zadań, możemy dodać kod odpowiedzialny za jej wygląd! W tym Wyzwaniu postąpimy jak profesjonaliści i użyjemy dodatkowych możliwości, które daje nam preprocesor Sass (czy pamiętasz, że wybraliśmy go w opcjach "pudełka" CSS?).

W "pudełku" o nazwie CSS (SCSS) wstaw następujący kod:

Widzisz zapewne, że kolor tła naszej strony zmienił się na jasnoszary, barwę zmieniła również czcionka. Co wydarzyło się w kodzie CSS?

Na samej górze kodu zdefiniowaliśmy zmienne. To jedna z ciekawszych funkcji preprocesora Sass. Zmienną możesz wyobrazić sobie jako pudełko z etykietą, które przechowuje pewną wartość. Gdy potem chcemy użyć tej wartości w kodzie, podajemy tylko nazwę etykiety. Przyjrzymy się, jak zbudowana jest zmienna:

$color-background: #dcdde1;

$color-background to nazwa zmiennej, czyli etykieta pudełka. Mogłaby ona być dowolna, my wybraliśmy właśnie taką. Dalej następuje dwukropek, po nim wartość zmiennej. W naszym przypadku jest to jasnoszary kolor, który w tak zwanym zapisie heksadecymalnym ma właśnie postać#dcdde1. Na końcu zmiennej stawiamy średnik.

Analogicznie zbudowana jest druga zmienna.

Zmienne zawsze umieszczamy na początku kodu CSS. Przeglądarka czyta kod z góry do dołu, więc gdybyśmy najpierw chcieli użyć zmiennej, a dopiero potem ją zdefiniować, otrzymalibyśmy błąd.

Pod zmiennymi umieściliśmy nasz pierwszy selektor (body) i jego właściwości. Przyjrzyjmy im się bliżej.

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:

Spójrz na kod CSS w swoim edytorze. Przeanalizujmy go linijka po linijce:

1. body to selektor, którego będzie dotyczyć styl. Nie widzisz go w kodzie HTML, gdyż Codepen dodaje go automatycznie i nie musimy go sami deklarować. Po nazwie selektora otwieramy nawias klamrowy.
2. background-color: $color-background; – właściwość background-color oznacza kolor tła elementu. Nadaliśmy mu wartość $color-background, czyli wykorzystaliśmy zdefiniowaną zmienną. Wskutek tego tło strony przybrało kolor jasnoszary.
3. color: $color-text; – color oznacza kolor czcionki. Podobnie jak wyżej, użyliśmy zmiennej, którą wcześniej przygotowaliśmy.
4. font-size: 16px; – font-size oznacza wielkość czcionki.
5. line-height: 24px; – line-height jest to interlinia, czyli światło pomiędzy linijkami tekstu.

Czy już rozumiesz, jak działają reguły CSS?

Pod selektorem body znajduje się selektor .wrapper. Jeżeli przyjrzysz się kodowi HTML, zauważysz, że mamy w nim element <div class="wrapper">. Selektor .wrapper w CSS odnosi się właśnie do niego. Czy już widzisz zależność? Jeżeli elementowi HTML nadamy jakąś klasę, możemy odnieść się do niej w CSS używając jej nazwy poprzedzonej kropką, i w ten sposób ostylować ten element. W tym przypadku sprawiliśmy, że wszystkie pozostałe elementy wewnątrz elementu .wrapper są wyśrodkowane w pionie i w poziomie, co wygląda dużo estetyczniej.

Stylujemy listę

Mamy już dodane pewne podstawowe style, ale to jeszcze nie wszystko. Zajmijmy się teraz wyglądem samej listy!

Zadanie 3

Pod zmienną $color-text umieść kolejną zmienną, $color-letter. Jej wartość powinna wynosić #f5f6fa. Jest to delikatnie złamany kolor biały, który wykorzystamy jako tło listy. Mając gotową zmienną, na samym końcu swojego kodu CSS wklej następujący fragment:

W ten sposób nadaliśmy liście kolor tła i cień. Na tym etapie nie musisz rozumieć wszystkiego, co dzieje się w tym kodzie (chyba, że zechcesz zgłębić wiedzę na własną rękę). Zachęcamy Cię jednak do próby modyfikacji wartości width: 600px; (szerokość listy) i padding: 48px; (odległość między krawędzią listy a treścią). Spróbuj zmienić liczby przy tych właściwościach i sprawdź, co się stanie!

Stylujemy listę

Czas na nadanie szyku naszej liście zadań!

Zadanie 4

Teraz dodamy do naszego CSS kod, który nada wygląd i efekty wizualne, wywołane po najechaniu myszą. Na końcu kodu CSS wklej:

W CSS możemy dodawać komentarze (które opisują działanie poszczególnych fragmentów kodu. Komentarze znajdują się pomiędzy znacznikami /* treść komentarza */ i nie wpływają w żaden sposób na działanie programu. Pomagają jedynie w opisaniu i zrozumieniu poszczególnych partii kodu.

Wklejony przez Ciebie fragment jest już bardziej skomplikowany, ale nie przejmuj się, nie musisz rozumieć go w całości. Umieściliśmy w nim jednak kilka komentarzy, które pomogą zrozumieć Ci za co dokładnie odpowiada dany element CSS. Omówimy kilka z nich:

Jest to fragment kodu odpowiadający za podstawowy wygląd listy. Niektóre z jego właściwości możesz spokojnie modyfikować i patrzeć, co się stanie:

1. cursor odpowiada za zmianę wyglądu kursora myszki po najechaniu na elementy listy. My używamy pointera, ale możesz wybrać inny, który Ci bardziej odpowiada. Skorzystaj z aplikacji, która pomoże Ci wybrać: Kursory CSS.
2. background to kolor tła elementu z listy,
3. height to wysokość,
4. font-size zmieni wielkość czcionki.

Zmieniając wartość backgroundw kodzie powyżej możesz zauważyć, że zmienia się jedynie co drugie tło na Twojej liście. Dzieje się tak dlatego, że w kodzie CSS znajduje się ten fragment:

Powoduje on, że każdy nieparzysty element listy będzie miał kolor zdefiniowany w background (co powoduje efekt zebry). Śmiało, możesz się pobawić i wybrać swój ulubiony kolor.

Zmieniaj te wartości, aż uzyskasz satysfakcjonujący Cię efekt!

Zwróć również uwagę, że po najechaniu myszą na dowolny element listy zmienia ona swój kolor. Do tego efektu wykorzystaliśmy selektor :hover w tym fragmencie kodu:

Wartość background odpowiada za kolor, który zostaje nadany elementom listy po najechaniu na nie kursorem. Jeżeli chcesz, możesz go zmienić. Selektor :hover jest używany wtedy, gdy użytkownik wchodzi w interakcję z elementem poprzez wskazanie go kursorem.

Stylujemy nagłówek, input i button

W kodzie, który wrzuciliśmy, znajdują się również właściwości deifiniujące wygląd nagłówka i pola "Input" (w którym będziemy mogli wpisywać kolejne zadania do wykonania), oraz przycisku "Dodaj". Teraz je omówimy. Zacznijmy od nagłówka:

Możesz swobodnie dobrać kolor tła nagłówka, zmieniając wartość background-color. Dodatkowo, proponujemy pobawić się właściwością color, która zmienia barwę tekstu "Lista rzeczy do zrobienia". Zachęcamy też do eksperymentów z padding.

W nagłówku (header) spróbuj też dodać border-radius: i ustawić wartość np. na 20px;. Spowoduje to zaokrąglenie rogów Twojego elementu. Wypróbuj też inne wartości.

Te reguły występują również we fragmencie kodu definiującym wygląd pola "Input":

Możesz edytować jej wartość. Dodatkowo, masz szansę ustawić inną wielkość czcionki w polu "Input", zmieniając wartość właściwości font-size, oraz wysokość tego elementu poprzez zmianę w height.

Pozostał jeszcze guzik "Dodaj", za który odpowiada ten fragment Twojego CSS:

Tak jak w poprzednich elementach, możesz dostosować tutaj właściwości:

1. background – kolor tła Twojego guzika,
2. color – kolor tekstu "Dodaj" znajdującego się na guziku,
3. font-size – wielkość liter,
4. coursor – wygląd kursora, który wyświetli się po najechaniu myszą.

Eksperymentuj ze wszystkimi właściwościami tak, żeby stworzyć aplikację, która będzie Ci się podobać.

Zmieniamy kolory!

Przechodzimy teraz do naprawdę kreatywnej części Wyzwania, czyli nadania liście własnego wyglądu i charakteru! Zaczniemy od zmiany kolorów.

Zadanie 6

Przejdź na samą górę kodu CSS, tam, gdzie mamy zdefiniowane zmienne. Twoim zadaniem będzie podmiana obecnych kodów kolorów. Ale skąd wziąć takie kody? 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.

Eksperymentuj z kolorami, aż Twoja lista będzie wyglądać tak, jak tego chcesz!

JavaScript, czyli funkcjonalność

Jeżeli Twoja lista wygląda już bardzo zachęcająco, dodamy do niej odrobinę funkcjonalności. JavaScript (JS) to język programowania, który dodaje interaktywność do Twojej strony WWW. Np. wywołuje odpowiednie funkcje po kliknięciu w guziki, albo zmienia, przestawia lub dodaje jakieś elementy po wykonaniu odpowiedniej i zdefiniowanej w nim akcji.

Dodaj do pudełka podpisanego JS ten kod:

Nie będziemy tutaj szczegółowo go omawiać, bo to dłuższy temat (wszystkie meandry tego języka możesz poznać na naszych bootcampach Web Developer lub Front-end: React). Jednak tak jak w przypadku CSS, dodaliśmy tutaj komentarze, które znajdują się po znacznikach // i opisują działanie poszczególnych fragmentów kodu. Możesz spróbować rozszyfrować ich działanie na własną rękę.

BONUS: Typografia, czyli wybór czcionki

Kolejnym krokiem będzie zmiana kroju pisma w naszym projekcie. Obecnie widoczne są podstawowe, domyślne fonty, a możliwości jest przecież dużo więcej. Ostrzegamy – zabawa z czcionkami uzależnia!

Wykorzystamy najbardziej znaną kolekcję darmowych czcionek, gotowych do użycia na stronach internetowych: (Google Fonts).

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 7

1. Wejdź na stronę (Google Fonts) 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:

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

A co z wagami, 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.

Podsumowanie

Jeśli wszystko poszło dobrze, masz już gotową działającą aplikację do zarządzania zadaniami, w której możesz planować rzeczy do zrobienia oraz oznaczać te, które udało Ci się już skończyć.

Kliknij guzik "Change View" i wybierz "Full Page View". Dzięki temu, w adresie strony zmieni się fragment "/pen/" na "/full/", a Twój projekt wyświetli się na prawie całym oknie przeglądarki. U góry pozostanie tylko pasek tytułowy CodePena. Tak przygotowany adres strony jest gotowy do wysyłki.