С сегодняшнего дня решил открыть все уроки HTML-курса для новичков. Так что желающие могут пройти его совершенно бесплатно. :-)

Почему так? Для меня такая форма обучения оказалась в новинку, но полученный опыт, безусловно оказался полезным. Изначально я пытался «играть» ценой, пытаясь найти компромис между невысокой стоимостью для учеников и моими затратами на написание уроков и проверку домашних заданий. В итоге я понял, что в общем-то цена существенной роли не играет, все больше зависит от желания учащегося.

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

У меня изначально была мысль разделить курс на два: начальный и продвинутый, но потом я отказался, поскольку единый курс позволяет ученику самостоятельно решить от и до какого уровня его проходить.

Инструмент PageSpeed Insights позволяет не просто оценить скорость загрузки страницы, но и является в какой-то мере мерилом качества работы вебмастера. В отличие от html-валидатора, PageSpeed Insights оценивает сразу множество критериев, начиная от удобства мобильной версии и заканчивая настройками кэширования сервера.

Хочу отметить, что Гугл довольно неплохо развил этот инструмент и сейчас в общем-то на него можно смело ориентироваться (пока они опять что-нибудь не сломают :-) ).

Добиться заветных 100 баллов в PageSpeed Insights на самом деле не так просто. Лично я довольно долго ориентировался на «зеленые» оценки — это от 80 и выше. До последнего времени мой «потолок» был 93 для мобильной версии и 97 для десктопной. В своём последнем демо-лендинге я смог добиться 100/100 баллов.

Недавно, в процессе создания лендинга, столкнулся с проблемой — нужно было разместить «аккордион». Это даже не плагин, а просто набор функций jQuery. Постепенно код усложнялся и в какой-то момент я понял, что нужно его оформить отдельным плагином. Это упрощает его поддержку и можно дорабатывать по необходимости.

Я никогда не писал jQuery-плагины, поэтому пришлось немного погуглить и найти примеры и туториалы. По какой-то неведомой причине, практически все руководства содержат невероятное количество лишней информации, где уже на 2-минуте прочтения возникает путаница, поскольку подразумевают, что читающий прекрасно разбирается и в js, и тонкостях jQuery, что в корне неверно. :)

Поэтому я решил написать своё руководство, рассчитанное на неподготовленного читателя.

При создани лендинга, как выясняется, самая сложная задача — придумать основное торговое предложение (УТП/оффер/дескриптор). То есть то, ради чего лендинг и создаётся. Нюанс в том, что мне, как верстальщику, довольно сложно уловить суть бизнеса, поэтому приходится ориентироваться на «показания» клиента. И тут ступор... Почему-то люди не могут выразиться в одном предложении. Даже хуже — зацикливаются на одной фразе, из которой мало что понятно.

— Изготовление наружной рекламы.

— Ок, а конкретней?

— Ну, «наружка».

— В чём отличие от конкуретнов?

— Э-э-э, у нас она качественная.

— В чём это выражается?

— Ну хорошо делаем...

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

Общие ссылки

jQuery: Официальный сайт | Документация на английском | Русская документация (частично)

JavaScript: Справочник | Учебник

Создание графиков

• Разнообразные графики и диаграммы: Chart.js | Документация | Примеры
• «Временные» горизонтальные диаграмы: Timesheet.js — не требует jQuery.