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

Курс «Основы современной верстки»

Урок «Введение»

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

Урок «Семантический HTML»

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

Урок «Базовая структура HTML документа»

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Небольшая вёрстка</title>

  <style>
    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;
    }
  </style>
</head>
<body>
  <div id="main" class="text-white alert alert-warning">Какой-то текст</div>
</body>
</html>

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

Урок «Chrome DevTools»

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

Урок «Emmet»

Попробуйте воспроизвести следующую верстку с помощью 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>
Урок «Графические редакторы»

Используя примеры из урока, узнайте все доступные свойства основного текста:

  1. Параметры шрифта
  2. Цвет шрифта
  3. Расстояние от текста до заголовка «Фронтенд программист»