DTX

Обратить внимание на стили для ссылки.
Если шрифт не нулевой то может блок чуть съезжать вверх-вниз. Ссылка изначально имеет вывод в inline формате, поэтому некорректно отрабатывает высоту. Надо ставить inline-block

.a {
  background: #bbb;
  height: 4rem;
  line-height: 4rem;
  font-size:0;
  display:inline-block;
}

.b {
  background: #888;
  display: inline-block;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 0.5rem;
  vertical-align: middle;
}

Первый вариант. Указать у блока родителя line-height равный height. В том случае если высота в абсолютных единицах. Вроде как с относительной высотой такое не прокатит.
Второй вариант. намного оптимальнее. Использовать flexbox.
У внешнего блока родителя указать:

display: flex;
align-items: center;

Возможно ITG.Flat.

То, что внутри $() (в конкретном случае анонимная функция) должно вызваться после завершения загрузки страницы.

Не умеет. И не для того предназначены внешние ключи. Они служат для сохранения целостности связанных данных. Чтобы вы, удалив или обновив юзера в таблице пользователей, не забыли удалить или обновить его статус.

.l {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Так у h2 padding задан же

.h2 {
    background: #aaa;
    /* padding-top: 0.2em; */ 
...

stackoverflow.com/questions/149055/how-can-i-forma...
numeraljs.com

Почему блок заходит на плавающий блок?

- float выводит документ из потока

div {
  border: 2px solid;
  display: flex;
}

.a {
  height: 3rem;
  width: 3rem;
}

.b {
  flex-grow: 1;
  height: 3rem;
  border: 4px solid #f00;
}

codepen.io/anon/pen/rLwXZo

.b {
  height: 3rem;
  border: 4px solid #f00;
  overflow: hidden;
}

так и провернуть

@media all and (min-width: 550px) and (max-width: 600px ) {
}

Медиазапросом никак. На js можно

www.rubydoc.info/search/gems/slim?q=rand



Как вариант - во время сборки проекта gulp'ом или grunt'ом писать рандомные данные в .json, а slim'ом читать их.

Два блока друг над другом с линейным градиентом, цвета которого указаны в формате rgba

Пример

div{
     background: linear-gradient(to left, rgba(255, 255, 255, 0.3) 20%, 
                                          rgba(255, 0, 0, 0.7) 60%, 
                                          rgba(255, 255, 255, 0.3) 80%),
}

Проценты (или другое значение) указывают расположение (в данном случае от левого края)
О градиентах можно почитать тут