Maxim Kirshin

Если программирование только хобби - можно учить что угодно и как угодно
Но на работе от вас не потребуют веб-разработку и C#, Unity одновременно)

https://docs.mongodb.com/manual/reference/method/d...

через псевдоэлемент ::before, либо просто тег в разметку добавить и его стилизовать

Это обычный нативный метод для массивов. К React'у он прямого отношения не имеет.

Смотри по строкам:

const [todo, setTodo] = useState([]) // todo: массив todo'шек. setTodo - сеттер, для изменения переменной todo

const deleteItem = (id) => { // Объявляем функцию deleteItem, которая принимает внутрь id интересующей todo
  setTodo( // Устанавливаем новый state для переменной todo, которую объявили выше
    todo.filter(item => { // Берем текущее состояние переменной todo. 
       // filter как forEach проходится по каждому элементу массива. 
      // Принимает в себя callback вида (item, i, array), где item - текущий элемент (соответствует array[i]), текущий индекс, текущий массив (который обходим)
     // В функции callback'е ты должен вернуть булевое значение (true/false). Если true - элемент остается в массиве, если нет - убирается
      return item.id !== id // Если id элемента не равен id, который хотим удалить - оставляем элемент в массиве, иначе убираем
    })
  );

Чтобы было более ясно вот более простой пример, без state в React:

const products = [
  { id: 1, price: 25 },
  { id: 2, price: 50 },
  { id: 3, price: 75 },
  { id: 4, price: 100 },
  { id: 5, price: 125 },
]

// Оставим продукты, которые только с ценой выше или равной 100
const filteredProducts = products.filter(product => product.price >= 100) // [{ id: 4, price: 100 }, { id: 5, price: 125 }]

}

Что-то типа этого?

function someFn(args) {
  const [cb1, cb2, num] = args
  return [cb1, cb2].reduce((acc, callback) => callback(acc), num)
}

someFn([(num) => num + 100, (num) => num * 2, 5]) // 210
someFn([(num) => num + 50, (num) => num * 6, 5]) // 330

JavaScript не имеет доступа к файлам клиента.
Если же данный файл лежит на сервере, то необходимо сначала сделать к нему запрос и затем распарсить json

fetch('https://mysite.com/something.json')
  .then(r => r.json())
  .then(json => console.log(json))

В твой yaml файл особо не вникал. По теме вопроса - можешь использовать husky, pre-push настройка в конфиге у него. Будет выглядеть типа этого в package.json

{
// ...package.json
  "husky": {
    "hooks": {
      "pre-push": "jest --coverage"
    }
  },
}

В твоем примере от него нет смысла.
А так он обычно используется, чтобы задать стейт на основании предыдущего значения стейта

function handler(newValue) {
  setValue((prevState) => prevState + 1) // Установит стейт на основании предыдущего значения + 1
}

1 строка, не может найти элемент spiderChart по id

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

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

Формы дивами конечно тоже не стоит добавлять, ты же их отправлять собираешься потом))

Также пути к статике (картинки, css и пр.) указывать лучше абсолютные, а не относительные (ну если ты создашь вторую внутреннюю страницу, ты сам это поймешь)

<img class="member_photo" src="src/img/members/member_two.png" alt="member_two">

Также например вместо этого можно было добавить общий стиль, либо модификатор может какой

.facebook_btn:hover .facebook,
.twitter_btn:hover .facebook,
.chat_btn:hover .facebook,
.global_btn:hover .facebook,
.facebook_btn:hover .twitter,
.twitter_btn:hover .twitter,
.chat_btn:hover .twitter,
.global_btn:hover .twitter,
.facebook_btn:hover .global,
.twitter_btn:hover .global,
.chat_btn:hover .global,
.global_btn:hover .global,
.facebook_btn:hover .chat,
.twitter_btn:hover .chat,
.chat_btn:hover .chat,
.global_btn:hover .chat {
    -webkit-filter: invert(1);
    filter: invert(1)
}

такую ширину нельзя указывать, как ты на мобильных будешь смотреть? делай резиной в будущем

.img_blog {
    width: 540px;
    height: 400px
}

.img_blog2 {
    width: 540px;
    height: 400px
}

каждому элементу не обязательно font-family указывать

.contact_us {
    text-align: center;
    font-family: "Open Sans";
    font-weight: bold;
    color: #fff;
    font-size: 19pt;
    margin-top: 100px
}

.contact_us_down {
    text-align: center;
    font-family: "Open Sans";
    font-weight: normal;
    color: #fff;
    padding-bottom: 75px
}

.contact_info {
    padding-top: 25px;
    padding-bottom: 40px;
    font-family: "Open Sans";
    font-weight: 600;
    color: #fff;
    font-size: 14pt;
    text-align: center
}

pt уже по-моему никто не использует. используй px, rem, иногда em

.header_text {
        font-size: 30pt
    }

    .header_descr {
        font-size: 13pt
    }

Успехов!

<!-- page1.html -->
<form action="/page2.html">
  <input type="number" name="myNumber" placeholder="Введите число" required>
  <input type="submit" value="Отправить">
</form>

<!-- page2.html -->
<script>
  const params = new URLSearchParams(document.location.search)
  alert(params.get('myNumber'))
</script>

@media (max-width: 767px) {
  main {
    flex-flow: column nowrap;
    height: auto;
  }
  .left, .center, .right {
    width: 100%;
  }
}