ThunderCat

align-items: center;

1) Берем хеадлесс хром
2) скармливаем ему хтмл на печать в пдф с сохранением в файл
3) Готовый файл отдаем пользователю
3) Профит, все красиво, зайчики, графики, картинки...

При этом для отладки достаточно в хроме нажать ctrl+p и сразу увидеть где косяки с разметкой, как оно выглядит и вообще...

Нюансы:
1) хтмл должен быть заточен под вывод на печать, цсс для принт медиа специфичен, но не особо сложен
2) Для серверного хорма цсс/жс/картинки должны содержать полный локальный путь до файла
3) Есть некоторый нюанс с яваскриптами, работающими "не мгновенно", иногда надо поиграться с задержкой, там в параметрах оно настраивается.
Пример

0)

не работает.

Это не ошибка, это ваше предположение. Смотрим консоль, читаем ошибку, пишем сюда.
1) Не используйте заглавные буквы, пробелы и нелатинские символы в именах папок (везде) и файлов, доступных по веб, это критично в части случаев.
2) Разберитесь с путями, вы точно что-то не там кладете, или не там запрашиваете.
3) Скорее всего при запуске сервера папки с файлами у вас будут иметь совершенно другую структуру (не помню как там на шарпе все это компилится), так что ссылки на стили будут другие...

дисплей блок и высота ширина 100%?

на среднем размере сделать 2 блока в ряд, а на мобиле по 1, все в столбик.

background-image?

Что можно сделать?

Не использовать таблицы? С дивами все решается достаточно просто, зачем использовать табличную верстку для адаптива?

Как избежать накопление неиспользуемого CSS-кода в ходе жизни и развития сайта?

В общем случае - никак. Если не следить за привязкой кода к цсс в процессе изменения, то такая фигня будет накапливаться естественным образом.

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

MIYA112412,

времени просто до нг

Имхо только фриланс. На понимание базовых вещей и создание рабочего кода уйдет скорее всего гораздо больше времени. А так за условные 20 баксов получите рабочую версию своих хотелок.

Оптимистичный вариант - если базовые знания на достаточном уровне - возможно успеете под бой курантов.
Пессимистичный - зря потратите время на кривой малорабочий код, сэкономив 20 баксов.

1) Подучить php и написать на нем какие-то формы.

Нужно правильно создать формы, соответственно подучить раздел "формы хтмл", и соответственно обработку гет и пост запросов на сервере. В случае пхп - глобальные переменные гет и пост. Ну и проверки на валидность данных.

2) Создать бд, с mysql знаком, но видел многие делают на phpmyadmin каком-то.

Установки и настройка окружения уже займут какое-то время, даже если поставить готовые пакеты типа опенсервера. Да, создать простенькую бд можно в майадмине, но надо понимать хотя бы базовые принципы работы с реляционными бд. В идеале - типы данных и как их верно применять, 3 нормальную форму, индексирование, внешние ключи...

3) подключить, настроить

Да, подключить, настроить. Масса туториалов, но все это время, которого у вас, судя по срокам, просто нету.

А что, просто включить все + скрыть прелоадер по готовности хтмл не вариант? Зачем все эти циклы?

если я правильно понимаю, прописан именно относительный путь: href="main.css"

Данный "относительный" путь будет работать только с файлами в одной директории. Относительный путь для файлов на хостинге в идеале должен быть указан от корня сайта, например /css/main.css, где первый слеш указывает на корень носителя, на диске это будет корень раздела (то есть аналогично c:\css\main.css в среде виндоус, или прям от корня разделов в линухе), в вебе это корень сайта - https://mydomain.tld/css/main.css.
То же самое для изображений в файле стилей, но там чаще всего идут от расположения самого файла, из которого запрашивается картинка, что-то типа ../images/bg.png, где .. означает "на уровень выше текущей папки", /images/ соответственно папка где лежит ресурс. В такой записи проще привязывать пути для изображений, независимо от папок, куда будут класть цсс, главное чтобы структура вложенности папок оставалась такой-же.

Я пытался это исправить через border-bottom-width

Документация для слабаков, да...
Спойлер - "ширина" бордера справа-слева-сверху-снизу отражает толщину линии, а не протяженность по стороне.

Самое простое решение - убрать бордер снизу, положить див в нужное количество пикселей высотой с нужной заливкой и шириной и дать маржин авто.

Нужно сделать удобный инструмент загрузки картнки (input)

Собственно инпут чем не устраивает?

с дальнейшей обрезкой (crop)

Любой плагин, которых миллион

чтобы в конце картинка помещалась на фон блока div.

Я так понимаю на сервер ее загружать не нужно? Тогда зачем вообще кроп, бэкграунд можно и так настроить достаточно гибко, как по позиции, так и по размерам.