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

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

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

Подробный рассказ обо всех этапах — в этой статье.

Ребята из HTML Academy выпустили вторую часть цикла про Chrome DevTools — на этот раз статья о вкладках Console, Sources и Network. Рассказ о том, как просмотреть список ресурсов на странице, понять, куда делись шрифты, и выяснить, почему страница так долго грузится.

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

Все подробности — в этой статье.

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

Ребята из HTML Academy подготовили туториал о том, как сделать телеграм-бота. Это возможность отправить друзьям ссылочку со словами: «Смотри, это моё».

Для работы понадобятся:

• редактор кода, чтобы писать код;
• Node.js любой версии, выше 0.12;
• консоль. Или встроенный в систему вариант;
• VPN. Возможно но не факт, потому что Телеграм работает не везде.

Подробно о каждом шаге — по ссылке.

Горячие клавиши — добро, польза и экономия времени. Ребята из HTML Academy рассказали, какие комбинации использовать, чтобы упростить работу с Visual Studio Code.

Вы узнаете, как:

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

Подробнее о каждой комбинации читайте в этой статье.

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

Подробно о настройке Chrome DevTools и панеле Elements читайте в статье от HTML Academy.

Сейчас все активно обсуждают радости и гадости удалённой работы. Тем временем ребята из HTML Academy провели небольшой опрос и попросили пользователей рассказать, с какими трудностями они сталкиваются во время работы из дома (спойлер — все ленятся).

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

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

Действуем по плану:

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

Подробно о каждом шаге читайте в статье от HTML Academy.

Ребята из HTML Academy запустили редакторскую рассылку. Теперь у вас есть возможность тратить дополнительные 10-15 минут в неделю на самообразование. Здорово же!

В чем суть?

Каждую неделю вы будете получать одно письмо со статьями.

О чем статьи?

О том, как верстать, пользоваться инструментами, учиться и строить карьеру в IT. Будет много интересного для начинающих веб-разработчиков.

И все?

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

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

Обновил мобильное приложение под Android в виде книжки для изучения HTML и CSS — HTML и CSS на примерах.

Теперь по всем темам сделаны интерактивные задания для тренировки и закрепления навыков (почти 150 штук). Задания простые и с автоматической проверкой.

Устанавливайте сами и советуйте друзьям.