dagababaev

Делаешь 2 вида! Один вид в открытом состоянии, другой вид в закрытом!

И вот в закрытом виде, стили вешаешь на hover

.card { transition: 0.3s; }
.card:hover {  transition: 0.3s; }

Все это сильно зависит от того, что вы знаете сейчас. Английский знаете? Если нет, то это первое, что стоит изучить, хотя бы на уровне чтения.

0. Допустим если вы не знаете английский.
lingualeo.com
Русский сервис, где можно читать тексты и смотреть разные видео на английском. Очень удобен.
https://www.duolingo.com/
Похожий сервер, чуть проще. У него очень интересный принцип работы и замысел почитайте.

1. Допустим вы знаете/изучили английский. Нужны только самые основы вы их разовьете в процессе изучения онлайн-курсов. Что такое онлайн-курсы? Это сервисы, где вам через видео, книги, тесты предлагают знания. Университет онлайн.
Это очень хороший способ, потому что у них уже есть набор тем, которые вам требуется изучить.
Есть такой сервис на русском:
htmlacademy.ru
Я не пробовал, но в целом рекомендуют. Он не совсем бесплатный, но там 100 рублей в месяц. Это совсем мелочи.
Есть еще:
proglive.ru
Но он если честно слишком дорогой. Я смотрел там несколько вэбинаров и не был особо впечатлен. но может кто-то там учится подскажет. Может в интернете найдете информацию о нем.

Есть более продвинутые аналоги на английском:
www.codecademy.com
Бесплатный набор курсов по очень-очень большому спектру тем. Достаточно высокого качества.

Еще
https://teamtreehouse.com
https://teamtreehouse.com (Без моей реф. ссылки)
Этим я сейчас пользуюсь сам. Курсы более подробные и приятные. Хотя если, что-то знаете то могут показаться зануднее. Есть еженедельное шоу, где рассказывают о всяких новых технологиях и течениях. Часто появляются новые курсы. Можно задать вопросы на форуме. Он правда платный. Около 1000 рублей в месяц, но он того стоит.
https://www.udacity.com/
Еще один бесплатный аналог. Не пробовал.

2. Допустим вы прошли курсы по html,css, js, jquery, php. Я рекомендую уже с этого момента выполнять платные работы.
Есть много разных мест, где можно найти работу:
Русский: fl.ru
Английские: www.freelancer.com
https://www.odesk.com
В англоязычном секторе зарплаты намного приятнее. Для жителей регионов в особенности.
Вы можете брать дешевые проекты и предлагать низкую цену. Практика очень важна.

Впрочем можно и попробовать найти работу(Не фрилансером), но я считаю, что это сильно ограничит ваш прогресс на данном этапе.

3. Несмотря на то, что этот пункт идет третий он должен идти параллейно со вторым. А возможно и первым. Но в целом это все не обязательно, просто так вы повышаете свой уровень.
3.1 https://www.edx.org/course/mitx/mitx-6-00-1x-intro...
Это очень хороший курс от крутейшего в мире универа по теме IT. Сначала кажется, что легкий, а потом внезапно начинается ад. Пройдя его вы наверно будете знать больше, чем большая часть людей, которые заканчивают российские вузы)
Там правда Python, но знать его не надо, все объяснят.
Зато очень рекомендуется математика.
Для начинающих несмотря на название достаточно сложен.
3.2 https://www.class-central.com
Список курсов, которые проводят крупнешие университеты мира.
Вам нужно многое из того, что касается программирования, алгоритмов, математики.
Ищите, что вам интересно и вперед.
Я советую:
3.3 https://www.coursera.org/course/algs4partI
И вторую часть.
Там правда используется Java, но нужны только основы.
3.4 https://www.edx.org/course/linuxfoundationx/linuxf...
Курс по основам Linux. Не пробовал.
3.5 Математика. От простого к сложному:
https://www.coursera.org/course/algebra
https://www.coursera.org/course/precalculus
https://www.coursera.org/course/calcsing
https://www.coursera.org/course/calc1
https://www.coursera.org/course/sequence
Не все курсы проходят, так что надо искать аналоги. Там были и более сложные. Так же важны курсы по теории вероятности.

Что осталось за скобками? Придется изучить систему контроля версий. Я люблю Git. Вот хорошая книга:
cloud.github.com/downloads/GArik/progit/progit.ru.pdf
Совет: Не берите больше 3-4 курсов. Не справитесь. Хотя бы уж в начале не берите.

Если пройдете все это, поздравляю, вы стали программистом причем достаточно высокого уровня.
То есть подведем итоги. Вам надо:
1. html, css. Не надо в них углубляться. Просто основы.
2. js, jquery. Тоже на начальном этапе не углубляйтесь.
3. php и какой-нибудь фреймфорк. Symfony или Yii. И какая-нибудь база данных.
3.1. Узучение какой-нибудь CSS. Drupal например. Или Wordpress.
4. Система контроля версий. Git.
5. Математика.
6. Алгоритмы.
7. Computer Science в целом. Linux, шифрование, механика работы баз данных и серверов и т.д.
При этом по сути для трудоустройства хватит первых трех, что бы там кто не говорил.

