Задания по 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

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