Благодарю за проявленный интерес к проекту.
Данная проектная работа составлена в рамках образовательной программы Яндекс.Практикума. Проект представляет собой создание отзывчиво-адаптивного одностраничного сайта на тему наиболее интересных мест в России для путешествий. Он корректно отображается как на настольном компьютере, так и на портативных устройствах (ноутбук, планшет, смартфон).
Работа выполнена в 1 этап на базе языков HTML5 и CSS3. В ней реализованы знания, навыки и техники, изученные за первые 1,5 месяца обучения профессии веб-разработчика (front-end developer).
В общем и целом сверстано 7 блоков по макету, представленному на популярном онлайн-сервисе "Figma". Были использованы в качестве инструментов как технологии, изученные на первом месяце обучения (флекс-бокс верстка, позиционирование элементов, псевдоэлементы, подключение внешних шрифтов), так и новые, освоенные на третьем курсе программы (грид-раскладка). Наиболее сложной частью проекта, реализация которой заняла довольно много времени, можно считать оптимизацию сайта для корректного отображения информации на экранах устройств шириной от 320 до 1280 пикселей включительно и выше. Для решения поставленной задачи была, с одной стороны, применена гибкая сетка макета в совокупности с относительными единицами измерения (%, vw, vh, fr), а с другой стороны, введены брейкпоинты для экранов наиболее широко распространенных размеров (320, 768, 1024 и 1280 пикселей). Получившийся результат сверен с расширением Pixel Perfect: расхождение с макетом составляет на отдельных участках страницы не более 10 пикселей, что считается допустимой нормой. Код выстроен в соответствии с методологией БЭМ, все файлы сгруппированы исходя из структуры "Nested".
Код может быть сделан кроссбраузерным после освоения материала по подключению автопрефиксеров (прописывание ручным способом сейчас представляется нецелесообразным). Кроме того, текст на сайте можно перевести на иностранный язык и сделать общедоступным для англоязычных пользователей (в верхнем правом углу страницы в соответствии с макетом подготовлены иконки для переключения языков).
HTML5, CSS3, адаптивная верстка, Flexbox, Grid Layout, анимации, псевдоэлементы, работа с макетом в "Фигме", Pixel Perfect, БЭМ