Сверстаю
Вам сайт по дизайн макету PSD Figma Sketch
от 1 дня

Пройдите тест и получите предварительный развернутый расчет стоимости HTML верстки ваших макетов.

Рассчитать цену верстки

Рассчет стоимости
перед стартом

Штраф 25%
за просрочку

Лично выполняю
всю работу

На связи 14 часов
7 дней в неделю

Привет, меня зовут Андрей Лобанов, я HTML верстальщик.

Я помогаю подготовить верстку для натяжки на систему управления. Для этого слежу за тем чтобы загрузка страниц была быстрой, отображалась во всех современных браузерах так как на макете, чтобы поисковый робот смог корректно прочитать текст и чтобы код можно было с легкостью поддерживать.

Знаю чем отличается адаптивная верстка от резиновой, поэтому нет проблем с отображением на мобильных устройствах. Знаю что такое верстка под ретину, поэтому ваш сайт будет отображаться корректно на макбуке так же как на виндовсе.

Моя цель стать FULL STACK JAVASCRIPT программистом, чтобы разрабатывать высоконагруженные и интересные приложения.

Рассчитайте стоимость верстки

Вопрос 1 из 3

Количество смысловых экранов?

1 экранов

Дополнительно рублей

За один блок рублей

В сумме примерно рублей

Кто Вы?

Есть макеты адаптивной версии сайта?

Какие сроки:

3 Дней

Вставьте ссылку на макеты с облачного диска (необязательно)

Дополнительные работы:

Опишите техническое задание, если его нет на диске

Спасибо за ответы!

Получите результат расчета, оставив контактный телефон или ссылку на соц сети:

Нажимая "Узнать стоимость", вы соглашаетесь с

Что вы получите от работы со мной

Зеленая зона в Google PageSpeed

Google PageSpeed

Что входит:
1. Обьединение и сжатие скриптов и стилей.
2. Оптимизация размера и сжатие картинок.

Зачем это:
Это нужно для того чтобы сверстанная страница мгновенно загружалась.

Одинаковое отображение как на макете во всех современных браузерах

Browser Mozilla Browser Chrome Browser Safari
Browser Yandex Browser Opera Browser Edge Internet Explorer

Дополнительные бесплатные правки

Правки по дизайну с внесением в верстку. Но не более 1 часа

Адаптивность под 6 разрешений

1920px
1170px
960px
720px
540px
320px-
540px

Что это:
Это размеры основных устройств: мониторы, планшеты и мобильные устройства.

Зачем это:
Это нужно для того чтобы сверстанная страница отображалась удобно на всех устройствах.

Отображение кастомных шрифтов

Fonts

Выполнение минимального технического задания для верстки

Что это:
Это магический набор правил для верстальщика

Зачем это:
Это нужно для того чтобы код с легкостью можно было поддерживать и чтобы программисты могли с улыбкой натягивать верстку.

Микроразметка для социальных сетей

Микроразметка Вконтакте

Что это:
Показ картинки 1 экрана и заголовка при отправке ссылки в сообщения социальных сетей между друзьями.

Зачем это:
По умолчанию социальные сети выдергивают любую попавшиюся картинку на странице и показывают при отправке, это не презентабельно.

Pixel Perfect

Окно браузера Прототип сайта Прототип сайта

Что это:
Это когда сверстанная страница в точности до пикселя соответствует макету.

Валидация по https://validator.w3.org

Что это:
Это когда сверстанная страница может прочитана корректно поисковым роботом.

Ваши макеты и исходники не уйдут дальше меня

Мои работы по верстке

За 2 года непрерывной верстки ко мне попадали разные макеты, от 3 экранной визитки до CPA систем и объемных интернет магазинов, в которых легко было потеряться. После 150 интересных макетов не боишься взяться за абсолютно любую задачу, нужен квиз, без проблем, заверстаем и запрограммируем, нужен кастомный скролл для прокрутки по целой странице, я готов. Мне нравятся задачи, в которых нужно узнать новое и подумать.

Представлены не все работы, не все заказчики дают право показывать выполненную верстку.

Портфолио верстальщика

Иконкаanimator142.ru

Адаптивная верстка 2 страниц под 6 разрешений с запрограммированным квизом и отправкой заявок в телеграмм.

Посмотреть
Портфолио верстальщика

Иконкаkupipet.ru

Адаптивная верстка 40 страниц под 6 разрешений сервиса по поиску домашних питомцев с поиском породы и региона в фильтрах.

Посмотреть
Портфолио верстальщика

