Опубликовано от — Оставить комментарий

Задания по HTML с Emmet

Ягоды: земляника
Ягоды: земляника

Быстрая верстка использует горячие клавиши Emmet. Задания этого блока включают вопросы: как скачать Emmet, установка Emmet, (emmet на Notepad++, Brackets), команды Emmet (так называемая шпаргалка Emmet), почему Emmet не работает. После выполнения задач с плагином Emmet скорость вашей верстки/разработки вырастет в разы.

Задания по HTML с Emmet

  1. Наберите команду ! в Emmet и получите шаблон страницы на HTML5. Примечание: быстрые клавиши для разворачивания кода посмотрите в вашем редакторе или, при работе с codepen.io используйте кнопку табуляции.
  2. Изучите команды Emmet и создайте при его помощи элементы с классами, идентификаторами и наборы вложенных элементов 
    <div class="some">Lorem.</div>
<div class="first" id="next">Lorem.</div>
<dl>
  <dt>Lorem.</dt>
  <dd>Lorem ipsum dolor sit amet.</dd>
  <dt>Hic!</dt>
  <dd>Magnam voluptates repudiandae iusto ad.</dd>
  <dt>Animi!</dt>
  <dd>Ratione recusandae, qui! Sint, corrupti.</dd>
  <dt>Possimus.</dt>
  <dd>Nostrum facilis omnis recusandae provident.</dd>
</dl>
  3. Изучите последовательности Emmet, которые получают CSS-свойства. 
    background: #fff url() 0 0 no-repeat;
margin-top: ;
font: 1em Arial,sans-serif;
color: #000;
text-align: left;
border-radius: ;
border: 1px solid #000;
  4. Создайте при помощи Emmet HTML-коментарий.
  5. Создайте при помощи Emmet элемент div с атрибутом data-test=test 
    <div data-test="test"></div>
  6. Создайте при помощи Emmet HTML-элемент с текстом внутри
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus quod error voluptate numquam ex aliquam, similique esse ducimus est perferendis.</p>
  7. Создайте при помощи Emmet элемент div с атрибутом data-test=test 
    <div data-test="test"></div>
  8. При помощи плагина быстрой вёрстки (Emmet) получите разметку навигации на сайте (nav), с десятью гиперссылками. Примечание: гиперссылки быть внутри HTML-элемента li, атрибут href должен содержать пустой хэш (#). 
    <nav>
  <ul>
    <li><a href="#">Lorem.</a></li>
    <li><a href="#">Architecto.</a></li>
    <li><a href="#">Quaerat.</a></li>
    <li><a href="#">Illum?</a></li>
    <li><a href="#">Officia.</a></li>
    <li><a href="#">Itaque.</a></li>
    <li><a href="#">Autem.</a></li>
    <li><a href="#">Culpa.</a></li>
    <li><a href="#">Aspernatur.</a></li>
    <li><a href="#">Quos.</a></li>
  </ul>
</nav>
  9. При помощи плагина быстрой вёрстки (Emmet) получите разметку трёхколоночной страницы с элементами section, article, nav, header, footer. 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <div class="container">
    <header></header>
    <nav></nav>
    <article></article>
    <section></section>
    <footer></footer>
  </div>
</body>
</html>

Все задания по HTML

Добавить комментарий