Сначала я изучал веб-разработку, находя интересные сайты в Интернете и пытаясь создать их самостоятельно. Конечно, такой способ обучения подходит не всем, но если вы относитесь к тем, кому важно делать, чтобы двигаться вперед, продолжайте читать!
Обычно, когда я вижу примеры проектов для начинающих, они практически одинаковы: списки дел, текстовые редакторы, формы и т.д. Они не обязательно плохие, но могут стать немного скучными, особенно когда вы начинаете повышать свой профессиональный уровень и хотите расширить свои знания за счет более сложных проектов.
Поэтому я составил небольшой список тех проектов, которые, на мой взгляд, могут быть полезны для того, чтобы попробовать свои силы. Их сложность возрастает по мере продвижения по списку, так что имейте это в виду. Для каждого из них я привел список терминов, которые вы можете найти, чтобы помочь в их создании, а также языки программирования или фреймворки, которые можно использовать.
Хотя проект может показаться сложным, все они состоят из небольших частей, поэтому их легко разбить на управляемые куски!
Итак, вот они.
Слайд-шоу изображений
Это в основном проверит ваши способности фронтенда, и есть несколько способов создать слайд-шоу из картинок, которые сменяют друг друга. Вы можете попытаться сделать что-то с помощью чистого 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!