Что изучать верстальщику и в каком порядке?

Ребята привет.
Ситуация такая. Работаю верстальщиком пол года в небольшой продуктовой компании в маленьком городе (400к), попал можно сказать чудом после практики. Из знаний более менее только html и css, адаптива не знаю, он у нас и не требуется, про бэм и препроцессоры что-то где-то читал, но тоже не знаю, js так же, на уровне скопировал-вставил. Сам проект построен на java, верстки как таковой мало и сам подход к верстке в компании безнадежно устарел. Верстаем display:table/table-cell. И смешно и плакать хочется. Хочется уйти, но во первых какой никакой опыт, та же работа с гитом, во вторых не в одну компанию с такими навыками меня явно не возьмут, потому что пришел я абсолютно нулевой.
Отсюда два вопроса. Первый это как конкретнее дальше развиваться, понятно дело адаптив и js, но кто-то пишет что адаптив надо изучать с бустрапа сразу, кто-то с медиа запросов, якобы только путаница будет и так везде, в общих чертах знаю, но с чего начать и планомерно двигаться от простого к сложному не понятно, потому что в это дело вникаю только пол года. Хотелось бы услышать советы от товарищей по цеху, как развивались они и откуда брали инфу. Второй вопрос есть ли смысл работать в маленьком городе, потому что с этой фирмы осенью буду уходить в любом случае, вопрос только Москва или оставаться в городе. Извиняюсь за сумбур, старался вроде по существу и без воды)
  • Вопрос задан
  • 15671 просмотр
Решения вопроса 1
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Пишу по порядку, как реально нужно.

Поиск по Тостеру, так как схожие вопросы задаются минимум 2-3 раза в неделю.

адаптива не знаю, он у нас и не требуется

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

про бэм и препроцессоры что-то где-то читал, но тоже не знаю

Да не используйте, и не учите. Просто теряете время и ресурсы на написание код (или говнокода, не знаю).
Просто без препроцессоров всё делается долго и нудно, и тяжело структурировать, копаясь в одном файле.
А так, можете не учить, если хочется заморачиваться %)

js так же, на уровне скопировал-вставил

Выскажу свое личное мнение.
Верстальщик без JS, это не верстальщик, это контент-менеджер со знанием HTML.
Любой сайт от лендинга до портала требует JS, правда часто делают хрень, напичканную плагинами, даже если требуется 2-3 строки кода. Не нужно подключать плагины там, где оно не нужно и обратная сторона вопроса, не нужно писать свой код там, где можно использовать готовый плагин (не изобретать велосипед).
Но если есть время, желание и умение, можно писать и свои плагины, для тренировки.

Верстаем display:table/table-cell

