Не пропустите розыгрыш доступа к тренажёрам на месяц. Конкурс происходит в нашем сообществе во «Вконтакте»

https://vk.com/htmlacademy?w=wall-38306835_42273

Теперь вас ждёт ещё больше полезного и интересного контента от HTML Академии. Мы вернулись на Хабр со статьёй «Тестовое задание для фронтендера».

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

Читать статью — https://tml.io/a52r2

Выпустили новый проект «Конструктор сайтов».

В этом проекте вам предстоит запрограммировать приложение на JavaScipt, которое будет работать в браузере — конструктор сайтов. Приложение позволяет создавать страницы сайтов, выбирая шаблон страницы и добавляя различное содержимое: заголовки, текст и изображения.

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

В комплект входят:
— Подробное техническое задание проекта.
— Вёрстка, готовая для программирования.
— Эталонная реализация на JavaScript, HTML и CSS Ссылки на полезные материалы.

Прочитать подробнее и купить проект — https://tml.io/jr1sx

Где брать шрифты, чтобы не нарушить авторские права

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

Нас интересуют две основные: for personal use и for commercial use.

For personal use
Вы можете использовать шрифт в своих личных работах, портфолио, но не там, где вы зарабатываете деньги. Например, вы хотите сверстать сайт в портфолио со шрифтом, у которого такая лицензия — это правильно. Но если вы собираетесь продавать этот макет — это незаконно. Нельзя также писать, что это ваш шрифт и желательно всегда указывать автора шрифта.

For commercial use
Такая лицензия даёт вам право на использование шрифта в коммерческой разработке. Важно всегда иметь файл с лицензией и передавать его собственнику сайта, если шрифт выбирали вы сами.
Ещё бывает надпись free with attribution, если она есть — вы обязаны указать автора шрифта на своём проекте. Если это сайт, то в футере, а в презентации — на последнем слайде.

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

🔶Google Fonts
Первый и самый очевидный сайт. Здесь есть 80% необходимых шрифтов и у всех есть лицензия. Хороший фильтр, который позволяет искать шрифты с засечками и без, рукописные или моноширинные. Можно указать, какие языки должен поддерживать шрифт. Позволяет как скачать шрифт, так и подключить к сайту через <link>, @import.

Посмотреть лицензию можно на вкладке License.

🔶 Fontspace и 1001freefonts
Если вы не нашли какой-то шрифт на Google Fonts, можно попробовать поискать здесь. На этих сайтах больше разных «креативных» начертаний, например, шрифт как в Гарри Поттере. Справа от названия указано, какая доступна лицензия. Здесь же можно купить коммерческую лицензию.

🔶Behance
Последний и не самый очевидный сайт. Если вбить в поиск free-fonts можно найти много бесплатных уникальных шрифтов, в том числе и для коммерческого использования. Для этого вбиваем в поиск free-fonts commercial. Только не забудьте внимательно посмотреть, что указал сам автор. Если никаких указаний нет — лучше не рисковать. Если вам нужна лицензия файлом, вы можете написать владельцу напрямую.

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

Сегодня, 24 января, Международный день образования. В честь этого вечный доступ к тренажёрам можно купить на 40% дешевле. Скидка действует с 24 по 26 января включительно.

В подписку на тренажёры входит большее 1400 заданий и испытаний, с помощью которых в интерактивной форме можно выучить основы HTML, CSS и JavaScript, познакомиться с флексбоксами, анимациями и другими темами.

Материалы тренажёров останутся у вас навсегда. Все будущие тренажёры станут доступны вам без дополнительной оплаты.
Чтобы приобрести доступ, переходите по ссылке — https://tml.io/hlezc

Хотите разобраться в основах JavaScript и делать веб-страницы интерактивными? С помощью тренажёра «Знакомство с JavaScript» узнаем, как работает JavaScript в браузере, научимся взаимодействовать с пользователем. Начнёте решать задачи, с которыми регулярно сталкиваются веб-разработчики.

