Daria

Очевидно, нужно искать инпуты лишь после того, как они были вставлены.

$.ajax({
  url: "some_script.php",
  success: function(response) {
    //Вставка элементов на страницу.
    //Поиск и обработка.
  },
});

Код строчки свойства выше 831 чем у свойства на 707 строчки по этому переписывает

Как я поняла вам просто нужно убрать эту рамку, если да, то :

input {border:solid 1px transparent;}

Или если это для ссылок — добавляем в CSS правило:

:focus { outline: none; }

cleancss.com
csscomb.com

www.designzzz.com/tools-css-optimization

$(function () { 
	$('.h-nav ul li a').each(function () {
		if (location.href == this.href) {
			$(this).closest('li').addClass('active');
		}
	});
});

В спецификации есть пример с применением section внутри article. И нигде не сказано, что section выше по приоритету.

Мне кажется, вы путаете валидность и семантику, потому что валидатор бы указал на недопустимость такого вложения, но он скажет, что всё хорошо. Вам кажется, что так просто несемантично, а тут вопрос всегда носит оттенок холивара.

Однако, в той же спецификации сказано, что внутри article не может быть main, что логично, ведь article по сути — смысловые единицы. А вот у section такого ограничения нет, и рамки применения такого элемента широки. Возможно, вы сделали вывод на основании этого? Если так, то напрасно — будучи вложенным в article, section будет подчиняться правилам для контента article (не содержать main), и не более того.

А в остальном внутри обоих элементов допускается flow content.

Для таких штук есть transition jsfiddle.net/petroveg/z73hy18f

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

Часто в компаниях эту функцию выполняет:
Дизайнер
Так в России называют тех, кто умеет воплощать в картинках замысел. Даже если дизайнер не занимается проектированием, он должен изучать эту область.

Однако, если проектировщика нет, а дизайнер пока не в состоянии делать это сам, то вся надежда на:
Фронтенд
Человек, который будет реализовывать сложные взаимодействия, разработанные проектировщиком (или дизайнером, или им же самим). Без знания JS и ряда библиотек никому не интересен. Просто HTML и CSS уже редко кому требуются, только если работать на подхвате у фронтенда.

Если и фронтенд не может проектировать, то уже совсем слабая надежда, что это сможет
Бэкенд
В этом варианте преимущественно получаются программерсонли решения. Работу бэкенда оценить бывает не просто трудно, а очень трудно, в отличие от фронтенда, работу которого могут оценить обычные люди (правда, критерии у обычных людей весьма странные и неожиданные).

Ну и совсем невероятно, что проектирование сможет провести:
Менеджер
Его функции могут сильно варьироваться, от организации команды, до отбивания от клиентов (например, когда всё упало). Даже если не умеет проектировать (а кто в здравом уме от него это ожидает?), в стартапе он нужен. Практика показывает, что технические специалисты часто увлекаются деревьями, а лес идёт лесом.

А вот и он — человек с большой буквы Б:
SEO
Сделать проект — только начало. Потом на него нужно приводить клиентов, а значит, требования SEO должны учитываться всеми и с самого начала.

Для продвинутых
Администраторы серверов (а то напридумывают всякое, а оно вызывает то самое падение)
Писатели (контент становится очень важен)
Тестировщики (чтобы косяки не всплыли после выхода продукта)
Контент-менеджеры (кто будет лопатить тонны текста и графики)
Возможно, технические дизайнеры с перспективой роста
Ну и далее, вплоть до милых фей в баре, которые всегда нальют горячее кофе

$("input").focus();

С точки зрения производительности - меньше классов, быстрее будет обсчитываться результат. Почему? потому что меньше селекторов и выше их специфичность - быстрее стили найдут свое место в DOM.

С точки зрения производительности труда - объединение классов для элемента и возникновение множественного дублирования стилей увеличивают издержки на поддержку. Для решения проблем с дублированием можно применить препроцессоры стилей.

С точки зрения здравого смысла следует соблюдать баланс. Скажем скрытие элементов удобно делать через добавление/удаление класса с элемента. В этом случае класс будет иметь только одно css свойство, но зато будет очень удобно скрывать элементы из JS например. С другой стороны, наличие таких вещей как классы хелперы (pull-left/pull-right/clearfix), которые можно в любой момент применить к элементу и не менять стили это удобно, но становится сложнее поддерживать верстку, это сказывается на производительности и т.д. В этом ключе стоит это все заключать в более специфичные классы для конкретных элементов. Хотя тут есть масса случаев когда можно и так жить.

Можно выносить какие-то общие вещи в базовый класс и добавлять специфичные стили по мере необходимости при помощи дополнительных стилей. Например в случае с кнопками удобно иметь класс .btn и несколько классов определяющих их размер и цвет, типа .btn-small, .btn-large, .btn-orange и т.д. Но в любом случае вы должны руководствоваться здравым смыслом.

Ну и да, используйте препроцессоры стилей. И да, никогда не используйте инлайн-стили для верстки.

Для меня эффективным способом было ставить перед собой задачи и делать.
1. Калькулятор на JS
2. Валидация формы (е-майл, пусто/не пусто)
3. Небольшая игра (крестики-нолики, найти пару одинаковых картинок по кликам)
4. Таймеры (часы разных видов)
ну и так далее...

Порекомендуйте литературу для изучения WordPress
Какие есть хорошие статьи на русском по верстке под Wordpress?

вот видео :)
вот книги

jsfiddle.net/s1bf5bdL

a) Transition прекрасно работает. Просто необходимо указывать анимируемое свойство во всех состояниях:

.wrap .someclass {
    transition: all .5s ease;
    top: 150px;
}
.wrap:hover .someclass {
    top: 0;
}

b) Чтобы получился круг, вам нужно указать border-radius: 50% для квадрата:

.circle {
    width: 25px;
    height: 25px;
    line-height: 25px; // центрируем текст по вертикали;
    text-align: center; // и по горизонтали;
    border-radius: 50%;
}