Александр Нестеров

• Если файл в папке на пк пользователя - без участия пользователя никак. Однако можно использовать FileReader.
  
• Если файл на сервере - с помощью скрипта на сервере.
  

Для написания серверного скрипта можно использовать любой язык программирования, в том-числе JS (если быть точным то node.JS), при этом работа с файлами в них реализована из коробки и никаких библиотек не нужно.

Насчет темы: я, например, делал информационный сайт вуза. В общих чертах:

• Интерактивное расписание: Фильтрация по факультетам, группам, по наведению на пару отображение дополнительной информации о паре (Фио преподавателя, тип занятия), поддержка "1-й/2-й недели"
  
• Каталог учебников\методичек\т.д. с фильтрацией.
  
• Новостная лента
  
• Рассылки: при изменении расписания, добавлении материалов и т.д.
  
• Боты для соц-сетей/мессенджеров, по запросу получающие данные с сайта по rest api
  

Преобразовать json-строку в структуру данных php.
Далее варианта 2:
Вариант 1: Пройтись циклом по получившемуся массиву и в каждой итерации формировать новую строку с html и данными, после чего дописывать к предыдущей.
Вариант 2: Использовать шаблонизатор.

Догадываюсь, что это делается через цикл

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

• PHP
  
• JS (в виде nodeJS)
  
• Python (flask)
  

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

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

1. Гуглите список языков, на которых пишут бекэнд
   
2. Выбираете тот, который вам понравиться больше (важное замечание: написать можно на любом, но часть будет несколько избыточна)
   
3. Изучаете его
   
4. Изучаете принципы работы с Базами Данных (минимум три аспекта: sql, принципы проектирования и нормализации баз)
   
5. Пишите
   

Дополнение: если цель - сохранить статистику каждого юзера только для него и задачи "анализа" не стоит, то можно использовать local storage или куки.

Вариант 1:
Сохранять данные в localstorage
Недостатки:

• Данные хранятся только в браузере конкретного клиента.
  

Вариант 2:
Отправлять данные на сервер, на котором они будут храниться в базе данных.
Недостатки:
Нужно изучить:

• принципы взаимодействия клиент-серверных приложений
  
• серверный язык
  
• Принципы разработки баз данных
  
• Язык запросов sql
  
• Принципы работы с базой данных на выбранном языке
  

отвалится через год по каким то своим причинам

Сам по себе сайт ложится не может.
Это вопрос исключительно конфигурации сервера и качества кода.

Понятно, что требуется apache + mysql,

Кому понятно? А почему не postgresql и nginx?
Если на этой связке крутятся остальные сервисы, то вопросов нет,но из текста не понятна категоричность в выборе.

А вот что выбрать на бэк?

Обьективный ответ: Выберите то, на чем умеет писать ваш разработчик(и) или согласитесь на то, что выберут фрилансеры/команда разработчиков.
Субъективный ответ: Я бы написал либо на PHP либо на python Flask потому что знаю эти языки.

Процесс сохранения в базу имеет 2 взаимосвязанных части:

• клиентская, которая обрабатывает ввод данных пользователем, сериализирует введенные данные данные (по факту - приводит к одному из стандартов, например json), после чего отправляет данные на сервер.
  
• Серверная часть получает данные, если нужно как-то их обрабатывает, после чего сохраняет в базу.
  

Судя по коду (с js`ом я, увы, на вы) при вводе символа в ячейку, ее содержимое отправляется post-запросом по определенному адресу.
Как этот запрос обрабатывается на сервере - непонятно, т.к. код вы не привели. В общем случае, это должно происходить так:

1. Валидируются данные
   
2. Происходит подключение к базе
   
3. Данные подставляются в запрос (подготовленные запросы, PDO (актуально для php, указанного в тегах) или orm)
   
4. Запрос выполняется
   
5. При необходимости отдается ответ клиенту
   

P.S. К тому же, непонятно как вы определяете, какие данные нужно изменить. Чтобы изменить запись в базе нужно указать какую именно запись вы собираетесь изменить (например с помощью id или какого-то другого уникального поля). При этом, поскольку вы отправляете только одну ячейку, сделать это невозможно, поскольку поле может содержать неуникальные значения по типу цены (абстрактный пример), которая может быть одинаковой для разных товаров.

В контексте самого HTML/JS - никакого.
Но вообще, это список зависимостей для какого-то установщика/сборщика.

Используйте шаблонизатор. Twig, например.
Правда большинство (а может и все, специально не искал), требуют бекенд на php/python/nodeJS и т.д.

Препроцессоры это не какой-то отдельный/новый "язык" заменяющий css. Они просто позволяют более комфортно и быстро создавать конструкции в css.
После написания стилей их нужно преобразовать в css. Чем и как - зависит от многого
(Можно через ide/gulp`ом/библиотекой для серверного ЯП)

1.Для того-чтобы выводить данные из бд, нужна серверная часть, написанная на одном из языков программирования:

• php (или фреймворки, но не обязательно)
  
• NodeJS
  
• Java (фреймворк spting boot)
  
• Python (фреймворки django/flask/fastAPI)
  

Есть еще несколько, если хотите - загуглите "языки для бекэнда".
Что с этим делать?
Для начала - выбираете язык и просто учите, в отрыве от сайтов и т.д. (c php будет сложнее, т.к. он заточен под веб, но даже так - сперва учите основы). Не обязательно выбирать в слепую, можете попробовать несколько, на уровне написать что-то чуть более сложное, чем классическое "hello world!", и тот, что приглянулся больше - выбрать как основной и учить.
Параллельно изучите sql и архетиктуру БД. Когда поймете, что без ежесекундной подсказки от гугла, можете писать код, начинайте изучать непосредственно веб.

Да, уже лет десять как.
Верстают блочными элементами (не только div`ами, но и другими, по типу header, footer, article и пр.), к которым применяют следующие стили (на выбор):

• flex
  
• grid
  

В целом, с каждым из них можно добиться одного и того же, но разными путями.
"Какой использовать?" Попробуйте оба варианта, и в общем случае используйте то, что зайдет больше, а когда нужно будет другое (по тз или при доработке существующего), просто переключайтесь временно на него.