Верстка веб страниц c чего начать обучение. Курсы HTML и CSS. Совершенствуемся - CSS

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

– Проведение чемпионата мира по программированию не стало для Екатеринбурга стрессом, так как вся инфраструктура была приспособлена к приезду такого количества гостей. Проведение подобного мероприятия – это показатель престижа вуза и признание уровня уральской науки. А также возможность зафиксировать уровень развития IT-сферы в нашем регионе и дать ему новый импульс движения вперед.

Маруан Наггар (Marwan Naggar ), участник команды №10, студент Каирского университета (Cairo University ), Египет (участвует первый раз):

– Я участвую впервые в таком масштабном и грандиозном мировом соревновании по программированию, поэтому осознавать себя его частью – фантастика. То, что ты видишь этих невероятных ребят со всех концов света в одном месте, само по себе воодушевляет на борьбу. Организация мероприятия замечательная. Нас хорошо встретили, помогли устроиться, везде сопровождают. Надо отметить, что нашему тренеру нужно особое внимание, так как он – лицо с ограниченными возможностями, и мы очень рады, что не возникло никаких проблем с этим. У нас еще не было шанса посмотреть Екатеринбург как следует из-за четкого расписания, но на первый взгляд он показался мне очень красивым, понравилась здешняя архитектура.

Игорь Левитин, помощник Президента РФ:

– Для нас является важным проведение в городе подобного мероприятия. Я пока не знаю, кто победил, но уверен, что победили в честной борьбе и победили лучшие.

В России придается очень большое значение образовательным программам и созданию университетов. IT-программы в наших университетах являются залогом качественного инженерного образования в РФ. Сегодня инженерное образование является одной из важнейших задач в образовательной системе. Никакие технические новые прорывные решения немыслимы без IT-технологий.

Евгений Куйвашев, губернатор Свердловской области:

– Данное мероприятие позволяет нам моделировать нашу жизнь немножко вперед. И, во многом, участники сегодняшних соревнований через некоторое время будут определять нашу жизнь. Потому что IT-технологии продвигают нашу жизнь вперед и проникли в промышленность и вообще во все отрасли, которые нас окружают. IT-технологии делают расстояние от идеи до ее реализации очень коротким и быстрым. Программисты! Вы будете двигать нашу жизнь, наш быстрый и изменчивый мир вперед.

Билл Паучер, исполнительный директор чемпионатов ACM ICPC , профессор Университета Бэйлора:

– Чемпионат ACM ICPC – это прекрасная возможность для студентов со всего мира собраться вместе и обменяться ценным опытом. Я рад наблюдать за тем, как молодые люди используют знания, полученные в процессе соревнования, для дальнейшего движения по выбранному академическому и карьерному пути в качестве членов Ассоциации вычислительной техники (ACM). Чемпионат мира по программированию проводится для того, чтобы выращивать все более и более совершенные поколения программистов, которые смогут решать технические задачи на более высоком уровне. Победители ICPC прошлых лет из России – это разработчики «ВКонтакте», «Яндекс», Mail.ru и «СКБ Контур». Чемпионат 2014 года стал самым массовым за всю историю ICPC: 122 команды со всего света, и они уже оказались на вершине. Они – звезды вселенной под названием «ICPC-2014»! Именно за ними будущее, за ними - XXII-й век!

Виктор Кокшаров, ректор Уральского федерального университета:

– Я надеюсь, что пребывание участников чемпионата в Екатеринбурге было незабываемым: для этого мы сделали очень многое, почти невероятное. Мы даже погоду поменяли: еще на прошлой неделе был шторм, ливень и грозы, а сегодня - солнечно, вы улыбаетесь, и все хорошо. Вот до чего дошла наука! С ней в Уральском федеральном все в порядке: информационные технологии, компьютерные науки, математика - многие студенты нашего университета специализируются именно на этом, как и участники команд, которые собрались здесь сегодня. Я желаю всем вам удачи, крепкого здоровья и незабываемых впечатлений от Екатеринбурга и этих соревнований!

Алан Азагури, руководитель направления IBM Software Group Technical Strategy, член IBM Academy of Technology и руководитель спонсорской программы ACM ICPC:

– Как одна из ведущих международных технологических компаний IBM понимает, насколько важно помогать студентам и мотивировать их на пути знакомства с новейшими достижениями технологического прогресса. Каждый год ACM ICPC объединяет лучших студентов-программистов в мире и дает им возможность решать задачи из реального мира. Мы полагаем, что эти студенты – будущие лидеры нашей индустрии, и хотим сделать вклад в их развитие и подготовку к будущей работе. Надеемся, что победители помогут нам построить по-настоящему разумную планету.

