archelon

Избыточная верстка и css. Там много генерируется черти как пойми. Но для тех кто исходный код никогда не открывает - норм.

Вы подсаживаетесь на одно стороннее решение и скорей всего там и останетесь. Лучше для верстки написать своё. Так вы знаете что где и как работает. Почитайте сколько помощи на форумах поддержки по билдерам - близко к нолю. Зато в 90% вы получите ответ что нафига этим пользоваться?

СЕО - да ему все равно на него. Это удел спец плагинов.

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

Но если вам надо лендинг собрать - собирайте на нем.
Выше написали - типа прототип на нем, а потом... И так сойдет...
Я мало видел сайтов что были на билдере, а потом вдруг их переписали нормально. Дайте мне такую инфу кто владеет - интересно.

Новый билдер - проект гутенберг. И в нем я сразу увидел кучу проблем, как сторонние разработчики блоков убивали производительность:
- просто засунули в фронт fontawesome 4.7 версии. ВНИМАНИЕ: ради 3х иконок!!
- просто засунули в фронт fontawesome 5.* версию и ВНИМАНИЕ это сломало первый вывод с 4.7 версией.

Короче - разносол в своей красе.

- еще с гутенбергом - любовь засунуть для простой верстки бутстрап. Нафиг не нужные 90% css будут у вас грузиться.

Почему так? Потому что у вордпресса нет handle для бутстрапа, скрипта рекапчи, карт и прочих частых и нужных библиотек.

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

pdoTools обычно достаточно для визиток и несложных сайтов.
Без дополнений это шаблонизатор для статических страниц.

1) В VS Code выделяется только часть названия до дефиса.
Ставите курсор внутрь кавычек и нажимаете Ctrl+D

random_int() доступна только начиная с седьмой версии PHP. Если на хостинге стоит версия ниже, то замените random_int() на rand() с теми же параметрами (стоит учесть что rand не безопасен для криптографических целей).

Или обновите PHP до версии 7 или выше.

Или используйте стороннюю библиотеку с реализацией этого функционала, например: https://github.com/paragonie/random_compat

Оберните 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>