Станислав Дементьев

А как вы думаете - бывают ли иные значения у свойства display, кроме none и block? Я вот слышал, будто есть ещё table-cell, например.

Давайте пройдемся по пунктам :
1) Их много. Достаточно популярный codepen

2) Что касается адаптива.
Ничего сложного в бутстрапе нет. Особенно в сеточной системе (grid system). Документация по все классам и компонентам лежит на официальном сайте
Если вы любитель смотреть видосики, то вот рекомендую этого -> чувака

3) С медиа-запросами тоже всё довольно просто.
Смысл в том что вы просто переназначаете стили для определенных блоков при определенных размерах экрана
О медиа-запросах (и не только) понятным языком объясняет Sorax

HTML+CSS реально изучить за неделю (максимум за 2).

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

я думаю вам подойдет flowmapp.com, кроме структуры там еще можно работать с контентом этих страниц.

1. Анимации. Все "стандартные" анимации вы можете посмотреть тут. В этом случае достаточно сказать верстальщику название анимации и он будет знать, что делать (названия универсальные, они не привязаны к этой библиотеке). Если анимация не стандартная - то это другой вопрос. Продвинутые дизайнеры рендерят это дело в Adobe After Effects или его аналогах, но в общем случае достаточно покадровой схемы, нарисованной ручкой на бумажке. Именно покадровая схема, по написанному тексту обычно ничего не понятно.

2. Адаптивность. Не зацикливайтесь на bootstrap. Если вам нужна просто сетка - возьмите к примеру flexboxgrid (личный опыт показывает, что люди, которые начинают верстать сразу на bootstrap, потом без него вообще ничего сделать не могут). Но ваша задача, как дизайнера, скорее понимать, как что должно выглядеть на разных размерах экрана, и уметь это нарисовать (далеко не факт, что ваших знаний будет достаточно для того, чтобы это кроссбраузерно сверстать).

А по поводу различных странных вещей и того, что обычно вызывает вопросы у начинающих - советую посетить мою страничку на CodePen. Большая часть демок там являются иллюстрациями к ответам на тостере, в их описаниях есть ссылки на вопросы.

Уточните используемый язык, так как web это не только PHP, но и python, ruby, js, java и другие.

Если нужен только html код, то в нем особо ничего сложного нет. К примеру карточка товара может выглядеть так.

<div class="preview">
  <div class="preview__image">
    <a href="#">
      <img src="" alt="">
    </a>
  </div>
  <div class="preview__title">
    <a href="#">item name</a>
  </div>
  <ul class="preview__price">
    <li class="preview__price-new">
      1700
    </li>
    <li class="preview__price-old">
      2300
    </li>
  </ul>
  <a href="#" class="preview__bay">Купить</a>
</div>

А сама страница товара

<div class="product">
  <div class="product__image"> // слайдер с картинками, или изображение или еще что
    <img src="" alt="">
  </div>
  <div class="product__info">
    <div class="product__title">
      Name item
    </div>
    <div class="product__description">
       velit esse cillum dolore eu fugiat nulla pariatur. 
    </div>
    <div class="product__property">
      <h3>Состав</h3>
      <p>Хлопок 20%, Полиэстр 80%</p>
    </div>
    <div class="product__property">
      <h3>Количество в упаковке</h3>
      <p>30</p>
    </div>
    <div class="product__menu">
      <input type="text" name="" value="">
      <button type="button" name="купить"></button>
    </div>
  </div>
</div>

разумеется помимо этого еще шапка, футер и другие необходимые блоки.

На сервере все это реализуется просто. Из базы берется список товаров, и при запросе пользователя ему отдается сгенерированная страница (как именно зависит от используемого языка и framework'a). Т.е с помощью цикла по списку товаров, на каждую итерацию генерируется код превью, и в нужные места вставляются данные товара в конкретной итерации.

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

Если после удаления в плагине что-то разъедется, то поправьте отдельно для него, как то так:
.my-plugin p { margin: 0 }