Как научиться проф. верстать?

Question

[gleendo]

В общем, подскажите пожалуйста, как научиться профессионально верстать? Где можно почитать про лучшие практики верстки, про автоматизацию и т.д. А то html/ css я то хорошо знаю, сверстать отдельные элементы могу, а вот как эффективно верстать именно полный макет сайта, не очень понимаю. Сверстал я макетов 6-7, и не очень то доволен. Да и объясните, когда лучше использовать сетку, какую сетку лучше использовать?

Answer 1

[Odinokun]

Сверстал я макетов 6-7, и не очень то доволен

Я тоже в процессе обучения и то-же когда доверстаю сайт до конца, то он перестает мне нравится (имеется в виду код).
Просто в процессе верстки сталкиваешься с проблемами, ищешь инфу, решаешь проблему и когда заканчиваешь работу, то понимаешь, что если бы ты знал про решения проблем, то подошел бы к верстке совсем по другому.
Это и есть обучение через 10000 верстко/часов упомянутых выше Борисом Якушевым.

Comments

[Роман]

пресловутые "Атакможнобыло?" :)

risovach.ru/upload/2014/08/mem/kakoy-pacan_5947203...

Answer 2

[Борис Якушев]

Потратить 10.000 часов на верстку.

Comments

[gleendo]

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

[Борис Якушев]

con_: "автоматизация" для верстки я думаю это emmet, + макросы на основные элементы верстки.

Answer 3

[Антон Нагаец]

<не реклама но совет>
Посмотри на бесплатный курс HTML Academy там много интересного. Начиная с азов дойдешь и до полного макета.
не реклама но совет>

Comments

[Андрей Федоров]

Только учтите, что они учат писать невалидный код.

[Антон Нагаец]

Андрей Федоров: они дают основы, а пишите вы сами. Ради интереса смотрел задания и ответы на стене. 70% пишут не правильно потому, что не читают теорию и не пытаются подумать и сопоставить элементы в обоих окнах.
Это равносильно тому что вы предъявляете претензии к htmlbook.ru за то что их теги не валидны.

[Андрей Федоров]

Вы сами то проходили их тесты? Их проверка на правильность ответа принимает невалидный код. Значит, тот кто прошел их обучение будет верстать неправильно. А поскольку там задания элементарные, то проходят их в основном новички, у которых нет никаких знаний, поэтому вложить в их головы можно все что угодно. В итоге получается, что у новичков в головах основы заложены неверно. А переучиваться потом, как известно, сложнее. Поэтому я никому не рекомендую их сервис.

[Антон Нагаец]

Андрей Федоров: Я предложил вариант. Для старта он пойдет. По поводу не валидности обращайтесь к разработчикам сервиса.
По поводу верстать не правильно. Есть спецификации которые надо читать. Вы когда в начальных классах учились вы сразу делали математику идеально или читали почему именно так нужно делать ?

[Андрей Федоров]

Антон Нагаец: Конечно не делал математику идеально, но учитель не называл неверные ответы правильными.

[Александр Першин]

Мы бы с радостью ужесточили проверки, но пока никак. Дело в том, что проверки работают по DOM-дереву уже после того, как браузер обработал неверный код и всё "простил", дозакрыл теги и так далее. Выход простой - найти хорошую библиотеку-валидатор на js, чтобы работала быстро. Но пока такую найти не можем. Посоветуйте, если есть.

По поводу основ. Если есть конкретные претензии по фактическим ошибкам в теории - пишите, поправим. Но, очевидно, что теорию надо читать внимательно. И утверждение, что мы даём основы с ошибками - неверное.

Answer 4

[zuraavl]

Переходи на jade/haml и scss/sass/less/stylus, используй grunt/gulp работай все больше и страдай, что не можешь переделать тем людям все сначала, ведь они были так к тебе добры

Answer 5

[codingal]

То, что не нравится - это нормально. Через годик глянете на свой код и стыдно станет.
Сетку лучше использовать всегда, причем адаптивную - бутстрап, shelves - особой разницы нет. Нужен обязательно контейнер для центрирования и колонки, также клеарфикс и прочие необходимые полезности, которые ускоряют работу.

Comments

[gleendo]

Я вот все думаю о сетках..но не знаю точно, можно ли с помощью например bootstrap сетки сверстать любой макет или все таки нет?

[codingal]

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