Как стать верстальщиком в 2020 году?

Question

[Дмитрий Бурухин]

Здравствуйте!

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

• Сайты на подобии htmkbook.ru
  
• Книги (Лоусон, Шарп, Лабберс и остальные)
  
• Самоучители
  
• YouTube и прочее.
  

Где лучше и практичнее всего начать в 2020 году?

Comments

[WapSter]

Ты нашел материалы по табличной вёрстке?

[Stalker_RED]

еще один write-only разработчик, ага.

[Дмитрий Бурухин]

WapSter, и их в том числе.

[WapSter]

Дмитрий Бурухин, вот они тебе тоже могут пригодится для верстки писем.

[Алекс Глебов]

htmlacademy
webmasters.teamdev.com
Книга head first фримен Изучаем js
дока по jquery
И много практики

[Denioo]

А вы точно хотите занять эту вымирающую нишу? Или так хочется быть рабом за еду на фрилансе?

[Дмитрий Бурухин]

Нет, желания такого нет. Да и в вымирающую, как вы сказали, нишу, лезть не хочется.
А почему вымирающая, собственно? И что вы можете предложить получше?

[LJ322]

Дмитрий Бурухин, входных вакансий для верстальщиков сейчас нет (возможно 5 штук на Москву/Питер найдётся, но это исключения). Вымирающая, потому что задачи по вёрстке в большинстве случаев выполняют сами Frontend разработчики. Либо профессиональные верстальщики, если компания большая

[Никита Мануйлов]