Александр Куприн, участник Чемпионата мира по программированию A CM ICPC 2014, Высшая школа экономики, Москва:
– По правилам Чемпионата мира по программированию в соревнованиях можно участвовать всего два раза. Вот это мой второй раз. Первый был в 2011 году в Орландо. Тогда для нас главной задачей было - хотя бы попасть в финал. Мы считаем, что это уже было достижением. Я выступал от Орловского государственного технического университета. В первый раз впечатления всегда другие. Там были интересные мероприятия, нас возили в «Sea World» - это большой парк аттракционов. Вечером после соревнований мы поехали на киностудию «Universal». Там как раз закончился рабочий день, и специально для нас работники остались, чтобы провести экскурсию. Показали деревню Хогсмид из Гарри Потерра и другие вещи, связанные с «Фантастической четвёркой», «Человеком-пауком» и так далее. А здесь пока тоже неплохо. Вот граффити рисовали, мастер-классы были интересные. Параллельная программа, которую проводят организаторы, по-своему интересна и необычна.

Дмитрий Бугров, директор ACM ICPC 2014 в Екатеринбурге, первый проректор УрФУ:

– Сегодня отрасль «Информационные технологии» находится на передовой и очень быстро развивается. Почему именно айтишники идут во главе прогресса? Потому что через какое-то количество лет именно они будут управлять миром, может быть, незримо через мобильные приложения, компьютерные программы и многое другое, что делает нашу жизнь непохожей на жизнь наших предков, а жизнь наших детей сделает непохожей на нашу с вами жизнь. Самое главное, что эта отрасль постоянно нуждается в подпитке, она не терпит застоя, ей постоянно нужны новые мозги. Только это и обеспечивает ее развитие. Мир развивается потому, что развиваются умы.

Екатерина Корх, капитан команды КВН «Арррива», студентка Уральского государственного лесотехнического университета:

– Нашу команду пригласили на Кубок КВН Студенческой программы активностей в рамках ACM ICPC 2014 выпускники УрФУ - команда КВН «Голоса». Мы решили, что это замечательное летнее мероприятие, в котором стоит поучаствовать. Здорово, что в рамках Чемпионата мира по программированию походит такое яркое мероприятие, как КВН.

Подготовка проходит замечательно, нам очень нравятся редакторы и организаторы - Максим Басавин и Екатерина Власюк. Хорошие ребята с конструктивной критикой, с положительными эмоциями, с которыми приятно работать. Главное для нас - чтобы публика по достоинству оценила наше выступление. Ведь в нашей программе присутствует часть с уклоном на Чемпионат. Многое для нас ново, в том числе сцена: огромная и, насколько понимаю, без каких-либо кулис. Но КВНщики - это такие люди, которые готовы адаптироваться к любым условиям. Мы даже выступали как-то на улице под дождём, так что это не страшно.

В эру информационных технологий, компьютеров, iPhone, роботов и всего того, что умнее меня - такое мероприятие очень актуально. Побывать внутри всего этого, узнать какие-то секреты на мастер-классах и просто отлично провести время, тем более бесплатно - это вообще круто!

Тис Кинкхорст, член оргкомитета ACM ICPC 2014:

– Я помогаю судьям в организации, и это уже мой третий чемпионат мира. Что меня удивило в Екатеринбурге, так это количество волонтеров, которые всегда готовы помочь. Когда мы прилетели в аэропорт в 5 утра и нас встретили трое волонтеров, спросив: «Можем ли мы помочь?», – это было действительно круто! Я думаю, волонтеры – самый большой плюс в организации чемпионата этого года.

Влад Боровков, член оргкомитета «Территории уникальных развлечений»:

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

Ольга Николенко, волонтер ACM ICPC 2014, студентка УрФУ:

– У волонтеров была очень теплая, семейная атмосфера. Если возникала какая-то проблемная ситуация и нужна была помощь, я была уверена, что мне ее предоставят другие ребята. Естественно, иногда возникали какие-то казусы, но работа именно самих волонтеров была безупречной, большинство выкладывалось на полную катушку. Ведь эти люди – энтузиасты, а когда человек заинтересован в том, что он делает, это всегда получается отлично. В обмен мы получили столько эмоций, что их хватит на все лето! Волонтеры находились в отелях, в аэропорту, и были «бадди» – сопровождающие. Но больше всего времени мы проводили со своими подопечными командами. Такие мероприятия очень полезны для города и университета, но особенно важны для того, чтобы люди из разных стран учились находить общий язык.

