Александр Першин AlexPershin

Думаю, здесь дали пример требований в тестовому заданию, которое позволяет узнать, как человек пишет на нативном JS, без использования всяких JQuery.

Новичкам с нулевым опытом.

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

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

Ваш посыл не понятен. Все курсы плохие? Какие-то конкретные курсы плохие? В принципе нельзя сделать хорошие курсы?

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

В общем-то вы и описали интенсивы в своём комментарии. Просто мой прочитали невнимательно.

В бутстрап выпускники интенсивов вникают легко, и даже могут использовать его там где он нужен, а где не нужен, не использовать.

Что касается трудоустройства, то тут вы неправы. Очень многие устраиваются на работу. Обычно, после двух интенсивов (это либо два по вёрстке, либо вёрстка и js).

Уже, кстати, не так быстро всё устаревает. Те же веб-технологии (HTML, CSS, JS) вроде бы и развиваются очень быстро, но ядро устоялось и значимых изменений нет уже несколько лет, и вряд ли появятся. Да в CSS появились гриды, но флексбоксы никуда не ушли, их тоже надо знать, не говоря уже про обычную блочную модель.

Другое дело — инструменты: фреймворки, библиотеки. Они постоянно меняются и делать по ним курсы сложно, хоть каждый месяц обновляй.

Объясню про HTML Academy

В любой предметной области есть какие-то базовые знания и умения, которые можно изучить и уметь что-то делать на уровне «для себя». Сделать сайтик для себя не по макету, сделать какую-то CSS-графику для души и так далее. Именно за этот уровень отвечают интерактивные курсы. В них, постоянно практикуясь, ученик постигает азы. И на профессиональный уровень они не рассчитаны. Наивно полагать, что пройдя все эти курсы и потратив несколько раз по 390 рублей, можно начать работать на профессиональном уровне.

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

Те самые интенсивы. Там даётся макет, даётся набор критериев качества (вот, ещё несколько лет назад обсуждались habrahabr.ru/company/htmlacademy/blog/254171), и самое главное, даётся наставник, который ведёт ученика весь курс и следит за качеством выполнения вёрстки. Вот требования к наставникам (https://htmlacademy.ru/tutors), можете попробовать пройти собеседование и поймёте, что так просто в наставники не попасть.

Стоимость курса (от 11 до 14 т.р.) как раз и танцует от стоимости наставника, а ещё от профессиональных авторов, которые являются постоянными сотрудниками академии и постоянно улучшают программу и материалы. Те 25.т.р, которые вы увидели, это просто экспериментальный вариант с увеличенным в два раза временем работы с наставником.

Верстают макеты вот такого уровня сложности: www.youtube.com/watch?v=YciOSoPL1cg&list=PLQJNT2fdCJnhoGNGl-kIVbxiiyJRZOmZZ&index=6

Отличная ссылка на документацию, в которой говорится прямо противоположное вашим выводам:

When evaluating your site to see if it includes hidden text or links, look for anything that's not easily viewable by visitors of your site. Are any text or links there solely for search engines rather than visitors?

However, not all hidden text is considered deceptive. For example, if your site includes technologies that search engines have difficulty accessing, like JavaScript, images, or Flash files, using descriptive text for these items can improve the accessibility of your site. Remember that many human visitors using screen readers, mobile browsers, browsers without plug-ins, and slow connections will not be able to view that content either and will benefit from the descriptive text as well. You can test your site’s accessibility by turning off JavaScript, Flash, and images in your browser, or by using a text-only browser such as Lynx. Some tips on making your site accessible include:

Гугл сам говорит, что текст, спрятанный от пользователей, и предназначенный для поисковиков — это плохо. Но текст, предназначенный для пользователей с читалками (то есть в целях доступности) — это ок.

Если лень вникать в английский текст, то вот прямой ответ на форуме поддержки вебмастеров productforums.google.com/forum/#!msg/webmasters/YJcZUhtMIE4/XkOEzVakBAAJ

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

А что касается aria-атрибутов, то можно и без них обойтись в большинстве простых случаев, если использовать теги по назначению.

Вы так пишете как будто бы Хабр место для элиты, вроде вас, и новичков тут нет.

И влетел в бан в гугле и яндексе за это. Для доступности у html хватает аттрибутов, их и стоит использовать, а не заниматься дичью вроде top: -9999px (еще один способ, как и сделать текст такого же цвета как и фон, много их было).

Гугл точно за это не банит. Тем более, что доступность уже становится обязательным требованием. В США всё к этому идёт и для коммерческих сайтов, а раз так, то очень скоро и до нас докатится, а почувствуют это профессионалы-аутсорсеры в первую очередь. Думаю, и для них такие туториалы начального уровня будут полезны (быстрой систематизацией).

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

В первую очередь семантика нужна пользователям. Какие могут быть пользователи:

1. Обычные люди
2. Поисковые роботы
3. Специализированные парсеры

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

Поисковым роботам тоже семантичная разметка нравится. Например, гугл парсит с сайтов расписания и выводит в свой виджет в поиске, если расписания на сайте свёрстаны таблицей. Так как семантика таблиц – набор многомерных связанных данных. И использование таблиц для разметки таких данных – это и есть семантика.

Про парсеры сайтов не мне рассказывать бэкенд-программисту. Чем более структурированно свёрстана страница, тем удобнее её парсить. Чтобы получить уникальное содержимое каждой страницы, вы идёте внутрь тега main, находите там нужный раздел и выдираете содержимое списка. Понятно, что можно ориентироваться и по классам, но если помимо классов ещё и теги правильные в разметке, то как-то спокойнее.

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

HTML и CSS лучше начинать изучать на каком-нибудь интерактивном курсе. Из русскоязычных – HTML Academy

После такого курса уже можно записаться на более серьёзную платную программу, если вёрстка понравится.

«Докопайся до формы, если по содержанию не можешь» =)

