archelon

Существуют понятия поток элементов в документе и контекст форматирования. Строчные располагаются в потоке слева направо, блочные — сверху вниз. Float заставляет другие элементы в потоке обтекать указанный. Именно это вы наблюдаете в первом примере.
Определенные свойства создают новый контекст (overflow, display с некоторыми значениями и другие). В новом контексте создается свой поток элементов. Вы это видите на втором примере.

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

Как вариант, использовать эту привычку во благо. Посещать ютуб стало привычкой, теперь нужно культивировать просмотр нужного контента.

Начать стоит с коротких полезных видео по тематике профессии или что-нибудь про софт-скилы. Уверен, что никаких резких изменений не последует, но, культ полезного контента даст плоды.

Вот например, чтобы изучить что-то основательно, нужно курить 3-4 часовые видео + практика, но в реалиях такого энтузиазма мало у кого есть, поэтому, как вариант начать с 5-15 минутных видео. Просто начать.

У меня была точно такая же история, только вместо ютуба я читал тостер)))) Понимая, что не могу с собой ничего поделать, я начал просматривать по 300-400 советов из разных тематик ежедневно в том числе рубрики в которых я полный ноль. А позже я культивировал полезный поиск + сбор полезных материалов, в том числе из комментариев.

Я купил ежедневник, где что-то зарисовываю или записываю о том, что я смотрю и читаю, подстегивая себя к новым знаниям. Это своеобразная медитация. Скептически всегда относился к ежедневникам, но оказалось забавно, как такая штука может якорить и напоминать: не останавливайся, чувак!

В один момент, я понял, что хочу углубляться по вопросам и перескочил с тостера на видео, книги и практику. Начинал так же, с банальных вещей, которые культивировал. Например, что такое цвет? И по 15-20 мин ежедневно что-то читал, смотрел изучал, пока не захотелось это делать по 30 мин в день. некоторые вещи я хочу делать теперь по 3-4 часа в день.

Мой посыл в том, что резкой перемены не произойдет. А чтобы произошла перемена ты сам должен сказать себе: так, мне пора на следующий уровень. Чтобы попасть на следующий уровень окружи себя инфополем текущего, пока эта информация не покажется усвоенной.

Повторюсь, если ты чувствуешь что жизнь идёт как у овоща, начни с примитивнейших вещей и самых простых ежедневных задач. Например, завтра делай всё тоже самое, только посмотри 10 минут видео, которое полезно, например про софт скилы. Завтра снова страдай херней, но снова посмотри 10 минут и так далее. Через месяц-полтора доза увеличиться, а свою привычку ты сможешь использовать во благо.

Мягкие навыки 1
мягкие навыки 2
40 правил философии ответственности обрати внимание на 2 правило
теория психики
рекомендую его заметки

Давай ещё разок: тебе не сжигать мосты нужно, а выжать полезное действие из привычки.

0. Никаких резких перемен не будет.
1. Почитать про софт скилы и что формирует их.
2. Продолжить смотреть ютуб, разбавив ежедневной рубрикой "полезные 15 минут"
3. Окружить себя инфополем текущего уровня, пока не захочется на следующий. А захочется, так как эти 15 минут превратятся рано или поздно в 20, а потом в 30. Культивация полезного действия.
4. Попав на новый уровень, проделать тоже самое.

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

Михаил, проще всего сделать данный блок флексом "display: flex", и выровнять все элементы в нем свойством "align-items: baseline". Вот тут хорошая шпаргалка по флекс-боксам.

им нужен дизайнер который может рисовать сайты, делать кей-вижуалы, айдентику, логотипы, анимацию, работать с афтер еффектс.

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

Скролл пропал где-то здесь:

body {
   overflow: hidden;
}

На чистом CSS, без JS https://jsfiddle.net/b31Lr7fk/
Вместо цветов поставьте свои картинки.

Зачем включать в селектор все элементы вложенности? Конструкция, как в вашем примере, может быть нужна только если ваш class4 может содержаться в десятке разных структур дерева и, главное, иметь разное оформление. БЭМ, который многие считают чуть ли не панацеей - техника, которая была придумана для разметки, генерируемой автоматически. Если верстка делается вручную, у вас есть возможность подумать головой и спланировать разметку.

Сначала идет ТЗ. Потом - протоколы взаимодействия. А потом - уже все равно, хоть одновременно и веб и фронт. Это в сферическом идеале.

Вот, честно.... устанете искать тему, которая подойдет под этот дизайн и даже если найдете, то устанете ее переделывать, чтобы она была похожа на указанный выше макет.
Решение - самому сверстать.
С чего начать? html + css + js (jquery). Как вариант изучите еще флексбокс и подключите bootstrap 4. Это в определенной мере ускорит разработку. А после того, как верстка будет готова, есть смысл создавать ВП тему. И тут уже вам нужно изучить кодекс ВП по разработке темы. Самая "сложная" задача сверстать дизайн)

сайдбар справа всегда имеет статическое положение

это вы про position fixed

... и меняет свой цвет в зависимости от секции которая сейчас на экране

а это просто реализуется средствами jquery. Просто изменяете фоновый цвет и все...

Я бы не советовал так делать, так как с десктопа тоже можно позвонить. Раньше я сам звонил с помощью скайпа и при клике по такой ссылке телефон пробрасывалс в скайп.

Связка imac - iphone сейчас прекрасно работает.

новое обновление windows 10, тоже начнёт связывать андроиды с виндой.

Почитайте про "reductions". Это основа основ.

что, как он смог сжать это в одно слово бкз единой паузы

Это одна из фишек английского языка, особенно, американского акцента.

Например, "i bought him a car", который можно сказать "ай бОт хим э кАр", произносится, как "эбАрм'экАр" без задержек (звуки не такие, но, надеюсь, посыл поняли)

У самого были огромные проблемы с восприятием разговорного английского на слух. Решал через просмотр фильмов/сериалов в оригинале. По началу с субтитрами. TIP: смотрите те фильмы/сериалы, которые смотрели на русском, ибо самые большие проблемы с восприятием начинаются тогда, когда теряется контекст.

// edit

Что мне ещё определенно помогло – это прокачка произношения. Когда учишься говорить как нэйтив спикеры, то многие reductions попадают в отсек долгосрочной памяти, и затем они автоматически применяются при звуковом восприятии.

И ещё совет, капитанский такой: практиковать английский язык каждый день. Говорить дома на английском (я вот живу один, так не смущаюсь сам с собой разговаривать), петь песни (нередко включаю песни, гуглю слова и просто пою – тренировать моторику языка).
Если на работе английский задействуется - вообще класс.

В мемасики/картиночки не прочь позалипать? Залипайте в них на английском (к слову,  масса контента с reddit переводится – читайте, первоисточник).

const getCard = button => $(`#card${button.id.match(/\d+/).pop()}`);

$('[id^="button"]').hover(
  e => getCard(e.target).fadeIn(),
  e => getCard(e.target).fadeOut(),
);

или

const $buttons = $('[id^=button]').hover(function(e) {
  this.eq($buttons.index(e.target))[e.type === 'mouseenter' ? 'fadeIn' : 'fadeOut']();
}.bind($('[id^=card]')));