Сделать верстку для проекта.
256 USDСделать верстку для проекта. Ссылка на дизайн
Общие требования и рекомендации по верстке
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 дней
Client's review of cooperation with Aleksandr Chornenky
Сделать верстку для проекта.Александр просто супер исполнитель. Идеальная адаптивная верстка. Очень ответственный, всегда на связи. Профессионал своего дела. Однозначно рекомендую к сотрудничеству. И надеюсь на дальнейшую совместную работу.
Freelancer's review of cooperation with Vadim Struzhihin
Сделать верстку для проекта.Рекомендую к сотрудничеству, все честно. У Вадима отличная команда.
-
12 days256 USD
3912 82 1 7 12 days256 USD
Здравствуйте, Вадим!
Профессионально занимаюсь адаптивной вёрсткой более 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 days256 USD
1387 39 0 12 days256 USD
Здравствуйте!
С макетами и требованиями ознакомлена. Все понятно. Готова сегодня начать.
Использую gulp + sass + pug
-
21 days601 USD
991 15 0 21 days601 USD
Здравствуйте!
Шикарное ТЗ! Спасибо!
Объем работы большой поэтому такие сроки и цена.
Все Ваши требования совпадают с моими привычками в работе.
Есть большой опыт: html/css, saas/scss, JS, JQuery, vue/vuex, Node.js, bootstrap, натяжка на Bitrix, натяжка на Wordpress, работа с MVC проектами.
За выходные могу приготовить рабочее пространство и с пн. приступить к работе. По окончании верстки могу выложить на тестовом хосте, чтобы вы могли проверить вживую.
…
Всегда на связи. Ежедневные отчеты со скринами или видео - не проблема.
Буду рада сотрудничеству!
-
12 days256 USD
188 12 days256 USD
Готов выполнить проект в соответствии с ТЗ в срок. Качество работы гарантирую
-
12 days256 USD
423 9 0 12 days256 USD
Добрый времени суток Вадим. С ТЗ и макетами ознакомился. Готов сотрудничать с вами на этом проекте.
У меня есть опыт создания адаптивных, кросс-браузерных, валидных макетов.
Для верстки использую:
1) HTML 5
2) Css3 (препроцессор SASS / SCSS / LESS)
3) JS / JQuary
4) Flexbox, grid
5) Gulp/ grunt
… 6) Bootstrap 4
7) Методологию БЭМ
Вы можете посмотреть примеры моих работ в моем профиле на сайте.
Я готов приступить к работе после согласования всех деталей.
-
12 days256 USD
537 22 1 1 12 days256 USD
Здравствуйте!
Я готов Вам заплатить за такое отличное ТЗ. Готов приступить к работе. Все пункты понятны и были мною неоднократно применены на практие.
Примеры работе - https://a-chukhrai.site/projects
(instandart, own portfolio - можно посмотреть как я верстаю)
Буду рад сотрудничеству. Пишите.
-
12 days256 USD
1558 10 1 1 12 days256 USD
Привет, занимаюсь 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 days267 USD
1486 20 0 12 days267 USD
Здравствуйте, Вадим!
Очень подробное ТЗ, приятно читать такой заказ.
Ознакомился с пунктами, просмотрел макет.
Ориентировочно 10-12 дней с полным адаптивом. Верстка будет на HTML, SCSS, Js+jQuery. Сборщик gulp(момент по поводу изображений использую сервис tinypng), методология БЭМ с микроразметкой.
Предоставлю ссылку на гитхаб, можете в режиме реального времени смотреть как продвигается проект. Каждый вечер буду делать коммиты.
Готов приступить сразу после обсуждения всех нюансов проекта.
С уважением, Евгений!
-
15 days290 USD
1144 39 3 4 15 days290 USD
Добрый день!
Буду рад поработать.
Последние мои проекты:
https://sofy.ai/
https://cashup.com.ua/
-
12 days256 USD
1088 11 0 12 days256 USD
Добрый вечер, Вадим! Ознакомился с макетом и вашим тз, готов выполнить вертску качественно, следую всем вашим требованиеям. Буду рад сотрудничеству, предлагаю продолжить общение в лс, для уточнения деталей
-
16 days256 USD
188 16 days256 USD
Добрый день .
Готов качественно сделать ваш проект.
Использую gulp заборщик.
компилятор scss.
Делаю на flex если нужно могу на bootstrap 4,5.
Сам код будет валидный, понятный для дальнейшей работы с ним (если нужно могу использовать классы по БЕМ), не нагруженный лишними обвертками, также со стороны верстки будут выполнены все требования для SEO.
К работе готов приступить сразу!
последняя работа
… http://transtop.piligrim-test.pp.ua/
https://sociallusion.com/
-
12 days267 USD
1988 22 0 12 days267 USD
Здравствуйте!
Ознакомился с вашей задачей, и буду рад сотрудничеству. Готов сегодня начать верстать ваш проект.
В работе использую таск-менеджер GULP, препроцесор SCSS та методологию БЕМ.
Более подробно все можем обсудить через ЛС или другими способами.
Спосибо за внимание!
-
я конечно дико извиняюсь, а зачем поддерживать версии браузеров 8-10 летней давности?
-
Vadim Struzhihin Reactor
обсуждается. можно взять и посвежее браузеры, но не так чтобы только на последних работал.
-
От IE уже даже Microsoft отказался. Эта работа "велосипед с костылями". Да ещё за 12-ть дней убить нервную систему.
-
Current freelance projects in the category HTML & CSS
Adaptive website layout with animationIt is necessary to create a website based on the ready design from Figma. The admin panel of the site is Laravel - viar-art.pl The site should be modern, responsive, fast, and user-friendly. The layout must exactly match the mockup and display correctly on mobile devices,… HTML & CSS, Website Development ∙ 8 hours 42 minutes back ∙ 50 proposals |
Update custom frontend on Prestashop
223 USD
It is necessary to refine and update the custom theme of the online store on PrestaShop. The design already exists, but there have been changes (alignment of elements, UI adaptations) that need to be carefully integrated and brought to a stable appearance. Tasks: Update and… HTML & CSS ∙ 14 hours 3 minutes back ∙ 27 proposals |
Webflow developer for filling portfolio pages on the websiteA website custom-built on Webflow for a construction company needs to quickly fill project pages using one template (replace images and texts) For 2 languages Quantity - 6 pieces Ready to start asap, thank you! HTML & CSS, Web Programming ∙ 2 days 8 hours back ∙ 50 proposals |
Layout and setup of a WordPress site for a construction company (Premium segment) with a focus on SEOProject Description: We are looking for an experienced WordPress developer to implement and deploy a ready design layout from Figma onto the WordPress CMS. Important Project Context: This is not a website development from scratch. The company has an existing website, and we are… HTML & CSS, Web Programming ∙ 2 days 13 hours back ∙ 78 proposals |
Moved the website from OpenCart to the Khoroshop platformHello. There is a website on OpenCart, an online store. It is necessary to transfer the structure of the site to the GoodShop platform, select a design for the new site, and make it fully functional. HTML & CSS, Web Programming ∙ 3 days 9 hours back ∙ 43 proposals |
Almaty (Alma-Ata)