Пофиксить что можно html academy

Пофиксить что можно html academy

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

Открываем новую рубрику #карьерные_советы в нашем Телеграм-канале «Как стать мидлом». Раз в неделю карьерный консультант Венера Мещерова будет делиться советами и отвечать на вопросы.

На этой неделе обсуждаем один из самых «любимых» вопросов с собеседований — «Кем вы видите себя через 5 лет?».

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

И не забывайте подписываться на канал «Как стать мидлом». Уже на следующей неделе будем обсуждать, можно ли врать про опыт в резюме.

С 15 по 18 марта весенняя распродажа навыков и проектов для практики, скидки до 75%.

⚡Проекты для практики помогут проверить свои навыки веб-разработки, выполнив проект по вёрстке или javascript «от начала и до конца».

В комплекте:
* макет в формате figma,
* пошаговая инструкция,
* архивы с эталонным решением каждого этапа.

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

В комплекте:
— теория и инструкции,— эталонная реализация,
— кейсы для практик.

Фронтенд-новости 47. Совершенно точно настоящий, а не отправленный случайно нажатием enter в неподходящий момент времени, пока ещё не всё оформлено, дайджест новостей и полезных статей о фронтенде с 6 по 16 марта, хотя обычно он выходит по понедельникам, а сегодня пятница, но что уж теперь.

�� Что нового

Отчет о производительности Astro, Gatsby, Next.js, Nuxt, Remix, и SvelteKit в 2023.

В Chrome появился headless mode. Узнайте, как его использовать.

�� HTML и CSS

Типографить станет чуть легче с новым CSS-свойством text-wrap: balance

Нам нужен нативный .visually-hidden

Полное руководство по медиавыражениям

ARIA против HTML. ` <div role="heading" aria-level="1"> `— это то же самое, что `<h1>` , но что использовать лучше?

Руководство для начинающих по ручному тестированию доступности. Узнайте, как проводить ручное тестирование с клавиатурой, программой чтения с экрана и масштабированием.

Пять ошибок при написании альтернативного текста?

�� Что почитать по JavaScript / Игорь Антонов с большим обзором книг по JavaScript

Были ли React Hooks ошибкой?

Как создать панель администратора React с помощью Mantine, Strapi и Refine

Подпишитесь на @html_blog, чтобы не пропустить новые выпуски.

Где проходят стажировку выпускники Академии? 9 частых вопросов про «Лигу А».

1. Что такое лига❓
Это фронтенд-аутсорс, который принимает заказы на вёрстку и фронтенд — от простых страничек до больших сервисов. Мы сами основали эту компанию, чтобы трудоустраивать туда своих студентов.

У ребят есть свой сайт, заходите посмотреть — https://ligaa.agency/

2. Как появилась идея❓
Пять лет назад мы решили проверить, насколько наши выпускники умеют справляться с реальными задачами на рынке.

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

3. Не было страшно завалить проект❓
Мы страховались. Если бы что-то пошло не так, мы бы бросили на доработку проекта свои силы, у нас были эксперты.

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

После пилотного запуска было решено этот процесс масштабировать.

4. Как выглядит Лига сейчас❓
Лига когда-то состояла из одного-двух человек, нескольких выпускников, которые делали проекты и нескольких проектов в работе. К 2021 году они сделали 700 с лишним проектов, в штате около 40 человек и около 100 выпускников одновременно работает.

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

5. Сколько студенты работают в Лиге❓
Мы всем говорим: Лига — это не ваша новая основная работа. Это временная история, чтобы получить опыт. Время работы может быть разное, обычно около полугода. Вы работаете и получаете деньги за каждый проект, за который берётесь.

6. Какая зарплата на стажировке❓
Зависит от проекта. Существует ставка часа, у разных проектов разная сложность, эта ставка часа тоже варьируется.

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

7. Бывает ли, что выпускники уходят работать к клиентам❓
Бывает, мы поощряем, иногда Академия сама набирает фронтов и верстальщиков из Лиги.

8. Как лига влияет на статистику трудоустройства выпускников❓
Благодаря этой стажировки у выпускников профессии конверсия в трудоустройство выросла до 95–96%.

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

Пофиксить код как на фото

Как пофиксить данные ошибки?Код прилагается
#include &lt;stdio.h&gt; #include &lt;conio.h&gt; #include &lt;math.h&gt; #include &lt;iostream&gt; using namespace.

Немного пофиксить код
using System; using System.Collections.Generic; using System.Linq; using System.Text; using.

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

Почему-то при работе программы, пишет что y = не число, нид пофиксить (код в описании)!
using System; using System.Collections.Generic; using System.Linq; using System.Text; using.

Сообщение от novichek_1905

Можете тогда подсказать как сделать чтоб сайт не двигался в сторону и расположить правильно фиолетовый фон

Добавлено через 38 секунд

Сообщение от novichek_1905

Rudman132, я конечно могу подсказать, как убрать горизонтальный скролл, но вы сами поймите, что тут важно не убирать его принудительно, а делать так, что бы он не появлялся. Сейчас это не баг, это следствие плохой вёрстки. Конкретно в вашем случае это некорректное позиционирование (там где оно не нужно) блока .textmenu да и тег menu не используется, так как есть семантический html 5 тег nav

Пофиксить что можно html academy

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

