Tworzenie stron WWW

Kod jest tak samo potrzebny zarówno stronie na gotowym silniku, jak i projektowi pisanemu od zera. Ta sekcja dotyczy programowania bez powiązania z WordPressem. Frontend i backend, narzędzia i gotowe techniki. Dla tych, którzy składają layout, piszą skrypty lub po raz pierwszy instalują Gita na swoim komputerze.

Frontend rozkładamy na warstwy. HTML jako szkielet strony. CSS do wyglądu: siatki na Flexboksie i Gridzie, adaptacyjność, płynne przejścia i estetyczne efekty bez zbędnego kodu. JavaScript i jQuery do zachowania: przełączniki, obsługa kliknięć, walidacja formularzy, dynamika na stronie. Są omówienia konkretnych zadań, takich jak metoda .toggle(), generowanie liczby losowej, licznik odliczający czas czy płynne przewijanie do kotwicy. Nie abstrakcyjna teoria. Gotowy kod, który można wkleić i sprawdzić.

Backend opiera się na PHP. Pokazujemy, jak odwoływać się do zewnętrznych API (interfejsów programistycznych, poprzez które strony wymieniają się danymi). Na przykład pobieranie kursu Bitcoina, pogody lub ceny produktu z zewnętrznego serwisu. Omawiamy wysyłkę formularza na maila, pracę z JSON-em, podstawowe zapytania do bazy danych. Do tego wyrażenia regularne – ten język wyszukiwania według wzorca, którego wielu niesłusznie się obawia. Sprawdzanie e-maila, telefonu, czyszczenie łańcucha. Tłumaczymy na żywych przykładach, a nie na suchym zapisie składni.

Kod trzeba gdzieś pisać i przechowywać. Dlatego osobny blok o narzędziach. Git i GitHub do kontroli wersji i pracy zespołowej. Instalacja Gita na Windowsie od podstaw, podstawowe polecenia, pierwsze repozytorium, cofanie zmian, praca z gałęziami. Markdown do dokumentacji i README. CodePen do szybkich eksperymentów w przeglądarce. Środowisko lokalne: Laragon, Open Server, XAMPP, edytor Atom. Wszystko, na czym naprawdę wygodnie pracuje się na co dzień.

Kogo mamy w głowie, gdy piszemy. Początkujący dopiero rozróżnia, czym tag różni się od selektora, i kopiuje kod, nie rozumiejąc połowy linii. Doświadczony zna podstawy, ale szuka krótkiego rozwiązania punktowego zadania, żeby nie wyważać otwartych drzwi. Temu pierwszemu wyjaśniamy każdą linię i pokazujemy wynik w przeglądarce. Temu drugiemu dajemy gotowy snippet i od razu piszemy, gdzie się popsuje.

Typowe błędy, które naświetlamy. Skrypt w head zamiast w footerze, przez co jQuery nie znajduje elementu. Zapomniany średnik i cudzysłowy różnego typu. Wyrażenie regularne, które zachłannie łapie za dużo. Bezpośrednie zapytanie do bazy bez sprawdzenia danych. Pokazujemy nie tylko działający kod, ale i miny wokół niego.

Materiały piszą ludzie, którzy sami piszą kod, a nie opowiadają cudze tutoriale. Potykaliśmy się o te same błędy i pamiętamy, gdzie początkujący utknie. Dlatego każde omówienie jest zbudowane prosto. Najpierw krótkie działające rozwiązanie. Potem wyjaśnienie, dlaczego działa i gdzie są ukryte pułapki. Bez lania wody i kopiuj-wklej z oficjalnej dokumentacji.

Jeśli dopiero zaczynasz, przechodź od prostego do trudnego. Najpierw HTML i CSS. Potem JavaScript i podstawy PHP. I dopiero potem Git, API i wyrażenia regularne. Każdy tekst odpowiada na konkretne pytanie, a nie próbuje ogarnąć wszystkiego naraz.

Sekcja jest powiązana z działem WordPress. Gdy kod dotyczy konkretnie silnika WP, hooków, functions.php lub wtyczek, kierujemy cię tam. Tutaj natomiast wszystko, co uniwersalne i przyda się w każdym projekcie. Snippet CSS zadziała tak samo na landingu, blogu i sklepie.

Treści są regularnie aktualizowane zgodnie z nowymi standardami i wersjami narzędzi. Języki się rozwijają, stare techniki stają się przestarzałe, pojawiają się nowe. Dbamy o to, by przykłady działały, nie zostawiamy kodu sprzed dziesięciu lat. Składasz layout, piszesz skrypty czy uczysz się Gita? Wracaj tutaj za każdym razem, gdy trzeba rozgryźć kod lub znaleźć gotowe rozwiązanie.