Как понять что твоя верстка приемлема?

Question

Levott @Levott

Вёрстка

Как понять что твоя верстка приемлема?

Начал заниматься вёрсткой, и в процессе обучения некоторые люди говорили что моя верстка - кал, а некоторые что моя верстка - норм.
Поэтому решил чтоб наверняка обратиться к специалистам - как понять что твоя верстка НЕ кал?

Вопрос задан более двух лет назад
194 просмотра

14 комментариев

Подписаться 3 Средний 14 комментариев

modelair @modelair

также, как понять красивая эта женщина, или нет.

Написано более двух лет назад
Одиночка Айс @daemonhk

Код в студию

Написано более двух лет назад
Сергей delphinpro @delphinpro Куратор тега Вёрстка

Одиночка Айс,
Код в студию
обнаженку любите? =)
(по следам комментария выше)

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

Levott @Levott Автор вопроса

Одиночка Айс, у меня мало проектов, но вот пример, я здраво отношусь к критике
html

<body>
    <section class="firstmain">
      <div class="firstmain_inner">
        <header class="header">
          <div class="container">
            <div class="header_inner">
              <div class="header_inner_logo">
                <img src="images/logo.svg" />
              </div>
              <div class="header_inner_nav">
                <nav class="nav">
                  <a class="nav__link" href="#">About</a>
                  <a class="nav__link" href="#">Services</a>
                  <a class="nav__link" href="#">Pricing</a>
                  <a class="nav__link" href="#">Blog</a>
                </nav>
              </div>
              <div class="header_inner_button">
                <form action="#">
                  <button type="submit">Contact</button>
                </form>
              </div>
            </div>
          </div>
        </header>
        <div class="firstblog">
          <div class="container">
            <div class="firstblog_inner">
              <div class="firstblog_text">
                <div class="firstblog_orange">Modern Studio</div>
                <div class="firstblog_white">
                  We’re Help<br>
                  To Build Your Dream Project
                </div>
                <div class="firstblog_gray">
                  Agency provides a full service range including technical
                  skills, design, business understanding.
                </div>
                <div class="firstblog_inner_buttons">
                    <form action="#">
                        <button type="submit">
                            How we work
                        </button>
                    </form>
                    <a href="#">Contact us</a>
                </div>
                <div class="citatafirstmain">
                  <div class="citatafirstmain_image">
                    <img src="images/firstmaincitata.svg">
                  </div>
                  <div class="citatafirstmain_text">
                    <div class="citatafirstmain_text_textone">
                      "Put themselves in the merchant's shoes"
                    </div>
                    <div class="citatafirstmain_text_textsecond">
                      Meta Inc.
                    </div>
                  </div>
                </div>
              </div>
              <div class="firstblog_img">
                <img src="images/picfirstmain.svg" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="secondsection">
      <div class="container">
        <div class="secondsection_inner">
          <div class="tms">
            <img src="images/BitmapTM.svg" alt="ТМ">
            <img src="images/BitmapTM-1.svg" alt="ТМ">
            <img src="images/BitmapTM-2.svg" alt="ТМ">
            <img src="images/BitmapTM-3.svg" alt="ТМ">
            <img src="images/BitmapTM-4.svg" alt="ТМ">
          </div>
          <hr class="hr">
          <div class="about">
            <div class="about_inner">
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

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

Илья Салигжанов @Le_Traceur_Snork

Levott, ну, это точно не говно.

Если позволите совет - будьте последовательны в БЭМ-подходе - когда дело касается разделителей БЛОК__ЭЛЕМЕНТ--МОДИФИКАТОР (не мешайте _ и __ ; - и --), и попытайтесь не создавать сущностей сверх необходимого. Если что-то должно выглядеть одинаково - оно должно иметь одинаковый класс (это в тему div class="secondsection")

Написано более двух лет назад
Levott @Levott Автор вопроса

Хочу ещё попросить поскидывать мне курсы кому не лень, если здесь этого нельзя то можно в тг(@bruhvz) или вообще где нибудь только чтобы я смог посмотреть

