Оцените верстку?

Question

[salik123]

Дайте оценку моей первой верстке. Сообщите об ошибках (я чувствую их много, думаю, я не до конца понял позиционирование), жду полезных советов от опытных в этом деле. Заранее огромное спасибо!
Папка с файлами

Comments

[Модератор]

Вы нарушаете пункт 3.8 правил:

3. В процессе создания вопроса пользователь Сервиса обязан:
3.8. Использовать для демонстрации фрагментов кода только специальный тег <code> или специальные демонстрационные ресурсы (например, JsFiddle - https://jsfiddle.net/). Размещение фрагментов кода в виде изображений запрещено.

Выложите вашу вёрстку в песочницу и добавьте в вопрос с помощью соответствующего виджета.

[Lord_Dantes]

Ага щасб вот так вот все взяли и 126 человек (на данный момент) скачали вашу папку и посмотрели верстку.
Загрузите на хостинг.

На тостере никто не кидает файлы.

Answer 1

[Анита Ковалева]

Ошибок довольно много. Из тех что я увидела:

1. Ваш контент не центрирован, используйте нативный центровщик либо библиотеки типа Bootstrap4, делайте отдельный div и закидывайте его туда, сейчас ваш контент расползается, и это учитывая то, что у вас просто Desktop версия, не адаптивная.
   
2. Название классов - когда вы пишите код, старайтесь использовать методологию, например БЭМ, пишется не header_menu_button, а примерно header__menu-button, header__menu-button--active, 2 нижних подчеркивания это элемент, две черты после элемента - модификатор, и ваш код будет более читабельный.
   
3. Старайтесь думать о том что бы не писать код 2 раза, если ваша кнопка на сайте будет повторяться 2 раза, то для кнопки пишется базовый стиль допустим site-button, а в header__menu-button вы уже дописываете стили позиционирования и в итоге ваша конструкция имеет вид
   
4. Научитесь использовать правильную вложенность, вы должны представлять сайт как лего, правильно перебросив контент по блокам, так как если у вас будет адаптивная верстка, вам нужно продумывать еще и адаптацию этих блоков к экранам с меньшим разрешением.
   
5. И последнее, скачайте какие нибудь платные курсы - бесплатно, допустим HTML Academy или другой конторки обучающей новичков, и вам будет легче учится верстать правильно
   

Answer 2

[Алекс Глебов]

Нормально для первого раза

Absolute и relative старайся не использовать (для сдвига блоков), делай позиционирование через flex и отступы.

Не смотри на верстку как на плакат. Контент там еще изменится, блоки могут передвигаться. Верстка от этого ломаться не должна.

тык