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

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

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

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

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

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

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

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

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

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