Написано более двух лет назад
Levott @Levott Автор вопроса

Я искал курсы по вёрстке, (я самоучка) один чел говорит - верстайте так и так и вообще занимайтесь вёрсткой 24/-7, другой говорит - верстайте так и сяк и мяк и по другому и туда ещё накиньте over9000 фреймворков. Поэтому хотелось бы посмотреть уже проверенные людьми курсы. Вы вообще мне ничего не обязаны, просто надеюсь кто нибудь скинет по доброте душевной

Написано более двух лет назад
Ankhena @Ankhena Куратор тега Вёрстка

Levott, куча лишних div, но черт с ними.
1. Но с какой целью вы одиночные кнопки оборачиваете в формы? А потом еще и в div. И они больше похожи на ссылки.
2. Зачем hr вместо section?
3. Снова про семантику (меню, цитаты (или что это там))
4. citatafirstmain_text_textsecond с названиями классов нужно что-то делать. И с их единообразием.
firstmain - первая или главная?
5. Классы типа white, orange до добра обычно не доводят.

Вот вариант критериев https://habr.com/ru/companies/htmlacademy/articles...

Как понять что твоя верстка приемлема?

Клиент принял её и оплатил.

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

Levott @Levott Автор вопроса

Ankhena, как то так?

<body>
    <!-- Шапка -->
    <header>
      <div class="header_wrapper">
        <div class="header_logo">
          <img src="/images/logo.svg" alt="Лого" />
        </div>
        <div class="header_nav">
          <nav>
            <a href="#">Каталог</a>
            <a href="#">Контакты</a>
          </nav>
        </div>
        <div class="header_contacts">
          <div class="contact">7 495 518 66 31</div>
        </div>
      </div>
    </header>
    <!-- Конец шапки -->
    <!-- Основной контент -->
    <main>
      <div class="container">
        <div class="main_text">
          <h1>Каталог автомобилей</h1>
        </div>
        <div class="main_cards">
          <div class="main_cards_wrapper">
            <div class="cards_pon">
              <div class="pon">Фото</div>
              <div class="pon">Марка и Модель</div>
              <div class="pon">Год</div>
              <div class="pon">Дата осмотра</div>
              <div class="pon">Госномер</div>
              <div class="pon">VIN</div>
              <div class="pon">Цена</div>
              <div class="pon"></div>
            </div>
            <div class="card_item">
              <div class="card_item_svg">
                <img src="/images/reno.svg" alt="Рено логан" />
              </div>
              <div class="card_item_model">Renault Logan</div>
              <div class="card_item_year">2021</div>
              <div class="card_item_date">17-05-2022</div>
              <div class="card_item_number">Т931ВС790</div>
              <div class="card_item_vin">X7L4SRLTB66955553</div>
              <div class="card_item_price">от 999 000</div>
              <a href="#" class="card_item_check">Посмотреть</a>
            </div>
            <div class="card_item">
              <div class="card_item_svg">
                <img src="/images/reno.svg" alt="Рено логан" />
              </div>
              <div class="card_item_model">Renault Logan</div>
              <div class="card_item_year">2021</div>
              <div class="card_item_date">17-05-2022</div>
              <div class="card_item_number">Т931ВС790</div>
              <div class="card_item_vin">X7L4SRLTB66955553</div>
              <div class="card_item_price">от 999 000</div>
              <a href="#" class="card_item_check">Посмотреть</a>
            </div>
            <div class="card_item">
              <div class="card_item_svg">
                <img src="/images/reno.svg" alt="Рено логан" />
              </div>
              <div class="card_item_model">Renault Logan</div>
              <div class="card_item_year">2021</div>
              <div class="card_item_date">17-05-2022</div>
              <div class="card_item_number">Т931ВС790</div>
              <div class="card_item_vin">X7L4SRLTB66955553</div>
              <div class="card_item_price">от 999 000</div>
              <a href="#" class="card_item_check">Посмотреть</a>
            </div>
            <div class="card_item">
              <div class="card_item_svg">
                <img src="/images/reno.svg" alt="Рено логан" />
              </div>
              <div class="card_item_model">Renault Logan</div>
              <div class="card_item_year">2021</div>
              <div class="card_item_date">17-05-2022</div>
              <div class="card_item_number">Т931ВС790</div>
              <div class="card_item_vin">X7L4SRLTB66955553</div>
              <div class="card_item_price">от 999 000</div>
              <a href="#" class="card_item_check">Посмотреть</a>
            </div>
            <div class="card_item">
              <div class="card_item_svg">
                <img src="/images/reno.svg" alt="Рено логан" />
              </div>
              <div class="card_item_model">Renault Logan</div>
              <div class="card_item_year">2021</div>
              <div class="card_item_date">17-05-2022</div>
              <div class="card_item_number">Т931ВС790</div>
              <div class="card_item_vin">X7L4SRLTB66955553</div>
              <div class="card_item_price">от 999 000</div>
              <a href="#" class="card_item_check">Посмотреть</a>
            </div>
            <div class="card_item">
              <div class="card_item_svg">
                <img src="/images/reno.svg" alt="Рено логан" />
              </div>
              <div class="card_item_model">Renault Logan</div>
              <div class="card_item_year">2021</div>
              <div class="card_item_date">17-05-2022</div>
              <div class="card_item_number">Т931ВС790</div>
              <div class="card_item_vin">X7L4SRLTB66955553</div>
              <div class="card_item_price">от 999 000</div>
              <a href="#" class="card_item_check">Посмотреть</a>
            </div>
            <div class="card_item">
              <div class="card_item_svg">
                <img src="/images/reno.svg" alt="Рено логан" />
              </div>
              <div class="card_item_model">Renault Logan</div>
              <div class="card_item_year">2021</div>
              <div class="card_item_date">17-05-2022</div>
              <div class="card_item_number">Т931ВС790</div>
              <div class="card_item_vin">X7L4SRLTB66955553</div>
              <div class="card_item_price">от 999 000</div>
              <a href="#" class="card_item_check">Посмотреть</a>
            </div>
            <div class="card_item">
              <div class="card_item_svg">
                <img src="/images/reno.svg" alt="Рено логан" />
              </div>
              <div class="card_item_model">Renault Logan</div>
              <div class="card_item_year">2021</div>
              <div class="card_item_date">17-05-2022</div>
              <div class="card_item_number">Т931ВС790</div>
              <div class="card_item_vin">X7L4SRLTB66955553</div>
              <div class="card_item_price">от 999 000</div>
              <a href="#" class="card_item_check">Посмотреть</a>
            </div>
            <div class="card_item">
              <div class="card_item_svg">
                <img src="/images/reno.svg" alt="Рено логан" />
              </div>
              <div class="card_item_model">Renault Logan</div>
              <div class="card_item_year">2021</div>
              <div class="card_item_date">17-05-2022</div>
              <div class="card_item_number">Т931ВС790</div>
              <div class="card_item_vin">X7L4SRLTB66955553</div>
              <div class="card_item_price">от 999 000</div>
              <a href="#" class="card_item_check">Посмотреть</a>
            </div>
            <div class="card_item">
              <div class="card_item_svg">
                <img src="/images/reno.svg" alt="Рено логан" />
              </div>
              <div class="card_item_model">Renault Logan</div>
              <div class="card_item_year">2021</div>
              <div class="card_item_date">17-05-2022</div>
              <div class="card_item_number">Т931ВС790</div>
              <div class="card_item_vin">X7L4SRLTB66955553</div>
              <div class="card_item_price">от 999 000</div>
              <a href="#" class="card_item_check">Посмотреть</a>
            </div>
          </div>
          <div class="card_next">
            <a href="#">
              <div class="card_circle">
                <svg
                  width="18"
                  height="14"
                  viewBox="0 0 18 14"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M0.563604 7.6364C0.212133 7.28492 0.212133 6.71508 0.563604 6.3636L6.29117 0.636039C6.64264 0.284567 7.21249 0.284567 7.56396 0.636039C7.91543 0.987511 7.91543 1.55736 7.56396 1.90883L2.47279 7L7.56396 12.0912C7.91543 12.4426 7.91543 13.0125 7.56396 13.364C7.21249 13.7154 6.64264 13.7154 6.29117 13.364L0.563604 7.6364ZM18 7.9H1.2V6.1H18V7.9Z"
                    fill="black"
                  />
                </svg>
              </div>
            </a>
            <a href="#"><div class="card_circle">1</div></a>
            <a href="#"><div class="card_circle">2</div></a>
            <a href="#"><div class="card_circle">3</div></a>
            <a href="#"><div class="card_circle">4</div></a>
            <a href="#"><div class="card_circle">5</div></a>
            <a href="#"><div class="card_circle">...</div></a>
            <a href="#"><div class="card_circle">19</div></a>
            <a href="#"><div class="card_circle">20</div></a>
            <a href="#">
              <div class="card_circle">
                <svg
                  width="18"
                  height="14"
                  viewBox="0 0 18 14"
                  fill="red"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M17.6363 6.36361C17.9878 6.71508 17.9878 7.28493 17.6363 7.6364L11.9088 13.364C11.5573 13.7154 10.9875 13.7154 10.636 13.364C10.2845 13.0125 10.2845 12.4426 10.636 12.0912L15.7272 7L10.636 1.90883C10.2845 1.55736 10.2845 0.987513 10.636 0.636041C10.9875 0.284569 11.5573 0.284569 11.9088 0.636041L17.6363 6.36361ZM0.199951 6.1L17 6.1L17 7.9L0.199951 7.9L0.199951 6.1Z"
                    fill="black"
                  />
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
    </main>

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

