Артём

1) любом удобным для вас способом.
2) не платите
3) в банкомате с валютой
4) нет

UI это User Interface. Что как бы намекает. jQuery это JavaScript библиотека позволяющая Вам удобно работать с DOM. jQuery UI предоставляет набор виджетов для организации пользовательского интерфейса. jQuery UI использует jQuery, но является самостоятельным продуктом.

Так то у вас три года опыта а это около 6000 наработанных часов о каком джуниоре вы говорите, будьте мужиком, хватит быть тряпкой

Очень зависит от того, разработка чего ведётся. Сегмент (b2b/b2c), не-/нагруженное, сайтик/веб-приложение/интернет-магазины/большой портал... И так далее. Из общего можно выделить:

- sql, как вы сказали - напрямую к РНР не относится, но знать его и СУБД точно придётся (в основном, MySQL, PostgreSQL, иногда Oracle, MSSQL).
- фреймворки - для любой более-менее серьёзной разработки. Наиболее распространённый зоопарк: Yii/Yii2, Symfony2, Zend, сейчас нашумел Laravel (не пробовал), иногда CakePHP.
- разные CMSки для сайтов и особенно для интернет-магазинов. Если сегмент требует, изучайте.
- для нагруженных проектов - memcached, APC, RabbitMQ, всевозможные NoSQL (Mongo, Redis). Понимание тонкостей Apache и Nginx.
- cron
- контроль версий - в основном сейчас git, используется также svn.

Из книжек никогда ничего не читал, кроме php.net (это прям "настольная") и гугла. Наверное, это неправильно. Но я очень не люблю учить программирование по книжкам - у меня как-то всё сразу забывается. Поэтому я по ходу необходимости почитываю разные статейки / ответы на вопросы.

<div class="menu">
    <a class="menu-item-bank">Банки</a>
    <a class="menu-item-advice">Советы</a>
    <a class="menu-item-experience">Личный опыт</a>
    <a class="menu-item-expert">Эксперты</a>
    <a class="menu-item-forum">Форум</a>
    <a class="menu-item-news">Новости</a>
</div>

.menu{
   position:relative;
}
.menu-item-bank,
.menu-item-advice,
.menu-item-experience,
.menu-item-expert,
.menu-item-forum,
.menu-item-news{
   display:inline-block
   padding:4px 4px 4px 24px;
   background: transparent url("sprite.png");
   border-bottom-width:3px;
   border-bottom-style: solid;
}
.menu-item-bank{background-position:0 0;border-bottom-color:#001}
.menu-item-advice{background-position:-24px -24px;border-bottom-color:#002}
.menu-item-experience{background-position:-48px -48px;border-bottom-color:#003}
.menu-item-expert{background-position:-72px -72px;border-bottom-color:#004}
.menu-item-forum{background-position:-96px -96px;border-bottom-color:#005}
.menu-item-news{background-position:-120px -120px;border-bottom-color:#006}

можно как-то так :)

Комбайн с использованием js и css - jsfiddle.net/empdxa5x по мотивам @aen

Ну а теперь как плагин. Что то у меня сильно хорошее настроение..

Нельзя манипулировать :after, потому что это не техническая часть DOM и поэтому он недоступен для JavaScript.
Вот есть несколько обходных путей.

document.getElementById('arrow').onmouseover = function() {
    pic.src = "onMouseOver.png";
};

Каждый раз, когда вы так делаете, умирает котенок. Положите обе картинки в спрайт и меняйте скриптом background-position, если уж по каким-то причинам не можете использовать CSS. Иначе эта картинка будет подгружаться только после того, как юзер наведет мышь, и пока она не подгрузится, не бует видно кнопки вообще.

Вынести теги за html? Мсье!

Объедините все в 1 файл и сожмите.

Без разницы, как вам удобней работать, так и работайте. Но я считаю, что дамп БД должен быть в отдельном .sql файле, а не в PHP-коде.

Redmine

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