Верстка сайту
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
Відгук замовника про співпрацю з Игорем К.
Верстка сайтуЧудова робота! Підрядник підійшов до завдання з високим рівнем професіоналізму, особливо в питаннях технічної оптимізації. Анімації виконані в повному відповідності з нашими прикладами та побажаннями, надаючи сайту динамічність і сучасний вигляд. Вся робота виконана акуратно. Незважаючи на те, що в процесі роботи деякі моменти довелося адаптувати з урахуванням реальних умов застосування дизайну на різних пристроях, зміни вносилися оперативно. Дякую за увагу до деталей і відповідальний підхід до проекту
-
14 днів10 000 UAH
548 2 0 14 днів10 000 UAH
Вітаю, зацікавлений у вашому проекті.
Буду радий вкласти свій досвід і зусилля для його успішної реалізації.
З нетерпінням чекаю вашого рішення.
-
2 дні4000 UAH
445 1 1 2 дні4000 UAH
👋 Доброго дня!
💫 Нещодавно працював з подібним завданням, тому виконати Ваше завдання швидко і якісно.
⏰ Готовий приступити до роботи якнайшвидше.
💰 Вартість: 4000 грн.
⏱️ Термін виконання: 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
📩 Пишіть, обговоримо детальніше.
-
3 дні8000 UAH
457 2 1 3 дні8000 UAH
Доброго дня. Мій збирач Gulp + webpack повністю виконує всі ваші вимоги і я готовий розпочати виконання роботи над проектом. Враховуючи, що у вас є деякі блоки, в яких немає необхідності верстати їх зараз, ціна, яку я призначив, зі знижкою 10%. Також у вас є можливість відмовитися від анімацій, і це також буде знижка в ціні на 5%. У останній роботі я самостійно робив дизайн, тому правки по дизайну для мене це не проблема.
-
10 днів12 000 UAH
1773 25 0 10 днів12 000 UAH
Вітаю, Руслан. Займався довгий час розробкою подібних сайтів в коммерційних компаніях. Чудово розумію ваше ТЗ і побажання щодо виконання.
З урахуванням всіх можливих правок і ньюансів:
Термін виконання: 10 днів.
Вартість: 12000 UAH
Мій сайт: https://dmytro-kuzan.vercel.app/
-
5 днів5000 UAH
362 5 днів5000 UAH
Готовий зробити верстку відповідно до всіх стандартів, є знання з SEO, оптимізую HTML код, не додаючи зайвих елементів. Досвід у верстці понад 20 років
По термінах від 2-5 днів
-
14 днів25 000 UAH
2036 22 0 14 днів25 000 UAH
Вітаю!
Буду радий співпраці. Завжди на зв'язку. Звертайтесь.
Приклади робіт https://web.khorol.com.ua
-
8 днів13 000 UAH
239 8 днів13 000 UAH
Вітаю!
Зацікавила ваша пропозиція щодо розробки.
Ціна та терміни можуть бути скоректовані в процессі спілкування, уточнень та розробки сайту.
Буду рада докласти зусилля і свій досвід для успішної реалізації.
Портфоліо:
Freelancehunt
…
Чекаю на ваше рішення!
-
14 днів14 000 UAH
2238 24 0 14 днів14 000 UAH
Привіт, Руслан!!!
Я готовий швидко і якісно зробити верстку вашого сайту!
Результатом буде чистий 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 - багатосторінковий\
-
4 дні5500 UAH
343 4 дні5500 UAH
Вітаю, Віталію.
Більше 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:)
-
1 день500 UAH
2656 40 0 1 день500 UAH
Вітаю, зроблю, пишіть, буду рада співпраці
Вітаю, зроблю, пишіть, буду рада співпраці
-
7 днів13 000 UAH
7828 96 0 7 днів13 000 UAH
Доброго дня. Можу сверстати адаптивний сайт за шаблоном у фігмі.
Для верстки буду використовувати html, css та js, а також методологію БЕМ.
Портфоліо: Freelancehunt
Пишіть, буду радий співпрацювати з Вами.
-
14 днів16 480 UAH
448 4 0 14 днів16 480 UAH
Вітаю!
Я ознайомився з вимогами до проекту та анімаціями, які потрібно реалізувати на сайті. Враховуючи кількість і складність анімацій, таких як скролінг блоків, рух піктограм, плавні зміни кольору та анімації елементів при наведенні.
Орієнтовний термін виконання всіх робіт — 10-14 днів, враховуючи адаптацію анімацій для різних пристроїв та тестування.
Якщо вас влаштовують умови, буду радий обговорити деталі та розпочати роботу.
З повагою,
… В'ячеслав
-
15 днів15 000 UAH
531 3 0 15 днів15 000 UAH
Доброго дня, Руслан!
Буду радий з Вами співпрацювати і виконати замовлення в найкоротші терміни. У своїй роботі я приділяю особливу увагу надійності коду, якості створеного сайту та зручності користувача. Мої сайти кросбраузерні, адаптивні та мають анімацію. Вони відповідають макету (perfeсt pixel). Готовий обговорити прийнятну для Вас ціну. Готовий негайно взятися за роботу.
Ось посилання на моє портфоліо:
Freelancehunt
Причини працювати зі мною:
- Чистий і мінімальний код для вашого легкого розуміння.
- Завжди готовий обговорити ваше бачення готового продукту.
… - Легке спілкування.
- Глибокий інтерес до розуміння головної ідеї свого бачення.
Я можу допомогти вам з:
- HTML5 і CSS3.
- JavaScript.
- Методологія БЕМ.
- Сумісність з різними браузерами (Firefox, Chrome, Opera, Safari.).
- Якщо потрібно, то спочатку мобільний.
- Сучасний і адаптивний дизайн.
- Складна CSS/JS анімація.
- Ефект паралакса.
- Робота з макетами Figma.
- Pixel Perfect Conversion.
- Реалізація в світлій і темній темі
- Автоматичне перемикання теми сайту при перемиканні теми операційної системи
- Перемикайтеся між світлою та темною темами за допомогою прапорця
З повагою,
Богдан Готра
-
17 днів24 000 UAH
985 3 0 17 днів24 000 UAH
Вітаю.
Потрібна виключно верстка, чи інтеграція з певною ecommerce платформою?
Готовий обговорити деталі і почати роботу! :)
Гарного дня!
-
15 днів27 000 UAH
155 1 0 15 днів27 000 UAH
Доброго дня.
Виконаю верстку швидко та якісно.
__________________________________
-
Доброго вечора, надайте інформацію, під яку систему готується верстка?
Питання до потенційних виконавців, ви дійсно не цінуєте свою працю і свій труд з пропозиціями 5-14к?
-
Много повторяющихся блоков, один раз написал структуру и стили и дальше ctrl + c, ctrl + v. Работы на 2 дня максимум
-
Бажаю удачі))
-
Я что то пропустил? Почему Flex проигрывает уже Гридам? Я понимаю если надо делать mansory сетку это без вариантов Грид. Но почему обычный Flex будет хуже 3 для 3х колонок, чем Грид? Очень заинтересовало, буду благодарен за пояснения
-
Актуальні фриланс-проєкти в категорії HTML та CSS верстання
Виправлення помилок, оптимізація конверсії та покращення UX у Shopify-магазиніТребуется досвідчений Shopify-розробник для вирішення наступних завдань: 1. Виправлення критичних помилок JavaScript (пріоритет) У кількох сесіях користувачів фіксуються помилки при додаванні товару в кошик, які призводять до неможливості оформлення замовлення. Помилки… HTML та CSS верстання, Java ∙ 5 годин 55 хвилин тому ∙ 16 ставок |
SCSS HTML JS FIGMA Верстка
1000 UAH
Потрібна верстка шаблону з Figma без dev mode. Гарно структурований SCSS, адаптив на ваш россуд, все по секціях. Якщо використовуєте Claude code це великий +. Потрібно ще на вчора. Вказуйте ціну. Потрібно почати сьогодні і закінчити як швидше (бажано завтра в субботу). НЕ… HTML та CSS верстання ∙ 9 годин 31 хвилина тому ∙ 68 ставок |
WordPress website online store
20 000 UAH
Потрібен добрий сайт( на вордпресі) інет магазину(продаж товарів CBD у США).Категорія конкурентна, багато фото/багато товарів, треба зробити оригінально. ТЗ якийсь є. Потім треба буде просувати його в соц.меркжах і Гугл.Не за всі кошти світу поліз, бо реально дуже конкурентне… HTML та CSS верстання ∙ 10 годин 26 хвилин тому ∙ 49 ставок |
Виправити CSS/DOM-верстку карток у Chrome extension для локалізації D&D BeyondЄ Chrome extension Manifest V3, який локалізує сайт D&D Beyond українською. Проєкт написаний на TypeScript + WXT. Розширення працює через content script: знаходить англійський текст на сторінках D&D Beyond і замінює його українським перекладом. Проблема виникла на сторінці:… HTML та CSS верстання, Javascript та Typescript ∙ 18 годин 28 хвилин тому ∙ 36 ставок |
Шукаю людину, хто допоможе наповнити і сайт агенства по рекламі на Вордпресістворив в клод сторінки і зараз це все зробив на вордпресі. Шукаю людину, хто зможе допомогти наповнити контентом сайт. Швидко і якісно, певні фото мабуть треба буде нагенерувати в джіпіті. я постараюсь допомогти. сторінок приблизно 15 AI обробка текстів, HTML та CSS верстання ∙ 2 дні 6 годин тому ∙ 40 ставок |
Київ