Несколько месяцев назад я решил поработать над сборником простых и практичных проектов, чтобы обучить их на своих курсах и опубликовать их. Затем я начал, и в результате появилось репозиторий на 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.
Готовятся новые проекты
Я стараюсь сделать это репо очень полезным. Итак, я очень жду вашей помощи и критики.