JackShcherbakov

Большая часть ресурсов - ситуативные (в основном это документации к конкретным библиотекам). Из более-менее часто используемого могу вспомнить:
MDN, DevDocs и Schema.org, чтобы вспоминать забытое.
Can I use, чтобы смотреть поддержку браузерами (+ doiuse).
WAVE и regex101, чтобы проверять себя.
В Browserhacks иногда полезно заглянуть.
FontPair и Coolors - если нужно без дизайнера подобрать шрифты и цвета.
Snazzy Maps, чтобы брать готовые цветовые схемы для карт.
Cubic-bezier, чтобы наглядно делать кривые для простых анимаций.
Google - если затупил.
Noisli - для фонового шума.
Cross Browser Testing, чтобы тестировать результат.

Весь блок (например, section) имеет фон в 3 слоя (слой не путать с блоком)
1 слой покрываете линейным градиентом (linear-gradient)
2 слой покрываете радиальным градиентом (radial-gradient) с бирюзовым цветом (отблески)
3 слой наносите текстуру в виде шестиугольника

Блок по левой стороне
Делаете цельным вектором, обязательно с группировкой. - в дальнейшем будет удобно менять статус кнопки

Центральный блок
Делаете так же векторные элементы для кубиков.
Текст можно позиционировать отдельными блоками.
Рамки для полей ввода можно сделать только боковые (по левой и правой стороне), верх\низ соответственно будет border

Блок по правой стороне
Это отдельный aside блок с вкладками, а для фона делаете 2 слоя с линейным градиентом:
- Первый слой фона для верхней линии (разделяющую кнопки вкладок)
- Второй слой фона по левой стороне блока
Кнопки вкладок делаете с псевдоэлементами, красите с прозрачностью в зависимости от статуса "активная\неактивная" и сдвигаете друг на друга внешним отступом (отрицательный margin)

Совет: смотрите как сделаны слои в макете, очень часто можно определиться, как сделать тот или иной эффект - просто изучив макет

Для фото - JPEG.
Для схематических изображений (иконки, схемы, чертежи, графические примитивы) - PNG или SVG. Для сложных схематических изображений PNG может быть выгоднее.
Также замечу, что внедрение растрового изображения в SVG - возможно, но бессмысленно.

Сафари теперь не позволяет отключать зум, однако строка user-scalable=no в meta по прежнему полезна для запрета зума при нажатии на input

Хостинг обычно до 32гб

С каких пор?

VPS или VDS - очень дорогие и то, даже 1тб может не хватить

https://poiskvps.ru/index.php?search_hdd_min=1000&...
1-3тб - 400-1300р
дешевле некуда.
За 2000-3000 уже можно выделенный сервер взять целый где диск на пару терабайт.

Как быть? Может быть есть какие-то облачные хранилища, специально предназначенные для сайтов?

Amazon/Google/Yandex/Mail везде облака, но это самый дорогой вариант как раз будет.
Amazon S3 ~1600 за 1 ТБ в месяц

input {
   line-height: 1;
}

Стандарт де-факто для хранения медиа файлов (user uploaded files) - S3. Он отлично поддерживается большинством фреймворков, и это не обязательно Amazon: поменяв в настройках проекта адрес хранилища, можно легко переключиться на использование любого другого облачного провайдера. Собственное S3 хранилище можно создать установив на сервер MinIO.

Преимущества S3:
- отдельный стабильный сервис, не зависящий от ошибок в коде проекта
- простота масштабирования и оптимизации затрат
- основной сайт и хранилище файлов могут быть расположены на разных серверах: быстрый с небольшим ssd для бэкенда, слабый но с объемными дисками - для файлов
- нативная защита данных - криптографически подписанные ссылки с ограничением по времени
- упрощение проекта: никаких больше причудливых конфигураций nginx для роутинга запросов
- соответствие The Twelve-Factor App

Если 1 TB достаточно, рекомендую online.net. За €8.99 евро в месяц они предлагают выделенный сервер с SATA диском и неограниченным трафиком - отличный вариант для MinIO при умеренных нагрузках.

MinIO удобно запускать с помощью Docker, указав что для хранения данных должен использоваться каталог на хост системе. На роль reverse proxy / tls proxy в этом случае лучше всего подходит Traefik