Вёрстка и программирование
Вёрстка - это создание и настройка видимой части сайта, той, которую показывает браузер посетителю и с которой этот посетитель взаимодействует. Строится вёрстка на трёх китах: HTML, CSS, JavaScript.
Как правило вёрстке предшествует разработка дизайн-макета, по которому делается вёрстка, но это не обязательно, можно верстать "на лету". Всё зависит от навыков верстальщика и того насколько подробно составлено техническое задание на разработку сайта.
Под программированием тут подразумевается так же только та часть сайта, с которой взаимодействует пользователь, помимо этого есть большая часть сайта - бэкэнд - её программируют уже другие специалисты.
Обо мне
Привет! Меня зовут, Александр. Я HTML-верстальщик.
Верстаю как "вручную" на HTML, CSS, JavaScript, так и на конструкторе сайтов Сreatium. Это может быть как лендинг, так и большой сайт на несколько страниц и с любой темактикой. Отдельно могу выделить вёрстку email-писем.
Верстаю с 2019 года. До этого занимался SMM и изучал SEO. Так что про разработку и продвижение сайтов знаю давно и не понаслышке.
Как верстается сайт
РАЗМЕТКА
Сначала на языке разметки (HTML) пишется основа сайта, своего рода каркас. Пишется в соответствии с требованиями семантической разметки в будущем это поможет поиковым системам, сделать верный выбор 😉 и поднять позиции сайта выше в выдаче. Добавляются все нужные элементы: тексты, кнопки, формы обратной связи, картинки, видео и прочий контент. Весь медиа-контент оптимизируется, для достижения максимальной скорости загрузки страницы.🚀
СТИЛИ
На втором этапе на языке стилей (CSS) задаётся внешний вид страницы. Все элементы расставляются по своим местам, настраиваются цвета, размеры, отступы, добавляются несложные анимации и эффекты, настраиваются разные состояния элементов, например, вид ночной и дневной темы. Пишется всё это кроссбраузерно, то есть так чтобы во всех браузерах, даже очень старых и требовательных, 👴 сайт выглядел так как задумано дизайнером, а не так как удобно самому браузеру.
АДАПТИВНОСТЬ
На этом этапе продолжнается настройка внешнего вида сайта. Только теперь пишется всё так чтобы сайт выглядел на любых экранах, от мала 📱 до велика 🖥️, так как задумал дизайнер или твердит здравый смысл. Меняются размеры шрифтов, там где нужно меняется положение и даже порядок элементов, но теперь для каждого размера экрана отдельно. Мобильный трафик уже давно на лидирующих позициях в статистике, поэтому этому этапу вёрстки уделяется особое внимание.
ПРОГРАММИРОВАНИЕ
Настало время "оживить" страницу! Открытие закрытие всплывающих окон, "якори", отправка форм, переключение темы, сложные анимации, слайдеры, вкладки, меню-гамбургеры всё это и многое другое - JavaScript. Функционал пишется как с нуля, так и берутся готовые решения - плагины. Используется как чистый язык так и библиотека jQuery. Каждой задаче свой инструмент и решение! 🛠️ На этом этапе тоже учитываются требования кроссбраузерности и адаптивности.
Всё что я верстаю обречено на
-
Семантическую разметку, говорящую на языке поисковых роботов.
-
Адаптивность - одинаковый вид во всех браузерах и на любых устройствах.
-
Pixel Perfect - 100% попадание в макет, всё как задумал дизайнер.
-
Быструю загрузку - от 85 баллов по версии Google Page Speed Insights.