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

Наталья

Бакулина

Адаптивная кроссбраузерная HTML-верстка
с использованием современных инструментов

Познакомиться Бакулина Наталья
4
4 года работаю в команде специалистов Интенет-Лаборатории sopdu, продолжая повышать уровень знаний и умений
B
Отлично владею популярными инструментами для создания адаптивной кроссбраузерной верстки
Ps
Работаю с макетами любой сложности, дорабатываю дизайн: выравнивание по сетке, оптимизация изображений и пр.
Веду социальный проект
для некоммерческого детского объединения, участник конкурса сайтов для детей и молодежи

Мои работы

Автосервис
Автосервисmore_vert
Автосервисclose

Адаптивная верстка сайта с использованием фреймворка Materialize

HTML 5 / LESS / JQUERY

Посмотреть

Сайт массажиста
Сайт массажистаmore_vert
Сайт массажистаclose

Адаптивная верстка landing page с использованием фреймворка Materialize с последующей кастомизацией

HTML 5 / CSS 3 / JQUERY

Посмотреть

Интернет-магазин
Интернет-магазинmore_vert
Интернет-магазинclose

Адаптивная верстка большого объема (50+) страниц с использованием фреймворка Bootstrap

HTML 5 / CSS 3 / JQUERY

Посмотреть

Туроператор
Туроператорmore_vert
Туроператорclose

Адаптивная верстка сайта с использованием фреймворка Bootstrap с последующей кастомизацией

HTML 5 / CSS 3 / JQUERY

Посмотреть

Считалочка
Игра "Считалочка"more_vert
Считалочкаclose

Онлайн-игра для дошкольников и младших школьников

HTML 5 / CSS 3 / JAVASCRIPT

Посмотреть

Магазин тканей
Магазин тканейmore_vert
Магазин тканейclose

Адаптивная верстка главной страницы с использованием фреймворка Bootstrap

HTML 5 / LESS / JQUERY

Посмотреть

Ремонт квартир
Ремонт квартирmore_vert
Ремонт квартирclose

Адаптивная верстка с использованием фреймворка Materialize с последующей кастомизацией

HTML 5 / CSS 3 / JQUERY

Посмотреть

Кошачий питомник
Кошачий питомникmore_vert
Кошачий питомникclose

Адаптивная верстка с использованием фреймворка Bootstrap с последующей кастомизацией

HTML 5 / CSS 3 / JQUERY

Посмотреть

Отзывы

Вопросы

Что самое важное в верстке?
Узнать

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

arrow_upward
Как проверить качество верстки?
Узнать

Откройте страницу и посмотрите внимательно все элементы. Расхождения с дизайном допустимы, если только это диктуется расположением блоков по сетке, необходимой для адаптивности верстки. Сами же элементы: кнопки, шрифты, иконки и пр., должны выглядеть как в дизайне. Должны работать выпадающие меню, открываться модальные окна, прокручиваться слайдеры, поля и кнопки форм выделяются и подсвечиваются как было задумано. Посмотрите, как нажимаются кнопки и ссылки, как выглядят активные пункты меню, как меняются элементы при наведении мыши. Если на странице есть однотипные блоки (например, карточки товаров), они не должны быть идентичны. Верстальщик обязан заложить возможность вставлять в эти блоки разные по размеру картинки и тексты разной длинны, что обычно сразу отображается в верстке. Откройте эту страницу в разных браузерах, ее отображение должно быть одинаково.

arrow_upward
Как проверить адаптивность верстки?
Узнать

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

arrow_upward
Какую роль играет этап верстки сайта?
Узнать

Часто верстку недооценивают, что приводит к потере качества самого креативного дизайна и функционала. Верстка – это «лицо» сайта, вызывающее доверие (или же наоборот) посетителя. Плохая верстка может долго грузить сайт, «ломаться» по структуре, создавать неудобства при пользовании функционалом сайта. Верстальщик берет графическое изображение сайта и создает грамотный код, который потом программист «научит» делать нужные вещи. В создании сайта центральное место занимает верстка – трудоемкий и сложный процесс, требующий хорошего уровня владения знаний и современных технологий от верстальщика. Конечно, можно пользоваться разными конструкторами и шаблонами, но машинный код будет иметь множество недостатков, в то время, когда верстальщик напишет код грамотнее, короче и красивее. Создавая сайт, не старайтесь сэкономить на верстке, ведь это один из самых главных этапов создания вашего сайта.

arrow_upward

Написать мне

написать мне