odin sign up form

Проект ODIN - Решение формы регистрации

Это решение для проекта: регистрация формы для проекта ODIN. Проект ODIN предоставляет бесплатную учебную программу по кодированию с открытым исходным кодом, которую можно принять полностью в Интернете.

Проект: калькулятор является одним из двух проектов в промежуточном курсе HTML и CSS. Это дает возможность практиковать содержание, которое было рассмотрено в разделе «Промежуточные концепции HTML» , промежуточные концепции CSS и формы .

Оглавление

• Обзор
  • Скриншот
  • Ссылки
• Мой процесс
  • Построен с
  • Что я узнал
  • Продолжение развития
  • Полезные ресурсы
• Автор
• Благодарности

Обзор

Скриншот

Ссылки

• Репозиторий GitHub
• Живой сайт

Мой процесс

Строить с

• Semantic Html5
• CSS пользовательские свойства
• CSS Flexbox

Что я узнал

Три вещи в этом решении, которое я раньше не использовал в проектах:

• HTML5 входных типов
• Формы стиля
• Системный стек шрифтов

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

• CSS сброс
• Относительные единицы
• Самостоятельные шрифты
• Текстовые стили
• Фоновое изображение
• Коробка тень
• Псевдо-классы
• Пользовательские свойства

Продолжение развития

Для моего решения я использовал только функции HTML и CSS, которые были рассмотрены в учебной программе полного пути обучения JavaScript вплоть до этого проекта.

CSS GRID рассматривается в следующем разделе после этого проекта. Макет в файле дизайна для этого проекта был бы хорошим кандидатом для первого дизайна макета и сетки CSS.

Отзывчивый дизайн не покрывается гораздо позже в учебной программе. Я сделал свое решение максимально отзывчивым с помощью инструментов, которые у меня были, используя CSS Flexbox, но без медиа -запросов.

Доступность веб -сайта также просматривается намного позже в учебной программе. Я использовал то, что узнал о доступности, работая над проблемами наставника.

Проверка, что полевые поля соответствуют друг другу, требует JavaScript. Использование JavaScript для проверки формы рассматривается в будущем уроке. Мое решение использует валидацию клиента только для адреса электронной почты. У него нет никаких обязательных полей формы, так как ни один из них не был указан в файле проектирования.

Форма не имеет бэкэнд и нигде не отправляет представленные данные.

Полезные ресурсы

• Эти стеки шрифтов улучшат производительность вашего сайта от Кевина Пауэлла - это видео дает хорошее введение в систему шрифтов пользовательского интерфейса.

Автор

Найди меня в Интернете:

• Мастодон - @sabineemden

Благодарности

В дополнение к стеку System Font, это решение использует шрифт с норвежским жирным шрифтом от Жоэля Карруш. Шрифт бесплатный для личного и коммерческого использования и включает в себя полный рунный алфавит с поддержкой Unicode.

В этом решении также используется CSS -сброс Джоша Комо и почти черно -белая цветовая схема.