Blok 1
To jest pomiar, nie nauka
Section titled “To jest pomiar, nie nauka”Ten blok nie wprowadza nowego materiału — jego celem jest sprawdzenie, od czego każdy zaczyna, nie wystawienie oceny. Diagnostyka na tym etapie nie jest punktowana.
O mnie
Section titled “O mnie”Maciej — backend i infrastructure engineer w Animativ, student informatyki na Wojskowej Akademii Technicznej. Trzy lata wcześniej był uczniem tej samej szkoły.
Skąd bierze się strona
Section titled “Skąd bierze się strona”Stronę internetową można dostarczyć na trzy sposoby. Statyczna strona to gotowy plik leżący na serwerze — każdy, kto o niego poprosi, dostaje dokładnie to samo, bez zmian. PHP działa inaczej: to jak zamówienie w restauracji — przeglądarka wysyła żądanie (zamówienie), a serwer (kuchnia) składa stronę na nowo, specjalnie na tę okazję, i wysyła gotowy wynik (danie). Serwer nie pamięta cię między jednym żądaniem a drugim, chyba że sam to sobie zapisze (to mechanizm sesji/cookies). JavaScript uruchamiany w przeglądarce jest odwrotnością tego: serwer wysyła surowe dane i instrukcje (kod), a to przeglądarka użytkownika składa z tego stronę u siebie. Ten kurs uczy PHP, bo to najbardziej prawdopodobny język na egzaminie zawodowym z tej kwalifikacji.
Sesja robocza
Section titled “Sesja robocza”Zadanie pierwszego bloku: dostajesz plik o-mnie.html (pobierz starter), w którym cała treść już jest, ale jest kompletnie płaska — same linie tekstu, bez żadnych znaczników HTML. Zadanie brzmi: otaguj to, czyli nadaj tej treści strukturę semantyczną (nagłówki, akapity, listy itd.), nie zmieniając samej treści, a potem dodaj własny CSS — dowolny, ma pokazać znajomość właściwości, nie musi wyglądać ładnie. Minimalny wymóg: plik ma się otwierać w przeglądarce i zawierać oryginalną, otagowaną i ostylowaną treść. Dodatkowe wyzwanie: otaguj bez użycia ani jednego znacznika div.
Domknięcie
Section titled “Domknięcie”Trzy różne, poprawne otagowania tego samego tekstu mogą wyglądać identycznie w przeglądarce, mimo że ich kod jest inny. Wniosek: HTML opisuje znaczenie i strukturę treści, nie jej wygląd — o wygląd dba CSS, nie kolejność czy dobór znaczników.
Pięć zasad
Section titled “Pięć zasad”Pięć zasad tagowania z pierwszego bloku. Jedno h1 na stronę — to główny tytuł, tylko jeden. Nagłówki idą po kolei według ważności (h1 → h2 → h3), nie według tego, jak duże mają być litery. Każdy fragment tekstu mieszka w jakimś elemencie (p, li itd.) — goły tekst wprost w body to znak niedokończonej pracy. Sekwencja kilku podobnych rzeczy to lista (ul/ol), nie kilka linii tekstu pod sobą. Obrazek zawsze ma atrybut alt, opisujący to, co przedstawia, nie nazwę pliku.
Sprawdzenie
Section titled “Sprawdzenie”Dobry nawyk do wyrobienia: po otagowaniu strony otwórz narzędzia deweloperskie przeglądarki (devtools) i spójrz na drzewo elementów, które faktycznie wyprodukowałeś. Jeśli to drzewo wygląda jak płaska sterta elementów bez struktury, to znaczy, że twój markup faktycznie jest płaską stertą — struktura w kodzie i struktura w drzewie to to samo.
Ten fragment bloku to samo założenie konta na GitHubie, nic więcej. Kopiowanie repozytorium i wypychanie zmian to następny krok.
Kolejny krok: skopiowanie repozytorium-szablonu (przyciskiem “Use this template”), włączenie GitHub Pages i wypchnięcie własnej, otagowanej i ostylowanej wersji pliku z poprzedniej sesji. Dokładna instrukcja krok po kroku jest w sekcji Materiały, w poradniku o Git i GitHubie.