Ankhena @Ankhena Куратор тега Вёрстка

Levott, как-то нет.

Почитайте про семантическую верстку.
Про теги для навигации, про списки.
Телефон - это ссылка. Зачем ему вокруг div не ясно. Если может быть больше телефонов или других контактных данных, то это секция или список или dl.

По спецификации div можно использовать тогда, когда нет других, более подходящих тегов. В вашем случае альтернатив полно.

Это <div class="card_circle">1</div> вообще псевдоэлементы от элементов нумерованного списка.

И т.д.

Написано более двух лет назад
Levott @Levott Автор вопроса

Ankhena, спасибо за советы, я все учту

Написано более двух лет назад
Levott @Levott Автор вопроса

Илья Салигжанов, ураааа! Это не говно!

Написано более двух лет назад
Одиночка Айс @daemonhk

Сергей delphinpro, кто ж ее не любит)

Написано более двух лет назад
Одиночка Айс @daemonhk

Levott, слушайте Ankhena, она шарит

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

Помогут разобраться в теме Все курсы

Академия Eduson

Frontend-разработчик free

3 дня

Далее
Компьютерная академия «TOP»

WEB разработка Fullstack

12 месяцев

Далее
Skypro

Веб-разработчик (c индивидуальным сопровождением)

9 месяцев

