Ребята из 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 штук). Задания простые и с автоматической проверкой.

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

Реклама

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

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

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

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

Для webref.ru сделал рефакторинг кода, т.е. переделал внутреннюю часть без изменения дизайна. Отказался полностью от jQuery и перешёл на Vue. Основные изменения коснулись примеров — теперь это не просто код, а небольшие приложения. Во-первых, результат примера виден сразу, во-вторых, код можно открыть в популярных песочницах JSFiddle и CodePen. А также есть переключатель светлой/тёмной темы, копирование кода в буфер и обновление результата. Учтите, что эффект обновления заметен только для примеров с анимацией.

Можно перейти к одному из примеров и посмотреть всё самому.

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

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

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

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

Первые четыре шага такие.

1. Понять основы HTML и CSS по книжкам, ютюбу или онлайн-тренажёрам.
2. Вникнуть в тонкости вёрстки (и завести себе Гитхаб).
3. Пройти курсы по вёрстке и/или фронтенд-разработке и разобраться в нужных инструментах.
4. Найти наставника и показывать ему свой код.

Ещё 4 шага — в этой статье. Добавьте в закладки, скажете спасибо через год.

Порой у начинающий специалистов не получается найти работу не потому, что их плохо учили, а потому что не могут пройти собеседование или попасть на него.

Серёжа Попов, руководитель фронтенд-аутсорса «Лига А.», где трудятся выпускники HTML Academy, рассказал, какие 17 ошибок нельзя делать при составлении резюме и на других этапах поиска работы:

1. Указывать несколько должностей в одном резюме
2. Не загружать фотографию
3. Загрузить фотографию, где есть не только вы
4. Скрывать информацию в резюме
5. Писать «хочу переехать», но откликаться на вакансии в своём городе
6. Скрывать свой регион до собеседования
7. Отсутствие ключевых навыков
8. Нерелевантный опыт
9. Не написать, какие задачи решали на прошлых местах работы
10. Не писать (почти) ничего в разделе «О себе»
11. Не указывать желаемую зарплату
12. Зарплата, не соответствующая уровню рынка или позиции
13. Не написать сопроводительное письмо
14. Сопроводительное письмо в стиле «Прошу рассмотреть меня на вакансию»
15. Сопроводительное письмо из одного слова
16. Написать «Я не готов к тестовому заданию»
17. Написать одно сопроводительное письмо для десяти компаний

Подробнее, об ошибках и том как их правильно исправить читайте в статье, кстати её вторая часть на подходе.

Если хотите узнать, как сделать счётчик лайков и систему комментирования, загляните в новую главу интерактивного курса «Знакомство с JavaScript» — «Условия и создание элементов».

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

Кажется слишком сложным? Сохраняйте спокойствие! Под чутким руководством инструктора Кекса сложное превращается в простое и понятное. Вперёд к знаниям!