Самостоятельная работа

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

Создайте файл index.html на своем компьютере и создайте собственное резюме. Используйте изученные в этом уроке теги.

Создайте базовую структуру документа и попробуйте разные варианты текста внутри тега <title>. Можете попробовать добавить туда даже эмодзи и посмотреть, как браузер выведет такой заголовок

• Создайте у себя на компьютере файлы index.html и style.css. Подключите файл стилей. Создайте разметку любого текста и используя свойства, которые мы изучили в этом уроке, оформите текст.
• Попробуйте скопировать примеры из этого урока.

Создайте файлы index.html и style.css на своем компьютере.

Внутри HTML расположите следующую запись:

<div id="main" class="text-white alert alert-warning">Какой-то текст</div>

и следующие CSS стили:

div {
  width: 500px;
  height: 500px;

  background: #333333;
}

#main {
  color: white;
  width: 750px;
}

.text-white {
  color: white;
}

.alert {
  height: 350px;
  color: gray;
}

div {
  background: blue;
}

.alert-warning {
  background: #000000;
  color: yellow;
}

Проанализируйте получившийся результат

Откройте доступный вам веб-инспектор на этой странице. Попробуйте пройтись по различным вкладкам и посмотреть, какую информацию они несут. Изменяйте HTML-элементы. Добавляйте различные свойства к текущей странице.

Попробуйте воспроизвести следующую верстку с помощью Emmet. Ваша задача из уже готовой верстки сделать строку, как в случае с карточкой товара из этого урока.

<main>
  <h1>Emmet</h1>
  <ul>
    <li>Быстрый</li>
    <li>Удобный</li>
    <li>Нескучные обои</li>
  </ul>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
</main>