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

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

Если вы ещё не определились, флексы или гриды, то вам стоит пересмотреть лайв с Колей Шабалиным — в мае он проводил открытый урок по сеткам.

На лайве обсудили:

— Что такое вёрстка и как работать с боксовой моделью документа.
— Особенности вёрстки на флексах.
— Особенности вёрстки на гридах.
— Практика: верстаем карточку товара на флексах и гридах.

Посмотреть лайв можно здесь, а если вы уже смотрели — делитесь впечатлениями😉

🔮 случайный совет дня #87
Поставьте пароль на телеграм, иначе эти советы кто-то украдёт

Завтра в 17:00 проведём онлайн-собеседование верстальщика.

Собеседуют Серёжа Попов — руководитель фронтенд-аутсорса «Лига А.», и София Петлякова — ведущий менеджер по персоналу HTML Academy.

Пробуется на вакансию Ирина Пылыпив — студентка профессии «Фронтенд-разработчик».

Покажем, как проходят собеседования веб-разработчиков, расскажем, как всё устроено в IT, и что ждёт тех, кто только собирается сменить профессию.

Если вы ещё не записались — скорее исправляйте

https://tml.io/9l8ed

🟧 Обзор Chrome DevTools. Решаем основные задачи разработчика

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

Давайте разберёмся, какие задачи можно решить с помощью Chrome DevTools.

Cloudflare начинает тестирование Private Access Tokens вместо CAPTCHA. Неужели скоро мы перестанем выбирать все автобусы среди пожарных гидрантов? Или станет еще хуже?

Исследователи изучили 1 000 000 сайтов и говорят, что jQuery самый популярный. Почему тогда никто не признаётся, что использует его? Очень странные дела.

Figma начала поддерживать вариативные шрифты. Вариативные шрифты — это как на гифке.

Больше новостей: https://tml.io/tcwqd

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

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

Читать

Через 15 минут начинаем онлайн-собеседование верстальщика — покажем, как проходят собеседования в IT, и ответим на вопросы из чата.

Присоединяйтесь — https://tml.io/winjk

Распродажа — и точка

Скидка 60% на навыки, дерево навыков и проекты.

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

Вы сможете набить руки и начать верстать настоящие проекты, а не просто решать примеры.

Купить со скидкой — https://tml.io/pp22l

Отзыв Дмитрия Мутохляева — студента курса «HTML и CSS. Адаптивная вёрстка и автоматизация».

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

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

Курс «HTML и CSS. Адаптивная вёрстка и автоматизация» стартует 25 июля, успейте записаться.

Мы уже разобрались со вкладкой Elements, а теперь продолжаем знакомство с другими важными частями DevTools — вкладками Console, Sources и Network.

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

Зачем фронтендеру писать код по методологии БЭМ?

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

В работе над проектом такой навык поможет быстро создавать предсказуемую и надёжную вёрстку интерфейсов любой сложности. БЭМ-компоненты можно легко расширять и переиспользовать без дублирования кода.

До 23 июня навык «Разметка по БЭМ» и другие можно купить со скидкой 60%.

Посмотреть весь список и приобрести нужный — https://tml.io/p28ww

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

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

Читать статью