Да-да, криво написал, но суть ясна. Гигантских зарплат никто не обещает. Хотя рост зарплат в IT очень быстрый после старта: за несколько лет в несколько раз.

На последнем вебинаре я обычно говорю, что после этого курса (базовый HTML), можно считать, что ваша зп не будет больше 30к, причём в Москве. И для регионов эту цифру нужно делить на 1.5 или 2. Вроде как не сильно занижаю.

Обычный селект можно сделать мультиселектом, это встроенная возможность: <select multiple>

Здесь вторая часть более детальная. Возможно, с момента того перевода оригинал дополнился. В любом случае, статья достойная перевода.

1. Мы разрешаем их не стилизовать. И запрещаем стилизовать селекты (хотя их в макетах нет)

2. Для радио и чекбоксов — приём с :checked ~ label

Это критерии для базового интенсива, мы в них не включаем то, что на базовом не разбираем. А вот на продвинутом расширим критерии, добавив адаптивность, БЭМ, SVG, Flexbox, оптимизацию.

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

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

А вы специально подготовленный для ретины шрифт используете или свой? Говорят, бывают небольшие проблемы с отображением на ретине.

Общее правило есть. Если базовый функционал может работать без JS, он должен работать без JS. Если контент может быть доступен без JS, то он должен быть доступен без JS. В 90% случаев такая реализация совсем не трудоёмка. Но есть две тонкости:

1. Если JS являются неотъемлемой частью базового функционала (те же Яндекс.Карты), то, конечно, без JS ничего работать не будет. И тут париться не надо.

2. Насколько стоит усложнять базовый функционал, чтобы он был похож на версию c JS. Здесь все тонкости. Пример: магазин пиццы. В нём есть конструктор пиццы на JS (размер, тесто, добавки, пересчет цены и т.д.). Без JS на месте конструктора обычное текстовое поле, куда пользователь впишет «мне маргариту с двойным сыром». Сложно такой базовый функционал сначала реализовать, а затем его расширить на JS?

Мы на продвинутом интенсиве это сделаем. Эти критерии для базового — там флексбоксы не разбираем, поэтому не добавили в критерии.

Интенсив так и построен: в первой части вебинара очень кратко даётся теория и тонкости (т.к. подробная база есть интерактивных курсах), а во второй части, как правило, детальный и пошаговый разбор какого-либо этапа вёрстки учебного макета (у нас это Барбершоп). Например, мы делаем разметку или сетку (кусочек демки есть в примере). А в качестве домашнего задания ученику предлагается сделать тот же этап вёрстки, но уже на другом макете (у нас они называются «личные»).

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

Насколько я знаю, в трихаузе нет курсов с живыми инструкторами. Там упор на видео. Про уровень качества судить не могу — детально не изучал.

