Прошу знатоков оценить вёрстку, насколько хорошо она сделана?

Question

[David Gegiya]

Добрый день! Опыт вёрстки очень небольшой, решил сделать первый крупный сайт, вёрстка заняла около 20 часов. Пытался сделать её адаптивной. JS практически не знаю, все скрипты созданы на коленке за полчаса, на основе знаний других языков. Прошу оценить общий уровень и указать на главные ошибки, заранее спасибо!

GitHub: https://github.com/DavidaaWoW/adaptive_design_first

Сайт: https://applab123.netlify.app/

Comments

[Ankhena]

0. Валидатор
1. У кнопок и в макете был такой страшный бордер?
2. Нарушена семантика. Learn more это ссылки? а вы делаете их тегом button.
3. Иконки - они в макете были растром? Почему вы считаете их контентными изображениями?
4. features_container_flex_first_container_right - шикарное название классов для текста стоящего под иконкой. Главное сразу всё понятно, что происходит.
5.

<div class="testimonila_stars">
            <span>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </span>
          </div>

очень много тегов и лишних оберток (не только в этом примере)
6. Не у всех элементов есть доступное содержимое. Например, у звездного рейтинга.
7. На ширине 673 очень странный адаптив

8. А главное, не знаю как вы, а я, например, текст на мобилках вообще разглядеть не могу.

Хватит на первое время

[edward_freedom]

включи форматирование, когда на прод заливаешь, чтобы такого не было

<div
                  class="
                    features_container_flex_first_header
                    features_container_flex_second_header
                    whychoose_grid_header
                  "
                >

[Ярослав Александров]

Если уж верстать то лучше брать коммерческие макеты из заявок на биржах, желательно интернет-магазин.
1.Смотрите тут
https://validator.w3.org/nu/?doc=https%3A%2F%2Fapp...
2. ошибки в консоли браузера
3. проверяете по пунктам тут https://frontendchecklist.io/
4. адаптивности по факту нет, то что вы вместили макет в разрешение для телефонов не делает это адаптивным.
5. в блоке прайса три Н3 заголовка подряд, это не правильно
6. не заложена динамичность контента https://disk.yandex.ru/i/zAefb4EJr-cv9g
7. нет отступов https://disk.yandex.ru/d/lYgno30xlNkhbg

[David Gegiya]

edward_freedom, ничего не знаю, это мне prettier сделал автоматически :D

Answer 1

[AlexSaa]

Картинка есть на десктопе и это хорошо!, но уровень действительно начальный... То что разнёс по классам смысловую нагрузку это хорошо, но не знание адаптивности, что должно быть в head (meta name="viewport" content="width=device-width,initial-scale=1">) это конечно плохо. Обязательно изучить!
Мелочей относительно самой верстки с адаптивности – очень много. Только то что тексты прилипают к краю экрана, картинки налазят на текст перекрывая его – грубейшее нарушение.
Нужно посмотреть как пишется сетка и bootstrap, И обязательно написать свою, не копировать – понять!
Посмотреть что значит @media
Почему нигде нет :hover ?
Следующие шаги – это изучить препроцессор - scss, и подключить постпроцессор (цепляет префиксы, делает понятным стиле для почти всех cтарых браузеров)

Comments

[David Gegiya]

Сетка у меня и так css-овская, если убрать медиа запросы не дающие увеличиваться элементам, то можно увидеть её работу.
Не вижу никакого практического смысла для себя учить bootstrap.
Ховера не было в дизайне.
А за остальные советы спасибо!

[AlexSaa]

Davidaa_WoW, Ховера не было в дизайне.
В 80% случаев дизайнера всегда забывают про ховерное состояние, поэтому проявляете творчество и делайте ховер сами. Но не загоняетесь сильно в анимации – это никому не надо.