Тут буду краток. $^*(&%#(*$%($(%&*(*$#&*%($#%)($)^_*()#&@%$ - вырезано цензурой.

не в одну компанию с такими навыками меня явно не возьмут

Что мешает заниматься самообразованием?
Благо живем в 21 веке, в интернете есть любые учебники, тесты, курсы, да чего только нет.
На крайний случай, можно напросить в подмастерья к какому-нибудь верстальщику (знаю, часто требуются).
Да, работать придется в основном "за еду", но будет опытный наставник, который скажет - так норм, а так не надо.

надо изучать с бустрапа сразу

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

советы от товарищей по цеху, как развивались они и откуда брали инфу

90% опыта приходит вместе с практикой.
Можно прочитать 100 учебников и не понять, что это за свойство, а можно один раз применить и сразу понять.
Нужно просто много и усердно практиковаться. Качать любые шаблоны PSD, верстать, верстать, верстать.
Сначала простые, трехколоночные сайты. Потом посложнее и закончить каким-нибудь паралаксом.
Но повторюсь, для обучения минимум плагинов.

есть ли смысл работать в маленьком городе

Не знаю, что за город у вас. Скажу про свой. Население около 900тыс.
В городе порядка 5 топовых студий по созданию сайтов, не считая 2-3 десятков мелких контор.
Также есть топовые IT компании, но про них говорить не буду, с таким багажом тебя туда пока не возьмут.
Так что в любом городе есть смысл работать.
Да и фриланс, удаленную работу никто не отменял.

вопрос только Москва или оставаться в городе

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

В общем, резюмируя всё вышесказанное - учись, развивайся.

Удачи.

ЗЫ: Недавно на Хабре опубликовали ссылку.
webmasters.teamdev.com
Чесслово, проникся. Отличный мануал.
Ответ написан
Пригласить эксперта
Ответы на вопрос 13
vilka_2009
@vilka_2009
Верстаю
Не слушай тех, кто говорит, что без JS верстальщик - не верстальщик. Такие люди уже слишком давно работают, чтобы осознавать насколько сложно быстро изучить js попутно получая свой первый опыт в верстке.
Запомни вообще: мы не можем знать все и сразу. Опыт - это самое важное после стремления и умения учиться и развиваться. Чтобы ты не боялся, что не возьмут в другую компанию: https://habrahabr.ru/post/323188/ Взять к примеру сообщение Тима Дикерса: "Привет, в лид в гугле, и более чем 30 лет программирую. И каждый раз мне надо искать, как узнать длину строки в питоне." А ведь самый первый урок на любом языке начинается с примера, как узнать длину строки ))

Теперь поделюсь немного своим опытом. Как начинала я: я уволилась с работы и пошла учиться на курсы в htmlacademy База там дается отличная, правда с первого раза мне сложно было заставить себя учиться, поэтому я прошла бесплатно второй такой же интенсив. Перед НГ защитилась на отлично, можно сказать, и в феврале меня уже пригласили на работу примерно как у тебя (тоже java, совдепия, xml, таблицы). Сидела я там и баги всякие поправляла. Ушла через 5 месяцев. Долго не могла устроиться и из-за отсутствия свободных мест, и из-за собственного же страха и неуверенности. Бралась за фриланс, получала опыт, даже бесплатно работала в стартапе)) Мне важно было как можно больше практиковаться и получать опыт. Благо вообще нравится верстать) Весной следующего после увольнения года мне предложили работать в какой-то новой конторке, нас там было всего трое - дизайнер, программист и верстальщик. Всему обещали научить и чему успели научили) И ведь до сих пор люди считают, что верстальщик в компании должен быть! А некоторые компании совмещают приятное с полезным: верстальщика с программистом-фронтендером. Тем самым экономят рабочие места и зарплаты. Удобно же, да?) И вот такие опытные разрабы и говорят, верстальщик без js - не верстальщик. Фигня все это. Сейчас верстка гораздо сложнее и заковырестее, чем работа контент-менеджера, которая заключается в том, чтобы текст писать и вставлять его куда надо. Когда ты умеешь js - ты уже junior фронтендер. Это мое ИМХО. Ты отвечаешь не только за верстку, но и за фронт. Короче, далее)) В этой маленькой конторке я получила норм опыт и через пол года меня уже переманили в другую, одну из топовых организаций нашего небольшого города (тоже 400к). Зп как я когда-то хотела, проекты интересные, полная свобода действий и самостоятельность, даже уважение!) и я не знаю JS. И флексбоксы только начала пробовать. И проекты в моем портфолио за 2 года можно по пальцам пересчитать. Нужно просто успокоить себя и осознать, что верстка - это совсем не сложно. И js тоже совсем не сложно. И быть неопытным - тоже не проблема. Те организации, которые готовы брать неопытных людей, знают на что идут, они могут выделить свое личное время на твое обучение, на допиливание твоего опыта) Мы с коллегами 2 раза в неделю остаемся после работы и учим js. Нам читают учебник learn.javascript (да да), быстренько так зачитывают, все на пальцах и примерах в браузере тут же показывают, объясняют простым языком и потом ты уже спокойно можешь перечитывать учебник и понимать, что там написано и выполнять задачки под статьями. Периодически, для закрепления материала, нам дают домашку. Точнее давали, мы уже закончили js-лекции. И все равно, нельзя сказать, что мы сейчас прям сядем и плагин свой напишем - ни! Мы теперь можем понять практически любой код, написанный другими людьми. И использовать его. Для написания своего нужен просто опыт, больше практики.

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

Вот мой "блог"-цель по развитию в профессии, может прибавит тебе чего. Я его чисто как чек-лист для себя составляла.