Описание : создание сайтов очень не простой процесс. Все, наверное, знают, что в его создании принимают участие веб-дизайнер и программист, но многие не знают про верстальщика. А ведь именно работа верстальщиком расставляет все элементы дизайна по местам. Хотите научиться этому? Тогда читайте статью о том, как стать верстальщиком с нуля.
Оплата : в среднем 10$ за час или 50-100$ за проект.
Требования : усидчивость, внимательность, знать html, css, JavaScript, Photoshop

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

Верстальщик создает каркас сайта, используя макет от дизайнера. Он отвечает за адаптацию ресурса под различные браузеры, мониторы и экраны смартфонов/планшетов, чтобы везде сайт выглядел определенным образом. Иными словами, он получает статичную картинку от дизайнера, а затем «оживляет» ее.

Что требуется для работы ? Минимальный набор верстальщика включает в себя:

• Notepad++, чтобы писать код;
• Photoshop или другой подобный графический редактор;
• Популярные браузеры, чтобы посмотреть, как отображается работа в разных браузерах.

Что нужно знать и какие качества понадобятся?

• HTML.
• JavaScript.
• Photoshop или другую подобную программу.
• Усидчивость.
• Внимательность.
• Зрительная память.
• Аккуратность.

Как стать верстальщиком ?

Желательно иметь среднее или высшее образование в этой области, но многие верстальщики-фрилансеры самоучки. Либо своими силами изучили всю необходимую информацию, либо окончили специальные курсы в интернете. К счастью, подобных школ теперь довольно много.

1. Для начала вам нужно изучить HTML, CSS и JavaScript. Можно не запоминать с ходу все значения, а составить себе понятную и удобную шпаргалку. Особенно обратите внимание на следующие моменты:

• как строится HTML страница – основные теги страницы (head, body) и что в них может находиться.
• главные HTML элементы — a, p, div, table, h1-h6, ol, ul, span и т.п.. Научитесь их правильно прописывать, изучите зачем нужны. Поймите разницу между блочными и строчными элементами.
• Ознакомьтесь с версиями HTML и какие теги в них входят.
• Изучите отличие табличной и блочной верстки, какие у них преимущества.
• Основные элементы HTML5.

• Изучить виды селекторов.
• Основные (фон, размер, цвет, шрифт, границы и т.п.) и особенные (position, float …) свойства CSS.
• Ознакомьтесь с версиями CSS, какие к ним относятся свойства.
• Какие свойства работают по другому в некоторых браузерах.
• Научитесь делать блочную структуру web-страницы.
• Изучите основны CSS3.

JavaScript:

• Зачем и когда применяется.
• Как скрыть или показать определенный блок.
• Как добавить анимацию (скроллер или слайдер).
• Как сменить класс и стиль элемента.
• Как получить или изменить значение определенного элемента.

2. Освойте программу Photoshop , ведь вам придется работать в графическом редакторе и довольно много. Верстальщику не обязательно уметь рисовать, ведь вы работаете с готовым макетом страницы. В основном вам нужно будет:

• Делать нарезку макета.
• Определять размеры.
• Получать нужные цвета.
• Вырезать определенные элементы из макета.

3. Изучите основы верстки – разберитесь в терминологии (кроссбраузерность, валидность, семантика). Почитайте пару книг по этой теме или посмотрите хотя бы бесплатные курсы – их полно. Желательно научиться работать с WordPress и Joomla, так как многие сайты работают на этих CMS, и у них много особенностей в работе.

4. Практикуйтесь – не нужно сразу идти на биржу фриланса и хватать самый сложный заказ. Сделайте 2-3 тестовые работы, чтобы набить руку и отточить практические навыки.

Работа верстальщиком удаленно

Где ее найти? Ведь во фрилансе основная проблема – найти заказ. А новичкам сделать это очень и очень сложно, особенно если вы самоучка и нет опыта реальной работы.

