Завершаем вёрстку всех компонентов #6

Alexandra0107 · 2024-11-12T15:15:06Z

…", разметка отображения карточек+нумерация страниц

🎓 Графика для всех страниц

🎓 Базовая стилизация всех страниц

💥 https://htmlacademy-htmlcss.github.io/2468767-sedona-1/6/

🎓 Сетка страниц и крупных блоков на флексах

🎓 Микросетки на флексах для всех страниц

🎓 Постройте мелкие сетки на гридах для подходящих компонентов

🎓 Декоративные элементы всех страниц

🎓 Завершаем вёрстку всех компонентов

…", разметка отображения карточек+нумерация страниц

Alexandra0107 · 2024-11-12T15:47:54Z

Оптимизация картинок

ustimenko-andrew · 2024-11-15T15:45:32Z

Catalog.html

            <div class="infrastructure">
-              <input type="checkbox" name="infrastructure" value="pool" id="infrastructure-pool" checked>
+              <input type="checkbox" name="infrastructure-pool" value="pool" id="infrastructure-pool" checked>


В checkbox используй один name, при выборе значений, будет происходит группировка по имени, то есть конечный результат name = [ список значений ]

ustimenko-andrew · 2024-11-15T15:50:10Z

Catalog.html

    </main>
    <footer class="main-footer">
      <ul class="social-list">
        <li class="social-list-item">
          <a href="https://vk.com/htmlacademy"><img src="./img/social_vk.svg" width="24.0001" height="14" alt="VK"></a>
        </li>
        <li class="social-list-item">
-          <a href="https://t.me/htmlacademy"><img src="./img/social _tg.svg" width="22" height="17" alt="Telegram"></a>
+          <a href="https://t.me/htmlacademy"><img src="./img/social_tg.svg" width="22" height="17" alt="Telegram"></a>


Названия картинок через дефис

ustimenko-andrew · 2024-11-15T15:51:07Z

index.html

+      <div class="welcome">
+        <div class="welcome2">
+          <div class="welcome3">
+          </div>
+        </div>
+      </div>


Чутка перебор с вложеностью, тут мы будет использовать img, так что нам будет достаточно 1 секции и нужного тега внутри

keksobot · 2024-11-19T05:21:26Z

♻️ Я собрал ваш пулреквест. Посмотреть можно здесь.

добавление внутренних отступов

ustimenko-andrew · 2024-11-23T19:28:37Z

Catalog.html

@@ -181,14 +188,36 @@ <h2>Подпишитесь на рассылку</h2>
          <input type="submit" value="Подписаться">
        </form>
      </section>
+      <section>


Это больше будет nav, так как тут у нас навигация

ustimenko-andrew · 2024-11-23T19:29:51Z

css/style.css

