Поделюсь с вами вот такой ссылкой:
https://www.youtube.com/playlist?list=PLswdBLT9llb...

Советов надавали, я накидаю ссылок:
Веб-стандарты Этот канал интересен уже тогда, как основа заложена. Много полезных и интересных докладов.

Дмитрий Лаврик Много бесплатных материалов, классные платные курсы, для новичков и для среднего уровня.

HTML Academy Много хороших материалов для изучения

Илья Кантор Много материала по JS

Master-CSS Здесь я нашел много бесплатных видео по настройке разных плагинов, в общем, для старта отлично, но когда поймешь JS, то сам сможешь разбираться.

Шпаргалка по jQ В голове такие вещи обычно не держу, что-то, что часто использую помню наизусть, а так - всегда подсматриваю.

Learn JavaScript RUS Классный учебник по JS.

CodePen и JSFiddle В процессе обучения важно на практике применять полученные знания. Каждый раз собирать файлы, шаблоны, подключать либы, настраивать сборщики и тд лениво, очень классно, что можно в браузере сразу все сделать и даже сохранить, расшарить.

Webmassa SVG Видео по работе с SVG.

Юра Артюх Классные стримы по созданию анимаций. WebGL, SVG, Canvas, CSS - все тут.

StackOverflow Авторитетный ресурс по поиску решений.

Документация MDN Документация от разработчиков Mozilla. Есть на русском. Вообще, надо научится читать и понимать документацию, так как знать все на все случаи жизни нереально, профи умеют искать и читать документации. Для этого надо бы подтянуть английский.

W3C Specs, W3School - инфа из первых рук.

Писал ссылки по мере попадания под руку)

Успехов!

Для работы с полями ввода есть набор событий:
1. focus - пользователь поставил фокус на поле ввода.
2. blur - пользователь убрал фокус с элемента вода.
3. input - пользователь как-то что-то ввел. Это лучше, чем keyup, ибо не надо проверки keyCode, второе потому что пользователь может в поле вставить текст, что тогда будет с Вашим keyUp? Событие input срабатывает каждый раз, как пользователь сделал изменение в поле ввода.
4. change - пользователь ввел данные и убрал фокус с поля ввода, то есть это input + blur. Событие происходит не так часто, как input, но и не заставляет проверять value на изменение, как это придется делать при blur.
5. submit - срабатывает на всей форме, при попытке отправить данные, в данной задаче скорее не интересное событие.

Для живого поиска логично использовать input, по которому надо отправить текущее value через ajax на сервер и далее ответ куда-то распечатать. Вопрос в другом, ведь событие срабатывает довольно часто, и кто-то печатает так быстро, что и запрос-ответ не успеет, поэтому логично сделать тут debounce с задержкой в приблизительно 300мс, чтобы отправка/получение сработало когда пользователь притормозил в наборе текста или вообще прекратил ввод.

Не работает и работает не будет! Надо понимать, что такое переход из состояния в состояние, а что такое дискретность. Дело в том, что есть состояния, которые плавно перетекают, а есть только такое или такое. Например, ребенок растет плавно, вот ребенку один год, вот прошло два месяца и уже год и 2 месяца, как ни странно, а вот ему уже 43, а есть (сейчас не будем про хирургию) дискретное состояние ребенка или человека, это девочка или мальчик, человек либо родился такого пола, либо другого, нет переходного состояния, как в случае с возрастом. Зачем это понимать и знать? Потому что transition отработает только для свойств, которые переходные, но не дискретные. Например, есть ширина 0 пкс, добавим 1 пкс и ширина уже 1пкс, добавим еще 20 - 20пкс, такое свойство можно анимировать. Есть прозрачность 0, а есть 0.1, а есть 0.2, 0.5, 1 - тоже можно. Но, есть display: block, а есть display: none, это дискретные состояния, либо есть, либо нет, анимации не будет, зато можно блок показать/скрыть с помощью анимации на его ширину, высоту, прозрачность... Цвет, как ни странно это тоже величина, которая имеет переходные состояния, например в препроцессорах можно написать #ccc + #eee и получить новый цвет, так как цвета задаются, по сути, просто числом, и увеличивая/уменьшая число получаем анимацию. А какой переход между двумя картинками? Никакого, только такая картинка или такая, поэтому, чтобы сделать плавную анимацию надо пробовать, разве что, прозрачность блока с фоновым изображением.

А где тут рекурсия? Здесь функция вызывает функцию и не более. Здесь есть цикл.
Сначала объявляется функция с параметром n. Далее создается переменная sum, она локальная внутри функции. Сначала равна 0.
Далее запускаем цикл, и задаем условия цикла, что пока переменная i, которая сначала равна 0, не станет меньше чем, или равен параметру n, надо выполнять действия, которые в фигурных скобках, а в конце каждого цикла переменную i увеличиваем на 1. В цикле берем переменную sum и к её текущему значению прибавляем значение i. После того, как цикл завершится функция возвращает sum. В итоге получаем в алерте сумму всех последовательных чисел от одного до 2, в данном примере, то есть 3.