Как эффективно учиться самостоятельно и пользоваться навыками
Окей, вы попробовали проходить тренажёры, поняли, что у вас получается и вам интересно кодить, и решили двигаться дальше.
Теперь перед вами открылся дикий и огромный мир фронтенда, в котором очень много всего и который невозможно «выучить» раз и навсегда. Да, кто-то сравнивает фронтенд с постоянно уходящим поездом, который бедняги фронтендеры догоняют, чтобы успеть впрыгнуть в последний вагон. Отчасти это так: сама веб-платформа, разные библиотеки и фреймворки развиваются, «буйно» расцветают, стареют, забываются, перерождаются во что-то новое.
И первое, что нужно признать, что полностью всё это узнать и досконально изучить — просто невозможно. Представьте себя в джунглях с небольшим набором припасов и инструментов. Если вы будете изучать каждый цветок и отвлекаться на каждую букашку на своём пути, то скорее всего рано или поздно ваши припасы исчерпаются, и вы бросите эту затею, так и не увидев «леса за деревьями».
Что вам нужно для начала — определить цель, куда вы идёте. Например, вы стремитесь устроиться на стажировку фронтендером или научиться верстать по макету. Затем вам нужно примерно определить все шаги, как до этого дойти: я обычно делаю такое «раскатывание» с конца в начало, например:
я устроился на работу
☝️
я успешно прошёл собеседование
☝️
я сделал сайт-портфолио и разместил на нём свои работы
☝️
я сверстал 10 сайтов
☝️
я сделал свой первый проект
…
Когда у вас есть цель и траектория движения, вы сможете:
1) вдохновляться своим прогрессом движения в нужном направлении;
2) отбросить ненужное в пути достижения своей цели, просто задавая себе вопрос: а нужна ли мне это фигня сейчас, чтобы выполнить текущий «этап»? Да, фронтенд интересный, классный и большой, но у вас нет задачи узнать всё, а только необходимый минимум для достижения цели.
Затем нужно заполнить промежутки между этапами достаточно мелкими, решаемыми за 1-2 дня задачами (например, «установить на компьютер редактор кода», «изучить теорию и сверстать HTML-форму», «посмотреть туториал по пользованию графическим редактором Figma и разобрать один макет»). Полученная структура — это описание вашего маршрута. Чтобы составить такую структуру, не обязательно использовать какие-нибудь особенные сервисы, достаточно будет записать всё по пунктам на бумаге или в доке. Норм, если напротив задач можно будет поставить галочку или зачеркнуть выполненный пункт — так вы будете видеть свои успехи.
Но цель и траектория — это ещё не всё. Есть ещё стартовая точка, откуда вы отправляетесь в путь. Это вы сами. И если цели и траектории у разных людей могут быть похожими, то каждый из вас — уникален. У каждого человека своя уникальная история жизни, стартовые навыки и компетенции, опыт. Я искренне верю, что можно научиться делать вообще всё, что не противоречит законам физики. Но при этом каждый отдельный человек не знает всего на свете. Так что главные препятствия в обучении, с которыми вы столкнётесь, скорее всего вы создадите себе сами. Неуспех, как и успех, зависит только от вас, от того, как вы будете себе помогать или мешать в процессе.
Продолжение в следующем посте.
Окей, вы попробовали проходить тренажёры, поняли, что у вас получается и вам интересно кодить, и решили двигаться дальше.
Теперь перед вами открылся дикий и огромный мир фронтенда, в котором очень много всего и который невозможно «выучить» раз и навсегда. Да, кто-то сравнивает фронтенд с постоянно уходящим поездом, который бедняги фронтендеры догоняют, чтобы успеть впрыгнуть в последний вагон. Отчасти это так: сама веб-платформа, разные библиотеки и фреймворки развиваются, «буйно» расцветают, стареют, забываются, перерождаются во что-то новое.
И первое, что нужно признать, что полностью всё это узнать и досконально изучить — просто невозможно. Представьте себя в джунглях с небольшим набором припасов и инструментов. Если вы будете изучать каждый цветок и отвлекаться на каждую букашку на своём пути, то скорее всего рано или поздно ваши припасы исчерпаются, и вы бросите эту затею, так и не увидев «леса за деревьями».
Что вам нужно для начала — определить цель, куда вы идёте. Например, вы стремитесь устроиться на стажировку фронтендером или научиться верстать по макету. Затем вам нужно примерно определить все шаги, как до этого дойти: я обычно делаю такое «раскатывание» с конца в начало, например:
я устроился на работу
☝️
я успешно прошёл собеседование
☝️
я сделал сайт-портфолио и разместил на нём свои работы
☝️
я сверстал 10 сайтов
☝️
я сделал свой первый проект
…
Когда у вас есть цель и траектория движения, вы сможете:
1) вдохновляться своим прогрессом движения в нужном направлении;
2) отбросить ненужное в пути достижения своей цели, просто задавая себе вопрос: а нужна ли мне это фигня сейчас, чтобы выполнить текущий «этап»? Да, фронтенд интересный, классный и большой, но у вас нет задачи узнать всё, а только необходимый минимум для достижения цели.
Затем нужно заполнить промежутки между этапами достаточно мелкими, решаемыми за 1-2 дня задачами (например, «установить на компьютер редактор кода», «изучить теорию и сверстать HTML-форму», «посмотреть туториал по пользованию графическим редактором Figma и разобрать один макет»). Полученная структура — это описание вашего маршрута. Чтобы составить такую структуру, не обязательно использовать какие-нибудь особенные сервисы, достаточно будет записать всё по пунктам на бумаге или в доке. Норм, если напротив задач можно будет поставить галочку или зачеркнуть выполненный пункт — так вы будете видеть свои успехи.
Но цель и траектория — это ещё не всё. Есть ещё стартовая точка, откуда вы отправляетесь в путь. Это вы сами. И если цели и траектории у разных людей могут быть похожими, то каждый из вас — уникален. У каждого человека своя уникальная история жизни, стартовые навыки и компетенции, опыт. Я искренне верю, что можно научиться делать вообще всё, что не противоречит законам физики. Но при этом каждый отдельный человек не знает всего на свете. Так что главные препятствия в обучении, с которыми вы столкнётесь, скорее всего вы создадите себе сами. Неуспех, как и успех, зависит только от вас, от того, как вы будете себе помогать или мешать в процессе.
Продолжение в следующем посте.
Вот какие мешающие штуки бывают:
- установки на данность, а не результат: «у меня нет талантов», «мне уже поздно что-то начинать», «ошибаться — плохо» и так далее — уверяю вас, это скорее всего пустяки и отговорки, о которых вы потом, когда достигнете свою цель, просто забудете;
- вредные эвристики: вы можете разочароваться, что в фантазии всё было проще и ярче, но на деле сложно и рутинно; вы можете недооценить количество времени и усилий для достижения цели; чувство вины; трудность отойти от первоначального решения или принять необычную точку зрения; склонность к запоздалым суждениям; ощущение низкой самоэффективности — теперь вы знаете, что это мысли не только в вашей голове, а так обычно склонны думать все люди;
- неблагоприятный фон для обучения: проблемы со здоровьем, питанием, отсутствие времени или сил;
- попытка взять на себя слишком много сразу — это марафон, так что бросаться в многочасовые тренировки со старта не стоит, нужно сберечь силы на весь путь.
Вот какие есть помогающие штуки:
- делать каждый день по чуть-чуть, искусство маленьких шагов;
- бережно относиться к себе и не ругать, если что-то не выходит сделать, и искренне радоваться, если получается;
- настроиться на учёбу: минимизировать стресс, хорошо высыпаться и питаться, не отвлекаться на сторонние дела, сфокусироваться на обучении на определённое время, ввести в свою жизнь привычку учиться в одно и то же время;
- делать конспекты или вести дневник обучения;
- задействовать больше органов чувств: слушать, проговаривать, писать от руки, печатать;
- повторять всё время от времени — сразу, сходу всё не запомнится — это нормально.
Теперь про навыки, и как ими лучше всего пользоваться. Воспринимайте их как инструмент для достижения вашей личной цели. Навыки изначально спроектированы для самостоятельного обучения, то есть можно брать отдельные навыки или даже «дерево навыков» целиком и встраивать их в ваш личный маршрут. Внутри навыка тоже всё довольно просто устроено, и его нужно осваивать именно в таком порядке, сверху вниз:
1. Сначала изучаете только необходимую теорию для выполнения типовой задачи навыка — теорию можно сначала изучить обзорно, построить «карту местности», а затем возвращаться к ней во время практики.
2. Далее проходите подробный рассказ, описание алгоритма того, как типовая задача выполняется — эти алгоритмы и инструкции вы будете «впитывать» и затем применять во время практики, а также они останутся с вами в результате обучения.
3. Дальше смотрите примеры, где вам по шагам показывается, как изученное применять к реальной задаче.
4. После этого пытаетесь решить задачу сами по образу и подобию предыдущей демонстрации. В процессе набиваете шишки, записываете «умелку» в долговременную память.
5. Дальше, в зависимости от проработанности навыка, у вас есть возможность или оценить свой код в проверяющей системе, или сравнить свой код с нашим «эталонным» решением (проверки в конце концов будут во всех навыках).
То есть воспринимайте каждый отдельный навык, как такой заботливо укомплектованный «чемоданчик» для выживания в джунглях фронтенда, на отдельном участке пути к вашей цели.
А то, как, чем и зачем мы укомплектовываем навыки, я расскажу завтра.
- установки на данность, а не результат: «у меня нет талантов», «мне уже поздно что-то начинать», «ошибаться — плохо» и так далее — уверяю вас, это скорее всего пустяки и отговорки, о которых вы потом, когда достигнете свою цель, просто забудете;
- вредные эвристики: вы можете разочароваться, что в фантазии всё было проще и ярче, но на деле сложно и рутинно; вы можете недооценить количество времени и усилий для достижения цели; чувство вины; трудность отойти от первоначального решения или принять необычную точку зрения; склонность к запоздалым суждениям; ощущение низкой самоэффективности — теперь вы знаете, что это мысли не только в вашей голове, а так обычно склонны думать все люди;
- неблагоприятный фон для обучения: проблемы со здоровьем, питанием, отсутствие времени или сил;
- попытка взять на себя слишком много сразу — это марафон, так что бросаться в многочасовые тренировки со старта не стоит, нужно сберечь силы на весь путь.
Вот какие есть помогающие штуки:
- делать каждый день по чуть-чуть, искусство маленьких шагов;
- бережно относиться к себе и не ругать, если что-то не выходит сделать, и искренне радоваться, если получается;
- настроиться на учёбу: минимизировать стресс, хорошо высыпаться и питаться, не отвлекаться на сторонние дела, сфокусироваться на обучении на определённое время, ввести в свою жизнь привычку учиться в одно и то же время;
- делать конспекты или вести дневник обучения;
- задействовать больше органов чувств: слушать, проговаривать, писать от руки, печатать;
- повторять всё время от времени — сразу, сходу всё не запомнится — это нормально.
Теперь про навыки, и как ими лучше всего пользоваться. Воспринимайте их как инструмент для достижения вашей личной цели. Навыки изначально спроектированы для самостоятельного обучения, то есть можно брать отдельные навыки или даже «дерево навыков» целиком и встраивать их в ваш личный маршрут. Внутри навыка тоже всё довольно просто устроено, и его нужно осваивать именно в таком порядке, сверху вниз:
1. Сначала изучаете только необходимую теорию для выполнения типовой задачи навыка — теорию можно сначала изучить обзорно, построить «карту местности», а затем возвращаться к ней во время практики.
2. Далее проходите подробный рассказ, описание алгоритма того, как типовая задача выполняется — эти алгоритмы и инструкции вы будете «впитывать» и затем применять во время практики, а также они останутся с вами в результате обучения.
3. Дальше смотрите примеры, где вам по шагам показывается, как изученное применять к реальной задаче.
4. После этого пытаетесь решить задачу сами по образу и подобию предыдущей демонстрации. В процессе набиваете шишки, записываете «умелку» в долговременную память.
5. Дальше, в зависимости от проработанности навыка, у вас есть возможность или оценить свой код в проверяющей системе, или сравнить свой код с нашим «эталонным» решением (проверки в конце концов будут во всех навыках).
То есть воспринимайте каждый отдельный навык, как такой заботливо укомплектованный «чемоданчик» для выживания в джунглях фронтенда, на отдельном участке пути к вашей цели.
А то, как, чем и зачем мы укомплектовываем навыки, я расскажу завтра.
Через 5 минут начнётся лайв с Серёжей Поповым и Никитой Дубко.
Никита Дубко — доброжелюбный бородач и по совместительству руководитель группы в Яндекс.Поиске, редактор новостей сообщества «Веб-стандарты» и пятый голос одноимённого подкаста. И руководитель аутсорс-продакшена «Лига А». — Серёжа Попов.
Обсудим на лайве:
— Почему веб-разработчики готовы прийти на помощь новичкам.
— Как устроена веб-разработка в Яндексе.
— Как получить первый опыт работы.
Присоединиться к лайву — https://tml.io/nyps5
Никита Дубко — доброжелюбный бородач и по совместительству руководитель группы в Яндекс.Поиске, редактор новостей сообщества «Веб-стандарты» и пятый голос одноимённого подкаста. И руководитель аутсорс-продакшена «Лига А». — Серёжа Попов.
Обсудим на лайве:
— Почему веб-разработчики готовы прийти на помощь новичкам.
— Как устроена веб-разработка в Яндексе.
— Как получить первый опыт работы.
Присоединиться к лайву — https://tml.io/nyps5
Откуда берутся темы навыков, как разрабатываются
Страница навыков встречает вас списком из 36 карточек. Все навыки идут одним сплошным полотном (мы точно будем их в ближайшее время выстраивать в «треки» или «деревья» по аналогии с первым лёгким «деревом навыков», но об этом подробнее завтра), и на этой странице их лучше воспринимать независимо друг от друга.
Откуда же мы взяли эти 36 тем? Тут задействовали несколько источников:
- за основу взяли те области знаний, которые уже появлялись в профессиональных курсах по HTML, CSS и JS;
- вдобавок включили в проект навыков фидбек от коллег из «Лиги А.»;
- прошерстили результаты исследования рынка веб-разработки, которое проводили авторы профкурсов.
Всю полученную кучу тем и хотелок мы затем разделили по условным уровням: вёрстка — 1 и 2 уровня, скрипты — 1 и 2 уровня. Кое-что получилось сразу и про вёрстку, и про скрипты (например, «создание доступных интерфейсов» или «использование анимации в интерфейсе»).
Дальше стали вписывать получившийся рассортированный список тем в «формат навыка». Вот такие требования у формата:
- навык — это умение решать типовую задачу: к примеру, «Вёрстка и валидация HTML-форм» — это навык, а вот «Замыкания в JavaScript» — не навык, а просто информация по технологии;
- результат выполнения типовой задачи должен быть «осязаемый», чтобы его можно было автоматизированно проверить и оценить: например, «тестирование вёрстки» — тема интересная, но сложно проверить знания, оценить уровень полученного навыка;
- область навыка должна быть не слишком маленькая и не слишком большая, чтобы уложиться в 6-12 кейсов;
- навык — универсальный и самодостаточный модуль обучения, но при этом должно быть можно собирать несколько навыков в «цепочки» и использовать в других продуктах (например, в профкурсах).
Продолжение в следующем посте.
Страница навыков встречает вас списком из 36 карточек. Все навыки идут одним сплошным полотном (мы точно будем их в ближайшее время выстраивать в «треки» или «деревья» по аналогии с первым лёгким «деревом навыков», но об этом подробнее завтра), и на этой странице их лучше воспринимать независимо друг от друга.
Откуда же мы взяли эти 36 тем? Тут задействовали несколько источников:
- за основу взяли те области знаний, которые уже появлялись в профессиональных курсах по HTML, CSS и JS;
- вдобавок включили в проект навыков фидбек от коллег из «Лиги А.»;
- прошерстили результаты исследования рынка веб-разработки, которое проводили авторы профкурсов.
Всю полученную кучу тем и хотелок мы затем разделили по условным уровням: вёрстка — 1 и 2 уровня, скрипты — 1 и 2 уровня. Кое-что получилось сразу и про вёрстку, и про скрипты (например, «создание доступных интерфейсов» или «использование анимации в интерфейсе»).
Дальше стали вписывать получившийся рассортированный список тем в «формат навыка». Вот такие требования у формата:
- навык — это умение решать типовую задачу: к примеру, «Вёрстка и валидация HTML-форм» — это навык, а вот «Замыкания в JavaScript» — не навык, а просто информация по технологии;
- результат выполнения типовой задачи должен быть «осязаемый», чтобы его можно было автоматизированно проверить и оценить: например, «тестирование вёрстки» — тема интересная, но сложно проверить знания, оценить уровень полученного навыка;
- область навыка должна быть не слишком маленькая и не слишком большая, чтобы уложиться в 6-12 кейсов;
- навык — универсальный и самодостаточный модуль обучения, но при этом должно быть можно собирать несколько навыков в «цепочки» и использовать в других продуктах (например, в профкурсах).
Продолжение в следующем посте.
Дальше мы начали создавать контент в хронологическом порядке. Особое внимание мы уделяем «стартовым» навыкам, так как их изучают больше студентов начинающего уровня. Кроме того, навыки ссылаются друг на друга, и часто в более «дальнем» навыке есть рекомендация освоить более «ранний».
Как происходит разработка навыка:
Этап 1. Исследование
Сначала идёт этап исследования предметной области и типовых задач. Общаемся с экспертами, роем примеры, находим референсы. На выходе получается список примеров типовых задач и «кашеобразная» база знаний.
Этап 2. Синтез материалов
Дальше мы создаём стартовые материалы курса: техническое задание, макеты и «эталонный» код решений типовых задач. Тут скажу, наверное, странную вещь, но эталонного кода в принципе не существует в природе (поэтому я пишу «эталонный» в кавычках). Это подтвердит любой опытный разработчик. Правильное решение можно сделать миллионом разных способов. У каждого решения могут быть свои преимущества, недостатки, оформление, подход к архитектуре и так далее. Но в то же время мы должны выработать какое-то одно решение, так как будет странным новичкам говорить, что «делайте как хотите». В начале обучения и формирования представления о технологии нужно иметь какой-то ориентир и эталон, который поможет не запутаться и сформировать свой взгляд. Те самые правила, которые сначала учишь, а потом начинаешь сознательно нарушать. Как же мы из этого «выкручиваемся»?
Этап 3. Обратная связь от экспертов
Тут начинается процесс балансирования, чтобы выработать «идеальное» решение. Мы стараемся привлечь несколько сторон, чтобы соблюсти баланс и не впасть в крайность. Обычно зовём на ревью Лигу А, авторов профкурсов и внешних наставников с профкурсов. Каждый привносит свою специфику. А мы выбираем некий «усреднённый» вариант, консистентный с остальными нашими учебными материалами. Полученный результат в принципе не может угодить всем и сразу — это норм, ничего идеального нет.
Этап 4. Проектирование учебного контента
Дальше начинаем «раскатывать» конечный код к началу: разбиваем на крупные этапы, потом выписываем, что по коду используем в каждом этапе. Полученная последовательность — это и есть план учебных материалов: домашек, теории, демок, заданий.
Этап 5. Производство учебного контента
Тут начинаем наполнять учебные блоки теорией, заданиями и проверками.
Этап 6. Тестирование контента
Перед выпуском стараемся показать материалы бета-тестерам, выловить баги и проблемы, проверить уровень сложности. Если хотите стать тестировщиком будущих навыков (за внятный фидбек отсыпем плюшку), напишите, пожалуйста, мне на почту [email protected]. В ближайшее время у нас на очереди тестирование навыков «Сетки на гридах» и «Работа с DOM в JavaScript».
Вообще этот процесс — «идеальный» (а, как вы уже знаете, идеала не существует). На деле в разных навыках что-то идёт как-то по-другому, не так как мы задумывали. Кроме того, мы делаем не сразу весь навык, а по частям: сначала лёгкие кейсы и теорию+методику, потом средние и сложные. После выпуска мы мониторим обратную связь и что-то меняем в уже выпущенном контенте. То есть в целом этот процесс скорее гибкий и ещё формирующийся, нежели «железно выверенный». В нём многое хочется ещё достроить, дофиксить и улучшить. Об этих планах на будущее более подробно расскажу завтра.
Как происходит разработка навыка:
Этап 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], если будут вопросы, пожелания или предложения.
Успехов в обучении!
Всю неделю я рассказывал о том, что такое навыки, и как задумана вся система самостоятельного обучения. Мой рассказ — это та самая модель, «идеал», к которому мы командой стремимся и каждый день маленькими шажками приближаемся. Задумано много хорошего и разного, и мы туда идём (кстати, проекту «навыки» пару месяцев назад исполнился 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 кейса сложного уровня
— Дополнительная теория
Кейсы полного комплекта сейчас находятся в разработке и будут доступны через некоторое время.
Подробнее здесь
Что научимся делать:
Список карточек и карточки товаров — очень распространённый интерфейсный паттерн. Он применяется в интернет-магазинах, лендингах и даже простых текстовых сайтах. Верстальщику при реализации таких элементов нужно учитывать неочевидные с первого взгляда вещи: переполнение контентом и замену графики при наполнении интерфейса из CMS, управление контролами карточек с клавиатуры, интеграцию с JavaScript.
Владея этим навыком, вы сможете делать вёрстку, с которой удобно работать и программистам, и пользователям, что увеличит вашу ценность как профессионала.
Что входит в комплект:
— Методика
— 4 кейса лёгкого уровня
— 3 кейса среднего уровня
— 3 кейса сложного уровня
— Дополнительная теория
Кейсы полного комплекта сейчас находятся в разработке и будут доступны через некоторое время.
Подробнее здесь
HTML Academy
Интерактивные онлайн-курсы HTML Academy
Вместе мы научимся работать с живым кодом, самостоятельно решать задачи, приближённые к реальным, использовать новейшие технологии. Минимум скучной теории и максимум практических упражнений.
Лайв 10 февраля «Что ждать от тестового задания фронтенд-разработчика» в 13:00
В прямом эфире поделимся роадмапом по изучению веб-разработки для начинающих и расскажем, что надо знать новичкам для успешного выполнения тестового задания.
Рассмотрим реальные примеры тестовых заданий и подскажем, чему стоит уделить особое внимание.
Разобраться с темой поможет ведущий — Алексей Симоненко, директор по развитию HTML Academy с опытом в веб-разработке более 20 лет.
Записаться на лайв — https://tml.io/4h1v2
В прямом эфире поделимся роадмапом по изучению веб-разработки для начинающих и расскажем, что надо знать новичкам для успешного выполнения тестового задания.
Рассмотрим реальные примеры тестовых заданий и подскажем, чему стоит уделить особое внимание.
Разобраться с темой поможет ведущий — Алексей Симоненко, директор по развитию HTML Academy с опытом в веб-разработке более 20 лет.
Записаться на лайв — https://tml.io/4h1v2
Стартует курс «React. Разработка сложных клиентских приложений»
На курсе научимся использовать React для создания современных фронтенд–приложений.
Вас ждут:
Лайвы с преподавателем
Лайвы проходят по понедельникам и четвергам с 19:00 до 21:00 по московскому времени. Запись доступна на следующий день.
Практика
После лайва вы выполняете домашнее задание, в котором работаете над своим проектом и закрепляете учебный материал.
Ревью кода
После каждого задания ваш личный наставник проверяет качество работы, делится опытом и рассказывает, как можно сделать лучше.
Проекты
Учебный проект будет общим для всех, над ним вы будете работать вместе с преподавателем на лайвах. Это будет музыкальная онлайн-игра со встроенным аудиоплеером.
Вы также будете работать над личным проектом на выбор. «Шесть городов» — современный сервис для путешественников, которые не хотят переплачивать за аренду жилья.
«Что посмотреть» — онлайн-кинотеатр нового поколения с возможностью выбирать фильмы по жанру, изучать их подробное описание и просматривать список похожих кинокартин.
Оплатить можно целиком или в рассрочку. Курс продлится с 1 февраля по 4 апреля.
Записаться
На курсе научимся использовать React для создания современных фронтенд–приложений.
Вас ждут:
Лайвы с преподавателем
Лайвы проходят по понедельникам и четвергам с 19:00 до 21:00 по московскому времени. Запись доступна на следующий день.
Практика
После лайва вы выполняете домашнее задание, в котором работаете над своим проектом и закрепляете учебный материал.
Ревью кода
После каждого задания ваш личный наставник проверяет качество работы, делится опытом и рассказывает, как можно сделать лучше.
Проекты
Учебный проект будет общим для всех, над ним вы будете работать вместе с преподавателем на лайвах. Это будет музыкальная онлайн-игра со встроенным аудиоплеером.
Вы также будете работать над личным проектом на выбор. «Шесть городов» — современный сервис для путешественников, которые не хотят переплачивать за аренду жилья.
«Что посмотреть» — онлайн-кинотеатр нового поколения с возможностью выбирать фильмы по жанру, изучать их подробное описание и просматривать список похожих кинокартин.
Оплатить можно целиком или в рассрочку. Курс продлится с 1 февраля по 4 апреля.
Записаться
Сайт готов? Теперь нужно проверить, всё ли правильно работает. Собрали для вас инструкцию, на что смотреть, чтобы с большой вероятностью после запуска всё было в порядке.
Читать 👇
https://tml.io/c5sob
Читать 👇
https://tml.io/c5sob
HTML Academy
Как тестировать сайты
И не проморгать очевидную ошибку, за которую потом краснеть.
Спросили наших наставников, почему они решили наставничать, зачем им этот опыт. Вот, что они нам рассказали 👇
Алексей Петров
Решил стать наставником, чтобы держать свои навыки в «подогретом» состоянии. Работая постоянно в одном и том же проекте, постепенно утрачиваешь кругозор, замыкаешься на одних и тех же технологиях. Вопросы студентов позволяют освежить в памяти базовые вещи, принимать архитектурные решения осознанно, а не делать по привычке. В процессе код-ревью решений студентов, при поиске информации для обоснования своих комментариев, нашёл и для себя кое-что новое.
Сергей Зубов
Стал наставником несколько лет назад. Захотелось просто попробовать, что это такое и как это будет. Какие плюсы вижу от этой работы — можешь организовать человека, чтоб он работал продуктивно. Сам работаешь более продуктивно. Постоянно развиваешься, так как если наставник сидит и верстает постоянно сайтики, больше ничего не делая — он просто неинтересен своим ученикам. Умение учить помогает и в реальной жизни, а также улаживание конфликтных ситуаций и поддержка в случае уныния — тоже несомненный плюс не только в сфере обучения, но и в реальности. Короче говоря, софт-скилы повышаются сильно, конечно, если подходить с головой к этому.
Мария Чернова
Потому что сама когда-то была джуном и прекрасно помню, с какими трудностями сталкиваются ребята в начале пути.
Очень важно, чтобы рядом был человек, который не только направит в нужное русло, расскажет и покажет, но и просто поддержит добрым словом, когда руки опускаются.
Мне в своё время очень повезло с таким наставником и теперь я чувствую личную ответственность за то, каким будет наше сообщество в будущем, ведь мы сами «взращиваем» себе коллег.
Круговорот помощи в профессии
Дмитрий Мирошниченко
Для меня это в первую очередь был способ испытать себя. После первого потока мне очень понравился формат и решил продолжить ещё на поток и так понеслось. Уже будучи наставником, подметил для себя ещё ряд преимуществ, которые получил в виде софт-скилов: умение быстро разобраться в чужом коде и умение чётко излагать свои мысли.
Алексей Петров
Решил стать наставником, чтобы держать свои навыки в «подогретом» состоянии. Работая постоянно в одном и том же проекте, постепенно утрачиваешь кругозор, замыкаешься на одних и тех же технологиях. Вопросы студентов позволяют освежить в памяти базовые вещи, принимать архитектурные решения осознанно, а не делать по привычке. В процессе код-ревью решений студентов, при поиске информации для обоснования своих комментариев, нашёл и для себя кое-что новое.
Сергей Зубов
Стал наставником несколько лет назад. Захотелось просто попробовать, что это такое и как это будет. Какие плюсы вижу от этой работы — можешь организовать человека, чтоб он работал продуктивно. Сам работаешь более продуктивно. Постоянно развиваешься, так как если наставник сидит и верстает постоянно сайтики, больше ничего не делая — он просто неинтересен своим ученикам. Умение учить помогает и в реальной жизни, а также улаживание конфликтных ситуаций и поддержка в случае уныния — тоже несомненный плюс не только в сфере обучения, но и в реальности. Короче говоря, софт-скилы повышаются сильно, конечно, если подходить с головой к этому.
Мария Чернова
Потому что сама когда-то была джуном и прекрасно помню, с какими трудностями сталкиваются ребята в начале пути.
Очень важно, чтобы рядом был человек, который не только направит в нужное русло, расскажет и покажет, но и просто поддержит добрым словом, когда руки опускаются.
Мне в своё время очень повезло с таким наставником и теперь я чувствую личную ответственность за то, каким будет наше сообщество в будущем, ведь мы сами «взращиваем» себе коллег.
Круговорот помощи в профессии
Дмитрий Мирошниченко
Для меня это в первую очередь был способ испытать себя. После первого потока мне очень понравился формат и решил продолжить ещё на поток и так понеслось. Уже будучи наставником, подметил для себя ещё ряд преимуществ, которые получил в виде софт-скилов: умение быстро разобраться в чужом коде и умение чётко излагать свои мысли.
Выпустили новую главу «Микросетки».
Глава входит в тренажёр «Погружение в HTML и CSS». Вас ждёт 17 заданий и 2 испытания.
Узнаем, что такое микросетки и как тестировать вёрстку. Разберём, когда лучше использовать гриды, флексы, блочные и строчные боксы. Сверстаем блок навигации и список карточек.
Переходите по ссылке, чтобы начать обучение — https://tml.io/sjbhh
Глава входит в тренажёр «Погружение в HTML и CSS». Вас ждёт 17 заданий и 2 испытания.
Узнаем, что такое микросетки и как тестировать вёрстку. Разберём, когда лучше использовать гриды, флексы, блочные и строчные боксы. Сверстаем блок навигации и список карточек.
Переходите по ссылке, чтобы начать обучение — https://tml.io/sjbhh
HTML Academy
Микросетки
Узнаем, что такое микросетки и как тестировать вёрстку. Разберём, когда лучше использовать гриды, флексы, блочные и строчные боксы. Сверстаем блок навигации и список карточек.
Собрали отзывы выпускников пятого потока курса «React. Разработка сложных клиентских приложений».
«...Этот курс для меня стал своеобразным активатором. На нём в единый мощный инструмент собрались полученные знания всех предыдущих интенсивов — это дало возможность без особых трудностей писать сложные интерактивные приложения...»
Прочитать остальные отзывы можно здесь 👇
https://telegra.ph/Otzyvy-vypusknikov-pyatogo-potoka-kursa-React-Razrabotka-slozhnyh-klientskih-prilozhenij-02-03
«...Этот курс для меня стал своеобразным активатором. На нём в единый мощный инструмент собрались полученные знания всех предыдущих интенсивов — это дало возможность без особых трудностей писать сложные интерактивные приложения...»
Прочитать остальные отзывы можно здесь 👇
https://telegra.ph/Otzyvy-vypusknikov-pyatogo-potoka-kursa-React-Razrabotka-slozhnyh-klientskih-prilozhenij-02-03
Telegraph
Отзывы выпускников пятого потока курса «React. Разработка сложных клиентских приложений».
Дмитрий Халимов Этот курс для меня стал своеобразным активатором. На нём в единый мощный инструмент собрались полученные знания всех предыдущих интенсивов — это дало возможность без особых трудностей писать сложные интерактивные приложения едва ли не любой…
Префикс — можно перевести как «приставка».
Если посмотреть на стили какого-нибудь сайта, можно столкнуться со свойствами, содержащими впереди непонятные слова: -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. В этом случае будут подставляться только нужные префиксы, а не все возможные.
#неглупые_вопросы
Если посмотреть на стили какого-нибудь сайта, можно столкнуться со свойствами, содержащими впереди непонятные слова: -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
Есть несколько способов указывать пустые ссылки. Рассмотрим, чем грозит использование того или иного способа.
https://tml.io/plyoh
HTML Academy
Как ставить пустые ссылки
7 способов и ещё один.
Вы вбили запрос в адресной строке и нажали Enter, что дальше?
В этой статье постараемся подробно ответить на частый вопрос с собеседований, что на самом деле происходит, когда пользователь вбивает в браузер адрес google.
Публикация основана на переводе репозитория «What happens when…» Филлипа Джеймса.
https://tml.io/xe2e1
В этой статье постараемся подробно ответить на частый вопрос с собеседований, что на самом деле происходит, когда пользователь вбивает в браузер адрес google.
Публикация основана на переводе репозитория «What happens when…» Филлипа Джеймса.
https://tml.io/xe2e1
HTML Academy
Что на самом деле происходит, когда пользователь вбивает в браузер адрес google.com
Разбираемся, что происходит в браузере после нажатия кнопки «enter».