1. Первый опыт можно получить бесплатно. Т.е. предлагать свои услуги за положительный отзыв. Найти заказчиков несложно – находите сайты и предлагайте сделать верстку за положительный отзыв. Многие вебмастера будут рады такому предложению, а в дальнейшем будут обращаться к вам по другим вопросам (уже платно) или посоветуют знакомым. Главное покажите себя с лучшей стороны.
2. Найти работу можно там, где требуется постоянно создавать или дорабатывать сайты. Так что вам стоит обратиться в студии веб-дизайна или крупные интернет-проекты. Можно напрямую написать веб-студиям с предложением о сотрудничестве. На первых порах можно работать на бесплатной основе (испытательный срок + обучение), а через месяц выйти на оплату. Так вы сможете получить реальный опыт работы, а потом сможете пристроиться на постоянную удаленную работу. Но тут многое зависит от ваших умений, талантов и удачи.
3. Не забывайте про самый распространенный вариант – биржи фриланса. Именно там новички могут получить свой первых опыт, хотя взять первый заказ будет проблематично. На сайте weblancer.net довольно много заказов по верстке, а конкуренция не так сильна как на fl.ru

5 советов для начинающих верстальщиков:

1. Думай. Верстка это не простое дело, которому легко и просто обучиться.
2. Будь в курсе всего нового в этой сфере – читайте блоги, форумы, сайты и другие источники информации по этой теме. Постоянно появляются новые технологии, техники, выявляются распространенные ошибки – вы должны держать руку на пульсе, чтобы не пропустить важную информацию.
3. Html + css – старайтесь по минимуму использовать javascript, чтобы ускорить загрузку страницы.
4. Используйте наработки – сохраняйте свои старые наработки, чтобы была возможность к ним вернуться и воспользоваться в новом проекте.
5. Занимайтесь версткой только если вам действительно это интересно. Просто выучить Html и css мало – надо жить версткой. Ведь в каком-то смысле это искусство, в котором нужно отдавать все свои силы, время и интерес, и только тогда можно получить удовольствие от работы и прийти к успеху.

Так что прежде чем задаваться вопросом «как стать верстальщиком с нуля», спросите себя «нравится ли мне работа верстальщиком удаленно или лучше попробовать что-то другое?». Ведь вариантов очень много, и это не та сфере, в которую стоит идти только ради денег.

Аркадий Мочульский:
Саша, привет. Прочитал последний пост на канале и возник вопрос к тебе. Я бы хотел немножко фронтенд подучить. С чего начать? Знаю базовый HTML/CSS, совсем азы JS.

Аркадий, привет!

Базовые знания - это хорошо. Можно начинать верстать. В процессе придёт понимание того, каких знаний не хватает. Потом идешь читать статьи, книги, смотреть видео уроки, возможно стоит записаться на курсы.

С чего начать?

Моё знакомство с вёрсткой началось в 10 классе. Стало интересно, как делают сайты. Зарегистрировался на каком-то бесплатном хостинге и начал верстать сайт. Попутно читал статьи как что-то реализовать. После этого начал за деньги делать сайты для учителей.

Для начала необходимо попробовать. Понравилось? Можно начинать учить.

Установи редактор кода, например, Atom . Попробуй:

• Сверстать домашнюю страницу своего сайта
  В заметке про указал ссылки на интересные домашние страницы, посмотри их
• Придумать идею для небольшого веб-сервиса и самостоятельно запрограммировать
  Посмотри примеры: помидорковый таймер , тяжеловато . Мой первый проект был XSLT редактор , он упрощал работу по созданию новых XSLT-файлов

Как только сталкиваешься с проблемой - ищи решение в интернете. 99% твоих проблем уже решены и описаны в статьях. Описание HTML-тегов и свойств стилей CSS можно смотреть на htmlbook.ru .

Научись работать c веб-инcпектором: смотреть и редактировать вёрстку, стили, отлаживать скрипты. Если понравился чей-то сайт, не стесняйся заглянуть «под капот» и посмотреть как там всё сделано.

Иногда встречаются весёлые сообщения:

Если в процессе вёрстки что-то пошло не так, то открывай инспектор и ищи ошибку. Чтобы узнать как с ним работать - посмотри эти видео:

Когда начнешь уверенно чувствовать себя в вёрстке - переходи к изучению JavaScript. Cначала разберись с возможностями языка, а потом уже переходи к изучению библиотек и фреймворков.

Изучение языка советую начать с книги Дэвида Флэнагана - « ». Книга большая, но не пугайся. Читать целиком необязательно.

Ещё можешь посмотреть видеокурсы, на ютубе их много. Вот пара интересных:

Что дальше?

У Ильи Кантора есть классный скринкаст по Gulp
Понравилось верстать? Теперь можно ускорить работу. Изучи какой-нибудь препроцессор для стилей: SASS , LESS или Stylus . Автоматизируй сборку стилей и их обработку через

Здравствуйте, меня зовут Александр Зеленин , и я веб-разработчик.
Многократно я слышал мнение, что верстка - удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти) веб-проекта. Это то, что пользователи видят в первую очередь. На текущий момент качественная вёрстка (особенно проектирование блоков) в крупном проекте требует большого количества различных навыков.

В данной статье представляю схему развития верстальщика

[большая по клику]
Само собой, это не всеобъемлющая и единственно верная схема. Есть ещё целая гора связанных навыков, релевантных технологий и так далее. Градация является субъективной.

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

Чего мы ожидаем?

В первую очередь необходимо понять, чего мы ожидаем от человека на каждом из уровней. Ваши ожидания могут отличаться.
Junior - знает основные теги, может подправить контент на готовом html сайте, умеет грамотно форматировать текст, без проблем вставит встраиваемый элемент (ролик с ютуба, яндекс карту), ведёт работу через систему контроля версий только для себя (master, 1 контрибьютор). Может сверстать что-то несложное с нуля, и оно даже не поедет (лично у него). В целом не является самостоятельной единицей и требует руководства свыше.
Middle - более-менее автономная единица (либо полностью автономная для малых и средних проектов). Может хорошо сверстать сайт средних размеров, и он будет корректно отображаться во всех актуальных версиях браузеров. Понимает, как работают шаблонизаторы, и может их использовать (при условии предоставления остального кода). Умеет планировать и документировать свою работу и оценивать сроки. Понимает важность поддержания стиля кода. Понимает, зачем есть грид-системы и css фреймворки. Умеет брать всю необходимую информацию из макетов от дизайнера. Может взаимодействовать с небольшой командой, создавать ветки и пулл-реквесты.
Senior - может спроектировать систему блоков для крупного проекта. Знает, как избежать повторов и проблемных мест при использовании его кода другими разработчиками. Умеет декомпозировать сложные задачи и грамотно формулировать задачи. Умеет применять минимум одну методологию разработки (например, БЭМ). Может сделать так, чтобы проект открывался максимально быстро. Хорошо понимает несколько популярных шаблонизаторов. Способен написать сборщики и автоматизировать процесс, с этим связанный. Может проводить код ревью и курировать других верстальщиков.
Рассмотрим теперь чуть конкретнее, что включает в себя каждый из блоков на каждом уровне.

Junior

HTML - знание основных тегов, аттрибутов. Понимание, как его писать в принципе.
Типографика - умение отформатировать текст. Текст - основа практически любого проекта. Вставка неразрывных пробелов где надо, выделение жирным, курсивом, abbr и так далее. Можно использовать типограф или схожий сервис, но уметь понимать результат.
Семантика - понимание, что для определённых задач есть определённые теги. Уметь выбрать нужный тег.
Медиа - какие виды медиа можно встраивать в страницу.
Iframe - встраивание сторонних виджетов (видео, аудио, карты и т.п.).
Аудио, Видео - можно отложить изучение, т.к. частично решаются с помощью iframe. Понимать, какие форматы умеет воспроизводить браузер, как оформить плеер и так далее.
Картинки - какие графические форматы и в каком виде воспринимает браузер. Плюсы и минусы использование тех или иных форматов.
Растр - jpg, png, gif. Понимать различие форматов и уметь применять что и где надо.
SVG - можно отложить изучение, т.к. применяется реже, чем хотелось бы. Понимать плюсы, минусы, ограничения и т.п.
Шрифты - можно отложить изучение. На самом деле довольно сложная тема, и в общем случае я бы советовал начинающим использовать системные шрифты. Уметь подгрузить шрифты, оптимизировать отображение, минимизировать лаг отрисовки с кастомными шрифтами.
Табличная вёрстка - опционально. Для желающих верстать качественные email-рассылки в будущем.
CSS 1 - шрифты, цвета, выравнивание, размеры.
CSS 2.1 - управление поведением блоков, позиционирование, полноценное оформление.
Селекторы - простые селекторы на тег, класс, вложенный элемент. Простые псевдоселекторы типа:hover.
Именование - как называть классы, чтобы не было мучительно больно.
Блочная вёрстка - разбить картинку на осознанные блоки, воплотить блоки в HTML, оформить с CSS.
Браузеры - можно отложить изучение. Какие браузеры существуют, в чём их различие.
Инструменты разработчика - можно отложить изучение. Использовать инструменты браузеров, чтобы разбираться в проблемах отображения.
Текстовые редакторы - какие текстовые редакторы для разработчиков есть и зачем. SublimeText и Notepad++ приведены для примера, как хорошо мне знакомые. Уметь настраивать в них базовые вещи, такие как отступы, перенос строки и так далее.
Системы контроля версий - я лично считаю умение их использовать хотя бы индивидуально, лично для себя, очень важным. Понимать, для чего эти системы созданы и какие бывают.
Git - понимать в общих чертах задачу и принципы самой популярной системы контроля версий.
Github / bitbucket - уметь использовать одну из популярных площадок для git.
Checkout / commit / push / pull - базовые операции для личного использования.
Stash - для временного сохранения ненужных в данный момент данных.
10 работ - сделать минимум 10 работ в различном дизайне. Можно тестовых, это не важно. Важно, чтобы полноценных в рамках текущих знаний.

