Сколько учиться на верстальщика

Путь верстальщика: с нуля до сеньора

Здравствуйте, меня зовут Александр Зеленин, и я веб-разработчик.
Многократно я слышал мнение, что верстка — удел начинающих 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. Это вполне себе хороший рынок и возможность зарабатывать. Есть довольно много совершенно небольших проектов, с гораздо меньшими требованиями, которые верстальщик способен закрыть на отлично.

Сколько времени нужно, чтобы научиться верстать сайты?

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

Photoshop
HTML
CSS
jQuery

Изучив все это, ты уже можешь начать монетизировать свои знания.

Photoshop

Если Вы ранее не работали с приложением, то рекомендую обратиться к сайту photoshop-master.ru. Это ни в коем случае не реклама, потому что сама использовала этот ресурс и советую его всем, кто спрашивает меня, как научиться работать с этой программой.

Тебе, как будущему верстальщику, рекомендую заходить в раздел «Графика для сайта» и выбрать любой урок по душе. Искать уроки можно также по уровню сложности. Формат обучения: текст с приложенными скринами.

В свое время я изучила несколько уроков по отрисовке макетов и вот, что у меня получилось.

Ссылки на пройденные уроки:

Если захотите повторить урок, то скидывайте в комментарии, что у вас получилось!

Вообще этот сайт дал мне понять несколько вещей:

Чтобы решить ту или иную задачу, вы можете воспользоваться разными инструментами. Нет единого рецепта для реализации;
Будущему верстальщику не нужно знать основы ретуши, цветокоррекции. Главное овладеть простыми инструментами, такие как текст, создание фигур и цвет;
Быстрые клавиши упрощают работу с программой.

Основные комбинации, которые я использую в любом макете:
Ctrl + «-» — уменьшить масштаб
Ctrl + «+» — увеличить масштаб
Ctrl + «1» — масштаб 100%
Ctrl + J — создать дубликат слоя
Ctrl + [ — уменьшить размер кисти
Ctrl + ] — увеличить размер кисти
Ctrl + Alt + Z — шаг назад (отмена действия)
Ctrl + Shift + Z — шаг вперед (вернуть назад отменённое действие)
Ctrl + Alt + I — диалоговое окно «Размер изображения»

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

Далее Вам необходимо научиться не только рисовать макеты, но и работать с реальными.
PSD макеты для практики вёрстки:

Если Вы не совсем понимаете, как именно работать с макетом и какие картинки необходимо сохранить перед созданием сайта, то рекомендую пройти 3-х дневный курс «Супер старт».
На этом курсе от и до показан процесс верстки вот такого сайта. Первый урок полностью посвящен работе с Photoshop и он даст ответ на все вопросы, которые возникают у новичков. Стоит такой курс 100 рублей, что равноценно стоимости чашечки кофе. После оплаты вы получаете доступ в закрытую группу, где лежат все необходимые материалы.
Отзывы о курсе можно почитать тут.
На освоение азов работы с реальными макетом потребуется не больше недели. Главное практика и Вы сами будете заранее видеть, какой объект стоит вырезать из макета, а какой — оставить на месте.

Возможно, кто-то из вас ранее слышал что-то о тегах в школе или институте, но особой ясности о них все равно нет, то рекомендую пробежаться по статье «Знакомство с HTML».
Полезно всем, кто хочет структурировать знания по всем популярным тегам, которые Вы будуте использовать практически в любом проекте. Изложено все кратко и ясно.
Второй ресурс, который порекомендует любой веб-разработчик — htmlbook.ru
Во вкладке HTML вы можете увидеть страницу Справочник HTML, в котором находятся все теги, которые используются для разметки страниц.
На изучение HTML уйдет не больше недели при интенсивном изучении.

Когда я только изучала основы создания страниц и не понимала как работает вся эта магия со стилезацией. Почему стандартная разметка HTML в тандеме с CSS можем измениться до неузнаваемости. Разобраться в этом мне помогла книга «Изучаем HTML, XHTML и CSS» — Элизабет Фримен, Эрик Фримен.

Здесь описано всё настолько гениально просто, что начать верстать сможет даже 6-летний ребенок. Да, книга 2014 года. Да, некоторые советы утратили актуальность. Но это не мешает ей быть и оставаться must have учебником для тех, кто СОВСЕМ не знает с чего начать, но хотел бы создать свои первые веб-странички. Я была такой и у меня не было ни каких наставников и даже знакомых, кто хоть чуть-чуть разбирался в сайтах, но мне в руки попала эта замечательная книга и я бесконечно рада этому. Скачивайте, читайте, изучайте.

На освоение азов CSS по этой книге может уйти примерно месяц.

