Ankhena

Тут надо определиться, что тебе надо конкретно. Если тебе на разных размерах окна браузера нужны конкретное количество колонок, то гриды тебе тут не помогут, используй @media запросы и выставляй нужное число колонок grid-template-columns: 1fr 1fr 1fr. Если тебе не важно сколько будет колонок, а важно чтоб сами колонки не были меньше заданного размера, то вот тут тебе и надо использовать repeat(auto-fit, minmax(500px, 1fr))

grid-column: span 2

//Перенос файлов PHP
  function php() {
    return src(path.src.php)
   //     .pipe(webphtml()) Вот эту хрень выбросите
        .pipe(dest(path.build.php))
        .pipe(browsersync.stream())
  }

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

Посмотрите в сторону css свойства position: fixed;
https://jsfiddle.net/sgahoemL/

Вот по-быстрому накидал. Соответственно, у того элемента, у которого стоит класс active фон белый с обводкой красной, слева красные, справа серые. Если класса active нет вообще, считай, что путь пройден/завершен. Если задача в процессе, то хотя бы один элемент должен быть с классом active, а то иначе смысл тогда ...

Никогда не понимал причем тут год и яп. Прыщавые иксперты с дырявыми мозгами и мне в свое время давали такие советы и наставления, мол не учи то, не учи се, сейчас такой-то год....
Когда же вы поймете, что стек нужно выбирать не смотря на календарь, а исходя из тз которое решает данный стек. Если твою задачу лучше всего решает паскаль, то плевать какой сейчас год, хоть 5021-ый, нужно выбирать паскаль, а не что-то другое, потому что васян в коммах на форуме написал "паскаль в 2021 ? пхпхпха"

Актуально ли php в 2021 году и стоит ли учить его?

Если тебе позволяет время, то учить нужно все, что связанно с твоим стеком, а так кончено же актуально

Набросал на скорую руку, просто потому что было интересно, хотя, по хорошему, ответом на Ваш вопрос должны быть ссылки на изучение js и на habr.freelance, так как Вы не прикладываете своих попыток к вопросу, а значит это задание, а не вопрос.

В демке ниже используются следующие техники:

Вёрстка:

• flexbox
  
• HTML-мнемоники (для крестика на кнопке)
  

JS:

• Обработка событий, в том числе полей формы (change)
  
• Поиск и создание элементов
  
• Делегирование событий (в функции onSelectorClick определяется что если клик произошёл на кнопку с крестиком, то удалить родительский элемент кнопки. В итоге получаем всего один слушатель на все элементы selector сколько бы их не было.)
  
• Замыкания. Позволили нам найти все нужные html элементы один раз(поиск элементов в DOM одна из самых дорогих операций), а потом просто обращаться к переменным, в которые мы их сохранили из функций.
  

Используй CSS переменные
https://developer.mozilla.org/ru/docs/Web/CSS/Usin...

По-хорошему, в 2021 году такие вещи надо верстать через column-count. Поддержка по Caniuse прекрасная.

В реальной жизни, конечно, всё не идеально, особенно в Сафари, но это точно лучше костылей с гридами, флексами и, прости господи, флоатами.

https://jsfiddle.net/5z1Lbpua/ - например так, в jq есть resize

И в что тут не так? Свойство color для цвета текста, у фона другое свойство.

Может надо указывать http/https перед основным доменом, так как у вас это домен первого уровня!?

Но когда я прописываю его в адресной строке, открывается гугл

Но открылся яндекс, вот незадачка >

не могу найти в поиске

SVG-маски, маски с помощью clip-path в CSS, маски на канвасе, маски в шейдерах, и.т.д. В общем гуглите все, что связано со словом "маска". Вариант с шейдерами самый производительный, с SVG - самый простой.

Пример с SVG:


Пример с шейдерами (не совсем такой, но для передачи идеи пойдет):

В целом согласен. До пункта №7.

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

1. Базовые элементы. Общая типографика, кнопки, ссылки и т.п.
2. Общие блоки. То что повторяется на нескольких страницах и/или может быть переиспользовано, какие-то виджеты, менюшки, и т.п.

Все это занимает основную часть времени работы. И к окончанию этих этапов я имею своего рода набор, или конструктор, из готовых блоков. Остается только написать лейауты для разных страниц и раскидать по ним имеющиеся блоки.

Для этого всё закидываю на гитхаб-пейдж, чтобы по ссылке я мог открыть с телефона или попросить знакомого проверить на другой ОС c телефона

Это лишняя трата времени. Пусть небольшая, но все же. Плюс, отслеживать качество верстки все-таки удобнее в процессе, а не по окончании подкручивать.
Поэтому используем browser-sync. Поднимается сайт, доступный по IP в домашней локалке с любого устройства. Совет: использовать всегда один порт в browser-sync, а на устройствах сделать закладки на этот адрес. Любой сайт, который в данное время разрабатывается, открывается одним тапом по закладке.
Кроме того BS дает бонус в виде синхронизации действий сразу на всех устройствах: клики, прокрутка, ввод. Это мега-удобно — кликаешь на компе, краем глаза смотришь в планшет и телефоны, сразу видишь там все изменения и поведение.

Всё готово, сжимаю CSS, JS. через веб-сервисы.

Опять тратите время. Настроенный Gulp в одну команду проделает все оптимизации (на больших проектах даже кофе можно успеть сделать, пока собирается билд=).

Еще обратите внимание на инструмент lighthouse в инструментах разработчика.



Не нужно никуда сайт заливать, чтобы проверить на доступность, производительность и т.п.

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

Я не упомянул SASS-фигас и т. д, так как не увидел практической пользы для проектов на 1-15 страниц.

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

Ну вот зачем PUG? Как конкретно он помогает на небольших проектах 1-15 шаблонов страниц.

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

Префиксы? В кодовом редакторе они и так есть.

Я считаю, что исходный код должен быть чистым, без префиксов. Это лишний визуальный мусор. Пусть лучше автопрефиксер этим занимается. К тому же этот плагин использует актуальную базу caniuse на основе вашего .browserlist. Пусть профит и не большой, но все же поменьше на выходе неактуальных свойств.