Как научиться вёрстке сайтов с нуля?

Question

[Денис]

Знакомый решил освоить ремесло верстальщика, попросил помочь в этом деле.
Подскажите хорошую литературу для обучения основам вёрстки.
Желательно более менее современную.

Answer 1

[m08pvv]

htmlbook

Comments

[Павел Тысляцкий]

www.w3schools.com/

Answer 2

[Сергей Протько]

Как уже было сказано выше — htmlbook.ru. Там есть раздел «шаг за шагом» или практикум… его стоит просмотреть. Познакомиться с тегами что есть, со свойствами.

Дальше углубляться в понятие семантики, смотреть css фреймворки (Bootstrap и подобные) на предмет разметки и вообще… Потом просто взять какой макет (благо в сети фришных PSD макетов хватает) и верстать верстать верстать. Желательно что бы у него был человек, который сможет оценить проделанную работу и указать на недостатки.

В общем побольше практики, найти какой красивый сайтик и сверстать все с нуля например.

И последнее но не наименьшее — ему нужно будет попытаться одеть верстку на какой-то движок/проект. Обычно это хорошо помогает выявлять недостатки в структуре документа.

Answer 3

[mishapsv]

Из собственного опыта:
начинал с книг, статей, htmlbook - дало начальную базу, позволяло с большего править готовые шаблоны.
Потом появились интерактивные курсы:
- codecademy.com показались слабыми: пройти лишним не будет, но особо не продвинетесь.
- teamtreehouse.com - неплохие курсы, активно развиваются, но платные.
- htmlacademy.ru - очень крутые: отлично подается теория, много практики, основной раздел бесплатный. К тому же сервис русскоязычный.

У этих же ребят есть интенсив по верстке сайтов с нуля. Прошел его.
Если есть возможность оплатить - очень рекомендую. Реально вырастете за месяц. Плюс у вас останутся записи вебинаров и бесплатный доступ на все последующие интенсивы.
Могу поделиться промо-кодом "344a1a5b"(без кавычек) - скидка 800р.

Успехов!

Comments

[kk95]

толсто )

Answer 4

[Beliyadm]

И самое главное — не забывать делать рабочий макет под IE6 и wap 480*х, зря мы чоль страдали, пусть поколение понимает проблемы

Comments

[YandexGooglevich]

ооо дааа. надесь ты страдал долго. моё поколение уже пишет под ie11+, ахаха. а вы под 6-ой писали, не говоря уже о 8-ом. аххахаа

Answer 5

[Владимир]

Думаю что знакомство с фреймворками на этапе обучения и первых шагов будет лишним.
Как писали выше — htmlbook.ru и www.w3.org/
Так же могу порекомендовать css-live.ru/ и javascript.ru/ потому что опытному верстальщику необходимы хотя бы базовые знания о яваскрипте.
В качестве базового шаблона на начальном этапе я бы рекомендовал html5boilerplate.com/

Comments

[M1nstrel]

Почему на начальном. Использую Boilerplate в проектах постоянно. Шикарный набор.

Answer 6

[Vitali Borovik]

Хорошие видео уроки (англ):
tutsplus.com/course/30-days-to-learn-html-and-css/

Answer 7

[TipTop]

В дополнение к вышесказанному, лучше начинать верстать в IDE, например, от JetBrains — она будет на лету указывать на ошибки и недостатки верстки. Для новичка это будет особенно полезно.

Comments

[Сергей Протько]

+ LiveEdit будет довольно полезной плюшкой для новичка

Answer 8

[slimboy]

Сам начинал с этого учебника: http://www.postroika.ru/html/content2.html Может и не самый современный, но азы познавать лучше всего на самых простейших примерах. А уж зная технологии и прицнип, легко научиться новому.

Там и подача хорошая, и сам сайт теплый ламповый )

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

Успехов Вашему другу :)

Answer 9

[Сергей]

html.net тоже будет полезно посмотреть

Answer 10

[Вячеслав Плиско]

А вторым этапом должно быть освоение css фреймворка, а лучше парочки. Я мечтаю о верстальщиках, которые не будут каждый раз изобретать велосипед, словно верстают под хайлод, где каждый байт на счету.

Comments

[Денис]

Кроме Twitter Bootstrap можете что-то еще из фреймворков порекомендовать?

[Максим Маликов]

Есть еще хороший CSS фреймворк — HTML KickStart. Вот про него статья на хабре — habrahabr.ru/post/136897/

[Вячеслав Плиско]

Раньше я предпочитал классику www.blueprintcss.org/ и 960.gs/
Ах, ещё классику забыл html5boilerplate.com/ здесь целый сборник лучших практик от кучи разрабов, в том числе и по каркас для css.

[Михаил]

Денис: говорят, самый серьезный - foundation.zurb.com

Answer 11

[Михаил Лялин]

habrahabr.ru/blogs/webdev/77179/

Answer 12

[M1nstrel]

Вообщем, htmlbook.ru — да, стандарты — да. В отношении фреймворков добавлю еще initializr.com.
Он «из коробки» позволяет делать mobile first шаблоны, да еще и на последней сборке boilerplate.
Ну и про наших людей из «Веб–стандартов» не забываем.

Answer 13

[Sector9]

самое лучшее и дружелюбное из того что я видел!
https://dash.generalassemb.ly

Answer 14

[Nobles]

Для тех кто хочет получить знания, чтобы не разбираться самому в самоучителях, и сэкономить время и получить конкретные готовые знания и навыки, можно пройти онлайн курсы. Вот хорошие курсы по обучению верстке сайтов на HTML5/CSS3: rightblog.ru/htmlcourse

Answer 15

[Finecoder]

Посмотрите уроки Охрименко по html5+css3 , а так же по Bootstrap .

Answer 16

[Наталья Петрова]

Советую почитать книгу «HTML и CSS. Разработка и дизайн веб-сайтов» Дакетта Джона. Там намного проще понять все эти заковырки с HTML и CSS, и по итогу самостоятельно сможете сверстать сайт.
Еще одна подходящая книга — «HTML5, CSS3 и JavaScript. Исчерпывающее руководство» (4-ое издание (2014)) Дженнифер Нидерст Роббинс. В ней изучите техники создания сложных веб-страниц.
Также рекомендую отдельные курсы по HTML и CSS kursfinder.ru/html-css/ - можно выбрать как бесплатные, так и платные, в зависимости от вашего бюджета. Преподаватели вам там тоже накидают хорошей литературы:)
И также почитайте «Типичный верстальщик» (загуглите).