Проект: «Место» (в разработке)
Данная работа реализована, для подтверждения и закрепления полученных знаний, в ходе учебного процесса на платформе Яндекс.Практикума. В ней я практиковался в верстке и оформлении элементов различной сложности, а также оттачивал мастерство реализации того или иного функционала на JavaScript. Добавлена плавность при изменении всех интерактивных элементов, а также открытии всплывающих модальных окон. Также, создна файловая структура и осуществлено разнесение всех стилей по методологии БЭМ.
Реализованный функционал на JavaScript:
- Интерактивное редактирование имени и специализации профиля автора блога, во всплывающем Popup-окне
- Возможность переключения на светлую тему (при клике по логотипу)
- Добавление пользователями новых фотографий различных мест с описаниями
- Выборочное удаление ранее добавленных карточек
- Возможность ставить/снимать отметку "Нравится" у понравившихся фотографий (пока без сохранения изменений на сервере)
- Увеличение фотографии по клику на карточке
- Лайв-валидация форм на JS
- Возможность закрытия модальных окон клавишей 'Esc' на клавиатуре
- ключевые функции разнесены по ES6-классам и отдельным файлам, подключаемым при помощи экспорта/импорта в основной код
Используемые навыки и технологии
- HTML 5
- CSS 3
- FlexBox
- JavaScript
- Адаптивная, кроссбраузерная верстка и файловая структура по методологии "БЭМ"
Макеты в Figma
https://www.figma.com/file/2cn9N9jSkmxD84oJik7xL7/JavaScript.-Sprint-4?node-id=0%3A1 https://www.figma.com/file/bjyvbKKJN2naO0ucURl2Z0/JavaScript.-Sprint-5?node-id=0%3A1 https://www.figma.com/file/kRVLKwYG3d1HGLvh7JFWRT/JavaScript.-Sprint-6?node-id=0%3A1 https://www.figma.com/file/PSdQFRHoxXJFs2FH8IXViF/JavaScript.-Sprint-9?node-id=0%3A1
Чеклисты по работе
https://code.s3.yandex.net/web-developer/checklists/new-program/checklist-4/index.html https://code.s3.yandex.net/web-developer/checklists/new-program/checklist-5/index.html https://code.s3.yandex.net/web-developer/checklists/new-program/checklist-6/index.html https://code.s3.yandex.net/web-developer/checklists/new-program/checklist-7/index.html https://code.s3.yandex.net/web-developer/checklists/new-program/checklist-8/index.html https://code.s3.yandex.net/web-developer/checklists-pdf/new-program/checklist-9.pdf