lapa2112

Добрый день!

Во-первых, вы должны иметь желание развиваться, и изучать что-то новое, постоянно. Не бояться нового, пинать себя, пробовать - и множество вещей будут изучены за короткие сроки.

flexbox, grid layout

- это css из современных стандартов. Что бы знать, когда применять - вы должны знать версии старых браузеров, которые необходимо поддерживать на вашем проекте, и соответствующую поддержку этих стилей. Например, формировать элементы на flexbox на порядок удобнее, чем на float, но в IE9 вы уже использовать flexbox не можете.
Немного о новинках в css тут.
Поддержка браузерами тут.

gulp, webpack и пр.

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

препроцессоры

- представьте, что вам чего-либо не хватает в html и css.
Например, вы хотите разбивать большие html файлы на множество мелких, или вам нужно вставить в html динамическое содержание - для этого созданы html шаблонизаторы. Вы используете в работе синтаксис конкретного шаблонизатора, затем тот же gulp автоматически собирает эти файлы в обычный html, который понимает браузер.
Аналогичная ситуация с css, препроцессоры позволяют разбивать файлы на мелкие, и собирать в один, доступны переменные и функции, и многое другое.
Популярный шаблонизатор Pug
Один из css-препроцессоров Stylus

пакетные менеджеры

- это удобный способ скачать конкретные библиотеки, и переносить их из проекта в проект. Статья про npm тут

Ну и конечно статьи и подкасты:
https://habrahabr.ru/
jsraccoon.ru

https://soundcloud.com/web-standards
https://radiojs.ru/

Конкретные статьи и ресурсы для новичка:

frontender.info/a-baseline-for-front-end-developers
frontender.info/a-guide-to-flexbox
css-live.ru/articles-css/pravilnye-kontrolnye-toch...
https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
https://habrahabr.ru/company/zfort/blog/321214/
https://frontendmasters.gitbooks.io/front-end-hand...

Дерзайте!

Конечно Ruby on Rails Guides этого конечно будет мало, но туда часто будете заглядывать.

Вначале:
Курсы от Lynda, довольно таки подробно всё объясняют
Ruby Essential Training Азы руби
Ruby on Rails 3 Essential Training Азы рельсов

Более короткие курсы от tutsplus, обьём знание практически как у курсов выше, но подаётся более динамично чтоле.
The Fundamentals of Ruby Азы руби
Riding Ruby on Rails Азы рельсов

После любого курса желательно, пройти курс Rails for Zombies Redux на codeschool, он бесплатный, там после каждого видео интерактивное (как правильно?:) ) выполнение заданий, хорошо закрепляет материал.

Есть ещё http://ruby.railstutorial.org/ Но подача автора мне не нравится, слишком медленно говорит, много пишет тестов, что для начинающего мрак полный, его лучше смотреть для общего развития, когда уже хоть что то в руби и рельсах будете шарить. У него так же есть книга по этим видео урокам, если читать на сайте то бесплатно. Хотя первую эпизод всётаки посмотреть стоит, там как задеплоить приложение на heroku, чтоб посмотреть как в это работает в продакшине или показать кому то, то что написали.

Books:
Agile Web Development with Rails (Pragmatic Programmers)

Даю на английском так как на русском нормальных материалов практически нет. hasbrains.ru то что выше написали разве что, ну а книги как всегда, переводы опаздывают и не всегда термины правильно переведены.

Видео как мне кажется лучше усваивается, визуально смотреть на код и тут же тебе показывают результат. Но книги тоже желательно почитать. Просто мне кажется видео для ознакомления быстрее.

Удачи.