Рассмотрим, что нужно знать тем, кто пишет или собирается писать бизнес-логику. А ещё посоветуем, что можно почитать.

Фронтенд-новости 45. Дайджест новостей и полезных статей о фронтенде.

�� Самое важное

▶️ Может ли ChatGPT писать хороший CSS? Автор видео считает, что да.

Основные команды для работы с Git. Обновили важную инструкцию для всех, кто терпеть не может index_release_копия(2)_ 3 _final.html .

�� Что нового

Node.js v19.7.0: npm v9.5.0 и новый анализатор URL-адресов, совместимый с Ada WHATWG

�� HTML и CSS

Новое выравнивание по базовой линии с помощью first и last .

Фокусные точки и соотношение сторон — интересный способ обрезки изображений с учётом их фокуса.

Вращающаяся галерея с анимацией на основе CSS-прокрутки.

А так ли нам нужно обнаружение переноса строки в флексах? Кажется, что очень пригодилось бы.

Пошаговое руководство по созданию доступных каруселей.

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

Типы инпутов. Просто типы инпутов.

��️ JavaScript

MutationObserver для обработки узлов DOM, которых ещё не существует.

Как предотвратить проблемы при использовании асинхронных диспетчеров состояний в React и избежать нарушения UI, анимации и повреждения UX.

Создание простого инструмента командной строки с помощью современного Node.js. Начинаем с нуля, без шаблонов.

Подпишитесь на @html_blog, чтобы не пропустить следующие выпуски.

Если вы планируете создавать Single Page Applications — одностраничные приложения — вам нужно изучить Vue, React или Angular.

Vue создан бывшим инженером Google — Эваном Ю. Фреймворк поддерживается сообществом, имеет 197 000 звёзд и 32 300 форков.

Этот фреймворк встречается в четверти вакансий для разработчиков с опытом 1–3 года и в 15% вакансий — с опытом от трёх лет.

Для тех, кто решит изучать Vue самостоятельно, подготовили план обучения. Если вам удобнее сразу получить доступ к отобранным материалам, демонстрационным кейсам и готовым проектам для практики, записывайтесь на курс. До 5 марта действует скидка 30%.

⚡️ Если вы планировали изучить JavaScript, сейчас подходящее время, чтобы записаться на обучение.

Мы открыли запись на следующие потоки профессий «JavaScript-разработчик», «Фулстек-разработчик» и на курс «JavaScript. Профессиональная разработка веб-интерфейсов».

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

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

Изучить программу подробнее и записаться:

Фронтенд-новости 46. Дайджест новостей и полезных статей о фронтенде с 27 февраля по 5 марта.

�� Самое важное

W3C делают новый сайт и приглашают поучаствовать в его создании.

�� Что нового

�� HTML и CSS

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

Руководство по CSS object-view-box .

Руководство по цветовым функциям CSS.

Узнайте от Рэйчел Эндрю, что было нового в феврале в веб-платформе:
— выражения от контейнера для размеров
— initial-letter — для работы с буквицей
— ReadableStream — в асинхронном формате
— AudioContext.setSinkId() — чтобы AudioContext мог направлять звук в нужное устройство
— IFrame без учетных данных
— и многое другое.

Теория. Теперь можно запрашивать у контейнера не только размеры, но и стили, и даже кастомные свойства.
Практика. Как сделать тёмную тему с помощью выражений от стилей контейнера.

О выражения от контейнера, адаптивных изображениях и JPEG-XL.

Изменение размера с помощью CSS-свойства resize , которое создает в документе область с изменяемым размером.

font-display: swap решает проблему с FOIT, но не решает всех проблем. Всё-таки если шрифт, даже с font-display: swap , загрузился не сразу, то сначала отображается дефолтный шрифт, а потом он меняется на указанный в font-family . В этот момент происходит микро, а иногда и макро, смещение макета, которое негативно влияет на метрику CLS. С помощью size-adjust , ascent-override , descent-override`и `line-gap-override можно нивелировать смещение и улучшить метрику.