Далее

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

Вёрстка

Средний
Почему появляется белая полоса справа при верстке сайта?
- 1 подписчик
- 19 окт.
- 167 просмотров
0

ответов
HTML

+1 ещё

Средний
Как правильно сочетать теги article, section и заголовки h1-h6?
- 2 подписчика
- 21 сент.
- 252 просмотра
2

ответа
HTML

+2 ещё

Простой
Что поменять/добавить чтобы отображались все подкасты (видео)?
- 1 подписчик
- 26 авг.
- 160 просмотров
1

ответ
CSS

+2 ещё

Простой
Вёрстка анимированой кнопки — как реализовать?
- 1 подписчик
- 22 авг.
- 240 просмотров
1

ответ
Вёрстка

Простой
Проблема с версткой сайта?
- 1 подписчик
- 20 авг.
- 715 просмотров
2

ответа
HTML

+3 ещё

Простой
Как отменить инвертирование текста в yandex почте в dark mode?
- 2 подписчика
- 19 авг.
- 233 просмотра
1

ответ
CSS

+2 ещё

Простой
Как сделать такую сетку?
- 2 подписчика
- 28 июл.
- 2853 просмотра
2

ответа
CSS

+3 ещё

Средний
Яндекс Браузер на MacOS: как убрать или подвинуть иконку автозаполнения?
- 1 подписчик
- 25 июл.
- 129 просмотров
0

