Адаптивность

Многие откроют ваш сайт с телефона. Адаптивная страница перестраивается под ширину экрана.

Строка <meta name="viewport" content="width=device-width, initial-scale=1"> просит телефон показывать страницу в настоящую ширину, а не уменьшенной копией компьютерной версии.

display: grid превращает элемент в сетку, а grid-template-columns: 1fr 1fr делит её на две равные колонки. Медиазапрос @media (min-width: 600px) { … } применяет правила только на экранах от 600 пикселей: на телефоне навыки идут столбиком, на компьютере — в две колонки.

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  ul { display: grid; gap: 8px; padding: 0; list-style: none; }
  @media (min-width: 600px) {
    ul { grid-template-columns: 1fr 1fr; }
  }
</style>