По поводу адаптива: в бутстрапе тоже используются медиазапросы. И покапавшись в нем, поюзая его, я поняла и осознала, что такое адаптив. Не знаю, что там учить перед его использованием?! Его и создавали как раз для программистов-бэкэндеров, чтобы они не запаривались и не вникали в адаптивную верстку, а просто юзали нужные классы. Так что, начинай использовать бутстрик и норм будет ;)

Вот те мини-план от меня:
  • отбросить страхи
  • включить уверенность
  • блочная верстка
  • сетка на float || inline-block
  • попробовать бутстрап
  • html5, css3, семантика (она плотно зашита в html5)
  • попробовать расположить все элементы на странице/блоке позиционированием
  • ( так же все это можно попрактиковать на бесплатный курсах html-академии )
  • медиа-запросы
  • устроиться на работу
  • осознать бутстрап (то есть попробовать осознанно сверстать несколько макетов на бутстрапе, с адаптивом, на работе прям и попробуешь, ведь ты же уже знаком с бутстрапом :))
  • флексы - узнать и осознать, что это круче и удобнее бутстрапа в миллион раз
  • Внедрить флексы в рабочий проект, утвердив с ведущими и доказав, что его можно спокойно юзать и что не надо поддерживать ie 9... да даже 10
  • Самое главное: уделять по 1-2 часу в день, чтобы прочитать 0,5-1 главу на learn.javascript и пройти задачки под каждой прочитанной статьей ( у меня примерно столько уходило времени).


Кстати да, совсем забыла про svg - это само собой ) Выкладывать на гитхаб свои работы прям на ходу разработки - это тема! Проверяющие будут видеть как ты коммитишь и юзаешь гит.
Ответ написан
xtala
@xtala
Постигает Дзен
— Куда мне отсюда идти?
— А куда ты хочешь попасть?
— А мне все равно, только бы попасть куда-нибудь.
— Тогда все равно куда идти. Куда-нибудь ты обязательно попадешь.
"Алиса в стране чудес" Л. Кэрролл
Ответ написан
Комментировать
@Novamoscow
Как обычно, много всего написали :)

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

По адаптиву. Бутстрап это Фреймворк, он помогает, а знать чистую верстку знать нужно. Да и это не сложно, поймёшь, что к чему максимум за час )

БЭМ стоит почитать, как минимум для упрощение себе жизни. Начни с именования классов (инфа на самой странице БЭМ довольно просто написанно, можно разобраться за утренним кофе :) )

Попробуй все, что я выше написал. Подтянешь хтмл и CSS.

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

Ну а далее познакомься с JQ. И практикуйся, во время практики будет много моментов где ты что то не можешь или не знаешь как, так дальше поймёшь, что нужно изучать.

Советую поработать в Москве или Питере, если есть желание конечно же, но выбирай компанию где ты будешь не один. Когда есть старшие товарищи, обучение пойдёт быстрее.
Ответ написан
Negwereth
@Negwereth
lvivcss.com.ua
Семантика, flex-box, css grid уже обращать внимание, работа с DOM (чтобы понимание было, в лучае если с фреймворками будешь работать).
Сами концепции responsive/adaptive, media queries, вот это всё.
А насчёт последнего пункта - это если повезёт, а так можно и годик-другой по мелким конторам побегать, резюме надуть.
Ответ написан
Комментировать
@TemperOK
Чем больше учишь, тем меньше знаешь.
Опыта в веб-разработке не много, но опыта работы в больших фирмах хватает. Исходя из огромного объема уже имеющейся информации и постоянно появляющейся очень трудно говорить о каких то порядках изучения. Выбери что то одно и изучай это. Потом переходи к следующему. При всем при этом нужно много читать различных статей на всевозможные темы, чтобы знать, что это такое и с что с помощью этого можно сделать, хотя бы абстрактно, дабы вспомнить в нужный момент. С каждой новой статьей уже углубляешься в это. А большинство вещей учится очень быстро, когда возникает в этом необходимость.
Ответ написан
Комментировать
Hando
@Hando
Верстак
Я думаю что ты можешь спокойно ехать куда тебе хочется или работать удаленно. У тебя в городе такая компания одна, а в Питере и Москве их сотни.