Middle

CSS 3 - градации, тени, сглаживание, фильтры, трансформации.
Продвинутые селекторы - элементы, следующие за опделённым (+), определённый по счёту (nth-child), shadow-dom, before/after и так далее.
Анимации - опционально. transition и animation. Плавные переходы, анимации. Понимать ограничения и минусы.
Сетки - зачем существуют, как выстраивать, какие есть готовые решения. Для примера можно посмотреть Flexbox grid или любой другой, который найдёте.
Фреймворки (CSS) - зачем нужны, как применять. Желательно научиться хорошо использовать минимум один. Очень пригождается для прототипирования. Значительно повышает качество проекта при отсутствии бюджета на дизайн (не уникально, но юзабельно).
CSS препроцессоры - можно отложить изучение. Оптимизация работы, более красивый и читабельный код. Переменные, миксины и т.п. Поработать с одним или несколькими популярными препроцессорами типа SASS, LESS, Stylus.
Media queries - можно отложить изучение. Отображение нужных стилей в зависимости от условий (устройство, размер экрана, плотность пикселей, версия для печати и т.п.).
Стиль кода - понять, для чего есть соглашения по стилям, изучить и начать применять любой (рекомендую от AirBNB).
DRY / KISS / SOLID - можно отложить изучение. Понять важные принципы разработки, ощутимо упрощающие дальнейшее сопровождение проекта.
OOCSS - опционально. Понять, что есть объектно-ориентированный css и для чего он. В том или ином виде используется во многих проектах (хоть и без понимания, что это он). В идеале, научиться проектировать. Может отлично зайти для крупных проектов.
Документация - понять, что и как документировать. Документировать. Можно отложить, но в будущем обязательно изучить разметку markdown.
Планирование - научиться оценивать сроки по картинке и определять последовательность работ.
Декомпозиция - можно отложить изучение. Научиться разбивать задачу на подзадачи. Это сложнее, чем кажется:-)
Постановка задач - можно отложить изучение. Научиться чётко описывать задачи текстом так, чтобы другие разработчики, в том числе с меньшей квалификацией, достаточно однозначно понимали, что необходимо сделать для их выполнения.
Flexbox - понимание модели, умение применять полноценно.
Вёрстка писем - опционально. В целом навык не лишний. Понимать особенности почтовых систем, сохранить хороший внешний вид и не упасть в спам (если это не спам).
Полифилы - разобраться, как использовать самые актуальные возможности разработки, сохраняя обратную совместимость. Понять минусы и плюсы от такого подхода.
Кроссплатформенная вёрстка - понимать, что нужно делать, чтобы проект хорошо выглядел не только под Windows, Linux и Mac, но и под SmartTV или PS.
Кроссбраузерная вёрстка - понимать разницу рендера браузеров и заставлять их показывать одинаково. Сайт CanIUse очень помогает в этом.
Мобильная вёрстка - можно отложить изучение. Понимать, какие ограничения несут в себе мобильные платформы. Использовать лимитированное пространство грамотно.
Оптимизация - можно отложить изучение. Разобраться в «цене» тех или иных приёмов. Понять, из каких фаз состоит отображение сайта пользователю. - можно отложить изучение. Оптимизации, связанные с размером, кешем, сжатием, объединением ресурсов и т.п.
Отрисовка - можно отложить изучение. Оптимизации, связанные со скоростью рендера после загрузки.
SEO - можно отложить изучение. Хотя бы базовое понимание работы поисковых систем. Умение «помочь» поисковой системе разобраться, куда смотреть и что важно.
Шаблонизаторы - разобраться, каким образом можно переиспользовать код, группировать элементы и компоновать страницы. Очень желательно изучить как серверный рендеринг, так и клиентский. Сюда же входят шаблоны на «чистом» языке (типа простых PHP вставок). Работа «до» (dataflow) шаблонизатора нас не интересует.
PHP - можно отложить изучение. Разобраться в базовом синтаксисе и уметь внести мелкие правки, связанные с оформлением страницы.
CMS - можно отложить изучение. Узнать, какие CMS существуют и для чего они были созданы. Научиться писать шаблоны хотя бы для одной (рекомендую Wordpress).
Javascript - можно отложить изучение. Изучить базовый синтаксис, понять, как вешать простейшие обработчики и проводить простую работу с DOM.
jQuery - можно отложить изучение. Научиться экономить кучу времени для решения довольно типовых задач с использованием плагинов для самой популярной js библиотеки (после vanilla.js, конечно).
NodeJS - можно отложить изучение. Разобраться, как запустить простейший сервер, раздавать статику и рендерить на стороне сервера. Можно использовать Express или любой другой фреймворк.
Сборка - опционально. Научиться собирать проект из кучи CSS / HTML файлов в то, что нужно. Рекомендую ознакомиться хотя бы с grunt и gulp, как представителями «разных» лагерей.
IDE - опционально. Изучить, зачем нужны IDE и как их использовать. Перейти на использование какого-либо IDE для экономии времени. Важно: изучение IDE сравнимо с полноценным изучением языка программирования, и вкладывание большого количества времени в это может не оправдаться. Лично я пользуюсь текстовыми редакторами (и только для ооочень крупных проектов включаю IDE).
Branching - научиться управлять ветками в git.
Merge - научиться сливать ветки с разрешением конфликтов.
Fetch / Rebase - разобраться, зачем они, когда их применять, и начать применять по необходимости.
Графические редакторы - разобраться, какие бывают, для чего. Чем векторные отличаются от растровых. Важно понимать редактор хотя бы на уровне «чтения» макета от дизайнера. Выбрать правильный шрифт, размер, цвет и т.п. Чтобы не на глаз, а точно. Рекомендую поработать минимум с 1 растровым (Photoshop) и 1 векторным (Figma).
50 работ - к концу этапа у вас порядка 50 различных работ, демонстрирующих навыки из изученных областей.