Тренажёр состоит из:
— теории,
— 4 частей,
— 57 заданий,
— 4 испытаний.

Вместе сделаем список задач, виртуальную клавиатуру, опрос для оценки сайта и пиксель арт.

Узнать о тренажёре подробнее и начать заниматься можно по ссылке — https://tml.io/3fgea

До 26 января включительно действует 40% скидка на вечный доступ к тренажёрам. Все существующие и будущие тренажёры станут вам доступны навсегда.

Купить вечный доступ можно по ссылке — https://tml.io/hlezc

Отзыв выпускницы «JavaScript. Профессиональная разработка веб-интерфейсов» #21 Александры Ковальчук .

На курс по JavaScript я пришла после двух интенсивов по вёрстке в рамках профессии. Если о вёрстке у меня уже было какое-то представление, то JS я никогда не касалась, даже вскользь. Было страшновато, но после двух пройденных курсов я уже не могла так просто сдаться.

Как итог, я защитила проект на 100%, хотя вёрстку защищала на чуть меньшие показатели — 97% и 96%. Как у меня все-таки вышла эта всеми желанная сотня?

📎Во-первых, мне повезло с наставником.
Мне было легко с ним общаться, и когда мотивация пробивала дно, переписка с ним спасала. А детальные разборы моей работы спасали собственно проект.

📎Во-вторых, я освободила больше времени под учебу.
Отказалась от многих других занятий, чему поспособствовала самоизоляция. Мне на полном серьёзе снился мой код и варианты решения той или иной задачи!

Ну и наконец, я брала себя в руки тогда, когда не хотелось ничего больше делать и ничего не выходило. Мне кажется, это самое важное — понимать, что тебе это действительно нужно. Продолжать даже когда кажется, что это бесполезно и ты не сможешь. Как только накатывало такое, я шла отдыхать, а на следующий день писала наставнику, что «всё пропало». И каждый раз решение находилось. Иногда даже до его ответа.

Курс очень насыщенный, он в полной мере даёт понять, что такое «интенсив», когда ты еще не совсем понимаешь, как работают функции, а по плану уже обработка событий. Но несмотря на то, что огромный объем информации в самом начале курса может напугать, под конец будет значительно проще.

Отдельно хочется отметить лекции, которые не лекции, а лайвы. Я вынужденно смотрела их в записи, а не в реальном времени, но всё равно такие подробные разборы на них мне здорово помогали.

В конечном итоге хоть я и не верила в себя, у меня не только 100% на защите, но и знания, которые куда важнее, чем цифры и сертификаты. А если сравнивать меня в начале курса и в конце — это серьезный рост.

📎Совет для других студентов
Сравнивайте себя не с другими студентами курса (соблазн, наверняка, будет), а с собой же, но более раннего образца. У всех своя база и свои особенности, а наблюдать за своим собственным ростом и развитием куда вернее для оценки прогресса.

Ближайший поток интенсива стартует 26 января, записаться вы можете по ссылке — https://tml.io/4d4cp

Йохохо! Канал захвачен!

Меня зовут Виталий Зюзин (@juwain). Я капитан команды, которая создаёт обучающий контент для тренажёров, навыков и проектов для тренировки.

В веб-разработке я уже давно, больше 10 лет. Учился самостоятельно, во время учёбы в университете устроился на первую «разработческую» работу, потом перебрался в Санкт-Петербург, работал фронтендером в небольших компаниях, фрилансил и в 2014 году присоединился к Академии в роли автора интерактивных курсов.

С тех пор компания очень выросла, и мне в процессе удалось поработать в разных ролях и командах: создавал тренажёры, вёл лекции и наставничал на профессиональных курсах по вёрстке и JS, вёрстал и кодил сайт Академии. Теперь вот пришёл к «корням»: веду вперёд команду, которая делает образовательный контент для самостоятельного обучения навыкам фронтенд-разработки.

На этой неделе я буду писать в этом канале и общаться с вами. Свою вахту решил посвятить теме навыков.

