Изучаем многоколоночный текст
Сделал новый видеокурс, посвящённый работе с несколькими колонками, которые создаются через свойство columns. На деле это свойство можно использовать не только для текста, но и для изображений, блоков и других элементов.
Туториал. Список задач с drag & drop
Дословный перевод с английского — «потяни и брось» — отражает суть эффекта, это хорошо знакомое любому пользователю перетаскивание элементов интерфейса.
В этом туториале Саша Смыгина из HTML Academy покажет, как реализовать эффект drag & drop на ванильном JavaScript.
Drag & drop может понадобиться в разных ситуациях, например:
- Простое визуальное изменение положения элемента.
- Сортировка элементов с помощью перетаскивания. Пример — сортировка карточек задач в таск-трекере.
- Изменение контекста элемента. Пример — перенос задачи в таск трекере из одного списка в другой.
- Перемещение локальных файлов в окно браузера.
Подробнее об эффекте drag & drop читайте в этой статье. А ещё подпишитесь на нашу полезную рассылку, чтобы получать одно письмо в неделю со статьями о веб-разработке и туториалами.
Что должен уметь верстальщик, чтобы его все хотели
Вот раньше было время! В нулевых, например, никаких фронтов не было, а человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно.
А что должен уметь верстальщик сегодня? Разбираться в HTML и CSS, немного знать JavaScript, использовать магию гридов, флоатов, знать системы сборки и точно кое-что еще.
О том, как выглядит идеальная вакансия для верстальщика в 2020 году, какие навыки и знания востребованы, и что обо всём этом думают специалисты из индустрии — читайте в блоге HTML Academy.
Интервью с Selectel: как устроен фронтенд, опыт выпускников HTML Academy
Как устроен фронтенд в Selectel?
Ответят Валерий Кондратьев, руководитель отдела разработки и тестирования интерфейсов, и младший фронтенд-разработчик Денис Соколинский.
Старт 17 июня в 12:00 в рамках live-сессии с HTML Academy.
Вы узнаете:
- как устроена фронтенд-разработка и вёрстка в компании;
- что изменилось с приходом самоизоляции;
- какие технологии используются в работе;
- требования к разработчикам, чтобы попасть в команду;
- опыт найма и работы с выпускниками Академии.
Зарегистрируйтесь, чтобы не пропустить трансляцию.
Живые и неживые коллекции в JavaScript
Веб-разработка — это не только про вёрстку и знание HTML. Иногда приходится где-то что-то подпилить и написать код. А где код — там хранение данных. А где хранение данных — там переменные, хранение информации в массивах и другие странных словах.
Ещё информацию можно хранить в коллекциях (вспомните полку со старыми видеокассетами — это прям оно). Допустим, мы хотим получить информацию о всех картинках со страницы и что-то с ними сделать через JavaScript. Мы выполняем команду и получаем коллекцию объектов, которая вроде похожа на массив, но нет.
Дело в том, что коллекции тоже бывают разными — живыми и неживыми. HTML Academy провели целое расследование о том, чем они отличаются, когда программисту нужны динамические коллекции, а когда лучше подойдут статические.
Подробности читайте в блоге HTML Academy. А ещё подпишитесь на нашу полезную рассылку, чтобы получать одно письмо в неделю со статьями о веб-разработке и уделять дополнительные 10-15 минут самообразованию.
И пусть живые позавидуют неживым!
Как 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 штук). Задания простые и с автоматической проверкой.
Устанавливайте сами и советуйте друзьям.