Сергей Сунцев

Зато используя чистый html наш сайт будет 100% адаптивный, под любые экраны!

Но на мой взгляд это целое искусство. Нужно очень долго подбирать шрифт, в нужном месте делать отступы, всё "отверять-выверять" по "золотому сечению", в нужном месте выделять "жирным-полужирным" и т.д.

А заказчик скажет, что всё плохо и нужно переделывать.

Задать ему размеры

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

<section>
  <footer>
    <address>
      <h1>Контакты</h1>
      <ul>...</ul>
    </address>
    <p>&copy; Вася Пупкин</p>
    <p>И ещё чьи-то права</p>
  </footer>
</section>

Так будет семантически верно, для удобства параграфы можно в div поместить.
подробней тут: frontender.info/the-art-of-html-semantics-pt1

$("селектор куда вставляем").append("<div>...</div><div>...</div><div>...</div><div>...</div>");

вот 4 дива

Будет растянуто и не красиво, в адаптивной вёрстке лучше изображения так не использовать.
Но если крайне надо, то используйте стили:
background-size: cover; (изображение растянется внутри блока), либо с % поиграйте.
Чтобы было фиксировано в bootstrap используется класс navbar-fixed-top.

Советую интерактивные курсы, сам с них начинал.
К примеру:
htmlacademy.ru - полностью на русском, большая часть бесплатно.
www.codecademy.com - англ, но тоже не плохая подача.
webschool.pspu.ru - полностью на русском, полностью бесплатно, но пока ещё бета. и т.п.
Интуит не советую.

https://htmlacademy.ru/ -тут всё довольно грамотно изучается

webschool.pspu.ru - мой проект, не такого высокого уровня, но я стараюсь, и всегда помогаю учащимся

есть англ варианты типа https://www.codecademy.com/