Как оцените первую верстку (Бэм, доступность, семантика)?

Question

[Bastern]

Привет. Ранее занимался дизайном, но сейчас заинтересовался разработкой и решил начать с верстки.
Выбрал легкий макет и использовал в своей работе БЭМ и scss. Адаптив еще не делал.
Интересует то, какие ошибки я допустил и проверить сайт на доступность и семантику.
В этой верстке я использовал центровку с container, но если я правильно понимаю, то можно использовать миксование классов в БЭМ и не оборачивать каждый раз в container?
В js совсем не разбираюсь и не смог реализовать слайдер. Если кто-то подскажет его реализацию, то буду благодарен.
Ссылка на код: https://github.com/Pizert/Pizert.github.io/tree/ma...
Ссылка на сайт: https://pizert.github.io/zet/

Answer 1

[Михаил]

как минимум это исправьте

https://gtmetrix.com/reports/pizert.github.io/lVaE9115

Comments

[Bastern]

Спасибо за отзыв) Чтобы увидеть эти ошибки, нужна регистрация на том сайте или про аккаунт? У меня этого не отображает там. Стандартный валидатор показывает мне 2 предупреждения.

[Михаил]

Bastern,
1. F12 > audits
2. https://chrome.google.com/webstore/detail/accessib...

[Михаил]

Bastern, и outline так себе, кажись пару заголовков отсутствует

[Михаил]

Bastern,
Довольные клиенты:
- пуфта

Наша команда:
1. Read his Bio
2. Read his Bio
3. Read his Bio
4. Read his Bio

[Bastern]

Михаил, Спасибо, сейчас буду разбирать ошибки. Я так понимаю, что я указал не те заголовки в блоке с командой? И для первой верстки это сильно плохой результат?

[Михаил]

Bastern, имена лучше будет, можно объединить имя +должность, но я наверное бы просто имя оставил

[Михаил]

Bastern,
https://developers.google.com/web/fundamentals/acc...
В частности:
- Styling focus
- Target size (навигация)
- Color and contrast (::placeholder у инпутов)

[Bastern]

Михаил, спасибо, буду читать и исправлять все косяки.

Answer 2

[alex-1917]

Нормалек, у нас за такое каждое 25 число в кассе выдают твердые тридцаточку-тридцатьпяточку килорубасов.

Answer 3

[i_ikigai]

Выглядит хорошо, надо бы картинки более лёгкие ставить, грузит на телефоне очень долго. Tinypng или стандартную в фотошопе. Для адаптивности удобно использовать бутстрап, там и слайдер есть

Comments

[i_ikigai]

Ещё было бы неплохо над первой секций поработать, огромное количество пустого места, но это в будущем в адаптивной вёрстке

[i_ikigai]

[Bastern]

i_ikigai, до адаптива еще не добрался, сейчас исправляю ошибки и буду делать адаптив. Может зря полез в верстку, но хотелось разобраться и уметь это делать. Я так понимаю, что совмещение дизайна и верстки не очень приветствуется?