Практика HTML: создание посадочной страницы

Задание 1. Создайте посадочной страницы.

  1. Познакомьтесь с понятием целевой или посадочной страницы (https://ru.wikipedia.org/wiki/%D0%A6%D0%B5%D0%BB%D0%B5%D0%B2%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0 )
  2. Познакомьтесь с общим алгоритмом создания посадочной страницы http://tilda.education/landing-page-course
  3. Выберите одну из тем для своей страницы в квесте: (1) Продажа нового смартфона , (2) Бесплатный вебинар по веб-разработке, (3) Учебный курс по веб-разработке, (4) Продажа книги по HTML
  4. Создайте страницу index.html с разделами: Начало (#start),  О проекте (#about), Преимущества (#advantage), Отзывы (#Reviews), Подписка или Покупка (#reviews). Примечание: страница должна быть написана с учетом того, что вы узнали на нашем курсе HTML
  5. В верхней части страницы создать горизонтальное меню с ссылками на соответствующие разделы
  6. Создайте папки css (style.css, mobile.css), img (изображения должны быть выдержаны в официальном стиле, подобраны по размеру и указываться в коде с альтернативным текстом), js (script.js).
  7. Страницы должны быть заполнены максимально правдоподобным текстом (подсмотрите на существующих страницах). К странице должны быть привязаны: style.css и mobile.js из папки css, script.js из папки js, а изображения из папки img.
  8. На страницк должны быть прописаны title, h1 и <meta charset=»UTF-8″ />
  9. Код страницы должен быть валидным
  10. Результат выполнения задания должен быть прислан как ссылка на общедоступный сайт (ссылка на свой домен или поддомен на Github или Cloud9)

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

  1. Подберите цветовую гамму страниц по любому из примеров https://www.templatemonster.com/ru/website-templates-type/ (вместе в решением задания, пришлите ссылку на выбранный вариант)
  2. Проверьте страницу на структуру:  главный блок внутри body должен иметь класс container. Верхняя часть страницы, меню, основное содержимое и подвал должны описываться соответственно: header, nav, main, footer.
  3. Добавьте 2-3 изображения на страницу.  Изображения можно взять на любом бесплатном стоке изображений, например, http://www.freedigitalphotos.net, по ключевым словам, совпадающим с вашим одностраничником) Можно подсмотреть, как всё устроено, у существующих сайтов.
  4. вставьте Яндекс.Карту  на адрес компании.
  5. Измените меню при помощи 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.
    Примечание: лучше создать новый, чтобы Ваше портфолио пополнилось ещё одним сайтом.