Андрей Годунко

1. Правилен мой план изучения наведенный ниже

Ну как сказать... Частично

2. Когда я уже изучу js вместе с Gulp Bootstrap jQuery. Стоит ли мне попробовать freelance с знаниями js, и html\css?

Можно попробовать на какой-нибудь легаси проект.

Великолепный план, Уолтер

Модератор, это вопрос не ради спама, я сам решение нашел чисто случайно

найти надо строчку "workbench.activityBar.visible" в файле ~/.config/Code/User/settings.json
и установить её значение true

.nav ul {
    display: flex; 
    text-transform: uppercase; 
}

Вы уверены, что правильно указали фрагменты кода?
В HTML-коде указан класс menu__items-wrap, а в CSS-коде селектор указан для класса header__menu__items-wrap

Может поэтому и не работает?

Два <p> один под другим.
В каждом текст и псевдоэлемент (с картинкой) - флексом или гридом. Можно даже и без флекса. Псевдоэлемент сделать инлайн-блочным. И задать ему vertical-align: middle.

Альтернатива: вставлять картинки просто фоном, но может быть сложнее при адаптиве.

Если очень хочется оставить картинку как img, то нужно задать ей атрибут aria-hidden="true", а дальше любым из способов: инлайн-блоком, флексами или гридами.

а почему именно флекс, вот так же вроде можно сделать
https://codepen.io/scrappyjs666/pen/KKZpeMw

Вы можете задать высоту (или минимальную высоту) 100vh.

Другой вариант: задавать высоту в %, но у родителя должна быть не нулевая высота. А у body она 0 по умолчанию. Соответственно, сначала нужно растянуть на весь вьюпорт html, затем body и только потом будет от чего считать высоту вашего блока.

раз https://codepen.io/AnnaSummer/pen/KKZKLjy
два https://codepen.io/AnnaSummer/pen/oNpNRrK

Вот посмотри

Хотел Абеля порекомендовать, но случайно наткнулся - кто-то для Вас уже целую подборку приготовил https://vk.com/devmath/assembler

Смотрел здесь? https://developer.mozilla.org/ru/docs/Web/CSS/alig...

Внешний отступ полей гибкого элемента центрируется в пределах линии на поперечной оси.

<div class="card">
    <img src="https://hsto.org/webt/62/20/e0/6220e03be7247161494475.jpeg" alt="background">
  </div>

.card {
  display: flex;
  justify-content: center;
}

Но в твоём случае можно

<div class="card">
    <img src="https://hsto.org/webt/62/20/e0/6220e03be7247161494475.jpeg" class="back" alt="background">
  </div>

.back {
  display: flex;
  margin: auto;
}

display: flex и align-items: center должны быть у родителя.

названия переменных проверить в новом скрипте.
в одном месте list, в другом olist.
И читайте выдачу ошибок, если непонятно - то см. в поисковике
list это встроенная функция list(), питон допускает назвать так переменную, но так делать не надо - нельзя будет пользоваться функцией. Хотя, если она только внутри функции, может и безопасно.