Abr_ya

Нужно сказать линтеру, что некоторые глобалы.
Попробуйте в eslint конфиге для тестов указать что-то такое:

"env": {
    "jest": true
}

Или

"env": {
    "jest/globals": true
  }

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

Гуглите «htaccess перенаправление на индекс»

Ладно, не гуглите, вот

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Я все починил, теперь ваша карьера и ориентация в порядке!
Не благодарите.

Идти на стажировку за бесплатно

This. У вас будет реальный опыт и реальная бумажка, что вас хоть где-то потерпели.

неплохо в html, css (сверстано порядка 20 одностраничных макетов PSD)

Фигня.

сейчас учу основы JS (есть пара работ: todo, calculator, математическая игра с генерацией рандомных примеров)

Ничто.

Как бы вы поступили на моем месте?

Побежал бы на стажировку бегом.

P. S. А ещё я забыл пункт "целовать ноги тому, кто позвал на стажировку".

1. Кнопка Save тут ни причем.

2. У модели есть 2 метода $model->save() и $model->validate()
$model->save() - сохраняет и валидирует
$model->validate() - только валидирует данные.

У вас должно быть немного иначе:

if ($model->validate()) {
        ///здесь ваш код
        $model->save()
        пишем данные, закрываем модалку
    } else {
        выводим результат валидации (рендерим аякс? или встроенная валидация?)
    }
}

С загрузкой данных из формы

if ($model->load(Yii::$app->request->post()) && $model->validate()) {
///code
   $model->save()
}

Валидацию вы выбираете сами. Я думаю, что простые правила валидации валидируются ajax. А сложные уже после нажатия кнопки и запроса на сервер. Например, длину текста валидируем на клиенте. А сложную логику после запроса

Вопрос: как мне в контроллере проверить, что была нажата кнопка Save в форме?

Зачем вам проверять нажата ли кнопка? Это вопрос JS. А в контроллере вы смотрите на переданные данные из формы. Если они есть, то вы их обрабатываете. Если их нет, то вы показываете форму.

Нужно создать новый метод в модели User:

Как вариант создать в представлении анонимную функцию:

public function getFullName(string $separator = ' '): string
{
    return implode($separator, array_filter([
        $this->firstName,
        $this->middleName,
        $this->lastName
    ]));
}

'value'=> function($model) {
return $model->first_name .' '. $model->last_name
}

Использовать:

user.fullName
//или

$user->getFullName(', ')

composer require "yiisoft/yii2:*" - таким образом вы получите действительно чистую установку. По сути у вас будет только файлы composer.json, composer.lock и папка vendor в которой будет лежать сам фреймворк с зависимостями. Вы сможете строить структуру своего приложения самостоятельно, т.е. сами решать, где у вас будут лежать контроллеры, модели, view и прочее. Это можно изменить и в готовых шаблонах basic/advanced.
Теперь по шаблонам:
Basic - пример организации описанного выше. Используется обычно для небольших приложений с одной точкой входа (/web/index.php). Есть как свои преимущества, так и недостатки (если не менять структуру). Из преимуществ - реально проще, нет дублирования классов и т.д. Из недостатков - расширяемость только модулями, не очень удобный способ хранения конфигов (нельзя переопределять локальными значениями). Всё это конечно можно легко устранить.
Advanced - типа расширенный вариант. Нужен далеко не всем. Позволяет организовать несколько точек входа (frontend и backend по умолчанию) и легко добавлять свои. К примеру копируем папку backend, правим в ней namespace`ы и вуаля, у нас есть API, который настраиваем на уровне конфигов и он нам отдает только JSON. Мне так удобней по крайней мере. При этом все приложения могут использовать общие компоненты\модели\сервисы и т.д. из папки common.
Для лучшего понимания я рекомендую посмотреть\прочитать все, что есть в блоге у Elisdn (ссылку давали выше), мне в свое время это очень сильно помогло. Ну и рекомендую сначала ознакомиться с его же курсом по сервисному слою. Привыкнув к AR и т.д. тяжело потом будет перейти на что то другое. К примеру у меня сейчас как источники данных используется несколько сторонних сервисов, SOAP сервис и своя БД (и не одна!). Без сервисного слоя это было бы ооочень тяжело поддерживать и обслуживать в дальнейшем. А так - у меня есть сервисный слой, который представляет собой "черный ящик", и что и как у него там происходит внутри меня в принципе не интересует.
В интернете сейчас несколько книг и обучающих курсов обучающих работе с Yii2, но из всего этого я рекомендую Elisdn! 99% курсов дают общее понимание о фреймворке, но загоняют в жесткие рамки, что помоему очень плохо. Отсюда и мнение, что Yii2 умирает и всё прочее.

Это происходит из-за долгой загрузки картинки т.к. DOMContentLoaded срабатывает при окончании загрузки html и построении dom, но он не ждет загрузку картинки, используйте window.onload. Вот тут можно про это почитать подробнее и с примерами кода.

Перенесите следующий вызов в тело функции, которая выполнится через паузу:

function scrollToStep(coord = 0, step = 20, pause = 1000) {
  if (coord > step) {
    setTimeout(function() {
	    coord -= step;
      window.scrollBy(0, step);
	    scrollToStep(coord, step, pause)
    }, pause);
  } else {
    return false;
  }
}

buttonChoice.addEventListener('click', function() {
  let catalog = document.querySelector('.catalog');
  scrollToStep(catalog.getBoundingClientRect().top);
});

Вот вам правильный ответ =)

img{
    object-fit: cover;
    width: 100px;
    height: 100px;
}

https://learn.javascript.ru/onload-ondomcontentloaded

// Вариант 1. Привязываем контекст и первые по порядку параметры
function someFunk(a, b, event) {
	console.log(a, b, event);
}
element.addEventListener('click', someFunk.bind(null, 1, 2));

// Вариант 2. Используем интерфейс EventListener
function someFunk(event) {
	console.log(this.a, this.b, event);
}
element.addEventListener('click', {handleEvent: someFunk, a: 1, b: 2});