СОЗДАНИЕ ПЕРСОНАЛЬНОГО САЙТА-ПОРТФОЛИО КАК ОБРАЗОВАТЕЛЬНОГО РЕСУРСА ПРИ ОБУЧЕНИИ ОСНОВАМ ВЕБ-РАЗРАБОТКИ

CREATING A PERSONAL PORTFOLIO WEBSITE AS AN EDUCATIONAL RESOURCE IN TEACHING THE BASICS OF WEB DEVELOPMENT

Mussin Mikhail

Student, Department of Informational Systems in Arts and Humanities, Saint-Petersburg University,

Russia, Saint Petersburg

АННОТАЦИЯ

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

ABSTRACT

The article examines the development of a personal portfolio website as an educational resource used in the process of teaching the fundamentals of web development and digital self-presentation. It describes a practice-oriented approach to forming students’ professional and digital competencies based on the application of basic web technologies: HTML, Tailwind CSS, and JavaScript. The presented material can be used in the educational process for training students within the framework of project-based and independent learning.

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

Keywords: educational resource, web portfolio, web development education, HTML, digital competence, digital education, project-based learning.

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

Целью данной работы является разработка персонального сайта-портфолио как образовательного ресурса. В процессе исследования и разработки образовательного ресурса использовались следующие методы: а) анализ современных образовательных подходов к адаптивной вёрстке; б) практическая реализация учебного веб-проекта; в) апробация ресурса в учебной среде, то есть тестирование интерфейса на различных устройствах [1].

Для реализации проекта были выбраны HTML, Tailwind CSS, JavaScript, GitHub Pages [2]. Файловая структура проекта была выбрана с учётом наглядности и удобства изучения студентами, что позволяет использовать проект в качестве учебного примера.

Файловая структура проекта включает: а) index.html - основная HTML-разметка; б) script.js - скрипты для интерактивности; в) tailwind.config.js - файл конфигурации; г) папка images - графические материалы. На рисунке 1 представлена главная страница персонального сайта-портфолио, разработанного в учебных целях.  Использование Tailwind CSS позволило быстро настроить стили и обеспечить адаптивное отображение на разных устройствах. Минималистичный дизайн с акцентом на крупный заголовок и персональный аватар делает страницу визуально привлекательной и легко читаемой.

Рисунок 1. Главная страница сайта

Раздел «About me» (рис. 2) был спроектирован и реализован с учётом принципов модульности, читаемости и визуальной эстетики. Он наглядно иллюстрирует, как с помощью простых средств можно добиться профессионального и выразительного результата. При разработке была использована гибкая двухколоночная сетка: слева - изображение, справа - текст и блоки с информацией [3]. Такое расположение создаёт визуальный баланс и хорошо адаптируется под экраны разного размера.

Рисунок 2. Раздел «About me»

Раздел «My services» (рис. 3) представляет перечень услуг художника в виде карточек, каждая из которых лаконично описывает направление деятельности. Была использована гибкая карточная сетка с использованием CSS Grid. Это обеспечило адаптивность и масштабирование при добавлении новых услуг.

Реализация через Tailwind CSS позволила быстро настроить внешний вид и отступы, легко добавить адаптивность, сократить количество кастомных стилей. Можно подключить динамическую генерацию из JSON/JS-массива.

Рисунок 3. Раздел «My services»

На рисунке 4 представлена реализация формы обратной связи на персональном сайте-портфолио как элемента учебного веб-проекта.

Рисунок 4. Пример формы обратной связи

Результаты проекта показали, что использование персонального сайта-портфолио в качестве учебного задания способствует формированию практических навыков веб-разработки. Результаты проекта подтвердили возможность эффективного создания качественного и функционального веб-портфолио на базе HTML, Tailwind CSS и JavaScript без использования тяжёлых фреймворков и CMS. Интеграция инструментов искусственного интеллекта позволила ускорить процесс разработки и улучшить структуру интерфейса [4].

На сайте была реализована возможность обратной связи, обеспеченная через внешнюю службу Web3Forms, что позволило посетителям отправлять сообщения напрямую автору без настройки серверной части или написания бэкенд-кода. Такой подход демонстрирует студентам способы организации взаимодействия пользователя с сайтом на статическом веб-ресурсе, расширяет понимание автономных веб-сервисов и снижает порог входа для начинающих разработчиков, позволяя сосредоточиться на клиентской части интерфейса и логике отправки данных [5]. Web3Forms позволяет обрабатывать отправку контактной формы на HTML-странице и автоматически пересылать её содержимое на указанный email, не требуя собственного сервера или базы данных, что делает этот элемент особенно полезным для учебных проектов.

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

Список литературы:

1. GitHub Docs. GitHub Pages Documentation. https://docs.github.com/en/pages
2. Tailwind Labs. Tailwind CSS Documentation. – https://tailwindcss.com/docs
3. W3C. Web Content Accessibility Guidelines (WCAG).  https://www.w3.org/WAI/standards-guidelines/wcag
4. Fain, Y., Moiseev, A. TypeScript Quickly. Manning Publications, 2020. 280 p.
5. Russell, S., Norvig, P. Artificial Intelligence: A Modern Approach.  Pearson Education, 2021.