archelon

Оберните img и h4+p в отдельные .col блоки

да потому что это пример/proof of concept, а не законченное/готовое решение.
кто заморачивается готовым решением, те не пользуются песочницами.

Уберите header из контейнера, а в контейнер поместите содержимое header'а

<header class="header-menu">
      <div class="container">
        <div class="header-menu__logo"><img src="img/logo.png" alt="Логотип"></div>
        <div class="header-menu__nav-bar">
          <nav class="header-menu__nav">
            <a class="header-menu__links" href="#">ABOUT</a>
            <a class="header-menu__links" href="#">CONTACT</a>
            <a class="header-menu__links" href="#">CATALOG</a>
            <a class="header-menu__links" href="#">BLOG</a>
            <button type="button" class="header-menu__btn" name="button">Sign in</button>
          </nav>
        </header>
     </div>

теперь у вас header на всю ширину, можете задавать ему border

1. Передавать всегда следует временный пароль с автоматическим требованием сменить пароль при первом входе.

2. Передавать пароль можно через доверенное лицо.
Это может быть непосредственный руководитель сотрудника, либо отдельно выделенный "security sponsor" - выделить несколько человек, чтобы в каждой локации было 1-2 security sponsor-а, которые могли бы лично встретиться с сотрудником для передачи пароля.

3. Можно технически - регистрировать телефон сотрудника, его внешнюю почту. Но это только для основного пароля (входа в домен/почту). Для повышения безопасности можно поделить пароль на две части, половину слать на почту/телефон, половину через руководителя/HR.

4. Если это пароль от второстепенных систем, то можно отправлять временный пароль на корпоративную почту.

Как вы прокачивались?

Много-много экспериментов с целью не "научиться решать типовые задачи", а скорее "поиграть с инструментами и посмотреть, что будет". Такой подход дает более полную картину происходящего. Ну и гугл/документации/статьи по мере необходимости.

На что стоит сделать упор в обучении именно верстки и малого количества js-а?

Методы зависят от наличия времени и изначального уровня обучаемых. В целом для развития понимания CSS полезно "рисовать" на нем. Грубо говоря один автопортрет или зверушка, сделанная самостоятельно от начала и до конца, даст опыта как десяток лендингов. В таких песочницах концентрация хитрых задач на верстку в разы выше, чем на обычных сайтах, и обучение идет быстрее. Ну и просто прикольные штуки получаются, можно внести элементы игры с плюшками за успехи. В последние годы эта тема стала очень популярной на CodePen в виде ежедневных разминок для ума.

Как обучали людей? У меня нет опыта в обучении людей

По поводу методологий и хороших практик - нужно объяснять, отвечая в первую очередь на вопрос "почему". Тупое давление авторитетом (я прав - вы нет, мое решение хорошее - ваше нет) ни к чему не приведет. С вопросом "как" - отправлять к документации, чтобы читали сами и заодно захватывали что-то еще по дороге. Если все разжевывать - не научатся работать самостоятельно. Полезно научить их задавать вопросы. Если видите, что совсем не получается - тогда уже можно подсказать и показать. По возможности нужно автоматизировать проверку действий стажеров, чтобы они сразу видели свои косяки, не дожидаясь, пока придет наставник. Я тут как раз на днях подборку полезностей делал, там и для этого есть инструменты.

Коммуникацию нужно наладить в обязательном порядке, чтобы все имели возможность спросить и не боялись это делать. Тут больше про психологию вопрос - нужно не только определить время и способ общения, чтобы и вам не мешали, и могли оперативно получить ответ, но и обязательно следить за своим языком, чтобы не быть "слишком токсичным" (про это все постоянно забывают). И помните - все ошибаются, ваши ошибки должны становиться поучительными примерами, не нужно их скрывать или стыдиться. Полезно в конце недели делать собрание "только для стажеров" и разбирать, что произошло интересного за неделю, чтобы они видели полную картину, учились на ошибках друг друга и распространяли опыт уже между собой - вы объяснили что-то одному, он в конце недели - остальным (а когда объясняешь - сам лучше понимаешь). Как вариант все вопросы от них к вам можно организовать в отдельном таск-трекере, чтобы ничего не терялось (как в бесконечных чатах) и можно было отсылать вновь прибывших к уже готовым ответам.

Обычно dist-upgrade делают когда секса не хватает

