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

В связи с переходом в ближайшее время на фриланс необходимо освоить верстку. Сам занимаюсь разработкой бекенда и немного знаю фронтенд: jQuery, Angular. Приходилось чуток верстать с помощью bootstrap, но все это было несерьезно. Посоветуйте интересный материал для изучения.
1) Теории нашел очень много, но хотелось бы найти что-то, где на примере боевого проекта посвящают во все прелести: может скринкаст какой-то, может туторил крутой.
2) Было бы неплохо услышать необходимые технологии и вещи, которые нужны для верстки: препроцессоры, сборщик библиотек и тд.
3) На сколько часто приходится использовать чистый css без bootstrap?
4) Есть ли смысл учить foundation?
5) На сколько сложно перейти с обычной верстки на адаптивную?
6) Может у Вас есть задания, которые постепенно вводят в мир верстки.
За любой опыт и информацию буду благодарен.
  • Вопрос задан
  • 10622 просмотра
Пригласить эксперта
Ответы на вопрос 7
serjikz
@serjikz
web-developer, designer
sorax канал. Где-то давно был пост с каналами для фронтендеров, уже забыл и искать влом. Через гошу найди "ютуб каналы для front-end". В короткие сроки вряд ли реально. Все тонкости только с практикой, а какие-то с глубокой практикой.
На счет бутстрапа - я забыл, когда им пользовался (обычно пишу чистый css даже без препроцессоров, но иногда с ними явно удобней)
На счет сборок - тоже редко, так как они больше для больших проектов (сорь за каламбур)
На счет адаптивной вёрстки - это тоже только практика. Сначала надо научиться верстать статичные шаблоны, а потом делать адаптив. На самом деле в media нет ничего сложного и страшного, просто мы будто бы выкидываем предыдущий файл стилей для прошлого экрана и заменяем его новым файлом стилей. Грубо говоря так, но там надо основательно всего учитывать, особенно наследование и перезапись правил.
Ну и на счет боевого проекта - готовь фотошоп, который нужно тоже так нормально знать, потому что плох тот верстальщик, который его не знает ровно как и плох тот дизайнер, который не представляет вёрстки. Идеальный вариант - уметь верстать и уметь рисовать дизайны сайтов ну и обрабатывать фотки, потому что это всё очень понадобится (всё больше встречаю криворуких дизайнеров, а о криворуких верстальщиках лучше вообще молчать).

