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

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

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

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

  1. Подберите цветовую гамму страниц по любому из примеров https://www.templatemonster.com/ru/category/real-estate-website-templates (вместе в решением задания, пришлите ссылку на выбранный вариант)
  2. Создайте трёхколоночную вёрстку для каждой страницы сайта. Главный блок внутри body должен иметь класс container. Верхняя часть страницы, меню, основное содержимое, правая колонка и подвал должны описываться соответственно: header, nav, main, .sidebar-right, 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. Объекты недвижимости должны быть расположены в табличном виде, но свёрстаны не таблицей — только блочная вёрстка.
  5. В правой колонке страницы (.sidebar-right) , где расположены изображения квартир, создайте форму поиска по квартирам: однострочное поле «Общая площадь», два однострочных поля для ценового диапазона (от и до), набор из 5 флажков с указанием сколько комнат нужно (студия, одно-, двух-, трёх- и четырёхкомнатная), поле выбора select («Восток», «Север», «Запад», «Юг»)7.
  6. На странице контактов вставьте Яндекс.Карту  на адрес агентства.
  7. Оформите вертикальное меню при помощи CSS (без маркеров, подчеркивание только при наведении, измените стандартную цветовую гамму, обнулите у ol, li все поля и отступы).

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

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

Задание 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.
    Примечание: лучше создать новый, чтобы Ваше портфолио пополнилось ещё одним сайтом.