Вносит мелкие правки по части пункутации в статью и блок "На практике"

css/mobile-first-vs-desktop-first/index.md

@@ -16,33 +16,39 @@ tags:
 
 _Mobile-first_ и _Desktop-first_ — это подходы в веб-дизайне и разработке, которые определяют то, для каких устройств начинается проектирование дизайна и разработка в первую очередь.
 
-Из-за возросшей популярности мобильных устройств, _Mobile-first_ подход в современном вебе имеет более широкое распространение. Однако, существуют определённые типы приложений (CRM / ERP системы, различные дашборды), для которых _Desktop-first_ является более подходящим.
+Из-за возросшей популярности мобильных устройств, Mobile-first подход в современном вебе имеет более широкое распространение. Однако, существуют определённые типы приложений (CRM / ERP системы, различные дашборды), для которых Desktop-first является более подходящим.
 
-## Особненности _Mobile-first_ подхода
+## Mobile-first
 
-##### Минималистичне интерфейсы
-Важно понимать, что в данном случае термин **минималистичные интерфейсы** не означает, что интерфейсы содержат урезанную функциональность. Минималистичность здесь - это следствие небольшого размера экрана. В первую очередь создается UX (user experience) именно для таких устройств. Далее, используя эти интерфейсы как основу, улучшается UX для более широких экранов.
+#### Минималистичне интерфейсы
+
+Важно понимать, что в данном случае термин **минималистичные интерфейсы** не означает, что интерфейсы содержат урезанную функциональность. Минималистичность здесь — следствие небольшого размера экрана. В первую очередь создается UX (user experience) именно для таких устройств. Далее, используя эти интерфейсы как основу, улучшается UX для более широких экранов.
+
+### Мобильные сценарии использования
 
-#### Мобильные сценарии использования
 С точки зрения UX в первую очередь фокус на:
-- сенсорное взаимодействие,
-- навигацию одной рукой,
-- основной контент;
 
-#### SEO
-Google преимущественно использует мобильную версию сайта для индексации ([mobile-first-indexing](https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing))
+- сенсорное взаимодействие;
+- навигацию одной рукой;
+- основной контент.
+
+### SEO
+
+Google преимущественно использует мобильную версию сайта для индексации ([mobile-first-indexing](https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing)).
 
-## Особненности _Desktop-first_ подхода
+## Desktop-first
 
-#### Богатая функциональность
-Из-за большого размера экрана, как правило, не возникает проблем с гармоничным расположением элементов интерфейса, которые предлагают насыщенную функциональность (например, в аналитических дашбордах это могут быть редактируемые таблицы с большим количеством столбцов).
+### Богатая функциональность
 
-#### Десктопные сценарии использования
-С точки зрения UX фокус на **использование пользователем клавиатуры и мыши**.
+Из-за большого размера экрана, как правило, не возникает проблем с расположением элементов интерфейса, которые предлагают насыщенную функциональность. Например, в аналитических дашбордах это могут быть редактируемые таблицы с большим количеством столбцов.
+
+### Десктопные сценарии использования
+
+С точки зрения UX фокус на **использование клавиатуры и мыши**.
 
 ## Как пишется
 
-Представим, что нам необходимо сверстать страницу с карточками, которые в десктопной версии располагаются в ряд, а в мобильной - в колонку.
+В качестве примера рассмотрим адаптивный блок навигации, который на планшетах и десктопе располагается горизонтально, а на мобильных устройствах - вертикально (появляется при клике на иконку).
 
 Договоримся, что брейкпоинты будут такими:
 
@@ -52,25 +58,35 @@ Google преимущественно использует мобильную в
 
 ### Mobile-first
 
-Прописываем стили для мобильного устройства в начале файла с CSS. Не оборачиваем их в [медиавыражение](/css/media/). Ниже, внутри медиавыражения с соответствующим условием пишем стили для планшета и десктопа.
+Прописываем стили для мобильного устройства в начале файла с CSS. Не оборачиваем их в [медиавыражение](/css/media/). Ниже, внутри медиавыражения с соответствующим условием, пишем стили для планшета и десктопа.
 
 ```css
-  .container {
+  .burger-icon {
+    cursor: pointer;
+  }
+
+  .navbar__links_list {
     display: flex;
     flex-direction: column;
-    row-gap: 8px;
+    gap: 16px;
+    margin: 8px 0 8px 0;
+    padding: 0;
   }
 
   /* здесь могли бы быть дополнительные стили для планшетной версии */
-  @media (width >= 640px) {}
+  @media (width >= 640px) {
+    .burger-icon {
+      display: none;
+    }
 
-  /* стили для десктопной версии */
-  @media (width >= 1024px) {
-    .container {
+    .navbar__links_list {
       flex-direction: row;
-      column-gap: 8px;
+      margin: 0;
     }
   }
+
+  /* здесь могли бы быть дополнительные стили для десктопной версии */
+  @media (width >= 1024px) {}
 ```
 
 ### Desktop-first
@@ -79,20 +95,30 @@ Google преимущественно использует мобильную в
 
 ```css
   /* стили для десктопной версии */
-  .container {
+  .burger-icon {
+    display: none;
+  }
+
+  .navbar__links_list {
     display: flex;
-    flex-direction: row;
-    column-gap: 8px;
+    margin: 0;
+    gap: 16px;
+    margin: 8px 0 8px 0;
+    padding: 0;
   }
 
   /* здесь могли бы быть дополнительные стили для планшетной версии */
   @media (width < 1024px) {}
 
   /* стили для мобильной версии */
   @media (width < 640px) {
-    .container {
+    .burger-icon {
+      display: initial;
+      cursor: pointer;
+    }
+
+    .navbar__links_list {
       flex-direction: column;
-      row-gap: 8px;
     }
   }
 ```

css/mobile-first-vs-desktop-first/practice/reznikovandrey.md

@@ -1,3 +1,3 @@
-Современные CSS-фреймворки и UI-библиотеки в большинстве своем также придерживаются _Mobile-first_ подхода:
+Современные CSS-фреймворки и UI-библиотеки в большинстве своем также придерживаются Mobile-first подхода:
 - [Tailwind](https://tailwindcss.com/docs/responsive-design#working-mobile-first)
 - [Material UI](https://mui.com/material-ui/getting-started/usage/#responsive-meta-tag)