Как верстать с шаблона правильно?

Question

[Денис]

Я новичок во фронтенде, поэтому многое не могу понять, а интуиция не помогает. Нахожу шаблон сайта и хочу сверстать для практики, чтобы было в точности с оригиналом. Но не могу понять как это сделать, ведь шаблоны разные, какие-то шириной в 1600px, некоторые на 1980px. Как правильно верстать в таком случае?

Answer 1

[dzenn]

После того как сверстаете десктопную версию страницы сравните макет с помощью плагина для хрома Pixel Perfect. Получится не 1в1, но результат будет максимально приближен)

Answer 2

[Александр]

dzenn прав, использование плагина Pixel Perfect отлично помогает для определения соответствия верстки макету. Также рекомендую ознакомится с Responsive Web Design (RWD) и Adaptive Web Design (AWD). От этого зависит то, с чего начинать, например, с десктопа к мобильному или от мобильного к десктопу и т.д. Можете как вариант глянуть статью Типы макетов

Answer 3

[Евгений]

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

min-width: 1024px;
max-width: 1200px;

Далее уже блоки внутри обертки делаете резиновыми

Comments

[Сергей Горячев]

Нафига min-width: 1024px; ??? Задолбается адаптировать потом.

[Евгений]

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

Answer 4

[EVGEK]

Смотри стиль оригинала что бы было понятнее . F12 в помощь