Вот такой план на неделю:

Понедельник: интро.
Вторник: зачем нужны навыки, если есть тренажёры и курсы.
Среда: как эффективно учиться самостоятельно и пользоваться навыками.
Четверг: откуда берутся темы навыков, как разрабатываются.
Пятница: что ждать в навыках в будущем?

Жду ваших вопросов, постараюсь на всё ответить. Всем хорошей недели!

Уже послезавтра, 27 января в 19:00 по московскому времени, у нас пройдёт лайв с Серёжей Поповым и Никитой Дубко из Яндекса.

Что должен знать веб-разработчик в 2021 году, чтобы успешно устроиться на работу? С какими сложностями может столкнуться новичок?

На эти и многие вопросы в прямом эфире ответит Никита Дубко — доброжелюбный бородач и по совместительству руководитель группы в Яндекс.Поиске, редактор новостей сообщества «Веб-стандарты» и пятый голос одноимённого подкаста. А поможет Никите руководитель аутсорс-продакшена «Лига А.» — Серёжа Попов.

На лайве также обсудим:
— Почему веб-разработчики готовы прийти на помощь новичкам.
— Как устроена веб-разработка в Яндексе.
— Как получить первый опыт работы.

Записаться на лайв — https://tml.io/6150m

Зачем нужны навыки, если есть тренажёры и курсы

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

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

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

Каждый навык — это что-то конкретное: например, «Создание семантической разметки по макету» — это навык, а вот «Особенности HTML и CSS» — не навык, а просто технологии. В навыке вы по единой схеме проходите путь от теории до умения выполнять конкретную задачу фронтендера. Эта схема тоже, как и тренажёры, включает теорию, практику и «экзамен»:

1. Теория, которая дополняет тренажёры, рассматривает вопрос со всех сторон, соотносится с практикой (например, чем кнопки отличаются от ссылок и в каких случая лучше использовать то или другое).
2. Тщательно разобранные примеры применения конкретных технологий «в действии»: вёрстка отдельных элементов и крупных сеток, программирование, алгоритмы для работы с графическим редактором (например, в какой последовательности и как нужно работать с Figma-макетом, чтобы добыть оттуда все необходимые для вёрстки параметры).
3. Демонстрации, в которых пошагово показывается вся вёрстка или программа в рамках навыка с комментариями и объяснениями.
4. Несколько кейсов для того, чтобы сделать всё самостоятельно по образцам.
5. Проверки для тренировочных кейсов, чтобы оценить своё решение и самостоятельно исправить ошибки, если они будут.
6. Эталонные решения, которые вы получите для сверки своего решения с эталонным.

Продолжение в следующем посте.

Что дальше? Если освоить набор отдельных навыков, то вы научитесь делать вёрстку или писать скрипты «целиком» — от начала, когда вы получаете макет или техническое задание и до конца, когда отдаёте полностью готовый результат.

И чтобы набраться опыта и наработать практику сразу во всех ранее освоенных навыках, мы предлагаем дальше переходить к проектам для тренировки. Это как бы «финальная» часть освоения набора навыков (пример такого набора — «дерево навыков»). Как и в реальной практике, вы получаете техническое задание или макет и делаете своё решение. Затем у вас есть возможность сравнить своё решение с нашим вариантом. В будущем в проектах также появятся автоматизированные проверки решений.

Ок, с нуля и до умения сверстать макет. Похоже на профессиональный курс, не правда ли? Да, это очень близко к тому, чему вы можете научиться на большом курсе. Но только в курсе с вами ещё будет работать наставник и вести лайвы лектор. А в навыках + проектах вы проходите весь путь самостоятельно в «симуляторе». Да, это сложнее, чем в компании, но возможно. О том, как эффективно учиться самостоятельно и пользоваться навыками, я расскажу завтра.

Как эффективно учиться самостоятельно и пользоваться навыками

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