Иконкаkovroclean.ru

Адаптивная верстка под 2 разрешения лендинга с квизом и таймером обратного отсчета

Посмотреть
Портфолио верстальщика

Иконкаdari42.ru

Адаптивная верстка под 4 разрешения интернет-магазина подарков.

Посмотреть
Портфолио верстальщика

Иконкаремонт-в-ванной.рф

Адаптивная верстка под 2 разрешения объемного лендинга с мини квизом, аккордионами и картой

Посмотреть
Портфолио верстальщика

Иконкаsite.ru

Адаптивная верстка под 2 разрешения лендинга с подключением отправки заявки на почту

Посмотреть
Портфолио верстальщика

Иконкаksk-biz.ru.ru

Адаптивная верстка под 2 разрешения лендинга с анимированными элементами, интеграция с AmoCRM

Посмотреть
Портфолио верстальщика

Иконкаsite.ru

Адаптивная верстка обучающего интерфейса под 4 разрешения

Посмотреть

Мои отзывы

5 причин
заказать у меня верстку

1

Расчет стоимости
и сроков перед
началом работы

После большого количества переверстанных страниц я запоминал сколько у меня уходит времени на одну кнопку или экран. Прежде чем заказывать заказчики интересовались стоимостью работы наперед, поэтому я обучился рассчитывать стоимость перед началом работы.

2

Штраф 25%
от заказа
за просрочку

Я понимаю неприятно и затратно, когда дела идут не по плану. Поэтому при условии внесения всех необходимых материалов (шрифтов, макетов, полного ТЗ) и без внесения дополнительных работ или правок в ТЗ и макет после начала работ, я снижаю стоимость заказа на 25% в случае срыва сроков.

Если условия не выполняются штраф аннулируется.

3

На связи
14 часов в сутки
7 дней в неделю

Чтобы не беспокоиться и узнать как продвигается работа, не нужно ждать несколько часов, по запросу я выгружу результат работы на текущий момент на хостинг в течении 10 минут, если это не раньше 6 утра и не позже 8 вечера по Москве.

4

Лично
выполняю
всю работу

Во-первых не придётся платить за посредничество, за работу менеджера и программиста в веб студии.
Во вторых если понадобятся дополнительные правки, то вы будете уверены что я смогу их лично внести без траты времени на поиски нового исполнителя.

Все правки не входящие в первоначальную стоимость оплачиваются дополнительно.

5

Не беру в работу
больше 2 заказов
в одно время

Моя практика показывает, что если брать больше 2 заказов в одно время то снижается продуктивность и качество работы. Это может вылиться в плохое впечатление от работы со мной, нервный срыв и плохо поддерживаемый код.

Моё окружение

Основные инструменты (для клиентов)

HTML 5

HTML 5

Король верстки, каркас будущей страницы из семантических тегов

CSS 3

CSS 3

Королева верстки, благодаря ей можно заливать фоны градиентом, делать тени, подключать и задавать шрифты и даже делать не большую анимацию

JavaScript

JavaScript

Главный маг и чародей верстки, делает то на что HTML и CSS не способны, например 3D модели на сайте, абсолютно любую анимацию к примеру сладеры, молниеносные переходы по страницам без перезагрузки, специальные калькуляторы для сайтов, личные кабинеты с верификацией, онлайн чаты в реальном времени. Но в браузере он ничто без HTML и CSS.

Сборщик Gulp (для программистов)

Browser-sync

Browser-sync

Для чего:
Для автоматической перезагрузки страницы при сохранени скриптов, стилей и html

Babel

Browser-sync

Для поддержки старых браузеров 6 и 7 спецификаций JavaScript

SASS

Browser-sync

Для упрощенного и быстрого написания стилей

Autoprefixer

Browser-sync

Для автоматического добавления кроссбраузерных префиксов

БЭМ-нейминг

Browser-sync

Способ написания независимых стилей, с восможностью переиспользования в будущем.

Сoncat

Для обьедиения стилей и скриптов по одному файлу

Uglifyjs

Для сжатия скриптов

Cssnano

Для сжатия стилей

Графические редакторы (для дизайнеров)

Photoshop

Photoshop

Figma

Figma

Adobe XD

Adobe XD

Sketch

Sketch

Сетки (для дизайнеров)

Flexbox Grid

Bootstrap

Любая другая, с вашими разрешениями и количеством колонок

Полный процесс работы

