Как вам вёрстка?

Question

[Liuonid]

ссылка на сайт
Решил сделать первую вёрстку сайта (точнее вторая, первую не смог доделать так как там нужно что-то вроде React с перетаскиванием элементов), хотел бы узнать на чём стоит заострить внимание? Js знаю слабо (в процессе изучения пока), по этому слайдер не доделал (думал сначала подключить slick слайдер, но что то он не понравился мне) и почему только одна кавычка у content:open-quote у элементов .slider-sub__quote::before, там стиль стоит display: none;
Сам макет.

Comments

[Ankhena]

1. Первое, про что всегда пишу: валидатор. Проверять нужно и html и css.
Правила можно нарушать, понимая зачем, почему и что за это будет с готовностью расплатиться.
Новичкам нет.
2. Если сайт не резиновый и не адаптивный, то нужно указывать минимальную ширину контейнеру. Ту, на которой все начинает ломаться.
3. Картинки должны сжиматься не меняя пропорций.
4. Подключены странные версии JQ и пустой скрипт.
Скрипты лучше подключать перед закрывающим тегом </body>
Если можно не тянуть JQ, лучше этого не делать.
В качестве слайдера возьмите swiper. У меня есть к нему небольшие претензии, но из готового он хорош.
5. Фиксированная высота не доведет вас до добра.
С шириной элементов типа кнопок тоже осторожно. Лучше задавайте padding'и.
Всегда думайте о том, что надпись может быть другая, слов больше или меньше, длиннее или короче и т.д.
Это касается не только кнопок, но и всего контента, меню...
Например, у вас есть прекрасные стили

.about__subtitle {
    font-size: 36px;
    line-height: 80px;
}

Вот напишите в этот подзаголовок текста на 2 строчки. Красиво?
Для отступов придумали margin и padding.
А line-height лучше задавать как коэффициент без указания единиц измерения (в остальных местах норм)
6. Почитайте про доступность контента.
7. Картинки.
Почитайте про оптимизацию изображений, про ретину, тег picture и формат webp.

Хватит ))
Для первой верстки вполне прилично.

Answer 1

[Александр]

1) Адаптивности нет, значит макет уже никуда не годится
2) slick - лучший слайдер, что я видел, учись с ним работать, не нравится там ничего не может, все стилизуется
3) Нет анимации наведения на ссылки и кнопки, выглядит не очень
4) Комментов нет ни в html, ни в css (по крайней, не нашел)

В остальном макет крайне очень простой, беритесь за что-то сложнее и адаптируйте, а лучше углубляйтесь в js, верстка походу закрепится.

Comments

[Liuonid]

На счет комментов можно по подробнее, что и как нужно комментить? каждый section и так же в css? как бы начало здесь, а конец вот тут.

[Александр]

Liuonid, Скачайте сверстанный html template , их много, там, как правило, код пишется правильный.
Выделять нужно начало и конец основных секций, например

header start
   logo start
   ....
   logo end
...
header end

Answer 2

[Froggyweb]

самое отвратительное - это фиксированные размеры

бедные дети, которые худеют от height. да и текст добавить невозможно

Answer 3

[Kirill Makarov]

Есть куда расти, я конечно далеко не верстальщик, сам маленько пробовал.
Сделай адаптивность, текст чтобы стоял на месте. Смотри видео уроки, читай статьи и книги. В общем успехов тебе в начинании

Answer 4

[html-css]

адаптив? не не слышал

Comments

[Liuonid]

Слышал, следующую вёрстку сделаю адаптивным.

Answer 5

[Alex]

У вас есть проблемы доступности. Их стоит решить. Это как раз то, что обычно не предусматривается дизайном и о чем должен думать разработчик.