Інструменти фронтенд-розробника

Інтернет. Всю необхідну інформацію можна знайти в інтернеті, спитати у гугла, подивитися відеоуроки на ютуб...

Adobe Photoshop - де-факто є стандартом в комерційній розробці веб-сайтів, у цій програмі дизайнери готують макети майбутніх сайтів у файли формату PSD. В цій програмі ви будете вирізати фотографії, зображення, іконки, робити мілкі корегування дизайну.
Найкраще використовувати останню версію програми. Та підійдуть версії кількарічної давнини, бажано не старіші ніж CS 5. Різні інші програми, що можуть переглядати чи редагувати файли PSD (наприклад, Gimp) часто неоректно відображають макет і через це можуть виникнути великі проблеми.
Зрідка макети можуть бути підготовлені у векторних форматах Adobe Illustrator чи Corel Draw. Ці формати призначені в першу чергу для поліграфії, я раджу уникати роботи з такими файлами.
Застереження: ні в якому разі не беріться за верстку навіть простих макетів у форматах jpg, png. Скоріш за все, замовнику на руки дали не самі макети, а лише їх зовнішній вигляд, це означає, що роботу дизайнера не було оплачено і є надвелика ймовірність, що і ви попрацюєте безкоштовно.

IDE (Intergated Development Environvent) - інтегроване середовище розробки, програма чи комплекс програм для розробки програмних продуктів, у нашому випадку - веб-сторінок. Тобто, IDE - це програма, де ми будемо писати код. Зазвичай IDE мають певні інструменти для полегшення кодування: підсвітка і перевірка синтаксиса, попередній пошук помилок, автодоповнення коду, комплексна робота з проектом, попередній перегляд (WYSIWYG - що бачу, те й отримаю), інтеграцію з системами керування версіями, автоматичні деплої… Але можна використовувати і звичайний блонот чи його більш продвинуті версії, типу Notepad++.
Для верстки я раджу використовувати PHPStorm. Можна використовувати Sublime Text, Atom, brackets, Eclipse, Visual Studio, Adobe Dreamweaver та інші. Проте, Eclipse та Visual Studio не заточені під веб-розробку, а програма від Adobe сильно застаріла, не оновлюється з 2012 року. Для дрібних швидких правок можна використовувати Notepad++ - він швидко відкривається, має автодоповнення, підсвітку синтаксису, зручний пошук, нумерацію строк, легко інтегрується у файлові менеджери, наприклад, Total Commander.
WebStorm я не рекомендую - це сильно урізана версія PHPStorm, в ній не вистачає багатьох потрібних нам функцій.

Локальний веб-сервер. Часто може знадобитися веб-сервер на вашій машині для відпрацювання специфічних скриптів (наприклад, cookies), правок на робочій моделі сайта. Для цього можна спробувати самому розвернути на своїй машині Apache, MySQL, PHP, розібратися в їх налаштуваннях і принципах роботи. Але раджу скористатися збіркою OpenServer, XAMPP і т.п.,: це віртуальні сервери, що включають в себе всі вищевказані інструменти, легко встановлюється і одразу готові до роботи. Деякі зборки можна встановити чи просто скопіювати на флешку (portable), без проблем запустити на іншій windows-машині, можна повстановлювати чи покопіювати у різні папки для того, щоб вести різні проекти, переключаючись між ними у декілька кліків. Навіть в межах одного екземпляра веб-сервера можна створювати безліч доменів і піддоменів для різних проектів.
В свій час була популярна portable-збірка Denwer, програма створювала диск Z, на якому розгортала unix-подібну систему, з якої і запускала всі сервіси. Denwer працював практично безвідказно до весни 2017 року, він давно перестав оновлюватися і не хоче запускатися на сучасних системах.

Браузери. Для тестування і відлагодження наших веб-сторінок ми будемо використовувати браузер. Веб-розробнику бажано мати можливість протестувати у якомога більшій кількості браузерів. Необхідний мінімум: MS IE та Edge, Chrome, Firefox, Safari. Також бажано мати доступ до мак-ос і популярних мобільних версій браузерів (iOS, Android).
Різноманітні яндекс-браузери, хроміуми, мейл-ру, в тому числі Опера, не потрібні, так як використовують webkit.
Правильно і акуратно написаний код у 99,99% випадках буде однаково і коректно відображатися у всіх сучасних повноцінних браузерах і у 98% мобільних.

Хостинг. Часто розробнику потрібно завантажити свою роботу на реальний сервер для реальної роботи, для перевірки функціонування, для демонстрації замовнику, у портфоліо та інше. Фрілансеру-початківцю можна завести безкоштовний хостинг, його має цілком вистачити на перший час, освоїтися з принципами роботи.

На перших порах цілком підійде безкоштовний хостинг від GitHub, як з ним працювати - розберемо на наступних лекціях.