Danya Wyse

Короткий пример с данными из data-атрибутов,
и единственным слушателем клика — на общем родителе:

Во фронтенде практически не существует стандартов. В любом его направлении.
Даже валидная вёрстка не стандарт (ну или, как минимум, не обязательный/не повсеместный).

Валидация email на фронте не даёт 100% гарантию что email верный и существует.
Можно лишь обязать пользователя соблюсти определённый паттерн.

Если чистый js, то можно воспользоваться validation api и регулярным выражением.
https://developer.mozilla.org/ru/docs/Learn/Forms/...

Shift+Alt+F - отформатировать автоматически

Отправил тебе pull request исправил три строчки
в app.js
217 и 224

217 const sendMessage = document.querySelector(".chat__input"); //так будем отслеживать события всей формы а не только кнопки
224 sendMessage.addEventListener("submit", (function(e) { // Обрабатываем события формы submit оно наступает в частности при нажатии на enter если курсор стоит в одном из  input-ов формы

и в фалйе index.html
Меняем тип кнопки на submit чтобы при нажатии на неё генерировалось событие отправки которое обработается в app как и раньше обрабатывался клик по этой кнопке

39 <button type="submit" class="send-message"><img class="send-icon" src="img/send.svg" alt="icon send message"></button>

app.min.js тоже перегенирировал с учетом внесённых изменений.

Перепишите этот участок так, чтобы
1. не было id (id должен быть уникальным, а у вас каждое сообщение с теме же id)
2. вставляйте сразу в него сообщение, зачем потом выбирать элемент по id(выбирается первый, поэтому и перезаписывается первое сообщение)

chatWrapper.insertAdjacentHTML('beforeend', '<div class="chat-user chat-body"><div class="chat-user__image"><img src="img/person2.png" alt=""></div><div id="wrapperMessage" class="chat-user__message chat-message"><div class="chat-user__time chat-time" id="timeAgo">8 minutes ago</div></div></div>');

что-то типа такого

const chatWrapper = document.querySelector('.chat__wrapper');
let inputMessage = document.querySelector('.input-message');
const sendMessage = document.querySelector('.send-message');

sendMessage.addEventListener("click", function (e) {
  chatWrapper.insertAdjacentHTML('beforeend', '<div class="chat-user chat-body"><div class="chat-user__image"><img src="img/person2.png" alt=""></div><div id="wrapperMessage" class="chat-user__message chat-message"><p class="chat-user__text">'+inputMessage.value+'</p><div class="chat-user__time chat-time" id="timeAgo">8 minutes ago</div></div></div>');
  setTimeout(() => {
    
},0);
});

Продолжай изучать JS по Кантору. В конце каждой секции есть задачи, выполняй все, не важно какой они сложности. По Proxy, Reflect и регуляркам можно вскользь пробежаться и не заострять внимание. Параллельно делай задачи на codewars, hackerrank, leetcode. Чем больше, тем лучше. Если в программировании с нуля, то желательно тысячу часов набить хотя бы.

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

Опять же, параллельно с задачами выше начинай изучать webpack. Продолжай верстать, но уже добавлять какую-то логику на JS. Желательно ручками без плагинов, чтобы потом в дальнейшем настраивать эти плагины без особых проблем и вообще понимать что можно с их помощью сделать, а что нет.

Дальше можно прочитать Кайла Симпсона. К этому моменту ты скорее всего поймёшь, о чём в книге идёт речь.
Почитай про HTTP: тут и тут, знать как он работает - мастхэв для фронта. Теперь можно не просто верстать сайты, а заполнять их контентом через работу с API всевозможных сервисов.

Вот тут можно начинать изучать Typescript и переписывать всё, что сделал ранее, на TS. Самая лучшая практика, как по мне

Потом самое время выбрать фреймворк. Бери любой из понравившихся (кроме старья), читай доку и делай всё что выше, но уже на фреймворке. Со временем, если станет скучно, можешь залезть в их кишки, посмотреть как работает реактивность и другая "магия". Вообще фреймворк можно начать изучать и раньше, но я бы советовал к нему приступать, когда всё то же самое ты можешь сделать и без него. Это из личного опыта. Дока становится максимально понятной, не возникает дополнительных вопросов и в целом меньше косячишь.

По шаблонам и паттернам я раньше читал Рефакторинг Гуру (с енотом). Там примеры на Typescript. Ссылку не кину, мало ли что.

P.S. Все распиаренные курсы - хрень, не советую ими пользоваться. Тем более некоторые из них вообще составлены дилетантами. Это мой знакомый синьор говорил лет 5 назад. А позже я и сам пару раз столкнулся с этим (если в общем - такие ошибки даже стажёры в крупных компаниях не совершают).
Вместо этого следи за современными трендами, отслеживай каких-нибудь людей (я в своё время вот на этого парня наткнулся). Подпишись на какие-нибудь дайджесты типо www.awwwards.com. Смотри как делают другие, пробуй повторить. Рано или поздно начнут свои идеи появляться

Блок_модификатор_значение

button_theme_ghost
button_size_small

<button class="button button_theme_ghost button_size_small">

how to use

https://generd.ru/fix/polnaya-oshibka-nmi-hardware...
гуглится легко. полный интернет подобного материала

document.querySelectorAll('.count-wrapper').forEach((wrapper) => {
    const minusButton = wrapper.querySelector('.count-minus');
    const plusButton = wrapper.querySelector('.count-plus');
    const counterElement = wrapper.querySelector('.counter');

    if (!minusButton || !plusButton || !counterElement) {
        return;
    }

    let counter = Number(counterElement.textContent.trim()) || 0;

    minusButton.addEventListener('click', (event) => {
        event.preventDefault();
        if (counter > 0) {
            counter--;
        }
        counterElement.textContent = counter;
    });

    plusButton.addEventListener('click', (event) => {
        event.preventDefault();
        counter++;
        counterElement.textContent = counter;
    });
});

Никаких чужих макетов, никаких "смотри" видео. На личном опыте могу сказать, что 99.9% "блогеров" в направлении веб-разработки - это некомпетентные люди, которые берут либо западные форматы с их контентом и просто копируют видеоролики с не русского пространства нашего любимого ютуба, причем с ошибками. Есть хорошие ребята, но почти у всех смысл такой "хотите узнать больше, подписывайтесь на вебинар и бла-бла-бла".
Если Вы планируете заниматься вёрсткой, то желательно понимать и основы работы с макетами, да и самые примитивные идеи дизайна Вам тоже пригодятся. Попробуйте освоить, допустим, Figma. Создайте свой собственный макет и реализуйте его в явь.

Есть очень хорошие курсы, которые объединяют практику и теорию, причем они бесплатны.
https://htmlacademy.ru/ например. Таких ресурсов очень много, заработать на знаниях - тренд в 2019.

От себя могу добавить прекрасное приложение Sololearn, в котором есть вся базовая информация.

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

По PHP могу посоветовать Котерова. Отличная книга, где всё понятно разъяснено, но зачем сразу с PHP? Начните с базы, благо она сейчас тоже постоянно расширяет свой диапазон.

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

Можете посмотреть скринкаст по данному инструменту. Также в поиске в гугле можете найти кучу ссылок на изучение данной темы.

Если вы хотите оптимизировать картинки, минифицировать свои файлы, то нужен, но есть и другие инструменты, которые используют GUI оболочку. Удобство gulp в том, что можно за один раз написать / скачать конфиг и потом по одной / паре команд все таски будут выполняться. Цените своё время — используйте.

Проверь, есть ли у тебя вообще .woff в папке, где он их ищет: css-файл (есть ли ссылка на .woff) и физически в папке глянь. IE тоже часто ругается, что не видит .woff, но я смотрю, тут не этот случай, Хромиум во всей красе.

С включенным loop ваш свайпер создаёт дубликаты слайдов, чтобы прокрутка была бесконечной. Судя по всему, это происходит после того, как отрабатывает ваш скрипт, открывающий видео, из коммента выше. При создании дубликата из оригинала копируется только разметка, но не обработчики событий.

Первый вариант решения - выполнять ваш скрипт после того, как слайдер смонтируется, в swiper.js есть соответствующий эвент, читайте доки.

Второй вариант - вешать обработчик не на кнопки по отдельности, а на весь слайдер, и проверять в обработчике, что именно нажато. Если нужная кнопка - брать из неё id видео, открывать модал и так далее.

Свойство которое вам нужно - -webkit-tap-highlight-color: transparent;
https://developer.mozilla.org/en-US/docs/Web/CSS/-...

Но использовать стоит с умом. Отключать глобально без добавления кастомного состояния :active, думаю не стоит

https://developer.mozilla.org/en-US/docs/Web/API/I...

внутри обсервера добавялешь слушатель нужного события