Теперь перед вами открылся дикий и огромный мир фронтенда, в котором очень много всего и который невозможно «выучить» раз и навсегда. Да, кто-то сравнивает фронтенд с постоянно уходящим поездом, который бедняги фронтендеры догоняют, чтобы успеть впрыгнуть в последний вагон. Отчасти это так: сама веб-платформа, разные библиотеки и фреймворки развиваются, «буйно» расцветают, стареют, забываются, перерождаются во что-то новое.

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

Что вам нужно для начала — определить цель, куда вы идёте. Например, вы стремитесь устроиться на стажировку фронтендером или научиться верстать по макету. Затем вам нужно примерно определить все шаги, как до этого дойти: я обычно делаю такое «раскатывание» с конца в начало, например:

я устроился на работу
☝️
я успешно прошёл собеседование
☝️
я сделал сайт-портфолио и разместил на нём свои работы
☝️
я сверстал 10 сайтов
☝️
я сделал свой первый проект
…

Когда у вас есть цель и траектория движения, вы сможете:
1) вдохновляться своим прогрессом движения в нужном направлении;
2) отбросить ненужное в пути достижения своей цели, просто задавая себе вопрос: а нужна ли мне это фигня сейчас, чтобы выполнить текущий «этап»? Да, фронтенд интересный, классный и большой, но у вас нет задачи узнать всё, а только необходимый минимум для достижения цели.

Затем нужно заполнить промежутки между этапами достаточно мелкими, решаемыми за 1-2 дня задачами (например, «установить на компьютер редактор кода», «изучить теорию и сверстать HTML-форму», «посмотреть туториал по пользованию графическим редактором Figma и разобрать один макет»). Полученная структура — это описание вашего маршрута. Чтобы составить такую структуру, не обязательно использовать какие-нибудь особенные сервисы, достаточно будет записать всё по пунктам на бумаге или в доке. Норм, если напротив задач можно будет поставить галочку или зачеркнуть выполненный пункт — так вы будете видеть свои успехи.

Но цель и траектория — это ещё не всё. Есть ещё стартовая точка, откуда вы отправляетесь в путь. Это вы сами. И если цели и траектории у разных людей могут быть похожими, то каждый из вас — уникален. У каждого человека своя уникальная история жизни, стартовые навыки и компетенции, опыт. Я искренне верю, что можно научиться делать вообще всё, что не противоречит законам физики. Но при этом каждый отдельный человек не знает всего на свете. Так что главные препятствия в обучении, с которыми вы столкнётесь, скорее всего вы создадите себе сами. Неуспех, как и успех, зависит только от вас, от того, как вы будете себе помогать или мешать в процессе.

Продолжение в следующем посте.

Вот какие мешающие штуки бывают:

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

Вот какие есть помогающие штуки:

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

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

1. Сначала изучаете только необходимую теорию для выполнения типовой задачи навыка — теорию можно сначала изучить обзорно, построить «карту местности», а затем возвращаться к ней во время практики.
2. Далее проходите подробный рассказ, описание алгоритма того, как типовая задача выполняется — эти алгоритмы и инструкции вы будете «впитывать» и затем применять во время практики, а также они останутся с вами в результате обучения.
3. Дальше смотрите примеры, где вам по шагам показывается, как изученное применять к реальной задаче.
4. После этого пытаетесь решить задачу сами по образу и подобию предыдущей демонстрации. В процессе набиваете шишки, записываете «умелку» в долговременную память.
5. Дальше, в зависимости от проработанности навыка, у вас есть возможность или оценить свой код в проверяющей системе, или сравнить свой код с нашим «эталонным» решением (проверки в конце концов будут во всех навыках).

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

А то, как, чем и зачем мы укомплектовываем навыки, я расскажу завтра.

Через 5 минут начнётся лайв с Серёжей Поповым и Никитой Дубко.

Никита Дубко — доброжелюбный бородач и по совместительству руководитель группы в Яндекс.Поиске, редактор новостей сообщества «Веб-стандарты» и пятый голос одноимённого подкаста. И руководитель аутсорс-продакшена «Лига А». — Серёжа Попов.

