Skip to content

План разработки по этапам для студентов

Jump to bottom
Gaukhar Sultan edited this page Mar 21, 2022 · 2 revisions

План разработки сайта Atlantis Academy

Адаптив необходим уже на 1-2 этапе. Адаптация под другие устройства будет происходить параллельно всем этапам.

1 этап

Главная в виде скетча без использования фирменных цветов.

/ HTML, CSS

Структура

Главная страница. Hero; описание процесса обучения.

UI

Базовые стили: несколько заголовков, текст, дефолтное состояние кнопок.

2 этап

Увеличиваем главную страницу, добавляем цвета.

/ HTML, CSS, Grid, CSS4

Структура

Главная страница. Добавляем блок с курсами, интерактивные блоки в котором будут связаны со страницами курсов. Практика гридов.

UI

Добавляем фоновое изображения в hero, задаём цвет элементам (в т.ч. кнопкам). Добавить сложные интерактивные элементы (как раз в рамках блоков курсов). Пример: добавить “умный текст” с тултипами.

3 этап

Увеличиваем главную страницу, добавляем состояния кнопок, добавляем шапку.

/ HTML, CSS(A), Vanilla JS

Структура

Главная страница. Добавляем блок о процессе обучения. Добавляем шапку с якорными ссылками на блоки главной страницы.

UI

Добавляем новые интерактивные элементы. Добавляем состояния Hover, Press, Disable для кнопок.

4 этап

Форма заявки, закрепляем шапку при скроле.

/ HTML+Jade, CSS(A), Vanilla JS

Структура

Главная страница. Добавляем в шапку кнопку “Связаться”. Закрепляем шапку при скроле на сайте. Добавляем модальное окно с формой обратной связи. Также добавляем окна отображающие результат отправленной заявки. Добавляем блоки "Сравнение инженера и разработчика"

UI

Добавляем состояние шапки при скроле. Добавляем инпуты и их состояния.

5 этап

Страница курса.

/ Jade, SASS, Vanilla JS

Структура

Страница курса. Формируем шаблон страницы курса с описанием процесса, результата и практики. Добавить профили курсантов с гитхаба в виде бейджей со статусом. (Нужно задействовать что-то где есть связь по API).

UI

Формируем блоки (фрагменты) из которых будем создавать другие аналогичные страницы. Добавляем новые кнопки и их состояния, если это будет необходимо.

6 этап

Блок с курсами, футер. Фоновое видео в Hero.

/ Jade, SASS, Vanilla JS + fastify

Структура

Главная страница. Добавляем блок о результате обучения. Добавляем футер. Добавляем блоки "Технологии, которым научим", "Стипендия и хантинг в компанию"

UI

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

7 этап

Страница контактов. Изменяем навигацию.

Структура

Добавляем страницу контактов. Формируем ссылки на сторонние ресурсы. Меняем ссылки в шапке для навигации между страницами. Добавляем блок FAQ

UI

Добавляем новые кнопки и их состояния, если это будет необходимо.

ИТОГ РАБОТЫ

  • Главная страница с УТП и Hero
  • Курсы
  • Процесс обучения
  • Сравнение инженера и разработчика
  • Технологии, которым научим
  • Стипендия и хантинг в компанию
  • FAQ
  • Контакты СТА
  • Футер

"Какими навыками нужно обладать?" Этот блок возможно добавится позже

СТРАНИЦА КУРСА (шаблон)

  • Название курса, краткая история, СТА
  • Программа курса, сроки
  • Описать практику на реальных проетах
  • Профили курсантов с гитхаба + отзывы можно
  • Описать плюшки, заинтересовать.
  • FAQ
  • Контакты СТА
  • Футер

КОНТАКТЫ

  • Ссылки на мессенджеры, соц. сети
  • Почта

ФОРМА ЗАЯВКИ

  • Форма заявки
  • Форма "Спасибо"

UI

Размеры и адаптация

  • Десктопная версия под 1920 px.
  • Десктопная версия под 1200 px. (Изначально пропускаем)
  • Планшетная версия под 1024 px.
  • Мобильная версия под 375 px.

Фрагменты и компоненты

  • Состояния всех уникальных фрагментов при взаимодействии с ними.
  • Состояния и типы компонентов (инпутов кнопок и прочее).
Clone this wiki locally