Самый быстрый способ для вас стать хорошим веб-разработчиком, – это практиковать. Отличный способ практики – это создание столько же новичков, как вы можете. Это потому, что каждый проект представляет уникальную проблему и решение. Поэтому чем больше проектов, которые вы решаете, тем больше знаний вы получите. Подумайте о каждом завершенном проекте как медаль, которую вы заработали.
В этом списке проблем JavaScript я включил некоторые из моих любимых проектов для начинающих. На самом деле, это те же проекты, которые я построил, когда я был первым изучением JavaScript. Надеюсь, вы можете узнать у них, как я. Если вы застряли, не волнуйтесь, я включал видеоурок рядом с каждым проектом, который показывает, как решить его шаг за шагом.
Перед просмотром решений я призываю вас попробовать их самостоятельно. Это ключ к тому, чтобы стать хорошим разработчиком. В программировании нет никаких ярлыков, поэтому, если вы не увидите работу, вы не увидите улучшения, независимо от того, сколько учебных пособий вы смотрите. Если ваше чувство перегружено, сделайте перерыв и расслабиться, это происходит с лучшими из нас. Помните, что требуется даже ваш любимый разработчик YouTube много времени и практики, чтобы начать освоить эти вещи.
Я также оставил «попробовать его, прежде чем построить его» раздел рядом с каждым проектом. Каждый проект размещен бесплатно с страницами GitHub, поэтому после того, как вы завершите свой первый проект, узнайте, как провести его так же, читая Это Супер легко следовать руководству.
Наконец, я сделал улучшения каждому проекту, поскольку создание учебников, поэтому проект в миниатюре (последняя версия) может быть немного отличным, чем тот, который в видео (большинство из них одинаковы). Если вы хотите, чтобы последние версии проектов проверим мой Github Отказ
1. Шестигранные цвета
Что вы построете Сделайте веб немного красивее с помощью этого простого приложения Hex Colors. Это приложение изменяет цвет фона и отображает шестнадцатеричный код цвета на экране на экране на щелчке кнопки.
Попробуйте перед собой, прежде чем построить его (размещено с страницами GitHub) Приложение Hex Colors.
Используемый JavaScript
- DOM Manipulation
- Структуры данных
- Функции
На вынос и мысли Создание Этот проект научил меня использовать OnClick, который используется для прикрепления функции к кнопке. В этом случае эта функция генерировала случайного шестигранного цвета и сделать его цвет фона. Обучение Это было очень полезно, так как почти каждое современное веб-приложение использует кнопки. У меня есть ощущение, что это техника, которую я буду использовать снова и снова.
2. Случайные цитаты
Что вы построете Если вы нуждаетесь в небольшой мотивации, я охватил вас. В этом проекте мы построим генератор случайных цитатов, оснащенные множеством мотивационных цитатов.
Попробуйте перед собой, прежде чем построить его (размещенные с страницами GitHub) Случайные цитаты приложения
Используемый JavaScript
- DOM Manipulation
- Объекты
- Функции
На вынос и мысли Это приложение может быть создано различными способами, но было интересно видеть, что он решается с использованием объекта, часто при использовании структуры данных. Я также изучил простой алгоритм, который отвечает за создание случайной цитаты каждый раз, когда пользователь нажимает на кнопку.
3. Изображение карусели
Что вы построете Нужно приложение для отображения всех ваших крутых картинок? Удивительно, в проекте номер три мы создадим приложение, которое позволяет нам навигаться изображения на кнопке кнопки. В программировании мы называем эти фотографии карусели или слайдеров изображений.
Попробуйте перед собой, прежде чем построить его (размещенные с страницами GitHub) Изображение Carousel Application
Используемый JavaScript
- DOM Manipulation
- Контрольные структуры
- Функции
На вынос и мысли Было интересно узнать, как этот вид проекта был реализован. Сначала мы использовали CSS, чтобы заблокировать все изображения с экрана. Затем мы использовали JavaScript для манипулирования стилем CSS в раскрытие одного изображения одновременно. Перед выполнением этого проекта я был не уверен, было ли возможность изменить стили CSS непосредственно с JavaScript, оказывается, что это так.
4. Цифровые часы
Что вы построете Думая о покупке цифровых часов? Не больше, в этом проекте вы узнаете, как создавать свои собственные.
Попробуйте перед собой, прежде чем построить его (размещенные с страницами GitHub) Нанесение цифровых часов
Используемый JavaScript
- DOM Manipulation
- Структуры данных
- Функции
- Объекты
На вынос и мысли В создании этого проекта я узнал, что с JavaScript мы можем создать встроенный объект и получить время от него, используя встроенные функции. Это здорово, потому что это устраняет необходимость включения дополнительной библиотеки, например, в Python или C ++. Я также узнал о встроенном функции под названием Setimeate, который используется для вызова другой функции снова и снова. Для этого проекта необходимо было использовать SettimeOut, чтобы гарантировать, что наше время будет обновлено правильно.
5. Калькулятор
Что вы построете Калькулятор. Список проекта «Начинающий JavaScript» не будет завершен без него, и мы не делаем никаких исключений здесь.
Попробуйте перед собой, прежде чем построить его (размещенные с страницами GitHub) Приложение калькулятора
Используемый JavaScript
- DOM Manipulation
- Функции
На вынос и мысли Это было почти невероятно, чтобы увидеть, насколько это было просто построить. Перед созданием этого я думал, что каждое выражение необходимо решить вручную с какой-то сложной функцией. Оказывается, есть встроенная функция JavaScript с именем Eval, которая заботится об этом для нас. Мне очень понравилось создать это приложение и даже изменило стиль его, чтобы дать ему свой собственный аромат.
6. Продуктовый список
Что вы построете Голодный? Поехали в продуктовый магазин с этим приложением в списке продуктов.
Попробуйте перед собой, прежде чем построить его (размещено с страницами GitHub) Заявка на продуктовый список
Используемый JavaScript
- DOM Manipulation
- Функции
- Контрольные структуры
- Слушатели событий
На вынос и мысли Это действительно крутое приложение И это первый проект в списке, где мы использовали слушателей событий. Действительно, мы использовали слушатель события, чтобы добавить новый элемент в список продуктов, когда пользователь нажал на клавишу «Ввод», а другой, чтобы поцарапать элемент вне списка, когда они нажали на этот конкретный элемент. Было бы полезно узнать, как была написана функция, которая отвечает за удаление всех элементов в DIV. В этом случае эта функция удалила все элементы в нашем списке продуктов.
7. Калькулятор наконечника
Что вы построете Больше не оглядываясь за столом, чтобы увидеть, кто заботится о кончике с этим калькулятором кончика.
Попробуйте перед собой, прежде чем построить его (размещенные с страницами GitHub) Применение калькулятора Совет
Используемый JavaScript
- DOM Manipulation
- Функции
На вынос и мысли Разработка функции, которая определяет сумму, которую каждый человек будет скорее, был довольно легким. Возможно, наибольшая проблема здесь использовала CSS, чтобы имитировать дизайн приложения. Это похоже на довольно простой дизайн, но на самом деле это немного сложно делать, не просмотрев учебник первым.
8. Список дел
Что вы построете Давайте максимально сделаем большую часть нашего дня с этим потрясающим приложением по списку дел.
Попробуйте перед собой, прежде чем построить его (размещенные с страницами GitHub) Список объявлений
Используемый JavaScript
- DOM Manipulation
- Функции
- Контрольные структуры
- Структуры данных
- Функции
На вынос и мысли Решение этого было очень похоже на приложение списка продуктов. Я нашел, оглядываясь назад на код для этого, чтобы помочь мне решить этот. Однако одна вещь была разначена, была функцией изменить цвет фона каждого элемента в списке. Я думал, что это было очень хорошее дополнение к проекту, так как он заставляет его выглядеть намного приятнее. В целом, я бы сказал, что это был больше проекта обзора Но это все еще была отличная практика, тем не менее.
9. Flashcards (с локальным хранением)
Что вы построете Это приложение, которое позволяет вам создавать карточки, чтобы убрать эти бумажные карточки, потому что в городе есть новый босс.
Попробуйте перед собой, прежде чем построить его (размещенные с страницами GitHub) Flashcards Применение
Используемый JavaScript
- DOM Manipulation
- Функции
- Контрольные структуры
На вынос и мысли Во-первых, что отличное заявление. Это может помочь студентам учиться и держать их от тратить деньги на бумажные карточки. Это первый проект в списке, где мы использовали Flexbox, чтобы сначала было мало сложно. Однажды я получил это, однако, это на самом деле было очень легко использовать, и он сделал проект намного более динамичным. В частности, мне действительно наслаждались параметрами Align-Pood, Flex-Wrap и оправдывающие параметры контента, потому что они сделали адаптивные карточки.
10. Заметки
Что вы построете Давайте построить приложение для липких нот. Да, вы можете бросить все эти бумажные липкие заметки сейчас.
Попробуйте перед собой, прежде чем построить его (размещенные с страницами GitHub) Применение липких нот
Используемый JavaScript
- DOM Manipulation
- Функции
- Слушатели событий
- Структуры данных
На вынос и мысли Кодекс для создания этого проекта был очень похож на проект FlashCards, но это не проблема, потому что практика была необходима. Действительно, если бы у меня не было кода для этого проекта, чтобы снова упасть, я бы снова пришлось посмотреть видеофокартовое видео, чтобы проверить, правильно ли я делал это правильно. Конечно, у этого проекта есть некоторые уникальные функции, чтобы он был сложной выяснением того, как кодировать эти части. В целом, я многому научился из этого проекта, поскольку его построены с использованием комбинации всего, что мы узнали до сих пор.
11. Таймер
Что вы построете Давайте построим таймер. На старт, внимание, марш!
Попробуйте перед собой, прежде чем построить его (размещенные с страницами GitHub) Приложение таймера
Используемый JavaScript
- DOM Manipulation
- Функции
- Слушатели событий
- Объекты
На вынос и мысли Оказывается, что строительство простого таймера сложнее, чем кажется. Можно подумать, что использование той же функции Setinterval из проекта цифровых часов будет достаточным для отображения правильного времени. Оказывается, что техника просто не работает для этого. Для этого проекта мы создаем переменные, чтобы удерживать разную информацию о времени, например, когда началось время, когда время остановлено, и сколько времени было остановлено. Без этих переменных и расчетов мы выполняем с ними, наши цифровые часы просто не смогут правильно отобразить время, прошедшее время.
12. Математика 4 детей
Что вы построете Классное приложение, которое обучает детей основных арифметических операциях.
Попробуйте перед собой, прежде чем построить его (размещено с страницами GitHub) Математика 4 Детская приложение
Используемый JavaScript
- DOM Manipulation
- Слушатели событий
- Контрольные структуры
- Структуры данных
На вынос и мысли В этом проекте я узнал, как переключиться с одной веб-страницы на другую и как воспроизвести звуковой файл. Оказывается, обе эти задачи довольно просты. Самая сложная часть была выясна, как случайным образом разместить ответы в разных коробках, чтобы правильный ответ не всегда в том же месте. Я старался изо всех сил, чтобы понять это самостоятельно, но и заставила наблюдать за руководством для решения.
13. Unsplash API (генератор изображения)
Что вы построете Нужны некоторые изображения для вашего нового сайта? Давайте построим генератор изображения.
Попробуйте перед собой, прежде чем построить его (размещенные с страницами GitHub) Приложение генератора изображения
Используемый JavaScript
- DOM Manipulation
- Слушатели событий
- Контрольные структуры
- Обещания
- Функции
- Принести
На вынос и мысли Заполнение этого проекта научило меня, как использовать встроенный JavaScript в запрашивании API. Перед созданием этого проекта я был совершенно не знал, что Essplash API существует. Было интересно узнать, что многие созданные компании интегрируют эту API на свой веб-сайт. Также приятно иметь генератор изображения, когда мне нужны новые обои на моем рабочем столе.
14. Цитаты API (пишущая машинка)
Что вы построете Приложение, которое выбирает случайную цитату из API и отображает его на экране с помощью эффекта пишущей машинки.
Попробуйте перед собой, прежде чем построить его (размещено с страницами GitHub) Пишущая машинка
Используемый JavaScript
- DOM Manipulation
- Слушатели событий
- Контрольные структуры
- Обещания
- Функции
- Принести
На вынос и мысли Обучение того, как написать сценарий пишущего машинка был потрясающим. Я на самом деле видел этот эффект, реализованный в видеоиграх. Теперь я могу использовать его, когда я строю свои собственные игры. Что касается кода, было интересно узнать, что нам не всегда нужно CSS, чтобы сделать прохладные анимации. В этом проекте мы использовали встроенную функцию подстроки JavaScript для создания эффекта пишущей машинки.
15. Квадратные карты (шаблон)
Что вы построете Стильный способ отображения данных или просто квадратная карта.
Попробуйте перед собой, прежде чем построить его (размещено с страницами GitHub) Применение квадратных карт
Используемый JavaScript
- Слушатели событий
- Функции
На вынос и мысли В этом проекте я узнал, как открыть видео YouTube и статьи веб-страницы прямо из JavaScript. Это было отличное дополнение к арсеналу инструментов, которые я сейчас обладаю (благодаря 15 новичкам проекта!) Как веб-разработчик.
Эти 15 проектов для начинающих являются частью списка 25. Если вы хотите увидеть остальные, проверьте мой jsprospect Веб-сайт.
Оригинал: “https://dev.to/codefoxx/15-beginner-javascript-projects-to-improve-your-front-end-skills-5bcj”