Правильно ли я верстаю?

Question

[Дмитрий Анисимов]

сверстал шапку макета и понял,что кажется я верстаю не так как надо.
1.хотелось бы получить советов
2.указаний на ошибки
3.и сказать чего не хватает(что подучить)
вот ссылка rollerstore.ru/?login=&pass=

Comments

[di]

Почему не адаптивно.?) У клиентов могут быть разные экраны и устройства. Я у Дмитрия Лаврика посматриваю вебинары по фронту, вроде неплохо заходят https://www.youtube.com/channel/UC33CqCsFPEHuwhpaE...
Но сам не профессионал. Поэтому просто оставлю комментарий здесь.

[developer007]

прикрути сетку какую нибудь
или тупо bootstrap и не парься.

[Ярослав Иванов]

hwnd32, бутстрап для аутистов.

[Froggyweb]

border-top: 8.5px solid transparent

;
Что эта за магия и глядит все равно криво

.box_1 {
height: 133px;
}

Фикс ыфсоты зачем если я лого уменьшу иои ы мобильной версии мне опять задавать высоту? нафиг. Высота блоку вообще на мой взгляд задается в очень крайних случаях, т.е. почти никогда.
Опять же название класса page-header намного лучше бокса 345

Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the industry's

standard dummy text ever since the 1500s

Это один абзац нефиг его делить и тем более кажлой строчке класс давать. попробуй это место ридером прочитать как рассказывает Макеев :)

REQUEST A QUOTE

классы просто ад
вроде этого было бы круче

<form>
  <fieldset>
    <legend>Personalia:Request a Quote</legend> /обрати внимание на регисто
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

.right_block input {
background: #eeeeee;
display: inline-block;
height: 57px;
width: 353px;
border: none;
border-radius: 8px;
box-sizing: border-box;
padding-left: 15px;

Совсем плох все статично и при любых корректировках все надо переписывать.
достаточно было сдеоать паддинги и ширину 100%

Опять же что за селектор CSS у меня инпутов можат там 100 быть.
проще кнопке дать класс .btn.btn--submit 'это пример из БЭМ посмотри как именуются кассы в фрэймворках например Бутстрап и пр.

Рекомендую почитать книжку Большая книга CSS очень классная, причем смотреть на логику, а не какие там паддинги указаны. Верстка должна быть максимально гибкой к контенту.

ЗЫ <div class="cub"></div>
это input type="checkbox" ^)

[developer007]

Ярослав Иванов, ты серьезно?)

Answer 1

[coverme]

Нет,не верно.
1.У тебя весь сайт лежит в теге <header> .Логично же,что хедер должен быть только меню+лого в твоём варианте.В общем,тег хедера должен был закрыться перед этим- <div class="box">
2.Сайт не адаптивен,лучше используй фреймворк
3.Начни с структуры хтмл документа,так как у тебя изначально всё не так как должно быть.
4.Использование непонятно каких механик,у тебя банально сделаны отступы в меню прозрачным бордером:

border-top: 8.5px solid transparent;
    border-bottom: 8.5px solid transparent;
    border-left: 20.505px solid transparent;
    border-right: 20.505px solid transparent;

Зачем это?
Ну и прочие ошибки...

Answer 2

[cheese13]

Подучи flexbox.
Тебе станет значительно проще позиционировать элементы и проще осваивать адаптивную верстку.

Comments

[Froggyweb]

Зачем? Может Grid или СSS in jS
Флексбокс не панацея

[Rustam Bainazarov]

Froggyweb, разве Grid отменяет собой Flexbox?

[Froggyweb]

SmthTo, не знаю, вряд ли. Но проблема верстки явно не в флексбокс и советы используй флексбокс или бутстрап меня бесят.

[Rustam Bainazarov]

Froggyweb, чем же бесят? Автор вопроса верстает на float'ах, что намекает. Поэтому вполне нормальный совет.

Полноценное время Grid наступит тогда, когда умрет IE11 с его косой поддержкой Grid. Если есть возможность сделать что-то на Flex'e без использования Grid (для массового сайта), то лучше Flex.

Предвещая слова о ненужности IE11: недавно писал, какой был хипишь с IE11 у одного московского интернет-магазина, который решил кинуть поддержку IE11. Куча людей в первые же дни стала жаловаться, что не может сделать заказ (порядка 20% от заказов). Поддержку IE11 вернули.

[Froggyweb]

ну у ие11 с флексом тоже не все радужно,
Ну а в верстке, которая в топике - float это самое прекрасное.

[edward_freedom]

Froggyweb, на ие11 уже все забили. Флоат изначально был сделан, для обьтекание текстом, сейчас его используют совершенно не по назначению, дивы им ровняют и тд

Answer 3

[Александр]

Как и было сказано выше, в <header> стоило запихнуть лишь логотип и навигацию, причем и само навигационное меню можно было бы обернуть в <nav>, по семантике, так сказать. А все остальной контент сайта обернуть в тег <main>, дабы уменьшить кол-во дивов на квадратный метр)
классы в li лучше назвать class="menu-item", ибо в будущем верстка страниц явно будет более масштабной и название стилей по такому образу явно уменьшит шанс дублирования классов в разных местах страницы. Например, у тебя будет li меню и li товара буду иметь классы item, когда можно сделать как class="navigation-item" и class="product-item" соответственно.

По форме:

E-mail адресу можно было присвоить type="mail"
Не понимаю, почему у поля "Номер телефона" type="password", хотя есть для этого type="tel" (+ там ещё и опечатка в placeholder: Nuber- Number)
Чекбокс можно было сделать с помощью

<input type="checkbox" name="accept" id="accept">
<label for="accept">I accept the terms & conditions</label>

Обхват текста в тег <label> и связыванию по id позволит нам активировать чекбокс, как кликнув по полю чекбокса, так и на сам текст
Так же, "terms & conditions" можно было бы обернуть в ссылку, которая, якобы при нажатии открывала эти условия соглашения в новом окне. Ну или если ты хочешь заморочиться, то можно сделал Pop up.