frontend-experiments

Frontend Experiments

Этот репозиторий содержит небольшие проекты и эксперименты с фронтенд-разработкой. Здесь можно найти примеры кода, которые помогут лучше понять работу HTML, CSS и JavaScript и препроцессоров.

📂 Проекты

🖼 Slider

Простая реализация слайдера изображений с плавной анимацией.

Функционал:

• Переключение слайдов с помощью кнопок “вперёд” и “назад”.
• Навигация по слайдам через индикаторы (точки).
• Анимация смены изображений.

🛍 Product Card

Адаптивная карточка товара с использованием препроцессора Sass.

Функционал:

• Эффекты при наведении (поднятие карточки, изменение цвета кнопки)
• Адаптивный дизайн (подстраивается под мобильные устройства)
• Использование переменных и миксинов Sass
• Оптимизированная структура стилей

Особенности Sass:

• Переменные для цветов и размеров
• Миксины для медиазапросов
• Вложенные селекторы
• Функции lighten/darken для работы с цветами

🚀 Установка и запуск

1. Склонируйте репозиторий:

  git clone https://github.com/zemskovik/frontend-experiments.git

2. Для проектов с Sass:

Установите Sass и запустите компиляцию.

  npm install -g sass
  sass --watch styles/style.scss:styles/style.css

3. Откройте проект в браузере:

Перейдите в папку с проектом и откройте файл index.html в любом браузере.

4. Запуск на GitHub Pages:

Если вы хотите запустить проект на GitHub Pages, просто следуйте инструкциям в разделе GitHub Pages. Примеры работ будут доступны по следующему адресу: https://zemskovik.github.io/frontend-experiments/nameOfProject/

🛠 Технологии

• HTML – структура страницы.
• CSS/Sass – стилизация и анимации.
• JavaScript – логика работы.

📜 Лицензия

Свободно для изучения и использования.