Обсудим на лайве:
— Почему веб-разработчики готовы прийти на помощь новичкам.
— Как устроена веб-разработка в Яндексе.
— Как получить первый опыт работы.

Присоединиться к лайву — https://tml.io/nyps5

Откуда берутся темы навыков, как разрабатываются

Страница навыков встречает вас списком из 36 карточек. Все навыки идут одним сплошным полотном (мы точно будем их в ближайшее время выстраивать в «треки» или «деревья» по аналогии с первым лёгким «деревом навыков», но об этом подробнее завтра), и на этой странице их лучше воспринимать независимо друг от друга.

Откуда же мы взяли эти 36 тем? Тут задействовали несколько источников:
- за основу взяли те области знаний, которые уже появлялись в профессиональных курсах по HTML, CSS и JS;
- вдобавок включили в проект навыков фидбек от коллег из «Лиги А.»;
- прошерстили результаты исследования рынка веб-разработки, которое проводили авторы профкурсов.

Всю полученную кучу тем и хотелок мы затем разделили по условным уровням: вёрстка — 1 и 2 уровня, скрипты — 1 и 2 уровня. Кое-что получилось сразу и про вёрстку, и про скрипты (например, «создание доступных интерфейсов» или «использование анимации в интерфейсе»).

Дальше стали вписывать получившийся рассортированный список тем в «формат навыка». Вот такие требования у формата:
- навык — это умение решать типовую задачу: к примеру, «Вёрстка и валидация HTML-форм» — это навык, а вот «Замыкания в JavaScript» — не навык, а просто информация по технологии;
- результат выполнения типовой задачи должен быть «осязаемый», чтобы его можно было автоматизированно проверить и оценить: например, «тестирование вёрстки» — тема интересная, но сложно проверить знания, оценить уровень полученного навыка;
- область навыка должна быть не слишком маленькая и не слишком большая, чтобы уложиться в 6-12 кейсов;
- навык — универсальный и самодостаточный модуль обучения, но при этом должно быть можно собирать несколько навыков в «цепочки» и использовать в других продуктах (например, в профкурсах).

Продолжение в следующем посте.

Дальше мы начали создавать контент в хронологическом порядке. Особое внимание мы уделяем «стартовым» навыкам, так как их изучают больше студентов начинающего уровня. Кроме того, навыки ссылаются друг на друга, и часто в более «дальнем» навыке есть рекомендация освоить более «ранний».

Как происходит разработка навыка:

Этап 1. Исследование
Сначала идёт этап исследования предметной области и типовых задач. Общаемся с экспертами, роем примеры, находим референсы. На выходе получается список примеров типовых задач и «кашеобразная» база знаний.

Этап 2. Синтез материалов
Дальше мы создаём стартовые материалы курса: техническое задание, макеты и «эталонный» код решений типовых задач. Тут скажу, наверное, странную вещь, но эталонного кода в принципе не существует в природе (поэтому я пишу «эталонный» в кавычках). Это подтвердит любой опытный разработчик. Правильное решение можно сделать миллионом разных способов. У каждого решения могут быть свои преимущества, недостатки, оформление, подход к архитектуре и так далее. Но в то же время мы должны выработать какое-то одно решение, так как будет странным новичкам говорить, что «делайте как хотите». В начале обучения и формирования представления о технологии нужно иметь какой-то ориентир и эталон, который поможет не запутаться и сформировать свой взгляд. Те самые правила, которые сначала учишь, а потом начинаешь сознательно нарушать. Как же мы из этого «выкручиваемся»?

Этап 3. Обратная связь от экспертов
Тут начинается процесс балансирования, чтобы выработать «идеальное» решение. Мы стараемся привлечь несколько сторон, чтобы соблюсти баланс и не впасть в крайность. Обычно зовём на ревью Лигу А, авторов профкурсов и внешних наставников с профкурсов. Каждый привносит свою специфику. А мы выбираем некий «усреднённый» вариант, консистентный с остальными нашими учебными материалами. Полученный результат в принципе не может угодить всем и сразу — это норм, ничего идеального нет.

