Zacznij kodować z Kodillą!

Etap 1: Hello World!

Witaj na pierwszym etapie wyzwania Zacznij Kodować z Kodillą! W ciągu następnych kilku dni postawisz swoje pierwsze kroki w świecie web developmentu i zobaczysz, jak właściwie robi się te internety. Celem całego wyzwania jest stworzenie prostej strony, składającej się z kilku sekcji. Poniżej znajdziesz kilka przykładowych efektów, które udało się uzyskać naszym koleżankom i kolegom z Kodilli (kliknij obrazek, aby powiększyć):

Jeżeli już nie możesz się doczekać, by samodzielnie stworzyć taką stronę, bez dalszych wstępów przechodzimy do konkretów :) Dziś w części teoretycznej dowiesz się, jak tak naprawdę działają i z czego składają się strony internetowe oraz jakich języków używamy do ich tworzenia. W części praktycznej natomiast przygotujesz sobie środowisko pracy i napiszesz swoje pierwsze linie kodu HTML.

Twoja strona może być poświęcona dowolnemu tematowi. Może to być Twoja strona-wizytówka, strona o ulubionym zwierzęciu, o Twoim hobby… Cokolwiek tylko przyjdzie Ci do głowy :)

Do dzieła!

1. Jak działa strona internetowa?

Większość z nas robi to wiele razy dziennie: siadamy przed komputerem (albo tabletem bądź smartfonem), uruchamiamy przeglądarkę internetową i otwieramy w niej stronę, którą chcemy odwiedzić.

Co dzieje się pod spodem?

Kiedy wpisujesz adres strony do paska w przeglądarce i naciskasz Enter, Twój komputer wysyła prośbę do serwera, na którym znajduje się żądana strona. Serwer przyjmuje żądanie i odsyła Twojemu komputerowi pliki strony, które następnie trafiają do Twojej przeglądarki i tam są wyświetlane.

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).

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.

3. Przygotowanie do kodowania

Ponieważ nasz pen będzie nam potrzebny przez cały czas trwania Wyzwania, dobrze będzie mieć do niego łatwy dostęp. Z tego powodu będzie Ci potrzebne darmowe konto na Codepen - możesz założyć je tutaj. Dzięki temu w Twoim profilu Codepen będą zapisywać się wszystkie stworzone przez Ciebie peny i projekty.

Po stworzeniu konta i zalogowaniu się do Codepen, otwórz tego pena i kliknij "Fork" w dolnej belce.

W ten sposób stworzysz sobie własną kopię naszego pena, na którym będziesz pracować, i od razu przeniesiesz się do jego edytora.

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, z którego będzie składała się nasza strona: 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:

4. Rozpoczynamy kodowanie! Sekcje "Splash" i "About"

Naszą stronę będziemy tworzyć krok po kroku, czyli sekcja po sekcji. Dziś zajmiemy się tylko HTML, czyli strukturą. W kolejnej części wyzwania za pomocą CSS sprawimy, że nasza strona stanie się dużo bardziej estetyczna.

Zaczniemy od “okładki” naszej strony, często zwanej splash lub splash screen.

Zadanie 1

Twoim pierwszym zadaniem będzie wklejenie poniższego kodu do “pudełka” HTML w swoim penie:

Już w pierwszych linijkach kodu mamy przegląd kilku elementów HTML: section, div, h1, h2, a. Możesz od razu też zobaczyć, jak zbudowany jest taki element:

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ż w kolejnej części wyzwania!

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

Zadanie 2

Drugie zadanie będzie nieco bardziej kreatywne :) Zmodyfikuj treść znajdującą się w tagach h1, h2 i a. Innymi słowy, zmień “Hello World”, “Kodilla programming challenge” i “Learn more” na własne, dowolne treści. Nie zmieniaj nic innego w kodzie.

Pierwsza sekcja jest już na miejscu! Skoro tak dobrze nam idzie, dodajmy od razu kolejną :)

