Как HTML Academy делает онлайн-тренажёры
В Академии приоткрыли завесу тайны и рассказали, как в далёком 2013 году начали делать интерактивные курсы (они же тренажёры) для начинающих разработчиков и как они делаются сейчас.
Процесс непростой, но интересный. В нём участвуют авторы, дизайнеры, продюсеры и разработчики, редакторы, маркетологи — список довольно внушительный.
А чтобы курс получился, нужно собрать список типовых задач, разложить их на шаги, придумать теорию, запрограммировать испытание, доработать движок, всё посмотреть четыре раза (а то и больше), протестировать, а потом выложить на сайт.
Подробный рассказ обо всех этапах — в этой статье.
Введение в Chrome DevTools. Console, Sources, Network
Ребята из HTML Academy выпустили вторую часть цикла про Chrome DevTools — на этот раз статья о вкладках Console, Sources и Network. Рассказ о том, как просмотреть список ресурсов на странице, понять, куда делись шрифты, и выяснить, почему страница так долго грузится.
Все подробности — в этой статье.
Полезный телеграм-канал для фронтендеров
Хотите получать полезные статьи о веб-разработке, узнавать о лайфхаки для продуктивного обучения, быть в курсе акций и скидок HTML Academy — подписывайтесь на их телеграм-канал. Бонусом — чат, в котором можно задать вопрос коллегам, обсудить технологии, попросить помощи, если что-то не получается.
Как написать Телеграм-бота на JavaScript
Ребята из HTML Academy подготовили туториал о том, как сделать телеграм-бота. Это возможность отправить друзьям ссылочку со словами: «Смотри, это моё».
Для работы понадобятся:
- редактор кода, чтобы писать код;
- Node.js любой версии, выше 0.12;
- консоль. Или встроенный в систему вариант;
- VPN. Возможно но не факт, потому что Телеграм работает не везде.
Подробно о каждом шаге — по ссылке.
10 горячих клавиш VS Code, которые ускорят вашу работу
Горячие клавиши — добро, польза и экономия времени. Ребята из HTML Academy рассказали, какие комбинации использовать, чтобы упростить работу с Visual Studio Code.
Вы узнаете, как:
- быстро добавить комментарий;
- перейти к строке под номером;
- поменять строку местами с соседними;
- дублировать строку;
- перейти к парной сборке;
- переименовать переменную;
- отформатировать документ;
- перейти к объявлению переменной;
- включить/выключить перенос слов;
- включить дзен-режим.
Подробнее о каждой комбинации читайте в этой статье.
Введение в Chrome DevTools. Панель Elements
В каждый современный браузер встроены инструменты разработчика — они позволяют быстро отловить и исправить ошибки в разметке или в коде. С их помощью можно узнать, как построилось DOM-дерево, какие теги и атрибуты есть на странице, почему не подгрузились шрифты и многое другое.
Подробно о настройке Chrome DevTools и панеле Elements читайте в статье от HTML Academy.
Интерактивная SVG-диаграмма
Сейчас все активно обсуждают радости и гадости удалённой работы. Тем временем ребята из HTML Academy провели небольшой опрос и попросили пользователей рассказать, с какими трудностями они сталкиваются во время работы из дома (спойлер — все ленятся).
Статистику нужно было как-то красиво оформить, поэтому они подготовили туториал о том, как сделать интерактивный SVG-график. Очень подробная инструкция по ссылке.
Как написать и запустить HTML на компьютере?
Чтобы стать профессиональным разработчиком, нужно уметь пользоваться инструментами. Сегодня попробуем разобраться, как и в чём написать и запустить HTML-код на своём компьютере.
Действуем по плану:
- устанавливаем и настраиваем редактор кода;
- создаем рабочую папку и добавляем туда файлы вашего проекта;
- редактируем и сохраняем файлы с кодом;
- устанавливаем расширение, чтобы сразу видеть результат верстки.
Подробно о каждом шаге читайте в статье от HTML Academy.
Одно письмо в неделю с полезными статьями о веб-разработке
Ребята из HTML Academy запустили редакторскую рассылку. Теперь у вас есть возможность тратить дополнительные 10-15 минут в неделю на самообразование. Здорово же!
В чем суть?
Каждую неделю вы будете получать одно письмо со статьями.
О чем статьи?
О том, как верстать, пользоваться инструментами, учиться и строить карьеру в IT. Будет много интересного для начинающих веб-разработчиков.
И все?
Конечно, нет! Каждую неделю все подписчики будут получать приятный бонус.
Подписаться на рассылку можно по тут.
HTML и CSS на примерах
Обновил мобильное приложение под Android в виде книжки для изучения HTML и CSS — HTML и CSS на примерах.
Теперь по всем темам сделаны интерактивные задания для тренировки и закрепления навыков (почти 150 штук). Задания простые и с автоматической проверкой.
Устанавливайте сами и советуйте друзьям.
Как сменить профессию на карантине?
Реклама
Пока весь мир обсуждает коронавирус, кризис и отсутствие туалетной бумаги на прилавках, ребята из HTML Academy предлагают не паниковать, но задуматься о своем будущим.
Несмотря на то, что многие сотрудники могут оказаться в очереди на увольнение, айтишники, скорее всего, не попадут под удар. А хорошие айтишники, которые приносят деньги компании, — тем более.
В любом случае лучшее решение в сложившейся ситуации — попытаться увидеть возможности. Например, получить новую профессию.
В этой статье вы узнаете, какие отрасли пострадают больше других, и чем можно (и нужно!) заниматься на заре новой карьеры.
Справочник HTML
Большой популярностью пользуется справочник HTML, поэтому обновил локальную версию, которая не требует подключения к Интернету и пользоваться ей можно даже в деревне. Был бы компьютер только.
Все примеры со всеми картинками теперь можно смотреть сразу в браузере!
Вот форма сразу для оплаты. Справочник стоит 59 рублей; как обычно, считайте это поддержкой сайта, чтобы в будущем были новые учебные курсы и руководства. Без вашей поддержки ничего этого не будет.
Кто уже приобретал, обновление должно прийти автоматом, лишний раз платить ничего не нужно.
Переход на Vue
Для webref.ru сделал рефакторинг кода, т.е. переделал внутреннюю часть без изменения дизайна. Отказался полностью от jQuery и перешёл на Vue. Основные изменения коснулись примеров — теперь это не просто код, а небольшие приложения. Во-первых, результат примера виден сразу, во-вторых, код можно открыть в популярных песочницах JSFiddle и CodePen. А также есть переключатель светлой/тёмной темы, копирование кода в буфер и обновление результата. Учтите, что эффект обновления заметен только для примеров с анимацией.
Можно перейти к одному из примеров и посмотреть всё самому.
Как не устроиться на работу фронтенд-разработчиком
Есть несколько причин, по которым программист не может найти работу — плохо разбирается в технологиях, не знает свой язык достаточно хорошо или вообще не программист (так тоже бывает). Но даже если все теги отскакивают от зубов, а нюансы языка ясны, можно засыпаться на более простых моментах.
О том, как провалиться на этапе тестового задания, на собеседовании или при выходе на работу — в статье от HTML Academy.
Как получать 100 тысяч в месяц за код. 8 шагов к шикарной карьере
Список того, что нужно знать фронтендеру — как фильмы из киновселенной Марвел. Непонятно, в каком порядке их смотреть, чтобы во всём разобраться, кто все эти люди, и что будет в итоге.
Наконец-то появился понятный список того, в каком порядке изучать и практиковаться в вёрстке и коде, чтобы получить новую работу за кучу денег.
Первые четыре шага такие.
- Понять основы HTML и CSS по книжкам, ютюбу или онлайн-тренажёрам.
- Вникнуть в тонкости вёрстки (и завести себе Гитхаб).
- Пройти курсы по вёрстке и/или фронтенд-разработке и разобраться в нужных инструментах.
- Найти наставника и показывать ему свой код.
Ещё 4 шага — в этой статье. Добавьте в закладки, скажете спасибо через год.