Этап 4. Проектирование учебного контента
Дальше начинаем «раскатывать» конечный код к началу: разбиваем на крупные этапы, потом выписываем, что по коду используем в каждом этапе. Полученная последовательность — это и есть план учебных материалов: домашек, теории, демок, заданий.

Этап 5. Производство учебного контента
Тут начинаем наполнять учебные блоки теорией, заданиями и проверками.

Этап 6. Тестирование контента
Перед выпуском стараемся показать материалы бета-тестерам, выловить баги и проблемы, проверить уровень сложности. Если хотите стать тестировщиком будущих навыков (за внятный фидбек отсыпем плюшку), напишите, пожалуйста, мне на почту [email protected]. В ближайшее время у нас на очереди тестирование навыков «Сетки на гридах» и «Работа с DOM в JavaScript».

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

Что ждать в навыках в будущем?

Всю неделю я рассказывал о том, что такое навыки, и как задумана вся система самостоятельного обучения. Мой рассказ — это та самая модель, «идеал», к которому мы командой стремимся и каждый день маленькими шажками приближаемся. Задумано много хорошего и разного, и мы туда идём (кстати, проекту «навыки» пару месяцев назад исполнился 1 год).

Этот пост — «роадмап»: где мы находимся сейчас, куда хочется прийти и что предстоит на этом пути сделать.

Итак, что у нас есть сейчас:
1. Уже выпущенная последовательность из «дерева навыков» с «проектом для тренировки» в конце. На момент публикации этого поста часть из навыков (гриды, навигация, многослойные элементы, карточки) выпущена в базовом комплекте из лёгких кейсов.
2. Автоматизированные проверки в навыках по семантической разметке и по работе с Фотошопом.
3. Проекты для тренировки, пока не связанные с навыками явно (кроме «Яхт-клуба»), выполненные действующими фронтендерами-профессионалами.

Что собираемся сделать в будущем:
1. Выпустить полные комплекты навыков из первого лёгкого «дерева» (средние и сложные кейсы).
2. Разработать и обкатать автоматизированные проверки во всех навыках: сейчас в процессе — системы проверки сеток и вёрстки «целиком» в HTMLCSS-навыках, а также система проверки скриптов в JS-навыках и проектах.
3. Добавить в навыки возможность ставить оценки и оставлять обратную связь.
4. Выпустить все анонсированные на 2021 год навыки: прямо сейчас в работе гриды, JS-DOM, БЭМ, анимации.
5. Актуализировать и фиксить уже выпущенный контент ежемесячно.
6. Структурировать выпущенные навыки в новые «деревья» или «образовательные траектории».
7. Связать явно все проекты для тренировки и навыки, сделать в проектах детальные демонстрации создания «эталонного» кода.

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

На этом мой дозор окончен. С вами был Виталий Зюзин, капитан контентной команды цифровых продуктов.

Делюсь промокодом JUWAIN со скидкой 1500 рублей на покупку профессиональных курсов, он действует до 5 февраля включительно.

Остаюсь на связи в личке @juwain и по почте [email protected], если будут вопросы, пожелания или предложения.

Успехов в обучении!

Выпустили навык «Вёрстка карточных элементов интерфейса»

Что научимся делать:
Список карточек и карточки товаров — очень распространённый интерфейсный паттерн. Он применяется в интернет-магазинах, лендингах и даже простых текстовых сайтах. Верстальщику при реализации таких элементов нужно учитывать неочевидные с первого взгляда вещи: переполнение контентом и замену графики при наполнении интерфейса из CMS, управление контролами карточек с клавиатуры, интеграцию с JavaScript.

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

Что входит в комплект:
— Методика
— 4 кейса лёгкого уровня
— 3 кейса среднего уровня
— 3 кейса сложного уровня
— Дополнительная теория

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

Подробнее здесь