strelok011

Ну, на самом деле это всё можно решить довольно просто, без разрушения связности строк в таблице. Но для этого необходимо добавить разметки в структуру таблицы
https://codepen.io/Strelok011/pen/wvKZadJ

Иными словами:
1. чтобы сделать тень вокруг строки - вам нужно завернуть каждую строку в tbody, для раскрытого элемента добавлять ей класс с тенью
2. добавляете в tbody еще строку tr>td(colspan=число колонок), внутри верстаете в диве весть выпадающий контент.

Где-то встречал комментарий - за это зарплату платят :)
Если в популярных фреймворках этого нет - значит и в менее популярных шаблонах это вряд ли встретите.
Обычный изврат дизайнера - головная боль верстака. Много аналогичного встречалось и было в работе. Псевдоэлементы, радиусы, активные табы, z-index-ы - всё богатство css к вашим услугам :)

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

Это не в стилях дело. Проблема в изображениях. Страница загружается - стили по изображению на месте, но нет картинок с их шириной. Как только браузер получает информацию о ширине - всё стабилизируется.
Варианта два:
1. определить стили для изображений с указанием фиксированной ширины, добавить, к примеру, фоны под будущие изображения
2. поставить прелоадер на всю страницу, который будет ждать загрузки и картинок тоже. Но это минусанет в поисковиках, т.к. перекрывает контент.

В разработке можно использовать линтеры с соглашениями по стилям от airbnb к примеру.

Они помогают оформлять код единообразно и читабельно.
В таких линтерах или претифаерах атрибуты могут быть выстроены в линию до определенного кол-ва символов (сейчас не помню), чтобы влезало на экран редактора без горизонтальной прокрутки. Если переполняет, то оформляется как первый указанный вариант.

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

добавьте переопределение submit для вашей формы. По клику на кнопку submit браузер игнорирует js и обрабатывает по стандарту отправку формы.

используйте что-то вроде

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

или

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

Для начала нужно определить для себя две большие разницы как-грится.
Что сейчас на ум пришло
1. есть нативные языки типа свифта, в которых толком верстки, близкой к вебу, нет и в помине
2. есть вариант Apache Cordova, PhoneGap - это фреймворки, позволяющие использовать веб-вью, т.е. показывающие обычную верстку в окошке "реального" приложения (чем-то напоминает PWA).
3. есть react native - фреймворк, ипользующий для бизнес-логики реакте (то бишь js), но визуальную часть и все взаимодействия с железом реализующий через нативные прокладки (т.е. написанные на языке, родном для оси). Из плюсов - можно делать сразу под андроид и под iOS, верстать очень похоже типа как для веба (не очень много "ньюансов"), из минусов - как только нативная библиотека скажет "нимагу", то вы попали :)
4. Ну и есть собственно PWA (Progressive Web Applications) приложения.

Везде свои нюансы, особенности и подводные камни. Бесплатный сыр, знаете ли...

В принципе - фронт-разработчику можно попробовать мобилки, но не следует ожидать предсказуемости и быстрого результата, особенно по началу.