Как устроен тренажер для развития навыков верстки

Чтобы круто верстать, мало знать теорию. Нужно еще развивать автоматизм и насмотренность — тогда руки будут сами выдерживать правильные расстояния и исправлять пережатый интерлиньяж. Чтобы развивать насмотренность и автоматизм у студентов Школы редакторов, я сделал тренажер: maximilyahov.ru/trenazher

Как тренироваться

Смотрите на две картинки и выбираете, какая из них сверстана лучше — неважно, умом или интуицией. Если ум и интуиция вас не подвели, получаете баллы и двигаетесь дальше: нажимаете «Еще» или повторно кликаете по картинке.

Как работает

в тренажер загружено 35 заданий, каждое — на какой-то один аспект вёрстки, например, на интерлиньяж в абзаце. В каждом задании есть эталонная картинка и несколько других, в которых мы отходим от эталона. Например, в картинке 00.png нормальный интерлиньяж, в 01.png его немного сжали, в 02.png еще немного, а в 04.png он пережат выше меры:

Скрипт берет две случайные картинки из задания и выводит в случайном порядке на странице. Нужно выбрать более «старшую» картинку, то есть ту, которая ближе к эталону или к нулю. Между картинками 02.png и 04.png нужно выбрать 02.png, а между 00.png и 02.png — самую старшую, 00.png.

Скрипт работает очень нехитро: правильная картинка размечена в коде, и при желании можно подглядеть. Но задача — не найти правильную карточку, а научиться видеть более крепкую вёрстку, довести это до автоматизма.

Что вы можете сделать

Вы можете тренироваться без ограничений и развивать насмотренность. Со временем я буду добавлять в тренажер новые задания.

Вы можете залезть в код, упасть в обморок от этого ужаса и предложить рефакторинг. Но предложить не на словах, а на деле. Ограничение: чистый JS, без серверной части, названия заданий и файлов могут меняться. Еще я хочу, чтобы если человек ошибся, его погоняли по этому же заданию раза три-четыре. Ваше имя появится в подписи к тренажеру. Проект некоммерческий, денег и рекламы не будет.

Вы можете предложить картинки с заданиями, например, прислать по пять картинок на тему «гарнитура» или «кегль и интерлиньяж». Важно: внутри задания всё меняется только по одному параметру и только в одну сторону. Например, если хотите сделать задание на длину строки, то на протяжении трех-четырех картинок длина строки должна только увеличиваться. А потом в отдельном задании — уменьшаться.

Вы можете рассказать всем о тренажере и Школе редакторов. Пока вторая ступень тренируется, мы набираем первую ступень на осень.

Для пожеланий и предложений: maxim.ilyahov@yandex.ru

Дальше