5 практических проектов по веб-разработке, которые не являются списками дел

Сначала я изучал веб-разработку, находя интересные сайты в Интернете и пытаясь создать их самостоятельно. Конечно, такой способ обучения подходит не всем, но если вы относитесь к тем, кому важно делать, чтобы двигаться вперед, продолжайте читать!

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

Поэтому я составил небольшой список тех проектов, которые, на мой взгляд, могут быть полезны для того, чтобы попробовать свои силы. Их сложность возрастает по мере продвижения по списку, так что имейте это в виду. Для каждого из них я привел список терминов, которые вы можете найти, чтобы помочь в их создании, а также языки программирования или фреймворки, которые можно использовать.

Хотя проект может показаться сложным, все они состоят из небольших частей, поэтому их легко разбить на управляемые куски!

Итак, вот они.


Слайд-шоу изображений

Это в основном проверит ваши способности фронтенда, и есть несколько способов создать слайд-шоу из картинок, которые сменяют друг друга. Вы можете попытаться сделать что-то с помощью чистого CSS, но добавив немного JavaScript, вы действительно отточите эффект и общий пользовательский опыт.

Поищите эти термины, чтобы помочь с проектом:

  • CSS переходы
  • Анимация элементов HTML
  • События щелчка в JavaScript и как их обрабатывать
  • Изменение размера изображения с помощью CSS
  • Клавиатурная навигация и доступность

Некоторые языки и технологии, которые можно использовать для создания:

  • HTML
  • CSS
  • JavaScript

Средство предварительного просмотра уцененных файлов

Либо с помощью веб-сайта, либо с помощью приложения командной строки, попробуйте создать способ предварительного просмотра файлов уценки и преобразования их в HTML, понятный браузеру. Я пишу много заметок в формате уценки, но видеть их в красивом виде помогает удобству чтения.

Поищите эти термины, чтобы помочь проекту:

  • Разбор и использование аргументов командной строки
  • Использование сторонних библиотек
  • Обработка ввода файлов
  • Вывод и стилизация предварительно отформатированного HTML
  • Сборка и распространение скомпилированного исполняемого файла

Некоторые языки и технологии, которые можно использовать для сборки:

  • Go
  • Node (JavaScript)
  • PHP

Погодное приложение

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

Найдите эти термины, чтобы помочь в работе над проектом:

  • Ввод и использование внешнего API
  • Чистый дизайн макета и стилизация
  • Обновление в режиме реального времени без необходимости обновления
  • Изменение стилей на основе текущих данных
  • Обработка непредвиденных ошибок от API

Некоторые языки и технологии, которые вы можете использовать для создания этого:

  • Vue (JavaScript)
  • React Native (JavaScript, скомпилированный в код для мобильных устройств)
  • Python

Клон Twitter

Этот проект вы можете сделать настолько сложным или простым, насколько захотите, но он определенно затронет как фронтенд, так и бэкенд стеки. По своей сути, этот проект должен позволить кому-то зарегистрироваться, создать имя пользователя и отправлять небольшие сообщения, которые можно увидеть на главной странице ленты.

Не стесняйтесь добавлять дополнительные сложности в виде уведомлений, лайков, блокировки аккаунтов, повторных записей, настроек пользователя и т.д.

Поищите эти термины, чтобы помочь с проектом:

  • Проектирование базы данных + взаимоотношения (один пост -> много комментариев)
  • Отправка уведомлений
  • Санирование ввода и заполнение форм
  • Бесконечная прокрутка
  • Аутентификация и безопасность учетных записей

Некоторые языки и технологии, которые вы можете использовать для создания этого:

  • Laravel + Vue (PHP + JavaScript)
  • Django + React (Python + JavaScript)
  • Kotlin + Svelte (Java + JavaScript)

Наблюдатель за фондовым рынком

Это повышает сложность, поскольку код выполняется в фоновом режиме, а не только в то время, когда кто-то находится на вашем сайте. Как пользователь этого проекта, я бы хотел иметь возможность отслеживать определенные биржевые тикеры и видеть их текущую цену на рынке.

Я также хотел бы получать уведомления всякий раз, когда цена падает ниже или поднимается до определенной величины. Это потребует от вас запуска кода в фоновом режиме вашего сайта для постоянного обновления и сравнения данных, поступающих от биржевого брокера.

Поищите эти термины, чтобы помочь с проектом:

  • Фоновые (cron) задания для наблюдения за ценами на акции
  • Получение и отображение большого количества данных из внешних API-интерфейсов
  • Аутентификация пользователей и хранение персональных настроек
  • Форматирование и отправка уведомлений по электронной почте и текстовых уведомлений
  • Составление сложных графиков с использованием сторонних библиотек или без них.

Некоторые языки и технологии, которые вы можете использовать для создания этого:

  • Rails + Hotwire (Ruby)
  • ASP.NET + Blazor (C#)
  • Laravel + LiveWire (PHP)

Заключение

Я надеюсь, что некоторые из этих проектов вдохновили вас на поиск более необычных путей, которые помогут вам отточить свои навыки программирования. По сей день я продолжаю создавать что-то в свободное время, чтобы изучить новые фреймворки, языки или просто посмотреть, смогу ли я это сделать.

Если у вас есть вопросы по этому поводу или по поводу чего-либо другого, связанного с веб-разработкой, не стесняйтесь, дайте мне знать в комментариях или свяжитесь со мной в Twitter!

Оцените статью
Procodings.ru
Добавить комментарий