HTML Academy
10.1K subscribers
5.3K photos
167 videos
4 files
3.31K links
Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити.
Наш секретный бот @HTMLAcademyKeksobot.

Вопросы по обучению @htmlacademy_sales

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
Через 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 кейса сложного уровня
— Дополнительная теория

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

Подробнее здесь
Лайв 10 февраля «Что ждать от тестового задания фронтенд-разработчика» в 13:00

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

Рассмотрим реальные примеры тестовых заданий и подскажем, чему стоит уделить особое внимание.

Разобраться с темой поможет ведущий — Алексей Симоненко, директор по развитию HTML Academy с опытом в веб-разработке более 20 лет.

Записаться на лайв — https://tml.io/4h1v2
Стартует курс «React. Разработка сложных клиентских приложений»

На курсе научимся использовать React для создания современных фронтенд–приложений.

Вас ждут:

Лайвы с преподавателем
Лайвы проходят по понедельникам и четвергам с 19:00 до 21:00 по московскому времени. Запись доступна на следующий день.

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

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

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

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

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

Оплатить можно целиком или в рассрочку. Курс продлится с 1 февраля по 4 апреля.

Записаться
Сайт готов? Теперь нужно проверить, всё ли правильно работает. Собрали для вас инструкцию, на что смотреть, чтобы с большой вероятностью после запуска всё было в порядке.

Читать 👇
https://tml.io/c5sob
Спросили наших наставников, почему они решили наставничать, зачем им этот опыт. Вот, что они нам рассказали 👇

Алексей Петров

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

Сергей Зубов

Стал наставником несколько лет назад. Захотелось просто попробовать, что это такое и как это будет. Какие плюсы вижу от этой работы — можешь организовать человека, чтоб он работал продуктивно. Сам работаешь более продуктивно. Постоянно развиваешься, так как если наставник сидит и верстает постоянно сайтики, больше ничего не делая — он просто неинтересен своим ученикам. Умение учить помогает и в реальной жизни, а также улаживание конфликтных ситуаций и поддержка в случае уныния — тоже несомненный плюс не только в сфере обучения, но и в реальности. Короче говоря, софт-скилы повышаются сильно, конечно, если подходить с головой к этому.

Мария Чернова

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

Дмитрий Мирошниченко

Для меня это в первую очередь был способ испытать себя. После первого потока мне очень понравился формат и решил продолжить ещё на поток и так понеслось. Уже будучи наставником, подметил для себя ещё ряд преимуществ, которые получил в виде софт-скилов: умение быстро разобраться в чужом коде и умение чётко излагать свои мысли.
Выпустили новую главу «Микросетки».

Глава входит в тренажёр «Погружение в HTML и CSS». Вас ждёт 17 заданий и 2 испытания.

Узнаем, что такое микросетки и как тестировать вёрстку. Разберём, когда лучше использовать гриды, флексы, блочные и строчные боксы. Сверстаем блок навигации и список карточек.

Переходите по ссылке, чтобы начать обучение — https://tml.io/sjbhh
Собрали отзывы выпускников пятого потока курса «React. Разработка сложных клиентских приложений».

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

Прочитать остальные отзывы можно здесь 👇

https://telegra.ph/Otzyvy-vypusknikov-pyatogo-potoka-kursa-React-Razrabotka-slozhnyh-klientskih-prilozhenij-02-03
Префикс — можно перевести как «приставка».

Если посмотреть на стили какого-нибудь сайта, можно столкнуться со свойствами, содержащими впереди непонятные слова: -webkit, -moz, -ms.

Эти слова являются префиксами следующих браузеров:

-webkit-: браузеры Chrome, Safari, Opera;
-moz-: браузер Mozilla Firefox;
-ms-: браузер Internet Explorer.

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

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

Префиксы могут быть как у свойств, так и у значений:

display: -ms-grid;
display: grid;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Упоминание префикса говорит о том, в каком браузерном движке оно будет применено: webkit, gecko(-moz), trident(-ms).

Для правильного применения свойств с префиксами сначала нужно указать свойство с префиксом, а после без префикса:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Всё дело в том, что браузер применяет свойства сверху вниз. Если браузер понимает свойство с префиксом и без, то применится, то последнее в списке.

Не занимайтесь добавлением префиксов вручную. Для этого есть онлайн-сервис или есть пакеты для автоматизации: для gulp и webpack.
Укажите в настройках браузеры, которые поддерживаются в вашем проекте с помощью Browserlist. В этом случае будут подставляться только нужные префиксы, а не все возможные.

#неглупые_вопросы
В этой статье разбираемся, как ставить пустые ссылки.

Есть несколько способов указывать пустые ссылки. Рассмотрим, чем грозит использование того или иного способа.

https://tml.io/plyoh
Вы вбили запрос в адресной строке и нажали Enter, что дальше?

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

Публикация основана на переводе репозитория «What happens when…» Филлипа Джеймса.

https://tml.io/xe2e1
Рассказываем про навык «Экспорт параметров и графики из Figma».

Зачем нужен:
Многие дизайнеры сейчас используют именно Figma для работы над проектами, поэтому верстальщику важно уметь работать с этим редактором. Верстальщик получает макет и самостоятельно открывает его в браузере или же в графическом редакторе, извлекает информацию и графику, полученные параметры прописывает в HTML и CSS. Без этого умения готовую вёрстку просто не сделать.

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

Подробнее здесь — https://tml.io/kyx4k
История нашего выпускника Сергея Шершнёва.

Несколько лет назад Сергей бросил работу маркетолога и ушёл в веб-разработку. Пройдя курсы HTML Academy и набравшись опыта, он понял, что теперь сам готов преподавать. Сегодня Сергей наставничает на шести курсах HTML Academy и получает от студентов самые высокие оценки.

Прочитать полностью
🔥1