Но как я уже сказала, некоторые технологии утратили свою актуальность, поэтому Вам обязательно потребуется изучить основы Flexbox-верстки. Сделать это можно в игровой форме на этом сайте — flexboxfroggy.com
Также рекомендую держать в закладках следующую шпаргалку: yoksel.github.io/flex-cheatsheet, чтобы не забывать про свойства.

А чтобы эта статья была максимально актуальной на момент выпуска, рекомендую также поиграть в игру, которая поможет изучить CSS Grid — cssgridgarden.com Эта технология ещё не используется так широко, как Flexbox, но будущее за Grid. Поэтому не забудьте пройти игру.

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

Кстати на сайте htmlbook тоже есть справочник CSS по всем свойствам — htmlbook.ru/css Не забудьте заглянуть сюда.

jQuery

Возможно, кто-то удивится, почему я не говорю о Javascript, но этому есть объяснение. Сейчас мы говорим о том, какой минимум стоит знать новичкам, чтобы монетизировать свои знания. JavaScript — это большая тема, на изучение которой может уйти несколько месяцев. Зная лишь одну библиотеку Javascript, а именно jQuery — вы уже сможете делать все то, что хотел бы заказчик. Например, сделать слайдеры, анимацию или прокрутку. Знать для этого весь Javascript и писать с нуля код для старта нет нужды.
Поэтому начните с изучения jQuery.
Лучшим учебником считается — www.w3schools.com/jquery. Статьи на английском, есть уроки и весь необходимый материал.
Если потребуется сделать слайдер, то разные вариации можно найти в плагине Slick Slider — kenwheeler.github.io/slick
Но если все-таки вам интересны основы Javacript, то обязательно посетите сайт learn.javasсript.ru

На все это может уйти от месяца до двух при интенсивном изучении.

Выводы

Итак, сколько времени нужно, чтобы научиться верстать сайты?

Чуть больше 5-ти месяцев при интенсивном и самостоятельном изучении.
Будет плюсом, если Вы найдете себе наставника, которые будет направлять и мотивировать Вас.

Второй вариант — вы можете записаться на курсы «Верстальщик от А до Я» и этот срок сократиться до 2-х месяцев. Есть 2 курса: базовый и продвинутый, каждый из которых идет по месяцу. По окончанию у Вас будут сверстанные сайты и сертификат об окончании курса. Все это позволит сформировать ваше портфолио и найти свои первые заказы. Старт обучения 12 февраля 2018 года.

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

Как научиться верстке HTML и CSS с нуля — способы и советы

Здравствуйте! В статье расскажем, как обучиться на HTML-верстальщика. Разберемся, стоит ли заниматься самостоятельно, где найти онлайн-курсы для начинающих, сколько нужно учиться и где получить первый опыт верстки HTML/CSS.

Кому подойдет профессия верстальщика HTML и CSS

Чтобы стать верстальщиком HTML и CSS необходимо быть настоящим перфекционистом. Его работа требует тщательного выполнения задач в соответствии с предоставленным макетом. Специалист по верстке должен уметь анализировать информацию, выделять главное и принимать решения. Важно точно размещать все картинки и таблицы, подбирать верные цвета.

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

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

Работодатели отмечают следующие личные качества, которыми должен обладать верстальщик:

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

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

Не получится добиться хороших результатов, если вы:

не умеете работать в Photoshop;
не знаете навыков работы с текстовыми редакторами;
не знаете языки программирования;
не имеете опыта в создании сайтов хотя бы в конструкторах.

Опыт работы верстальщиком или хотя бы базовые знания HTML и CSS будут полезны для специалистов, которые связаны с интернет-маркетингом: маркетологов, копирайтеров, контент-менеджеров, журналистов, блогеров и владельцев сайтов.

Как научиться HTML-верстке с нуля

Научиться верстке HTML/CSS с нуля можно двумя способами: на онлайн-курсах или самостоятельно. Ниже рассмотрим подробнее каждый из них.

Самостоятельно

Обучиться верстке самостоятельно можно, в интернете много информации в открытом доступе. Но такой способ изучения HTML/CSS самый сложный. Будущий HTML-верстальщик должен самостоятельно составить себе план изучения, найти источники, выбирая только актуальную информацию.

Чтобы стать хорошим специалистом по верстке, нужно много тренироваться. Без помощи наставника или куратора сложно будет оценить свои достижения и отследить ошибки. Придется искать форумы или сообщества, где можно будет задать вопросы коллегам.

А также полезную информацию можно подчерпнуть из книг по веб-верстке:

Б. Лоусон, Р. Шарп «Изучаем HTML 5»;
Э. Мейер «CSS. Каскадные таблицы стилей. Подробное руководство»;
Б. Хеник «HTML и CSS. Путь к совершенству».

