🕐 6 хв читання

Як правильно шукати інформацію

Конспект лекції для початківців у веб-розробці

Чому важливо вміти шукати інформацію

  • Інформації занадто багато, щоб помістити її в одну книгу, курс чи голову. Постійно з'являється нове й застаріває старе.
  • Будь-яку задачу можна розв'язати по-різному — навичка пошуку допомагає орієнтуватися в різних думках і підходах.
  • Ефективний пошук економить час — особливо під час виконання тестових завдань і робочих задач.
  • Навичка пошуку працює як фільтр: що більше практики, то швидше ви відсіюєте зайве.

Критичне мислення під час пошуку

  1. Перевіряйте на практиці. Знайшли рішення — відкрийте редактор і спробуйте його застосувати.
  2. Порівнюйте джерела. Шукайте відповідь не в одному місці, а хоча б у двох-трьох.
  3. Топ видачі ≠ якість. Сайт може бути в топі просто тому, що він старий або просунутий через SEO.

Як визначити застарілий матеріал

  • Верстка (HTML/CSS): матеріали до 2014 року з великою ймовірністю застаріли. Flexbox вийшов у 2014-му, Grid — ще пізніше.
  • JavaScript: у Вікіпедії можна знайти таблицю версій ECMAScript і зіставити рік статті з версією мови.
  • Дати публікації: завжди дивіться, коли написано матеріал. Але пам'ятайте — на сайтах дати можна підробити. Датам у пошуковиках (Google) можна довіряти більше.
  • Дизайн сайту: якщо він виглядає як із 90-х — можливо, контент теж звідти.

Класифікація сайтів

Ненадійні Різна надійність Надійні

🔴 Ненадійні сайти (не рекомендуються)

W3Schools — багато помилок, застаріла інформація, зокрема верстка на float'ах. Часто з'являється в топі видачі, але якість контенту сумнівна.
Застарілі довідники — будь-які сайти-довідники, що містять атрибути чи підходи, яких немає в сучасному HTML/CSS. Наприклад, атрибут type у елемента <ul> або верстка на float'ах замість Flexbox/Grid.
SEO-сайти й автопереклади — сайти-копії, зроблені для кліків і реклами, а не для людей. Часто мають «сучасну» назву, але контент скопійований і перекладений машинно.

🟡 Сайти з різною надійністю

Вікіпедія — зручна для перевірки версій і дат виходу технологій. Перевіряйте вкладку «Обговорення» — якщо там гарячі суперечки, інформації довіряти не варто.
Stack Overflow — найкращий сайт запитань і відповідей. Враховуйте, що прийнята відповідь може бути застарілою — дивіться й новіші відповіді нижче.
Medium — статті різної якості, але є хороші матеріали від відомих авторів і компаній.
Dev.to — спеціалізована спільнота для розробників. Можна читати, писати та обговорювати статті. Аналог блог-платформи, але з технічним фокусом.
Hashnode — блог-платформа для розробників. Якісні технічні статті, можна створити власний блог із кастомним доменом.
Reddit (r/webdev, r/frontend, r/learnprogramming) — активні спільноти з обговореннями, порадами та посиланнями. Якість різна, але корисного багато.
Авторські блоги — якщо автор допоміг вам один раз, додайте сайт у закладки або в RSS.
Соцмережі — на X (колишній Twitter) та Bluesky багато фронтендерів, у Telegram є україномовні канали з розробки, на YouTube — безліч навчальних каналів (Kevin Powell, Fireship, Traversy Media та ін.).

🟢 Надійні сайти (рекомендуються)

MDN Web Docs — головний довідник з HTML, CSS і JavaScript. Є переклад українською (частково). Важлива перевага — застарілі атрибути тут спеціально позначені.
Can I Use — перевірка підтримки HTML/CSS/JS-фіч у різних браузерах. Незамінний інструмент перед використанням нових властивостей.
CSS-Tricks (належить DigitalOcean з 2022) — практичні посібники, зокрема відомий Flexbox Guide та CSS Almanac.
Smashing Magazine — якісні статті з верстки, дизайну, UX та фронтенду від професійних авторів.
A List Apart — поглиблені теоретичні статті від відомих авторів (нові публікації виходять рідко, але архів цінний).
web.dev — статті та курси від Google: продуктивність, доступність, адаптивний дизайн, безпека.
javascript.info — повна енциклопедія з JavaScript. Є переклад українською.
freeCodeCamp — безкоштовні інтерактивні курси з HTML, CSS, JS та інших технологій. Є сертифікати.
The Odin Project — безкоштовний повноцінний курс веб-розробки з нуля, з практичними проєктами.
Codrops — колекція інтерактивних демо, туторіалів та експериментів з CSS та JavaScript. Чудове джерело натхнення для креативних анімацій, ефектів при наведенні, переходів між сторінками та нестандартних UI-рішень.
Awwwards — платформа, що відзначає найкращі веб-сайти за дизайн, креативність та UX. Корисна для пошуку референсів та натхнення: можна побачити, як виглядають сучасні сайти найвищого рівня, і вивчити їхні прийоми через інспектор браузера.
Специфікації (HTML, CSS, ECMAScript) — єдине першоджерело істини. Саме HTML-специфікація відповідає на питання, який елемент у який можна вкладати.

