Ivan Bogachev

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

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

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

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

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

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

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

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

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

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

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

Думаю в этом мини-проекте вам уже не нужно все переделывать, но в перспективе обращайте внимание на:

Файлы:
- Если вы собираете зависимости в бандл - не храните их исходники в репозитоии. Они там не нужны. В репозитории храните только package-lock.json, чтобы можно было скачать нужные версии всего.
- Все конфиги, связанные со сборкой, должны быть в репозитории.
- Было бы круто разнести исходники и результат сборки. Условно в папки src и dist или build или еще как-нибудь назовите. Будет удобнее.

Скрипты (логику проверять лениво, так что только по внешнему виду):
- Много всего в одном файле. Делите на небольшие модули, будет удобнее.
- Все очень разное. Кавычки, табы и пробелы, даже if-else вы пишете все время по-разному. Используйте какой-нибудь один стиль написания кода. Для начала можно взять от airbnb - он довольно популярный.

Стили (все не смотрел, говорю по паре файлов):
- Вижу мешанину из CSS-методологий. Вроде БЭМ, но местами какая-то дичь начинается. Вроде этого: "main-banner__title text-accent text-cormorant-bold d-block wow fadeInUp".
- Постоянное использование px-to-rem с разными параметрами вперемешку с просто пикселями требует слишком много внимания к себе. Оно там правда нужно?
- Для префиксов есть автопрефиксер. Не тратьте время на них.
- Для импорта анимаций из animate.css есть postcss-animation. Снова, не тратьте время.
- Если используете переменные для цветов, не мешайте их с захардкоденными значениями rgba и hex.
- Магические числа вроде calc(100% - 427px) лучше не использовать, либо комментировать.
- Вставляйте critical CSS в страницы.

span {
    background: linear-gradient(to bottom,
        transparent 0%,
        transparent 50%,
        #ff0 50%,
        #ff0 100%);
}

Попробовал набросать свой вариант без jQuery:

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

Значение height: auto для картинок добавляет вот этот скрипт (смотрите в функции response_layout).

Похоже, что единственный работающий вариант реализовать такой градиент на CSS - это играться со свойством mix-blend-mode и делать фолбек для старых браузеров. Что-то вроде этого:

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

div {
    background-color: rgba(255, 0, 0, 0.5);
}

img {
    position: relative;
    z-index: -1;
}

Скорее всего вам нужно выделить css для первого экрана и вставить его сразу в начале страницы в тег style. Это можно автоматизировать, есть разные инструменты, например вот этот. В любом случае стоит гуглить по запросу critical css.

Сама линия делается по вот такому принципу с помощью SVG:

Появление иконок - так же. Заливка надписей с помощью линии - это прямо задача для SVG-масок. Дальше к этому прикручивается кастомный скролл, поскольку сайт нестандартный - проще руками его сделать, чем пытаться доделать какое-то стороннее решение. Плюс немного CSS-анимаций для всего остального. Дальше много абсолютного позиционирования чтобы это все подогнать. Как говорится, ябзаверстал.

танцы с бубном... прокачать навыки верстки максимально быстро и при этом достаточно углубленно... Главное - результат и время.

Был в похожей ситуации. Могу сказать, что очень полезно порисовать картинки с помощью CSS (если не сталкивались - сходите на CodePen, там это дело очень полюбили). Звучит глупо, но тем не менее такая деятельность помогает очень быстро освоить те свойства CSS, которые обычно все гуглят и не понимают. Это своеобразные "концентрированные" задачи на верстку. Если в одном макете 5 сложных моментов, то тут в одной картинке - 25.

blockquote {
    overflow: auto;
}

Попробуйте добавить preserveAspectRatio="xMidYMid slice" к SVG с этими полигонами.