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

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

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

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

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

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

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

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

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

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