Инструменты

Базовые инструменты

HTML 5

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

CSS 3

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

JavaScript

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

Сборщик Webpack для автоматизации рутинных задач

PUG

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

Babel

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

SASS

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

БЭМ-нейминг

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

Фреймворки и библиотеки для разработки сложных сайтов

React + SSR

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

SSR(Server Side Rendering) - способ написания сайта с рендерингом на сервере для SEO продвижения

Redux

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

React Router

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

Backend инструменты

NodeJS

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

MongoDB

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

WebSocket

Протокол для двухстороннего общения клиента с сервером

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

WordPress

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

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

Графические редакторы для макетов

Figma