Во введении раскрывается тема создания сайта-визитки репетитора английского языка и объясняется, зачем такому специалисту может понадобиться собственный веб-ресурс. Здесь формулируются проблема, актуальность, цель и задачи проекта, обозначаются предполагаемые посетители и ожидаемый результат. Также указываются используемые технологии и кратко описывается последовательность дальнейшей работы.

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

В этом пункте объясняется, как взаимодействуют три технологии, используемые при создании веб-страниц. HTML задаёт структуру и содержание, CSS отвечает за визуальное оформление, а JavaScript добавляет интерактивное поведение. Рассматриваются примеры их применения в проекте: заголовки и ссылки, стили меню и блоков, а также возможные действия пользователя при нажатии на элементы.

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

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

Здесь описывается разработка основы сайта в Visual Studio Code с использованием HTML. В документ добавляются заголовки, текстовые блоки, навигационные ссылки, образовательные материалы и элементы страниц с частыми вопросами. В пункте также объясняется, как связываются страницы сайта и почему для логичной структуры важно применять элементы разметки в соответствии с их назначением.

В этом пункте рассматриваются оформление страниц с помощью CSS и добавление необходимых интерактивных элементов с JavaScript. Описываются выбор цветовой гаммы и шрифтов, настройка отступов, расположение блоков и оформление меню. Также объясняется, как скрипты могут реагировать на действия пользователя, не усложняя интерфейс и не отвлекая посетителя от главной информации.

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

В заключении сопоставляются полученный результат и поставленная цель: оценивается, удалось ли создать сайт-визитку с предусмотренными разделами и контактной информацией. Кратко перечисляются выполненные задачи, освоенные при разработке навыки и результаты проверки страниц. Также можно обозначить возможные направления развития сайта, например обновление материалов или расширение способов обратной связи.

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