Это не столь очевидно в статье. Но вообще время выполнения — это весь интенсив, так как макеты ученики верстают постепенно: сначала разметка, потом сетки, декоративные элементы, контентные стили и так далее. Но обычно на «идеальное» вылизывание остаётся 1-2 недели в зависимости от скорости выполнения заданий.

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

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

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

Надеюсь, в недавно вышедших курсах (сетки, каскадирование, градиенты) эти изменения в испытаниях заметны.

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

Но я не совсем уверен, что невозможность попасть в рейтинг демотивирует обучаться. Да, рейтинг как механизм не будет работать и мотивировать учиться усерднее. Но забросить обучение из-за невозможности попасть в топ — скорее всего перебор.

Тем, кто из вова «дейлики» милее =)

Планы по сотрудничеству, конечно, есть. Например, мы уже сотрудничаем с ИТМО, они запустили курс на своей платформе, с которым наш интегрирован. Т.е. студенты проходят курсы у нас, а оценки передаются на платформу ИТМО. Позже ИТМО выдаёт сертификат. courses.ifmo.ru/

А вообще над франшизой не думали пока серьёзно (даже непонятно что это такое в обучении). Дело в том, что сейчас львиная доля курсов бесплатна и есть открытые профили. Т.е. базовый цикл (который достаточно серьёзный и объёмный сам по себе) может легко использоваться любым преподавателем или учебным заведением. Я сам так у студентов лабораторные веду. Они регистрируются и проходят курсы, а я проверяю их прогресс. Была задумка упростить эти процессы для преподавателей, чтобы можно было в профиле собрать своих студентов в один список.

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

Мы готовы к любому сотрудничеству, пишите, обсудим подробнее.

Про CodeSchool можно спорить. Я там 1-2 часа провёл знакомясь с заданиями, курсы показались достаточно слабыми в плане проработки, наглядности, объёма материала и так далее. Возможно, надо заплатить им 25$ и пройти последние, посмотреть, сильно ли там всё изменилось.
По поводу вовлечения — мы механики разместили как раз в порядке убывания значимости. Самые важные наверху. Они влияют не только на пользователя, но и на само содержание курсов и процесс их создания. А те же достижения из нижней части не влияют.

Это по статистике достижений можно посмотреть: htmlacademy.ru/achievments/
Там есть несколько ачивок с идеальными испытаниями, но самая серьёзная эта: «Покоритель испытаний, пройти 20 испытаний с результатом 100%»
Этих заработано 502. А «5 идеальных испытаний» уже 4844. Т.е. получается больше чем полпроцента.
Измерять много чего можно, только мы изначально концентрировались не на исследованиях, а на создании курсов, поэтому и механизмов сбора подробной статистики не заложили. Мне пока хватает экспериментов над своими студентами в ИТМО =) Даже статью писали об этом.

Есть, но пока в более отдалённых. И в более прикладном варианте.

Спасибо, Яша. Да мы только начинаем =)

Скорее всего, в обзоре специально российские проекты не рассматривались. Т.к. достойных много — тот же Универсариум, Лекториум (где очень много лекций для прожжённых технарей) или другие, а в обзоре их почему-то нет. Но вот почему? =)

Вы, конечно, удивитесь. Но не MS Office, а Open Office.

Проблема вот в чём: в школах у очень многих информатика слабая, тем более, что в 10-11 классе все поголовно заняты подготовкой к ЕГЭ. А вузам нужны студенты с базовыми навыками: офисные программы, чтобы оформлять курсовики/дипломы, нормальная вёрстка как инструмент для создания интерфейсов информационных систем (особенно это нужно IT-шникам, т.к. серьёзные задания начинаются уже с первого курса).

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

сетки, наследование, пара курсов по html5, css3

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

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

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

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

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

Если говорить про наш пример, то какую еще задачу для проверки навыков вёрстки можно найти? Первое, что мне пришло на ум — дать макет и посмотреть и код (разметку), и визуальное совпадение созданной страницы с макетом.
Каким еще задачам могут учить лабораторные по HTML+CSS? Если отыскать такие задачи, то набор испытаний можно будет расширить и сделать сравнение более точным.

Вот эти четыре предусмотрены:
— Создание веб-страниц с применением конструктора сайтов.
— Использование CSS-стилей.
— Вёрстка веб-страниц.
— Создание веб-страниц на основе шаблонов.

Для части студентов их заменили на HTML Academy — htmlacademy.ru/learn_map

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