Сайт вебмастера

Обновление бесплатного HTML-курса

06-03-2021Reading time ~ 2 min.Блог 171

Сделал большое обновление своего HTML-курса для новичков (теперь с котиками). По сути мне пришлось его полностью переписать, поскольку я хотел поменять всю структуру.

Сам по себе курс рассчитан на новичков. Старый вариант базировался на UniCSS, новый на Berry CSS. Большой разницы в классах между ними нет, но в Berry хорошая документация с примерами и есть Builder, который используется при прохождении курса.

В новой версии я упростил сложность уроков и добавил задания для каждого. Раньше большая часть уроков была закрыта, поскольку была частью платного обучения. Сейчас всё открыто и бесплатно. Часть старых уроков я убрал, например работу с Sass, Git, обработку форм на PHP. Как показал мой опыт обучения, они всё-таки сложны для новичков.

Сам по себе курс, как и прежде, строится на атомарных классах. Ученик может после короткой теории, сразу же начать верстать html-блоки. Такой подход хорошо себя зарекомендовал. Если в других курсах начинают сразу писать CSS-код, то здесь используются готовые классы, а погружение в CSS происходит по ходу урока. То есть не будет ситуации, когда новичку предлагается написать css-код, который он элементарно ещё не понимает.

У меня сделано по другому — используем атомарные классы Berry CSS, которые легки и понятны. Последующий переход на компонентный CSS не вызывает никаких сложностей, поскольку ученик уже знает назначение каждого класса и его css-свойства.

Что ещё?.. Добавил много практических уроков. Я считаю, что лучше двигаться от практики к теории. Многие html-курсы часто представляют собой обычный справочник, только своими словами. Эта информация новичку просто не нужна, поэтому я отказался от уроков про псевдоклассы и сложных css-селекторов. То есть идея в том, чтобы показать и объяснить как верстаются разные блоки/элементы, где нет этой сложной теории. Так обучение происходит проще и быстрей, а на ученика не сваливается тонна информации, которую даже не понимает где и как использовать.

Курс представляет собой самоучитель, поэтому снабжён заданиями. Опять же, по опыту отмечу, что прогресса нет, если не выполняются домашние задания. «Спотыкачки» есть у всех: начиная от незакрытых тэгов, до ужасного форматирования кода. В старой версии курса мы работали с LPF, поскольку так было проще отслеживать задания. В новой версии подобных требований нет, хотя я рекомендую поставить локальный сервер. В какой-то мере это тест на профпригодность — если ученик не может этого сделать, то ему будет сложновато войти в IT. :-) А так, в принципе курс проходится даже обычными html-файлами или Berry Builder.

В какой-то мере этот курс будет полезен и более опытным разработчикам, тем, кто хочет попробовать Berry CSS, да и вообще саму методику атомарного CSS. Наглядные уроки показывают как можно быстро верстать блоки любой сложности без правки css-кода.

Related Posts
Comments (4) RSS
1 Денис 2021-03-14 22:04:54

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


2 Admin 2021-03-15 07:18:09 admin

Обычно такая кнопка использует JS, поэтому будет сложна для новичков. Да и не всегда меню нужно скрывать в кнопку, вполне достаточно добавить им адаптивности через flex.


3 Денис 2021-03-23 17:28:23

Ну почему же. Вот здесь internet-technologies _ru/articles/20-poleznyh-snippetov-css-dlya-sozdaniya-adaptivnogo-menyu.html#header-10317-3 есть много примеров, в том числе и без JS, например Bootstrap Navbar от Bobby. Я сейчас пытаюсь в шаблон, сделанный на Berry впихнуть кнопку на css, получилось, работает, но т.к. разные стили, то уже дофига времени вожусь и всё коряво. Вот если бы вы один урок посвятили этому, это бы сэкономило много часов времени и нервов новичкам. И не пришлось бы гуглить в поисках решений и всяких костылей. Да и на JS тоже там коды маленькие, тоже получалось внедрить, но основная проблема - совместить разные стили в одном дизайне, часто они пересекаются.

А без такой кнопки большинство сайтов будут совсем не по красоте.


4 Admin 2021-03-24 09:44:44 admin

Какое вообще отношение курс имеет к бутсрапу или вашему дизайну? Задача — дать начальные сведения и ввести новичков в html-вёрстку и css-стили. Если вы это всё знаете, прекрасно, двигайтесь дальше. :-)