Большинство верстальщиков не умеют работать с канвасом, клепают себе однотипные сайтики на бутстрапе и довольны жизнью. На этом вопрос можно закрыть. Но иногда возникают задачи вроде трехмерных презентаций товаров или каких-нибудь простых конструкторов - тут уже минимальный опыт с three.js или аналогами будет полезен. Помнить все не нужно, но общее представление должно быть.

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

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

З.Ы.: Не стоит себя ограничивать в знаниях. Для профессионала лучше, когда знание есть и не нужно, чем когда нужно, а его и не было никогда.

Можно, пишите в css свой класс с анимацией ( как делают animate.css), добавляете его после wow и радуетесь

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

<div class="custom-block wow flash">...</div>

В CSS нет родительских селекторов. Решение возможно через .parentNode JavaScript

'use strict';
document.addEventListener('DOMContentLoaded', () => {

    let checkbox = document.querySelector('label[for="aux_prem"]');

    checkbox.addEventListener('click', function()
    {
    	let parent = this.parentNode;
    	
    	( !parent.classList.contains('selected') ) ?
    			parent.classList.add('selected'):
    			parent.classList.remove('selected');
    });

});

Надеюсь дальше сами додумаете

Специфичность селектора определяется трех- (четырех-) значным числом, которое можно получить, посчитав сумму составляющих частей селектора.
При расчете следует брать следующие цифры:
Каждый селектор идентификатора = 100
Каждый селектор класса, атрибута и псевдокласса = 10
Каждый селектор типа(тега) и псевдоэлемента = 1
Некоторые псевдоклассы не участвуют в расчете (:not), но участвует их внутренний селектор или самый специфичный селектор из внутренних, если он составной.
Складывая эти цифры, получаем специфичность селектора. Если специфичность получается одинаковой, то применение правила определяется css-каскадом.

Отдельно считается специфичность стилей style. Считай, что они добавляют сразу 1000 к результату. Ну и !important вносит свои нюансы.

Обо всех этих занимательных вещицах написано здесь: https://www.w3.org/TR/selectors/#specificity

Вопрос хороший, но неправильно сформулирован.
Поскольку тут на самом деле два вопроса - какой драйвер использовать и уже потом - как правильно соединяться.
Ответ на первый вопрос очевиден. Если выбирать из mysql_connect, mysqli и PDO, то достаточно зайти на страницу мануала, посвященную каждому варианту, и посмотреть, что там написано. Ну или попробовать использовать в своем коде и посмотреть что получится.

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

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

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

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

Хорошим вариантом будет использовать высокоуровневую абстракцию типа redbean. Но поскольку нормальной документации по нему нет, а есть только пара хайповых видео, где он используется, причем без каких бы то ни было объяснений и разбора основ, то я бы рекомендовал редбин уже опытному разработчику, а не начинающему. Но в любом случае как в нем соединяться, написано в документации

Пароль в базе данных не шифруется а хэшируется. Делается это с посощью функции password_hash

Ну ОК, конечно, но:
1. Я не понимаю, почему надо везде использовать Bootstrap и страдать, когда что-то внезапно на нем не выходит.
2. Я не понимаю, почему нельзя посмотреть код того, как сделано это на самом сайте «Юлы».

А-ля так:

Завсит от цели, для чего это спрашивается.

Если чтобы поприставать с нубскими вопросами - то нигде.
Если чтобы почитать умных мыслей - РНР дайджест на Хабре прекрасно суммирует все, что было написано за две недели. У меня например никогда не хватает времени, чтобы прочесть всё. Куда больше-то - я уж и не знаю.
Если чтобы поучаствовать в серьезном прокете - на гитхабе, выбирай любой.
Если чтобы послушать интересные доклады и пообщаться вживую - то конференции.
Если интересует внутренне устройство языка - то php internals.
Если интересует, что пишут пхп селебрити про что угодно, кроме программирования - то твиттер (Расмус показывает картинки из аэропортов и роботов, которых собирает его сын, Сара постит котиков - и так далее).

Где точно не тусуются:
Тостер и всякие подобные ресурсы типа стаковерфлоя.
Ну то есть специалиста можно найти, если поискать, но концентрация будет гомеопатическая, если учитывать количество восторженных щеночков, которые увидели язык вчера, и спешат срочно поделиться уже накопленным багажом знаний.
Чаты. Телеграм, дискорд - вот это вот все.
Самая адовая трата времени, которая в принципе бывает в жизни.
Опять же, люди пишут о чем угодно, кроме программирования, и ради пары полезных строчек надо убить весь день.