Андрей

Я как-то писал форму на 300 полей с конфигуратором, тоже всю структура в JSON бахнул, на каждый элемент шаблончик и скриптами собирал страницы.

потому что обработчик сабмита на onSubmit тега формы надо вешать и там уже валидацию производить

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

Я этот взял wedgies.github.io/jquery-emoji-picker/demo.html

У него смайлики вшиты в CSS, не надо стопицот картинок подгружать.
Второй плюс в том, что он нормально работает со стандартными инпутами, не нужно никакой магии.
Единственное с чем пришлось конкретно загимориться (это никак с самим плагином не связанно) это отсылать эмоджи в subject'е мейлов, при том, что там кодировка ни разу не UTF (с легаси сложно спорить... :) )

Мне вот этот вариант понравился https://www.youtube.com/watch?v=KFVoIzaGPYg

Обрати внимание на flexbox, он уже актуален везде, после обрати внимание на css grids
Так же обрати внимание на ES2015, ES7, ES.NEXT, после чего на React.JS/Angular.2+/Ember.JS/Vue.JS/... на выбор. Ну HTML5 само собой разумеется. Так же неплохо хотя бы по верхам понимать HTTP и AJAX, если еще websockets добавить, то вообще замечательно. Ну там еще всякие линтеры, вебпаки, лесс/сассы и прочие ноды тоже будут весьма полезны.

В целом в последние годы порог вхождения в годный фронтенд резко подрос, у тяп-ляпщиков все меньше и меньше возможностей пробиться.

В общем в голову впихнуть придется столько, что мама дорогая.

Это я еще ни слова не сказал про алгоритмику, которая тоже важна, т.к. без нее будешь страдать, как только придется что-то программировать сложнее, чем пара строк.

Короче желаю удачи, упорства, усидчивости, концентрации, воли и откорректировать планы в сторону увеличения времени и сил на освоение раз, эдак, в дцать... :)

Я за React+Webpack

Я много, долго и упорно делал на jQuery+Vanilla JS сложные динамические формы, которые строил генератор по мета-данным.

После одного особо зубодробительного проекта, где в форме была куча нелинейных зависимостей (интеграция потоков данных для циан и внутренней CRM заказчика), когда через некоторое время зависимости нужно было изменять в виду изменившихся условий работы, я познал боль. :)

К тому же прямые манипуляции на DOM для меня стали еще большим злом.

В общем от jQuery как основного движка на фронтенде я отказался категорически, сейчас плотно изучаю React+Redux и ище с ними, предварительно проведя исследования по основным мейнстримовым фреймворкам и библиотекам для фронтенда.

Мне зело симпатишна идея рулить состоянием, а чтобы интерфейс при этом выстраивался автоматически.

Ну и на бэкенде до кучи решил мигрировать на Node.JS, ибо это позволяет отказаться от веб сервера как обязательного элемента-посредника между фронтендом и бэкендом, к тому же это позволяет хранить активное состояние нативно, что доставляет неимоверно.

В совокупности с ES-2015 это всё становится приятнее и интереснее.

Да, безусловно, есть там и свои проблемы, тем не менее прогресс не стоит на месте.

Я отказался от прямых динамических манипуляций в DOM посредством хоть jQuery, хоть Vanilla JS. На мой взгляд это зло, которое ведет к полной и тотальной непредсказуемости поведения приложения и формированию обширного поля для неуправляемых багов.

Наш путь - React.JS, когда интерфейсы генерятся из данных, а ты меняешь только данные.

Я бы зашел с другого края, CSS и HTML это все прекрасно, но это все не более чем способ описать интерфейс.

PHP однозначно отстатвить в сторону, как и MySQL.

Коли уж вознамерился стать фронтендером, то должен до глубины души осознать, что никакого фронтенда во второй половине 10-х годов 21-го века от Р.Х. без JavaScript, вернее даже Ecma Script 2015+ не будет.

Таким образом, я настоятельно рекомендую прям вот вгрызаться в хитрости и нюансы JS, начиная с ES5, и походу пьесы добавляя нововведения, которые обязательно появятся. И практиковаться до умопомрачения в кодинге, например на том же codewars.com

Обязательно для вдумчивого просмотра https://www.youtube.com/watch?v=Bv_5Zv5c-Ts

Из фронтенд фреймворков для себя я выбор сделал в сторону React+Redux т.к. философия, имплементированная в этих библиотеках и их подходе к вопросу разработки интерфейсов целиком и полностью совпадает с той парадигмой, к которой я пришел собирая много лет грабли на своем собственном тернистом пути разработчика, в том числе и фронтенда.

Приятным бонусом будет то, что для разработки под Node.JS будет заложен хороший универсальный фундамент.

Тех, кто будет тебе рассказывать про Web-assembly не слушай, ближайшие годы это направление будет уделом очень узкого круга энтузиастов.

Если английским не владеешь в достаточной мере, чтобы свободно читать и слушать материалы, рекомендую задуматься и осознать, что актуальных материалов в русском переводе раньше чем через 6+ месяцев редко можно отыскать. Если хочешь быть на гребне волны, базовое владение инглишем must have. Вот тут обсуждение этого вопроса Английский язык от профессионалов?

Как вариант, если надо именно на клиенте, то надо немного переделать верстку, сделать 2 класса типа .day и .night, и скриптом применять один из классов блоку в зависимости от условия...

А так предыдущий камент вполне раскрывает суть.

Есть блоки, которые применяются постоянно и кочуют из проекта в проект. Например роутер - блок кода, который решает, как и чем обрабатывать запрос. Или, например, блок, который готовит данные для отображения в jqGrid по AJAX запросам. Или блок, который занимается аутентификацией/авторизацией.

В целом по мере накопления опыта за годы выкристаллизовался мини-MVC-фреймворк, который вполне справляется с возложенными на него задачами. Конечно это поделка на коленке и для серьезного продакшена не подходит, но при этом 30 тысяч уников в сутки держало на хлипеньком шаренном хостинге нормально... :) И да, ломать пытались постоянно, но безуспешно. В том числе благодаря библиотеке DBSimple.

Скорее всего там адаптивная верстка, и при изменении размера экрана блоки выстроятся по вертикали.

Верстать только исключительно дивами...

Я бы рекомендовал найти туториалы поадаптивной верстке хоть на том же ютубе. Делов на пару часов...

Ember.JS

Сегодня актуален JavaScript

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

Через таймер обычно зацикливают анимацию в канвасе типа setInterval