Всем привет! В этой статье хочу продолжить рассказывать о своих идеях для pet-проектов. Сейчас пойдет речь о проектах, которые будут полезны, когда вы только начинаете свой путь в IT. Каждый из нас когда-то хотел заниматься чем-то новым, но знал с чего начать.
Эта статья будет полезна тем, кто только встал на путь изучения HTML, CSS и JS.
Вы только начали изучение веб-разработки и не понимаете с чего начать: смотрите видео, читаете статьи, изучаете курсы. Но какой в этом смысл, если вы совсем не практикуете полученные знания? Да, вы изучили что-то на теории, запомнили, но надолго ли это? Как долго вы сможете хранить в себя в голове полученные знания, если никак не подкрепили полученную теорию практикой?
Поэтому давайте закреплять полученные знания на практике, реализуя pet-проекты
Меня зовут Антон. Я занимаюсь front-end разработкой и сейчас я расскажу о pet-проекта для тех, кто только начал изучать web-программирование.
Registration form
Все сайты и веб-приложения рано или поздно приходят к тому, что им необходимо получать какую-либо информацию от пользователя: будь это логин, пароль, адрес или комментарий. Все они сводятся к форме для отправки данных.
В этом pet-проекте я предлагаю реализовать форму регистрации на сайте. Это поможет хорошо разобраться в том, как семантически правильно сверстать форму, какие есть типы полей и научиться задавать стили для элементов на странице.
Основные задачи:
- форма должна иметь приятный UI
- верстка должна быть семантически правильной
- форма должна содержать поля ввода данных с разными типами ( email, password, radio и т.д. )
- добавить обязательный поля и проверку вводимых данных ( extra пункт )
Password Generator
Часто бывает такое, что вы не знаете какой пароль придумать? Пароли, которые вы придумываете одинаковые или слишком простые? Этот pet-проект поможет вам решить эту проблему. Мы напишем приложение, которое будет генерировать пароль в зависимости от необходимой длины и наличия различных символов. Генератор пароля поможет потренировать навыки работы с DOM-деревом в Javascript.
Основные задачи:
- пароль должен содержать заглавные и прописные буквы, спецсимволы и цифры
- для генерации пароля необходимо указать его длину и нажать кнопку "Сгенерировать"
- добавить проверку на пустое или отрицательное значение длины пароля
Для усложнения этой задачи предлагаю добавить возможность самостоятельно выбирать категории знаков, которые будут в пароле (прописные и строчные буквы, цифры, спецсимволы)
Макет страницы
Работа веб-программиста часто сводится к верстке элементов, секций или целых страниц в веб-приложении. Часто это бывает скучно и нудно, но без этого никак. Верстка макета позволит вам улучшить ваши знания HTML и CSS. Также при верстке макета вы можете использовать популярные библиотеки, такие как Bootstrap.
Основные требования к верстке макета:
- верстка должна быть семантически правильной
- необходимо стараться избегать ненужной вложенности при стилизации тегом и ключевого слова important
- верстка должны быть адаптивной и хорошо смотреться на всех разрешениях экрана
- верстка должна быть кроссбраузерной и валидной
Рекомендую для начала выбрать что-то простое для верстки, а потом постепенно повышать уровень сложности макета.
Ресурсы, которые могут быть вам полезны