Сделать верстку для проекта.
939 PLNСделать верстку для проекта. Ссылка на дизайн
Общие требования и рекомендации по верстке
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 дней
Opinia zleceniodawcy o współpracy z Aleksandr Chornenky
Сделать верстку для проекта.Александр просто супер исполнитель. Идеальная адаптивная верстка. Очень ответственный, всегда на связи. Профессионал своего дела. Однозначно рекомендую к сотрудничеству. И надеюсь на дальнейшую совместную работу.
Opinia freelancera o współpracy z Vadim Struzhihin
Сделать верстку для проекта.Рекомендую к сотрудничеству, все честно. У Вадима отличная команда.
-
12 dni939 PLN
3912 82 1 7 12 dni939 PLN
Здравствуйте, Вадим!
Профессионально занимаюсь адаптивной вёрсткой более 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 dni939 PLN
1387 39 0 12 dni939 PLN
Здравствуйте!
С макетами и требованиями ознакомлена. Все понятно. Готова сегодня начать.
Использую gulp + sass + pug
-
21 dni2205 PLN
991 15 0 21 dni2205 PLN
Здравствуйте!
Шикарное ТЗ! Спасибо!
Объем работы большой поэтому такие сроки и цена.
Все Ваши требования совпадают с моими привычками в работе.
Есть большой опыт: html/css, saas/scss, JS, JQuery, vue/vuex, Node.js, bootstrap, натяжка на Bitrix, натяжка на Wordpress, работа с MVC проектами.
За выходные могу приготовить рабочее пространство и с пн. приступить к работе. По окончании верстки могу выложить на тестовом хосте, чтобы вы могли проверить вживую.
…
Всегда на связи. Ежедневные отчеты со скринами или видео - не проблема.
Буду рада сотрудничеству!
-
12 dni939 PLN
188 12 dni939 PLN
Готов выполнить проект в соответствии с ТЗ в срок. Качество работы гарантирую
-
12 dni939 PLN
423 9 0 12 dni939 PLN
Добрый времени суток Вадим. С ТЗ и макетами ознакомился. Готов сотрудничать с вами на этом проекте.
У меня есть опыт создания адаптивных, кросс-браузерных, валидных макетов.
Для верстки использую:
1) HTML 5
2) Css3 (препроцессор SASS / SCSS / LESS)
3) JS / JQuary
4) Flexbox, grid
5) Gulp/ grunt
… 6) Bootstrap 4
7) Методологию БЭМ
Вы можете посмотреть примеры моих работ в моем профиле на сайте.
Я готов приступить к работе после согласования всех деталей.
-
12 dni939 PLN
519 22 1 1 12 dni939 PLN
Здравствуйте!
Я готов Вам заплатить за такое отличное ТЗ. Готов приступить к работе. Все пункты понятны и были мною неоднократно применены на практие.
Примеры работе - https://a-chukhrai.site/projects
(instandart, own portfolio - можно посмотреть как я верстаю)
Буду рад сотрудничеству. Пишите.
-
12 dni939 PLN
1558 10 1 1 12 dni939 PLN
Привет, занимаюсь 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 dni980 PLN
1486 20 0 12 dni980 PLN
Здравствуйте, Вадим!
Очень подробное ТЗ, приятно читать такой заказ.
Ознакомился с пунктами, просмотрел макет.
Ориентировочно 10-12 дней с полным адаптивом. Верстка будет на HTML, SCSS, Js+jQuery. Сборщик gulp(момент по поводу изображений использую сервис tinypng), методология БЭМ с микроразметкой.
Предоставлю ссылку на гитхаб, можете в режиме реального времени смотреть как продвигается проект. Каждый вечер буду делать коммиты.
Готов приступить сразу после обсуждения всех нюансов проекта.
С уважением, Евгений!
-
15 dni1061 PLN
1144 39 3 4 15 dni1061 PLN
Добрый день!
Буду рад поработать.
Последние мои проекты:
https://sofy.ai/
https://cashup.com.ua/
-
12 dni939 PLN
1088 11 0 12 dni939 PLN
Добрый вечер, Вадим! Ознакомился с макетом и вашим тз, готов выполнить вертску качественно, следую всем вашим требованиеям. Буду рад сотрудничеству, предлагаю продолжить общение в лс, для уточнения деталей
-
16 dni939 PLN
188 16 dni939 PLN
Добрый день .
Готов качественно сделать ваш проект.
Использую gulp заборщик.
компилятор scss.
Делаю на flex если нужно могу на bootstrap 4,5.
Сам код будет валидный, понятный для дальнейшей работы с ним (если нужно могу использовать классы по БЕМ), не нагруженный лишними обвертками, также со стороны верстки будут выполнены все требования для SEO.
К работе готов приступить сразу!
последняя работа
… http://transtop.piligrim-test.pp.ua/
https://sociallusion.com/
-
12 dni980 PLN
1988 22 0 12 dni980 PLN
Здравствуйте!
Ознакомился с вашей задачей, и буду рад сотрудничеству. Готов сегодня начать верстать ваш проект.
В работе использую таск-менеджер GULP, препроцесор SCSS та методологию БЕМ.
Более подробно все можем обсудить через ЛС или другими способами.
Спосибо за внимание!
-
я конечно дико извиняюсь, а зачем поддерживать версии браузеров 8-10 летней давности?
-
Vadim Struzhihin Reactor
обсуждается. можно взять и посвежее браузеры, но не так чтобы только на последних работал.
-
От IE уже даже Microsoft отказался. Эта работа "велосипед с костылями". Да ещё за 12-ть дней убить нервную систему.
-
Aktualne zlecenia dla freelancerów w kategorii Javascript & Typescript
Wsparcie i rozwój strony internetowej firmy sprzątającej
75 PLN
Szukam programisty / webmastera do długoterminowego wsparcia i rozwoju strony internetowej firmy sprzątającej. Strona: https://donely.ca O projekcie DoneLy Home Services — firma świadcząca usługi sprzątania w Kanadzie, która aktywnie się rozwija i rozszerza zasięg działalności.… Javascript & Typescript, Programowanie stron internetowych ∙ 1 dzień 10 godzin temu ∙ 59 ofert |
Opracowanie strony internetowej według specyfikacji na FramerTrzeba zrobić stronę według tych parametrów, które są w specyfikacji https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Podajcie rzeczywistą stawkę na podstawie tego projektu Układ HTML i CSS, Javascript & Typescript ∙ 2 dni 11 godzin temu ∙ 26 ofert |
Opracowanie interaktywnej mapy Palworld dla strony internetowejPotrzebna jest interaktywna mapa Palworld na wzór: https://palworld.gg/map Potrzebujemy nie tylko statycznego obrazka, ale pełnoprawnej interaktywnej mapy, na której użytkownik może przeglądać lokalizacje, włączać/wyłączać kategorie obiektów, wyszukiwać potrzebne punkty i… Układ HTML i CSS, Javascript & Typescript ∙ 4 dni 2 godziny temu ∙ 32 oferty |
Rozwój platformy AM Mobility (serwis samochodowy, parking, ubezpieczenie, wynajem samochodów)
21 197 PLN
Szukamy zespołu lub doświadczonego programisty Full Stack do stworzenia MVP platformy AM Mobility. AM Mobility to jednolita cyfrowa ekosystem dla kierowców, łącząca w jednej aplikacji i platformie internetowej: parking; serwis samochodowy; wulkanizację; myjnię samochodową;… Javascript & Typescript, Programowanie stron internetowych ∙ 9 dni 9 godzin temu ∙ 119 ofert |
Animacje Gsap
82 PLN
Dzień dobry. Trzeba wprowadzić poprawki w bieżącym projekcie. Potrzebny specjalista, który dobrze pracuje na gsap/lenis Trzeba zrobić animację kart. Szczegółowe wymagania tutaj:… Javascript & Typescript, Programowanie stron internetowych ∙ 9 dni 14 godzin temu ∙ 21 ofert |
Ałmaty (Alma-Ata)