Макс Макс

Самый простой способ, с использованием, к примеру, php,
создаёте файл header.php для хедера, footer.php для футера.
Во всех html файлах пишете
<?php include_once 'header.php'; ?> в месте, где у вас выводится шапка,
<?php include_once 'footer.php'; ?> в месте, где выводится подвал.

Далее вносите изменения в одном месте header.php и footer.php

Доброе утро ! Я предполагаю что ты совсем новичок, по этому опишу два варианта с БД, и без бд.

1
Если это типо пет проект, и тебе нужно реализовать такой функционал, банально без сервера, базы данных и тд, просто можешь сделать отдельный файл, например: cards.js и м нем реализовать:

export const cards = [
 {
  name: example,
  description: example,
  imgUrl: example,
  atData: Data.now(),
 },
 ....
]

Потом ты можешь import {cards} from 'cards.js' и перебирать все карточки и искать например те которые были добавлены за последние 24 часа, Date.now() - (1000*60*60*24) и проверять if cards[0].atData > Date.now() - (1000*60*60*24) то тогда показывать карточку, иначе нет.

Это решение можно оптимизировать, например брать последние 10 карточек из массива card и просто их предварительно сортировать что бы последнем были всегда новые. Но если у тебя не много карточек, то можно и так.

2
С БД, и сервером там намного проще и интереснее, каждая БД может по правильному к ней запросу вернуть только последние записи, например последние 10, просто заранее надо добавлять индекс 1, 2, 3... каждой записи, и тогда мы сможем получать последние записи, и выводить их, так конечно все звучит прям изи, но на практике навряд ли ты сможешь развернуть клиент + сервер + бд, настроить подключения, и делать правильные запросы. Нужно больше практики.

Если вдруг надумаешь писать сервер, для начала бери ты express + mongoDB

Потом может перерастёшь на nestJS + postgreSQL например.

В этой задаче хорошо бы генерить случайные числа без повтора максимально долго. Исчерпывать последовательность 0..n, в случайном порядке выдёргивая из этой «колоды» очередную карту. Когда колода пустеет, открываем новую.

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

// Итератор случайных уникальных - Random Unique
function getRUIterator(max) {
  let buffer = [];
  
  const ruIterator = {
    next: function() {
      if (buffer.length === 0) { // если колода пуста
        for (let i = 0; i < max; i++) buffer.push(i); // открываем новую 0..max
      }

      const index = Math.floor(Math.random() * buffer.length);
      return buffer.splice(index, 1)[0]; // вынимаем из колоды случайную карту
    }
  }
  
  return ruIterator;
}

/**
 * генерим в каждый див по случайной картинке
 * как можно дольше без повторов
 * @param int iTotal число доступных картинок
 * @param Array массив строк - айдишки div'ов, куда вставлять
 */
function placeRandomImages(iTotal, aDivs) {  
  function placeImage(n, id) {
    const img = new Image();
    img.src = `img/${n}.png`;
    img.border = '0';
    document.getElementById(id).appendChild(img);
  }
  
  // будет генерить случайные неповторяющиеся
  const RUI = getRUIterator(iTotal);
  
  for (let i = 0; i < aDivs.length) {
    placeImage( RUI(), aDivs[i]);
  }
}

placeRandomImages(2, ["imaaaga", "imaaaga2"]);

• Принципы работы сети.
  
• Принципы работы с базами данных (как проектировать, как писать запросы, как защищать, в т.ч. на уровне кода)
  
• Практически любой современный ЯП.
  
• Опционально - любой веб-фреймворк для ЯП.
  

Планирую написать его сам с нуля, поучиться, без Вордпрессов и Тильд.

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

Такому сайту кроме фронта понадобится бэк, то есть SQL и что-то из PHP/Python/ASP.NET/Node.JS.