+  text-decoration: none;
+}
+
+h1 {


Избегай селекторы по тегам, академия это бракует, лучше заведи общий класс

ustimenko-andrew · 2024-11-24T11:43:54Z

index.html

+        <p class="reasons"> Опытный персонал и качественное обслуживание!</p>
+        <ul class="features-list">
+          <li class="features-list-item">
+            <img src="./img/advantage-icon-1.svg" alt="Жилье">


Это будут иконки, то есть декоративные изображения, а не img

ustimenko-andrew · 2024-11-24T11:44:48Z

index.html

        </li>
        <li class="social-list-item">
-          <a href="https://www.youtube.com/user/htmlacademyru"><img src="./img/youtube.svg" width="22" height="17"
+          <a contenteditable="youtube" href="https://www.youtube.com/user/htmlacademyru"><img src="./img/youtube.svg" width="22" height="17"


Так же будут иконки

keksobot · 2024-12-02T01:02:16Z

♻️ Я собрал ваш пулреквест. Посмотреть можно здесь.

ustimenko-andrew · 2024-12-02T13:09:01Z

css/style.css

+}
+
+.page-footer-container {
+  width: 1200px;


Ты можешь поставить ограничения на самом верхнем уровне, чтобы не прописывать каждому элементу + выравнивание по центру

ustimenko-andrew · 2024-12-02T13:09:49Z

css/style.css

+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;


Используй лучше 100dvh вместо %

ustimenko-andrew · 2024-12-02T13:10:21Z

css/style.css

+}
+
+.blok-1 {
+  color: #FFFFFF;


В обном стиле, у тебя где-то верхний регистр, а где-то нижний

ustimenko-andrew · 2024-12-02T13:11:14Z

css/style.css

+  display: flex;
+  flex-wrap: wrap;
+  background-color: #82B3D3;
+  height: 384px;


Не здавай фиксированные значения высоты контентным блокам, они не пройдут проверку на переполнение, отдавай приоритет min-height, только декоративным элементам фиксируй height

ustimenko-andrew · 2024-12-02T13:12:15Z

css/style.css

+  text-transform: uppercase;
+}
+
+a {


Старайся избегать теги, академия это не любит, лучше класс + все общие стили на верх перенеси

ustimenko-andrew · 2024-12-02T13:12:47Z

img/advantage-icon3.svg

*-icon-3, проверь именования

ustimenko-andrew · 2024-12-02T13:13:07Z

index.html

+      <div class="page-container">
+        <div class="welcome">
+          <div class="welcome2">
+            <div class="welcome3">
+            </div>
+          </div>
+        </div>


Зачем такая вложенность?

ustimenko-andrew · 2024-12-02T13:13:49Z

index.html

+          </div>
+          <ul class="features-list">
+            <li class="features-list-item">
+              <img src="./img/advantage-icon-1.svg" alt="Жилье">


Сейчас это не критично, но к концу, нужно переделать на иконку, и убрать тег img, академия придерется

ustimenko-andrew · 2024-12-02T13:14:34Z

index.html

+            <svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M18.9402 0.356445H3.50738C1.64668 0.356445 0.333252 1.9502 0.333252 3.75645V13.8502C0.333252 15.7627 1.64668 17.3564 3.50738 17.3564H19.1591C20.8009 17.3564 22.3333 15.7627 22.3333 13.9564V3.75645C22.1143 1.9502 20.8009 0.356445 18.9402 0.356445ZM7.99494 12.8939V4.81894L15.3283 8.85645L7.99494 12.8939Z"
+                fill="#83B3D3" />


Во всех svg используй для цвета fill currentColor, это нам прогодится, при изменении состояний

ustimenko-andrew · 2024-12-27T15:07:05Z

Catalog.html

С маленькой буквы

ustimenko-andrew · 2024-12-27T15:10:02Z

css/style.css

+}
+.navigation-link .site-navigation-2{


Форматирование кода

ustimenko-andrew · 2024-12-27T15:10:21Z

css/style.css

+
+}
+
+.site-navigation-item hr {


hr можно использовать, но могут придраться на проверке, тут 50/50

ustimenko-andrew · 2024-12-27T15:11:46Z

css/style.css

+  margin-top: 0;
+}
+
+a {


Общие классы сверху и лучше приоритет отдавать классам, чтобы пройти проверку, можешь сделать .link или использовать глобальный :link

ustimenko-andrew · 2024-12-27T15:12:10Z

css/style.css

+}
+
+
+ul {


Общие стили сверху + класс вместо тега

ustimenko-andrew · 2024-12-27T15:13:46Z

css/style.css


+.wrapper-2 {


block-1, wrapper-1 и тд - такие названия сложно понять, старайся их переименовывать, чтобы из названия понятно, где это, или же вкладывать, допусти .advantages .block-1

ustimenko-andrew · 2024-12-27T15:16:24Z

css/style.css

+  display: -ms-flexbox;
+  display: flex;
+  width: 300px;
+  height: 438px;


Проверь везде, где у тебя фиксированный height, если это контентный блок - то такого быть не должно, не пройдет критерий на переполнения, толдько для декоративных элементов у нас фиксированный height, для отсального используем min-height

ustimenko-andrew · 2024-12-27T15:16:52Z

css/style.css

 }

 .rating-mini span {
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: lightgrey;
+
 }

 .rating-mini > span:before {


Лучше класс вместо span + псевдо элементы через ::

ustimenko-andrew · 2024-12-27T15:17:14Z

css/style.css

+
+

Стиль кода

ustimenko-andrew · 2024-12-27T15:17:38Z

css/style.css

+  margin-bottom: 30px;
+}
+
+.visually-hidden {


Общие стили сверху

keksobot · 2024-12-27T15:18:10Z

♻️ Я собрал ваш пулреквест. Посмотреть можно здесь.

Alexandra0107 · 2025-01-15T09:37:29Z

доработки

Alexandra0107 · 2025-01-15T09:37:54Z

keksobot · 2025-01-15T09:39:24Z

♻️ Я собрал ваш пулреквест. Посмотреть можно здесь.

keksobot · 2025-01-15T11:34:40Z

♻️ Я собрал ваш пулреквест. Посмотреть можно здесь.

keksobot · 2025-01-15T18:09:38Z

♻️ Я собрал ваш пулреквест. Посмотреть можно здесь.

keksobot · 2025-01-16T20:02:17Z

♻️ Я собрал ваш пулреквест. Посмотреть можно здесь.

keksobot · 2025-01-19T13:09:21Z

Не удалось смёржить пулреквест. Проверьте наличие конфликтов. Задание переведено в статус Есть замечания

keksobot · 2025-01-19T13:09:40Z

Не удалось смёржить пулреквест. Проверьте наличие конфликтов. Задание переведено в статус Есть замечания

keksobot · 2025-01-20T19:51:47Z

♻️ Я собрал ваш пулреквест. Посмотреть можно здесь.

ustimenko-andrew · 2025-01-20T19:40:15Z

catalog.html

+        </nav>
+      </header>
+      <main class="main-inner main-container" data-test="main">
+        <header class="catalog-header">


header популярно использовать для объединения элементов навигации или выделить группу заголовка. Здесь слишком большая группировка, section внутри лишний.

ustimenko-andrew · 2025-01-20T19:42:14Z

catalog.html

+            </form>
+          </section>
+        </header>
+        <section class="catalog-2" data-test="catalog">


Не используй в названиях классов состояния. Такие как 2, black и подобные, старайся придавать им логический смысл.

ustimenko-andrew · 2025-01-20T19:45:19Z

catalog.html

+          </div>
+          <ul class="product-list">
+            <li class="product-card">
+              <a class="product-card-link" href="#">


Это неплохой вариант, но лучше, если ты обернешь все что внутри li в article, так, ты акцентируешь внимание, что это самостоятельный - переиспользуемый блок

ustimenko-andrew · 2025-01-20T19:49:00Z

catalog.html

+              </a>
+              <div class="card-container">
+                <div class="full-row">
+                  <p class="product-card-type">Гостиница</p>


Относись к
как к абзацу в книге, по структуре, тут не абзац, а просто текст.

ustimenko-andrew · 2025-01-20T19:50:16Z

catalog.html

+                  <p class="product-card-price">От 4000 ₽</p>
+                </div>
+                <a class="product-card-button" href="#">подробнее</a>
+                <a class="add-favorite-button" href="#">в избранное</a>


Если мы ожидаем переход по нажатию, то это ссылка, но, здесь будет "добавление элемента в избранное", то есть мы не меняет URL, а значит тут кнопка.

ustimenko-andrew · 2025-01-20T20:05:30Z

css/style.css

+  background-color: #756157;
+  color: #ffffff4d;
+}
+.add-favorite-button {


Стиль кода

ustimenko-andrew · 2025-01-20T20:05:41Z

css/style.css

+  background-color: #7db54f;
+  color: #ffffff4d;
+}
+.product-card-stars {


Стиль кода

ustimenko-andrew · 2025-01-20T20:05:52Z

css/style.css

+  text-transform: uppercase;
+  color: #333333;
+}
+.pagination {


Стиль кода

ustimenko-andrew · 2025-01-20T20:06:48Z

css/style.css

+  color: #756157;
+  outline: none;
+}
+.subscribe-catalog {


Стиль кода

ustimenko-andrew · 2025-01-20T20:07:56Z

css/style.css

+  background-position: 0 0;
+  color: #000000;
+  background-color: #ffffff;
+  background-image: none;
 }


Общая проблема в том, что нет выделенных общих классов. Каждому списку прописан reset стилей, но при этом, если выделить это в 1 класс, то кода станет в разы меньше. То же самое про кнопки, из-за того, что ты стараешься прописывать все стили, то у некоторых кнопок теряются состояния. Постарайся вынести общие стили в общие классы. Тем самым мы изрядно сократим код и сделаем его понятнее.

Корректировка названия картинка ТГ, корректировка тег form в "Каталог…

d359f8a

…", разметка отображения карточек+нумерация страниц

keksobot changed the title ~~Корректировка названия картинка ТГ, корректировка тег form в "Каталог…~~ Графика для всех страниц Nov 12, 2024

Оптимизация картинок

1ab0f37

добавление класса списку с удобствами

436696d

ustimenko-andrew reviewed Nov 15, 2024

View reviewed changes

Alexandra0107 added 4 commits November 18, 2024 18:40

Подключение стилей в index

90d5153

Добавление стилей каталогу

38758bf

правка названия картинок + checkbox

433057a

корректировка header

b9439fd

keksobot changed the title ~~Графика для всех страниц~~ Базовая стилизация всех страниц Nov 19, 2024

keksobot pushed a commit that referenced this pull request Nov 19, 2024

✔️ Сборка #6

8f7de37

Alexandra0107 added 3 commits November 20, 2024 16:00

Добавление grid в шапку

6d0f1ba

header и footer внесение flex

1c09893

удаление стилей шапки (куда то все поехало)

e498840

добавление внутренних отступов

ustimenko-andrew reviewed Nov 24, 2024

View reviewed changes

Alexandra0107 added 3 commits November 26, 2024 18:48

подклбчение иконок через cvg

4f65c11

зазметка крупной сетки

28a5649

Сетка catalog

2f8773d

keksobot changed the title ~~Базовая стилизация всех страниц~~ Сетка страниц и крупных блоков на флексах Nov 28, 2024

Alexandra0107 added 2 commits November 28, 2024 13:06

Сетка блока "Преимущества"

e41d88b

Сетка блока advantages

4081106

keksobot pushed a commit that referenced this pull request Dec 2, 2024

✔️ Сборка #6

18dd84e

ustimenko-andrew reviewed Dec 2, 2024

View reviewed changes

Alexandra0107 added 4 commits December 3, 2024 18:57

Cмещение блока advantages

e198a81

header правки

8987f97

Микросетка на главной странице

ba63b57

Форма отправки

5a70e31

декоративный эллемент в шапке

07b4376

ustimenko-andrew reviewed Dec 27, 2024

View reviewed changes

keksobot pushed a commit that referenced this pull request Dec 27, 2024

✔️ Сборка #6

73eb5c3

Alexandra0107 added 5 commits January 13, 2025 19:26

Доработки

116c035

Доработки

a20f670

корректировки

5d5a7ae

правка классов

c053c29

кроссбраузерность

2308a85

Alexandra0107 closed this Jan 15, 2025

Alexandra0107 reopened this Jan 15, 2025

keksobot changed the title ~~Постройте мелкие сетки на гридах для подходящих компонентов~~ Декоративные элементы всех страниц Jan 15, 2025

keksobot pushed a commit that referenced this pull request Jan 15, 2025

✔️ Сборка #6

88d3914

Подключение скрипта

d9fe50f

keksobot changed the title ~~Декоративные элементы всех страниц~~ Завершаем вёрстку всех компонентов Jan 15, 2025

keksobot pushed a commit that referenced this pull request Jan 15, 2025

✔️ Сборка #6

7a9be03

keksobot pushed a commit that referenced this pull request Jan 15, 2025

✔️ Сборка #6

77027f8

keksobot merged commit f5ed2c8 into htmlacademy-htmlcss:master Jan 15, 2025

keksobot pushed a commit that referenced this pull request Jan 16, 2025

✔️ Сборка #6

fe75e86

keksobot pushed a commit that referenced this pull request Jan 20, 2025

✔️ Сборка #6

268f378

ustimenko-andrew reviewed Jan 20, 2025

View reviewed changes

		}
		.navigation-link .site-navigation-2{


		}

		.site-navigation-item hr {


		.wrapper-2 {

Завершаем вёрстку всех компонентов #6

Завершаем вёрстку всех компонентов #6

Conversation

Alexandra0107 commented Nov 12, 2024 • edited by keksobot Loading

Alexandra0107 commented Nov 12, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

keksobot commented Nov 19, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

keksobot commented Dec 2, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

keksobot commented Dec 27, 2024

Alexandra0107 commented Jan 15, 2025

Alexandra0107 commented Jan 15, 2025

keksobot commented Jan 15, 2025

keksobot commented Jan 15, 2025

keksobot commented Jan 15, 2025

keksobot commented Jan 16, 2025

keksobot commented Jan 19, 2025

keksobot commented Jan 19, 2025

keksobot commented Jan 20, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Alexandra0107 commented Nov 12, 2024 •

edited by keksobot

Loading