🔧 Корисні інструменти

Google Fonts — безкоштовна бібліотека веб-шрифтів від Google. Можна підключити до сайту через <link> або завантажити локально.
SVG Repo — безкоштовна бібліотека з понад 500 000 SVG-іконок та векторних зображень з відкритою ліцензією.
IcoMoon — інструмент для створення власних іконкових шрифтів та SVG-спрайтів із безкоштовних бібліотек.
Colorome — українськомовний довідник кольорів з назвами, кодами (HEX, RGB, CMYK) та конвертером між колірними моделями.
Excalidraw — безкоштовна онлайн-дошка для створення схем та діаграм у стилі ручного малюнка з можливістю спільної роботи.
draw.io — безкоштовний онлайн-редактор для створення блок-схем, UML-діаграм, мережевих схем та інших візуальних діаграм.
httpstatus.io — інструмент для перевірки HTTP-статусів URL-адрес, заголовків відповідей та ланцюжків редиректів.
loader.io — хмарний сервіс для навантажувального тестування веб-додатків.
Typebot — no-code платформа для створення та інтеграції чат-ботів на веб-сайти та месенджери.
n8n — open-source платформа для автоматизації робочих процесів та інтеграції різних сервісів за допомогою візуального редактора.
Udemy — платформа з платними та безкоштовними відеокурсами з різних тем, зокрема веб-розробки. Якість курсів різна — обирайте за відгуками.
Genius Space — українська онлайн-платформа для навчання з курсами з маркетингу, бізнесу, IT та інших напрямків.
skills.sh — каталог готових навичок для AI-агентів програмування, які можна встановити однією командою.
Велика підбірка інструментів: репозиторій frontend-tools на GitHub містить колекцію посилань на інструменти для фронтенд-розробки, згруповані за категоріями.

Техніки ефективного пошуку

Уточнення запиту

  • Гугліть перше, що спадає на думку — не витрачайте час на вигадування ідеального запиту.
  • Якщо результатів занадто багато і потрібного немає — додайте уточнювальне слово.
  • Якщо результатів замало — приберіть зайві слова або зніміть лапки.
  • Лапки в пошуковику означають пошук точного збігу, але це може бути занадто суворим.
Запит BEM тема дав 100 млн результатів. Запит BEM кольорові теми — лише 100 тис., і перший же результат виявився потрібним.

Пошук по конкретному сайту

Введіть запит, потім пробіл, потім site: та адресу сайту.

section site:html.spec.whatwg.org — покаже результати лише з цього сайту. Зручно, коли на сайті немає вбудованого пошуку.

Інші можливості

  • Пошук по зображеннях — інфографіки та схеми іноді пояснюють краще за текст.
  • Відео — конференції й доповіді за темою.
  • Подкасти — аудіоформат для навчання у фоновому режимі.
  • Розширений пошук Google — фільтри, які можна використовувати без знання пошукових операторів.
  • RSS-рідери (наприклад, Feedly) — підписка на оновлення кількох сайтів в одному місці.
  • Дайджести та розсилки — регулярні добірки посилань за темою. Наприклад: Frontend Focus, JavaScript Weekly, CSS Weekly.

Що робити, якщо нічого не знайшли

  1. Не здавайтеся одразу — переформулюйте запит.
  2. Спробуйте інший пошуковик.
  3. Спробуйте шукати англійською — часто матеріалів більше й вони актуальніші.
  4. Якщо все одно не виходить — поставте запитання на Stack Overflow, Dev.to або Reddit. Вказуйте всю інформацію: код, помилки, версії, операційну систему. Ніхто не бачить ваш екран, тому описуйте проблему детально.

Що робити, якщо сайт зник

  • Web Archive — зберігає копії сайтів. Головний інструмент для перегляду видалених або змінених сторінок.
  • CachedView — сервіс для пошуку кешованих версій сторінок з різних джерел. Google прибрав власний кеш сторінок у 2024 році, тому сторонні сервіси стали єдиною альтернативою.
  • Найкращий варіант — зберігати важливі матеріали локально заздалегідь.

Поради на завершення

  • Краще прочитати одну статтю до кінця, ніж відкрити двадцять і не прочитати жодної.
  • Використовуйте вивчення розробки для підтягування англійської: вбудований перекладач Chrome, розширення-словники, Google Translate.
  • Знаючи англійську, можна обійтися одним MDN і не заходити на ненадійні сайти.
  • І головне — не соромтеся гуглити. Це нормально на будь-якому рівні досвіду.
🔍
Почніть вводити назву лекції або тему