Details

Данная работа посвящена созданию интерактивного обучающего веб-приложения, направленного на формирование и закрепление навыков работы с технологией CSS Grid у начинающих веб-разработчиков. В проекте применяется геймифицированный подход к обучению, основанный на последовательном прохождении уровней с возрастающей сложностью и получением визуальной обратной связи. Задачи, которые решались в ходе исследования: 1) Анализ существующих решений для обучения CSS Grid и выявление их недостатков. 2) Проектирование архитектуры клиентского приложения с учетом масштабируемости и пользовательского опыта. 3) Реализация визуального редактора сеток и интерфейса уровней с элементами геймификации. 4) Разработка функционала прогрессии, модальных окон, аутентификации и взаимодействия с сервером. 5) Проведение пользовательского опроса для оценки восприятия геймифицированного обучения и удобства интерфейса. 6) Формирование методики оценки эффективности предлагаемого подхода на основе пользовательской обратной связи. Работа выполнена с использованием технологий React, Node.js, MongoDB, SCSS, а также библиотек Redux, React Router, Jest, Axios и др. В качестве средств разработки использовались среды Visual Studio Code, облачный репозиторий GitHub. В результате работы было разработано веб-приложение, обеспечивающее интуитивно понятный интерфейс и последовательное обучение работе с CSS Grid. Приложение включает в себя игровые уровни, задания с проверкой, а также возможность отслеживания личного прогресса. Также проведен опрос среди пользователей, показавший высокий интерес к игровым форматам в изучении CSS. Для достижения поставленных целей были разработаны и реализованы программные модули, интерфейсные компоненты и методические принципы обучения, учитывающие особенности восприятия информации в условиях цифровой среды.

This work is devoted to the creation of an interactive educational web application aimed at developing and consolidating skills in working with CSS Grid technology among novice web developers. The project uses a gamified learning approach based on sequentially completing levels with increasing difficulty and receiving visual feedback. The research set the following goals: 1) Analysis of existing solutions for CSS Grid training and identification of their shortcomings. 2) Designing the architecture of the client application, taking into account scalability and user experience. 3) Implementation of a visual grid editor and a level interface with gamification elements. 4) Development of the functionality of progression, modal windows, authentication and interaction with the server. 5) Conducting a user survey to assess the perception of gamified learning and the convenience of the interface. 6) Formation of a methodology for evaluating the effectiveness of the proposed approach based on user feedback. The work was performed using React and Node technologies.js, MongoDB, SCSS, as well as the libraries Redux, React Router, Jest, Axios, etc. Visual Studio Code environments and the GitHub cloud repository were used as development tools. As a result, a web application was developed that provides an intuitive interface and consistent training in working with CSS Grid. The application includes game levels, tasks with verification, as well as the ability to track personal progress. A survey was also conducted among users, which showed a high interest in game formats in the study of CSS. To achieve these goals, software modules, interface components and methodological principles of learning have been developed and implemented, taking into account the peculiarities of information perception in a digital environment.