Подпишитесь на DeepL Pro для редактирования данного документа.
Дополнительную информацию можно найти на странице www.DeepL.com/pro.
Итоговый проект "Веб-технологии"
Итоговая экспертиза проекта академической программы по специальности: В057 Информационные технологии студентов 1 курса курса "Веб-технологии". Вы должны создать и реализовать React App Web на основе выбранной вами темы (например: Приложение для социальных сетей, список для перетаскивания, приложение для мессенджера или чата, приложение для электронной коммерции, блог, приложение для книг, приложение для выполнения дел, приложение для фитнеса/трекер для тренировок и т.д.). Цель данного проекта - продемонстрировать знания по разработке фронтенд-офисных систем на основе HTML, CSS, Bootstrap и JavaScript. В соответствии с учебным планом данного курса, а также навыки работы с наиболее важными инструментами веб-технологий. Этот финальный проект Web App Project предполагает реализацию полноценного веб-приложения, которое будет иметь четкую цель и обеспечивать ценность для своих пользователей.
Уведомление: ПОЛИТИКА КУРСАгласит - списывание не допускается. Студенты, уличенные в списывании, получат "0" за задание!
Технические требования:
Создайте 8-10 HTML-страниц ввашем Web App. Проект.
Используйте элементы заголовков, теги якорей, изображения, элементы абзацев.
Используйте структуру HTML 5для оформления веб-страниц.
Используйте блочные и инлайн-элементы
и . Добавьте теги и
.
Создавайте и используйте таблицы: элементы
,
,
, ,
, .
Создавайте и таблицы: элементы colspan и rowspan.
Создайте и реализуйте элементы формы: типы ввода, кнопки (radiobutton, checkbox, submit/select),
Создавайте меню, выпадающие списки для вложенных или скрытых форм меню.
Подключите и используйте внешнюю ссылку для CSS и добавьте стили для веб-страницы. Используйте свойства цвета и фонового цвета. Используйте RGB, шестнадцатеричную и именованную системы цветов.
Использование общих свойств текста и основы размера шрифта в пикселях. Реализуйте свойство семейства шрифта.
Используйте различные селекторы типа element, child, class, universal, id, pseudo-class и pseudo-element.
Используйте CSS Box-Model: Width & Height, Border & Border-Radius, Padding & Margin, свойство Display, CSS Units: ems & rems для управления пробелами и отступами.
Внедрение свойств CSS: Непрозрачность и альфа-канал, свойство Position, CSS-переходы и шрифты Goole.
Используйте отзывчивый CSS и Flexbox. Реализуйте Flex-Direction, Justify-Content, Flex-Wrap, Align-Items, Align-Content и Align-Self. Использование и добавление медиазапросов.
Подключите и используйте фреймворк Bootstrap для придания стиля веб-странице. Используйте Including bootstrap & Containers, Bootstrap buttons. А также типографику и утилиты Bootstrap. Внедряйте отзывчивые сетки Bootstrap. Формы и панели навигации Bootstrap.
Используйте и подключайте файлы JavaScript для построения логики между HTML и CSS.
Используйте простой и шаблонный синтаксис литералов в JS.
Используйте подход функционального программирования (JS) в проекте.
Используйте переменные (let, const), функции, условные операторы (if else, switch case, тернарный оператор), массивы, методы для массивов, объектов и циклы (for, while).
Используйте оператор spread с литералами массивов и Spread с объектами. Используйте Rest params.
Создайте и используйте методы forEach и Map. Используйте методы filter & reduce.
Используйте элементы DOM в JS для работы с HTML и CSS. Используйте document, getElementbyId, querySelector.
Использование и создание innerHTML, textContent и innerText в DOM.
Используйте и реализуйте события. Используйте свойство OnClickи реализуйте addEventListener. Использование и добавление событий клавиатуры и объекта Event Object.
Реализуйте события формы и PreventDefault.
Используйте прототипы, классы и объектно-ориентированное программирование. Добавление функций конструктора. Используйте ключевые слова extends и super.
Создайте 2-3 кнопки для модальных окон (с названиями "Модальное окно 1", "Модальное окно 2", "Модальное окно 3").
Создайте форму регистрации (Имя, Фамилия, Возраст, Город рождения, Регион, Страна, Домашний адрес, Номер телефона). Сделайте валидацию для пользователей.
Создайте форму входа, которая должна содержать два входа (имя пользователя и пароль или пин-код).