Инструменты

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

Photoshop

Figma

Adobe XD

Системы управления сайтом - CMS

WordPress

Вордпресс нужен в том случае, когда у вас многостраничный сайт и на нем нужно редактировать например каталог товаров, удалять или добавлять новые, изменять картинки к товару и все что с товаром связано. Это может быть не обязательно товары, это например может быть блок с отзывами или постоянными вопросами от посетителей сайта, которые вам в любом случае нужно будет редактировать через админ панель.

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

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

HTML 5

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

CSS 3

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

JavaScript

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

Backend

NodeJS

Кроссплатформенная среда выполнения JavaScript, можно использовать как сервер

MongoDB

База данных для хранения данных о пользователях сайта, историях покупок и т.д.

ExpressJS

Фреймворк для обработки http запросов

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

React

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

Redux

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

React Router

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

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

PUG

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

Babel

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

SASS

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

БЭМ-нейминг

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