Senior

Хоть на схеме и кажется маленькой эта группа, но фактически она самая большая. Т.к. к этому моменту необходимо изучить всё то, что откладывалось.
Адаптивная / Отзывчивая вёрстка - разобраться в высшей ступени и скомбинировать все полученные до этого знания. Проект должен выглядеть хорошо везде и на всём (в рамках разумного).
Постепенная деградация / Прогрессивное улучшение - понять, что это и зачем. Использовать.
Gitflow - уметь объяснить другим разработчикам, как создавать ветки, куда их вливать, как, уметь провести код ревью (вёрстки, само собой, не кода).
БЭМ - опционально. Разобраться в методологии, позволяющей создавать безлимитно крупные проекты так, чтобы при минимальной синхронизации различные команды могли использовать блоки друг друга. Есть и другие методологии, дающие не худший результат. К этому моменту о них вы так или иначе будете знать и сможете, при желании, изучить.
100 работ - иметь суммарно сотню работ, демонстрирующих различные полученные навыки. На самом деле, это всё условно. Можно иметь одну работу (состоящую из различных частей) в портфолио, которая уже покажет, что вам ничего не страшно.

Заключение

Фактически многие из этих тем небольшие. Однако держать кучу различных факторов в голове очень сложно. За 15 лет я общался менее чем с десятью верстальщиками (да и вообще программистами), которых отнёс бы к категории Senior (верстальщиков, программистов хороших было сильно больше).
Навскидку – на полноценное изучение и практику только вёрстки с нуля вполне можно затратить год (и более, если уходить в проектирование компонентов).

Надеюсь, тем, кто находится в начале пути, схема подскажет, куда можно ещё двигаться, и что не обязательно сразу (а можно и вообще не двигать в него) бежать в программирование.

Также планирую создать полноценный бесплатный курс с подробным рассмотрением каждой из тем-прямоугольников со схемы. Буду рад предложением, отзывам, пожеланиям и так далее.
Курс, вероятно, будет в формате видеоуроков с полным текстовым и графическим дублированием. Если дело пойдёт, приложу в будущем ссылки в комментарии.

upd
Много сообщений о том, что верстальщик без знания фреймворка не нужен. В основном это пишут разработчики в крупных проектах. И, для них, это вполне так. Но есть ещё много студий делающих лендинги, различные шаблоны для вордпресов и других CMS. Это вполне себе хороший рынок и возможность зарабатывать. Есть довольно много совершенно небольших проектов, с гораздо меньшими требованиями, которые верстальщик способен закрыть на отлично.

Вас интересует вопрос, как изучить верстку сайтов самостоятельно ? При должном упорстве изучить верстку сайтов может каждый.

Тема сегодняшнего поста: С чего начать изучение верстки? Вопрос этот далеко не праздный, и каждый для себя выбирает собственный путь. Я расскажу о том, как сам начинал это увлекательнейшее путешествие в мир HTML и CSS. Надеюсь, кому-то из вас это станет если не путеводной звездой, то хотя бы ориентирами к цели.

Итак, что такое верстка сайтов ? Кто еще не в танке, слушайте: верстка в данном случае означает не набор свинцовыми буквами свежей статьи в газете «Искра», а превращение рисованного в Photoshop макета сайта непосредственно в рабочий сайт.

Если выразиться иначе, верстка - это кодирование, запись на языке HTML данных, которые любой уважающий себя браузер преобразует в красивый и понятный сайт.

Для рядового посетителя сайта этот код так и останется невидимым, спрятанным за широкой спиной браузера. Однако это вовсе не означает, что он при этом может быть абы каким. Код должен быть красивым, удобным и правильным!

Так с чего же начать изучение HTML? Первое, что приходит на ум - это купить книгу. И чем толще, тем лучше. Возможно, кому-то это и пойдет на пользу.

Но лично у меня после некоторого опыта общения с такими «кирпичами» выработался четкий отталкивающий рефлекс. По той простой причине, что информация там подается в избыточном объеме.

Помните школу? Среднестатистическому гражданину вовсе ни к чему знать химию, физику, анатомию и пр. в том объеме, который там пытаются заложить в мозги.

Так и здесь: в толстенной книге много лишнего, а когда его много, то оно затуманивает взор, навевает зевоту и превращает обучение в 2 – 3 дня мучений с последующим забрасыванием данной науки далеко в топку. И все.

Поэтому лично я пошел иным путем. Я таки купил книжицу. Совсем не толстую. И до сих пор не устаю ее рекомендовать своим ученикам, ибо актуальность книги все еще свежа и востребована. Автор книги Артемий Ломов , а называется она «HTML, CSS, скрипты: практика создания сайтов» . Издательство «БХВ-Петербург».

В этой книге всего в меру: есть чуток истории веба, немного про стандарты. Но самое главное - весьма доходчиво и просто подан основной материал по HTML, CSS и JavaScript. Для начинающий изучать верстку сайтов - это просто мастхэв!

Но одной книги мало. Мой метод изучения отнюдь не нов, но вместе с тем весьма действенный. Нужна не одна книга, а несколько. Фишка здесь в том, что каждый автор пишет немного по-своему. Когда ты одну и ту же тему прочитаешь в разных вариациях, то общая картинка гораздо быстрее становится понятной и намного лучше запоминается.

У меня второй такой книгой была электронная версия самоучителя по программе Dreamweaver от Macromedia под авторством Владимира Дронова.

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

Большой плюс данной проги - это возможность просмотреть (опять же в двойном режиме) любой существующий в сети сайт.

К примеру приглянулся мне сайт с красивым и удобным размещением блоков, я сохранил целиком страницу с картинками, а затем запустил эту страницу в Дриме. И вуаля! Все видно, где и что. Хотя по началу все не так очевидно, как хотелось бы. Вот как раз книга - просто отличный помощник здесь.

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

Кстати, структура - это наиболее важный фактор при изучении любого языка. А HTML - это тоже язык. И вот об этой структуре я расскажу в следующий раз.

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

UPD от 25.10.2012 : Начинающим верстальщикам рекомендую вот эту статью - Путь верстальщика . Там все гораздо подробнее изложено, со ссылками и прочими полезняхами.