Арсений Матыцин

Напрямую так делать нельзя, поэтому:
1. Ты можешь прятать input, посылать с помощью JS в него то, что ты вводишь и активацию тоже, а вместо него пользователю показывать, например, span, который уже стилизуешь, как надо. Это не костыль если что, а абсолютно нормальное решение для кастомного ввода, а именно ты его и хочешь.
2. Либо использовать псевдоэлемент, который будет иметь градиент с заливкой и прерыванием там, где по маске дефис, и абсолютное позиционирование. Это уже костыль, но довольно простой, тебе всего-лишь надо по изменению инпута пересчитывать количество символов и от него формировать ширину полоски с градиентом.
3. Или прямо фон инпута заливать. Как-то так.. Опять же, надо будет считать фон динамически, чтобы было совпадение пропусков и подчеркиваний.
4. Использовать несколько стилизованных инпутов, каждый подчеркнуть, а по достижению (в кейсе 3х символов) переключаться на следующий, так можно их оформлять отдельно, хоть и немного геморройно.

1. Выбираешь бэк, на выбор тьма ЯП: PHP, Python, Node.js, Java и т.д. Ну вообще буквально по барабану.
2. Заводишь базу данных: SQLite\MySQL (одного из двух с головой хватит)
3. Пишешь логику MVC.
4. Пишешь форму, которая будет собирать данные, отправлять их в экшн на бэке, который создаст новую модель, занесет в нее свойства, что ты в форме указал и сохранит это безобразие в базу. База это читай эксель, который просто так руками не взять (на самом деле можно PHPMyadmin\DBBrowser).
5. На главную они просто так не попадут, тебе надо будет написать вьюху, в которую выбрать из базы записи моделек, и циклом вывести (скорее всего шаблонизатором, но это неточно).

5.1 То, что приходит из базы можно фильтровать, скажем сортировать по дате и т.д. Это уже по части языка SQL.

https://stackoverflow.com/questions/995168/textare...

https://css-tricks.com/textarea-tricks/#7-auto-res...

Плюс убери rows="1" и почитай в принципе за textarea.

Прием, прием, из будущего 2021-го:
— Верстают все так же.

https://learn.javascript.ru/event-bubbling

Всплытие и перехват → event.target != elem → менять состояние.

1. Не использовать фреймы, если в этом нет необходимости (например у тебя поточный плеер, как у Я.Музыки).
2. Фрейм — часть страницы, он в любом случае будет обновлен при перезагрузке (В ЛЮБОМ).
3. При этом ты можешь использовать SPA- и подобный сайты на JS-фреймворках, которые позволят при переходам по роутам не трогать часть контента.

Python, как и любой другой бэк тут вообще не фигурирует в вопросе.

1. Mobile first → (mIN-width: 767px) более рузумен. Скорее единственно подходящий подход.
2. 768 макета вполне хватает для покрытия большинства планшетных отрисовок вплоть до десктопа. Можно и 1024 вставить, как переходный, но в целом от него чаще проблемы.
3. Верхняя планка, ИМХО, задрана, для десктопа минимальный должен быть не менее 1366, иначе многие владельцы компухтеров получат верстку для планшета.

1. Можно вкладывать строки (row) в колонки (col).
2. По логике:

2.1. Шапка это логотип (col) и остальная часть (col), внутри которой строка (или две) с основной навигацией и контактами.
2.2. Основной контент сайта это тоже строка, внутри которой навигация (колонка), а рядом с ней содержимое страницы (тоже колонка), внутри которой строки с еще более вложенным содержимым.

Короче говоря, на буте такое можно собрать очень быстро.

Объекты просто так не имеют никакого отношения к DOM, но чтобы облегчить себе жизнь ты можешь перейти к веб-компонентам, или использовать логику Vue (не только), где однофайловый компонент это же, читай, класс (свойства → data\props) и шаблон для отрисовки на странице.

Используй расчеты на JS.

1. Он работает.
2. Если ты хочешь, чтобы не прыгала иконка при появлении бордера делай его либо transparent, либо задавай размеры иконок с учетом размеров. Это не проблема box-sizing:border-box;

1. Таблица, где есть пересечение вводных данных.
2. Объект, где есть пересечение вводных данных.
3. Алгоритм, который считает в зависимости от условий (идеально, но из области фантастики, так как в среднем ценообразование происходит от балды) итого.

overflow:hidden

UPD: Секции, которая непосредственно содержит всю эту красоту, ибо в противном случае, если цепляться за body, то ты как минимум сломаешь position:sticky свойства.