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

Question

Levott @Levott

Вёрстка

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

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

Вопрос задан более года назад
184 просмотра

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, она шарит

Написано более года назад

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

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

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

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

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

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

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

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

Вёрстка

+1 ещё

Простой
Как правильно должна масштабироватся верстка сайта на десктопе?
- 1 подписчик
- вчера
- 86 просмотров
1

ответ
CSS

+1 ещё

Простой
Как сделать обтекание одного блока другим CSS?
- 1 подписчик
- 01 дек.
- 126 просмотров
0

ответов
HTML

+3 ещё

Простой
Как правильно сделать наложение блоков друг на друга?
- 1 подписчик
- 30 нояб.
- 118 просмотров
1

ответ
HTML

+3 ещё

Простой
Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?
- 1 подписчик
- 26 нояб.
- 106 просмотров
1

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

Простой
Как раздвинуть элементы в шапке сайта?
- 1 подписчик
- 10 нояб.
- 76 просмотров
1

ответ
Веб-разработка

+2 ещё

Простой
Что нужно знать веб-дизайнеру о вёрстке, чтобы адекватно коммуницировать с разработчиком сайта / верстальщиком?
- 1 подписчик
- 06 нояб.
- 571 просмотр
4

ответа
CSS

+2 ещё

Простой
Как исправить не корректное изменение свойства display css?
- 1 подписчик
- 25 окт.
- 93 просмотра
1

ответ
CSS

+1 ещё

Простой
Как сделать пропорциональное масшабирование блока?
- 1 подписчик
- 25 окт.
- 139 просмотров
1

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

Средний
Что за баг с дублированием контента?
- 1 подписчик
- 23 окт.
- 107 просмотров
1

ответ
CSS

+2 ещё

Средний
Как реализовать такой эффект CSS?
- 1 подписчик
- 15 окт.
- 252 просмотра
1

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

Преподаватель курсов программирования

CODDY • Москва

от 25 000 до 50 000 ₽

WEB-разработчик

TravelLine

До 70 000 ₽

Fullstack на Wordpress

SilverDuck

от 100 000 ₽

Допил JS-PHP парсера

22 дек. 2024, в 16:26

2500 руб./за проект

Прогнозирование поломок с помощью модели ARIMA на имеющемся датасете

22 дек. 2024, в 15:29

2000 руб./за проект

Разработать Extension для Google Chrome Webstore

22 дек. 2024, в 14:07

15000 руб./за проект

также, как понять красивая эта женщина, или нет.
Одиночка Айс,
Код в студию
обнаженку любите? =)
(по следам комментария выше)
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

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

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

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

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

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