На онлайн-курсах

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

Учитесь в любое время, совмещайте с работой и другими делами и получайте диплом по окончании учебы. После дистанционного курса вы получите полноценную профессию и сможете работать по специальности после курса.

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

Сколько длится обучение

Курсы по верстке HTML/CSS длятся от 2 недель до 1,5 лет. Обучение легко совмещать с работой — вы можете заниматься по удобному графику, например, смотреть видео только в выходные или в будни по вечерам.

Что нужно знать, чтобы стать верстальщиком

Чтобы стать верстальщиком, нужно знать не только языки программирования, но и иметь представление о смежных областях и прикладных инструментах:

HTML/CSS (html-теги, блочная модель, позиционирование, принципы работы float, inline-block, flexbox);
основы работы с Photoshop;
навыки работы в редакторе и браузере (например, Sublime Text и Chrome);
валидность и семантика;
основы Javascript и jQuery;
методология БЭМ;
навык работы в Sass, Pug, Git, PHPStorm.

Где получить опыт

Для того, чтобы работать верстальщиком, нужно много практиковаться и собрать портфолио из работ для будущего работодателя. Сделать его самостоятельно и на выдуманных проектах довольно сложно.

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

Советы начинающим — как стать востребованным

Начинающие специалисты нуждаются в советах опытных верстальщиков. Большинство из них говорит следующее:

Как и за сколько можно научиться верстке сайтов с нуля? С чего начать?

Верстальщик – популярная современная профессия. Именно такие специалисты отвечают за внешний вид сайтов и их функционал (раскрытие свернутых блоков, правильную работу кнопок, анимации и других элементов). Многих интересует, за сколько можно научиться верстке.

Регистрация на биржах

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

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

Если же вы создадите аккаунт сейчас, к тому моменту, когда вы начнете работать, он уже будет более-менее «взрослым». Соответственно, вы будете производить впечатление не новичка, а специалиста, который работает уже не первый день. Это отличное начало в верстке сайтов.

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

Сложно ли научиться верстке сайта

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

Получить знания, необходимые для этой профессии довольно просто. Чтобы научиться верстке с нуля, необязательно получать высшее или среднее образование. Чего уж тут говорить, если многое из того, что требуется для верстки сайтов, изучается в школах на уроках информатики. Если справляются школьники, вы точно сможете это изучить. Все необходимые знания легко освоить самостоятельно (по статьям и видео из интернета). При этом полученных знаний будет вполне достаточно, чтобы создавать сайты по готовым макетам и зарабатывать.

Итак, разберемся, как быстро научиться верстать сайты. Рассмотрим процесс обучения пошагово (инструкция подойдет тем, кто хочет разобраться в теме, не посещая специальных курсов).

С чего начать изучать верстку сайтов

Прежде всего, нужно понять, что такое верстка и HTML-документ. Мы не будем подробно раскрывать этот вопрос здесь (информации в интернете много). Объясним лишь в двух словах. Если совсем упростить данные понятия, то веб-страницей можно назвать файл с расширением .html (обычно index.html), а также подключенные к нему стили (обычно это файл style.css) и скрипты (обычно это файл script.js).

В файле index.html вы будете создавать каркас документа (описывать в текстовом или другом редакторе с помощью языка разметки HTML блоки, в которых располагаются картинки, тексты или другой контент).
В файле стилей с помощью языка CSS вы будете описывать оформление (цвет и размер шрифтов, расположение и размер блоков и т.д.).
В файле скриптов с помощью языка JavaScript описывается какая-то логика (например, отправка форм обратной связи, слайд-шоу и т.д.). Этот раздел уже относится к программированию, поэтому вначале о нем можно не думать.

Главное – понять, что такое HTML-документ, как подключаются и работают стили. Это даст вам общее представление о принципах создания веб-страниц и поможет понять, как научиться верстке сайтов с нуля.

Практическое знакомство с темой

Если вы освоили базовые понятия, попробуйте создать простейшую веб-страницу. Пусть она состоит из заголовка, текста с небольшим оформлением (например, выделение жирным, курсивом) и картинки.

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

Изучения базовых моментов

Первое, с чего стоит начать в верстке – изучение основных html-тегов (типов блоков в разметке). Не переживайте, наиболее часто используемых тегов не больше 20. Разобраться, какие из них в каких случаях лучше использовать, также несложно.

Затем необходимо познакомиться с языком CSS. Это краеугольный камень принципа написания стилей для веб-страниц. Аббревиатура переводится как «Каскадные Таблицы Стилей». Обратите внимание на первое слово – «Каскадные». Важно понять, что это значит, а также разобраться, как наследуются стили. В интернете много информации на эту тему.

