Андрей Зырянов

FrontPage!!! Простите :)

А вообще да, любой редактор кода с плагином для лайв-режима. Например Live Server для VSCode.

Можно использовать гриды вместо флексов https://photo-screen.ru/i/MG3L0iORF
Или задать флекс-элементам фиксированную ширину 20%

Разрезаете пунктирную линию на 2 svg (в условии же не было не разрезать пунктир?)
Через z-index одну размещаете впереди картинки, вторую позади.
Позиционируете их, чтобы правильно стыковались.
Анимируете CSS-свойство stroke-dashoffset

.nav-icons у вас не имеет стилей флекс-контейнера. Достаточно добавить ему:

display: flex;
align-items: center;
justify-content: center;

Нет такой возможности. Как вариант, можно наложить сверху закрашенный див и обрезать его через clip-path.

По скрину без ссылки не совсем понятно, но подозреваю, что это swiper с effect: "cards"

Сегодня столкнулся с похожей проблемой. Решил таким способом:
- слайдам с классом swiper-slide-duplicate удалить атрибут data-fancybox
- делегировать клик по ним оригинальным слайдам

К бутстрапу отношусь примерно как к jQuery. Если в легаси он есть, использую и не ропщу. Если нет, или проект новый - не использую.

При клике на мобилках срабатывает сразу два события: touchstart и pointerdown.
Одно открывает менюшку, второе тут же закрывает :)

Достаточно будет не плодить лишние сущности и повесить обработчик только на click: срабатывать будет как на десктопе, так и на мобилках.

На css как-то так можно сделать https://codepen.io/viseko/pen/JjJZdBX
Думаю, что грамотнее было бы не изгаляться и использовать SVG.

Например, так:

var txt = [
  "Текст 01",
  "Текст 02",
  "Текст 03",
  "Текст 04",
  "Текст 05"
];

var clr = [
  "blue",
  "red",
  "teal",
  "tomato",
  "green"
];

var a = Math.round(Math.random()* 4);
var b = Math.round(Math.random()*4);

document.write ("<p style='color:" + clr[b] +";'>" + txt[a] +"</p>");