Перейти к основному содержимому
аватарка с фото автора

Привет! Меня зовут Валера
и это мое портфолио

Я занимаюсь фронтендом и образованием. Верстаю веб-интерфейсы, преподаю верстку и создаю образовательные проекты. Помогаю студентам преодолевать трудности в обучении. Работаю автором курсов, лектором, наставником. Провожу консультации.
Моя цель: улучшать качество веба. Планирую создать свое образовательное учреждение для веб-разработчиков. Кроме того меня интересует всё, что касается дизайна, организации и планирования работы.

Мои проекты

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

Подборка ссылок
  • Подборка качественных и актуальных материалов
  • Поддерживаю и обновляю с 2018 года
  • UI/UX фичи

Путь Фронтендера

frontend roadmap
  • Roadmap по фронтенду
  • Аналог roadmap.sh на русском
  • Ссылки на качественные источники
  • Дополняет мой курс и подборку ссылок

База знаний Web Dev Tips

Веб компонент шапки
  • Сделал, чтобы поделиться знаниями и опытом
  • Перевод на английский
  • Создано на Jekyll, своя тема
  • Улучшенный поиск по сайту

Курс "Основы Фронтенда"

Курс HTML, CSS

Список анимируемых CSS свойств

Список анимируемых CSS свойств
  • Сделал на замену удаленного с MDN
  • Сборка на Node.js и Github Actions
  • Работа с открытым API от W3C
  • Автообновление раз в день, чтобы не нагружать api

Опыт работы

Свои pet проекты и консультации

Веб компонент шапки
  • Провожу частные консультации
  • Веду канал на ютьюбе по веб-разработке
  • Поддерживаю и обновляю свои проекты (Подборка ссылок по фронтенду, Роадмап Фронтендера, База Знаний и другие)
  • CSS Userstyles

HTML Академия

Работа в HTML Академия

Наставник (2019-2021, 2024)

Обязанности: работа на базовом и продвинутом (адаптив, бэм, автоматизация) курсах по верстке, групповая и индивидуальная консультация студентов, проверка верстки проекта, работа через гит

Лектор (2024)

Обязанности: проведение занятий для всего потока с разбором домашнего задания по теме

Университет Иннополис

Работа в Иннополисе

Преподаватель (2022)

Обязанности: проведение ранее подготовленного курса.

Проведение вебинара "Что может фронтендер" для привлечения новичков на курс.

Автор курса (2021-2022)

Обязанности: создание курса и конспекта курса по фронтенду для дальнейшего проведения на 120 ак. часов.

Курс оформлен и сертифицирован по требованиям У2035.

Разработал и провел техническое собеседование кандидатов в наставники.

Федеральный проект "Содействие занятости"

Работа в Содействие занятости

Автор курса (2022)

Обязанности: создание курса и материалов курса по фронтенду для дальнейшего проведения на 120 ак. часов.

Инвольта Образование

Работа в Инвольте

Автор курса (2021-2022)

Обязанности: создание курса и конспекта курса по фронтенду для дальнейшего проведения.

Курс оформлен и сертифицирован по гос. требованиям.

Институт прикладной автоматизации и программирования

Работа в ИПАП

Автор и преподаватель (2021)

Обязанности: создание и проведение вебинара "Что может фронтендер" для привлечения новичков на курс.

SkillFactory

Работа в SkillFactory

Ментор и лектор (2019-2021)

Обязанности: консультация студентов, создание и проведение вебинаров и лекций, проверка работ

Автор курсов (2019-2020)

Обязанности: создание модулей онлайн-курса по фронтенду

Нетология

Работа в Нетологии

Лектор (2019-2021)

Проведение своей лекции "Почему важно уметь искать информацию"

Руководитель курсов (2019)

Обязанности: правки и валидация правок курса, ответ на сложные вопросы студентов, мониторнинг лекций и отзывов.

Код-ревьюер (2019)

Обязанности: проверка заданий по верстке (разные упражнения)

Яндекс Практикум

Работа в Яндекс Практикум

Код-ревьюер (2019-2020)

Обязанности: проверка заданий по верстке (макет по БЭМу)

Лектор (2019)

Обязанности: проведение своей лекции "Эволюция сеток"

Все места работы

Верстка и дизайн

Лэндинг для Activica

Лэндинг для Activica
  • Тестовое задание
  • Адаптив на флексах и гридах
  • БЭМ
  • Перетаскивание и сложный адаптив шапки на JS

Лэндинг для Яндекс.Крауд

Лэндинг для Яндекс.Крауд
  • Тестовое задание
  • Адаптив на флексах и гридах
  • БЭМ
  • Оживление слайдеров по таймеру и живой ленты на JS

Дизайн макет кондитерской

Дизайн макет кондитерской
  • Тестовое задание по ТЗ
  • Макет в фигме со стайлгадом и тремя брейкпоинтами

Лэндинг курса

Лэндинг курса

Лэндинг услуг веб-разработки

Работа в Содействие занятости

Онлайн магазин E-comm

Сайт E-comm
  • Используется на моих курсах
  • Верстка по макету с Фигмы
  • Адаптив
  • БЭМ
  • Оживление корзины и сбор данных на JS
  • Оживление слайдера на JS и стилизация нативных инпутов на CSS

Лэндинг Агентства

Лэндинг Агентства
  • Используется на моих курсах
  • Адаптив от 350 до 1250
  • Pixel Perfect на макс. ширине
  • Разные способы реализации сложного декора (бесконечный фон до края)
  • БЭМ
  • комментарии для студентов в коде

Лэндинг Хостинг-провайдера

Макет Хостинг-провайдера
  • Адаптив
  • Pixel Perfect на макс. ширине
Сайт студии дизайна

Сайт студии дизайна (источник вдохновения)

  • clip-path: polygon для формы флажков с обновлениями
  • Slide-in анимация выплывающих снизу экрана блоков на js и jquery
  • Двойное наложение на изображения filter: grayscale и цветного фона (в оригинале просто картинки)
  • Созданные в фотошопе логотип, иллюстрации и фон

Больше верстки

Код

Лекции и вебинары