ADivС — онлайн-учебник по основам веб-вёрстки
Отсутствие живой учебной среды при изучении веб разработки приводит к тому, что новички учатся в изоляции, не видят решения других студентов и собирают портфолио из разрозненных заданий вместо полноценных проектов.
Поэтому миссией проекта стало сделать обучение веб разработке более осмысленным и комьюнити ориентированным, где студенты не просто выполняют задачи, а создают реальные проекты и учатся друг у друга.
Для этого мы создали интерактивный учебник по HTML, CSS и JavaScript с системой открытых решений и сообществом на GitHub, где каждый видит десятки вариантов реализации одной задачи и получает живую обратную связь.
Миссия бренда — помочь каждому почувствовать уверенность в работе с HTML, CSS и JavaScript, показав, что веб-вёрстка — это не сложно, если понимать логику и соблюдать порядок.
Суть
Название
Название «ADivC» объединяет основной бренд ADC с ключевым HTML-тегом <div>, который является фундаментальным строительным блоком веб-вёрстки.
Ценности
Преимущества
Характер
Логотип
Логотип представляет полное название «ADivC». Квадратики в углах имитируют маркеры выделения элементов в графических редакторах и интерфейсах, которые появляются при клике на объект для его редактирования. Иконка упрощает логотип до первой буквы «А», сохраняя те же угловые маркеры.
Главная страница
Главная страница представляет собой разводящий лендинг, рассказывающий об онлайн-учебнике и его структуре обучения. Вначале пользователь видит hero section с призывом начать обучаться. Далее идет блок с карточками основных преимуществ платформы. Ниже размещен баннер о целевой аудитории. После идет визуализация учебной программы с 7 модулями, от введения и настройки окружения до публикации готового сайта. В конце находится призыв к действию, кнопка перехода к учебнику и футер с информацией о проекте.
Страница учебника
Страница учебника представляет собой каталог всех модулей обучения с развернутой структурой образовательной программы. Вверху страницы размещен hero section с крупным заголовком и визуальными элементами на фоне. Далее последовательно идут карточки всех 7 модулей курса. Каждый модуль представлен отдельным блоком с номером, названием, кратким описанием содержания и списком тем внутри модуля. К каждой теме указано время прохождения и стрелка для перехода к материалу. Часть тем скрыта под выпадающим списком с кнопкой «Свернуть» или «+2 темы» для удобства навигации. Под каждым модулем размещена синяя кнопка «Перейти к модулю» для начала обучения.
Страница модуля
Страница модуля представляет собой детальный обзор конкретного раздела обучения с визуализацией его содержания. Центральную часть занимает hero section. Под ним размещена информационная карточка с указанием номера урока, общим временем прохождения и графикой. Далее следует список тем модуля, оформленный в виде кликабельных карточек с номерами, названиями уроков и указанием времени прохождения каждой темы.
Страница урока
Страница урока представляет собой полноценную обучающую статью с теоретическим материалом, практическими примерами и интерактивными заданиями. Hero section содержит крупный заголовок урока с информацией о номере урока и времени прохождения. Основной контент структурирован в виде последовательных блоков, левая боковая панель с оглавлением урока для быстрой навигации по разделам, правая область с материалом урока. В конце урока находится раздел «Полезные ссылки» с внешними ресурсами и блок обратной связи «Была ли эта статья полезной?» с кнопками «Да» и «Нет».
Страница о проекте
Страница о проекте представляет собой презентационную материал, раскрывающую философию и структуру образовательной платформы. Вверху размещены макеты страниц проекта, который будет создаваться пользователями во время обучения. Ниже следует блок статистики с информацией, что получат студенты, пройдя этот курс. В конце блок с призывом к обучению.
Лендинг
Лендинг представляет собой приветственную страницу с акцентом на доступность и простоту обучения. Вверху размещен hero section с краткой характеристикой учебника. Ниже следует блок из шести карточек с ключевыми преимуществами. В конце блок с призывом «Учебник скоро откроется для всех» и формой email-подписки.
Сайт онлайн-учебника спроектирован на основе компонентной архитектуры. Наименования компонентов и их иерархия организованы по принципам Universal Design Framework. Такой подход ускоряет поиск нужных элементов в структуре проекта и дизайн-системе, а также облегчает их изоляцию и переиспользование.
Изображения подготовлены автором. Веб-учебник ADivC
