https://github.com/elrouss/russian-travel
Учебный проект "Путешествия по России" (изучение основ отзывчиво-адаптивной верстки)
https://github.com/elrouss/russian-travel
bem-methodology css3 elrouss html5 yandex-praktikum
Last synced: 25 days ago
JSON representation
Учебный проект "Путешествия по России" (изучение основ отзывчиво-адаптивной верстки)
- Host: GitHub
- URL: https://github.com/elrouss/russian-travel
- Owner: elrouss
- Created: 2022-08-06T17:23:36.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-22T13:09:08.000Z (over 2 years ago)
- Last Synced: 2024-12-10T20:39:25.270Z (5 months ago)
- Topics: bem-methodology, css3, elrouss, html5, yandex-praktikum
- Language: HTML
- Homepage:
- Size: 7.61 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Проект: "Путешествия по России"
Благодарю за проявленный интерес к [проекту](https://elrouss.github.io/russian-travel/).
## Описание проекта
Данная проектная работа составлена в рамках образовательной программы Яндекс.Практикума. Проект представляет собой создание отзывчиво-адаптивного одностраничного сайта на тему наиболее интересных мест в России для путешествий. Он корректно отображается как на настольном компьютере, так и на портативных устройствах (ноутбук, планшет, смартфон).
## Методология и процесс создания
Работа выполнена в 1 этап на базе языков HTML5 и CSS3. В ней реализованы знания, навыки и техники, изученные за первые 1,5 месяца обучения профессии веб-разработчика (front-end developer).
В общем и целом сверстано 7 блоков [по макету](https://www.figma.com/file/5S2WSbEFL6awjVWJ0NWL8Q/Sprint-3_-Russia-_-desktop-%2B-mobile?node-id=28503%3A0), представленному на популярном онлайн-сервисе "Figma". Были использованы в качестве инструментов как технологии, изученные на первом месяце обучения (флекс-бокс верстка, позиционирование элементов, псевдоэлементы, подключение внешних шрифтов), так и новые, освоенные на третьем курсе программы (грид-раскладка). Наиболее сложной частью проекта, реализация которой заняла довольно много времени, можно считать оптимизацию сайта для корректного отображения информации на экранах устройств шириной от 320 до 1280 пикселей включительно и выше. Для решения поставленной задачи была, с одной стороны, применена гибкая сетка макета в совокупности с относительными единицами измерения (%, vw, vh, fr), а с другой стороны, введены брейкпоинты для экранов наиболее широко распространенных размеров (320, 768, 1024 и 1280 пикселей). Получившийся результат сверен с расширением Pixel Perfect: расхождение с макетом составляет на отдельных участках страницы не более 10 пикселей, что считается допустимой нормой. Код выстроен в соответствии с методологией БЭМ, все файлы сгруппированы исходя из структуры "Nested".
## Усовершенствование кода
Код может быть сделан кроссбраузерным после освоения материала по подключению автопрефиксеров (прописывание ручным способом сейчас представляется нецелесообразным). Кроме того, текст на сайте можно перевести на иностранный язык и сделать общедоступным для англоязычных пользователей (в верхнем правом углу страницы в соответствии с макетом подготовлены иконки для переключения языков).
### Ключевые слова
HTML5, CSS3, адаптивная верстка, Flexbox, Grid Layout, анимации, псевдоэлементы, работа с макетом в "Фигме", Pixel Perfect, БЭМ
### Контактные данные
E-mail: [email protected], [email protected]