Так что и со своими знаниями ты работу найдешь. Флексбоксы тут рекомендуют изучать - ну черт его знает, я бы для начала рекомендовал поизучать-посмотреть чужую верстку, повесить резюме, делать тестовые задания - это прокачивает. За флексбоксами конечно будущее, но 90% сайтов, особенно для начинающего в верстке, это не флекбоссы, а позиционирование за счет float или inline-block, плюс рассылки. Поэтому учись в первую очередь тому, с чем тебе придется ковыряться. Ну и посмотри медиа-запросы для адаптива, поставь бутстрап, посмотри как он устроен. Бутстрап - это считай заготовка. Что то можно выкинуть, что то заменить на свое. Можешь на его основе сделать свою сборку.

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

Согласен по поводу js - что он категорически нужен, сам сейчас читаю учебник. Все идет в сторону SPA(Single Page Application) и поэтому без js скоро вообще никуда.
Ответ написан
@mishapsv
Я уже ответил здесь, повторюсь.
По личному опыту:
1. Начать с верстки - порог входа ниже.
Изучать теорию, обязательно закрепляя большим количеством практики. Сверстав несколько больших макетов для портфолио активно искать работу. На этом этапе нет ничего лучше работы фуллтайм. Сначала будет куча вопросов, ошибок, проблем, но прогресс будет идти максимально быстро.
Где изучать?
Теория: developer.mozilla.org, htmlbook.ru, learn.javascript.ru/css-for-js
Удобно пробовать верстать в песочнице (мне нра codepen.io).
Практика: интерактивные курсы htmlacademy.ru (большинство можно пройти бесплатно).
У этих же ребят есть интенсив по верстке сайтов с нуля. Прошел его.
Если есть возможность оплатить - очень рекомендую. Реально вырастете за месяц. Плюс у вас останутся записи вебинаров и бесплатный доступ на все последующие интенсивы.
Могу поделиться промо-кодом "344a1a5b"(без кавычек) - скидка 800р.
2. Продолжить изучая JS.
Теория: learn.javascript.ru.
Практика: stepik.org, немного есть у htmlacademy.ru.
Интенсивы: я проходил интенсивы по JS у learn.javascript.ru и htmlacademy.ru.
Понравилось больше у htmlacademy: проработанный интерфейс курсов, интерактивные упражнения, проект годится для портфолио, постоянная помощь наставника.
3. Дальше изучать фреймфорк(и): React, Angular, Vue.
Ответ написан
Комментировать
@tvsjke
информация засекречена
Просто сверстай полностью какой-то сайт. В интернете полно бесплатных шаблонов, берешь любой и вуаля.
Можешь сразу less какой-нибудь использовать, настроить его 5 минут, изучить (основы) еще 10 минут (ну там переменные, вложенность, туда-сюда), а верстать с ним намного удобнее. Можешь взять сетку кастомную, или использовать бустраповскую.
Ответ написан
Комментировать
@ZaurK
Лучше начинать с азов, без прочного фундамента здание не построишь. По html и css я бы посоветовал очень хороший ресурс https://htmlacademy.ru/ , тут и верстке научат и будешь себя чувствовать уверенно в последующем. А по javascript тоже хороший ресурс https://learn.javascript.ru/ . Далее сам поймешь куда расти.
Ответ написан
Комментировать
@pwnography
Пробежись по курсам(и купи подписку на пару месяцев, не жлобись) htmlacademy и codacademy. Врубишься НЕ в табличную верстку и даже во флексбоксы. Подпишись на рассылку html академии, они присылают вместе с новостями по 3 макета для верстки или найди любые макеты в инете. Сверстай, выкладывай ход работы на GitHub, заодно будет тебе портфолио. Добавляй к голому html/css препроцессоры LESS/SASS, методологии BEM/SMACSS/OOCSS, Gulp, научись с svg немного работать, можно так же подтянуть будет Pug(раньше Jade).
Ничто не мешает тебе работать из твоего города на фрилансе(рекомендую сначала русскоязычные биржи типа fl, фрилансим), но можешь походить по собеседованиям у себя в городе, расспроси только про стек технологий. И Москва у нас в стране не единственный крупный город, там уже сам смотри. И удаленную фулл-тайм работу на компанию так же никто не отменял.
Ответ написан
Комментировать
@Xtray
Вот же: webmasters.teamdev.com :)
Ответ написан
Комментировать
fnnzzz
@fnnzzz
front-end dev
вот есть прекрасный road-map
i.imgur.com/ssnjKgc.png
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы