bg

Профессиональная верстка
сайтов

Заказать верстку

Обо мне

photo

Привет, меня зовут Игорь, это мой сайт-визитка. Я из Винницы. Занимаюсь html-версткой.

У меня полностью кроссбраузерная, адаптивная и валидная верстка. Для обеспечения выполнения требований, предъявляемых к верстке сайта в процессе работы над проектом я использую сборщик проектов Gulp для автоматизации процесса верстки, препроцессоры Sass/Scss для ускоренной стилизации сайта и более гибкого кода, шаблонизатор Pug, Pixel Perfect для верстки, совпадающей с предоставленным макетом «пиксель в пиксель», БЭМ,Smartgrid и media-запросы для адаптивной верстки сайта.

Динамика сайта организуется за счет нативного js, собственным jQuery кодом или настроенными плагинами.

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

bg

Что я умею

HTML5/CSS3
Javascript/JQuery
Photoshop/Figma
Gulp/Pug
Bootstrap/Smart-grid
Less/Sass

Процесс верстки

Работа с макетом
Верстка контента
Стилизация сайта
Адаптивная верстка
Проверка в браузерах
Устранение ошибок
Что я использую в процессе верстки

Мои работы

Адаптивная верстка LandingPage "nfo"
Посмотреть
Адаптивная верстка LandingPage "Debts"
Посмотреть
Адаптивная верстка LandingPage "Thermotech"
Посмотреть
Адаптивная верстка LandingPage "Dekart"
Посмотреть
Адаптивная верстка корпоративного сайта "Клишен и партнеры"
Посмотреть
Адаптивная верстка LandingPage "Eventual"
Посмотреть
Адаптивная верстка LandingPage "Funiro"
Посмотреть
Адаптивная верстка LandingPage "Viking"
Посмотреть
Адаптивная верстка LandingPage "Code-S"
Посмотреть
Адаптивная верстка LandingPage "Bakehouse"
Посмотреть
Адаптивная верстка LandingPage "billoflading"
Посмотреть
Адаптивная верстка LandingPage "calendar"
Посмотреть
Адаптивная верстка LandingPage "go-it"
Посмотреть
Адаптивная верстка LandingPage "john"
Посмотреть
Адаптивная верстка LandingPage "nationalpark"
Посмотреть
Адаптивная верстка LandingPage "mogo"
Посмотреть

В чем плюсы?

  • Всегда соблюдаю сроки

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

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

  • Всегда на связи

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

  • Всегда выбираю наиболее оптимальный способ верстки

    Любой шаблон можно сверстать множеством разных способов.

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

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

  • Всегда при вёрстке учитываю кроссбраузерность

    Проверяю корректность отображения шаблона в последних версиях следующих браузеров (Windows): Google Chrome (и аналоги - Yandex Browser, Opera, Comodo Dragon и т.д.), Firefox, Edge.

    Internet Explorer оговаривается отдельно, поскольку даже создатели IE не считают его браузером.

    Мобильные версии адаптивных шаблонов (Android): Google Chrome

    К сожалению на ОС, отличных от Windows и Android, вживую проверить возможности обычно нет. В общем случае, ориентируюсь на последние версии обозревателей. В устаревших версиях работоспособность не проверяю , если изначально не было оговорено иное.

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

  • Всегда проверяю валидность кода

    HTML-код является "правильным" с точки зрения W3C по стандарту xHTML 1.0 Strict, либо HTML5.

  • Активно применению возможности CSS

    Максимально возможное использование каскадных таблиц стилей в реализации элементов дизайна. Активное использование наследования, дочерних и соседних селекторов, а также псевдоэлементов и, как следствие, отсутствие большого количества мусора в виде лишних классов и снижение в HTML-коде количества разметки, вводимой только для создания элементов оформления.

    Предпочитаю обходиться минимумом классов. Любимые многими методологии по типу БЭМ использую достаточно редко и лишь там, где это действительно имеет практический смысл с моей точки зрения. В большинстве случаев, с которыми я сталкиваюсь, применение этой методологии (в полной мере) практического смысла лишено и лишь приводит к замусориванию исходного кода страницы.

  • Использую блочную вёрстку

    Так называемая "верстка слоями", "верстка div-ами". Компактность HTML кода. Минимально возможное количество разметки для достижения нужного результата. А, соответственно, несколько большая скорость загрузки страниц, простота понимания разметки для программиста при адаптации под CMS ну и, в конце концов, лучшее отношение поисковых систем к сайту.

  • Адаптирую сайты к разным разрешениям экранов

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

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

    В этом случае вам необходимо предоставить мне PSD макеты, в которых будет отрисовано оформление сайта в нескольких вариантах - от мобильного телефона до десктопа.

    Однако, можно обойтись и одним макетом десктопной версии. В этом случая я сделаю адаптивы на свое усмотрение, но вы должны учитывать, что моё видение адаптива и ваше могут не совпасть.

  • Соблюдаю "неломаемость" верстки

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

  • Учитываю возможность работы с сайтом при отключенной графике

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

  • Иногда использую спрайты "спрайты" (png, svg)

    Иногда применяю так называемые "спрайты" — изображения, где несколько мелких картинок объединены в одну большую для сокращения количества запросов к серверу и, соответственно, ускорения загрузки страницы, а также устранения некоторых косяков отображения при наличии определенного типа эффектов наведения.

    В идеале, если к макету будут приложены все используемые в нем иконки в формате SVG. Обязательно изначально отрисованные в векторном редакторе, а не растр, "обернутый" в SVG. В особенности, это актуально для адаптивных сайтов - в этом случае можно обеспечить более четкую картинку на экранах с повышенной плотностью пикселей (например, на ретина дисплеях) и практически все современные мобильники.

  • Оптимизирую графику

    Ищу необходимый баланс между "весом" изображения и качеством его отображения для растровых изображений.

    Векторные SVG также будут максимально очищены от мусора в коде изображений, который генерируют графические редакторы.

  • Активно применяю JavaScript и jQuery

    Для "оживления" сайта в виде различных слайдеров, всплывающих окон, аккордеонов напaдобие этого и т.д. и т.п. использую либо чистый JavaScript, либо осуществляю поиск необходимых скриптов среди готовых решений jQuery, их установку и настройку.

  • Если в макете присутствуют нестандартные шрифты ...

    Возможно подключение нестандартных шрифтов. Если шрифт платный, важно, чтобы он был вами легально приобретен. В противном случае, настоятельно рекомендую осуществить замену на любой из бесплатных, допустим, с сервиса Google Fonts.

  • Тестирую скорость загрузки сайта

    Тестирую верстку посредством сервиса PageSpeed Insights, оценивающего скорость загрузки сайта. Максимальных баллов не обещаю, но стараюсь вывести в зеленую зону, либо как можно ближе к ней.

  • Исправляю собственные ошибки

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

СВЯЗАТЬСЯ СО МНОЙ

-->