Веб-розробка

Код однаково потрібен і сайту на рушії, і проекту з нуля. Цей розділ — про розробку поза прив'язкою до WordPress. Фронтенд і бекенд, інструменти та готові прийоми. Для тих, хто верстає, пише скрипти чи вперше встановлює Git на свій комп'ютер.

Фронтенд розбираємо пошарово. HTML як каркас сторінки. CSS для оформлення: сітки на Flexbox і Grid, адаптивність, плавні переходи й акуратні ефекти без зайвого коду. JavaScript і jQuery для поведінки: перемикачі, обробка кліків, валідація форм, динаміка на сторінці. Є розбори конкретних задач, як-от метод .toggle(), генерування випадкового числа, таймер зворотного відліку чи плавне прокручування до якоря. Не абстрактна теорія. Готовий код, який можна вставити й перевірити.

Бекенд тримається на PHP. Показуємо, як звертатися до зовнішніх API (програмних інтерфейсів, через які сайти обмінюються даними). Наприклад, тягнути курс Bitcoin, погоду чи ціну товару зі стороннього сервісу. Розбираємо надсилання форми на пошту, роботу з JSON, базові запити до бази даних. Сюди ж регулярні вирази, та сама мова пошуку за шаблоном, якої багато хто боїться даремно. Перевірка email, телефону, очищення рядка. Розбираємо на живих прикладах, а не на сухому синтаксисі.

Код треба десь писати й зберігати. Тому окремий блок про інструменти. Git і GitHub для контролю версій та спільної роботи. Встановлення Git на Windows з нуля, базові команди, перший репозиторій, скасування змін, робота з гілками. Markdown для документації й README. CodePen для швидких експериментів у браузері. Локальне оточення: Laragon, Open Server, XAMPP, редактор Atom. Усе, на чому справді зручно працювати щодня.

Кого ми тримаємо в голові, коли пишемо. Новачок тільки розбирається, чим тег відрізняється від селектора, і копіює код, не розуміючи половини рядків. Досвідчений знає основи, але шукає коротке рішення точкової задачі, щоб не винаходити велосипед. Для першого ми пояснюємо кожен рядок і показуємо результат у браузері. Для другого даємо готовий сніпет і одразу пишемо, де він зламається.

Типові помилки, які ми підсвічуємо. Скрипт у шапці замість підвалу, через що jQuery не знаходить елемент. Забута крапка з комою та лапки різного типу. Регулярка, яка жадібно хапає зайве. Прямий запит до бази без перевірки даних. Ми показуємо не тільки робочий код, а й граблі навколо нього.

Матеріали пишуть люди, які самі пишуть код, а не переповідають чужі туторіали. Ми спотикалися об ті самі помилки й пам'ятаємо, де новачок застрягне. Тому кожен розбір влаштований просто. Спочатку коротке робоче рішення. Потім пояснення, чому воно працює, і де підводні камені. Без води і копіпасти з офіційної документації.

Якщо ви тільки починаєте, рухайтеся від простого до складного. Спочатку HTML і CSS. Потім JavaScript і базовий PHP. І лише потім Git, API та регулярні вирази. Кожен текст відповідає на конкретне питання, а не намагається охопити все одразу.

Розділ пов'язаний із рубрикою WordPress. Коли код стосується саме рушія, хуків, functions.php чи плагінів, ми ведемо вас туди. Тут же все, що універсальне й знадобиться на будь-якому проекті. Сніпет CSS однаково ляже і на лендінг, і на блог, і на магазин.

Контент регулярно оновлюється під свіжі стандарти й версії інструментів. Мови розвиваються, старі прийоми застарівають, з'являються нові. Ми тримаємо приклади робочими, а не залишаємо код десятирічної давнини. Верстаєте, пишете скрипти чи освоюєте Git? Повертайтеся сюди щоразу, коли треба розібратися з кодом або підібрати готове рішення.