Проект: Место / landing

/ Проектная работа для ЯндексПрактикум (веб)

• Ссылка на сайт

Стек технологий

• HTML (HTML5)
• CSS
• JavaScript (ES6)
• Webpack
• REST API

Технологии реализации

• Технология построения сеток:

• Flexbox
• Grid Layout

• Собрка проекта при помощи webpack
• Babel
• Кроссбраузерность, наличие префиксов (autoprefixer)
• Использование полифилов (core-js)
• Минификация клиентского кода (cssnano)
• БЭМ вёрстка / Организация файлов БЭМ Nested
• Адаптивная вёрстка (с "резиновыми" элементами)
• Работа с макетом в Figma
• Анимация popup-ов при помощи CSS
• Использование синтаксиса ES6 (классы, модули)
• Работа с REST API
• Работа с Promise, fetch, асинхронным кодом, форматом JSON
• Обработка ошибок сервера catch()
• Использование парадигм ООП, реализация скриптов на native JS (без использования фреймворков/библиотек):

• Рендеринг изначальных 6 карточек при помощи JS
• Открытие и закрытие попапов
• Редактирование имени и информации о себе
• Добавление новых карточек пользователем при помощи ссылки с подписью
• Открытие фотографии из карточки на весь экран
• Возможность постаивть лайк карточке
• Вомзожность удаления любой карточки
• Закрытие попапов кликом на оверлей
• Закрытие попапов нажатием на Esc
• Валидация форм при помощи JS Constraint Validation API (HTML5-атрибуты и JS-свойство ValidityState)
• Изменение аватара пользователя при помощи JS
• Cчётчик лайков (JS + данные с сервера)
• Проект подключен к серверу с запросами FETCH

Планы по доработке проекта

• Добавить OpenGraph/meta страницы
• Улучшение UX/UI
• Добавление личного кабинета/регистрации
• Добавить фильрацию карточек по пользователю (показать только карточки owner)

Адаптивная вёрстка

• Полностью заменить px размеры на относительные (%, vw, vh и пр.)
• Все текстовые значения перевести в rem, em (адаптивные шрифты)