Задание 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 )
- Познакомьтесь с общим алгоритмом создания посадочной страницы http://tilda.education/landing-page-course
- Выберите одну из тем для своей страницы в квесте: (1) Продажа нового смартфона , (2) Бесплатный вебинар по веб-разработке, (3) Учебный курс по веб-разработке, (4) Продажа книги по HTML
- Создайте страницу index.html с разделами: Начало (#start), О проекте (#about), Преимущества (#advantage), Отзывы (#Reviews), Подписка или Покупка (#reviews). Примечание: страница должна быть написана с учетом того, что вы узнали на нашем курсе HTML
- В верхней части страницы создать горизонтальное меню с ссылками на соответствующие разделы
- Создайте папки css (style.css, mobile.css), img (изображения должны быть выдержаны в официальном стиле, подобраны по размеру и указываться в коде с альтернативным текстом), js (script.js).
- Страницы должны быть заполнены максимально правдоподобным текстом (подсмотрите на существующих страницах). К странице должны быть привязаны: style.css и mobile.js из папки css, script.js из папки js, а изображения из папки img.
- На страницк должны быть прописаны title, h1 и <meta charset=»UTF-8″ />
- Код страницы должен быть валидным
- Результат выполнения задания должен быть прислан как ссылка на общедоступный сайт (ссылка на свой домен или поддомен на Github или Cloud9)
Задание 2. Оформление сайта.
- Подберите цветовую гамму страниц по любому из примеров https://www.templatemonster.com/ru/website-templates-type/ (вместе в решением задания, пришлите ссылку на выбранный вариант)
- Проверьте страницу на структуру: главный блок внутри body должен иметь класс container. Верхняя часть страницы, меню, основное содержимое и подвал должны описываться соответственно: header, nav, main, footer.
- Добавьте 2-3 изображения на страницу. Изображения можно взять на любом бесплатном стоке изображений, например, http://www.freedigitalphotos.net, по ключевым словам, совпадающим с вашим одностраничником) Можно подсмотреть, как всё устроено, у существующих сайтов.
- вставьте Яндекс.Карту на адрес компании.
- Измените меню при помощи CSS (без маркеров, подчеркивание только при наведении, измените стандартную цветовую гамму, обнулите у ol, li все поля и отступы).
Задание 3. Доведение сайта.
- Изображения сделайте двух видов: большие и маленькие. Каталог должен содержать маленькие изображения (Размер 220×160).
- Ширина общего для страницы контейнера должна составлять 1024px, а сам контейнер – центрирован (margin).
- На страницах необходимо использовать элементы: strong, em, ins по необходимости. Текст должен быть немного разбавлен изображениями по тематике сайта.
- В начале css файла почистите все поля и отступы: * {margin: 0; padding: 0; } После очистки назначьте элементам поля и отступы.
- Создайте в подвале сайта три блока меню с ссылками заглушками – по аналогии с http://specialist.ru.
- Создайте горизонтальное меню в header, дублирующее левое меню.
- Если в левой колонке больше одного блока меню (больше нескольких ol), отделите эти блоки отступами.
- Для заголовка первого уровня подключите шрифт с сервиса https://fonts.google.com/
(нажать плюсик рядом со шрифтом, потом выбрать шрифт из «корзины» и прописать в своём файле предложенный link и font-family). - Во всех title на страницах добавьте название вашего агенства.
- На главной странице сайта подключите «Карусель»:
https://getbootstrap.com/examples/carousel/,
https://getbootstrap.com/javascript/#carousel,
https://www.w3schools.com/bootstrap/bootstrap_carousel.asp.
Eсли сделаете на чистом HTML+CSS — хорошо. Но можете и познакомиться с каким-нибудь JavaScript.
Задание 4. Создайте мобильную версию сайта.
- Напишите CSS, который при помощи @media queries оформит мобильную версию вашего сайта:
-ширина до 768px http://getbootstrap.com/css/#grid;
-колонку сделайте одну;
-основное меню — одно;
-минимум инфы на основных страницах — скрывайте лишнее при помощи display и селекторов;
-в футере в мобильной версии можно оставить только копирайт и номер телефона. - Проверьте работу на отладчике/валидаторе.
- Проверьте работу сайта https://developers.google.com/speed/pagespeed/ (может не сработать на домене третьего уровня).
Задание 5. Создайте микроразметку на сайте.
- Изучите понятие микроразметки:
https://yandex.ru/support/webmaster/schema-org/what-is-schema-org.xml?lang=ru - Создайте микроразметку для недвижимости (в примере убраны гиперссылки, но они должны оставаться в вашем коде).
<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>
-
<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>
- Создайте микроразметку для адресов/контактных данных вашей компании.
- Создайте микроразметку для членов команды (можно не для всех).
- Создайте микроразметку для комментариев/отзывов на сайте.
Задание 6. Создайте карту сайта sitemap.xml
- Изучите материалы по теме:
https://www.sitemaps.org/ru/protocol.html
https://yandex.ru/support/webmaster/indexing-options/sitemap.xml?lang=ru - Создайте карту сайта sitemap.xml и разместите ее в корне сайта.
Задание 7. Постраничное разбиение материала.
- Страницу с каталогом разбейте на две-три страницы, так, чтобы:
— название исходной страницы сохранилось, но она содержала только половину или треть описаний объектов;
— название второй страницы должно совпадать с первой, но содержать в конце цифру 2, обозначая, что она вторая;
— вторая страница должна содержать другую часть описаний объектов;
— на каждой из полученных страниц должны быть сформированы ссылки с номерами страниц, для удобной навигации по каталогу
(по аналогии с https://www.w3schools.com/bootstrap/bootstrap_pagination.asp ).
Задание 8. Выпадающее верхнее меню.
- Добавьте выпадающее меню одному из пунктов верхнего меню
- Или сделайте его анимированным (https://www.youtube.com/watch?v=2o8BcE0XhMY&list=PLOQDek48BpZGigsyHfaleRff8oZCxN4uQ) . Например: из Каталог выпадают пункты «Однокомнатные» и др…
- При наведении на пункты подменю курсор должен быть pointer;
- У самого пункта меню «Каталог» должен быть «значок», подсказывающий, что есть выпадающее меню.
Например, такой: https://unicode-table.com/ru/23F7/
Задание 9. Минификация HTML/CSS кода.
- Почитайте о минификации кода.
- При помощи любого онлайн сервиса минифицируйте свой CSS-код. Примечание: исходный CSS-код должен остаться отформатированным.
- Сложно: почитайте об автоматизации минификации (Например, что-то о Webpack 2 или Grunt или Gulp).
Примечание: не нужно в текущем квесте настраивать эту автоматизацию — она требует знаний JavaScript. Просто расширяем кругозор.
Задание 10. Дополнительное.
- Важно для меня: Пожалуйста, напишите отзыв об HTML курсе на своей странице — это будет серьёзная мотивация для планирующих обучение.
Используйте теги @specialist_ru, @altarasov, @htmlnews. Спасибо! - Познакомьтесь с Bootstrap
http://getbootstrap.com - Cоздайте новый (или переделайте созданный) сайт с использованием Bootstrap.
Примечание: лучше создать новый, чтобы Ваше портфолио пополнилось ещё одним сайтом.