Nikita Karasyov kianurivzzz

Конец осени 2016 года ознаменовался упорным матчем за звание чемпиона мира по шахматам между норвежцем Магнусом Карлсеном и россиянином Сергеем Карякиным. Напряжённое сражение на протяжении 20 дней навсегда останется в истории. В этом задании вам нужно сверстать превью осеннего матча и представить соперников.

Сверстайте и дополните необходимые стили для макета. Используйте изученные свойства модуля CSS Columns.

index.html

Вступительный текст

Заголовок первого уровня: Матч за звание чемпиона мира по шахматам 2016

Выполните все пункты задания. Для поиска неизвестных вам тегов используйте поиск справочника.

Создайте файлы index.html, contacts.html, present.pdf
В index.html файле создайте скелет HTML документа
В теге body создайте абзац, в котором создайте две ссылки. Первая ссылка с текстом "Главная", вторая ссылка с текстом "Контакты"
После абзаца с ссылками добавьте заголовок первого уровня с текстом "Главная", и еще один абзац с каким-нибудь текстом, можете использовать сайт-генератор случайного текста lipsum.com
Скопируйте содержимое страницы index.html в файл contacts.html и поменяйте текст заголовка на "Контакты"
Теперь перелинкуйте страницы между собой. В одном и другом файле пропишите ссылки в атрибуте href. Ссылка с текстом "Главная" должна вести на страницу index.html, ссылка с текстом "Контакты" должна вести на страницу contacts.html
На странице контактов создайте еще один абзац с двумя ссылками. Первая ссылка с текстом "Наш телефон: 28484848" и вторая ссылка с текстом "Наш e-mail: inf

Создайте форму обратной связи по макету ниже. Форма состоит из пяти основных элементов:

Два однострочных текстовых поля для ввода имени и email

Большое текстовое поле – textarea. Для ввода сообщения

Чекбокс с принятием условий сервиса

Кнопка отправки сообщения

В этом задании вам предстоит создать стили для карточек профилей с использованием псевдоэлементов. Вам нужно будет добавить иконку перед именем пользователя, декоративный элемент после имени и стилизовать первую букву описания профиля.

style.css

Используйте псевдоэлементы для стилизации карточек профилей.

Перед именем пользователя должна отображаться иконка "👤" с отступом справа 5px.

После имени пользователя должна отображаться горизонтальная линия цвета #ccc, высотой 2px и с отступом сверху 5px.

С ростом веб-приложения нужно выводить разные данные на отдельных страницах, чтобы удобно их представлять.

В этом упражнении вам нужно вывести список двух ресурсов: телефонов и доменов.

Добавьте обработчики:

/phones — возвращает список телефонов, которые содержатся в переменной phones, закодированной в json

/domains — возвращает список доменов, которые содержатся в переменной domains, закодированной в json

Пейджинг — механизм, который позволяет перемещаться по большим коллекциям небольшими порциями.

Часто встречается в Интернете, например, в результатах запросов поисковых систем. Пейджинг с точки зрения пользователя выглядит как параметры запроса: page определяет текущую страницу, а per — количество элементов на страницу.

Имена могут быть и другими, но обычно их называют, как показано выше. Запрос c page, равным 1, аналогичен запросу без указания page.

app.py

Реализуйте маршрут /companies, по которому отдается список компаний в виде json. Компании отдаются не все сразу, а только соответствующие текущей запрошенной странице. По умолчанию выдается 5 результатов на запрос.

Добавьте реализацию подключения статьи из markdown файла. Все необходимые пакеты уже установлены.

Структура проекта

index.pug. Основной файл проекта. В нём реализуйте подключение шаблона статьи

article.pug. Шаблон статьи. Добавьте тег

и подключите статью

ikea.md. Статья в формате markdown

Создайте таблицу, в которой указано количество курсов на Хекслете по разным языкам. Для этого в файле index.pug уже предоставлены все основные данные, включая заголовок первого уровня. Ваша задача — используя JavaScript переменные сформировать необходимую таблицу.

Итоговый результат компиляции Pug без учёта базовой структуры:

<h1>Количество курсов в онлайн-школе</h1>

<table>
<thead>
 <tr>
 Курс

	<!DOCTYPE html>
	<html lang="ru">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/style.css">
	<title>Матч за звание чемпиона мира по шахматам 2016</title>
	</head>

	<section class="container">
	<div class="col-2">
	<div class="content">
	<h1>О школе</h1>
	<p>Школа — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>
	</div>
	<div class="side">
	<ul>
	<li><strong>Теория.</strong> Короткая лекция в виде текста или видео. Она основана на задаче, так что в отличие от традиционной академической теории, мы делаем упор на специфическую задачу, которая уже решена умными инженерами и программистами, а затем следуем по их шагам, чтобы понять решение.</li>
	<li><strong>Тест.</strong> Проверка вашего понимания. Нам не важно запоминание фактов, поэтому вопросы теста нацелены на понимание концепции, а не на тренировку памяти.</li>