https://github.com/flavvvour/yp-project
Yandex Practicum Landing
https://github.com/flavvvour/yp-project
css html yandex-praktikum
Last synced: 2 months ago
JSON representation
Yandex Practicum Landing
- Host: GitHub
- URL: https://github.com/flavvvour/yp-project
- Owner: flavvvour
- Created: 2024-10-06T19:57:13.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-10-17T17:07:00.000Z (6 months ago)
- Last Synced: 2025-01-01T06:13:02.947Z (4 months ago)
- Topics: css, html, yandex-praktikum
- Language: HTML
- Homepage: https://flavvvour.github.io/YP-project/
- Size: 1.29 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# Научиться учиться
## Описание проекта
Проект создан в рамках обучения на курсе **Frontend-разработчик**.
Его цель — продемонстрировать современные и эффективные подходы к обучению, которые могут улучшить процесс самообразования. На сайте представлены техники и упражнения, которые делают процесс обучения более эффективным и увлекательным.
### Основная функциональность:
- Интерактивные блоки с полезной информацией о техниках обучения.
- Анимация бесконечного вращения элементов на главной странице.
- Ссылки на дополнительные материалы по теме.
### Используемые технологии:
- **HTML5**: для структурирования контента и семантической верстки.
- **CSS3**: для стилизации, создания адаптивного интерфейса и анимаций.
- **BEM (Block Element Modifier)**: методология для организации структуры CSS-классов.
- **Flexbox**: для создания гибкой и адаптивной раскладки элементов.
- **Анимации на CSS**: для плавного вращения элементов с использованием `@keyframes`.
## Планы по доработке
- **Оптимизация анимаций**: планируется улучшить производительность анимаций.
- **Расширение контента**: добавить больше техник и советов по обучению, а также интерактивные элементы.
- **Реализация темной темы**: добавить возможность переключения между светлой и темной темами для улучшения пользовательского опыта.
- **SEO-оптимизация**: улучшить семантику HTML-кода, используя теги `header`, `section`, `article`, и добавить мета-теги для повышения видимости в поисковых системах.
- **Рефакторинг CSS**: улучшить структуру стилей с использованием переменных CSS и внедрением SCSS для облегчения работы с крупными стилевыми файлами.
## Запуск проекта
1. Склонируйте репозиторий:
```bash
git clone https://github.com/flavvvour/YP-project.git
2. Откройте папку проекта в вашем редакторе кода (например, Visual Studio Code).
3. Установите расширение Live Server (если оно ещё не установлено).
4. Запустите проект, кликнув правой кнопкой мыши по файлу `index.html` и выбрав ``Open with Live Server``. Страница откроется в браузере автоматически.