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

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

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

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

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

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

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

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

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

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

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