Raul Abdullin

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

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

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

На Windows Figma это универсальный комбайн для разработки интерфейсов - от варфреймов до прототипирования и нехитрой анимации. Illustrator и Photoshop всего отойдут на задний план, если вы конечно не планируете делать какую-то реально сложную графику. Либо сложная анимация в AE - люстра потребуется для импорта вектора. Но вы изначально разработчик, а не граф.дизайнер, поэтому возможностей фигмы по работе с вектором и растром вам будет хватать в 99% случаев.
Кроме того, бесплатного аккаунта Figma достаточно для большинства задач.

Фигмы хватит для почти всех задач. Вряд ли появится необходимость пилить сложные анимашки (AE), сложный вектор (AI) или сложный графон (PS). Короче, Фигма тащит :)

gs.statcounter.com/screen-resolution-stats
под iOS естественно 375px
под android 360px
это топ по популярности сегодня
но я как и вы всегда делаю 375 ;)

Настройки - Аккаунты - Google
если он ни для чего больше просто не нужен, то удалить. ( три точки в шапке)
А так там настройки - на каждое применение - синхронизация или нет.

Если почтовый ящик не гугловский , то IMAP личные.

Если вы делаете уникальный дизайн приложения, в котором не будут использоваться и наследоваться элементы ОС, конечно же вы можете делать его одинаковым. Главное что бы ваш UX/UI был классным!

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

Да. Правильно. fixed; width: 100%; top 0; left: 0;
Только z-index побольше дай для .top-panel
Что бы был больше чем у Этих блоков которые поверх шапки становятся.

X-UA-Compatible указывает версию IE (в данном случае edge)
width=device-width - указывает браузеру, что нужна ширина области просмотра такая же, как и ширина экрана
initial-scale=1.0 - устанавливает начальный масштаб страницы. В данном случае 1, т.е. 100%.

Мета тег viewport отвечает за "оптимизацию" под разные размеры устройства.
https://developer.mozilla.org/ru/docs/Mozilla/Mobi...

Мета тег X-UA-Compatible отвечает за браузеры Microsoft IE8 IE9 IE10 IE11...
qaru.site/questions/10755/what-does-meta-http-equi...

Первый тег настоятельно рекомендую исопльзовать, а второй используйте по надобности, в зависимости от того, нужны ли вам браузера IE

Самое лучшее приложение для отрисовки таких иконок, да и вообще элементов где нужно сглаживание углов - Affinity Designer. Тут даже не на пару минут работы - на несколько секунд.