Личный сайт портфолио Андрея Спичака | HTML верстальщик - Профессиональная верстка сайтов

Давайте познакомимся

html coder

Меня зовут Андрей.

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

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

Верстаю и простые лендинги, и сложные сайты типа магазинов, корпоративных сайтов, порталов, но берусь только за интересные для меня проекты. То есть если предложенный проект мне верстать будет неинтересно, то вряд ли я за него возьмусь. Насколько интересные макеты вы мне можете предложить?

Технологии, которыми я владею и использую

vscode
photoshop
Word Press
browsers
figma

Некоторые из моих работ

Салон красоты

Подробнее... Посмотреть

Туры в Грецию

Подробнее... Посмотреть

Подушки для беременных

Подробнее... Посмотреть

Социальный приют

Подробнее... Посмотреть

Кто выбирает мои навыки

15 %
Программисты
25 %
Вебдизайнеры
20 %
Обычные люди
40 %
Вебстудии

Почему они выбирают меня?

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

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

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

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

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

Предпочитаю писать все с нуля под каждый конкретный проект, либо использовать свои собственные наработки. Фреймворки по типу 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.

Максимально возможное использование каскадных таблиц стилей в реализации элементов дизайна.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отзывы

ООО "Профи-Арт" (вебстудия)
Заказали верстку psd макета. В обговоренные сроки получили результат отличного качества div'ной верстки, все наши пожелания учтены, шаблон идентичен дизайну, страница легкая, код читается легко. Вообщем рекомендуем, отличная верстка.
Анна С. (вебдизайнер)
Андрей отлично справился с работой.
Сроки не нарушил. Все обговорили сначала — вопросов потом не задавал, а просто в срок сдал работу на отлично.
Буду обращаться в дальнейшем и другим советую.
Ирина Р. (вебдизайнер)
Выражаю благодарность Андрею за профессиональную верстку сайта. Все было сделано в оговоренные сроки, как мы изначально и договорились. Хорошее понимание задач клиента. Плюс видно, что человек получает удовольствие от своей работы — считаю, что это важно. Рекомендую!
Ольга П. (частное лицо)
Спасибо большое Андрею! За его профессионализм и терпение . Все сделал качественно как я просила. И даже после окончания заказа, помог с некоторыми деталями. Уверенна что у него большая очередь, но он все равно все делает в срок! Не надо долго объяснять что вам нужно, человек с полуслова это делает, можно даже не волноваться. + вежливое общение, что безусловно очень приятно. Спасибо за помощь!
"Хорошая идея" (вебстудия)
Определённо рекомендуем данного исполнителя. Было много просьб по корректировкам с нашей стороны, которые не входили в обязанности Андрея, однако, всё работа с его стороны была выполнена в срок на высоком уровне. Обязательно будем обращаться ещё.
Инна Л. (частное лицо)
Нужно было сверстать небольшой проект.
Если честно, не ожидала, что настолько хорошо и быстро выйдет. Сразу же нашли общий язык. Работой доволен. Однозначно рекомендую данного исполнителя.
Павел Е. (частное лицо)
Впервые встретил такого верстальщика который полностью может воплощать то, что ему прописывается в ТЗ. Передал ПОЛНОСТЬЮ мобильную версию сайта как это было удобно мне и уверен совершенно не было удобно ему. На связи всегда 24 на 7. Очень быстрое выполнение поставленных задач не оттягивается даже на день. Очень пунктуальный исполнитель во всех планах, все объяснит, расскажет, покажет и сделает в лучшем виде.

Что требуется для заказа верстки?

  • Макет
  • Техническое задание
  • Дополнительные материалы

    Для оценки объёма работ, мне нужен макет в формате любой графической программы (Photoshop, Figma и др.), на котором будет отражено, как должен выглядеть будущий сайт.

    Все сайты в настоящее время желательно делать адаптивными, поэтому в идеале я выделяю как минимум три варианта дизайна под различные ширины:

    • - для десктопа (ширина экрана более 769 пикселей;
    • - для планшета (от 321 до 768 пикселей;
    • - версия для самых маленьких экранов мобильного телефона (320 пикселей)

    Но это моё условное деление, поэтому строгой привязки к этим диапазонам нет.

    Я понимаю, что не каждый из вас (касается обычных людей) готов заплатить дизайнеру дополнительно к десктопу ещё и за дополнительные версии (обычно дизайнеры берут за адаптивные версии +50% к стоимости десктопного дизайна), поэтому в случае отсутствия планшетной и мобильной версий, я адаптирую исходный макет самостоятельно под мЕньшие размеры. Однако, сразу предупреждаю, что моё видение адаптивных версий и ваше может отличаться, поэтому, если вы не предоставили мне планшетную и мобильную версии и вас не устроило моё видение, то правки оплачиваются дополнительно к оговоренной ранее цене.

    В техническом задании (ТЗ) необходимо подробно описать функционал будущего сайта.

    К примеру:

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

    Если ТЗ отсутствует, ничего страшного, после ознакомления с макетом я сам уточню у вас некоторые моменты. Многие вещи для меня вполне очевидны и обычно не нуждаются в дополнительном описании.

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

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

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

Для оценки объёма работ, мне нужен макет в формате любой графической программы (Photoshop, Figma и др.), на котором будет отражено, как должен выглядеть будущий сайт.

Все сайты в настоящее время желательно делать адаптивными, поэтому в идеале я выделяю как минимум три варианта дизайна под различные ширины:

  • - для десктопа (ширина экрана более 769 пикселей;
  • - для планшета (от 321 до 768 пикселей;
  • - версия для самых маленьких экранов мобильного телефона (320 пикселей)

Но это моё условное деление, поэтому строгой привязки к этим диапазонам нет.

Я понимаю, что не каждый из вас (касается обычных людей) готов заплатить дизайнеру дополнительно к десктопу ещё и за дополнительные версии (обычно дизайнеры берут за адаптивные версии +50% к стоимости десктопного дизайна), поэтому в случае отсутствия планшетной и мобильной версий, я адаптирую исходный макет самостоятельно под мЕньшие размеры. Однако, сразу предупреждаю, что моё видение адаптивных версий и ваше может отличаться, поэтому, если вы не предоставили мне планшетную и мобильную версии и вас не устроило моё видение, то правки оплачиваются дополнительно к оговоренной ранее цене.

В техническом задании (ТЗ) необходимо подробно описать функционал будущего сайта.

К примеру:

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

Если ТЗ отсутствует, ничего страшного, после ознакомления с макетом я сам уточню у вас некоторые моменты. Многие вещи для меня вполне очевидны и обычно не нуждаются в дополнительном описании.

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

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

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

Связаться со мной

Контакты
Отвечаю ежедневно
с 10:00 до 22:00