Что такое плагин emmet
Прощай, Zen Coding. Привет, Emmet!
Еще в 2009 году, Сергей Чикуёнок опубликовал статью, в которой представил новый способ написания HTML и CSS кода. Этот революционный плагин, назывался Zen Coding, он помогал многим разработчикам на протяжении многих лет и в настоящее время вышлел на новый уровень.
Emmet, ранее известный как Zen Coding, является самым производительным и экономным во времени плагином для текстового редактора. Простые сокращения мгновенно расширяются в сложные фрагменты кода, Emmet превратит вас в более продуктивного разработчика.
Для тех, кто предпочитает смотреть, а не читать, вот видео любимых трюков автора.
Как это работает?
Посмотрим правде в глаза: написание HTML-кода требует времени, со всеми тегами, атрибутами, кавычками, скобками и так далее. Конечно, в большинстве текстовых редакторов есть подсказки, которые сильно помогают, но все равно придется много печатать. Emmet мгновенно преобразовывает простые аббревиатуры в полноценные блоки кода.
HTML аббревиатуры
Инициализаторы
Подготовка к работе с новым HTML документом занимает менее чем секунду. Просто введите ! или html:5, нажмите «Tab», и вы увидите HTML5 doctype с несколькими тегами и отправной точкой для вашего приложения.
Легко добавить классы, IDы, текст и атрибуты
Поскольку синтаксис Emmet для описания элементов похож на CSS селекторы, привыкнуть к нему очень легко. Попробуйте объединить название тега с идентификатором (например, p#desc).
Кроме того, вы можете комбинировать классы и идентификаторы. Например, p.bar#foo выведет:
Теперь давайте посмотрим, как указать содержимое и атрибуты для HTML элементов. Фигурные скобки используются для содержания. К примеру, h1 преобразится в:
Квадратные скобки используются для атрибутов. Итак, a[href=#] выдаст следующее:
Вложенность элементов
Используя вложенные сокращения, вы можете построить целую страницу, используя всего одну строку кода. Во-первых, дочерний селектор, в лице >, позволяет вкладывать элементы. Селектор соседних элементов, в лице +, позволяет размещать элементы рядом друг с другом, на том же уровне. Наконец, новый оператор перехода на уровень выше, в лице ^, позволяет перейти по дереву элементов вверх на один уровень.
Группировка
Чтобы эффективно использовать вложения не превращая их в запутанный беспорядок операторов, вам нужно сгруппировать несколько кусков кода. Это как математика — нужно просто использовать скобки вокруг определенных частей.
Например, (.foo>h1)+(.bar>h2) преобразится в:
Неявные имена тегов
Нумерация
Как на счёт комбинации оператора умножения и нумерации? Просто поставьте оператор $ в конце названия атрибута или элемента и будем вам счастье! Например ul>li.item$*3 превратится в:
CSS аббревиатуры
Значения
Emmet предназначен для упрощения написания не только HTML, но и CSS кода. Допустим, вы хотите задать ширину. Сокращение w100 превратится в:
Значение px ставится по умолчанию. Другие единицы измерения используют свои символы. К примеру h10p+m5e:
Дополнительные опции
Вы уже знаете много интуитивных сокращений, таких как @f, который преобразуется в:
Автоматический поиск
Модуль CSS использует автоматический поиск, чтобы найти неизвестные сокращения. Так, каждый раз, когда вы ищите неизвестное сокращение, Emmet попытается найти самое близкое значение. Например, ov:h, ov-h, ovh и oh произведет то же самое:
Приставки браузеров
CSS3 крут, но вендорные префиксы — реальная боль для всех нас. Теперь уже нет, Emmet нам поможет.
Например, trs будет преобразовано в:
Также вы можете приписать свои префиксы. Просто используйте приставку —. Так, -super-foo преобразится в:
Что, если вы не хотите все те приставки? Нет проблем, просто укажите первые буквы их названий.
Например, -wm-trf преобразуется в:
Градиенты
Говоря о раздражающих особенностях CSS3, мы не можем забыть градиенты. Все те сложные выражения, что вы писали вручную, можно заменить на одну аббревиатуру.
К примеру lg(left, #fff 50%, #000) преобразуется в:
Дополнительные возможности
Lorem ipsum
Забудьте о сторонних сервисах, которые производят текст “Lorem ipsum”. Теперь вы можете сделать это быстро в своем редакторе. Просто используйте lorem или lipsum для сокращения. Вы можете определить сколько слов требуется вывести. Например, lorem10 выведет:
Кроме того, lorem может быть присвоен к другим элементам. Например, p*3>lorem5 преобразуется в:
Настройка
И намного больше!
Это только вершина айсберга. Emmet имеет еще много других замечательных функций, таких как кодирование и расшифровка изображений data:URL, обновление размеров изображения и увеличение и снижение числа и т.д..
Посетите новый веб-сайт, удивительную документацию и удобную шпаргалку!
Поддерживаемые редакторы можно посмотреть на этой странице.
UPD. Огромное спасибо skaflock за помощь в исправлении ошибок.
Ускоряем вёрстку, используя Emmet. Руководство по командам и возможностям
Оказывается, можно верстать много, а печатать мало!
Emmet — бесплатный плагин для текстовых редакторов, который напоминает автоподстановку текста в смартфоне, но более функциональную. Скачать его можно по ссылке, выбрав нужную вам IDE или редактор кода. На сайте есть инструкции по установке (разделы Installation или How to install).
Emmet использует специальный синтаксис для сокращений: вы вводите несколько символов — начало названия тега или свойства, а программа предлагает самостоятельно дописать остальное, выбрав из выпадающего списка. Остаётся нажать Tab или Enter, и нужный вам код написан целиком.
Чтобы использовать Emmet, его нужно сначала освоить — это потребует немного усилий. Зато потом плагин сэкономит вам кучу времени и нервов, сделает вёрстку намного эффективнее. Так что давайте учиться!
В IT пришёл из наружной рекламы, где проработал с десяток лет. В Skillbox изучает веб-вёрстку. Увлекается археологией, диджеингом и плёночной фотографией.
Содержание
Установка
Emmet — это не отдельная программа, а дополнение, которое устанавливается в ваш редактор кода. Слушателям курса по веб-вёрстке мы рекомендуем использовать VSCode. В него Emmet уже встроен, и ничего не нужно делать дополнительно — просто бери и пользуйся.
По умолчанию дополнение включено для разных типов файлов. В статье мы рассмотрим только HTML и CSS. О том, как быть с другими типами, можно узнать в документации по VS Code.
Примечание: если вы используете какой-то другой редактор, то можете найти справку по установке на официальном сайте дополнения или в документации к вашему редактору.
Emmet на практике: пишем HTML
Теперь разберём, как использовать Emmet в ваших рабочих проектах.
Первое, что мы обычно делаем при создании HTML-разметки, — пишем базовую структуру, где объявляем тип документа, указываем язык страницы, кодировку, метатеги, заголовок и тело будущей интернет-страницы.
Создаём шапку документа в два клика
Подключаем стили и скрипты
После создания шапки документа мы размещаем теги внутри — с указанием путей к стилям или скриптам. Используя Emmet, можно просто написать « link», а автоподстановка предложит не только тег целиком, но и разные варианты: там есть стили и CSS, и установка favicon, и многое другое.
Добавляем ссылки
Благодаря Emmet добавлять ссылки стало легко и приятно.
Пишем « a» и выбираем нужный вариант — простую гиперссылку, ссылку на номер телефона, электронную почту и так далее. Или можем уточнить тип, добавив после двоеточия нужное значение атрибута. Например, « a:tel».
Вводим теги
Для того чтобы добавить тег, пишем его название и нажимаем Tab или Enter.
Чаще всего достаточно нескольких букв названия тега — всегда смотрите на выпадающий список. Emmet заботливо предложит нужный вариант и, если тег парный, добавит к нему закрывающий.
Задаём классы и идентификаторы
Примечание. Если нужно задать класс или id для тега
Используем группировку и вложенность
До этого мы разбирали самые простые возможности Emmet. Дальше начинается настоящая магия.
Синтаксис Emmet позволяет создавать сложные конструкции разного уровня вложенности всего из одной строки символов. Это немного похоже на математическое уравнение, потому что среди символов есть знаки сложения и умножения.
По отношению друг к другу элементы в HTML-разметке могут быть родительскими, дочерними и соседними. Рассмотрим на примерах, как их можно расположить и сгруппировать.
Пример 1. Соседние элементы
Знак « +» позволяет создать несколько соседних тегов — то есть расположенных на одном уровне.
Знак « *» повторяет элементы указанное количество раз.
Пример 2. Дочерние элементы
Символ « >» делает следующий за ним элемент дочерним по отношению к первому (вложенным, обёрнутым в первый). При этом Emmet не забывает о закрывающих тегах и отступах при форматировании. Ваш код сразу же структурирован и отформатирован.
Пример 3. Сгруппированные элементы
Если при вводе сокращений использовать круглые скобки, то можно сгруппировать элементы с разными уровнями вложенности.
Представим, что нам нужно создать структуру простой страницы, состоящей из хедера, основной части и футера. При этом внутри хедера будет навигационная панель, реализованная в разметке как ненумерованный список. А блоки main и footer будут на одном уровне с header. Для этого header и его содержимое нужно взять в круглые скобки.
Всё это мы записали одной строкой, а на выходе получили девять!
Генерируем рыбу-текст
Простая, но полезная вещь. Например, для проверки вёрстки на переполнение.
Оформление стилей страницы. Работа с CSS
После того как мы создали HTML-страницу, переходим к описанию её внешнего вида — то есть к оформлению стилей. В CSS нет разметки или вложенности, как в HTML, — только селектор, свойство и значение. Но и в случае со стилями Emmet даёт ощутимый прирост эффективности.
Способы ввода сокращений
Все сокращения в CSS — это укороченные названия свойств. Здесь гораздо меньше правил, но при этом всё так же интуитивно понятно: набираем первую букву — появляется подстановка всего слова. А если свойство пишется через дефис, то набираем первые буквы каждого слова (слитно либо через дефис) и Emmet даёт подсказку.
Если свойства начинаются на одну и ту же букву или комбинацию букв, например, color и columns, то подобрать сочетания для каждого из них — дело нескольких секунд. Для color будет достаточно « c».
Сочетание « fs» предложит нам font-style, а « fz» — font-size. Со временем у вас выработается стратегия и появится собственный словарь сокращений.
Ещё одна особенность автоподстановки в CSS: если вы используете часто повторяющуюся пару «свойство — значение», то Emmet предложит его в первую очередь. Если во время вёрстки вы несколько раз указали display: flex, то в следующий раз при нажатии « d» этот вариант будет первым в списке. Таким же образом при вводе свойства color в выпадающем списке будут перечислены все ранее указанные в файле стилей цвета, если они были заданы.
Направления полей и отступов
Свойства margin и padding набираются, соответственно, « m» и « p», а чтобы указать направление отступов, достаточно добавить t, b, l и r — top, bottom, left и right соответственно.
Уточнения свойств через двоеточие
В некоторых случаях для ввода пары «свойство — значение» лучше использовать двоеточие. Это конкретизирует сокращение.
Единицы измерения
Ряд свойств CSS не требует указания единиц измерения. К этим свойствам относятся, например, font-weight, line-height и opacity. Для описания свойства font-weight помимо ключевых слов ( normal, bold, bolder и lighter) используются условные единицы от 100 до 900, для opacity — диапазон от 0 до 1, для line-height — множитель.
При написании сокращения для таких свойств достаточно добавить нужное число.
Для тех свойств, где требуется указать единицы измерения, по умолчанию используются абсолютные пиксели ( px). Если вы хотите указать значение в процентах, то используйте символ « p». Для остальных единиц измерения полностью прописывается их название.
Чтобы записать дробное значение, достаточно поставить точку, не указывая перед ней 0.
Несколько значений после двоеточия
Бывает, что для описания свойства требуется несколько значений, которые пишутся через пробел. Чаще всего это встречается при использовании полей и отступов.
И для такого случая у Emmet есть изящное решение: если единица измерения — пиксели, то пишем их через дефис (то же касается и auto). Проценты указываем, используя p. Другие единицы измерения ( em, rem, wh, wv и так далее) пишем полностью без пробелов.
Частный случай — указание цвета с прозрачностью.
Здесь всё просто: в конце сокращения ставится восклицательный знак.
Подытожим
Умение использовать Emmet — одно из слагаемых успеха веб-разработчика наряду со знанием горячих клавиш, кодстайла, тегов и свойств.
Создайте для себя «словарь сокращений» Emmet и выучите основные комбинации. Это увеличит скорость написания кода, и вы станете квалифицированным верстальщиком. Если нужна шпаргалка по всем сокращениям, её можно найти на сайте разработчиков дополнения.
обложка: Катя Павловская для Skillbox Media
Повышение скорости написания кода: Emmet и его использование в VSCode
Аббревиатуры
У Emmet нет предопределенного набора имен тегов, вы можете написать любое слово и преобразовать его в тег: div →
Создание базовой структуры html
Операторы вложенности
Операторы вложенности используются для позиционирования элементов внутри сгенерированного дерева.
Дочерний элемент
Оператор > позволяет вкладывать один элемент в другой:
Соседний элемент
Оператор + позволяет разместить элементы рядом друг с другом на одном уровне:
Повторение
Оператор * позволяет определить, сколько раз должен выводиться элемент:
Группировка
Круглые скобки позволяют выделить в аббревиатуре отдельные поддеревья:
Вы можете вкладывать группы друг в друга и повторять их с помощью оператора умножения:
Атрибуты операторов
Вы можете указать атрибуты для выводимых элементов.
Указание класса и id
Произвольные атрибуты
Квадратные скобки позволяют задавать элементу произвольные атрибуты:
td[title=»Hello world!» colspan=3] →
Произвольные атрибуты имеют следующие особенности:
Для разделения атрибутов используется пробел.
Если не указано значение атрибута, то его значением станет пустая строка с меткой для табуляции (если ваш редактор поддерживает метки табуляции).
Можно использовать одинарные и двойные кавычки для указания значений атрибутов.
Если значение атрибута не содержит пробелов, то его не обязательно заключать в кавычки.
Нумерация
Начальное значение и направление нумерации
Вы можете изменить начальное значение счетчика и направление нумерации одновременно:
Добавление текста
Фигурные скобки позволяют добавить текст в элемент:
Неявные имена тегов
Генератор «Lorem Ipsum»
Аббревиатуры «lorem» и «lipsum» генерируют случайный текст. Каждый раз, когда вы выполняете преобразование данных аббревиатур, генерируется текст из 30 слов, разбитый на несколько предложений.
Добавление аббревиатур и фрагментов
Некоторые аббревиатуры преобразуются в элементы с предустановленными атрибутами. Список таких аббревиатур для различных языков вы можете посмотреть в официальном репозитории в каталоге snippets. Например, аббревиатуры для html находятся в файле html.json.
touch settings.json && touch snippets.json
В файл settings.json добавьте следующую настройку:
Подробности создания аббревиатур и фрагментов в VSCode можно найти в официальной документации.
Опыт работы с Emmet: ускоряем вёрстку в разы
Владимир Матасов, выпускник курса Skillbox по веб-вёрстке, рассказал о своём опыте работы с плагином Emmet. Также подготовил инструкции по основным возможностям и командам для начинающих верстальщиков.
Привет, Хабр! Когда я только решил самостоятельно изучать вёрстку, то понял, что это будет долгий путь с большим количеством новой информации и практики.ну
Вначале любая задача занимала у меня много времени и результаты работы были небольшие. Я с некоторым недоумением смотрел на задачи для фрилансеров с биржи и не понимал, как можно успевать вести несколько таких проектов. Было понятно, что есть какие-то лайфхаки.
В это же время я поступил на курс по веб-вёрстке. Это сэкономило время на проверку всех советов, какие я нашёл в интернете. Преподаватели дали рекомендации по инструментам, которые сами проверили, в том числе несколько плагинов для редакторов кода.
Вариантов было много, можно было бы сравнить, составить табличку с плюсами и минусами, но мой путь в изучении вёрстки быстро привёл меня к редактору VSCode, а в него уже встроен плагин Emmet. Выбор сделан, мой подход в веб-вёрстке изменился, решил проблему, поэтому я расскажу, как работаю с Emmet.
Установка
Для тех, кто ещё совсем не знаком с плагинами, я начну с того, что это такое. Emmet — бесплатный плагин для текстовых редакторов. Напоминает автоподстановку текста в смартфоне, но более функциональную, сокращающую время написания рутинной разметки. Вы вводите несколько символов — начало названия тега или свойства, а программа предлагает самостоятельно дописать остальное, выбрав из выпадающего списка. Остаётся нажать Tab или Enter, и нужный вам код написан целиком.
Скачать плагин можно на официальном сайте. Хорошо, если вы уже определились с IDE или редактором кода. Нажимаете на картинку нужного редактора и вас перекинет на страницу с инструкцией.
Emmet на практике: пишем HTML
Я поделюсь своим опытом, как сейчас использую Emmet при вёрстке.
Первое, с чего начинаю создание HTML-разметки, — пишу базовую структуру, где объявляю тип документа, указываю язык страницы, кодировку, метатеги, заголовок и тело будущей интернет-страницы.
Создаём базовую структуру HTML-разметки
Для начинающего верстальщика следующий фокус может показаться удивительным, но с помощью Emmet создать базовую структуру HTML-разметки можно за несколько секунд.
Сначала я использовал долгий вариант: набирал «html» и в выпадающем списке выбирал «html:5». Потом перешёл на более экономичный способ: набираю в редакторе «!» и нажимаю Tab, можно нажать Enter, тоже работает. Итог обеих манипуляций одинаковый: Emmet вставит скелет HTML-документа.
Подключаем стили и скрипты
Добавляем ссылки
Ничего сложного в указании ссылок нет, но благодаря Emmet мне стало легко и приятно их добавлять.
Пишу «a» и выбираю нужный вариант — простую гиперссылку, ссылку на номер телефона, электронную почту и так далее. Или можно уточнить тип, начиная вводить после двоеточия значение атрибута. Например, «a:tel».
Вводим теги
Когда я только начинал пробовать себя в вёрстке, то печатал всё – от « », затем составлял себе шпаргалки с готовыми тегами и копировал их. Чуть далее станет понятно, почему эти способы недостаточно хороши. Сейчас, с плагином, всё просто: пишу название тега и нажимаю Tab или Enter.
Достаточно ввести первые несколько букв названия тега, чтобы появился выпадающий список с вариантами. Emmet заботливо предложит нужный вариант и, если тег парный, добавит к нему закрывающий.
Некоторые теги Emmet всё же не добавляет. Например, на момент написания этой статьи, не подставляется тег «figcaption». Кто знает, в чём он провинился.
Задаём классы и идентификаторы
Я показал, как вводить теги, а теперь усложним этот процесс. Часто нужно указать класс или id. Делается это сразу при вводе тега. После ввода названия тега, без пробелов, добавляю символы «.» или «#», пишу название класса или идентификатора, на выходе получаю оформленный тег.
Частный случай, когда нужно задать класс или id для тега
Если вы знакомы с css-селекторами вида section#about.red, то возможно уже обратили внимание на схожесть синтаксиса. Дальше будет интересней – Emmet практически полностью повторяет правила по которым формируются обычные селекторы. Поэтому барьеры входа при изучении Emmet ещё меньше, не надо учить новый синтаксис, используем тот, что есть в css.
Используем группировку и вложенность
До этого я показал самые простые возможности Emmet, которые использую. Сейчас начинается настоящая магия.
С помощью синтаксиса Emmet легко создаю сложные конструкции разного уровня вложенности всего из одной строки символов. Это немного похоже на css-селекторы со знаками сложения и умножения.
По отношению друг к другу элементы в HTML-разметке могут быть родительскими, дочерними и соседними. Покажу на примерах, как их можно расположить и сгруппировать.
Пример 1. Соседние элементы
Знак «+» создаст несколько соседних тегов, расположенных на одном иерархическом уровне.
А если я хочу повторить элемент 3 раза? Ответ: да очень просто – добавим знак умножения, и вуаля!
Пример 2. Дочерние элементы
Символ «>» делает следующий за ним элемент дочерним по отношению к первому, вложенным, обёрнутым в первый. При этом Emmet не забывает о закрывающих тегах и отступах при форматировании, код будет структурирован и отформатирован.
Пример 3. Сгруппированные элементы
Представим, что нужно создать структуру простой страницы, состоящей из шапки, основной части и подвала. При этом внутри шапки будет навигационная панель в виде маркированного списка без нумерации. А блоки main и footer будут на одном уровне с header.
Чтобы это сделать, header и его содержимое беру в круглые скобки. С их помощью можно сгруппировать элементы с разными уровнями вложенности.
Всё это записываю одной строкой, а на выходе получаю девять. Такая магия с вложенностями и группировками.
Бонусный уровень: генерируем рыбу-текст
Когда я только начинал заниматься вёрсткой, то читал много мнений: это хорошо, то плохо. Про рыбу-текст пишут разное. Но для меня это полезная вещь, например, для проверки вёрстки на переполнение.
Если нужен текст на русском языке, то вводим «loremru».
Emmet для CSS
Следующая задача для верстальщика после создания HTML-страницы, описать её внешний вид, для этого оформляем стили. В CSS нет разметки или вложенности, как в HTML, — только селектор, свойство и значение. Но и в случае со стилями Emmet даёт ощутимый прирост эффективности.
Способы ввода сокращений
В работе с CSS используются сокращённые названия свойств. Здесь меньше правил, с некоторым опытом всё становится интуитивно понятным и привычным: набираем первую букву — появляется подстановка всего слова.
Если название свойства составное, тогда слитно либо через дефис набираем первые буквы каждого слова и Emmet подскажет.
/* Введи и проверь: */.example <
ff
f-f
>
Если свойства начинаются на одну и ту же букву или комбинацию букв, например, color и columns, то подобрать сочетания для каждого из них — дело нескольких секунд. Для color будет достаточно «c».
Некоторые сочетания очевидные, например, «fs» предложит нам font-style, но есть и сокращения, к которым надо привыкнуть: «fz» — font-size. Мне понадобилось некоторое время, чтобы выработать стратегию и собственный словарь сокращений.
Ещё одна особенность автоподстановки в CSS: если используешь часто повторяющуюся пару «свойство — значение», то Emmet предложит его в первую очередь. Если во время вёрстки несколько раз указать display: flex, в следующий раз при нажатии «d» этот вариант будет первым в списке.
Таким же образом при вводе свойства color в выпадающем списке будут перечислены все ранее указанные цвета.
Направления полей и отступов
Отдельно скажу про свойства margin и padding, они набираются, соответственно, «m» и «p», чтобы указать направление отступов, достаточно без пробела или через дефис добавить t, b, l и r — обозначающие top, bottom, left и right. И без пробела добавляем значение отступа.
Уточнения свойств через двоеточие
Для ввода пары «свойство — значение» я использую двоеточие в случаях, когда значение указывается буквами, например, цвет. Это конкретизирует сокращение.
/* Введи и проверь: */.example <
c:red
>
Единицы измерения
В этом направлении есть несколько правил. Ряд свойств CSS очень удобные в работе и не требуют указания единиц измерения. К этим свойствам относятся, например, font-weight, line-height и opacity. Для описания свойства font-weight помимо ключевых слов normal, bold, bolder и lighter можно использовать условные единицы от 100 до 900, для opacity — диапазон дробных чисел от 0 до 1, для line-height — любой множитель, чаще всего в диапазоне от 1.1 до 2.
/* Введи и проверь: */.example <
fw400
op.5
lh1.25
>
Для тех свойств, где могут быть указаны разные единицы измерения, по умолчанию используются абсолютные пиксели (px). При этом нужно указать только число.
Но если мне захотелось указать значение в процентах, тогда использую символ «p». Для остальных единиц измерения прописываю их название.
Чтобы записать дробное значение, достаточно поставить точку, не указывая перед ней 0.
/* Введи и проверь: */.example <
fz15
mt45
pl20p
t.25rem
h5vh
>
Несколько значений после двоеточия
Бывает, что для описания свойства требуется несколько значений, которые пишутся через пробел. Чаще всего встречается при использовании полей и отступов.
И для такого случая у Emmet есть изящное, на мой взгляд, решение: если единицы измерения пиксели или auto, пишем значения свойства через дефис. Проценты указываем, используя p. Другие единицы измерения (em, rem, wh, wv и так далее) пишем полностью без пробелов.
/* Введи и проверь: */.example <
m10-20
m22-55-4p
p25-55p4rem2vh
p0-a
>
Не меньше мне нравится использовать частные случаи, например, указание цвета с прозрачностью.
/* Введи и проверь: */.example <
cra
>
Подытожим
Для меня использование Emmet стало одним из слагаемых успеха в качестве веб-разработчика, наряду со знанием горячих клавиш, кодстайла, тегов и свойств.
Создайте для себя «словарь сокращений» Emmet и выучите основные комбинации. Это увеличит скорость написания кода, и со временем вы станете более квалифицированным верстальщиком. Если нужна шпаргалка по всем сокращениям, её можно найти на сайте разработчиков дополнения.
На курсе «Веб-вёрстка» вы познакомитесь со стандартами Web 2.0, научитесь работать с макетами и форматировать код, освоите адаптивную вёрстку, а по итогу — сможете создавать быстрые и удобные сайты, которые точно понравятся пользователям. Посмотреть программу и записаться по ссылке.