Для начала Вам нужна задача. Вот Вы где-то работаете, Ваша компания что-то там такое делает. Допустим, руководитель организации принял решение сделать редизайн сайта. Этап рисования пропустим, это работа дизайнера. Из требований 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 шаблонов - лично я
не рекомендую, очень сильно не рекомендую. У Вас либо могз взорвется от потока новой информации, либо в голове будет такая каша...
Средний
