Практика HTML: после курса по основам HTML и CSS

Добро пожаловать в квест по основам HTML! Нарушение правил квеста и/или грубые ошибки, приводят к исключению из квеста без уведомления. Письма с содержанием, отличным от простого URL на сайт с результатом остаются без ответа — экономьте время

Задание 1. Создайте сайт агентства недвижимости.

  1. Создайте страницы сайта (index.html — страница «Главная», about.html — страница «О компании» (и сотрудниках), catalog.html — страница «Каталог» с перечнем объектов недвижимости, contact.html — страница «Контакты» с контактными данными, service.html — страница «Услуги» о предоставляемых услугах).
  2. Создайте папки css (style.css, mobile.css), img (изображения должны быть выдержаны в официальном стиле, подобраны по размеру и указываться в коде с альтернативным текстом), js (script.js). Внимание! Примечание: style.css в задании 1 не трогаем, потому что задание по стилям будет во втором задании
  3. Страницы должны быть заполнены максимально правдоподобным текстом (подсмотрите на существующих сайтах агентств). К каждой странице должен быть привязаны: style.css и mobile.js из папки css, script.js из папки js, а изображения из папки img.
  4. На каждой странице должно быть одинаковое горизонтальное меню в элементе <nav>. Ссылки должны корректно вести на соответствующие страницы
  5. На страницах должны быть прописаны title, h1 meta с кодировкой UTF-8
  6. Код каждой страниц должен быть валидным
  7. Результат выполнения задания должен быть прислан как ссылка на общедоступный сайт (ссылка на свой домен или github pages)
  8. Все HTML-файлы должны лежать в корневой папке сайта

Задание 2. Оформление сайта.

  1. Подберите цветовую гамму страниц по любому из примеров https://www.templatemonster.com/ru/category/real-estate-website-templates (вместе в решением задания, пришлите ссылку на выбранный вариант)
  2. Создайте вёрстку для каждой страницы сайта. Главные блоки внутри body должны иметь класс container. (Убедитесь, что есть верхняя часть страницы, меню, основное содержимое, подвал header, nav, main, footer).
  3. На странице каталога квартир, в главной области страницы, вставьте объекты недвижимости с классом «product»:  кол-во комнат квартиры (.product-level), описание квартиры (.product-desc), изображение квартиры  (.product-img), стоимость квартиры (.product-type-house) и валюта (.product-price-currency), тип дома (.product-type-house) , этаж  (.product-level).  Изображения квартир можно взять на любом бесплатном стоке изображений, например, http://www.freedigitalphotos.net, по ключевым словам room, flats, apartments и др.) Можно подсмотреть, как всё устроено, у существующих агентств недвижимости.
    Категории у каждой квартиры должны быть гиперссылками с заглушками в виде #.

    <div class="product">
 <h2 class="product-name">Двухкомнатная квартира</h2>

 <span class="product-desc">Описание квартиры</span>

 <img src="https://вашсайт.io/img/dvuh.jpg" class="product-img" alt="ваш альтернативный текст">

 <div class="offer"> 
 <span class="product-price">36990</span>
 <span class="product-price-currency">RUB</span>
 </div>
 
 <span class="product-address"><a href="#">ул.Победы</a></span>
 <span class="product-map"><a href="#">Показать на карте</a></span>
 <span class="product-rooms">2-х комнатная</span>
 <span class="product-square">45 кв.м.</span>
 <span class="product-type-house">Кирпичный</span>
 <span class="product-level">4 этаж</span>
</div>
  4. Объекты недвижимости должны быть расположены в табличном виде, но свёрстаны не таблицей — только блочная вёрстка (можно display: inline-block или table/table-cell).
  5. На странице каталога, где расположены изображения квартир, создайте форму поиска по квартирам (она должна располагаться над перечнем квартир): однострочное поле «Общая площадь», два однострочных поля для ценового диапазона (от и до), набор из 5 флажков с указанием сколько комнат нужно (студия, одно-, двух-, трёх- и четырёхкомнатная), поле выбора select («Восток», «Север», «Запад», «Юг»)7.
  6. На странице контактов вставьте Яндекс.Карту  на адрес агентства.
  7. Оформите горизонтальное меню при помощи CSS (без маркеров, подчеркивание только при наведении, измените стандартную цветовую гамму, обнулите у ol, li все поля и отступы). Примечание: меню должно быть максимально похожим на меню выбранного шаблона (js-эффекты не обязательны для реализации).

Задание 3. Доведение сайта.

  1. Ширина общего для страницы контейнера должна составлять 1024px, а сам контейнер – центрирован (margin).
  2. На страницах необходимо использовать элементы: strong, em, ins по необходимости. Текст должен быть немного разбавлен изображениями по тематике сайта.
  3. В начале css файла почистите все поля и отступы: * {margin: 0; padding: 0; } После очистки назначьте элементам поля и отступы. Если не сделали ранее, укажите box-sizing:border-box
  4. Создайте в подвале сайта три блока меню с ссылками заглушками – по аналогии с http://specialist.ru.
  5. Для заголовка первого уровня (или других существующих на странице заголовокв) подключите шрифт с сервиса https://fonts.google.com/  Важно: максимально придерживаться выбранного дизайна.
  6. Во всех title на страницах добавьте название вашего агенства (Название страницы, потом название агенства).
  7. На главной странице сайта подключите «Карусель»:
    https://getbootstrap.com/examples/carousel/,
    https://getbootstrap.com/javascript/#carousel,
    https://www.w3schools.com/bootstrap/bootstrap_carousel.asp.
    Eсли сделаете на чистом HTML+CSS — хорошо. Но можете и познакомиться с каким-нибудь JavaScript.
  8. На странице контактов создать форму связи, содержащую поля с именем, телефоном, емейлом и сообщением клиента
  9. Перед отправкой задания: проверить на валидаторе HTML и CSS свой код, сравнить схожесть выполненной работы с выбранным дизайном, сверить цвета текста, кнопок, ссылок — они должны максимально соотноситься

