Brackets Emmet – обзор и начальные команды

Содержание

Слайд 2

Brackets –что это и зачем Brackets — свободный текстовый редактор для

Brackets –что это и зачем

Brackets — свободный текстовый редактор для веб-разработчиков. Brackets ориентирован на работу с HTML, CSS и JavaScript.

Эти же технологии лежат в основе самого редактора, что обеспечивает его кроссплатформенность т.е. совместимость с операционными системами Mac, Windows и Linux. Brackets создан и развивается Adobe Systems под лицензией MIT License и поддерживается на GitHub.
На сегодняшний день сообществом создано множество расширений, добавляющих большинство необходимых инструментов для работы над кодом, таких как система контроля версий Git, просмотр HTML-кода в браузере в реальном времени (Live Preview), синхронизация с FTP (Git-FTP)[1]. Принять участие в разработке и поддержке расширений может любой желающий.
Слайд 3

Что такое EMMET Emmet (ранее Zen Coding) — набор плагинов для

Что такое EMMET

Emmet (ранее Zen Coding) — набор плагинов для текстовых редакторов, которые в некоторой степени ускоряют

написание кода HTML, XML, XSL, а также кода на некоторых других языках. Проект был начат Вадимом Макеевым в 2008 году[1] и активно разрабатывается Сергеем Чикуенком начиная с 2009 года, а также сообществом пользователей Zen Coding на основе идеи Zen Coding 2.0[2].
Инструменты Zen Coding были вложены в популярные текстовые редакторы, а некоторые плагины, разработанные командой Zen Coding и другими, сделаны независимыми друг от друга. Zen Coding написан на JavaScript и поэтому хорошо переносим между платформами.
Возможность использования Zen Coding есть во многих интегрированных средах разработки. В некоторых из них, например, NetBeans, эта возможность реализована в виде плагина, разработанного независимым от Sun Microsystems и Oracle — производителя NetBeans — разработчиком, в некоторых — встроена в саму среду, например, в IntelliJ IDEA, PhpStorm и WebStorm от JetBrains.
Zen Coding является программным обеспечением с открытым исходным кодом и распространяется под лицензией MIT.
Слайд 4

HTML сокращения !

HTML сокращения

!

Слайд 5

Учимся волшебству скорости набора кода Базовые правила набора Используем скобку >

Учимся волшебству скорости набора кода

Базовые правила набора
Используем скобку >

Наберем nav>ul>li, нажимаем

ТАВ
И получаем
Слайд 6

Базовые правила набора Соединение + Div+p+bg дает нам это

Базовые правила набора

Соединение +

Div+p+bg дает нам это

Слайд 7

Базовые правила набора Поместить выше (в дереве HTML): ^ Div>p>span+em^

Базовые правила набора

Поместить выше (в дереве HTML): ^

Div>p>span+em^

Слайд 8

Базовые правила набора Группировать: () Div> (header>ul>li)+footer>p

Базовые правила набора

Группировать: ()

Div>
(header>ul>li)+footer>p

Слайд 9

Базовые правила набора Умножение: * Ul>li*3

Базовые правила набора

Умножение: *

Ul>li*3

Слайд 10

Базовые правила набора Нумерация: $ ul>li.item_$*3

Базовые правила набора

Нумерация: $

ul>li.item_$*3

Слайд 11

Базовые правила набора id и class

Базовые правила набора

id и class

Слайд 12

Базовые правила набора Атрибуты: []

Базовые правила набора

Атрибуты: []

Слайд 13

Базовые правила набора Текст: {}

Базовые правила набора

Текст: {}

Слайд 14

Базовые правила набора Сокращение тегов

Базовые правила набора

Сокращение тегов

Слайд 15

HTML сокращения

HTML сокращения

Слайд 16

HTML сокращения

HTML сокращения

Слайд 17

HTML сокращения

HTML сокращения

Слайд 18

HTML сокращения

HTML сокращения

Слайд 19

Слайд 20

CSS сокращения

CSS сокращения

Слайд 21