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

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

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

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

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

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

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

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

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

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