Приветствую! 

Это страница вводного уровня к обучающей программе "Верстка веб-страниц".

Это программа, в которой вы вместе с наставником будете разбираться в этой сфере, выполнять задания и смотреть обучающие материалы.

Это программа для начинающих, кто только знакомиться со сферой создания сайтов, для тех, кто хочет развиваться в этом максимально быстро и в поддержке практикующих программистов.

Задача этой программы научиться создавать простые веб-страницы без элементов программирования, которые можно будет опубликовать в Интернет.

Что будет на этих страницах:

+ Форматированный текст (абзацы, заголовки, списки, таблицы и.т.д)

+ Изображения.

+ Фоновый цвет и изображения.

+ Размеры элементов

+ Расположение элементов веб-страницы в колонки.

+ Позиционирование элементов в нужное место.

+ и.т.д.

Программа состоит из уровней в зависимости от сложности их выполнения и уровня вашей подготовки. 

Чтобы пройти уровень и двигаться дальше, нужно выполнить предыдущее задание и отправить отчет на проверку.

Если задание выполнено правильно, вы можете посмотреть, как это задание выполняли другие участники программы, находить оригинальные решения и развиваться.

Если что-то не получается, спрашиваете у меня.

Интересно?

Тогда начинаем. Первое, что нужно освоить - это язык HTML. Задача этого уровня максимально быстро погрузиться в эту тему.

Мы не будем глубоко погружаться в детали этого языка, а остановимся лишь на самом необходимом, что нужно знать, чтобы уже на этой неделе создать первые веб-страницы.

Чтобы пройти уровень, выполните следующие задания.

Что нужно изучить?

Для изучения на этом уровне предлагается небольшой курс "Быстрый старт в HTML для начинающих".

Изучив его, вы сможете значительно проще выполнить задания этого уровня.

Задание уровня. 

Давайте представим, что мы с вами работаем веб-разработчиком в какой-нибудь фирме и к нам обращается заказчик, у которого есть Интернет-магазин.

Заказчик дает нам задание выбрать любой товар из магазина и сделать веб-страницу с его описанием. 

Примечание:

Можете для этого задания выбрать любой товар из любого Интернет-магазина и сделать описание на него (можно просто скопировать текст этого описания).

Например, можно взять товар с этих сайтов: aliexpress.comwildberries.ru, и.т.д.

Пока для заказчика достаточно просто одного HTML-каркаса страницы, без оформления, чтобы в эскизном варианте посмотреть, что будет получаться, определиться с текстовым содержимым, положением главных блоков и.т.д. 

Чем больше будет обговорено и решено на этом этапе, тем меньше правок будет далее. 

Товар может быть любой. Это не важно. 

Что главное?

Описание товара должно соответствовать макету, который набросал заказчик.

 

Примечание к макету:

Важно.

Макет вашей веб-страницы нужно будет разместить на сервисе GitHub Pages. Это бесплатный хостинг. Что это такое и зачем это нужно здесь.

В отчете нужно будет просто привести ссылку на ваш макет там.


1) Разбить страницу на основные логические блоки (шапка сайта, подвал, …)


2) Область "Навигация":

+ Логотип можно выбрать на сайте https://www.iconfinder.com

В поиске набираем "logo" и подбираем какое-нибудь бесплатное изображение для логотипа.

+ Пункты главного меню сайта сформировать в виде списка маркированного.


3) Область "Шапки" сайта:

+ В "шапку" сайта (в элемент h1) разместить название товара. Тем самым мы выделяем важность этого для поисковых систем (Яндекс и Google). Таким образом, посетители сайта смогут легче находить ваш товар в поиске по его названию. Подробнее здесь

Название товара также разместите в элемент title, который находится в элементе <head>. Это тоже очень важно для поискового продвижения.

+ Под названием размещаем подзаголовок (в элементе h2), который каким-либо образом описывает товар.


4) Область "Основной раздел"

+ Вставить в основной раздел изображение товара (можете использовать любое).

+ Описание товара должно состоять из абзацев. 

Важные моменты должны быть выделены полужирным шрифтом.

Примечания выделить курсивом.

В описании должна быть ссылка на внешний сайт, которая открывается в новом окне.

Преимущества товара оформить в виде нумерованного списка:

1. Преимущество 1

2. Преимущество 2

3. Преимущество 3

7) В подвале страницы написать, что все права защищены и указать контактную информацию.

Если есть вопросы по заданию, пишите в личку вконтакте или телеграм.

Желаю вам скорейшего выполнения этого задания и встретимся на следующем уровне.

С уважением, Дмитрий Ченгаев.