Homise

Какие-то технологии верхнего уровня приходят и уходят быстро, например разные фреймворки в веб разработке. Но они базируются на базовых технологиях, которые довольно статичны (веб фреймворки базируются на - http, css, JS, ЯП для серверной части, ... Посмотрите когда последний раз менялся стандарт http, а что принципиально нового появилось в новой версии JS и на сколько это новое трудно изучить?). То же самое и в других областях. Если вы дорастете до хорошего знания базовых технологий то технологии верхнего уровня сможете легко осваивать.
В других отраслях то же самое, например в сетях: IPv4 - сколько уже лет на нем весь интернет работает? (скоро 40 стукнет, по моему). Его все хоронят, а он никак не умирает. Уже и преемник IPv6 больше чем 20 лет назад появился.
И не стоит кидаться на все подряд. Определите для себя наиболее интересное направление на данный момент и погружайтесь в него.

https://magora-systems.ru/etapy-razabotki-prilojeniy/
https://spark.ru/startup/componentix/blog/4499/osn...

Вы инсерт нажали, нажмите его еще раз

Посмотрите

Сделать событие на клик.
Предположим, у зеленого блока ширина 90%, у красной линии - 10, тогда:
$('.red_line_class').on('click', function(){
$(this).css('width', '20%');
$(this).parents().find('.green_block_class').css('width', '80%');
});
Можно напрямую стиль менять, можно по клику менять клас и в css уже дописывать.
Можно дописать toggle, чтобы при повторном клике ширина блоков становилась исходной.

Flexbox нужно использовать всегда.
В случае старых IE вставляем условные комментарии с css-фиксами на старых float-ах под этот недобраузер.

<!--[if IE]>
<link href="ie.css" rel="stylesheet">
<![endif]-->

Float же предназначен для обтекания блока текстом.