Несколько месяцев назад я решил поработать над сборником простых и практичных проектов, чтобы обучить их на своих курсах и опубликовать их. Затем я начал, и в результате появилось репозиторий на Github под названием Практические Front-End проекты.

Как следует из названия, это собрание простых веб-проектов, разработанных для энтузиастов и новичков. Основная цель - образование, и все коды открыты для всех, кто в этом нуждается.

Обновлено 13 апр.2020 г .:

- Добавлен новый проект: обои на холсте и дизайн разделенного экрана

Примечания:

  • Webpack, gulp или другой сборщик не использовались.
  • Сторонние библиотеки не использовались.
  • Коды поддерживаются только современными браузерами.
  • Проекты предназначены только для образовательных целей.

Проекты

Есть 9 разработанных проектов, которые вы можете просмотреть сейчас.

  • Пользовательский видеоплеер
  • Милые фильмы
  • Примечание приложение
  • Настольная игра Отелло
  • Приложение для викторины
  • Ползунок простого диапазона
  • Приложение для веб-чата
  • Холст обои
  • Разделенный экран

Разделенный экран

Современная концепция дизайна для демонстрации содержимого в контейнере с двумя разделенными секциями, размер которых изменяется при наведении курсора мыши. (Онлайн-демонстрация)

Рассмотрены специальные темы:

  • Переменная CSS
  • Относительное и абсолютное позиционирование CSS
  • CSS, использование псевдоклассов
  • Манипуляции с DOM

Холст обои

Это практическое руководство по холсту, анимированные обои с движущимися по ним кружками. Код полностью документирован и легко читается. (Онлайн-демонстрация)

Рассмотрены специальные темы:

  • HTML Canvas
  • Стратегии кодирования
  • Математические операции

Приложение для веб-чата

Этот проект представляет собой настоящее приложение для обмена сообщениями, разработанное с использованием чистого javascript без сторонних библиотек. В этом проекте мы сосредоточились на веб-компонентах и ​​придали ему реальную компонентную структуру. Все чаты, сообщения и данные являются поддельными и создаются с помощью фабрики данных. Надеюсь, это будет полезно. (Просмотр в Интернете)

Рассмотрены специальные темы:

  • Веб-компоненты
  • Объектно-ориентированное программирование
  • Обработка событий
  • DOM контроль
  • CSS гибкий

Пользовательский видеоплеер

В этом проекте я настроил элементы управления видео и разработал их вручную. Сосредоточьтесь на работе с видеоузлом и на том, как реализовать для него настраиваемое поведение. (Просмотр в Интернете)

Рассмотрены специальные темы:

  • Элементы управления видео узлом
  • Полноэкранная обработка
  • Переменные CSS

Милые фильмы

Сайт для простого поиска фильмов. (Просмотр в Интернете)

Рассмотрены специальные темы:

  • Промисы и получение данных с API (я использовал OMDb API)
  • Управление поведением и событиями DOM
  • Использование position: static; в CSS
  • Использование переменных CSS

Примечание приложение

Практическое веб-приложение для заметок для обработки заметок по категориям. Есть заметки, для которых можно указать категорию. вы можете искать в заметках и редактировать или удалять их. (Просмотр в Интернете)

Рассмотрены специальные темы:

  • Объектно-ориентированное программирование (ООП)
  • Создание элементов DOM
  • Верстка с сеткой CSS

Настольная игра Отелло

Знаменитая стратегическая игра Othello, известная как Reversi, реализована на чистом Javascript. (Просмотр в Интернете)

Рассмотрены специальные темы:

  • Объектно-ориентированное программирование (ООП)
  • Отелло игровая стратегия
  • Создание элементов DOM
  • Обработка событий
  • Обработка ошибок

Приложение для викторины

Имитация викторины в веб-приложении. (Просмотр в Интернете)

Рассмотрены специальные темы:

  • Объектно-ориентированное программирование (ООП)
  • Создание и обработка элементов DOM
  • CSS анимация
  • Использование символов

Ползунок простого диапазона

Простая реализация ползунка небольшого диапазона с чистым Javascript. (Просмотр в Интернете)

Рассмотрены специальные темы:

  • Прототипное объектно-ориентированное программирование
  • Обработка событий DOM
  • Переменные CSS

Работает локально

Это так просто. Клонируйте или загрузите репозиторий, откройте каталог проекта и нажмите index.html. Как я уже упоминал выше, нет никакого сборщика, и все скрипты были внедрены в HTML.

Готовятся новые проекты

Я стараюсь сделать это репо очень полезным. Итак, я очень жду вашей помощи и критики.