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

Question

Levott @Levott

Вёрстка

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

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

Вопрос задан 04 июл. 2023
173 просмотра

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

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

modelair @modelair

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

Написано 04 июл. 2023
Одиночка Айс @daemonhk

Код в студию

Написано 04 июл. 2023
Сергей delphinpro @delphinpro Куратор тега Вёрстка

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

Написано 04 июл. 2023

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>

Написано 04 июл. 2023

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

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

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

Написано 04 июл. 2023
Levott @Levott Автор вопроса

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

Написано 04 июл. 2023
Levott @Levott Автор вопроса

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

Написано 04 июл. 2023
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...

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

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

Написано 04 июл. 2023

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>

Написано 04 июл. 2023

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

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

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

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

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

И т.д.

Написано 04 июл. 2023
Levott @Levott Автор вопроса

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

Написано 04 июл. 2023
Levott @Levott Автор вопроса

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

Написано 04 июл. 2023
Одиночка Айс @daemonhk

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

Написано 05 июл. 2023
Одиночка Айс @daemonhk

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

Написано 05 июл. 2023

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

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

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

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

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

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

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

Войти через центр авторизации

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

JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- 30 апр.
- 89 просмотров
1

ответ
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 23 апр.
- 60 просмотров
0

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

Средний
Как правильно вставлять изображения при наличии двух тем оформления сайта?
- 1 подписчик
- 19 апр.
- 110 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 18 апр.
- 93 просмотра
1

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

Простой
В чем может быть проблема, верстка расплывается по экрану телефона?
- 5 подписчиков
- 17 апр.
- 5147 просмотров
8

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

Средний
Что использовать для современной автоматизации верстки?
- 1 подписчик
- 15 апр.
- 167 просмотров
1

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

Простой
Можно ли сверстать макет без JavaScript?
- 3 подписчика
- 15 апр.
- 811 просмотров
3

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

Простой
Какой актуальный стек верстки 2024?
- 3 подписчика
- 10 апр.
- 1074 просмотра
3

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

+1 ещё

Средний
Есть ли отслеживание страницы при вёрстке в GULP?
- 1 подписчик
- 10 апр.
- 70 просмотров
1

ответ
HTML

+2 ещё

Простой
Как сделать такой clip-path на задний фон?
- 1 подписчик
- 07 апр.
- 115 просмотров
0

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

Frontend Vue & Capacitor Developer Middle++

Parasol Software

от 2 000 до 2 500 $

Fullstack разработчик

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

от 25 000 до 45 000 ₽

Frontend программист-разработчик

Максавит • Нижний Новгород

До 200 000 ₽

Разработать контент план на месяц для Тг канала по обучению испанскому

02 мая 2024, в 12:23

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

Написать бэк часть (API Эквайринг Тинькофф, VK API, API Cloudpayments)

28 апр. 2024, в 13:02

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

Создать простой зеро блок на тильда или html блок

02 мая 2024, в 11:31

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

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

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

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

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

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

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