Zadanie 3

Pod ostatnim tagiem zamykającym poprzedniej sekcji (czyli pod </section>) wklej następujący kod:

Zwróć uwagę, że tym razem nadaliśmy elementowi dwa atrybuty: klasę (class) i identyfikator (id). Na ten moment musisz wiedzieć tylko tyle, że tę samą klasę może mieć wiele elementów na stronie, natomiast identyfikatory muszą być unikalne.

Tym razem w edytorze nic się nie zmieniło. Mamy tylko część struktury sekcji, ale nie mamy jej treści!

Zadania dla Ciebie:

• Pod tagiem <div class="container"> (w kolejnej linii) dodaj nagłówek poziomu drugiego (<h2>) z klasą "section-title". Wstaw w nim dowolną treść, która będzie tytułem naszej sekcji.
• Pod nagłówkiem poziomu drugiego, w kolejnej linii, dodaj tag <p> z klasą "section-intro". Wewnątrz tagu wpisz dowolną treść.

5. Sekcja "Features"

W tym module nie dostaniesz żadnego gotowego kodu do wklejenia - napiszesz HTML sekcji samodzielnie, korzystając z naszych wskazówek.

Sekcja “Features” będzie miała postać trzech “pudełek”, z których każde będzie składać się z ikony, tytułu i krótkiego opisu. Możesz w niej umieścić listę swoich hobby, ulubione zwierzęta, sporty lub cokolwiek innego. Zaczynamy!

Zadanie 4

To zadanie składa się z kilku kroków. Ważne, by dokładnie czytać instrukcje i wykonywać je w kolejności.

1. Pod ostatnim tagiem sekcji “About” (czyli pod </section>), w nowej linii, dodaj tag otwierający nową sekcję (<section>) z klasą "features" i identyfikatorem "features". Dodaj też od razu tag zamykający dla tej sekcji.
2. Między tagiem otwierającym a zamykającym sekcji dodaj <div> z klasą "container".
3. W tym divie dodaj nagłówek poziomu drugiego (<h2>) z klasą "section-title". Nadaj mu dowolną treść.
4. Poniżej nagłówka dodaj <div> o klasie "features-wrapper".
5. W tym divie dodaj element <article> z klasą "feature".
6. Wewnątrz <article> umieść kolejno pod sobą:
   • element <i></i> z klasami "fas fa-cat". Ten element ma być pusty, czyli bez żadnej treści między tagiem otwierającym a zamykającym.
   • Nagłówek poziomu trzeciego (<h3>) z klasą "feature-title" z dowolną treścią.
   • Element <p> z klasą "feature-description" z dowolną treścią.

Pierwsze "pudełko" gotowe! Potrzebujemy jeszcze dwóch. W nowej linii wstaw kolejny element <article> o takiej samej strukturze jak pierwszy (ale o innej treści), a poniżej niego jeszcze jeden.

Jeżeli nie pamiętasz, jak wstawić dany selektor, zerknij na podane przez nas wyżej przykłady kodu albo zapytaj na grupie facebookowej. Pamiętaj, aby pozamykać tagi!

Zapisz swoją pracę, klikając button Save w górnej belce.

Jak widzisz w podglądzie, stworzyliśmy trzy identycznie wyglądające elementy. Chwilowo umieszczone są one jeden pod drugim i w każdym użyta jest ikona kota, ale cierpliwości - poprawimy to wszystko już niedługo :)

Uwaga: jeżeli nie widzisz ikon w swoim projekcie, 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:

Jeżeli tak nie jest, wklej ten arkusz stylów: https://use.fontawesome.com/releases/v5.5.0/css/all.css w miejsce pokazane na powyższym obrazku i kliknij "Save & close".

Pamiętaj: to normalne, że strona w czystym HTML nie wygląda imponująco. Za warstwę wizualną odpowiada CSS, którym zajmiemy się już w kolejnej części Wyzwania. Do zobaczenia!