Ivan Bogachev

Вот как-то так (кроссбраузерность не проверял, но должно работать IE11+).

По-хорошему стоило бы нарисовать точки в виде SVG-картинки и анимировать ее части, а не div элементы, как я сделал, но общая концепция должна быть понятна. Поведение с опцией hidden можно заменить на :hover у вашей кнопки.

Этот функционал находится в стадии черновика и в некоторых браузерах уже есть из коробки. Вероятно вам нужен smooth scroll polyfill. Разумеется никто не мешает в образовательных целях посмотреть его исходники.

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

Как не показывать прелоадер если у человека выключен JS?

Можно посмотреть на вопрос с обратной стороны и показывать ваш прелоадер с помощью JS. Там, где нет JS - не будет и прелоадера.

Как исправить кучу ошибок цсс в валидаторе?

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


Имеем 9 ошибок с вашего сайта. Из них (с повторениями, -webkit-min-device... не считаем):
- Property user-select doesn't exist : none - это свойство из черновика CSS4. Все ок.
- Property touch-action doesn't exist : pan-y - относится к спецификации Pointer Events, а не CSS. Все ок.
- Value Error : cursor hand is not a cursor value : hand - вот тут ошибочка, cursor: hand не бывает.
- Value Error : margin-top Unknown dimension 10px\9 - что-то тут не так со значением отступа.

Последние две ошибки стоит поправить, на остальное можно забить.

По вашим словам кажется, что вы понятия не имеете о том, какой инструмент для чего нужен. Так что рекомендую следующий план:

HTML: практика -> Pug или любой другой препроцессор -> понять зачем он нужен -> микроданные -> wai-aria
CSS: практика -> каждый день выкладывать один сверстанный компонент на CodePen -> всякое разное -> изучить внутренности normalize.css -> использовать autoprefixer -> изучать хорошие практики -> написать свою сетку -> познакомиться с БЭМ, RSCSS -> осознать полезность методологий -> препроцессоры (LESS проще, SASS моднее, есть еще много разных) -> PostCSS -> осознать разницу между пре-процессором и пост-процессором
JS: ES6+ -> Babel -> понять смысл инструмента -> писать много велосипедов -> много велосипедов -> больше велосипедов богу велосипедов -> паттерны проектирования -> тестирование
Gulp/Grunt и Webpack/Browserify: осознать разницу -> использовать по мере надобности -> научиться автоматизировать все, что можно автоматизировать
Git, NPM: без комментариев

А дальше, когда вы будете владеть тем, что нужно везде, уже встанет вопрос о ваших задачах. Существуют тысячи библиотек и фреймворков, каждый из которых хорошо решает одни задачи и плохо решает другие. Расширяйте кругозор и выбирайте инструменты исходя из задач.

Есть еще один дельный совет: читайте ответы на тостере и изучайте решения, которые народ предлагает. Разбирайтесь с тем, как они что-то делают. В перспективе сами отвечайте. Метод утенка рулит.

Ну и умение задавать вопросы тоже лишним не будет.

сидели-сидели и вдруг их озарило такое решение

Такого не бывает. Ни в какой области. Человек не может придумать то, что никогда не видел. Просто вы долго смотрите, впитываете информацию (из разных областей), а потом берете известные кусочки информации и компонуете их каким-то новым образом. Чем большим количеством кусочков вы обладаете, тем больше вероятность того, что у вас в нужный момент окажутся нужные кусочки и вы "угадаете" решение. Задачи, которые не относятся к шаблонным, типичным для вашей повседневной деятельности, решаются именно так, хотя вы можете об этом и не задумываться.



Можно дать лишь один совет: расширяйте кругозор. Читайте про все подряд. Собирайте те самые кусочки информации и в нужный момент сможете быстро собрать их в единое целое.

Взял ваш файл, в котором ошибка, загнал в beautifier, он показал следующее:

Иными словами, первый однострочный комментарий сразу вырубает часть кода при превращении его в одну строку. Пользуйтесь нормальной минификацией, при которой удаляются комментарии.