Требования к макету

  • Ширина макета не должна быть шире 1920 пикселей, контентная (края сетки) на ваше усмотрение. Стандартная контентная ширина 1170 пикселей
  • Текст должен быть текстом, а не картинкой.
  • Если делаете по сетке и знаете что это такое, то не выходите за пределы предпоследних направляющих по бокам, это частая ошибка.
  • Никаких лишних слоев, они могут сбить с толку.
  • Приложить шрифты к макету.
  • Не используйте не больше 3 шрифтов, они тормозят загрузку страницы.
  • Иметь слои для кнопок, ссылок для состояния при "наведении, клике и визите"
  • Выделять цветом папки с всплывающими окнами
  • Приготовить папку с картинками доступными в формате SVG
  • Очень желательно подготовить планшетную(640 пикселей в ширину) и мобильную версию(320 пикселей в ширину), дизайнеру это час максимум и заказчик сразу будет видеть как это будет выглядеть на телефоне и планшете, да и стиль не потеряется. А мне не придеться ломать голову как расположить элементы и править если что то не понравиться заказчику, время стоит денег, поэтому сэкономьте и сделайте сразу планшетную и мобильную версию.

На досуге я пишу статьи для клиентов, чтобы вас не обманули.

Адаптивная верстка

Как за 3 минуты проверить сайт на адаптивную верстку

Время прочтения: ~2 минут

Прочитать

Pixel Perfect

Как проверить верстает ли верстальщик пиксель в пиксель

Время прочтения: ~2 минут

Прочитать

Экономия

Как сэкономить на верстке или как составить тз на верстку

Время прочтения: ~2 минут

Прочитать

Молния

Как проверить отмизирована ли скорость загрузки сайта

Время прочтения: ~2 минут

Прочитать

Browser Mozilla Browser Chrome Browser Safari
Browser Yandex Browser Opera Browser Edge

Что такое кроссбраузерная верстка и как проверить

Время прочтения: ~2 минут

Прочитать

Стоимость

Как расчитать стоимость верстки

Время прочтения: ~2 минут

Прочитать

Адаптивная верстка

Чем отличается резиновая верстка от адаптивной

Время прочтения: ~2 минут

Прочитать

w3c

Как проверить сайт на валидность и что это

Время прочтения: ~2 минут

Прочитать

Оставаясь на сайте вы соглашаетесь с условиями пользования сайта

Политика конфиденциальности сайта

Данная Политика конфиденциальности применима к данному Сайту. После просмотра данного Сайта обязательно прочитайте текст, содержащий политику конфиденциальности используемого сайта. В случае несогласия с данной Политикой конфиденциальности прекратите использование данного Сайта. Заполнив любую из форм и используя данный Сайт, Вы тем самым выражаете согласие с условиями изложенной ниже Политики конфиденциальности. Сайт охраняет конфиденциальность посетителей сайта. Персональная информация Для того чтобы оказывать вам услуги, отвечать на вопросы, выполнять ваши пожелания и требования требуется такая информация, как ваше имя и номер телефона. САЙТ может использовать указанную информацию для ответов на запросы, а также для связи с Вами по телефону с целью предоставления информации о предлагаемых САЙТ услугах и рекламных кампаниях. При поступлении от вас обращения в виде отправки любой заполненной на сайте формы САЙТ может потребоваться связаться с Вами для получения дополнительной информации, необходимой для вашего обслуживания и ответа на интересующие вопросы. САЙТ обязуется не передавать данную информацию третьим лицам без Вашего разрешения, за исключением информации, необходимой для выполнения вашего обслуживания. Со своей стороны, Вы предоставляете САЙТ право использовать любую сообщѐнную Вами информацию для выполнения указанных выше действий.

Безопасность

Передача персональных данных в любой форме (лично, по телефону или через Интернет) всегда связана с определенным риском, поскольку не существует абсолютно надежных (защищенных от злонамеренных посягательств) систем, однако САЙТ принимает необходимые адекватные меры для минимизации риска и предотвращения несанкционированного доступа, несанкционированного использования и искажения Ваших персональных данных. Несовершеннолетние САЙТ не принимает никакой информации от лиц моложе 18 лет без согласия их родителей или законных опекунов. Кроме того, лица моложе 18 лет не могут совершать каких-либо покупок или иных юридических действий на данном Сайте без согласия родителей или законных опекунов, если это не допускается законодательством Российской Федерации.

Модификация

САЙТ имеет право изменять данную Политику конфиденциальности, изменять и корректировать условия доступа или запрещать доступ к сайту, а также изменять его содержание в любое время без предварительного уведомления.

Сайт ни при каких обстоятельствах не является публичной офертой.