ответов
Вёрстка

Средний
Как создать эффект для активной кнопки?
- 1 подписчик
- 09 июл.
- 151 просмотр
1

ответ
Вёрстка

Простой
TG Mini App Full screen отступ от выреза?
- 2 подписчика
- 05 июл.
- 303 просмотра
1

ответ
Показать ещё Загружается…

Web-разработчик/WordPress программист (Full-stack)

JustBusiness • Санкт-Петербург

от 130 000 до 150 000 ₽

Фронтенд разработчик (Frontend developer)

Айдис

от 100 000 ₽

Оператор 1-я, 2-я линия техподдержки (поддержка клиентов)

MYRTEX

от 40 000 ₽

также, как понять красивая эта женщина, или нет.
Одиночка Айс,
Код в студию
обнаженку любите? =)
(по следам комментария выше)
Levott, ну, это точно не говно.

Если позволите совет - будьте последовательны в БЭМ-подходе - когда дело касается разделителей БЛОК__ЭЛЕМЕНТ--МОДИФИКАТОР (не мешайте _ и __ ; - и --), и попытайтесь не создавать сущностей сверх необходимого. Если что-то должно выглядеть одинаково - оно должно иметь одинаковый класс (это в тему div class="secondsection")
Хочу ещё попросить поскидывать мне курсы кому не лень, если здесь этого нельзя то можно в тг(@bruhvz) или вообще где нибудь только чтобы я смог посмотреть
Я искал курсы по вёрстке, (я самоучка) один чел говорит - верстайте так и так и вообще занимайтесь вёрсткой 24/-7, другой говорит - верстайте так и сяк и мяк и по другому и туда ещё накиньте over9000 фреймворков. Поэтому хотелось бы посмотреть уже проверенные людьми курсы. Вы вообще мне ничего не обязаны, просто надеюсь кто нибудь скинет по доброте душевной
Levott, куча лишних div, но черт с ними.
1. Но с какой целью вы одиночные кнопки оборачиваете в формы? А потом еще и в div. И они больше похожи на ссылки.
2. Зачем hr вместо section?
3. Снова про семантику (меню, цитаты (или что это там))
4. citatafirstmain_text_textsecond с названиями классов нужно что-то делать. И с их единообразием.
firstmain - первая или главная?
5. Классы типа white, orange до добра обычно не доводят.

Вот вариант критериев https://habr.com/ru/companies/htmlacademy/articles...

Как понять что твоя верстка приемлема?

Клиент принял её и оплатил.
Levott, как-то нет.

Почитайте про семантическую верстку.
Про теги для навигации, про списки.
Телефон - это ссылка. Зачем ему вокруг div не ясно. Если может быть больше телефонов или других контактных данных, то это секция или список или dl.

По спецификации div можно использовать тогда, когда нет других, более подходящих тегов. В вашем случае альтернатив полно.

Это <div class="card_circle">1</div> вообще псевдоэлементы от элементов нумерованного списка.

И т.д.
Ankhena, спасибо за советы, я все учту
Илья Салигжанов, ураааа! Это не говно!

Answer 1 · 2023-07-04 15:04:46

Как минимум, она должна соответствовать хотя бы каким-нибудь стандартам, например:

Семантические теги - https://www.w3schools.com/html/html5_semantic_elem...
БЭМ - https://ru.bem.info/methodology/quick-start/
Различные best practices - https://www.webfx.com/blog/web-design/20-html-best...

Answer 2 · 2023-07-04 14:49:26

Это как с едой, кому-то вкусно, кому-то нет, кому-то вообще нет разницы. То есть, вкусовщина и много факторов которые влияют на верстку.

Как понять что твоя верстка приемлема?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт