Как центровать без смешение position: absolute;?

oink, этого уже очень мало, но зато можно встретить в существующих проектах. Так что, да, знать и понимать нужно, конечно.

Как закреплять блоки, когда доскролили к ним?

Расскажите, почему не подходит sticky?

Может такое быть чтобы изображение для телефона было одно а для декстопа иначе?

Dunhil, вы посмотрите как выглядит ваш вопрос и какой код вы в него вставляли на самом деле. Браузер сожрал часть ваших тегов, а отобразил вообще только текст.
Чтобы он показывал код нормально, нужно пользоваться тегами <code></code>
Можете просто принять мою правку вопроса.

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

Может такое быть чтобы изображение для телефона было одно а для декстопа иначе?

У автора в вопросе <img>, просто он не умеет вставлять код

Как центровать без смешение position: absolute;?

Muslim Mamaev, полчаса назад код в комментариях написала...

Может такое быть чтобы изображение для телефона было одно а для декстопа иначе?

Используйте тег code для вставки кода.

Для смены порядка отображения используется order в гридах и флексах.

Для разных изображений на разной ширине используется тег <picture>

Как центровать без смешение position: absolute;?

Так https://jsfiddle.net/5hrybcf0/

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

Как центровать без смешение position: absolute;?

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

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

Как сделать обновление переменной в моем случае?

Дима Клепко,

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

Логично. Потому что вы сказали, что slider это константа, она не меняется. Почитайте про var, let и const. Они в любом случае встретятся в вашей жизни.

Вы написали прекрасный скрипт, но есть вопрос: а если слайдов будет 15, так и будете для каждого отдельно клики прописывать? А потом, если потребуется добавить ещё один, то нужно будет снова открыть js и поправить скрипт? Тут в соседнем вопросе один деятель на CSS ваяет слайдер из десятка слайдов, вы тоже можете без JS обойтись :)

Вам нужно почитать про циклы, про добавление и удаление классов (чтобы не писать стили в JS), querySelector и querySelectorAll и т.д.

Т.е. вместо 3х отдельных img1, img2 и img3 у вас должно быть:
const slides = document.querySelectorAll('.slide')
предварительно всем слайдам раздать нужный класс в разметке.
Аналогично с кнопками.
Потом в цикле перебираете кнопки и соответствующим слайдам задаете класс типа .active у остальных убираете.

Объясните работу слайдера?

alexmaj467,

И сделать его таким-же коротким при моей структуре html не возможно ?

Без JS нет.

У вас чем больше слайдов, тем больше мороки. Добавление нового слайда требует изменений в стилях. На вообще JS без разницы сколько их.

Как можно указать плотность пикселя?

wakenbyWork, давайте я вас научу.
Открываете инструменты разработчика, адаптивный режим, меняете плотность пикселей и на вкладке Network смотрите что и когда загружается.
Развлекайтесь.

Объясните работу слайдера?

Не нужно писать самому себе в поле для ответов. Можно редактировать вопрос или писать в комментариях.

Там, в комментариях, я вам и написала

Объясните работу слайдера?

alexmaj467, В вашем первом примере это сделано с помощью длинной колбасы со слайдами, которая сдвигается в overflow контейнере.
С телефона не посмотреть, что там точно было, но что-то вроде того:

Когда активен первый слайд, полоса в 0,когда второй сдвинута на высоту слайда, когда третий, то на две высоты слайда и т. д.

Или аналогичная логика.

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

Пробовать даже не хочу, потому что это ваше развлечение.

Когда надоест, возьмите swiper.js

Как можно указать плотность пикселя?

Поменять 2 на 3.
Или или добавить для 3 по аналогии.

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

Как запретить выполнение события при клике по дочернему элементу?

Davidaa_WoW, ну ок, они хотят лупу и крест не фоном и контентом, а псевдо.
Одна кнопка с псевдо и лупой, другая с псевдо и крестом.

Как запретить выполнение события при клике по дочернему элементу?

Davidaa_WoW, можно весь текст задания?

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

Как привязать событие по классу к нескольким элементам html?

const cards = document.querySelectorAll('.card__inner');

cards.forEach(card => card.addEventListener('click', function() {
  card.classList.toggle('is-flipped');
}))

Как запретить выполнение события при клике по дочернему элементу?

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

Как запретить выполнение события при клике по дочернему элементу?

Это форма.
В ней input type search.
В теории, у него есть свой, встроенный, крестик в хроме и сафари.
Если этого недостаточно, то делаете после инпута button reset. Стилизуете и позиционируете абсолютом или гридами в угол инпута.
Кнопку отправки просто скрываете. Но форма отправится и по энтеру в поле поиска.

Лупа - если всё инпут раскрывается при фокусе и собирается при отсутствии текста и фокуса, то это просто фон инпута (или формы, если так больше нравится).
Если по лупе всё таки, как вы пишете, нужно кликать, то это кнопка с типом button, меняющая класс форме. Этот класс показывает инпут и крестик.