Дмитрий Бурухин, не слушай агрессивных дядек, лично знаю человека, который только версткой больше 100к рублей в месяц зарабатывает. Разумеется, ему очень повезло, далеко не каждая компания может позволить себе такого сотрудника, но верстка (а особенно фронтенд!) - далеко не вымирающее направление.
Из материалов могу посоветовать следующее:
- купи месячную подписку на htmlacademy и пройди все доступные курсы;
- канал WebDesign Master - лично мне очень нравится и подача, и сам материал, который не очень-то простой. Обязательно глянь последний Джедай верстки;
- ГУГЛ! В разработке постоянно происходит какая-то дичь, и тебе 100% придётся гуглить проблему.
P.S. Когда дойдёшь до флексов, обязательно загугли flex-grow и flex-basis. Разберись в них тщательно и кайфани от всей мощи флексов)
P.P.S. Пожалуйста подкиньте заказиков молодому, бедному, но амбициозному верстальщику(((

[Denioo]

Никита Мануйлов, Фронтенд и верстка - это не одно и тоже. В первом случае ты кроме верстки делаешь еще и логику, а во втором только верстку. И да вы правы фронтенд не вымирающее направление, а чисто верстка - да. Посмотрите сколько вакансий на позицию фронтенд разработчика и сколько на позицию верстака. Да и что там в верстке знать? За неделю выучить основы, за месяц забить руку, попробуйте так же сделать в полноценном фронтенде.
То что вы порекомендовали пустая трата денег. Это все можно и без всяких подписок изучить, опять же набивая руку.

[Никита Мануйлов]

Denioo, "Да и что там в верстке знать? За неделю выучить основы, за месяц забить руку..." - это работает для стандартных лендосиков и только в теории. На практике у некоторых/многих людей возникает куча проблем с банальной стилизацией и вопросы типа "почему у меня элементы не выравниваются в одну строчку?" - не редкость 0_о
Что уж говорить о более сложных вещах, адаптации например. Или подключении плагинов и написании простейших скриптов. А есть еще анимации, верстка интерфейса, писем, оптимизация и автоматизация работы. Всякие галпы, вебпаки и прочие чертилы. Качественная верстка вместе с сопутствующими навыками требует времени и опыта, которого у фронтендера может не быть. Потому большие компании нанимают одного или нескольких верстальщиков и отделяют их от фронтендеров. Да и в мелких студиях их можно найти.
Однако от правды открещиваться глупо - и вы правы, на верстальщиков спрос меньше. К тому же, найти чистого, девственного и не запятнанного фронтендом верстака практически невозможно :) так что в js пускай и не с головой, но по пояс прыгнуть точно придется.
А подписка на htmlacademy дешёвая и своих денег стоит. За 500 рублей получить кучу важной инфы в структурированном виде с испытаниями, экзаменами и прочей шелупонью - для новичка бесценно.

[Denioo]

Никита Мануйлов,

На практике у некоторых/многих людей возникает куча проблем с банальной стилизацией и вопросы типа "почему у меня элементы не выравниваются в одну строчку?"

Так для этого и набивают руку.

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

Это все и познается в набивании руки. Главное найти макеты где предполагается наличие анимашек. Адаптацию под разрешения вообще молчу, чего сложного в тех же медиа запросах?

Всякие галпы, вебпаки и прочие чертилы.

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

К тому же, найти чистого, девственного и не запятнанного фронтендом верстака практически невозможно

А зачем таких вообще искать? Сейчас чистый верстак нужен только крупным компаниям, и то их в компании максимум 2-3 человека, в то время как команд фронта может быть и больше 2-3. В данный момент хороший верстак должен уметь еще и в ux/ui но это уже дизайнер с уменеием верстки, а таких в странах СНГ еще бы поискать в то время как на западе 90% дизайнеров умеют верстать.

так что в js пускай и не с головой, но по пояс прыгнуть точно придется.

Писать всякие слайдеры и прочую чушь, в то время как на js можно поднять и развернуть полноценное SPA или ssr приложение.

Потому большие компании нанимают одного или нескольких верстальщиков и отделяют их от фронтендеров.

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

Answer 1

[Никита Мануйлов]

Нельзя с уверенностью говорить, что та или иная информация никогда не пригодится. На таблицах до сих пор верстаются письма, а для обтекания картинки текстом лучше float ничего не придумаешь. Да, в реальных проектах затрагиваются вопросы актуальности, но зачастую они касаются новых технологий и их поддержки. В начале пути не нужно с этим заморачиваться, лучше изучите основы, сформируйте практическую базу, и - самое важное - проявите уважение к древности, столпам, на которых стоит веб, который мы знаем :)
Начните с htmlacademy, там годно изложены основы + много практики. Затем научитесь работать с флексами, они полны сюрпризов (один flex-grow: 9999 чего стоит) и ознакомьтесь с каналом WebDesign Master. Годный канал, который откроет вам много нового и сложного.
Ну а потом... gugol. Берите макеты и верстайте. Верстайте много, верстайте по-разному. К моменту, когда вы станете представлять интерес для работодателя, ваш стек будет выглядеть примерно так:
HTML5, CSS3, основы Js (умение хотя бы скопипастить код и понять, почему он мать его работает), настройка всяких плагинов с помощью jQuery, препроцессоры (less or sass), методы оптимизации верстки, Gulp (или другой сборщик) и мб что-то по мелочи.
Как-то так :)

Answer 2

[Леонид Зычков]

Скачайте на торентах хоть-какието курсы по верстке (посвежее, хотябы 2018-2019) и смотрите их.
Почему? В моем понимании они дадут понимание какой минимальный набор навыков надо знать верстаку.
А вообще, будьте готовы, что учиться придется постоянно, в каждой вакансии Вы будете видеть технологии, которые не учили.
P.S.
- сайты на подобие htmkbook.ru постоянно заглядываю
- книг не читал (не было необходимости и не было времени)
- если найдете толковый самоучитель - это здорово
- Youtube само собой

Answer 3

[Максим]

Поглядел на udemy, вот неплохой курс, который немало всего охватывает, необходимого для вёрстки

Answer 4

[Kirill Makarov]

Находишь на ютубе свежий ролик по верстке, смотришь есть ли там бэм, использует ли он флексы, и как можно меньше маржинов, если все норм то верстаешь вместе с ним, затем сам находишь макет и уже самостоятельно его верстаешь. По css могу посоветовать Sorax так же там есть и js