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) ...задания, которые постепенно вводят в мир верстки
Сверстайте Тостер)) Он кстати адаптивный ;)
Простой