После того, как освоите принцип работы CSS, изучите названия самых используемых свойств этого языка (их около 50). Придется набраться терпения и выучить их все наизусть. Хорошо то, что большинство свойств обозначаются английскими словами, из перевода которых примерно понятно, за что отвечает каждое из них. Поэтому если вы хотя бы немного знаете английский язык, вам будет гораздо проще справиться с этой задачей.

Отличный способ быстро выучить свойства CSS — повесить на видном месте большой лист бумаги (или много маленьких листочков) с названиями свойств и их расшифровкой. Также можно прибегнуть к элементарной «зубрежке».

Практика на примерах

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

Не поленитесь, посмотрите 5, а лучше 10 таких видео и повторите все в точности, как там показано. Разберите на примерах создание форм обратной связи, слайд-шоу, выпадающих меню и других элементов. Не волнуйтесь, для всего этого есть готовые скрипты (вам нужно будет просто вставлять их в проекты). Главное — получить практический опыт, который поможет быстрее научиться верстать сайты.

Еще один важный этап – изучение принципов адаптивности интернет-ресурсов. О том, как научиться верстке мобильных версий сайтов, вам также расскажут на YouTube. Ничего сложного здесь нет (разница между адаптивной и обычной версткой состоит только в количестве стилей). Другими словами, нужно просто писать разные стили для разных типов экранов, используя в обоих случаях CSS.

После нескольких уроков по видео вы почувствуете уверенность в своих силах. Тогда можно будет переходить на новый уровень. Найдите в Figma или Photoshop несколько макетов средней сложности (в интернете таких много) и сверстайте их самостоятельно. Будет достаточно 3 штук, чтобы закрепить понимание того, с чего начинается верстка сайта и какие особенности могут иметь разные проекты.

Создание портфолио

Как научиться верстке – не единственный вопрос, который должен вас волновать, если вы планируете на этом зарабатывать. Как находить клиентов без опыта работы – не менее важная тема. Мы уже говорили о том, что новичкам бывает непросто заслужить доверие заказчиков. Поэтому без портфолио здесь не обойтись. Все, что вы сверстаете в процессе обучения, вы можете использовать для его составления.

Замените картинки и тексты (желательно, чтобы они были осмысленными, на русском языке). Добавьте вымышленные названия компаний, придумайте контакты (адреса, телефоны). Полученные макеты сохраните. Это и будет ваше портфолио.

Выставить примеры своих работ в интернете (на биржах фриланса или где-то еще) – именно то, с чего стоит начать в верстке. Не волнуйтесь, 99% клиентов никогда не поймут, что это учебные проекты. В их глазах вы будете выглядеть не новичком, а опытным верстальщиком. Это и поможет вам получить первые реальные заказы.

Начало работы

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

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

При этом стоит готовиться и к началу верстки сайтов, требующих интегрирования в CMS (большинство крупных интернет-ресурсов предполагают наличие этой возможности). Начните с освоения WordPress. Это бесплатная и очень популярная платформа. В 90% случаев заказчики просят внедрить верстку именно в эту систему. После этого желательно познакомиться и с другими CMS.

За сколько можно научиться верстке

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

Если данная сфера вам совсем не знакома, то:

одного вечера вам хватит, чтобы понять, как быстро научиться верстать сайт, и сделать свою первую простейшую html-страницу;
примерно 2-3 вечера вы будете рассматривать особенности основных html-тегов и заучивать их;
за один вечер вы сможете понять, что такое CSS, а также разобраться, как происходит наследование стилей;
1-2 недели вы будете изучать CSS-свойства (впрочем, при большом усердии это можно сделать и за несколько дней);
в течение 2-4 недель вы будете верстать макеты по видео на YouTube (возможно, вы справитесь и быстрее, если будете много времени уделять этому занятию);
еще 2-4 недели вы будете верстать макеты самостоятельно, чтобы обрести уверенность в своих силах (более точно сказать, за сколько вы сможете научиться верстке можно лишь исходя из количества времени, которое вы ежедневно будете тратить на обучение).

Таким образом, если вы хотите научиться верстке с нуля, пройдет от 1,5 до 3 месяцев, прежде чем вы сможете на этом зарабатывать. Профессиональным верстальщиком вы станете примерно через год постоянной работы. Достаточно серьезно подходить к делу и брать разноплановые проекты.

Итак, теперь вы знаете, как научиться верстать сайты. Все достаточно просто. В заключении стоит обсудить, где же работать верстальщику, чтобы получать достойный доход. Если говорить о том, с чего начать верстку сайтов новичку, для наработки опыта вполне подойдут биржи фриланса. В дальнейшем же лучше сотрудничать с веб-студиями и дизайнерскими агентствами (работая по субподряду или в штате).