за сколько можно выучить html и css с нуля
Типичный верстальщик
Сколько времени нужно, чтобы научиться верстать сайты?
Всем привет. Давайте обсудим самый часто задаваемый вопрос: «Cколько времени нужно, чтобы научиться верстать сайты?»
Я приведу список, который включает в себя минимальный набор того, что нужно знать и уметь:
Изучив все это, ты уже можешь начать монетизировать свои знания.
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 и CSS – это первый шаг, который необходимо сделать, если вы хотите научиться верстать сайты или работать контент-менеджером. Это относительно простые технологии, которые можно выучить самостоятельно, после чего начать зарабатывать в интернете.
В этой статье мы расскажем, с чего лучше начать изучение HTML и CSS, что необходимо освоить в первую очередь, на каких сайтах можно найти бесплатные самоучители и справочную информацию, практические задания и тесты для проверки знаний.
Что такое HTML и CSS и зачем нужно их знать?
HTML – это язык разметки, который указывает браузерам (Google Chrome, Яндекс.Браузер и другим подобным программам), где и какие элементы выводить на странице сайта. Например, где находится заголовок, основной текст, ссылки на другие страницы, меню, списки, таблицы и так далее.
CSS – это каскадные таблицы стилей. С их помощью задают оформление различных элементов. Например, при помощи CSS можно менять цвет шрифта у текста, задавать фон страницы или отдельных элементов, красиво оформлять списки и таблицы и даже создавать интерактивные элементы (анимацию).
С чего начать самостоятельное изучение HTML?
Язык разметки HTML состоит из тегов. Условно теги – это элементы, которые указывают браузеру, что должно выводиться на странице. Например, есть теги, которые обозначают вставку картинки или фотографии, видео, таблицы. Есть теги, которые обозначают начало и завершение абзаца.
Внутри тегов могут прописываться атрибуты, в которых указываются различные характеристики. Например, внутри тега, обозначающего ссылку, указывается атрибут с адресом страницы или сайта, куда эта ссылка ведет.
Чтобы самостоятельно выучить язык HTML, необходимо:
Разные браузеры по-разному обрабатывают некоторые теги и иные команды. Если вы решили самостоятельно изучать HTML, обязательно прочитайте, что такое кроссбраузерная верстка и как ее делать.
Как видите, выучить HTML с нуля можно и самостоятельно. Примерно за неделю вы сможете изучить азы языка разметки и научиться им пользоваться на уровне, достаточном для добавления текстов на сайты, разметки таблиц, списков, вставке изображений.
Как выучить CSS с нуля?
Осваивать CSS рекомендуется после того, как вы изучили основы языка HTML. Вот что нужно узнать о каскадных таблицах стилей:
Изучить адаптивную верстку, когда макет страницы подстраивается под размеры экрана пользователя.
Дополнительно рекомендуется выучить:
Как правильно создавать структуру кода, чтобы его можно было поддерживать.
На каких сайтах можно освоить HTML и CSS?
Ниже представлены бесплатные сайты и справочники, которыми можно пользоваться при самостоятельном изучении HTML и CSS с нуля.
На курсе изучаются основные теги. Помогает получить представление о верстке и значительно упрощает обучение HTML на старте. Проходит онлайн, можно записываться из любого города.
Позиционируется, как самый современный справочник по HTML и CSS. На сайте собрано описание всех тегов и атрибутов, свойств таблиц стилей, а также примеров кода и результатов их выполнения (что будет выводиться в браузере).
На сайте собрана теория и практика по использованию CSS, трюки, хитрости и готовые решения. Сайт можно рекомендовать как новичкам, так и верстальщикам с опытом.
На сайте находятся бесплатные уроки по HTML5 и CSS, а также справочник CSS. Уроки хорошо структурированы и сопровождаются множеством примеров.
На сайте есть справочник тегов, а также бесплатные уроки по верстке страниц. Имеется демо-редактор, в котором можно добавлять различные команды и смотреть, как браузер их воспринимает и что поменяется на странице пользователя.
Один из самых популярных справочников по HTML и CSS. На сайте есть Самоучитель, а также Практикум, которые помогают ускорить обучение и сделать его проще.
Здесь собрана коллекция статей, уроков и примеров по верстке. Также есть уроки по Bootstrap.
Простой и понятный самоучитель, который подойдет для самостоятельного изучения HTML 5 и CSS с нуля.
Бесплатный онлайн-справочник. Будет полезен новичкам, которые хотят изучить основы верстки.
Онлайн-учебник по HTML и CSS. Много примеров. Подходит новичкам.
Помогают проверить свои знания по верстке и выявить пробелы. На сайте есть руководства и справочники по HTML и CSS для самостоятельного изучения.
На сайте собрано множество материалов для сайтостроителей и верстальщиков. Можно найти интересные решения для создания разных эффектов, готовые скрипты и многое другое.
Сайт консорциума W3C, на котором можно посмотреть актуальные стандарты языка разметки, а также проверить валидность своего кода в специальном Валидаторе.
Как быстро выучить HTML и CSS с нуля?
Не переживайте, если что-то не получается. Главное – не бросать начатое, тогда все обязательно получится.
Что делать дальше, освоив HTML и CSS?
Когда вы изучите язык разметки и таблицы стилей, советую учить JavaScript. Это язык программирования, который позволяет создавать различные интерактивные элементы на странице, а также использовать технологию AJAX. С ее помощью можно обновлять части страниц без перезагрузки, что значительно ускоряет взаимодействие с сайтом. Пример реализации AJAX – бесконечная загрузка новой информации в ленте новостей.
Зная разметку и JavaScript, вы сможете стать начинающим Frontend-разработчиком и получить высокооплачиваемую работу в веб-студии или выполнять заказы на фрилансе.
Как быстро освоить JavaScript, мы постараемся рассказать в следующих статьях.
Зачем изучать HTML и CSS, или Когда роботы заменят верстальщиков на рынке труда
Поговорим об актуальности изучения языков HTML и CSS. Узнаем о перспективах «чистых» верстальщиков на рынке труда, поймём, могут ли программисты обойтись без знания вёрстки. Посмотрим на наличие вакансий и уровень зарплат, поинтересуемся мнением экспертов. Поехали!
Что такое HTML, CSS, вёрстка, кто такой верстальщик и как называют этого специалиста в англоязычной среде: краткая теория
HTML — язык гипертекстовой разметки. Аббревиатура образовалась от первых букв английских слов HyperText Markup Languge. HTML применяется для разметки веб-страниц. Она нужна браузерам, которые преобразуют гипертекст и выводят на экран страницу в удобном для человека формате.
На иллюстрации в верхнем блоке можно увидеть гипертекстовую разметку, а в нижнем вывод на экран в удобном для чтения формате. В данном случае HTML показывает браузеру, где заголовок, а где параграф. Реальные страницы намного сложнее, они содержат больше элементов.
HTML и вывод страницы в удобном для людей формате
CSS — язык описания стилей. Аббревиатура образовалась из первых букв английских слов Cascading Style Sheets — каскадные таблицы стилей. CSS описывает внешний вид HTML-элементов. То есть разработчики с помощью каскадных таблиц стилей определяют, как должен выглядеть тот или иной элемент на странице.
На иллюстрации ниже видно, как с помощью CSS добавляется фон к заголовку, а также меняется цвет и устанавливается граница для параграфа.
Задаём фон и меняем цвет с помощью CSS
В реальности возможности CSS гораздо шире: каскадные таблицы стилей определяют расположение элементов друг относительно друга, создают полноценную анимацию, даже позволяют адаптировать страницу к условиям просмотра, например, к яркому свету.
Если создатель веб-страницы не использует CSS, браузеры отображают элементы HTML с помощью стилей по умолчанию. Эти дефолтные стили определяют разработчики браузеров.
В русскоязычной среде специалиста по HTML и CSS часто называют верстальщиком, а создание веб-страниц с помощью этих языков — вёрсткой. В англоязычной среде таких специалистов называют веб-дизайнерами. Подробнее об этом мы рассказываем в бесплатном курсе по основам HTML, CSS и веб-дизайна.
На рынке труда есть люди, которых можно назвать «дизайнер-верстальщик». Эти специалисты занимаются дизайном: проектируют интерфейсы, создают визуальные решения. Также эти люди верстают: превращают макеты в веб-страницы с помощью HTML и CSS.
Можно встретить термины «фронтенд-разработчик» и «веб-разработчик». Их вряд ли корректно применять в отношении к «чистым» верстальщикам. Фронтенд-разработчик — это скорее специалист, который не только верстает, но и программирует веб-страницы или создаёт полноценные фронтенд-приложения. Он должен владеть не только HTML и CSS, но ещё и JavaScript.
Веб-разработчик — ещё более широкое понятие, так как в веб-разработке задействованы фронтенд- и бэкенд-разработчики. Специалисты по бэкенду работают с PHP, Python, Java, JavaScript и другими языками программирования. Людей, которые занимаются фронт- и бэкендом одновременно, называют fullstack-разработчиками.
Сфера применения HTML и CSS — веб-разработка, или О востребованности вёрстки
Как отмечалось выше, верстальщики используют HTML и CSS для создания веб-страниц, то есть страниц в интернете. По данным We Are Social, в январе 2020 года в мире насчитывалось 4,54 млрд пользователей интернета. Это 59 % от общего населения планеты. То есть потенциал роста интернет-пользователей исчисляется миллиардами человек.
Эти данные позволяют предположить, что интернет в обозримом будущем будет расти. То есть будут появляться новые сайты, а для создания этих сайтов понадобится HTML и CSS. Очевидно, эти языки будут развиваться, а их возможности будут расти.
Веб-разработчики, как фронтендеры, так и бэкэндеры, так или иначе сталкиваются с вёрсткой во время работы. Не каждому веб-программисту, особенно бэкенд-разработчику, нужно уметь верстать страницы «с точностью до пикселя». Но без понимания принципов HTML и CSS работать в веб-разработке практически невозможно.
То есть вёрстка сама по себе никуда не денется, пока существует и развивается интернет. Значит ли это, что верстальщикам можно не беспокоиться о перспективах на рынке труда? Нет.
На востребованность вёрстки можно посмотреть под другим углом. Порог входа в профессию верстальщика ниже по сравнению с программированием. Поэтому уровень конкуренции среди «чистых» верстальщиков высокий. Это первая причина задуматься.
Вот вторая причина: верстальщики сталкиваются с достаточно однотипными задачами. Это делает работу верстальщика механистической и скучной. Заниматься нелюбимым делом — не лучший выход, правда? Есть риск выгореть и потерять интерес к профессии.
Третья причина: есть большая вероятность, что в обозримой перспективе «чистые» верстальщики будут сильнее конкурировать не друг с другом, а с программами, которые конвертируют условные макеты psd в HTML. Это не вопрос сегодняшнего дня, но его нужно держать в голове при оценке перспектив рынка труда.
Значит ли это, что вёрстку изучать не стоит из-за отсутствия перспектив? Ни в коем случае. Профессию «верстальщик сайтов» можно рассматривать как способ войти в веб-разработку. Многие веб-программисты вырастают из «чистых» верстальщиков. То есть HTML и CSS — это отличный способ войти в отрасль, испытать себя, а затем развиваться дальше: изучать программирование.
Есть ли работа для верстальщика: вакансии и зарплаты
Чтобы проанализировать ситуацию на рынке труда, в первую очередь заглянем на hh.ru и посмотрим вакансии для верстальщиков. Также изучим предложения на русскоязычной и англоязычной бирже фриланса.
По состоянию на середину марта 2020 года по запросу «верстальщик» на hh.ru есть 678 вакансий по всей России. По запросу «фронтенд-разработчик» есть более 2000 вакансий. Такая же картина по запросу «веб-разработчик».
Уже на этом этапе анализа можно сделать важный вывод: «чистые» верстальщики требуются реже по сравнению с фронтенд-разработчиками. То есть работодателям чаще нужны специалисты, которые умеют верстать страницы и программировать фронтенд-приложения.
При детальном анализе вакансий по запросу «верстальщик» этот вывод подтверждается. Практически в каждом объявлении в требованиях работодатели указывают как умение верстать, так и знание JavaScript.
Работодатели ждут от верстальщиков знания JavaScript
Ещё один важный момент: некоторые работодатели ищут верстальщиков полиграфической продукции. То есть количество вакансий для специалистов по вёрстке веб-страниц в реальности меньше, чем кажется на первый взгляд.
Приблизительный список требований к верстальщикам выглядит так:
Работа есть как для опытных специалистов, так и для джуниоров.
Работодатели на hh.ru предлагают верстальщикам зарплату от 25 000 рублей в месяц. Максимальная зарплата составляет 100 000 рублей для специалистов со знанием JavaScript. «Чистым» верстальщикам предлагают меньше.
Информация для тех, кто планирует работать верстальщиком удалённо. На Upwork по навыкам HTML и CSS есть вакансии, но большая часть из них требует и других знаний и умений. Обычно это знание JavaScript и фреймворков или знание популярных CMS, в том числе OpenCart, Magento, WordPress/WooCommerce и так далее.
На популярных русскоязычных биржах работа для верстальщиков есть. Здесь бросается в глаза ориентация на выполнение разовых задач и невысокая ожидаемая цена.
Обучение вёрстке: какие курсы пройти, где получить практику использования HTML и CSS
Спойлер: считайте этот раздел рекламной паузой. Здесь короткий рассказ о возможностях изучения вёрстки на Code Basics и Хекслете.
Итак, на Code Basics бесплатно доступны курсы по HTML и CSS для начинающих. Курсы состоят из коротких тематических уроков. В каждом уроке есть теория и интерактивное практическое упражнение. Важно, что на Code Basics вы будете практиковаться в вёрстке с первого урока. В итоге у вас появится понимание принципов работы с HTML и CSS, а также вы научитесь создавать и стилизовать элементы веб-страницы.
Продолжить обучение профессии «Верстальщик» можно на Хекслете. В программу обучения входят работа с технологией Flex, позиционирование, адаптивная вёрстка, работа с препроцессором Sass.
По состоянию на середину марта 2020 года в профессии есть два проекта. Во время реализации проектов студенты верстают с нуля полноценные страницы под руководством менторов.
Профессия «Верстальщик» активно развивается, в ближайшее время в ней появятся два новых проекта и дополнительные курсы.
Когда роботы заменят верстальщиков: слово экспертам
На самом деле эксперты рассказывают не только о конкуренции людей и программ. Но на вопрос о влиянии программ-генераторов HTML и CSS они тоже отвечают. Слово специалистам.
Антон Немцев: отбросьте страх, верстальщики востребованы рынком
Дмитрий Дементий: Как вы считаете, каким специалистам нужно изучать HTML и CSS? Будет ли полезным знание HTML/CSS людям, которые не занимаются вёрсткой и программированием?
Антон Немцев: Они будут полезны людям, которые работают в смежных или связанных областях, например дизайнерам. И этим словом я совершенно неправомерно обобщаю специалистов в области пользовательского опыта, юзабилити, доступности и даже разработки интерфейсов. Как можно разработать хороший UX не зная и не понимая возможностей, особенности и ограничений движка, на котором он будет реализован?
Что касается связанных — к примеру, существует несколько движков для верстки книг, работающих на базе CSS. Они неплохо продаются, и мы, как правило, сами того не зная, читаем книги, сверстанные с помощью CSS. Я могу привести ещё много примеров из самых разных областей, но если вам это действительно интересно — просто осмотритесь и немного поищите. Веб-технологии везде. Начиная от иллюстраций и плакатов и заканчивая вашим холодильником.
Д. Д.: Насколько, по вашему, актуальна профессия «верстальщик»? Чистые верстальщики нужны на рынке труда?
А. Н.: Спросите у http://riverco.de/ или, скажем, https://csssr.com/, а то и у древнего, как мир, https://www.psd2html.com/. Или, может быть, напишите в TemplateMonster, в котором здоровенный отдел состоит исключительно из верстальщиков. Если это то, чем вы хотите заниматься, то, обладая определенной целеустремленностью и настойчивостью, вы найдете своё место под этим небом.
Д.Д.: С финансовой точки зрения изучение вёрстки перспективно? Куда лучше идти верстальщику за деньгами: на биржи, в компании на фултайм, ещё куда-то?
На сегодняшний день есть три основных подхода к работе:
В среднем вы будете получать 100 % зарплаты соответствующей вашему уровню компетенции в офисе, 65-75 % удаленно и 40-50 % как независимый разработчик.
Если хотите деньги — идите в офис. Если хотите свободу — двигайтесь в сторону независимого разработчика. Но свобода не даётся бесплатно.
Безусловно это очень грубая и упрощенная модель.
Я знаю пару консультантов, которые получают свыше 100 евро в час, и при этом всё их время выкуплено на несколько месяцев вперед, но рассматриваю их, скорее, как курьезную аномалию, что-то вроде рогатого медведя-осеменителя. Вы вряд ли встретите такого, прогуливаясь в ближайшем парке.
Д. Д.: Провокационный вопрос: можно ли работать программистом и не знать HTML и CSS?
А. Н.: Можно. Вы наймете меня, когда они понадобятся.
Д. Д.: Не заменят ли верстальщиков технологии в обозримом будущем? Насколько реально проиграть конкуренцию программе, которая автоматически конвертирует условный макет в psd в HTML?
А. Н.: Фронтендеры, услышьте меня! Это правда, есть программы, которые превращают макет в верстку, а верстку — в реакт-компоненты. И с каждым годом они всё лучше. Я видел их. Впереди нас ждут тяжелые времена! И чтобы встретить их достойно — отбросьте страх! Посмотрите, я стою перед вами без страха. Почему? Потому, что я знаю что-то чего не знаете вы? Потому, что я верю во что-то, во что не верите вы? Нет! Потому, что я помню. Помню о том, что я тот, кто я есть, не из-за пути, который мне предстоит пройти, но из-за пути, который пройден! Я помню, что двадцать лет нам говорят: «Вы не нужны!» Я помню, что двадцать лет нам говорят: «Вас заменят!» Двадцать лет! Двадцать лет они создают программы, чтобы заменить нас! И после всех этих лет я помню о самом важном: мы всё ещё здесь!
Д. Д.: Вёрстку изучать проще, чем программирование? Сколько времени нужно, чтобы с нуля научиться верстать макеты средней сложности?
А. Н.: Проще для кого? Для человека, который уже знает три языка программирования? Для человека, который проработал семь лет наборщиком в типографии? Для пожилого свинопаса? Для пятиклассника? Зависит от человека и контекста. Вы ожидаете оценки пальцем в небо? Запросто! Полгода работы с полной самоотдачей и огнем в ягодицах!
Людмила Мжачих: посоветую в первую очередь ориентироваться не на деньги, а на получение опыта, потому что его потом потом можно конвертировать в хороший заработок
Дмитрий Дементий: Как вы считаете, каким специалистам нужно изучать HTML и CSS? Будет ли полезным знание HTML/CSS людям, которые не занимаются вёрсткой и программированием?
Людмила Мжачих: Когда я обучала новичков фронтенд-разработке, в моих группах было много людей, которые пришли на обучение не с целью сменить профессию, а с целью разобраться в интересной теме. Среди них были дизайнеры, маркетологи и те, чья работа вообще была далека от веба. Веб-технологии настолько глубоко проникли в нашу жизнь, что понимание базовых принципов работы сайтов становится знанием, полезным для каждого. Необходимо ли всем изучать верстку? Думаю, что нет. Полезно ли это каждому? Однозначно, да!
Д. Д.: Насколько, по вашему, актуальна профессия «верстальщик»? Чистые верстальщики нужны на рынке труда?
Л. М.: HTML/CSS — это очень мощный и выразительный инструмент, который позволяет создавать красивые и удобные интерфейсы. Поэтому, однозначно, «чистые» верстальщики сегодня востребованы. Думаю, что и в будущем профессия верстальщика не станет менее актуальна, так как желание создавать красивые и уникальные вещи никогда не исчезнет. Но веб технологии развиваются очень стремительно, поэтому предполагаю, что профессия будет трансформироваться. Будут появляться новые инструменты, фреймворки, развиваться возможности HTML и CSS.
Д. Д.: С финансовой точки зрения изучение вёрстки перспективно? Куда лучше идти верстальщику за деньгами: на биржи, в компании на фултайм, ещё куда-то?
Л. М.: Профессия верстальщика однозначно востребована! Но я вам посоветую в первую очередь ориентироваться не на деньги, а на получение опыта, потому что его потом потом можно конвертировать в хороший заработок. Куда лучше идти за опытом? На мой взгляд, наиболее эффективным способом прокачки для новичка будет стажировка в компании. На стажировке у вас будет возможность быстрее обучаться на боевых задачах и получать фидбек от более опытных коллег.
Д. Д.: Провокационный вопрос: можно ли работать программистом и не знать HTML и CSS?
Л. М.: Фронтенд-разработка включает в себя владение HTML+CSS+JS. Нет, быть хорошим фронтенд-разработчиком без знания HTML и CSS нельзя.
Д. Д.: Не заменят ли верстальщиков технологии в обозримом будущем? Насколько реально проиграть конкуренцию программе, которая автоматически конвертирует условный макет в psd в HTML?
Л. М.: Пока верстальщикам об этом точно не стоит беспокоиться 🙂 Программы, которые умеют генерировать разметку из макета, не дадут вам поддерживаемый и масштабируемый код. Также они не смогут учесть особенности всех браузеров и платформ, не обеспечат адаптивность.
На сегодняшний день искусственный интеллект научился делать простые раскладки, но это все равно далеко от того, что может сделать даже начинающий верстальщик.
Д. Д.: Вёрстку изучать проще, чем программирование? Сколько времени нужно, чтобы с нуля научиться верстать макеты средней сложности?
Л. М.: Для того, чтобы верстать несложные макеты, надо в первую очередь изучить основы HTML и CSS: структуру документа и семантику, способы позиционирования, контекст наложения, блочную модель, селекторы. Также придётся научиться работать со всеми составляющими дизайн-системы: работа с текстом и цветом, изображениями и иконками, сетками и отступами и так далее.
В дополнение к этому желательно изучить основы git, уверенно пользоваться IDE и инструментами разработчика, уметь работать с макетом, который отдал дизайнер.
По срокам обучения все очень индивидуально, но освоить эти темы за 2-3 месяца усердной работы вполне реально.
Для того, чтобы программировать, придётся изучить больше тем, поэтому на первый взгляд верстка кажется проще. Однако, если учесть все особенности браузеров и платформ, различных нюансов, то объем знаний, которым нужно обладать, чтобы делать качественную верстку, тоже окажется очень внушительным. К тому же, чем больше вы будете верстать, тем больше интересных нюансов будете узнавать 😉
Виталий Киренков: все эти конверторы плодят кучу лишнего кода и кажется не умеют в адаптив
Дмитрий Дементий: Как вы считаете, каким специалистам нужно изучать HTML и CSS? Будет ли полезным знание HTML/CSS людям, которые не занимаются вёрсткой и программированием?
Виталий Киренков: Мне кажется, что данная формулировка вопроса не совсем корректна. Поясню. Если человек уже специалист в свой отрасли, например, повар, он не занимается ни версткой ни программированием. Разбираться с HTML и CSS ему вовсе ни к чему. Хотя, если его текущая специальность его не устраивает, и он хочет войти в айти, то сделать это через вёрстку будет проще, нежели чем через бэкенд-разработку.
Считаю, что дизайнеры должны обладать знаниями HTML и CSS как минимум на базовом уровне. Сверстать хотя бы простенький макет, чтобы понимать как выглядит процесс с другой стороны.
Д. Д.: Насколько, по вашему, актуальна профессия «верстальщик»? Чистые верстальщики нужны на рынке труда?
В. К.: Насколько «чистые»? Только HTML и CSS не особо востребованы. Функцию таких людей спокойно перекрывают сервисы, как например Тильда. Если человек уже знает основы JS, это другой разговор. И «рынок труда» — тоже довольно обширное понятие. Работа на фрилансе — она относится к этому рынку? В моём понимании, навык работы с jQuery также относится к верстальщикам, и, как следствие, обладая этими навыками, можно находить заказы как на фрилансе, так и устроиться на работу в веб-студию, например.
Д. Д.: С финансовой точки зрения изучение вёрстки перспективно? Куда лучше идти верстальщику за деньгами: на биржи, в компании на фултайм, ещё куда-то?
В.К.: Деньги — это несомненно важно, но есть также ряд других вещей, таких как комфорт, окружение, развитие и много чего другого. Так например, если положить на чашу весов работу в офисе и одну сумму денег, а на другую работа из дома (удаленка/фриланс) и чуть меньшую сумму, для кого-то перевес будет в сторону офиса, для кого-то в сторону дома. Я считаю, тут выбирать надо, исходя из желаний каждого отдельно взятого человека.
Д. Д.: Провокационный вопрос: можно ли работать программистом и не знать HTML и CSS?
В. К.: А чем он провокационный? У меня много знакомых программистов, которые пишут на Java и незнание HTML и CSS им никак не мешает жить, работать, зарабатывать 🙂
Д. Д.: Не заменят ли верстальщиков технологии в обозримом будущем? Насколько реально проиграть конкуренцию программе, которая автоматически конвертирует условный макет в psd в HTML?
В. К.: В обозримом вряд ли. Все эти конверторы плодят кучу лишнего кода, и, кажется, не умеют в адаптив. Но это не точно, поскольку я с конвертерами не пересекался уже лет 5-6. Также конверторам скармливают отдельно взятые страницы, и если в макете произошел случайный сдвиг какого-то элемента, программа этого не заметит. Хотя и человек может не заметить при вёрстке, но при этом, если есть уже база стилей, то элементы в рамках сайта всегда будут выглядеть одинаково.
Д. Д.: Вёрстку изучать проще, чем программирование? Сколько времени нужно, чтобы с нуля научиться верстать макеты средней сложности?
В. К.: Проще, но при этом сам процесс верстки не является простым, как многим это кажется. Тут нужно уметь предугадывать поведение интерфейса в различных ситуациях, поскольку многие кейсы на момент прорисовки дизайна не принимаются во внимание.
Я считаю, что за 3-4 недели можно сделать простой, очень простой сайт. Но при этом предварительно изучив HTML и CSS. Многие сейчас без обучения, не ознакомившись с документацией, пытаются сразу верстать сайт. И на протяжении долгого времени сталкиваются с одной и той же проблемой, просто под разными углами. Благодаря изучению документации этого можно было бы избежать в самом начале.
При условии, что человек верстает ежедневно, через 3-4 месяца он будет верстать уже макеты средней сложности.
Андрей Романов: изучение вёрстки перспективно, если на нём не останавливаться и дальше расти во фронтенде
Эксперт о себе: я фронтенд-разработчик из Омска, переехал в Москву в 2016 году после окончания Школы разработки интерфейсов Яндекса. Работаю в Joom в команде службы поддержки. Развиваю сайд-проекты: For Web (новости фронтенда) и frontend case studies (коллекция материалов об опыте разработки интерфейсов в реальных компаниях).
Дмитрий Дементий: Как вы считаете, каким специалистам нужно изучать HTML и CSS? Будет ли полезным знание HTML/CSS людям, которые не занимаются вёрсткой и программированием?
Андрей Романов: В первую очередь изучать HTML и CSS нужно фронтендерам, ведь это то, с чем они работают каждый день. Во вторую очередь это полезно веб-дизайнерам: чтобы проектировать интерфейсы для веба, нужно знать ограничения и возможности платформы. Если дизайнер умеет верстать, это делает его более ценным специалистом: он может гораздо быстрее проверять идеи, делая живые прототипы интерфейса прямо в браузере.
Знание основ HTML и CSS пригодится всем, кто пишет и редактирует статьи: не знаю, как сейчас, но раньше в Т—Ж авторы сами верстали свои статьи. Также знание основ пригодится владельцам небольших сайтов: они смогут решать мелкие задачи самостоятельно, не прибегая к помощи программистов.
Д. Д.: Насколько, по вашему, актуальна профессия «верстальщик»? Чистые верстальщики нужны на рынке труда?
А. Р.: Я начинал карьеру как раз с чистой вёрстки, но работал на фрилансе. Это не лучший формат работы для начинающих: без портфолио и отзывов сложно искать заказы, поток заказов нестабильный, перенимать опыт не у кого. К тому же для успешной работы в формате фриланса важны не только навыки вёрстки, но и так называемые «софтскиллы»: переговоры и общение с заказчиком, оценка сроков, управление временем и рисками.
Если говорить о работе в штате какой-либо компании, я давно не видел вакансий именно про вёрстку. На российском рынке в основном ищут именно фронтендеров, которые умеют не только верстать, но и программировать. На западе, насколько я знаю, вообще профессии «верстальщик» как таковой нет: там вёрсткой занимаются либо те же фронтендеры, либо дизайнеры.
На мой взгляд, ограничиваться вёрсткой нельзя. При этом вполне реально научиться вёрстке, устроиться в какую-нибудь компанию младшим фронтендером и дальше расти именно во фронтенде.
Д. Д.: С финансовой точки зрения изучение вёрстки перспективно? Куда лучше идти верстальщику за деньгами: на биржи, в компании на фултайм, ещё куда-то?
А. Р.: Изучение вёрстки перспективно, если на нём не останавливаться и дальше расти во фронтенде. Или если вёрстка поможет вам эффективнее работать по основной специальности. Например, если вы веб-дизайнер.
Если всё же рассматривать заработок на чистой вёрстке, мне кажется, больше возможностей для заработка на фрилансе. Во-первых, на фрилансе попросту больше потребность в верстальщиках, чем у компаний. Во-вторых, на фрилансе можно брать деньги за результат, а не за потраченное время, что потенциально выгоднее фултайм-работы с фиксированным окладом.
Д. Д.: Провокационный вопрос: можно ли работать программистом и не знать HTML и CSS?
А. Р.: Определённо можно. По сути любая специальность, кроме фронтенда, не требует знаний HTML и CSS: бэкенд, devops, data science, мобильная разработка.
Провокационным вопрос становится, если заменить «работать программистом» на «работать фронтендером». Я слышал, что в некоторых компаниях есть практика разделения фронтендеров на верстальщиков и программистов клиентской логики. Но полной независимости при таком разделении всё равно не добиться: в разработке интерфейсов всё равно есть задачи на стыке вёрстки и программирования. Пример такой задачи — разработка сложного UI-компонента вроде селекта (выпадающий список опций для выбора) или саджеста (поле ввода с подсказками).
Д. Д.: Не заменят ли верстальщиков технологии в обозримом будущем? Насколько реально проиграть конкуренцию программе, которая автоматически конвертирует условный макет в psd в HTML?
Визуальные конструкторы сайтов существуют довольно давно, точно больше пяти лет, но спрос на фронтендеров пока только растёт :–) Основная область применения таких конструкторов — обычные контентные сайты: визитки, лендинги, блоги и журналы. Здорово, что такие конструкторы есть, потому что они позволяют быстро и дёшево собирать несложные страницы, не погружаясь ни в какие технологии.
С более сложными интерфейсами никакие конструкторы и плагины для Photoshop/Sketch/Figma пока достойно не справляются, да и вряд ли станут: нужно учитывать слишком много аспектов вроде плавных анимаций, мультиязычности (адаптация интерфейса к RTL-языкам), корректного отображения на разных устройствах (от ноутбуков до умных часов).
Д. Д.: Вёрстку изучать проще, чем программирование? Сколько времени нужно, чтобы с нуля научиться верстать макеты средней сложности?
Я начинал с изучения вёрстки именно потому, что мне это далось легче, чем программирование. Сложно давать какие-то прогнозы по времени, потому что я изучал вёрстку в других условиях. За последние годы порог входа в вёрстку снизился: браузеры стали работать более или менее одинаково, исчезла необходимость помнить и использовать страшные хаки для обхода проблем в разных браузерах, появились более удобные и логичные API: флексы и гриды вместо флоатов.
Мне кажется, лучше всего найти и спросить о времени обучения тех, кто недавно устроился на работу младшим фронтендером.
Сергей Бехарский: вёрстку должен знать каждый фронтенд-разработчик, а бэкенд-разработчикам, связанным с вебом, надо понимать процесс доставки контента до посетителей
Об эксперте: Сергей Бехарский, Senior JavaScript Developer, Supermetrics Oy.
Дмитрий Дементий: Как вы считаете, каким специалистам нужно изучать HTML и CSS? Будет ли полезным знание HTML/CSS людям, которые не занимаются вёрсткой и программированием?
Сергей Бехарский: Начну издалека, часть этого ответа применима и к остальным вопросам.
Когда-то давно выделяли профессию веб-мастера: человека, который от начала и до конца заведовал ведением веб-проекта. В дальнейшем всё стало несколько сложнее, но вёрстка и фронтенд-разработка в целом не считались каким-то уникальным талантом, это была лишь небольшая часть того, что должны уметь веб-разработчики. Иногда с меньшим уровнем погружения, иногда с большим.
С развитием интернета и технологий вообще интерфейсы стали сложнее, стало возможным выделить отдельную позицию верстальщика, которая совмещала в себе и вёрстку шаблонов под различные системы управления контентом (Content Management System, CMS) и написание скриптов. И она никуда не делась вплоть до настоящего момента, лишь стала более выделенной и ещё более сложной и разделённой на области ответственности.
Если же прямо и просто ответить на вопрос, то, конечно, вёрстку должен знать каждый фронтенд-разработчик вне зависимости от того, верстает он сайты и интерфейсы, или же собирает их из готовых компонентов. Также вёрстку желательно знать и понимать контент-менеджерам и маркетологам для самостоятельной подготовки материалов. И, конечно же, бэкенд-разработчикам, связанным с вебом, стоит понимать весь процесс доставки контента до посетителей.
Д. Д.: Насколько, по вашему, актуальна профессия «верстальщик»? Чистые верстальщики нужны на рынке труда?
С. Б.: Как я ответил выше, классическая веб-разработка никуда уходить не собирается, да разработка лендингов тоже не ушла в веб-конструкторы. В продуктовых компаниях довольно часто присутствует отдельная позиция межкомандного верстальщика, подготавливающего шаблоны компонентов для последующего их «оживления».
Д. Д.: С финансовой точки зрения изучение вёрстки перспективно? Куда лучше идти верстальщику за деньгами: на биржи, в компании на фултайм, ещё куда-то?
С. Б.: Весьма перспективно, но сама по себе вёрстка будет приносить неплохой доход в случае ориентирования на фестивальные и промо-проекты, например, в рекламной сфере. Если же добавить в список умений JavaScript и сопутствующие технологии, достичь можно гораздо большего.
Фрилансом можно заработать очень хорошо, но для этого нужно быть либо очень широким специалистом, либо, наоборот, обладать умением очень быстро решать какие-то конкретные сложные проблемы. На мой взгляд развитие быстрее всего происходит в компании на фултайме, главное не погрязнуть в чём-то одном надолго.
Д. Д.: Провокационный вопрос: можно ли работать программистом и не знать HTML и CSS?
С. Б.: Конечно можно, профессия программиста имеет очень широкий спектр. Но если хочется доносить свои проекты и мысли до мира — презентационные инструменты стоило бы освоить.
Д. Д.: Не заменят ли верстальщиков технологии в обозримом будущем? Насколько реально проиграть конкуренцию программе, которая автоматически конвертирует условный макет в psd в HTML?
С. Б.: Подобные программы появились не сегодня, их было достаточно много. Проблема всегда одна: их код не предполагает возможности расширения и переиспользования. Даже современные инструменты могут выдать некий базовый набор правил, но адекватно нарезать макет на переиспользуемые компоненты — нет, границы применения их очень ограничены.
Д. Д.: Вёрстку изучать проще, чем программирование? Сколько времени нужно, чтобы с нуля научиться верстать макеты средней сложности?
С. Б.: Кому-то нравится «байты перекладывать», кому-то реализовывать математические алгоритмы отражения света. Порог входа в вёрстку ниже, чем в программирование в среднем, поскольку базовые правила очень просты. Но вот комбинации этих правил бесконечны а, собственно, условия применения крайне неоднозначны.
Думаю, за полгода активной коммерческой разработки научиться верстать макеты средней сложности вполне можно. Проблема в том, что понятие средней сложности у всех разное. Если же мы говорим о нулевом уровне, то за 6-9 месяцев влиться во фронтенд более чем реально.
Заключение: роботы стараются, но верстальщиков в обозримом будущем они не заменят
Такой вывод можно сделать по итогам анализа рынка труда и комментариев экспертов. «Чистым» верстальщикам сложнее конкурировать, чем фронтендерам со знаниями вёрстки и хотя бы основ программирования. Тем не менее вёрстку можно рассматривать в качестве первой ступени обучения.
HTML/CSS — отличный инструмент для комфортного входа в отрасль. Он позволяет «потрогать» веб-разработку, заработать первые деньги на фрилансе или устроиться в компанию, а затем продолжить образование.
Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.