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

В таких случаях используют паттерны разработки.
Я б посоветовал начать с MVC (Model View Controller)
Для работы с БД в Node.js советую юзать ORM(это паттерн изучение которого поможет в многих проектах). для node+postgres советую sequelize это даст вам M из MVC. то есть модели.
Далее за V у вас будет отвечать Angular, ну а контроллеры придётся писать самому. Поставьте себе серверный проект типа Express и гуглите гуглите гуглите))

Как получить данные со страницы в инете?

Если это удалённый сервер, то надо убедится что не будет проблем с CORS

Как прописать, если категория x, то картинка x?

Екатерина Ивасенко, Не за что)) Успехов)

Как прописать, если категория x, то картинка x?

Сомневаюсь что смогу помочь с решением, и вопрос скорее по PHP, но пищу для размышлений дам.

1) если это всегда один и тот же SVG но надо менять заливку внутри него в зависимости от категории, то это можно сделать только через тег <object> с использованием JS(если не знаете, то гуглите "доступ к контексту <object>" или "изменение svg через <object>")

2) Для того чтоб проделать выше сказанное вам не подходит тот способ вывода который вы используете вам нужно получить так называемый "пермалинк"(прямую ссылку на изображение, без вывода тега img) вроде как это делается через "wp_get_attachment_image_src()" опять же найти точный способ не должно составить труда

3) вам так же понадобится получать ID категории поста если не ошибаюсь делается это так "get_the_category($post->ID);" и после получения этого ID можно сделать следующее:

<object data="<?php echo wp_get_attachment_image_src($attachment_id) ?>" width="300" height="200" data-cat="<?php echo get_the_category($post->ID); ?>">

А после уже в js на основе информации из "data-cat" воздействовать на SVG как я уже писал ранее.

P.S. сверху приведён скорее псевдо код, в действительности работать скорее всего оно будет по другому

P.S.S Надеюсь смог помочь ну или подтолкнул в нужном направлении))

Как сделать в инпутах текст, через js?

Elena0394, Не за что)) Успехов вам)

Как сделать в инпутах текст, через js?

Elena0394, Не уверен что это то что вы ищите, однако проблема в том что у вас весь код в теле функции которая выполняется только при событии "submit" на форме соответственно чтоб оно выполнялось и при загрузке странице надо её отдельно вызвать, а так как плюс ко всему надо ещё и предотвратить отправку формы если человек её сохраняет нам надо проверить существует ли "event", вообщем вот попробуйте и отпишите устраивает ли вас такое решение:

function Profile(event) {
  if(event) {event.preventDefault();}
  const profileName = document.querySelector('.container').elements.profileName;
  const aboutMe = document.querySelector('.container').elements.aboutMe;
  profileName.value = document.querySelector('.Name').textContent;
  
  document.querySelector('.Family').textContent = aboutMe.value;
  
  
}

Profile()

document.querySelector('.container').addEventListener('submit', Profile);

Как сделать в инпутах текст, через js?

Elena0394, Пока что не за что)) Если я вас правильно понял то вы хотите чтоб была возможность непосредственно менять H1 и уже после его изменения менялся инпут, осмелюсь предположить что в итоговой вёрстке вы планируете вообще спрятать инпут, и они вам нужны только, для сохранения введённых данных, я верно всё понял?

Как сделать в инпутах текст, через js?

Могли бы вы подробнее описать ситуацию, иначе помочь будет сложновато, при каких обстоятельствах текст в инпутах должен соответствовать тексту в вёрстке а при каких нет?