Инструменты

Графические редакторы (для дизайнеров)

Photoshop

Figma

Adobe XD

Sketch

Основные инструменты (для клиентов)

HTML 5

Король верстки, каркас будущей страницы из семантических тегов

CSS 3

Королева верстки, благодаря ей можно заливать фоны градиентом, делать тени, подключать и задавать шрифты и даже делать не большую анимацию

JavaScript

Главный маг и чародей верстки, делает то на что HTML и CSS не способны, например 3D модели на сайте, абсолютно любую анимацию к примеру сладеры, молниеносные переходы по страницам без перезагрузки, специальные калькуляторы для сайтов, личные кабинеты с верификацией, онлайн чаты в реальном времени. Но в браузере он ничто без HTML и CSS.

Фреймворки и библиотеки для SPA (для программистов)

React

Библилотека для удобной и поддерживаемой разработки приложений

Redux

Менеджемент состояния приложения

React Router

Позволяет перемещаться между страницами без перезагрузки страниц, что увеличивает скорость перехода между страницами и экономию трафика.

NextJS

Используют в тех случаях когда приложение написанном на React нужно проиндексировать.

Сборщик Gulp (для программистов)

Browser-sync

Для автоматической перезагрузки страницы при сохранени скриптов, стилей и html

PUG

Шаблонизатор для верстки многостраничных сайтов. Помогает переиспользовать повторяющиеся блоки в разных частях сайта и использовать сокращенный синтаксис.

Babel

Для поддержки старых браузеров 6 и 7 спецификаций JavaScript

Cssnano

Для сжатия стилей

SASS

Для упрощенного и быстрого написания стилей

Uglifyjs

Для сжатия скриптов

Autoprefixer

Для автоматического добавления кроссбраузерных префиксов

Сoncat

Для обьедиения стилей и скриптов по одному файлу

БЭМ-нейминг

Способ написания независимых стилей, с восможностью переиспользования в будущем.