Как правильно, быстро и без вырванных волос сверстать html css из шаблона?

Question

[sa24]

Мой порядок таков:
1) Разбить всю страницу на блоки, header, главный блок, рекламный блок и т.п.
2) Начать делать
3) Приступил
4) Ступор...
Я прекрасно знаю как сверстать каждый блок, но как дело доходит до страницы все теряется, как лучше поступить?

Answer 1

[Паша Тарасенко]

Я делаю сначала html разметку всех страниц, затем определяю стили шрифта для p, a, h1, h2, h3 и т.д Затем делаю сетку всех страниц, после чего сверху вниз верстаю все элементы с уже рабочей сеткой. Элементы сетки нельзя позиционировать абсолютно. Если все так плохо, то на HtmlAcademy можно пройти эпичный курс Кексби, там поэтапно делается сайт

Comments

[sa24]

screenshot.ru/upload/image/ZWQp Начал с Яндекса, применение границ для разметки хорошая привычка?

[Паша Тарасенко]

sa24: да, нам на базовом курсе показывали сетку с рамками, так наглядней все видно

[sa24]

Паша Тарасенко: А есть доступ без оплаты?

[Паша Тарасенко]

sa24: к сожалению нет, эта часть платна, но она того стоит

[sa24]

Паша Тарасенко: Спасибо

[sa24]

Паша Тарасенко: Тогда вопрос насчет скорости, чтобы я равнялся, или хотя бы приблизился, за сколько минут/часов вы накидаете макет тостера/yandex/ другого сайта? Без изображений левого окна, аватарки и рекламных блоков?

[Паша Тарасенко]

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

[sa24]

Паша Тарасенко: Спасибо за хороший и развернутый ответ

Answer 2

[xmoonlight]

1. Сетка (+подключение необходимых js/css) с расположением динамически подгружаемых блоков. Используем https://github.com/xmoonlight/includeHTML
2. Общий CSS
3. Отдельные блоки (меню, header, footer и т.д.)
4. Добавление стилей для блоков в общий CSS по мере необходимости.

В итоге - имеем несколько html-файлов с разными частями кода для каждого из блоков, которые будут грузиться согласно сетке расположения в единую HTML-страницу.

Answer 3

[Sanes]

Или сверху вниз или от общего к частному.

Comments

[sa24]

Первое ясно, возьмем тостер, верхний блок с переходами на проекты TM, сделано, дальше делим оставшуюся часть на 3 блока и понеслась, а второй вариант как?

[Sanes]

sa24: Сначала структуру блоков, потом заполняете каждый.

[sa24]

Sanes: Такой подход применяю с первым вариантом:)

Answer 4

[lionkka]

Ступор скорее от боязни, как с английским, просто посмотрите видео как верстают полностью страницу. Например такое https://youtu.be/7gjxE_VEA_4
Или есть целый сайт, где вы просто смотрите как кто-то что-то делает https://www.livecoding.tv/

Comments

[sa24]

Спасибо за видео!

[Андрей К]

Здесь множество примеров live-вёрстки на русском:
webdesign-master.ru

Answer 5

[Alexej Simakov]

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