Курс «HTML и CSS. Профессиональная вёрстка сайтов» – асинхронный формат
Всем привет. Я таки прошел все тренажёры HTML Academy, хоть и о последних блоках про JavaScript писать не стал — подписка кончилась, буквально, в последний день прохождения заданий, а оплачивать её только ради конспекта здесь не хотелось.
К тому же, тренажёры — это только начальный этап и темы в блоках посвященные JavaScript, будут еще не раз встречаться далее в обучении. Часть из них уже встретились в конце самого первого курса — «HTML и CSS. Профессиональная вёрстка сайтов».
Я проходил этот курс в рамках профессии «Фронтенд-разработчик» в асинхронном или, если по простому, в самостоятельном формате. Сама «Профессия» — это, грубо говоря, пакет курсов, а самостоятельный формат — более дешёвый и гибкий по времени. Для меня такие условия звучали идеально, но на самом деле отличия от обычных курсов не только в этом.
Этой статьёй я хочу резюмировать свое самостоятельное прохождение этого курса — что нового узнал, как справился с проектом, что понравилось, а что не очень. Можно назвать это отзывом.
О чём курс?
Решил, что важно немного пояснить, а то заголовок-то у курса кричащий, но не конкретизирующий. Курс, сюрприз — про вёрстку, но не про всю. Первый курс, который в Академии еще называется «Уровень 1», посвящён только статичной вёрстке, без адаптивности под разные устройства.
В курсе есть разделы про флексбокс и грид, но ими мы пользуемся для построения сеток в рамках статичной ширины сайта. Основной фокус курса — научить всем навыкам вёрстки без усложнений в виде настройки окружения, оптимизаций, препроцессоров и т. д.
Я бы не сказал, что это плохо — это просто нюанс.
Программа обучения
В процессе прохождения курса мы работаем над проектом — выбираем из макетов какой понравится и начинаем его постепенно верстать проходя от раздела к разделу. Макеты разные по сложности, но всё показывают на относительно простом демо-макете «Барбершоп», который выбрать нельзя.
То бишь, какие-то вещи в любом случае надо как-то решать самому и даже не по образу и подобию, а решать задачу имеющимися знаниями и средствами. Это на мой взгляд круто, хотя я и видел обратную реакцию, мол за деньги мне должны всё разжевать и в рот положить. Тут, наверное, кому как.
Выполнять проект нужно в соответствии с техническим заданием — там есть прям неочевидные нюансы, и еще в соответствии с критериями — достаточно большим списком требований к итоговой работе. Например, переполнение — чтобы сайт не разваливался при любом количестве контента в любом отдельно взятом блоке.
Курс поделён на 10 разделов, а каждый раздел поделён еще на, назовём это, стадии:
- Подготовка к вебинару, которая часто разделена еще на:
- Тренажёры (да, они здесь как часть обучения).
- Статьи из «Учебника» или какие-то внешние статьи по теме раздела.
- Лайв или вебинар (точнее запись), на котором разбираются интерактивные «Демки» и авторы курса комментируют подходы к задаче. Это именно не лекции, а разбор задачи и «узких мест» в реализации.
- Сами «Демки» — это как тренажёры, но там всё уже решено и каждый шаг идёт с пояснениями.
- Домашнее задание — это страницы c описанием чего делать в рамках раздела со своим проектом. Так как формат самостоятельный и наставника нет, есть ещё разбор примера, но только на один лёгкий проект (Nёrds).
- Дополнительные материалы — в них частенько много полезной инфы, но есть и прям филлеры, особенно в одном разделе (позже напишу).
Сами разделы описывать не буду, они вот тут на сайте самого курса есть, там без сюрпризов — разметка, сетки, декорации, доступность, мать её, и щепоть JavaScript для модальных окон. Хотя, сейчас написал про модалки и вспомнил, что всё же есть нюансы.
Отличие асинхронного формата
Главное отличие — это, естественно, цена. Но тут сложно посчитать, так как я оплачивал сразу профессию, не уверен, есть ли отдельно сольный курс. В любом случае, надо понимать, что за более дешёвый вариант курса, полагается менее приоритетный сервис.
Во-первых, у нас нет наставников. Их место занимает Discord-сервер для оплативших профессию, где участники могут задавать вопросы и дежурные наставники отвечают на них. Иногда.
Ладно, справедливости ради, они правда вроде как стараются отвечать, но так как это явно не их основная работа, есть риск, что вопрос просто проигнорится если его лишний раз не пингануть.
Очень часто отвечают более опытные ученики, что радует:
Наставника, кстати, всего два не просто на курс, а сразу на всю «Профессию», а это, на минуточку, 5 курсов. Народу, конечно, на момент сентября вроде как немного (я не вижу всех кто офлайн), вопросы задаются с переменной частотой, иногда несколько суток ни одного. Поэтому, сажать на дежурство десяток наставников, наверное, нецелесообразно.
Второе отличие — количество проектов. В полном курсе их, не считая «Барбершопа», пять штук. В порядке возрастания сложности:
Как видно по скрину выше — в асинхронном формате доступны только первые три, то есть, самые сложные проекты Device и Gllacy не доступны. Я еще когда смотрел сайт курса хотел взять Device, а тут слегка обломилось. В итоге я взял Техномарт, но это не конец истории, об этом чуть позже.
Третье отличие — нет обязательного взаимодействия с GitHub. Это, на самом деле, вредное отличие, так как уже в «Уровне 2» начинается прям полное погружение в Git и уж лучше сразу хотя бы базово с ним разобраться, хотя бы на уровне как сделать эти ваши пуши, коммиты, пул-реквесты и т. д.
Четвёртое отличие — нет защиты проекта. Это скорее касается всей профессии, так как есть только итоговое грейдирование по итогу всего пройденного материала. Что это такое не очень понятно, видимо что-то вроде экзамена по всем курсам, но отдельных защит или экзаменов по каждому курсу нет.
Пятое отличие — не дадут сертификат и ачивку в личном кабинете. :(
Еще одно такое, мини-отличие, которое заметил в последнем разделе по JS — не разбираются слайдеры, только модальные окна. Увидел в разборе домашнего задания, что у ученика полного курса слайдеры есть. Ну и ладно.
Чему научился?
Очень многое в курсе построено на тренажёрах, а так как я их уже прошел, то и значительную часть я уже знал. Плюс тот самый «Великий Кексби» подготовил меня к подобному формату самостоятельной работы.
Однако, в учебнике все-таки были некоторые особо важные темы. Самые массивные из них — методики. Их несколько в разных разделах, например, методика построения семантически верной разметки, методика БЭМ, методика построения сеток и микросеток, методика работы с отступами и другие.
Это такие огромные, подробные мануалы с пошаговым разбором действий, типовых ошибок, «бестпрактиз», хинтов и так далее — пожалуй, одни из наиболее полезных штук в курсе.
Например, в ходе первых разделов, наконец стало точно понятно в чем отличие <section> и <article>. Почему обязательно нужны <h2> для <section> даже если их нет на макете. Где разумно <section>, а где лучше <div>.
Про БЭМ это вообще отдельный разговор, мир не станет прежним — я всё думал, что за __ везде в классах на сайтах, а оно вон чего. Хотя БЭМ в курсе и не требуют, но я сразу начал практиковаться.
Научился подключать favicon и webmanifest — ничего сложного, но с нюансами. Сама favicon оказывается работает даже если её тупо шваркнуть в корневую папку, но лучше всё-таки явно прописать.
Много узнал и изучил про normalize.css и его прародителей.
Научился грамотно подключать шрифты в CSS через @font-face. В дополнительных материалах есть записи с каких-то выступлений Вадима Макеева, он там очень много интересных штук про это рассказывает.
Отдельным открытием были кастомные свойства. Это по сути как переменные, но в чистом CSS. Я сначала даже не поверил. Серьезно? А нафига тогда препроцессоры? Видимо, для миксинов.
Сетки прошли практически без сюрпризов, уж их-то я еще на тренажёрах изучил наперёд. Уверен, что еще споткнусь на нюансах на 2-м уровне, но пока мне хватило опыта — были одни из самых комфортных разделов.
Единственный неизвестный мне хинт который я, внезапно, услышал от наставника в разборе домашнего задания — про расчёт ширины в гриде.
grid-template-columns: 1fr 2fr; //не равно grid-template-columns: repeat(3, 1fr);
Вы, возможно, смотрите и такие «Ты чо дурак?». Нюанс приобретает смысл, когда у вас структура колонок 1 к 2 или 1 к 3, в общем дробная, там где так и хочется использовать в лоб fr.
Однако, надо еще не забывать про gap и что он, по сути, тоже учувствует в расчёте ширины. А от того как вы зададите grid-template-columns будет отличаться количество ячеек, а как следствие гэпов и в конечном итоге размер доли под которую выделен контент.
Много разных нюансов по поводу интерактивных объектов и их плохой наследуемости свойств. В Техномарте есть форма из одного поля поиска в хэдере, вот с ней прям засел я на пару часиков.
Остальные декорации заняли много времени, но в основном в тренажёрах уже разбирались. Немного, правда, провозился на чекбоксах и радио — хотел сделать их не через SVG-иконки, а методами CSS, но споткнулся о галочку в чекбоксе — у нее была обводка закрывающая часть контура.
Узнал про переполнение и как его предвидеть. Немного даже перестарался, по-моему — учел даже переполнение в одну строку без пробелов в местах, где текст явно не абзац осмысленного текста, а короткое описание (типа <label>).
Базово разобрался с минификаторами CSS и JS, правда, насколько понял из Лайва, что есть технология, которая всё это дело автоматизирует и мы её разберём на 2-м уровне.
Наконец, самый мутный раздел — доступность. Это тот раздел, где в дополнительных материалах целая плеяда о-очень нудных филлерных статей на эту тему. Столько свой TAB я еще не насиловал. Со скринридером проблем, внезапно, не оказалось. А вот с отображением фокуса на моих кастомных чекбоксах — да. Пришлось допиливать.
В разделе про JS мы искали элементы через .querySelector(), игрались с классами через .classList и немного разобрались с работой localStorage. Запрограммировали открытие и закрытие модалок и еще настроили автофокус при открытии и автозаполнение полей по ключу из localStorage.
Про проекты
Я сначала пытался затрайхардить и делать параллельно все три доступных проекта. И, в общем-то, до 4го раздела так и было — вся разметка и часть стилизации у меня готово и для Техномарта и для Nёrds с Седоной.
В определённый момент я даже начал искать по интернету остальные два проекта и даже нашёл. Труда особого не составило — они не то чтобы прям в общем доступе, но и не за семью печатями. GitHub и Google вам в помощь.
И в какой-то момент моя душонка такая — «А давай сделаем их все!». Где-то как раз в этот момент мне надо было улетать в другой город на несколько дней по делам и… слава богам, я рад что мне это помешало.
Дело не в лени или в том, что это какой-то перебор в практике. Дело в том, что лучше реально сделать один проект до конца.
Работая над Техномартом я несколько раз тупо переписывал огромные куски как и вёрстки так и стилей, так как повествование в курсе идёт иногда в виде «Оставим пока так — потом поправим/доделаем». А теперь умножьте это на 5, а то и на 10, так как Девайс и Глейси судя по макетам сильно сложнее Техномарта и тем более Nёrds или Седоны.
В идеале — я бы взял Глейси, как, на мой взгляд, самый сложный макет и работал бы с ним в процессе обучения. Сразу разобраться со всеми сложностями и пусть это займет больше времени, но, я уверен, даст фору позже.
И уже если потом появилось желание закрепить или тупо закрыть свои гештальты (как у меня) можно приступать к остальным проектам. Опять же если вы в асинхронном формате, а в обычном, насколько я понимаю, особо не по растекаешься на проекты, т. к. там времечко жмёт.
Сколько времени заняло
Моя любимая часть. Я не так давно занялся этим вот подсчётом личной эффективности, график, таймеры и т. д. Напишу как получилось. Для всего этого дела использовал приложение Toggl Track — оно бесплатное, крайне рекомендую.
Всё обучение заняло у меня 29 дней — чуть более 4-х недель. Это, правда, с учетом, что мне на 5 дней пришлось улететь в другой город по делам.
Я не трайхардил до посинения, как делал это на тренажёрах весной, в среднем старался держаться около 20 часов в неделю. Так, в общем-то, и получилось, если учесть пятидневный перерыв.
В сумме первый курс «HTML и CSS. Профессиональная вёрстка сайтов» занял у меня 68 часов чистых обучения:
В таймер включены мои повторные прохождения тренажёров — тут, понятное дело, не очень объективно, так как я их пролетал зная чего делать. Так что можно смело еще плюсовать ~8 часов, наверное.
С другой стороны, я нарочно НЕ учитывал просмотры Лайвов, которые в среднем 1.5-2 часа каждый, хотя я и смотрел их на х2. Они просто, по сути, идут по Демкам, которые я сам пролистывал многократно в ходе работы над заданием и вот это я уже учитывал в таймер.
Сейчас я уже приступил к следующему курсу «HTML и CSS. Адаптивная вёрстка и автоматизация» или «Уровень 2» и это немного не то, что я ожидал. В хорошем ключе. Я еще удивлялся — почему адаптивность отрезали от вёрстки, ведь это в современном мире мастхэв. Оказалось не всё так просто и с адаптивом на 2-м уровне идёт еще пачка технологий и адаптив как таковой не ограничивается шириной экрана или «резиновостью».
За сим всё, спасибо за внимание! Продолжу в том же духе и встретимся уже после следующего курса.