Дмитрий Клусевич

Я бы немного изменил бы разметку, обернул бы элементы в блоки с общим классом и прописал бы общие стили. например float, повторяется кучу раз, не оптимально совсем. у вас также не почищен поток, можно добавить после элементов с float пустой див со стилям

.clearfix{
margin:0;
padding:0;
clear:both;
}

Но с точки зрения семантики это не правильно, лучше

.headerWrapper:after{ 
content:" "; 
display:table; 
clear:both; 
}

Что касается сползающих элементов,они имеют фиксированную ширину, и в данном случае блоку родителю можно задать ширину в пикселях, т.к. по умолчанию ширина 100% , или ограничить с помощью min-width. Но в при данных условиях это не обязательно. Беглы осмотр, но оптимизации код ваш требует, глобальной))) удачи в учебе)

Можно использовать нативные средства и JS (learn.javascript.ru/multi-insert) и строить структуру прямо в файле скриптов, стилизовать и добавлять поведения там же, а потом файл где-то в облаке держать(если сайты на разных хостинга) или в корне(если на одном хостинге) и подгружать через . Главное ,чтобы структура сайтов была похожей) Но если сайтов не много, это решение может быть не нужно, зачем лишний раз нагружать клиент.

он не оборачивает, а возвращает div c текстом ds. Это если следовать логике. Хотя такие конструкции мне не попадались)

код эмулирует поведение input. Без js толкового, кроссбраузерного решения нет. Тут fileApi используется, штука относительно новая. Я бы посоветовал делать jquery + css, есть решение более компактные. Правда без нативного js. алгоритм прост 1. Поменяем input на псевдо-элемент. 2. По клику псевдо-элемент отрабатыаем событие input 3. выводим результат(путь к файлу), если надо.

jsfiddle.net - примерчик сюда. И стили и разметку нужно видеть.

С помощью медиа запросов.

@media screen and (max-width: 640px) {
  .wrp1{
    min-width: 100%;  
}

форканул ваш код)
с шириной можно поиграть

Иметь понятие обязательно)

jsfiddle.net/j6ps6ucr/1 Вот что наверное нужно. можешь поиграться с шириной и медиазапрос ставь по твоим нуждам

вешай функцию на backspace с помошью событии keydown/keyup/keypress

flex-box. Новая и гибкая не везде поддерживается правда. Вот доклад на тему video.yandex.ru/users/ya-events/view/3226 .

под ie нужен шрифт eot . Стабильное кроссбразерное решение(форматы eot, woff, ttf, svg).

@font-face {
    font-family: 'user-font';
    src:     url('/fonts/user-font.eot?limds3');
    src:     url('/fonts/user-font.eot?#iefixlimds3') format('embedded-opentype'),
              url('/fonts/user-font.woff?limds3') format('woff'),
              url('/fonts/user-font.ttf?limds3') format('truetype'),
              url('/fonts/user-font.svg?limds3#arrow') format('svg');}

Учить JS. Понадобится думаю)

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

Работа с базой. При перезагрузке страницы все скрипты сбрасываться и отрабатывают по новой. Значение селекта не сохраняется, а становится по дефолту. Можно конечно извратиться и из url какой -нибудь индекс удить и по нему ставить, но это не правильно, такие вещи обычно на beck-end'e делают. Есть вариант локальное хранилище, но не во всех браузерах работает.

Так и в вставляй. Только расширение файла должно быть php а не html и он должен быть на сервере(чтобы сработал интерпретатор), а не в локальной директории, можно локальный сервер)