Есть опыт помощи таким начинающим.
реальный срок до запуска джуниора - полгода, никого не слушайте.

Важные моменты
веб-программирование на базе PHP - это стек технологий: PHP/SQL/CSS/HTML/JS + Linux хотя бы азы + знание важных инструментариев (FTP, Git/SVN, работа с БД)
чистый PHP плюс даже все перечисленное выше - не особо нужно и не интересно. Нужно знание конкретных платформ: фреймворков и/или CMS. (Почитайте вакансии на Хантиме по запросу PHP, обратите на это внимание). Навскидку самые востребованные (спорно конечно): Yii фреймворк, CMS Битрикс и Wordpress.

Как начать?
Смело на амбразуру!
1) Установите у себя рабочую среду LAMP/WAMP - Apache, PHP, MySQL. Для этого возьмите пакет Denwer или OpenServer, что больше понравится. Сделайте Hello World просто как HTML, потом на PHP, потом алертом на JS. Порадуйтесь.
Установите все редакторы кода. Кто там вам будет рекомендовать блокнот или notepad++ - не слушайте. Варианты: если машина мощная (4+ Гб памяти и пр.), берите редактор phpStorm (для php/html/css/js). Если не очень мощная - берите komodo edit. Для работы с БД инструмент встроен в Denwer/OpenServer, это phpMyAdmin
2) Идеально, если вы договоритесь сделать кому-нибудь сайт. Бесплатно или за небольшую плату. Если нет - сами себе поставьте задачу: сайт про котиков/про детей etc. Красивый сайт, с галереей, с эффектами, с материалами
Возьмите CMS Wordpress и попытайтесь сделать сайт у себя на компьтере. Настоящий сайт, во всей красе, как вы хотите. Правьте его, смотрите код, экспериментируйте. Сообщество огромное, вы найдете ответы на все свои вопросы
Потратьте чуть денег, купите себе домен и хостинг, залейте сайт на хостинг.
Порадуйтесь. Похвастайтесь.
3) Ищите в сети тестовые задачи и решайте их, изучайте материалы собеседований, вопросы - их много.
4) Зарегистрируйтесь на odesk.com под каким-то фейковым email, пройдите тесты по PHP, CSS, HTML, jQuery, Wordpress, а во время прохождения делайте скриншоты вопросов. Потом изучайте эти вопросы, ищите ответы, далеко не обязательно на все. Тесты вы, конечно, не пройдете, но вам нужны только вопросы.
5) Постоянно следите за вакансиями "PHP-программист", "веб-программист" на Хантиме, на hh.ru и подобных ресурсах.

И да, как только напишете первую строку кода - начните читать про Git. Как будете готовы - сразу внедрите у себя Git, вы будете очарованы его возможностями.

Вот как раз на полгода.
После этого у вас появится масса информации, и дальше вы сами сориентируетесь.

Нет одинаково эффективного пути для всех и каждого.

Я учился на конкретных задачах. Обучение практически всегда начиналось с состояния хочу сделать вот это (четко осознаваемый конечный результат), но вообще понятия не имею как это делать, и даже с какой стороны подойти и за что хвататься...

Тут главное - настолько сильно хотеть достичь результата, чтобы любые препятствия только добавляли азарта. Чтобы ночами спать не мог и думал о задаче. Это ключевой момент обучения. Все остальное - декорации, способы, инструменты...

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

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

Далее из модулей, как из кубиков лего пытаешься собрать функциональные блоки. Тут важно понимать, что чем более автономные модули и блоки у тебя получаются, тем лучше, особенно для целей тестирования. Если ты забиваешь болт на тестирование, то тебе нечего делать в разработке.

На первых порах, тестирование будет занимать до 99% времени и сил. Заодно подтягивается синтаксис используемых языков (вообще не важно каких), вырабатывается внимательность, концентрация, тренируется память и пр.

О даа, детка, хороший программист имеет нереальную оперативную память, в которой умудряется держать десятки и сотни ключевых аспектов контекста задачи, учитывать их особенности, взаимное влияние (комбинаторика), и пр., без чего никакая задача никогда решена не будет.

С этим не рождаются, это выкристаллизовывается за сотни и тысячи часов жесткого баттхерта от неспособности найти, где ты забыл поставить запятую... Когда код из 10 строк прочитан сотни раз вдоль, поперек и наискосок...

Только так, только жесткий хардкор! Если ты не прошел эту фазу, то ты либо родился гением, либо тебе нечего делать в профессии... Это как детские болезни - ими нужно переболеть в детстве.

Обрати внимание, самое главное качество во всем этом многабукафф - упорство на грани фантастики. Любой, кто не дойдет до конца, не треснет себя по лбу в соты раз с воплем, так вот же она где, эта запятая, пропущена - сломается в самый неподходящий момент на боевом проекте...

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

Ах да, обложись справочниками по любому инструменту и научись быстро вникать и подхватывать необходимый минимум. Обычно достаточно на 20% владеть инструментом, чтобы решать 80% задач.

В любом случае я за критерий истины держу платежеспособный спрос.