Верстка сайта
10 000 UAHНеобходимо: Верстка адаптивного сайта Pixel Perfect на основе макета, разработанного в Figma. (ссылка на макет внизу)
Цель: Создание адаптивного сайта https://zoodom.ua и валидного W3C (будет проверяться), корректно отображающегося на мобильных, планшетных и десктопных устройствах, соответствующего современным требованиям UX/UI и требованиям Google к мобильной оптимизации в 2024 году.
Технологии: Использование HTML5, CSS3, JavaScript (ES6+), SCSS/LESS (по необходимости). Верстка должна быть кроссбраузерной (Chrome, Safari, Firefox, Edge) и адаптивной для всех основных разрешений экранов.
1. Разрешения экранов и брейкпоинты
Для обеспечения корректного отображения на всех устройствах, необходимо настроить следующие брейкпоинты (Промежуточные расширения должны отображать блоки без сдвигов и без горизонтальных скролов):
- Мобильные устройства:
- Минимальное разрешение: 320px (например, iPhone SE, старые смартфоны).
- Основное мобильное разрешение: 360px – 414px (например, iPhone X, Galaxy S10).
- Планшеты:
- Минимальное разрешение: 768px (например, iPad Mini).
- Планшеты (портрет): 768px – 1024px (например, iPad).
- Планшеты (альбом): 1024px – 1366px (например, iPad Pro).
- Десктопы:
- Минимальное разрешение: 1280px.
- Рекомендуемые разрешения для десктопов: 1440px и выше
Для каждого брейкпоинта должны быть заданы соответствующие стили, обеспечивающие оптимальное отображение контента.
2. Технические требования к верстке
- Сетка: Использование сеточной (CSS Grid) системы для обеспечения адаптивности макета (без конструкторов. Вариант использования Flexbox возможен при обосновании).
- Анимации и переходы: Применение CSS-анимаций должно быть плавным и минимальным, с учётом производительности на мобильных устройствах. (пожелания по анимации в прикрепленном файле)
Где есть слайдеры- автоматичекое прокрутка элементов каждые 3 секунды.
- Оптимизация изображений: Изображения должны быть адаптированы под разные разрешения с использованием форматов WebP и сжатия без потери качества. Также должны быть реализованы механизмы для lazy loading изображений.
- Иконки и графика: Использовать SVG для иконок и графики, что обеспечит высокое качество на всех экранах.
- Типографика: Размеры шрифтов должны динамически изменяться в зависимости от разрешения экрана.
- Медиа-запросы: Все медиа-запросы должны быть четко структурированы и поддерживать основные брейкпоинты.
3. Проверка и тестирование
- Тестирование верстки должно проводиться на реальных устройствах, а также в эмуляторах браузеров для подтверждения корректной работы на всех поддерживаемых разрешениях и операционных системах (iOS, Android).
Приоритетные для тестов размеры экрана:
1. 393x873:
- Xiaomi Mi 10T, Mi 10T Pro
- Xiaomi Redmi Note 9 Pro
- Xiaomi Redmi Note 9
2. 390x844:
- iPhone 14
- iPhone 13 и 13 Pro
- iPhone 12 и 12 Pro
3. 360x800:
- Samsung Galaxy S20
- Honor 7X
- Huawei P40 Lite
4. 414x896:
- iPhone 11 Pro Max
- iPhone 11
- iPhone Xr
5. 430x932:
- iPhone 14 Pro Max
6. 393x851:
- Google Pixel 5
- Xiaomi Mi 10 Pro
- Xiaomi Redmi Note 8 Pro
7. 412x915:
- OnePlus 7T
Приоритетный браузера для тестов:
Chrome и Safari
- Обязательная проверка вёрстки на переполнение контентом. Вёрстка не должна ломается:
- при добавлении в элементы большего количества текста;
- при использовании картинок с неподходящими размерами;
- текст не должен выпадать из объектов;
- переполнение контентными блоками не приводит к нарушению сетки.
- Проверка через Google Mobile-Friendly Test и инструмент PageSpeed Insights для оценки производительности и соответствия мобильным стандартам.
4.СЕО.
-Отдельно СЕО будет предоставлена информация по метаданным на страницах.
5. Дизайн.
- Дизайн создан с перспективой на развитие проекта. Поэтому будут даны дополнительные пояснения какие блоки нет необходимости верстать на текущий момент.
- При необходимости есть возможно внесение правок в дизайн (исполнитель по дизайну на связи).
6. Заключение
Верстка должна быть выполнена с учётом всех вышеуказанных параметров (но не ограничиваясь ими для достижения лучших результатов), включая требования адаптивности и оптимизации для мобильных устройств.
По окончанию работы по верстке, предоставляется период для тестирования - одна неделя с момента получения последнего замечания.
7. Функционал. Будет предоставлен предварительный документ описывающий функционал блоков и элементов. Готов обсуждать непонятные функциональные элементы в дизайне, как предварительно так и в процессе сотрудничества.
Макет для верстки: https://www.figma.com/design/RPrjahTERmhbN3g9uKL6Eo/%D0%97%D0%BE%D0%BE%D0%B4%D1%96%D0%BC_website?node-id=0-1&node-type=canvas
Если есть дополнительные вопросы, или требуется уточнение по конкретным разделам, готов ответить.
Приложения 1
Отзыв заказчика о сотрудничестве с Игорем К.
Верстка сайтаОтличная работа! Подрядчик подошел к задаче с высоким уровнем профессионализма, особенно в вопросах технической оптимизации. Анимации выполнены в полном соответствии с нашими примерами и пожеланиями, придавая сайту динамичность и современный вид. Вся работа выполнена аккуратно. Несмотря на то, что по ходу работы некоторые моменты пришлось адаптировать с учетом реальных условий применения дизайна на различных устройствах, изменения вносились оперативно. Спасибо за внимание к деталям и ответственный подход к проекту
Отзыв фрилансера о сотрудничестве с Русланом D.
Верстка сайтаОтличный заказчик. Четкая постановка задачи. Всегда на связи. Рекомендую с сотрудничеству
-
548 2 0 Приветствую, заинтересован в вашем проекте.
Буду рад вложить свой опыт и усилия для его успешной реализации.
С нетерпением жду вашего решения.
-
445 1 1 👋 Добрый день!
💫 Недавно работал с похожей задачей, поэтому выполнить Вашу задачу быстро и качественно.
⏰ Готов приступить к работе как можно быстрее.
💰 Стоимость: 4000 UAH.
⏱️ Срок выполнения: 2 дня.
🌟 Работаю без предоплаты.
… 🎨 Выполненные проекты:
🔗 https://www.voxloud.com/it/en
🔗 https://www.thehomehub.net
🔗 https://www.elmont.com.ua
🔗 https://go.voxloud.com/activate_now/signup
🔗 https://vlad-yermolayev.github.io/specteh/dist
📩 Пишите, обговорим детальней.
-
457 2 1 Добрый день. Мой сборщик Gulp + webpack полностью выполняет все ваши требования и я готов приступить к выполнению работы над проектом. Учитывая что у вас есть некие блоки в которых нет необходимости верстать их сейчас, цена которую назначил она со скидкой 10%. Так же у вас есть возможность отказаться от анимаций и это тоже будет скидка в цене на 5%. В последней работе я самостоятельно делал дизайн, потому правки по дизайну для меня это не проблема.
-
1748 25 0 Привет, Руслан. Долгое время занимался разработкой подобных сайтов в коммерческих компаниях. Отлично понимаю ваше ТЗ и пожелания по выполнению.
С учетом всех возможных правок и нюансов:
Срок выполнения: 10 дней.
Стоимость: 12000 UAH
Мой сайт: https://dmytro-kuzan.vercel.app/
-
362 Готов сделать верстку согласно всем стандартам, есть знания по СЕО, оптимизирую HTML код не добавляя лишних элементов. Опыт в верстке более 20 лет
По срокам от 2-5 дней
-
1988 22 0 Здравствуйте!
Буду рад сотрудничеству. Всегда на связи. Обращайтесь.
Примеры работ https://web.khorol.com.ua
-
239 Здравствуйте!
Меня заинтересовало ваше предложение по разработке.
Цена и сроки могут быть скорректированы в процессе общения, уточнений и разработки сайта.
Буду рада приложить усилия и свой опыт для успешной реализации.
Портфолио:Freelancehunt
…
Жду вашего решения!
-
2216 24 0 Привет, Руслан!!!
Я готов быстро и качественно сделать верстку вашего сайта!
Результатом будет чистый HTML/CSS/JS код без использования сторонних громоздких библиотек. Верстаю с полной адаптацией и кроссбраузерностью, соблюдая все современные технологии, что позволяет моим проектам достигать высокой скорости загрузки согласно Google Page Speed, что положительно влияет на SEO-продвижение.
Готов обсудить задание в личной переписке.
Мои последние работы:
… https://s-iteost.vercel.app/index.html - лендинг
https://sanyok185.github.io/Top-10/home.html - многостраничный
https://sanyok185.github.io/PLUGIT/main.html - многостраничный
https://sanyok185.github.io/Property/home.html - многостраничный
https://sanyok185.github.io/Proyavlennya/ - лендинг
https://sanyok185.github.io/StanDesk/ - лендинг
https://sanyok185.github.io/Bruden/home.html - магазин
https://sanyok185.github.io/VPNit/home.html - многостраничный
-
343 Поздравляю, Виталий.
Более 9 лет опыта разработки,
html, css, js, sass, scss, pug, webback, адаптивный дизайн и многое другое
страница optimal_ai -
https://boyko1396.github.io/optimal_ai/dist/index.htmlц
цена 5500, время выполнения 4 дняц
https://github.com/boyko1396 - мой github:)
-
2656 40 0 Привет, сделаю, пишите, буду рада сотрудничеству
Привет, сделаю, пишите, буду рада сотрудничеству
-
8012 97 0 Здравствуйте. Могу сверстать адаптивный сайт по шаблону в фигме.
Для верстки буду использовать html, css и js а так же методологию БЕМ.
Портфолио:Freelancehunt
Пишите, буду рад сотрудничать с Вами.
-
448 4 0 Здравствуйте!
Я ознакомился с требованиями к проекту и анимациями, которые нужно реализовать на сайте. Учитывая количество и сложность анимаций, таких как скроллинг блоков, движение пиктограмм, плавные изменения цвета и анимации элементов при наведении.
Ориентировочный срок выполнения всех работ — 10-14 дней, включая адаптацию анимаций для различных устройств и тестирование.
Если вас устраивают условия, буду рад обсудить детали и начать работу.
С уважением,
… Вячеслав
-
531 3 0 Добрый день, Руслан!
Буду рад сотрудничать с вами и выполнить заказ в кратчайшие сроки. В своей работе я уделяю особое внимание надежности кода, качеству созданного сайта и удобству пользователя. Мои сайты кроссбраузерные, адаптивные и имеют анимацию. Они соответствуют макету (perfeсt pixel). Готов обсудить приемлемую для вас цену. Готов немедленно взяться за работу.
Вот ссылка на мое портфолио:
Freelancehunt
Причины работать со мной:
- Чистый и минималистичный код для вашего легкого понимания.
- Всегда готов обсудить ваше видение готового продукта.
… - Легкое общение.
- Глубокий интерес к пониманию главной идеи своего видения.
Я могу помочь вам с:
- HTML5 и CSS3.
- JavaScript.
- Методология БЭМ.
- Совместимость с различными браузерами (Firefox, Chrome, Opera, Safari).
- Если нужно, то сначала мобильный.
- Современный и адаптивный дизайн.
- Сложная CSS/JS анимация.
- Эффект параллакса.
- Работа с макетами Figma.
- Pixel Perfect Conversion.
- Реализация в светлой и темной теме.
- Автоматическое переключение темы сайта при переключении темы операционной системы.
- Переключайтесь между светлой и темной темами с помощью переключателя.
С уважением,
Богдан Готра
-
985 3 0 Здравствуйте.
Нужна исключительно верстка или интеграция с определенной ecommerce платформой?
Готов обсудить детали и начать работу! :)
Хорошего дня!
-
155 1 0 Добрый день.
Выполню верстку быстро и качественно.
__________________________________
-
Доброго вечора, надайте інформацію, під яку систему готується верстка?
Питання до потенційних виконавців, ви дійсно не цінуєте свою працю і свій труд з пропозиціями 5-14к?
-
Я что то пропустил? Почему Flex проигрывает уже Гридам? Я понимаю если надо делать mansory сетку это без вариантов Грид. Но почему обычный Flex будет хуже 3 для 3х колонок, чем Грид? Очень заинтересовало, буду благодарен за пояснения
-
Актуальные фриланс-проекты в категории HTML и CSS верстка
Адаптивная вёрстка сайта с анимациейНужно сверстать сайт по готовому дизайну из Figma. Админка сайта - Laravel - viar-art.pl Сайт должен быть современным, адаптивным, быстрым и удобным для пользователя. Вёрстка должна точно соответствовать макету, корректно отображаться на мобильных устройствах, планшетах и… HTML и CSS верстка, Создание сайта под ключ ∙ 8 часов 50 минут назад ∙ 50 ставок |
Обновить кастомный фронтенд на Prestashop
10 000 UAH
Необходимо доработать и обновить кастомную тему интернет-магазина на PrestaShop. Дизайн уже существует, но были внесены правки (выравнивание элементов, UI-адаптации), которые нужно аккуратно интегрировать и довести до стабильного вида. Задачи: Обновление и оптимизация кастомной… HTML и CSS верстка ∙ 14 часов 11 минут назад ∙ 27 ставок |
Вебфлоу разработчик для заполнения страниц портфолио на сайтеСайт разработан кастомно на Webflow для строительной компании, нужно быстро заполнить страницы проектов по одному шаблону (заменить картинки и тексты) Для 2 языков Количество - 6 штук Готовы начинать как можно скорее, спасибо! HTML и CSS верстка, Веб-программирование ∙ 2 дня 8 часов назад ∙ 50 ставок |
Верстка та посадка на WordPress сайту будівельної компанії (Premium-сегмент) з акцентом на SEOОписание проекта: Ищем опытного WordPress-разработчика для верстки и посадки готового дизайн-макета из Figma на CMS WordPress. Важный контекст проекта: Это не разработка сайта с нуля. Компания имеет действующий сайт, мы обновляем структуру и дизайн. Нам необходимо реализовать… HTML и CSS верстка, Веб-программирование ∙ 2 дня 13 часов назад ∙ 78 ставок |
Перенос сайта с OpenCart на платформу ХорошопДобрый день. Есть сайт на OpenCart, интернет-магазин. Нужно перенести структуру сайта на платформу Хорошоп, подобрать дизайн для нового сайта и сделать его полноценно работающим. HTML и CSS верстка, Веб-программирование ∙ 3 дня 10 часов назад ∙ 43 ставки |