Профессиональный онлайн‑курс HTML и CSS, уровень 1

Обсуждаем роль и место верстальщика в мире технологий. Знакомимся с рабочим процессом на курсе.

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

3.Разминка: начинаем разметку «Барбершопа»

Это задание с самопроверкой, которое не проверяется наставником.

4. Основное задание: начинаем разметку личного проекта

Это задание проверяется наставником

В форке личного проекта выполните разметку двух страниц: главной и внутренней. Нужен только HTML-код, стили делать не нужно. Каждую страницу размещайте в отдельном файле, например:

• главная в index.html,
• внутренняя в inner.html или catalog.html.

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

Важно!

• Не нужно делать разметку форм, так как они ещё не изучены. Разметку форм вы сделаете в четвёртом разделе.
• Не нужно размечать содержимое всплывающих окон (попапов), которые отрисованы в скрытых слоях в макетах. Вы завершите их позже.
• Не нужно вырезать изображения. Используйте вместо них заглушки, например: <img src="http://placehold.it/150x100">, или выдуманные имена файлов. Нарезать графику из макетов вы научитесь в третьем разделе.
• Чтобы не писать большие куски текста руками, вы можете копировать их из макетов. Как это делать, показано в нашей статье.
• Разметка, которую вы делаете в этом задании, должна удовлетворять требованиям технического заданияпо вашему проекту. Блоки, которые в этом задании необязательны, на соответствие ТЗ проверять не нужно.
• Для разметки незнакомых интерактивных элементов вне форм можно использовать тег span.
• Ссылки должны быть размечены правильно.
• При разметке можно не учитывать скрытые заголовки и не прописывать aria-label.

5. Бонусное задание: дополняем разметку личного проекта (необязательное)

Это задание проверяется наставником.

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

1. В форке личного проекта дополните разметку двух страниц: главной и внутренней. Нужен только HTML-код, стили делать не нужно.

Важно!

• Не нужно делать разметку форм, так как они ещё не изучены. Разметку форм вы сделаете в четвёртом разделе.
• Не нужно размечать содержимое всплывающих окон (попапов), которые отрисованы в скрытых слоях в макетах. Вы завершите их позже.
• Не нужно вырезать изображения. Используйте вместо них заглушки, например: <img src="http://placehold.it/150x100">, или выдуманные имена файлов. Нарезать графику из макетов вы научитесь в третьем разделе.
• Чтобы не писать большие куски текста руками, вы можете копировать их из макетов. Как это делать, показано в нашей статье.
• Разметка, которую вы делаете в этом задании, должна удовлетворять требованиям технического заданияпо вашему проекту. Блоки, которые в этом задании необязательны, на соответствие ТЗ проверять не нужно.
• Для разметки незнакомых интерактивных элементов вне форм можно использовать тег span.
• Ссылки должны быть размечены правильно.
• При разметке можно не учитывать скрытые заголовки и не прописывать aria-label.

2. Создайте пулреквест из ветки master и нажмите зелёную кнопку «Всё выполнил, можно проверять» в интерфейсе курса.

Знакомимся со всем необходимым для работы верстальщика с графическими редакторами. Готовим графику для проектов.

6. Разминка: готовим графику «Барбершопа»

7. Основное задание: готовим графику личного проекта

Это задание проверяется наставником.

1. В форке личного проекта подготовьте графику. Из представленных исходников макетов экспортируйте:

• контентные изображения (например, фото товаров или галереи),
• декоративные изображения (например, мелкие иконки),
• фоновые изображения (например, фоновая текстура разделов).

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

Подготовленные изображения разместите в подпапке img в папке проекта, чтобы у вас получилась примерно такая структура проекта:

project

| – img

| [картинки]

| index.html

| catalog.html

2. Подключите контентные изображения в разметке. Фоновые и декоративные изображения сейчас подключать не нужно.

При подключении изображений используйте относительные адреса.

8. Бонусное задание: завершаем подготовку графики личного проекта (необязательное)

9. Разминка: завершаем разметку «Барбершопа»

10. Основное задание: продолжаем разметку личного проекта

Это задание проверяется наставником.

1. В форке личного проекта дополните разметку страниц личного проекта.

Разметка должна соответствовать следущим обязательным требованиям:

• Доступность всего контента
  Весь содержательный текст, все контентные изображения и скрытые на макете элементы (попапы) должны присутствовать в разметке.
• Связность документов
  Всё, что должно быть ссылками, сделано ссылками.
• Корректный сбор данных от пользователей
  Формы работоспособны, у полей форм есть подходящие имена и значения.

Требования доступности контента и связности документов нужно было выполнить ещё на первом этапе разметки. Требование корректного сбора данных появилось на текущем этапе.

Также убедитесь, что разметка соответствует требованиямдоступности интерфейсов:

• Убедитесь, что все интерактивные элементы это либо <button>, либо <a href>.
• Добавьте подписи ко всем интерактивным элементам: лейблы к полям форм, текст в кнопки и ссылки. Отметьте те подписи, которых нет на макете, классом visually-hidden.
• Попробуйте пройти по странице клавишейTabиShift Tabи убедитесь, что вы можете попасть на все интерактивные элементы и управлять ими с клавиатуры.

Введение в CSS

Разбираемся с базовыми механизмами CSS и начинаем стилизацию проектов.

Разбираемся с блочной моделью документа. Создаём сетки страниц учебного и личного проектов.

Разбираемся с блочной моделью документа. Создаём сетки страниц учебного и личного проектов.

Дедлайн предзащиты и начало подготовки к итоговой защите.

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

Знакомимся с JavaScript и оживляем интерактивные блоки вёрстки.

Узнаём как стилизовать содержание внутренних страниц, которые наполняются из CMS. Начинаем готовиться к защите личного проекта.

Учимся делать интерфейсы удобными и доступными для всех. Управление фокусом, важность семантики, тестирование и скринридеры.

Знакомимся с приёмами создания декоративных элементов и завершаем стилизацию этих элементов на главных страницах учебного и личного проектов.