Самообучение фронт — энд на работе не связаной с програмированием?

Для начала Вам нужна задача. Вот Вы где-то работаете, Ваша компания что-то там такое делает. Допустим, руководитель организации принял решение сделать редизайн сайта. Этап рисования пропустим, это работа дизайнера. Из требований 1)Шаблон для WP 2)Адаптивный 3)Использовать Twitter Bootstrap

Перво на перво Вам нужны основы HTML. По идеи основных тегов всего несколько: html | head | body | div | ul -> li | ol -> li | span. Это то, что используется наиболее часто. Их описание читайте на htmlbook.ru
Далее основы CSS. Из всей массы css-свойств могу выделить background | margin | padding | float | position | display. Это опять же САМЫЕ основные. Их, как и в случае с HTML на много больше, просто лично я с перечисленным сталкиваюсь чаще всего.

Как все это можно изучить в комплексе? Вообще есть курс на Codeacademy, он прямо так и называется HTML && CSS. Можете также изучить курс по созданию сайтов все там же. Они оба на английском, не знаю барьер ли это для Вас.

Из инструментов... Погуглите на тему Sublime Text. С парой дополнений(на хабре статья была, в поиске по ключу "sublime text" в гугле она есть) для фронт-энда его вполне достаточно.

Как освоите курс, беритесь за верстку сайта Вашей компании. Не бросайтесь сразу верстать шаблон под WP, сделайте сначала просто один html-файл с подключенным к нему css/js-файлами.

В процесс верстки сайта Вашей компании, кроме уже упомянутого мною сайта htmlbook.ru Вашим любыми ресурсом будет официальная документация по Bootstrap - это такой CSS-фреймворк, который поставляет Вам кучу готового кода для типовых задач. Официальная документация getbootstrap.com(англ). Русскую тоже видел, но сам юзаю английскую.

Чистый html готов? Отлично, вот теперь "рубите" его и раскидывайте по файлам шаблонов WP. А поможет Вам в этом официальная документация по шаблонам Wordpress(англ).

И так, минуло от 2-3 дней до нескольких недель и Ваш первый шаблон готов. Я поздравляю Вас. Теперь сделайте еще штук 5 таких(не меньше) чтобы закрепить свои навыки.

Далее, если у Вас все еще будет свободное время и желание развиваться в области front-end разработки, загуглите на тему LESS/SASS. Если вкратце - эти технологии позволяют быстрее собирать типовые шаблоны, верстать типовые макеты. НО это именно Вам на будущее, т.к. без практики в на чистом CSS лучше сюда сходу не лезть.

Вам могут здесь также рекомендовать взяться на JavaScript/JQuery... Пока на сделайте 5 шаблонов - лично я не рекомендую, очень сильно не рекомендую. У Вас либо могз взорвется от потока новой информации, либо в голове будет такая каша...

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

Конечно можно и миллионы фрилансеров, работающих удаленно, подтвердят мою мысль)

Все возможно, если есть желание и цель + интернет. Учишь по 4-6 часов в день HTML/CSS, далее принимайся за js. Ну а дальше все что понадобится фронт-энду в повседневной работе.
Это и препроцессоры, и таск-менеджеры и взаимодействие библиотек и фреймворков. Ну и напоследок, конечно же понадобится практика в конторе, без нее никак не закрепить и не обкатать выученный материал.

Устроившись недавно на новую работу front end разработчиком очень ясно осознал, что фронтэнд это ДАЛЕКО не HTML+CSS. В такой же ситуации я был на предыдущей работе (было время изучать), но было видимо не правильное понимание фронт-енд, особенно когда посадили пилить приложение на angularJS.
Так что мое мнение, без плотного занятия (в виде основной работы) крайне сложно будет добиться необходимого результата для зарабатывания в свободное от работы время