Самостоятельная работа
Курс «Основы современной верстки»
В конце каждого урока вы будете встречать небольшие самостоятельные задания. Они направлены на более практическое понимание освещенной темы, поэтому очень рекомендуемы для выполнения.
Создайте файл index.html на своем компьютере и создайте собственное резюме. Используйте изученные в этом уроке теги.
Создайте базовую структуру документа и попробуйте разные варианты текста внутри тега <title>. Можете попробовать добавить туда даже эмодзи и посмотреть, как браузер выведет такой заголовок
- Создайте у себя на компьютере файлы index.html и style.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>
Проанализируйте получившийся результат
Откройте доступный вам веб-инспектор на этой странице. Попробуйте пройтись по различным вкладкам и посмотреть, какую информацию они несут. Изменяйте 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>
Используя примеры из урока, узнайте все доступные свойства основного текста:
-
Параметры шрифта
-
Цвет шрифта
-
Расстояние от текста до заголовка «Фронтенд программист»