Заголовки составных таблиц плохо поддерживаются средствами чтения с экрана — избегайте их (ну, в смысле, составных таблиц ��

Используйте позиционирование к якорю для расположения элементов рядом с другим

Проблема добавления пробела после псевдоэлемента ::marker .

��️ JavaScript

▶️ Перезапуск процессов в Node.js / Новый параметр —watch. Разбираемся на практике с новым экспериментальным параметром для CLI ‘—watch’.

▶️ Как вызвать функцию в JavaScript / 5 способов. Разбираем вопрос с собеседований.

Миграция с Enzyme на React Testing Library.

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

Sandworm Audit: новый инструмент аудита JS для сканирования проекта и зависимостей на наличие уязвимостей, проблем с лицензией и связанных с этим проблем.

�� Общее

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

WebPush в iOS изменил мир? Получается, что да.

Разрабатываем браузерное расширение легким движением руки

Подпишитесь на @html_blog, чтобы не пропустить новые выпуски.

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

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

Подборка статей по JavaScript для начинающих

Сели изучать JavaScript и хотите написать пару рабочих скриптов? В помощь публикуем подборку статей. Внутри найдёте инструкцию по типам данных, познакомитесь с React и TypeScript, узнаете про алгоритмы и посмотрите, как писать код правильно.

Что не так с онлайн-курсами и как это исправить: опыт HTML Academy

Мы в HTML Academy постоянно работаем над повышением эффективности наших образовательных программ и курсов (ради этого мы ставим опыты на студентах и внедряем геймификацию).

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

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

Проблема: что не так с онлайн-курсами

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

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

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

Все вышеперечисленное прекрасно существует в режиме офлайн, но можно ли перенести обучение такого формата в интернет?

Как это работает: онлайн-интенсивы

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

• Онлайн-курсы для знакомства с веб-технологиями и освоения базовых навыков работы с ними.
• Вебинары, на которых слушатели получают больше продвинутой теоретической информации, чем в ходе онлайн-курсов.
• Личное общение с наставником — опытные специалисты, сотрудничающие с HTML Academy, связываются с учениками по скайпу и в режиме 1 на 1 помогают им осваивать программу курса и проверяют домашние задания (индивидуальный подход гораздо эффективнее групповых занятий в офлайне).
• Сквозные проекты — в ходе обучения студенты работают над реальными проектами и шаг за шагом верстают настоящий сайт, который ничем не отличается от обычных корпоративных веб-ресурсов.
• Сертификация — как уже было сказано выше, люди хотят получить «плюсик в резюме», поэтому им нужно дать возможность защитить свой проект на соответствие ряду критериев и получить реальный сертификат о прохождении обучения.

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

— отзыв участника пятого по счёту базового интенсива

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

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

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

Здесь и далее по клику изображения открываются в полном размере

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

Критерии оценки

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

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

Ещё один шаблон для вёрстки сайта в рамках базового интенсива

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

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

1. Выполнена HTML-разметка всех страниц и всех элементов на страницах.
2. Один стилевой файл на все страницы (с учётом normalize.css можно два).
3. Вёрстка идентично отображается в последних версиях браузеров Chrome, Opera, Firefox, Safari, а также в Internet Explorer 10+.
4. Сайт должен нормально смотреться на минимальном для данного макета разрешении:
   • При большем размере экрана макет должен оставаться по центру и не иметь горизонтального скролла.
   • На разрешениях экрана меньше ширины контейнера вёрстка не должна менять свою структуру.
5. В корне документа должны быть папки css, img, js или аналогичные. Главная страница имеет название index.html. В названиях и расширениях файлов нет заглавных букв и пробелов.
6. Единообразное написание и форматирование кода в HTML, CSS и JavaScript.
7. Грубые ошибки в разметке отсутствуют. Например:
   • Ссылки сделаны не тегом <a> , а другими тегами.
   • Использование строчных элементов для создания крупных (сеточных) блоков.
   • Абзацы должны быть абзацами, а не <br><br>
8. Нельзя строить сетку с помощью таблиц и позиционирования.
9. Нельзя использовать !important в CSS.
10. При наполнении контентом как на макете элементы каждой страницы должны соответствовать макету:
    • Допускаются различия в 5 пикселей по высоте и 2 пикселя по ширине.
    • Допускаются отсутствия стилизации кастомных элементов форм.
    • Допускаются различия в отображении шрифтов, связанные со сглаживанием на различных платформах.
    • Должны быть подключены правильные шрифты, а их размеры и толщина должны соответствовать размерам в макетах и ТЗ.
11. Выбран правильный формат изображений:
    • JPEG для фотографий.
    • Всё остальное в PNG.
12. Документ должен проходить проверку на валидность validator.w3.org

1. Нельзя использовать транслит в названиях классов, атрибутах и так далее.
2. Нельзя использовать #id для стилизации.
3. Нельзя использовать вложенность селекторов больше двух.
4. Необходимо подключить normalize.css к вёрстке отдельным файлом.
5. Необходимо явно указать подходящее vertical-align для всех блоков с display: inline-block .
6. Необходимо указать альтернативные варианты шрифта и тип семейства в конце перечисления.
7. Необходимо расположить CSS-префиксы в правильном порядке.
8. Необходимо явно прописывать цвет фона для блока у которого есть фоновое изображение. Цвет должен соответствовать преобладающему цвету фонового изображения (пока изображение не загружено, страница выглядит похоже на макет).
9. Необходимо, чтобы все состояния элементов из styleguide.psd были использованы.
10. Необходимо, чтобы при взаимодействии с элементами (наведение, нажатие) ни сам элемент, ни окружающие его блоки не меняли своего положения.
11. Необходимо использовать:
    • Спрайты для изображений или иконочный шрифт.
    • Минимизировать CSS-код.
    • Минимизировать JavaScript-код.
12. Необходимо у всех изображений в теге <img> прописать размер.
13. Вёрстка проходит тест на переполнение контентом. Вёрстка не ломается:
    • При добавлении в элементы большего количества текста.
    • При использовании картинок с неподходящими размерами.
    • Текст не должен выпадать из объектов.
    • Переполнение контентными блоками не приводит к нарушению сетки.
14. Необходимо подключить все скрипты непосредственно перед </body>
15. Необходимо использовать минимально возможное количество элементов HTML.
16. Необходимо использовать подход Progressive Enhancement, например:
    • Кнопка с формой входа ведёт на отдельную страницу.
    • Интерактивная карта без JavaScript показывает статичную картинку с картой.

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

Сложности: где взять наставников?

Онлайн-формат открывает широкие возможности по масштабированию образовательных программ — в самом деле, нет никакой зависимости от внешних факторов (например, на число студентов не влияет вместимость помещения), с которыми часто сталкиваются офлайн-курсы. Буквально 3-4 человека могут обеспечивать инфраструктуру для обучения сотен студентов. Узким местом схемы является наличие достаточного количества наставников.

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

Скриншот окна интерактивной пошаговой демонстрация для иллюстрации построения сеток (доступна по ссылке)

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

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

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

Хочу поблагодарить всех преподавателей интенсива и своего наставника Евгения Сергеева за тот титанический труд, который они проделали. Я пришёл с отрывочными знаниями, которые в течение месяца смог собрать в единую мозаику. Сначала задания показались мне сложными, до этого я не встречался с реальными проектами и понятия не имел об этапах работы настоящей, боевой вёрстки. Было интересно наблюдать за тем, как постепенно, в час по чайной ложке, я создавал свою первую страницу, изучая интерактивные руководства и курсы академии. После того, как я потратил на неё несколько дней, оказалось, что последующие страницы даются уже с лёгкостью. Здорово придали сил и встречи с наставником. Он помог мне обсудить сложные моменты и указал на недостатки, которые я не заметил бы самостоятельно. Теперь я готов расти дальше, практиковаться, учиться и, надеюсь, стать профессионалом в сфере разработки веб-интерфейсов. Это был один из самых увлекательных месяцев, в течение которого я забыл и о встречах с друзьями, и о прогулках, и даже стал продуктивнее работать, чтобы освободить побольше времени для вёрстки макетов.

— ещё один отзыв студента

Результаты

С ноября 2013 года состоялось 7 базовых интенсивов (есть ещё их «продвинутая» версия для профессионалов), участие в них приняли в общей сложности 755 человек, 393 из которых прошли всю программу до конца и выполнили итоговое задание. Подробнее о том, как проходило обучение и его итогах можно почитать в нашем блоге на сайте (1-4 интенсивы, 5, 6, 7 интенсивы).

Ещё один шаблон для вёрстки сайта в рамках базового интенсива

Среди учеников были жители России, Белоруссии, Украины, Казахстана, Молдовы, Литвы, Болгарии, Чехии, Германии, Испании и Канады. По итогам обучения многие студенты устраиваются на работу в различные ИТ-компании (веб-студии и агентства), есть даже пример, когда ученика после прохождения интенсива приняли в «Яндекс».

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

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

HTML Academy это развод? Обзор и отзывы

Начать учиться на площадке можно в любое удобное время. Чтобы выяснить не развод ли HTML Academy, давайте познакомимся с ней поближе.

Почему именно HTML Academy?

Сервис HTML Academy начал свою работу как специализированный образовательный ресурс. Но академия постоянно совершенствуется и теперь вы можете попробовать свои силы на интерактивных тренажерах, стать участником профессионального сообщества, пройти интенсивы и вебинары по языкам программирования и многое другое. Академия является участником проекта Сколково. Если вы не определились, обучение какому из языков вам нужно для проекта, то, заполнив специальную форму, вы можете попросить помощи у консультантов компании. HTML Academy предлагает своим студентам:

• онлайн-библиотеку;
• 8 бесплатных тренажеров для развития навыков фронтенда;
• постоянную работу с реальными кодами;
• возможность самому начать преподавать на сайте академии;
• сертификат об окончании курсов;
• оффлайн и онлайн-мероприятия.

Как учиться онлайн на сайте htmlacademy.ru?

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

Личный кабинет

Регистрация на сайте htmlacademy.ru необходима для покупки подписки, участия в мероприятиях HTML Academy, оплаты курсов и других действий. Выполнить домашнее задание и отправить его наставнику также вы сможете только после регистрации.

Мобильное приложение

У HTML Academy пока еще нет своего мобильного приложения.

Курсы на сайте ХТМЛ Академия

HTML Academy — целевой проект для веб-разработчиков. На сайте вы найдете курсы по фронтенду, кроссбраузерной верстке и другим дисциплинам. Для удобства навигации по сайту и планирования вашего обучения курсы разбиты по форматам обучения. Давайте познакомимся с ними поближе.

Веб-тренажеры

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

Курсы

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

Профессии

HTML Academy запустила долгосрочные курсы по двум профессиям: «Фронтенд-разработчик» и «React-разработчик». После окончания курсов дается гарантия трудоустройства. Все курсы по профессиям стартуют согласно расписанию. Например, профессия «Фронтенд-разработчик» начинается с 17 мая. Обучение длится 1 год и 3 месяца. Программа курса, данные о наставниках, расписание курсов и стажировок, а также вся необходимая информация размещается на странице профессии. Оплатить курс можно прямым переходом с этой же страницы.

Интенсивы

Все интенсивы академии начинаются согласно расписанию, которое постоянно обновляется. Если вы подписаны на рассылку, то будете получать приглашение. В течение всего обучения на каждом интенсиве наставники постоянно на связи с учениками, делают ревью кода и проверяют все задания. Для каждого интенсива разработана насыщенная программа с заданиями разных уровней сложности. Оплатить интенсивы можно, как и другие занятия у HTML Academy, онлайн.

Бесплатные курсы HTML Academy

Бесплатных курсов на сайте нет.

Дополнительные услуги

HTML Academy предлагает своим ученикам дополнительные возможности, кроме обучения верстке.

Карьерный центр

Успешно закончив любой из курсов академии, можно получить доступ к разделам с актуальными вакансиями. HTML Academy предлагает свою помощь и работодателям. Если вам нужны верстальщики, php-разработчики, фронтендеры и другие специалисты-кодеры, отправьте свои вакансии на представленные на сайте адреса.

Наставникам

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

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

Мероприятия

Компания работает не только в онлайн формате. Всю информацию по прошедшим и грядущим мероприятиям компании вы найдете на сайте или получите в рассылке.

Корпоративное обучение

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

Стоимость обучения на сайте htmlacademy.ru

Цена вашего обучения будет зависеть, прежде всего, от выбранного формата. Средняя стоимость интенсива — от 2,4 тыс. рублей.

Как оплатить обучение на сайте ХТМЛ Академия?

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

Оплата обучения в личном кабинете

Внести плату за уроки можно будет сразу после регистрации. Добавить карту можно в личном кабинете.

Другие способы оплаты онлайн-курсов

Академия htmlacademy.ru дает возможность оплатить курсы и профессии в рассрочку или кредит. Услуги кредитования предоставляют банки-партнеры Тинькофф и Альфа-банк.

Бонусы от HTML Academy

Бонусной программы у HTML Academy нет. Но действуют сезонные скидки на многие курсы.

8 бесплатных онлайн-тренажеров

Академия предоставляет пользователям 8 бесплатных онлайн-тренажеров. После их прохождения можно будет купить подписку и перейти на следующий уровень.

Скидки на курсы

До конца февраля на многие курсы HTML Academy действует скидка от 20%.

Реферальная программа

В настоящее время доступна партнерская программа HTML Academy в спа-сети Адмитад (перейти на сайт). Возможно, что скоро она снова заработает.

Жалобы на htmlacademy.ru

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

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

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

Контролирующие органы и законы

На платформе htmlacademy.ru в свободном доступе размещены лицензии, реквизиты и другие документы компании. Компания, которая открыла онлайн-академию, ООО «Интерактивные обучающие технологии», зарегистрирована в качестве юридического лица в 2013 году, Межрайонной инспекцией ФНС России №10 по Санкт-Петербургу. Свидетельство о регистрации: 1137847320170. Лицензия на ведение образовательной деятельности: № 3026 от 6 июня 2017 г.

Пользовательское соглашение ХТМЛ Академии

Ваша работа на платформе HTML Academy регулируется Пользовательским соглашением, которое доступно для скачивания и просмотра.

Во время регистрации вы автоматически даете согласие на получение рекламной рассылки от HTML Academy. От рассылки всегда можно отписаться.

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

Служба поддержки

Учащиеся в HTML Academy пишут в комментариях о том, что служба поддержки работает оперативно и всегда старается помочь разрешить все возникшие ошибки и недоразумения. Оставить сообщение для менеджеров академии можно через форму обратной связи.

Безопасность сайта

Сайт защищен сертификатом сетевой безопасности Trawte RSA CA 2018. Платежи проходят через страницу банковского эквайринга.

HTML Academy – это развод?

HTML Academy – портал кодеров и программистов. Неважно новичок вы или профессионал. Академия работает уже много лет, собирая все самое интересное из мира html. Познакомившись с форматом обучения академии, можно сказать точно – HTML Academy это не развод. Даже после окончания обучения возможности образовательного сервиса: форум, блог и многое другое помогут вам дальше развиваться в профессии. Студенты хорошо отзываются об обучении HTML Academy отмечая пользу тренажеров и поддержку кураторов во время учебы.

Заключение

У HTML Academy есть много преимуществ, о которых мы уже рассказали. Сам сайт учебного портала сделан по индивидуальному шаблону, с простой и удобной навигацией. Карьерный центр работает и для студентов, чтобы они могли найти работу после обучения и для преподавателей, если они хотят предложить свои услуги.

htmlacademy.ru — отзыв

В какой то момент своей жизни я решил освоить новую профессию. Хотелось войти в IT. Мне нравились технические профессии с четкими правилами, где можно мыслить и творить, получать очевидный результат, кроме того IT сфера востребована и обеспечивает высокий заработок. Но вот с чего начать, какая область, какой язык, что выбрать? Это было проблемой.

Я скачал кучу разных подкастов по IT-тематики, слушал их, занимаясь своими делами в фоновом режиме на работе и дома. Вскоре я выяснил для себя, что мне более всего подходит WEB – технологии: относительный легкий вход в мир IT, большая потребность индустрии в специалистах, мир и сообщество со своей позитивной культурой.

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

Я собрал информацию по разным школам, после некоторых раздумий выбрал HTMLAcademy. Что мне понравилось:

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

— стоимость курсов (соотношение цены и объема предоставляемых знаний и услуг меня вполне устроила, хотя понятие дорого/не дорого весьма индивидуально для каждого человека)

— наличие наставника, а также связь с авторами курсов и кураторами.

— возможность пройти стажировку в компании (после курсов), выполняя реальные коммерческие проекты

— ведущие подкаста «WEB – стандарты” (ведущий подкаст о мире фронтенда, который мне очень нравился) Вадим Макеев и Алексей Симоненко на тот момент имели прямое отношение к HTMLAcademy.

В HTMLAcademy есть много курсов по разным направлениям, срокам и формой обучения. Я выбрал пакет: профессия «Фронтенд-разработчик». На тот момент (начало 2020 г) в профессию вошли три курса:

— HTML и CSS. Профессиональная вёрстка сайтов

— HTML и CSS. Адаптивная вёрстка и автоматизация

— JavaScript. Профессиональная разработка веб-интерфейсов

Общее время обучения — полгода. Стоимость 83000 руб (оплата возможна частями).

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

Обучение оказалось весьма интенсивным. Я советую заранее (перед самими курсами) пройти тренажеры на сайте HTMLAcademy или прочитать книги (одну по HTML/CSS и одну по JS из серии для начинающих). Это позволит вам быстрее освоить теорию, не терять время на то что можно прочитать в книгах, а больше уделять времени практикам, которые вы не найдете в книгах. А время курсов ограничено и многим студентам не хватало буквально пару дней для успешной защиты проекта.

Кстати, В HTMLAcademy есть тренажеры. Это набор упражнений по HTML и JS, по конкретной теме (например flexbox), где после кратких, но достаточных теоретических введений нужно выполнить практические задания. Их можно проходить безо всяких курсов, они сами по себе. Часть бесплатных, часть платных по подписке, но во время прохождения курсов на полгода мне был предоставлен бесплатный доступ ко всем тренажерам. Тем не менее, часть курсов я прошел до начала занятий, что помогло мне разгрузить объем обучения.

Сам процесс обучения.

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

Лекция состоит из теоретической части и разборе учебного проекта. После лекции можно задать вопрос авторам через специальную форму и прочесть ответ на сайте академии. К каждой лекции прилагаются демки с кодом. После следует выполнение домашнего задания — личный проект. Домашнее задание проверяет наставник, дает рекомендации. У наставника можно заказать консультацию. Можно провести он-лайн беседу, хотя я предпочитал письменную: задавал список вопросов получая ответы. Консультации на отдельный курс от 5 часов, если в курсы идут в рамке профессии — 10часов. Более чем хватает. Итог: защита личного проекта, который постепенно делается в домашних заданиях, а после шлифуется с наставником в соответствие с ТЗ. Проект должен соответствовать ТЗ и критериям, которые приведены на сайте академии.

Наставника выбирают в начале каждого курса. В карточке выбора наставника указано время консультаций (например с 18-00 до 21-00, будни), в течение которого наставник может консультировать, по этому критерию и выбирается наставник. Есть риск нарваться на наставника с которым можно не сработаться, или который может надолго исчезнуть. Но всегда есть возможность поменять наставника. Мне повезло с моими наставниками, отвечали быстро и доступно для моего уровня.

Что дали мне эти курсы.

Хорошие базовые знания, по корневым технологиям HTML, CSS, JS которые позволили мне создавать клиентскую часть не очень сложного динамического веб-сайта. Кроме того, основные знания по работе с GIT (системой управления версиями), системой сборки Gulp, препроцессором Sass. Без курсов подобные знания и практики для меня были бы непостижимы.

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

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

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

Спустя некоторое время после профессии «Фронтенд-разработчик» я взял еще один отдельный курс «JavaScript. Архитектура клиентских приложений».

В общем, считаю свой личный опыт в HTMLAcademy удачным, старт в мир IT состоялся.

Стиль кода HTML Academy

При написании кода вам сложно будет запомнить все правила кодгайда. Эту работу стоит отдать роботам.

• Для поддержания единообразия в коде используйте EditorConfig.
• Для HTML используйте linthtml.
• Для стилей Stylelint.

По ссылкам находятся конфигурации Академии для этих инструментов. Конфигурации частично покрывают то, что описано в этом стиле кода, и в них нет ничего, что не описано ниже.

Группировка файлов

• Файлы схожих типов группируются в папки: картинки, стили, скрипты, шрифты.
• Если внутри папок файлов становится много или выделяются подгруппы, можно добавить вложенные папки.

Форматирование кода

Код проекта соответствует параметрам EditorConfig:

Базовые части разметки

Минимальная обязательная структура HTML-документы состоит из:

• Современный тип документа <!DOCTYPE html>
• Корневой элемент <html> с языком документа lang
• Метаинформация <head>
• Заголовок документа <title>
• Кодировка документа <meta charset=»utf-8″> . Кодировка символов на странице явно указана, чтобы обеспечить корректное отображение текста.
• Тело документа <body>

Регистр тегов и атрибутов

Имена тегов, атрибуты и их значения записаны строчными.

Исключение: атрибуты для SVG-элементов, например: viewBox , preserveAspectRatio и другие.

Форматирование тегов

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

Двойные и одиночные теги

• Двойные теги имеют открывающий и закрывающий теги.
• Одиночные теги не имеют закрывающий тег или слэш.

Порядок атрибутов

• Атрибут class идёт сразу после имени тега.
• Атрибуты идут в одном порядке, чтобы упростить их чтение.

Логические атрибуты

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

Форматирование атрибутов

В записи атрибутов нет пробелов вокруг знака «равно» = .

Кавычки в атрибутах и в значениях

• Значения атрибутов записаны в двойных кавычках.
• Вложенные кавычки в значениях являются одинарными.

Размеры замещаемых элементов

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

Разделители в имени класса

Разделителями в имени класса являются только дефисы — и подчёркивания _ . В коде необходимо придерживаться одного стиля.

Атрибут method в форме

В атрибуте method указан тип отправки данных.

Подключение стилей

Стилевые файлы подключены с помощью <link> внутри <head> . При этом атрибут type для тега <link> не указан, так как его значение text/css устанавливается по умолчанию.

Подключение скриптов

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

При подключении скриптов в теге <script> атрибут type не указан, так как его значение text/javascript устанавливается по умолчанию.

Валидность

Документ проходит проверку на валидность. Для проверки используется современный валидатор.

Правило @import

Правило @import работает медленнее, чем тег <link> . В стилях @import не использован.

Регистр селекторов и свойств

Селекторы и свойства записаны строчными буквами.

Структура объявления

• Перед открывающейся фигурной скобкой стоит пробел. После скобки запись идёт с новой строки.
• Свойства стоят на отдельных строках.
• Свойства внутри блока имеют один внутренний отступ.
• После двоеточия стоит пробел. Перед двоеточием пробел не нужен.
• В конце объявления стоит точка с запятой.
• Закрывающая скобка стоит на новой строке и без отступа.
• Между блоками правил есть одна пустая строка.

Имена классов

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

Перенос селекторов

Селекторы, разделённые запятой, записаны на новых строках.

Пробелы между комбинаторами

До и после комбинатора между селекторами стоит один пробел.

Формат цветов

• Цвета записаны строчными в 6-значном формате HEX.
• Шестнадцатеричное значение цвета не сокращено, а записано полностью из всех шести символов. Для записи использованы строчные буквы.
• Цвета могут быть записаны функциями rgba или hsla , если нужна прозрачность.

Кавычки

• Во всех случаях в стилях использованы двойные кавычки.
• В необязательных случаях кавычки не опущены.

Ведущий ноль и пробелы после запятых

• Начальный ноль для значений не сокращён.
• После запятых в перечислениях стоит пробел.

Повторяющиеся свойства

• Свойства не повторяются в рамках одной декларации.
• Свойство может повторяться, если раньше описан сброс или общий случай.

Единицы измерения

• Единицы измерения не указаны там, где в них нет необходимости.
• В кастомных свойствах нужно указывать единицу измерения.

Дробные значения

В дробных значениях нет больше двух знаков после точки.

!important

• Ключевое слово !important не использовано для борьбы со специфичностью.
• Универсальные классы-хелперы могут использовать !important .

Доступное скрытие

Контент скрыт утилитарным классом visually-hidden , чтобы он был доступен для скринридеров и поисковиков.

Порядок свойств

Объявления логически связанных свойств сгруппированы в следующем порядке:

1. Позиционирование
2. Блочная модель
3. Типографика
4. Оформление
5. Анимация
6. Разное

Позиционирование следует первым, потому что оно влияет на положение блоков в потоке документа. Блочная модель идёт следующей, так как она определяет размеры и расположение блоков.

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

Сгруппированные объявления в правиле отделены друг от друга пустой строкой.

Порядок объявления подробных правил, таких как font-size , font-family , line-height , соответствует порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой идёт сокращённая версия.

Что не так с онлайн-курсами и как это исправить: опыт HTML Academy

Мы в HTML Academy постоянно работаем над повышением эффективности наших образовательных программ и курсов (ради этого мы ставим опыты на студентах и внедряем геймификацию).

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

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

Проблема: что не так с онлайн-курсами

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

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

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

Все вышеперечисленное прекрасно существует в режиме офлайн, но можно ли перенести обучение такого формата в интернет?

Как это работает: онлайн-интенсивы

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

• Онлайн-курсы для знакомства с веб-технологиями и освоения базовых навыков работы с ними.
• Вебинары, на которых слушатели получают больше продвинутой теоретической информации, чем в ходе онлайн-курсов.
• Личное общение с наставником — опытные специалисты, сотрудничающие с HTML Academy, связываются с учениками по скайпу и в режиме 1 на 1 помогают им осваивать программу курса и проверяют домашние задания (индивидуальный подход гораздо эффективнее групповых занятий в офлайне).
• Сквозные проекты — в ходе обучения студенты работают над реальными проектами и шаг за шагом верстают настоящий сайт, который ничем не отличается от обычных корпоративных веб-ресурсов.
• Сертификация — как уже было сказано выше, люди хотят получить «плюсик в резюме», поэтому им нужно дать возможность защитить свой проект на соответствие ряду критериев и получить реальный сертификат о прохождении обучения.

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

— отзыв участника пятого по счёту базового интенсива

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

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

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

Здесь и далее по клику изображения открываются в полном размере

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

Критерии оценки

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

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

Ещё один шаблон для вёрстки сайта в рамках базового интенсива

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

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

1. Выполнена HTML-разметка всех страниц и всех элементов на страницах.
2. Один стилевой файл на все страницы (с учётом normalize.css можно два).
3. Вёрстка идентично отображается в последних версиях браузеров Chrome, Opera, Firefox, Safari, а также в Internet Explorer 10+.
4. Сайт должен нормально смотреться на минимальном для данного макета разрешении:
   • При большем размере экрана макет должен оставаться по центру и не иметь горизонтального скролла.
   • На разрешениях экрана меньше ширины контейнера вёрстка не должна менять свою структуру.
5. В корне документа должны быть папки css, img, js или аналогичные. Главная страница имеет название index.html. В названиях и расширениях файлов нет заглавных букв и пробелов.
6. Единообразное написание и форматирование кода в HTML, CSS и JavaScript.
7. Грубые ошибки в разметке отсутствуют. Например:
   • Ссылки сделаны не тегом <a> , а другими тегами.
   • Использование строчных элементов для создания крупных (сеточных) блоков.
   • Абзацы должны быть абзацами, а не <br><br>
8. Нельзя строить сетку с помощью таблиц и позиционирования.
9. Нельзя использовать !important в CSS.
10. При наполнении контентом как на макете элементы каждой страницы должны соответствовать макету:
    • Допускаются различия в 5 пикселей по высоте и 2 пикселя по ширине.
    • Допускаются отсутствия стилизации кастомных элементов форм.
    • Допускаются различия в отображении шрифтов, связанные со сглаживанием на различных платформах.
    • Должны быть подключены правильные шрифты, а их размеры и толщина должны соответствовать размерам в макетах и ТЗ.
11. Выбран правильный формат изображений:
    • JPEG для фотографий.
    • Всё остальное в PNG.
12. Документ должен проходить проверку на валидность validator.w3.org

1. Нельзя использовать транслит в названиях классов, атрибутах и так далее.
2. Нельзя использовать #id для стилизации.
3. Нельзя использовать вложенность селекторов больше двух.
4. Необходимо подключить normalize.css к вёрстке отдельным файлом.
5. Необходимо явно указать подходящее vertical-align для всех блоков с display: inline-block .
6. Необходимо указать альтернативные варианты шрифта и тип семейства в конце перечисления.
7. Необходимо расположить CSS-префиксы в правильном порядке.
8. Необходимо явно прописывать цвет фона для блока у которого есть фоновое изображение. Цвет должен соответствовать преобладающему цвету фонового изображения (пока изображение не загружено, страница выглядит похоже на макет).
9. Необходимо, чтобы все состояния элементов из styleguide.psd были использованы.
10. Необходимо, чтобы при взаимодействии с элементами (наведение, нажатие) ни сам элемент, ни окружающие его блоки не меняли своего положения.
11. Необходимо использовать:
    • Спрайты для изображений или иконочный шрифт.
    • Минимизировать CSS-код.
    • Минимизировать JavaScript-код.
12. Необходимо у всех изображений в теге <img> прописать размер.
13. Вёрстка проходит тест на переполнение контентом. Вёрстка не ломается:
    • При добавлении в элементы большего количества текста.
    • При использовании картинок с неподходящими размерами.
    • Текст не должен выпадать из объектов.
    • Переполнение контентными блоками не приводит к нарушению сетки.
14. Необходимо подключить все скрипты непосредственно перед </body>
15. Необходимо использовать минимально возможное количество элементов HTML.
16. Необходимо использовать подход Progressive Enhancement, например:
    • Кнопка с формой входа ведёт на отдельную страницу.
    • Интерактивная карта без JavaScript показывает статичную картинку с картой.

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

Сложности: где взять наставников?

Онлайн-формат открывает широкие возможности по масштабированию образовательных программ — в самом деле, нет никакой зависимости от внешних факторов (например, на число студентов не влияет вместимость помещения), с которыми часто сталкиваются офлайн-курсы. Буквально 3-4 человека могут обеспечивать инфраструктуру для обучения сотен студентов. Узким местом схемы является наличие достаточного количества наставников.

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

Скриншот окна интерактивной пошаговой демонстрация для иллюстрации построения сеток (доступна по ссылке)

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

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

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

Хочу поблагодарить всех преподавателей интенсива и своего наставника Евгения Сергеева за тот титанический труд, который они проделали. Я пришёл с отрывочными знаниями, которые в течение месяца смог собрать в единую мозаику. Сначала задания показались мне сложными, до этого я не встречался с реальными проектами и понятия не имел об этапах работы настоящей, боевой вёрстки. Было интересно наблюдать за тем, как постепенно, в час по чайной ложке, я создавал свою первую страницу, изучая интерактивные руководства и курсы академии. После того, как я потратил на неё несколько дней, оказалось, что последующие страницы даются уже с лёгкостью. Здорово придали сил и встречи с наставником. Он помог мне обсудить сложные моменты и указал на недостатки, которые я не заметил бы самостоятельно. Теперь я готов расти дальше, практиковаться, учиться и, надеюсь, стать профессионалом в сфере разработки веб-интерфейсов. Это был один из самых увлекательных месяцев, в течение которого я забыл и о встречах с друзьями, и о прогулках, и даже стал продуктивнее работать, чтобы освободить побольше времени для вёрстки макетов.

— ещё один отзыв студента

Результаты

С ноября 2013 года состоялось 7 базовых интенсивов (есть ещё их «продвинутая» версия для профессионалов), участие в них приняли в общей сложности 755 человек, 393 из которых прошли всю программу до конца и выполнили итоговое задание. Подробнее о том, как проходило обучение и его итогах можно почитать в нашем блоге на сайте (1-4 интенсивы, 5, 6, 7 интенсивы).

Ещё один шаблон для вёрстки сайта в рамках базового интенсива

Среди учеников были жители России, Белоруссии, Украины, Казахстана, Молдовы, Литвы, Болгарии, Чехии, Германии, Испании и Канады. По итогам обучения многие студенты устраиваются на работу в различные ИТ-компании (веб-студии и агентства), есть даже пример, когда ученика после прохождения интенсива приняли в «Яндекс».

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

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