Главное - при написании кода думайте о тех, кто будет его поддерживать, но если вы занимались бекендом - наверняка это и так знаете.
Ответ написан
Denormalization
@Denormalization
Тут https://www.youtube.com/channel/UC7enHM_oJRYJOnyJr... очень много видео по верстке. С нуля и до готового результата. Так же освещают livereload, препроцессоры и т.д.
Ответ написан
bukinion
@bukinion
web-developer ну и временами BA, UX, UI
1) ...может скринкаст какой-то, может туторил крутой.
Тут верно говорили, Sorax. Sorax наше все))) еще под мышку HTMLbook, разобраться хорошо с флотами и инлайн-блоками. Нравится сайт с реальными современными примерами кодропс. Там правда больше про фишки и украшайзинги в UI с помощью CSS, временами и с JS.
Скринкастов по реальной верстке нет... Только практика, с ней и эрудиция, и доля воображения при реализации нетривиальных вещей, или наоборот простых вещей нетривиальным способом. Дорогу осилит идущий.
2)...необходимые технологии и вещи, которые нужны...
За день освоить yeoman, посомтреть его генераторы, позапускать, понастраивать, посмотреть структуру генерируемых проектов, он очень простой, с ним сразу grunt/gulp с базовыми настройками, что для простых проектов полностью хватает, тем временем и посмотрите как работают они. Bower аналогично, если есть клиентские зависимости, сам менеджер быстро изучается: пару команд в консоли. Да-да, всего лишь нужны знания консоли и базовый js, все это просто, изучил когда в js полным нубом был, просто не боялся, многие просто шугаются с ними связанного страшных слов: node.js, npm. Часто эти люди бэкэндщики (умора*2). Раннее, быстро подсел на препроцессоры и шаблонизаторы, лайврелоады, теперь без этого не могу, тогда просто пользовался GUI, навроде препроса.
Подытожу, что без препроцессоров и шаблонизаторов этот пункт можете оставить до лучших времен.
3)...чистый css без bootstrap?
Бутстрапп знаю, но юзаю фаундейшн, почти любой проект начинаю с yoeman генератора для нее, всегда работаю с SCSS, поэтому просто выключаю ненужные компоненты и все, зачем заново придумывать ту же сетку?! Или искать нормалайз (не юзайте эрик майеровский reset — моветон), он там включен? Правильно, если человек юзает CSS версию бустраппа, то он тянет как правило все, а стоит? там под 110 КБ в минифицированной версии. Кстати бустрапп, по словам Otto, в 4ой версии с less перейдет на SCSS, это серьезная заявочка в миру CSS-процессинга, к слову, порт SCSS есть давно.
Просто если вы будете юзать основные компоненты бустраппа, то велик шанс, что вашу верстку в последствии, не перезапишут, подключив к ней еще бустрапп, а такое бывает, мало того бывало, что писал на фаундейшн, так потом обнаруживал еще и подключенный бутстрапп, человек (в данном случае бэкендер) просто не хотел вникать фаундейшн, да и бутстрапп, он то немногим лучше знал)))
Масштабирование и поддержка проектов лучше, как никак бустрапп стандарт де-факто, как и джикьюери. Про то что дизайн похож как один, ну так, а для того и есть препроцессоры)) Если изучить архитектуру фреймворка, то кастомизировать их можно до полной неузнаваемости.
Не, ну конечно, можно забавы ради в разные проекты таскать разные компоненты или бойлепрлейты (вроде Skeleton можете посмотреть), только кто потом в них вникать будет?! Гораздо проще минимизировать один любимый фреймворк, а остальное дописать вручную.
Кстати, про CSS? из личного опыта, после SCSS не могу себя заставить писать простой CSS, хоть убей)) К хорошему быстро привыкаешь.
4) ...foundation?
Отчасти выше затронул, вообще, она гораздо сложней того же Бустраппа. Кратко изложу почему, как то уже анализировал подробно:
На первый взгляд как клавесин и рояль)) Фаундейшн, более гибкая, и более сложная, поэтому и исходники SCSS это что-то по сравнению с бутстраппом. Если же не вдаваться в препроцессорные архитектуры и возможности кастомизации, то они мало чем различаются, оба mobilefirst, ну только сетка в бутстраппе адаптивная(можно переопределить), а в фаундейшн отзывчивая. Ну из ключевых моментов, фанудейшн на rem, и это неисправимо, но исключительно в духе RWD и правильной типографики, в то время как бустрапп на пикселях. Если интересно почитайте по ссылке, там как раз курс по фаундейшн (сам не смотрел))).
5) ...с обычной верстки на адаптивную?
Вы в этом плане в выигрышном положении, особенно по сравнению с теми кто еще с таблиц начинал. Многие тогда и закостенели, так как RWD требует большей гибкости ума, и поменьше пикселов. Поищите на эту тему презентации (там просто херов мешок с ссылками и прочими, на видео он и половины не успевает осветить) и конфы (есть и на русском, например, или тут 3-е видео) Виталия Фридмана из Smashing Magazine, он выдает самые сливки по теме, также касаясь бэкэндерской стороны и плотно.
6) ...задания, которые постепенно вводят в мир верстки
Сверстайте Тостер)) Он кстати адаптивный ;)
Ответ написан
smartwriter
@smartwriter
Фрилансер переводчик и front-end разработчик
Я, например, подсел недавно на livecoding. Там и подучится можно и пообщаться с разработчиками. Я даже завел там несколько знакомств.
Ответ написан
@ZakharDay
У меня в Moscow Coding School сейчас очень боевой курс по верстке moscoding.ru/html

Ещё я иногда провожу Hack Exchange где показываю как сделать веб-приложение за 30 часов facebook.com/hackexchange
Ответ написан
xoma2
@xoma2
Программист
Рынок уже переполнен самыми различными верстальщиками, поезд ушел.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы