Задать вопрос
@Pega
верстка

Как вы начинаете вёрстку сайта?

Сначала описываете полностью структуру сайта, а потом пишите CSS стили, или пишите стили постепенно, например написали разметку header'а - написали для него CSS, написали контентную часть - написали для него CSS и т.д.?
  • Вопрос задан
  • 46757 просмотров
Комментировать
Подписаться 224 Оценить Комментировать
Решения вопроса 1
dunmaksim
@dunmaksim
Технический писатель
  1. Создаю каталог для проекта
  2. Инициализирую Bower
  3. Устанавливаю нужные пакеты, например, Twitter Bootstrap, Angular, jQuery и т.д.
  4. Ставлю Grunt, плагины для него и т.д.
  5. Запускаю EMACS и создаю index.html
  6. С помощью Emmet создаю шаблон, который уже начинаю заполнять.
  7. В каталоге src создаю папки less, js и т.д.
  8. Попутно пишу задачи для Grunt
  9. Если в выбранном фреймворке не хватает какого-либо класса для стилизации элемента, сначала описываю стили прямо в шаблоне, в свойстве style. Затем при необходимости выношу их оттуда в LESS в виде одного или нескольких классов.
  10. ??????????
  11. PROFIT!!!
Ответ написан
15 комментариев
15 комментариев
Пригласить эксперта
Ответы на вопрос 29
torrie
@torrie
Всё знаю, всё умею
В первую очередь делаю сброс css-стилей.
Затем делаю вёрстку общих блоков - просто структура из div'ов с нужными ширинами, высотами согласно макету, залитых разными цветами. Стараюсь все div'ы(когда что-то в строчку) делать inline-block'ами. Получается цветная такая структура будущего сайта. Каркас готов.
NDrl9VkCyDvemP.jpg

Начинаю углубляться в каждый блок - располагать в нём нужные элементы. В зависимости от сложности их расположения делаю какие-то блоки position:relative, но чаще всего всё упирается просто в отступы.
Ответ написан
3 комментария
3 комментария
increment_of_panfil
@increment_of_panfil
Программист, разработчик, дизайнер
Создаю минимальную разметку с базовыми элементами и пишу для них CSS.
Потом добавляю в разметку остальные элементы и пишу CSS.
И так далее.
Ответ написан
Комментировать
Комментировать
SanDiesel
@SanDiesel
HTML CSS JS
Обычно все начинается с критики в адрес дизайнера...это единственное отличие моей методики от вышеуказанных способов)
Ответ написан
Комментировать
Комментировать
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
1) Захожу сюда codepen.io
2) Жмякаю New Pen
3) Создается новый пен где уже все настроено под меня (SASS/отступы/лайвапдейт и так далее).
4) Верстаю
5) ...
6) PROFIT!
Если верстка многостраничная, то один пен делаю глобальным (SASS переменные/общий JS код) и линкую его в другие пены. + можно все это дело форкать до потери пульса, и показывать ссылки заказчику (ссылки все приватные, если имеется PRO аккаунт). Особенно удобно, когда имеется несколько вариантов анимации, то просто делаю 2-3 форка и даю ссылки, а человек наглядно сравнивает все.
Ответ написан
15 комментариев
15 комментариев
@cccr85
Мой первый ответ здесь, постараюсь помочь, имею опыт верстки около 5ти лет. Все что написали выше, интересно, и безусловно полезно. Я напишу о другом. О скорости. Я пришел к выводу, что чтобы ускорить верстку, нужно по возможности работать в одной программе, и постараться минимизировать переключение между ними. Работаю на двух мониторах, и все равно такой принцип значительно помогает ускорить процесс. Работаю так:

1. Открываю макет в PS, и нарезаю его, попутно думаю как и что я буду делать, как я назову элементы.
-- У меня есть макет и набор картинок --
2. Копирую весь текст из макета в текстовый файл, и в нем делаю html. Написал строку для zen, развернул, перенес текст из файла ниже. На втором мониторе открыт макет, туда я просто смотрю.
-- У меня есть макет, набор картинок и html --
3. Копирую весь html в css, и удаляя создаю болванку для стилей. Например у меня есть такой участок:

<ul class="b-pages">
    <li class="b-pages-item m-active"></li>
    <li class="b-pages-item"></li>
</ul>


и с этого html я делаю такую болванку:

.b-pages {  }
.b-pages-item {  }
.b-pages-item.m-active {  }
.b-pages-item:hover {  }


-- У меня есть макет, набор картинок, html и файл стилей с не заполненными правилами --

4. Этот шаг самый не оптимизированный, и занимает наибольшее время. На одном мониторе у меня открыт PS на втором браузер с консолью, мне приходится работать с двумя программами, с PS и браузером, я копирую стили из макета, и вставляю в css. Попутно поправляю отступы, размеры до PixelPerfect. + пишу js.

-- работа готова --

Буду надеяться, что мой опыт будет вам полезен.
Ответ написан
4 комментария
4 комментария
@altra
Сначала все на бумаге. Иногда с применением цветных карандашей для background'ов или border'ов.
А вообще, делаете сетку с минимальной ячейкой и от нее погнали. Идеально подойдет excel.
Ответ написан
8 комментариев
8 комментариев
RainMEN
@RainMEN
HTML/STYLUS/JADE/JS/Laravel/Joomla/DLE и т.д.
Верстаю не так давно, верстаю не так часто, но все же верстаю.

Раз все начали с нуля, а именно с PSD макета, тоже начну с этого момента.

1. Оцениваю макет, составляю для себя базовую разметку, определяюсь какие главные блоки присутствую, и что должно происходить если их нет.
2. Оценив какие блоки необходимы, и прикинув структуру сайта иду csstemplater.com/ генерирую по своей структуре HTML/CSS шаблон, если это конечно не LP
3. Создаю директорию c названием сайта в openserver, в ней создаю директорию HTML , а внутри по шаблону
  • psd- что бы не потерялись, мало ли когда нужно дорисовать что то.
  • css
  • js
  • less
  • fonts
  • img - для компонентов шаблона
  • image - для временного наполнения (слайдеры, изображения в статьях и т.п.)
  • shop/личный кабинет - иногда делю макет на интерфейсы, и раскидываю по папочкам для дельнейшей навигации

4. Закидываю скачанный шаблон по папкам, вырезаю оттуда reset-ы, так как уже имеется отредактированный и перенесенный в less
5. Создаю main_site.less - подключаю сюда все все нужные мне less файлы, template.less- прописываю сюда все структурные элементы (header, footer и т.д.), ui.less - обычно если проект не сложный сую сюда все оформление, иногда разделяю все на отдельные блоки, menu/portfolio/modal/btn/ и т.д.
6. Настраиваю компилятор Less в PHP шторме для текущего проекта, что бы компилировался только файл main_site.less в папку css
7. В основном использую getuikit.com, ну больше он мне по душе чем бутстрап, скачиваю и раскидываю файлы по папкам, правлю пути в index.html, попутно добавляю комментарии
8. Открываю и смотрю PSD шаблон сайта на наличии не стандартных шрифтов, если шрифты есть в www.google.com/fonts, то подключаю их, иначе www.fontsquirrel.com, и раскидываю файлики по папкам
9. Дальше используя Emmet создаю базовую разметку если это LP(header/footer/slider и т.д.), если нет, то начинаю с самого верха делать разметку элементов (logo/slogan/phone/login-widjets и т.д.) попутно добавляю less код в нужные из файлов.
10. Верстаю до конца все, что есть в макетах. Затем по необходимости создаю шаблон для CMS.

ЗЫ: Файлики что сделал не минимизирую, только по желанию заказчика, ибо все нормальные фремворки и CMS умеют объединять css и js файлы в 1, попутно минимизируя на лету. Заказчику отдаю все что сделал включая исходники.
Ответ написан
Комментировать
Комментировать
denegny
@denegny
с чашечки кофе), идея должна торкнуть
Ответ написан
Комментировать
Комментировать
@AndreyMyagkov
Для несложных классических сайтов:

1. Создаю HTML - каркас сайта (шапка, сайдбары, подвал итд)
2. Прорабатываю шапку и подвал. Режу картинки для шапки и подвала. На этом этапе HTML шапки и подвала готовы.
3. Быстренько выдираю названия стилей из HTML (использую сервисы типа bearcss.com , html2css итп)
4. Начинаю CSS: сброс стилей + из пункта 3
5. Быстренько выдираю CSS для шапки и подвала из PSD (использую плагин CSSHAT), остальное ручками
6. Шапка и подвал готовы! На этом этапе посути готов каркас как для главной, так и для внутренних страниц, причем очень быстро и уже можно что то показать!
7. Прорабатываю контентную часть поблочно (выполняю пункты 1-5 для каждого блочка)
8. Все иконки, декор запихиваю в спрайт, фотки и большие изображения можно прогнать через сервисы сжатия типа tinypng tinyjpg
9. Проверяю готовый макет на pixelperfect, в разных браузерх, вношу правки
10. PROFIT!
Ответ написан
Комментировать
Комментировать
Igor-Maf
@Igor-Maf
Senior Front End developer
1. Настраиваю gulp на основные таски (конкатенация, минимизация, удаление неиспользуемого, кросс-браузерность, sass и т.д.)
2. Подключаю через bower необходимые "модули", например, normalize.css или фрэймворк
3. Выстраиваю архитектуру кода (просто независимые блоки в отдельную директорию, например, "modules", или "pages" для стилей особенностей отдельных страниц), в корне css главный файл стилей, в котором осуществляется импорт всех модулей (например, файл с переменными цветовой палитры или файл с mixin-ами).
4. Подключаю необходимые шрифты, в основном, через специальный миксин.
5. В главном файле стилей описываю основные стили для типографики, в общем всё, что связано с селекторами типа.
6. Если дизайнер предоставляет styleguide, то начинаю верстать страницу именно с него, а именно, по независимым блокам (где это возможно, от меньшего к большему) используя БЭМ методологию.
7. По ходу дописываю задачи для менеджера задач, например, для скриптов или картинок, собираю необходимый package.json, bower.json.
8. Собственно этап по-блочной верстки.
9. Собираю конструктор из готовых блоков и элементов соответственно макету.
10. Проверяю кроссбраузерность, pixel perfect.
11. Этап исправления деталей

Исходя из формулировки вопроса ответ:
поэтапно, сначала описываю структуру одного блока, пишу ему стили, перехожу к следующему.
Ответ написан
Комментировать
Комментировать
darkrain
@darkrain
У меня есть уже своя html+css заготовка.

1) Копирую заготовку в новый проект
2) Долго и нудно пишу html, ненавижу когда много мелких элементов на макете
3) Режу картинки, спрайты
4) пишу css, попутно иногда правлю html

Но у меня уже опыта много, лет 9 уже как. Поэтому я заранее знаю что где и как будет, не гадаю, этот опыт позволяет мне не писать css вместе с html. Получается очень быстро. И я использую всякие бутстрапы только по требованию. Считаю излишними во многих случаях.
Ответ написан
1 комментарий
1 комментарий
@dimash07
Просто устанавливаю будущий дизайн (черно-белый) на фон сайта(background: url('###') center top). Вписываю все нужные html теги. Добавляю классы CSS. Открываю эту странцу в Google Chrome где установлен плагин DevTools Autosave. И тупо верстаю прямо в браузере. Очень легко и быстро!
Ответ написан
2 комментария
2 комментария
iormark
@iormark
Для чего юзать bower и тп. Главное либу установить ленятся, а bower ставить не ленятся, jQuery и прочие либы лучше ставить с яши или гугла. Использовать среду типа NetBeans, WebStorm, Eclipse и тп. Каким то хламом типа "первого ответа" проекты засорять жесть. Twitter Bootstrap можно использовать как пример для реализации, а не лепить на нем основу)

Есть БЭМ отлично сохраняет проект на годы, двигло можно не использовать, сама идея годится чтобы не делать из проекта помойку.
Ответ написан
Комментировать
Комментировать
serjikz
@serjikz
web-developer
Верстаю часто, верстаю много (дизайнерю тоже, но чуть меньше). 7 лет занимаюсь этим. Работал и с table-вёрсткой, и все косяки float, inline-block и тп уже давно знал, хотя и не считал это всё косяками, а воспринимал как должное. Надеюсь, кому-то помогу своим опытом (не только техническая сторона)

1. Необходимо чётко узнать требования по проекту (будет ли он адаптивным, подразумеваются ли на нём какие-либо динамические блоки и тд и тп)
2. Если проект - ленд на 12 экранов и за него платят 2000 рублей - заказчика вежливо отправляю куда-нибудь по-дальше, чтоб хотя бы денег накопил и совести набрался.
3. Смотрю на дизайн (в основном достаточно быстро, минут за 10) для того, чтоб понять, какие элементы реально сделать, а какие нет (смотря какие условия опять же, явно все тутошние читатели знают про адаптивку). Если что-то unreal - чётко расписываю заказчику что не реально и почему, если контактирую с дизайнером и есть относительная свобода - прошу перерисовать конкретные элементы.
4. Открываю ФШ и начинаю приводить в порядок все слои (с режимами наложения, с составными фонами для 1 блока и тд и тп). Если есть режим наложения на какой-то элемент (обычно Умножение чтоб не было видно белого фона) - топаем к дизайнеру и начинаем ему выносить мозг если изображение сложное (если нет - сам вырежу, если есть подобное в интернете - нахожу png и далее...) Все слои для блока конкретного сливаю воедино, тогда и макет меньше весит и вырезать проще будет (конечно зависит от ТЗ всё, мож там где-то параллакс и надо двигать туда-сюда всё)
5. "Обрезанный" psd ложу на Creative Clound
6. Пока всё это дело заливается - запускаю Brackets и пишу весь необходимый html вместе с текстом.
7. Залился psd, а html уже написан. Топаем в css, открываем Extract и понеслась по стилям гонка
8. Проверка на адаптивность и кроссбраузерность
9. Продакшн

P.S. Стараюсь всегда минифицировать html и css. Если есть хоть чем-то одинаковые блоки на страницах - один класс для них и только отталкиваясь от расположения меняем их. Напимер: .btn с градиентом, тенью, цветом и смещением текста, а также :hover пишу всё ближе к началу css дока, а дальше если кнопка где-то больше по отступам либо по шрифту: nav .btn {необходимые отступы}
P.P.S. 100% комментарии. Чаще всего в css.

Пожалуй, всё.
Ответ написан
8 комментариев
8 комментариев
talgautb
@talgautb
front-end developer
1 - создаешь свой шаблон 1 раз и надолго (и по мелочи добавляешь в него плюшки) (готовый набор - структура, настроенный bower и gulp, к примеру) можно сразу в yoman сделать
2 - выкачиваешь шаблон (копируешь/sublime fetch plugin/ yo my_template)
3 - устанавливаешь зависимости, плагины (1 строчка в консоли - bower i && npm i)
4 - начинаешь верстать
5 - ???
6 - PROFIT!!
Ответ написан
Комментировать
Комментировать
jMas
@jMas
Full stack developer
Разбиваю макет по модулям (элемент списка + список, шапка, навигация, форма, кнопка). Определяю пересечения модулей (например два блока на разных страницах очень похожи - для них один модуль и просто у одного из них в HTML будет указан дополнительный класс .module.module-supermodule).

Завожу несколько файлов:
app.css - только импорты для модулей.
@import "base.css";
@import "icon.css";
@import "btn.css";
/* ... */
@import "some-module.css";

base.css - любые базовые стили не привязанные к классам, обычно стили для тегов, никаких намеков на классы или id.

Верстаю сначала помодульно. Модуль обычно включает в себя только классы ограниченные определенным префиксом, например .nav- или .sidebar-.

Распространенные модули, которые кочуют из проекта в проект .btn-, .icon-, .form-, .nav-. Принцип организации модуля прост: внутри строго использовать классы с определенным префиксом. Искать такой модуль в списке CSS файлов очень просто - префикс и есть название файла, в верстке понять что элемент принадлежит к определенному модулю тоже достаточно просто - у всех классов этого модуля есть этот префикс. Если модуль - это список, допустим .list: в модуле сначала будет идти .list-item, а затем .list .list-item - для того чтобы можно было использовать .list-item отдельно от родителя .list, иногда бывает очень полезно.

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

Для сборки модулей в один файл использую конкатенатор, умеющий смотреть импорты и вытаскивать CSS файлы по ним. Если использовать LESS или SASS задача вообще элементарная. Я просто знаю, что люди которым я отдаю верстку не часто знакомы с LESS и SASS, чтобы отдавать стили в таком виде.

По сути премудрости старта заканчиваются. Дальше все зависит сугубо от вашего профессионализма.

P.S.: Кстати, почему то все сбрасывают стили - я этого никогда не делаю. Достаточно знать особенности стандартных стилей, тщательное тестирование в разных браузерах. Получается на деле стандартные отступы заданные браузером наоборот помогают. Тем более прошли те времена, когда был ощутимый разброс в стандартных значениях. В общем странно.
Ответ написан
4 комментария
4 комментария
seregali
@seregali
  • Создаю проект на локале
  • Изучаю дизайн сайта
  • Пишу структуру html
  • После используя плагин perfectPixel - начинаю прописывать стили прямо в браузере (затем уже переношу в отдельный файл css)

Основной браузер у меня chrome.
Ответ написан
Комментировать
Комментировать
PiSaiK
@PiSaiK
IT куратор
Жесть какая, читаю комментарии и понимаю, что современный верстальщик это не профессия, недопрограммист, а как тот кот, который занимает себя лизанием.
Ответ написан
2 комментария
2 комментария
leto2015
@leto2015
Веб-разработчик
Спасибо добрые люди за подробные комментарии. Очень много полезного и интересного узнал.
Ответ написан
1 комментарий
1 комментарий
@maxyc_webber
Web-программист
smacss.com
Ответ написан
Комментировать
Комментировать
yar-ikarus
@yar-ikarus
Аномалия
1) Завожу чистенький scss-проект (уже заранее подготовленный)
2) добавляю проект в prepros
3) собственно, верстаю, необходимые миксины добавляю по мере их надобности
4) пишу js-ники
Готово
Ответ написан
Комментировать
Комментировать
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
1. CSS - Сброс параметров по-дефолту.
2. Последовательный вывод списком всех базовых типов (h1,h2 и т.д.)
и нужных блоков с настройкой верстки на каждый новый тип/объект/блок.
Проверка вложенности и прочие "грабли". Запуск в разных браузерах.
3. Верстка сеток страниц с подготовленными стилями (в п.2)
4. Профит! (js - добавляю после, если необходим...)
Ответ написан
Комментировать
Комментировать
YuriMolotov
@YuriMolotov
Дизайн и вёрстка сайтов — Molotov.pro
Т.к. в первую очередь дизайнер, верстаю поэтапно по визуальным разделам, сразу со стилями, изображениями, страницами и пр.:
1. Шапка и главное меню.
2. Футер.
3. Баннеры/виджеты/боковое меню.
4. Вся главная.
5. Карточки товара.
6. Каталог.
7. Страницы товара.
8. Корзина и контакты.
9. Окна/лайтбоксы.
10. Информационные страницы.

Каждый этап сразу полностью тестируется и правится.
Ответ написан
Комментировать
Комментировать
@vvrider
Ikeya TK
1) Смотрю сайты которые есть по данной тематике
2) Смотрю на чем сайты выше реализованы
3) Выбираю : использовать CMS или Верстать с нуля
4) Если CMS - устанавливаю на хостинг и тестирую ; Редактирую под себя / Если обычная верстка - Создаю структуру папок , делаю style.css, index.html подключаю Bootstrap и Jquery и го ебашить в Sublime код
5) Настариваю CMS , редактирую код / Для обычной верстки тестирую код в браузере
Ответ написан
Комментировать
Комментировать
makecode
@makecode
В зависимости от задачи, нужен ли работающий сайт сразу на PHP (ну, например элементарная отправка формы или если данные в базе и т.п.).
Если не надо PHP, создаю папку и в ней папки style, i, script. Просто верстаю.
С вариантом PHP тоже самое, только на локал домен или где-нибудь создаю тестовый домен на своем хостинг-провайдере.
Ответ написан
Комментировать
Комментировать
gunlinux
@gunlinux
Freelancer
stark_workflow $projectname
#start_workflow_code примерно такой код
cd ~/git/works/
git clone ~/git/workflow newproject
cd newproject
npm install


