Самый быстрый способ стать хорошим веб-разработчиком — практиковаться. А работа над большим количеством разнообразных проектов — лучший вид практики.
Дело в том, что каждый отдельный проект представляет собой уникальную проблему и ее решение. Поэтому чем больше проектов вы создадите, тем больше знаний и опыта наберетесь.
В этот список идей я включил несколько своих любимых проектов для начинающих. Собственно, я сам все это строил, когда приступал к изучению JavaScript. Надеюсь, вам эти проекты принесут такую же пользу, как и мне.
Если, работая над проектом, вам случится застрять — не волнуйтесь: я включил в статью ссылки на соответствующие видеоуроки. В этих видео вы сможете просмотреть решение шаг за шагом.
Но все-таки сначала попытайтесь найти решение самостоятельно, без подсказок. Этот шаг очень важен в становлении разработчика. В программировании нет возможности как-то срезать путь и сразу стать хорошим специалистом. Не будете работать самостоятельно — ваши навыки не улучшатся, сколько бы видео вы ни просмотрели.
Если чувствуете, что информации навалилось слишком много, сделайте перерыв и отдохните. В отдыхе и перезагрузке нуждаются все, даже самые крутые специалисты. Помните, что даже тому разработчику, чьи видео вы смотрите на YouTube, потребовалось долго тренироваться, прежде чем он стал мастером в какой-то теме.
Я также добавлю во все разделы ссылки на готовые проекты. Все они хостятся бесплатно на GitHub Pages. Пройдя по ссылке, вы сможете посмотреть, как должен выглядеть проект, который вам предлагается сделать.
Закончив свой первый проект, вы тоже сможете разместить его на GitHub Pages. Это очень легко сделать, просто следуйте этой инструкции.
Наконец, со времени создания видеоуроков я вносил в проекты некоторые изменения, так что проект в последней версии может слегка отличаться от того, что вы увидите в видео. Последние версии проектов можно найти на GitHub.
1. Hex-цвета
Сделайте веб немножко красивее при помощи простого приложения. Это приложение меняет цвет фона и выводит на экран hex-коды использованных цветов.
Как это выглядит — Hex Colors.
Темы JavaScript, которые вы изучите:
- манипуляции с DOM
- структуры данных
- функции.
Работая над этим проектом, я научился использовать onclick для привязки функции к кнопке. В данном случае функция генерирует рандомный hex-код и делает этот цвет фоновым.
Изучение этой темы было очень полезным, потому что буквально любое современное веб-приложение использует кнопки. Подозреваю, что изученную технику я буду применять снова и снова.
2. Случайные цитаты
Если вам не хватает мотивации, то вот хороший проект. Создайте простой генератор цитат, заряженный большим количеством мотивирующих высказываний.
Посмотреть в действии — Random Quotes.
Темы JavaScript, которые вы изучите:
- манипуляции с DOM
- объекты
- функции.
Этот проект можно создать разными способами. Но мне было интересно узнать, как это решить с применением объекта — структуры данных, которой незаслуженно нечасто пользуются.
Работая над этим проектом, я также изучил простой алгоритм, отвечающий за генерацию случайной цитаты при клике на кнопку.
3. Карусель изображений
Хотите иметь приложение, которое будет показывать красивые картинки? Прекрасно, займитесь проектом № 3. Создайте приложение, которое позволит вам перемещаться по изображением, нажимая на кнопку. Такая штука называется каруселью изображений или слайдером.
Посмотреть, как это выглядит — Image Carousel.
Темы JavaScript, которые вы изучите:
- манипуляции с DOM
- управляющие структуры
- функции.
Мне было интересно научиться создавать такого рода вещи. Сперва мы используем CSS, чтобы блокировать все изображения. Затем с помощью JavaScript меняем CSS-стили, высвобождая по картинке за раз.
До работы над этим проектом я не был уверен, возможно ли с помощью JS менять стили CSS напрямую, но оказалось, что возможно.
4. Электронные часы
Подумываете купить электронные часы? Лучше сделайте собственные!
Как это выглядит — Digital Clock.
Темы JavaScript, которые вы изучите:
- манипуляции с DOM
- структуры данных
- функции
- объекты
Работая над этим проектом, я узнал, что при помощи JavaScript можно создать встроенный объект и получать из него время, используя встроенные функции. Это прекрасно, потому что позволяет не пользоваться дополнительными библиотеками.
Я также научился создавать функцию setTimeout. Она используется для постоянного вызова другой функции. В этом проекте она была необходима: обеспечивала правильное обновление времени.
5. Калькулятор
Список проектов для начинающих был бы неполным без калькулятора.
Попробовать в действии можно по ссылке — Calculator.
Темы JavaScript, которые вы изучите:
- манипуляции с DOM
- функции.
Я просто поверить не мог, насколько просто было создать такое приложение. Я-то думал, что придется каждое выражение прописывать вручную, создавая сложные функции. Но оказалось, что в JavaScript есть функция eval. которая все это делает за нас.
Мне очень понравилось работать над этим проектом. Я даже стили поменял, чтобы добавить что-то от себя.
6. Список покупок
Проголодались? Пора отправиться за покупками. И список не забудьте.
Готовое приложение для составления списка покупок можно посмотреть по ссылке — Grocery List.
Темы JavaScript, которые вы изучите:
- манипуляции с DOM
- функции
- управляющие структуры
- слушатели событий.
Это приложение выглядит очень круто. А еще это первая программа в нашем списке, в которой используются слушатели событий.
Мы используем слушатель для добавления нового пункта в список покупок, когда пользователь нажимает на кнопку «Добавить», а также для вычеркивания элемента из списка при нажатии на него.
Мне было интересно узнать, как пишется функция, отвечающая за удаление всех элементов внутри div. В данном случае она удаляет все элементы из списка покупок.
7. Калькулятор чаевых
Больше не нужно переглядываться с друзьями, решая, кто заплатит чаевые: их можно разбросать на всех.
Попробовать в действии — Tip Calculator.
Темы JavaScript, которые вы изучите:
- манипуляции с DOM
- функции.
Создать функцию, которая будет высчитывать, сколько чаевых должен заплатить каждый, было довольно просто. Пожалуй, сложнее всего было использовать CSS для создания такого дизайна. Внешний вид приложения вроде бы простой, но воспроизвести его без туториала сложно.
8. Список задач
Давайте уделим какой-то день созданию «to-do»-приложения. (Без него тоже ни один список идей проектов для начинающих не обходится).
Попробовать в действии можно здесь — To-do List.
Темы JavaScript, которые вы изучите:
- манипуляции с DOM
- управляющие структуры
- функции
- структуры данных.
Решение для этого приложения было очень похожим на решение для списка покупок. Я постоянно заглядывал в тот код, когда писал этот. Но кое-что и отличалось: функция для смены цвета фона для каждого элемента в списке. Я подумал, что это будет отличным дополнением к проекту, поскольку делает его гораздо симпатичнее.
В целом, можно сказать, что это был проект-ревью, но все равно хорошая практика.
9. Флеш-карточки (с локальным хранилищем)
Это приложение позволяет создавать флеш-карточки. Написав его, вы сможете избавиться от старых картонных.
Посмотреть в действии — Flashcards.
Темы JavaScript, которые вы изучите:
- манипуляции с DOM
- функции
- управляющие структуры.
Прежде всего, это приложение прекрасно выглядит. Кроме того, оно полезное: можно сэкономить на покупке бумажных карточек.
Это первый проект в нашем списке, где используется flexbox, так что мне, например, поначалу было сложно. Но когда я вник в эту тему, оказалось, что пользоваться flexbox довольно просто, а проект благодаря ему становится куда более динамичным.
В частности, мне особенно понравились опции align-item, flex-wrap и justify-content, поскольку благодаря им мои карточки стали отзывчивыми.
10. Клейкие заметки
Напишите приложение для создания клейких заметок. Да, бумажные можно выбросить.
Попробовать в деле — Sticky Notes.
Темы JavaScript, которые вы изучите:
- манипуляции с DOM
- функции
- слушатели событий
- структуры данных.
Код этого проекта очень похож на код проекта с флеш-карточками, но это не беда, потому что наша цель — практиковаться. Конечно, если бы у меня не было того проекта, мне пришлось бы сверяться с видео, чтобы убедиться, что я правильно все делаю.
Но приложения в любом случае не совершенно одинаковые, так что над отличающимися частями пришлось хорошенько подумать.
Вообще, этот проект хорош еще и тем, что в нем комбинируются все навыки, приобретенные в предыдущих проектах.
11. Секундомер
Давайте создадим собственный секундомер. На старт, внимание, марш!
Пощупать можно здесь — Timer.
Темы JavaScript, которые вы изучите:
- манипуляции с DOM
- функции
- слушатели событий
- объекты.
Неожиданно оказалось, что создать простой секундомер куда сложнее, чем я рассчитывал. Можно подумать, что достаточно будет использовать функцию setInterval из проекта с электронными часами. Но оказалось, что этот подход попросту не работает в данном случае.
Для этого проекта мы создаем переменные, содержащие различную информации о времени. Например, когда был старт, когда стоп, насколько отсчет времени останавливался. Без этих переменных и вычислений с ними наш секундомер попросту не сможет показывать, сколько времени прошло.
12. Математика для детей
Классное приложение для обучения детей простым арифметическим операциям.
Посмотреть можно здесь — Math 4 kids.
Темы JavaScript, которые вы изучите:
- манипуляции с DOM
- слушатели событий
- управляющие структуры
- структуры данных.
На этом проекте я научился переключаться с одной веб-страницы на другую и проигрывать звуковой файл. Оказалось, что обе задачи довольно простые.
Труднее всего было разобраться, как рандомным образом размещать правильный ответ в разных боксах, чтобы каждый раз ответ оказывался в другом месте.
Я старался прийти к решению самостоятельно, но в конечном итоге посмотрел решение в туториале.
13. Unsplash API (генератор картинок)
Вам нужны картинки для вашего нового сайта? Давайте построим генератор картинок.
Посмотреть, как это работает, — Image Generator.
Темы JavaScript, которые вы изучите:
- манипуляции с DOM
- слушатели событий
- управляющие структуры
- promises
- функции
- Fetch.
Работая над этим проектом, я научился делать API-запросы при помощи fetch.
Кстати, до этого я даже не подозревал о существовании Unsplash API. Мне было любопытно узнать, что многие солидные компании интегрируют этот API в свои сайты.
Также круто иметь под рукой генератор картинок — на случай, если возникнет желание сменить обои на рабочем столе.
14. Пишущая машинка
Это приложение выбирает случайную цитату из API и выводит ее на экран с эффектом набора на пишущей машинке.
Посмотреть, как это работает, можно по ссылке — Typewriter.
Темы JavaScript, которые вы изучите:
- манипуляции с DOM
- слушатели событий
- управляющие структуры
- promises
- функции
- Fetch.
Научиться создавать скрипт для эффекта пишущей машинки было круто. Я видел такой эффект в видеоиграх. Теперь я могу использовать его при создании собственных.
Мне было интересно узнать, что для создания крутых анимаций не всегда нужен CSS. В этом проекте для создания эффекта пишущей машинки используется встроенная функция JavaScript.
15. Квадратные карточки (шаблон)
Стильный способ представить данные.
Посмотреть можно здесь — Square Cards.
Темы JavaScript, которые вы изучите:
- слушатели событий
- функции.
Работая над этим проектом, я научился открывать YouTube-видео и статьи на сайтах напрямую из JavaScript. Это стало отличным дополнением к моему набору навыков веб-разработчика.
Перевод статьи «15 Beginner JavaScript Projects to Improve Your Front-End Skills!».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]