Задание 4. Создайте мобильную версию сайта.

  1. Напишите CSS, который при помощи @media queries оформит мобильную версию вашего сайта:
    -ширина до 768px http://getbootstrap.com/css/#grid;
    -колонку сделайте одну;
    -основное меню — одно;
    -минимум инфы на основных страницах — скрывайте лишнее при помощи display и селекторов;
    -в футере в мобильной версии можно оставить только копирайт и номер телефона.
  2. Проверьте работу на отладчике/валидаторе.
  3. Проверьте работу сайта https://developers.google.com/speed/pagespeed/ (может не сработать на домене третьего уровня).

Задание 5. Создайте микроразметку на сайте.

  1. Изучите понятие микроразметки:
    https://yandex.ru/support/webmaster/schema-org/what-is-schema-org.xml?lang=ru
  2. Создайте микроразметку для недвижимости (в примере убраны гиперссылки, но они должны оставаться в вашем коде). 
    <div itemscope itemtype="http://schema.org/Product" class="product">
 <h2 itemprop="name" class="product-name">Двухкомнатная квартира</h2>

 <span itemprop="description" class="product-desc">Описание квартиры</span>

 <img src="https://вашсайт.io/img/dvuh.jpg" itemprop="image" class="product-img" alt="">

 <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="offer"> 
 <span itemprop="price" class="product-price">36990</span>
 <span itemprop="priceCurrency" class="product-price-currency">RUB</span>
 </div>
  3.  <span class="product-address"><a href="#">ул.Победы</a></span>
 <span class="product-map"><a href="#">Показать на карте</a></span>
 <span class="product-rooms">2-х комнатная</span>
 <span class="product-square">45 кв.м.</span> 
 <span class="product-type-house">Кирпичный</span>
 <span class="product-level">4 этаж</span>
</div>
  4. Создайте микроразметку для адресов/контактных данных вашей компании.
  5. Создайте микроразметку для членов команды (можно не для всех).
  6. Создайте микроразметку для комментариев/отзывов на сайте.

Задание 6. Создайте карту сайта sitemap.xml

  1. Изучите материалы по теме:
    https://www.sitemaps.org/ru/protocol.html
    https://yandex.ru/support/webmaster/indexing-options/sitemap.xml?lang=ru
  2. Создайте карту сайта sitemap.xml и разместите ее в корне сайта.

Задание 7. Постраничное разбиение материала.

  1. Страницу с каталогом разбейте на две-три страницы, так, чтобы:
    — название исходной страницы сохранилось, но она содержала только половину или треть описаний объектов;
    — название второй страницы должно совпадать с первой, но содержать в конце цифру 2, обозначая, что она вторая;
    — вторая страница должна содержать другую часть описаний объектов;
    — на каждой из полученных страниц должны быть сформированы ссылки с номерами страниц, для удобной навигации по каталогу
    (по аналогии с https://www.w3schools.com/bootstrap/bootstrap_pagination.asp ).

Задание 8. Выпадающее верхнее меню.

  1. Добавьте выпадающее меню одному из пунктов верхнего меню
  2. Или сделайте его анимированным (https://www.youtube.com/watch?v=2o8BcE0XhMY&list=PLOQDek48BpZGigsyHfaleRff8oZCxN4uQ) . Например: из Каталог выпадают пункты «Однокомнатные» и др…
  3. При наведении на пункты подменю курсор должен быть pointer;
  4. У самого пункта меню «Каталог» должен быть «значок», подсказывающий, что есть выпадающее меню.
    Например, такой: https://unicode-table.com/ru/23F7/

Задание 9. Минификация HTML/CSS кода.

  1. Почитайте о минификации кода.
  2. При помощи любого онлайн сервиса минифицируйте свой CSS-код. Примечание: исходный CSS-код должен остаться отформатированным.
  3. Сложно: почитайте об автоматизации минификации (Например, что-то о Webpack 2 или Grunt или Gulp).
    Примечание: не нужно в текущем квесте настраивать эту автоматизацию — она требует знаний JavaScript. Просто расширяем кругозор.

Задание 10. Дополнительное.

  1. Важно для меня: Пожалуйста, напишите отзыв об HTML курсе на своей странице — это будет серьёзная мотивация для планирующих обучение.
    Используйте теги @specialist_ru, @altarasov, @htmlnews. Спасибо!
  2. Познакомьтесь с Bootstrap
    http://getbootstrap.com
  3. Cоздайте новый (или переделайте созданный) сайт с использованием Bootstrap.
    Примечание: лучше создать новый, чтобы Ваше портфолио пополнилось ещё одним сайтом.