Как научиться быстро верстать? | Плагин EMMET

#Сокращение при помощи #плагина #EMMET, позволяет увеличить #скорость #верстки #сайтов за счет комбинации команд и #аббревиатур. EMMET прост в установке интегрируется в такие редакторы как #PHPStorm, #Sublime #Text, #Adobe #Dreamviewer, #Notepad++, #WebStorm, #Aptana, #Coda, #TextMate, #Eclipse, #CodeMirror, #Brackets, #Emacs, #HippoEDIT, #HTML-Kit и многие другие, полный их перечень найдете на сайте EMMET.

Реквизиты для поддержки канала:
WMR - R165181087249
WMZ - Z138569415925
Яндекс - 410011610186118
Сбербанк - 4276-3000-2291-1211

В уроке рассматривать основные #функции #Emmet, попрактикуемся в написании #HTML и #CSS, узнаем горячие кнопки.

Сам урок разбит на несколько частей:
- в первой рассмотрим основные правила по написанию HTML и CSS;
- во второй части покажу, как задавать свои #аббревиатуры, #сниппеты в программе #PhpStorm;
- в третьей части, закрепим знания на практике, при помощи Emmet напишем простенький код.

*Видео метки*:
[01:20] - Emmet синтаксис HTML
[11:26] - Emmet Синтаксис CSS
[18:32] - Свои сниппеты в PhpStorm
[24:27] - Сокращенные комбинации emmet + PhpStorm
[28:29] - Практический пример

*Другие видео на канале DWSTV*:

Во время урока я использую:
Документацию по #CSS3, #HTML5, #EMMET
Код набираю в редакторе #PhpStorm

Добавляйтесь к нам в друзья:

Мы очень рады если видео "Как научится быстро верстать? | Плагин EMMET" было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим #WEB разработкам.

[nKevn]

Спасибо Вам огромное за ваш труд!
Очень полезное видео и дополнение полезное:)

[appleipad]

спасибо большое за бесценны информации

[gosTik]

Много пользы от Вашего канала, спасибо)

[wowdkrb]

Видео просто бомба. Инфы валом, всё не впитаешь за раз. Надо будет на повторе посмотреть раз 5))

[singlebw]

почему-то не работают команды img:z и img:s в notepad++

[gocqnzb]

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

[valeriygalev]

а как сделать пользовательской автозаполнение без аббревиатуры? Например, начинаю печать букву r, а редактор мне уже предлагает слово require. Сейчас его в справочнике редактора еще нет.

[Bulbazavr]

Подскажите пожалуйста, у меня возникла проблема с комментированием строки (HTML). Когда нажимаю сочетание клавиш ctrl+shift+/ то у меня весь текст превращается в серый. А раньше просто в конце строки добавлялся <-- --> для комментирования.

[Sergey]

Спасибо. Полезно и познавательно. Вопросик если можно. Очень понравилось фича в редакторе. Когда вводишь emmet код сразу внизу всплывающая графическая подсказка как код будет выглядеть после развертывания. Если коряво объяснил залил скрин внизу - даю ссылку. Это плагин или штатные возможности редактора. PhpStorm?

[idylqkt]

+ 99 к скорости кодинга! Спасибо! :)

П.С. А для чего нужны эти префиксы?
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

[ZurabPro]

Скажи пожалуйста, а какой плагин ты используешь в видео CSS Grid, live edit, live reload, что он сам обновляется и подсветка еще есть . И есть аналог для Sublime? Спасибо

[gfdojkm]

Я работаю через саблайм и как мне настроить чтобы при прописывании кода сразу же выходило что получилось в хроме??? Пожалуйста ответьте люди добрые))

[davidmatevosyan]

Привет . Спасибо за полезное, подскажите пожайлуста, можно ли скачать на макбук про такой редактор без ограничении и бесплатно ? И когда же снимите видео про полный обзор @keyfrems ))

[HeBepolTHblu]

Подскажите, пожалуйста, а можно ли notepad++ настроить таким же образом, чтобы при наведении на сокращения во всплывающей подсказке отображалась будущая структура, которая появится при развороте сокращения? Допустим, как в примере на 6:00

[plpdsgq]

А как включить отображение полного кода, при вводе сокращений? Как у вас в интро, вы пишите сокращенно, а ниже разворачивается полный код в всплывающей подсказке?)

[uujtbgc]

Такой вопрос, можно ли сделать анимацию переключателей слайдера, как в приложении алиэкспресс? Там переключатель при переходе как бы растягивается

[xromax]

как называется плагин который предварительно показывает структуру HTML-кода которая задаётся с помощью EMMET?

[gosufsb]

Здравсвтуйте . Что если в emmet мне при нажатии tab ничего не выдёт, а уже при ctrl+е заменяет . Как сделать что бы заменял tab

[ywbjoew]

Привет! Есть вопрос.... ты работаешь в PHPSTOM, есть такой же IDE WEBSTORM,

... так вот, КАКАЯ МЕЖДУ НИМИ РАЗНИЦА, ЕСЛИ МОЖНО РАБОТАТЬ С WEB И В PHPSTOM?
Заранее спасибо!

[vwmkilw]

Круто! Спасибо! А как настроить scss или sass в этом редакторе?