Создайте таблицу, в которой указано количество курсов на Хекслете по разным языкам. Для этого в файле index.pug уже предоставлены все основные данные, включая заголовок первого уровня. Ваша задача — используя JavaScript переменные сформировать необходимую таблицу.
Итоговый результат компиляции Pug без учёта базовой структуры:
<h1>Количество курсов в онлайн-школе</h1>
<table>
<thead>
<tr>
Курс
Добавьте реализацию подключения статьи из markdown файла. Все необходимые пакеты уже установлены.
Структура проекта
index.pug. Основной файл проекта. В нём реализуйте подключение шаблона статьи
article.pug. Шаблон статьи. Добавьте тег
и подключите статьюikea.md. Статья в формате markdown
| <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> |
Пейджинг — механизм, который позволяет перемещаться по большим коллекциям небольшими порциями.
Часто встречается в Интернете, например, в результатах запросов поисковых систем. Пейджинг с точки зрения пользователя выглядит как параметры запроса: page определяет текущую страницу, а per — количество элементов на страницу.
Имена могут быть и другими, но обычно их называют, как показано выше. Запрос c page, равным 1, аналогичен запросу без указания page.
app.py
Реализуйте маршрут /companies, по которому отдается список компаний в виде json. Компании отдаются не все сразу, а только соответствующие текущей запрошенной странице. По умолчанию выдается 5 результатов на запрос.
С ростом веб-приложения нужно выводить разные данные на отдельных страницах, чтобы удобно их представлять.
В этом упражнении вам нужно вывести список двух ресурсов: телефонов и доменов.
Добавьте обработчики:
/phones — возвращает список телефонов, которые содержатся в переменной phones, закодированной в json
/domains — возвращает список доменов, которые содержатся в переменной domains, закодированной в json
В этом задании вам предстоит создать стили для карточек профилей с использованием псевдоэлементов. Вам нужно будет добавить иконку перед именем пользователя, декоративный элемент после имени и стилизовать первую букву описания профиля.
style.css
Используйте псевдоэлементы для стилизации карточек профилей.
Перед именем пользователя должна отображаться иконка "👤" с отступом справа 5px.
После имени пользователя должна отображаться горизонтальная линия цвета #ccc, высотой 2px и с отступом сверху 5px.
Создайте форму обратной связи по макету ниже. Форма состоит из пяти основных элементов:
Два однострочных текстовых поля для ввода имени и email
Большое текстовое поле – textarea. Для ввода сообщения
Чекбокс с принятием условий сервиса
Кнопка отправки сообщения
| <!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> |
Выполните все пункты задания. Для поиска неизвестных вам тегов используйте поиск справочника.
Конец осени 2016 года ознаменовался упорным матчем за звание чемпиона мира по шахматам между норвежцем Магнусом Карлсеном и россиянином Сергеем Карякиным. Напряжённое сражение на протяжении 20 дней навсегда останется в истории. В этом задании вам нужно сверстать превью осеннего матча и представить соперников.
Сверстайте и дополните необходимые стили для макета. Используйте изученные свойства модуля CSS Columns.
Вступительный текст
Заголовок первого уровня: Матч за звание чемпиона мира по шахматам 2016