Сделать верстку для проекта.
11 500 UAHСделать верстку для проекта. Ссылка на дизайн
Общие требования и рекомендации по верстке
0. Общие положения
Адаптивная верстка типовых страниц интернет-ресурса в формате языка гипертекстовой разметки (HTML), включая каскадные таблицы стилей (CSS) и базовый функционал манипуляций объектной модели документа (DOM) средствами JavaScript (JS). Определение базового функционала - см. пункт 13
Верстка должна соответствовать макетам. При этом верстка не выполняется методом Pixel Perfect (если не обсуждается отдельно) и при наложении прозрачного слоя возможны отличия с относительной погрешностью до 5% (размеры элементов, рендеринг шрифтов и межстрочных/межбуквенных расстояний, а также внутренних и внешних отступов). Например в дизайне отступ от секции 100px, в верстке ставим 100px как измерялось в макетах, а на практике получилось 105px из-за того что сыграл line-height заголовка
Все текстовые элементы макетов должны верстаться текстом, за исключением случаев, где подобная реализация невозможна технически
Все изменения :hover состояний, и :focus эффекты полей вида input сопровождаются микро анимациями и transition эффектами
1 Поддержка браузеров
HTML-шаблоны должны корректно отображаться в следующих версиях браузеров
Internet Explorer версии 10 и выше, платформа — операционные системы семейства Windows;
Mozilla Firefox версии 28 и выше — Windows версии XP и выше и Mac OS X версии 10.8 и выше;
Safari версии 6.1 и выше — Mac OS X версии 10.8 и выше;
Google Chrome версии 21 и выше — Windows версии XP и выше и Mac OS X версии 10.8 и выше;
Opera версии 15 и выше — Windows версии XP и выше и Mac OS X версии 10.8 и выше;
Браузеры мобильных устройств iOS 7 и выше
Браузеры мобильных устройств Android 5 и выше, за исключением UC Browser
При верстке учитываются особенности браузеров, их ограничения внешнего вида и поведения объектов. Для обеспечения правильного отображения элементов в разных браузерах может применяться грациозная деградация.
2 Стиль программирования
Обязательно комментирование крупных смысловых блоков в целях читаемости
Осмысленное наименование классов по BEM методологии (классический стиль block__element--modifier). Обязательно загляните сюда
3 Адаптивность
Под адаптивной версткой подразумевается отзывчивая (англ. - “responsive”) верстка, при которой содержимое страницы подстраивается под фактические размеры окна браузера, без рывков по ширине глобальных контейнеров на ключевых точках (“брейкпойнтах”). Другими словами, глобальные контейнеры всегда должны быть 100% ширины
При размерах более 320px не должно возникать горизонтальной прокрутки страницы (за исключением отдельных блоков верстки, где подобная реализация предусмотрена дизайн-макетами).
Допускается использование desktop first методов в подходе
Ключевыми “брейкпойнтами” принято считать - 1920(hd+), 1440 (hd), 1200px (wide), 992px (desktop), 768px (tablet), 568px(mobile), 414px(mobile-s). Применяются для адекватного, пропорционального изменение отступов и размеров шрифтов. Либо, при наличии макетов мобильной версии, соответствии таковым
Допускается использование других брейкпойнтов при необходимости с произвольным интервалом media выражений
4 Плагины
Предпочтительно, но не обязательно, использование следующих js/css плагинов (в случае необходимости использования их функционала)
Карусели - slick, swiper (поддержка flex и очень гибкая настройка), owl.carousel
Модальные окна - magnific popup, fancybox
Валидация форм - jQuery Validate Plugin.
Валидация “маской” (прим. - поля ввода телефон) - jQuery Mask Plugin
svg4everybody (поддережка svg для IE10), viewport-units-buggyfill (фикс для вьюпорта мобильных устройств с учетом адрес-бара. особенно актуально для iOS)
scrollMonitor.js - в сборке настроено для эмуляции wow.js, только с гибкой настройкой и задержкой выполнения события. либо AOS
anime.js / пакет GSAP - для сложных анимаций
rellax.js - для parallax анимаций (плавность за счет использования requestAnimationFrame)
Lazy загрузка изображений, тоже опционально
5. Javascript
Подробное комментирование в javascript коде, если функции имеют запутанный, нестандартный подход
Функции должны группироваться смысловыми блоками (прим. сначала - общие функции, затем все карусели, затем все модальные окна и так далее). Простое дописывание кода в конец файла в ходе верстки крайне не рекомендуется
6. Иконки и маленькие изображения
Первый приоритет - использование svg спрайтов.
Второй приоритет - png спрайты через элемент <i>, <span>
Третий приоритет - html теги img
Все иконки должны быть оптимизированы для retina экранов. Экспорты слоев из figma происходит в разрешении 1x и 2x (1x без постфикса, 2x - filename2x.png)
Допускается использование только 2x изображений по умолчанию
7. Изображения
Все изображения должны быть оптимизированы через сервис tinypng в целях уменьшения суммарного веса картинок. Стандартные gulp оптимизаторы не проявили достаточной эффективности
При использовании inline png в css, картинка должна быть оптимизирована До перевода в base64
Обязательно использование srcset параметров в случае если макеты позволяют экспортировать изображения в большем размере для 2x экранов с высокой плотностью пикселей src=’img/name.png srcset=’img/name2x.png 2x
Непрозрачные картинки необходимо экспортировать в .jpg в целях экономии размера файла
8. Шрифты
Шрифты, доступные через сервис google fonts должны подключаться с CDN google.fonts
9. Верстка элементов
Верстка должна проходить тесты на переполнения и незаполнения. То есть также быть отзывчивой по высоте элементов. В большинстве случаев недопустимы фиксированные значения height. Используйте min-height вместо него, чтобы при наличии больших текстовых блоков текст не вылезал из блоков или обрезался
Текстовые блоки статей и user generated content (UGC) должны верстаться чистой разметкой пренебрегая правилами БЭМ. например блок с контентом новости/статьи или комментария пользователя который будет выводиться из админки должен содержать чистые теги p, ul, li, blockquote, а не p.article-text__paragraph (наследование от родителя .article-content или .comment__body)
Избегайте наследования от глобального класса-модификатора от body, .global-wrapper и подобных для индивидуальных страниц. Для этого есть модификторы. Такая разметка неудобна при интеграции и конфликтует с barba.js
Приоритетом динамичного изменения DOM являются css методы реализации. Например добавление класса .is-active с opacity: 0 -> opacity: 1 вместо .hide() и .show()
Используйте pointer-events: none для объектов скрытых подобным образом чтобы не было ghost кликов по невидимкам
10 Базовый функционал
Под базовым функционал манипуляций объектной модели документа (DOM) средствами JavaScript (JS) принять следующий перечень функций:
Тогглеры состояний. Кнопки показать еще, скрыть должны раскрыть контент
Открытие панелей мобильного меню по иконке-гамбургеру
Показ/скрытие любых элементов, предусмотренных и отрисованных в макетах
Поля отмеченные как иконка-календарь должна содержать интерактивный компоненты выбора даты (datepicker). Выбор компонента (плагина) осуществляется исполнителем, или в соответствии с заказчиком по предварительной договоренности
Поля вида input могут иметь маски ввода, например телефон может иметь маску
Валидация форм на базовые параметры (email, телефон, заполненность имя)
Интеграция API решений заказчика и реальный функционал готового сайта не входит в понятие базового функционала верстки и обсуждается отдельно
11. Минификация кода
Перед сдачей должен иметь версию минифицированного кода css/js.
Допустимо, но не обязательно, использование минифицированного кода в каждой итерации
Допустимо использование мастер-файла (bundle). Проект имеет один общий js файл и общий .css. Другими словами, если проект имеет 20 типовых шаблонов, не создается 20 отдельных файлов .min.js и .min.css, уникальных для каждой страницы
12. Структура проекта
При использовании сборщиков, должны быть глобальные папки /src и /dist
css файлы лежат в поддиректории /css
javascript файлы лежат в поддиректории /js
Файлы препроцессоров css должны быть разбиты на компоненты
Приветствуется разбитие на pug компоненты элементов которые повторяются более 2х раз на разных страницах. Но не нужно переусердствовать с разбитем чтобы не держать одновременно 20 файлов перед глазами чтобы понять что происходит на странице
media выражения должны лежать в том же файле компонента. Недопустимо использование общего _media.sass файла в котором содержатся все media
13 Организационные моменты:
Хорошей практикой является предоставление ежедневной отчетности и информирование о ходе работ.
14 Срок выполнения - 12 дней
Відгук замовника про співпрацю з Александром Чорненьким
Сделать верстку для проекта.Александр просто супер исполнитель. Идеальная адаптивная верстка. Очень ответственный, всегда на связи. Профессионал своего дела. Однозначно рекомендую к сотрудничеству. И надеюсь на дальнейшую совместную работу.
Відгук фрилансера про співпрацю з Вадимом Стружихиним
Сделать верстку для проекта.Рекомендую к сотрудничеству, все честно. У Вадима отличная команда.
-
12 днів11 500 UAH
3912 82 1 7 12 днів11 500 UAH
Здравствуйте, Вадим!
Профессионально занимаюсь адаптивной вёрсткой более 5-ти лет
Буду рад помочь Вам в работе над Вашим проектом!
Внимательно изучил макеты и ТЗ
Примеры моих проектов
http://voskoboenko.zzz.com.ua/assets/sites/amzgates/index.html
http://voskoboenko.zzz.com.ua/assets/sites/ucrypto/index.html
http://voskoboenko.zzz.com.ua/assets/sites/pocketTrack/index.html
Обращайтесь, хорошего дня!
-
12 днів11 500 UAH
1387 39 0 12 днів11 500 UAH
Здравствуйте!
С макетами и требованиями ознакомлена. Все понятно. Готова сегодня начать.
Использую gulp + sass + pug
-
21 день27 000 UAH
991 15 0 21 день27 000 UAH
Здравствуйте!
Шикарное ТЗ! Спасибо!
Объем работы большой поэтому такие сроки и цена.
Все Ваши требования совпадают с моими привычками в работе.
Есть большой опыт: html/css, saas/scss, JS, JQuery, vue/vuex, Node.js, bootstrap, натяжка на Bitrix, натяжка на Wordpress, работа с MVC проектами.
За выходные могу приготовить рабочее пространство и с пн. приступить к работе. По окончании верстки могу выложить на тестовом хосте, чтобы вы могли проверить вживую.
…
Всегда на связи. Ежедневные отчеты со скринами или видео - не проблема.
Буду рада сотрудничеству!
-
12 днів11 500 UAH
188 12 днів11 500 UAH
Готов выполнить проект в соответствии с ТЗ в срок. Качество работы гарантирую
-
12 днів11 500 UAH
423 9 0 12 днів11 500 UAH
Добрый времени суток Вадим. С ТЗ и макетами ознакомился. Готов сотрудничать с вами на этом проекте.
У меня есть опыт создания адаптивных, кросс-браузерных, валидных макетов.
Для верстки использую:
1) HTML 5
2) Css3 (препроцессор SASS / SCSS / LESS)
3) JS / JQuary
4) Flexbox, grid
5) Gulp/ grunt
… 6) Bootstrap 4
7) Методологию БЭМ
Вы можете посмотреть примеры моих работ в моем профиле на сайте.
Я готов приступить к работе после согласования всех деталей.
-
12 днів11 500 UAH
537 22 1 1 12 днів11 500 UAH
Здравствуйте!
Я готов Вам заплатить за такое отличное ТЗ. Готов приступить к работе. Все пункты понятны и были мною неоднократно применены на практие.
Примеры работе - https://a-chukhrai.site/projects
(instandart, own portfolio - можно посмотреть как я верстаю)
Буду рад сотрудничеству. Пишите.
-
12 днів11 500 UAH
1558 10 1 1 12 днів11 500 UAH
Привет, занимаюсь Web разработкой более 3 лет.
Можете быть уверены, что работа будет сделана качественно.
Веб-разработчик
Резюме квалификаций
• -более 3 лет опыта в разработке Full-Stack на JavaScript.
• -Языки: HTML / CSS, JavaScript,
• -Платформы: Node.js,
• -Библиотеки: React.js, React Native, Bootstrap,
… • -Frameworks: Angular 2, Express.js, LoopBack.
• -Я очень преданный и ответственный человек.
• Вы можете быть уверены, что ваша работа будет выполнена вовремя и качественно.
Навыки
Языки программирования / Технологии
• JavaScript
• HTML / CSS
• TypeScript
• Node.js
• MongoDB
• MySQL
• PostgresDB
• REST API
• Axios
• Express
• Socket.io
Инструменты разработки
• Git
• ESLint
• Webpack
• Bitbucket
• Стилизованные компоненты
• React.js
• Redux
• Redux-Saga
• Bootstrap
Общие навыки
• ООП
Инструменты управления
• Jira
• Slack
• Trello
Языки
• Английский - свободно
• Украинский - Родной
• Русский - свободно
-
12 днів12 000 UAH
1486 20 0 12 днів12 000 UAH
Здравствуйте, Вадим!
Очень подробное ТЗ, приятно читать такой заказ.
Ознакомился с пунктами, просмотрел макет.
Ориентировочно 10-12 дней с полным адаптивом. Верстка будет на HTML, SCSS, Js+jQuery. Сборщик gulp(момент по поводу изображений использую сервис tinypng), методология БЭМ с микроразметкой.
Предоставлю ссылку на гитхаб, можете в режиме реального времени смотреть как продвигается проект. Каждый вечер буду делать коммиты.
Готов приступить сразу после обсуждения всех нюансов проекта.
С уважением, Евгений!
-
15 днів13 000 UAH
1144 39 3 4 15 днів13 000 UAH
Добрый день!
Буду рад поработать.
Последние мои проекты:
https://sofy.ai/
https://cashup.com.ua/
-
12 днів11 500 UAH
1088 11 0 12 днів11 500 UAH
Добрый вечер, Вадим! Ознакомился с макетом и вашим тз, готов выполнить вертску качественно, следую всем вашим требованиеям. Буду рад сотрудничеству, предлагаю продолжить общение в лс, для уточнения деталей
-
16 днів11 500 UAH
188 16 днів11 500 UAH
Добрый день .
Готов качественно сделать ваш проект.
Использую gulp заборщик.
компилятор scss.
Делаю на flex если нужно могу на bootstrap 4,5.
Сам код будет валидный, понятный для дальнейшей работы с ним (если нужно могу использовать классы по БЕМ), не нагруженный лишними обвертками, также со стороны верстки будут выполнены все требования для SEO.
К работе готов приступить сразу!
последняя работа
… http://transtop.piligrim-test.pp.ua/
https://sociallusion.com/
-
12 днів12 000 UAH
1988 22 0 12 днів12 000 UAH
Здравствуйте!
Ознакомился с вашей задачей, и буду рад сотрудничеству. Готов сегодня начать верстать ваш проект.
В работе использую таск-менеджер GULP, препроцесор SCSS та методологию БЕМ.
Более подробно все можем обсудить через ЛС или другими способами.
Спосибо за внимание!
-
я конечно дико извиняюсь, а зачем поддерживать версии браузеров 8-10 летней давности?
-
Вадим Стружихин Reactor
обсуждается. можно взять и посвежее браузеры, но не так чтобы только на последних работал.
-
От IE уже даже Microsoft отказался. Эта работа "велосипед с костылями". Да ещё за 12-ть дней убить нервную систему.
-
Актуальні фриланс-проєкти в категорії HTML та CSS верстання
Лендінг для школи англійської
13 500 UAH
Шукаємо дизайнера + верстальника лендингу (Wix / WordPress / Weblium) Привіт! Шукаємо виконавця на дизайн і верстку лендингу курсу англійської мови. Що треба: — дизайн і верстка лендингу на 12 блоків; — дві сторінки оплати: успішна /неуспішна; — адаптив під мобільні; —… HTML та CSS верстання, Дизайн інтерфейсів (UI/UX) ∙ 1 година 53 хвилини тому ∙ 52 ставки |
Верстка React/Tailwind компонента для друку бланка А4Потрібно поправити UI/UX дизайн та геометрію одного React-компонента (шаблон клінічної карти для друку в PDF) Весь функціонал, масиви даних та логіка вже написані й працюють — потрібна суто косметика, правильні відступи та позиціонування елементів за допомогою Tailwind CSS Стек… HTML та CSS верстання, Javascript та Typescript ∙ 2 години 59 хвилин тому ∙ 30 ставок |
Адаптивна верстка сайту з анімацієюПотрібно сверстати сайт за готовим дизайном з Figma. Адмінка сайту - Laravel - viar-art.pl Сайт має бути сучасним, адаптивним, швидким і зручним для користувача. Верстка повинна точно відповідати макету, коректно відображатися на мобільних пристроях, планшетах і комп'ютерах.… HTML та CSS верстання, Створення сайту під ключ ∙ 14 годин 20 хвилин тому ∙ 74 ставки |
Оновити кастомний фронтенд на Prestashop
10 000 UAH
Потрібно доопрацювати та оновити кастомну тему інтернет-магазину на PrestaShop. Дизайн вже існує, але були внесені правки (вирівнювання елементів, UI-адаптації), які потрібно акуратно інтегрувати та довести до стабільного вигляду. Задачі: Оновлення та оптимізація кастомної теми… HTML та CSS верстання ∙ 19 годин 41 хвилина тому ∙ 30 ставок |
Webflow розробник для заповнення сторінок портфоліо на сайтіЄ сайт розроблений кастомно на вебфлоу для будівельної компанії, потрібно швидко заповнити сторінки проектів за одним шаблоном (замінити картинки і тексти) Для 2 мов Кількість - 6 штук Готові починати asap, дякую! HTML та CSS верстання, Веб-програмування ∙ 2 дні 14 годин тому ∙ 51 ставка |
Алмати (Алма-Ата)