Сделать верстку для проекта.
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
1339 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
519 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 верстка
Нужен сильный специалист по WordPress / WooCommerce для доработки сайта MARSPROИщем ответственного фрилансера или небольшую команду для качественного завершения и технической доработки сайта компании MARSPRO. Сайт уже работает, но после предыдущего разработчика осталось много мелких и важных технических проблем. Нам нужен человек, который сможет не просто… CMS, HTML и CSS верстка ∙ 20 часов 46 минут назад ∙ 39 ставок |
Sandra Ice Cream - Kaleidoscop
4122 UAH
У нас есть небольшой проект, и мы хотели бы узнать, сможете ли Вы подготовить для нас видеоролик для LED-экрана. Видео будет использоваться на нашем мероприятии. Мы предоставим все необходимые материалы: дизайн, брендбук, размеры и технические требования. Пожалуйста, сообщите,… HTML и CSS верстка ∙ 22 часа 15 минут назад ∙ 5 ставок |
Верстка 8 страниц сайта
4000 UAH
О проекте корпоративный сайт консалтинговой компании. Дизайн полностью готов в Figma (темно-синяя палитра, десктоп + мобильные версии). Нужна качественная адаптивная верстка строго по макетам. Анимаций нет.Объем работ Дизайнер предоставил десктопные и мобильные макеты для каждой… HTML и CSS верстка ∙ 23 часа 50 минут назад ∙ 88 ставок |
Верстка блоков WordPressДобрый день. Надо сделать редизайн, а конкретно верстку блоков как на макете, структура не сильно отличается от того что сделано сейчас кроме хеддера и hero блока. Надо сделать редизайн как мобильной так и десктоп версии. Сайт на ворд прессе, autoperformance.pl Дизайн в фигме. HTML и CSS верстка, Сопровождение сайтов ∙ 1 день 3 часа назад ∙ 62 ставки |
Разработка сайта по ТЗ на FramerНеобходимо сделать сайт по этим параметрам, что в ТЗ https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Назовите реальный рейд на основе этого дизайна HTML и CSS верстка, Javascript и Typescript ∙ 1 день 4 часа назад ∙ 25 ставок |
Алматы (Алма-Ата)