subl .src/base.html
grunt watch

Одна проблема, еще не выработал единый подход к организации grunt проекта.
Для верстки Jinja2 шаблонизатор + less, ну и всякие lint
Ответ написан
Комментировать
Комментировать
@Kindzoku
Как многие уже говорили:
1) Gulp
2) reset.css, bourbon, neat (скорее всего вам не нужен bootstrap)
3) обязательно БЭМ. Без БЭМ всё будет плохо. Это лишь вопрос времени. Верстать нужно по компонентам.
4) повторяющиеся мелочи в atomic. В ВЭМ не нужны правила типа cursor: pointer, text-align: center. Создаём .pointer, .text-center.
Ответ написан
Комментировать
Комментировать
HelenStar
@HelenStar
Начинающий frontend
У меня все проще:

1. Открываю макет, затем изучая его, мысленно разбиваю его на основные блоки (составляю базовую кодовую разметку), определяю повторяющиеся блоки, заранее отмечая в голове у себя где мне понадобятся общие классы, а также быстренько прикидывая как это все будет выглядеть на мобиле (увы, но всегда просят сделать адаптив или мобильную без макетов). На этом с изучением макета все. Уходит на все где-то пара минут, если простой ленд. Если это многостранничник или интернет-магазин, то тогда изучаю сразу все макеты, чтобы также определить для себя, что из блоков и стилей отправится в general.css, а что будет в персональных файлых стилей отдельных страниц, чтобы потом не объединять файлы стилей, не убивать лишнее время.
2. Открываю breckets, набрасываю сразу базовую разметку всей страницы с учетом того, что это будет адаптив (или респонсив) с помощью удобного и любимого emmet'а.
3. Стилизую верстку (также сверху вниз блок за блоком).
4. Делаю адаптив. С учетом того, что уже при верстке декстопа я сразу прикидываю какой у меня будет мобильная версия и верстаю с учетом адаптива или респонсив, то адаптив могу сделать и за рабочий день на все страницы, если только не появятся какие-нибудь сюрпризы с кроссбраузерностью на всяких iOS Safari (которую как front я уже просто ненавижу за какие-то полгода со всеми ее сюрпризами).
5. Тестирю, допиливаю все, что только можно допилить.

Это если просто верстка. Если под ключ с админкой (в моем случае modx), то:
1. Прикидывая и набрасывая верстку также прикидываю какие элементы вынесу в общие чанки, какие будут выводиться всевозмножными сниппетами и т.д.
2. Делаю верстку, после утверждения переносу в админку, разбиваю все на чанки, доп поля, ставлю необходимые компоненты и т.д.

В общем, как-то так. :-)
Ответ написан
Комментировать
Комментировать
Amirez
@Amirez
В чем секрет кота Бориса?
  1. Начинаю с клонирования своего репозитория с github, в нем всё есть, файловая структура, демо-файлы, миксины, сбросы, зависимости для разработки(gulp и т.д.).
  2. Пишу в консоли npm i и понеслась.
  3. Изучают макет, выбираю основной цвет, все шрифты, строю структуру(почти всегда на бумаге), выделяю одинаковые блоки и элементы, думаю как их стилизовать, чтоб не повторять код.
  4. Начинаю верстать
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Senior Frontend Developer / Старший разработчик Vue.js
Webbankir
До 350 000 ₽
Frontend Developer (Nuxt)
ИП Раковский
До 150 000 ₽
Преподаватель курсов программирования
CODDY • Москва
от 25 000 до 50 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Верстка Flutter + API
21 нояб. 2024, в 22:21
3000 руб./в час
Разработать Custom Speech-to-text Operator на Apache Flink
21 нояб. 2024, в 21:42
100000 руб./за проект
Сделать видио поздравления с субтитрами
21 нояб. 2024, в 21:30
500 руб./за проект
Ещё заказы