Андрей Юрчук

Чтобы избежать головняка с contenteditable можно подложить стилизованный div под input с прозрачным текстом. Но это всё равно не будет просто, т.к. потребуется вычислять разницу состояний и анимировать именно по месту ввода.
Вот чисто концепт с анимацией только последнего символа:

Люди, которые выключают JS, находятся в пределах арифметической погрешности. Они привыкли, что 95% интернета превращается в тыкву. Можно смело на них забить.

ВСЕМ спасибо. Я дебил!

«Ты в начале крив, косой,
а потом уж Лев Толстой».

Ты молод, зелен, девственно чист перед версткой. Пока у тебя нет практического опыта а есть только теория. Все ново, все страшно. Ожидаешь от первого раза с ней романтики и нежности, а на деле — она будет жестко рвать тебя без сожаления.

«Боже, я никогда не научусь верстать как они :( ...»
«Блин эти ребята так круто делают, видимо у меня нет дара...»
«Наверно это не мое, лучше пойду я отсюда...»

КОНКРЕТНО О ПРАКТИКЕ НОВИЧКА

Все барьеры у тебя в голове Ты хочешь верстать как боженька, а как только ты делаешь ошибку ты тут же разочаровываешься в себе и считаешь, что ты ни на что не годен. Любой, кто что-то учит сталкивается с этим, просто нужно свыкнуться что от косяков никуда — это часть прогресса. Желательно разобраться с собой, в том смысле, что многие бросают свои начинания, увидев на пути даже маленькую преграду. Дальше будут разочарования собой, усталость и много чего еще в голове.
Нужно просто пережить первые шаги, дальше будет легче.

Не нужно сразу пытаться сверстать весь сайт, научись верстать отдельные кусочки. Уверен, ты каждый день сидишь в VK. Поставь себе цель — Сверстать страницу регистрации VK например за три дня. Сегодня например сверстай шапку (без перфекционизма). Начни с малого. Со временем одной левой сможешь верстать то, что сейчас тебе кажется тяжелым. Да будет не так, да многое из головы вылетит. Не беда, гугл всему голова. У любого профи есть самый главный Шаолиньский скилл — «Мастерство великого гугления». Не все его постигают в начале пути, но многие все равно придут к нему однажды.

Перфекционизм и навык PixelPerfect— качество профессионалов, мы новички должны в начале делать ошибки Не надо вылизывать каждый участок макета, к этому ты придешь сам, но тогда, когда ты уже спокойно сможешь верстать. За то время пока ты пытаешься сделать крошечный блок сайта идеальным, ты бы мог уже быстро набросать весь макет и на практике использовать сразу много тегов и увидеть их к действии. Не надо заниматься в начале созданием идеального сайта, первые сайты все равно будут говно.

Не надо вначале практиковаться по 10 часов в день. Да быстро научишься. Но и быстро выгоришь и потеряешь интерес. Все как в спорте, ты можешь пойти в первый раз в зал и долбить там хоть весь день, но завтра ты уже точно не пойдешь туда, да и вообще забросишь. Мышцы растут от прогресса нагрузки с которыми ты работаешь а не от ежедневной, многочасовой дрочи себя. Ты растратишь все ресурсы и, как я уже сказал, бросишь это дело вообще. Постепенно, понемногу, начиная с маленьких частей, ты придешь к тому, что сможешь легко сверстать большую часть макета. Потому что твои мозги тренированы и привыкли к выполнению такой работы.

Главное не останавливаться. И надо смириться, что верстальщик всегда должен развиваться. Не только теорией но и практикой. Это его дар и его проклятье на всю жизнь. А грамотно развиваться поможет только грамотный подход к этому.

Всего лишь мое маленькое, скромное мнение.

1. sadcitizen.me/code-guide
2. https://html5boilerplate.com/

Для склейки HTML-блоков (GUI-"кубики"): includeHTML

Это значит, что csrf токен не отсылается, у Вас в ajax он неправильно записан. На stackoverflow и в документации есть примеры, как его правильно отсылать.
UPD. Скорее всего не хватает этого куска:

$(function () {
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
    });
});

Переходите на флексы, забейте уже на этот еб... IE
https://codepen.io/svassr/pen/gbeGaw

Я сделал на flex, потому такая штука будет работать и в IE11. Хотя проще сделать с помощью grid. А вообще, такое можно сделать хоть на float (но не надо).



Можете их даже компоновать иначе, ничего не развалится:

Андрей Юрчук,

А JQuery в несложных операциях редко подводит. Этот случай редкость, если это вообще из-за JQ

потому что вы говорите за JQuery, а пишете какую-то лапшу перемешанную!?

см. JQuery API Documentation
.width()
.resize()
Определяем размер окна браузера (JavaScript, jQuery)

как-то так:

$(function(){
  if ($(window).width() < 1184) {
    $( "#nav1" ).css( "display", 'none');
    $( "#nav2" ).css( "display", 'none');
  }

  $(window).resize(function(){
    if ($(window).width() < 1184) {
      $( "#nav1" ).css( "display", 'none');
      $( "#nav2" ).css( "display", 'none');
    }  else {
      $( "#nav1" ).css( "display", 'flex');
      $( "#nav2" ).css( "display", 'flex');
    }
  })

  $( ".nav-logo" ).click(function() {
    if ($(window).width() < 1184) {
      $( "#nav1" ).toggle( "slow", function() {
        // Animation complete.
        // $(this).rotate(100);
      });
      $( "#nav2" ).toggle( "slow", function() {
        // Animation complete.
        // $(this).rotate(100);
      });
    } else {
      $( "#nav1" ).css( "display", 'flex');
      $( "#nav2" ).css( "display", 'flex');
    }
  });

});

Про window.matchMedia посмотрите статью:
Изучаем matchMedia API и object MediaQueryList

и судя по всему, в условии надо было писать так:

window.matchMedia('screen and (max-width: 1184px)').matches

if (window.matchMedia('screen and (max-width: 1184px)').matches) {
  $( "#nav1" ).css( "display", 'none');
  $( "#nav2" ).css( "display", 'none');
} else {
  $( "#nav1" ).css( "display", 'flex');
  $( "#nav2" ).css( "display", 'flex');
}

так же - Адаптивный jQuery без window.matchMedia

UPDATE:
Извиняюсь, гоню. переработал )))
в принципе-то ваш скрипт работает!

PS: Замените у себя все значения 1184 на 1000 на jsfiddle и раздвиньте окно с результатом на максимум, все норм (у меня просто экран узкий, не влазит, сильно не могу раздвинуть :) ).

PPS: так же все скрипты должны быть либо в конце страницы, либо вызываться по onload (см. мой скрипт)

У тебя отличаются версии Bootstrap. Подключи Bootstrap JS той же версии, что и Bootstrap CSS:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Все зависит от дизайнера, они тоже люди и часто когда мне приходят макеты, на нем стабильно разные отступы между элементами, бывает корявое отображение блоков, и тому подобное, первое время играл внутренний перфекционист, и я постоянно указывала дизайнеру на погрешности, а потом поняла что конечный итог - монетизация, и я просто трачу своё время впустую, и легче сверстать по нормальному, именно так как я вижу. Клиентам же доходчиво объясняю что такое pixel perfect, и если они это хотят и настаивают, накидываю еще сумму к заказу, обычно услышав её - клиент перестает хотеть или отваливается = profit.

так и должно быть: имя должно быть либо уникальным, либо массивом.
<input name="name[]">

Это вопрос к клиенту. Ему решать. Однако, во множестве случаев, pixel perfect возможен только ценой кучи костылей. Если требуются костыли, но клиент настаивает - он идиот.