Что не так с моим кодом, и как это изменить?

Question

[your-brother]

Сверстал макет, но он кажется слишком громоздким, как сделать его другим- не знаю. Верстал после прочтения нескольких книжек и просмотра видеороликов.
Просьба о помощи. Хотел бы услышать конструктивную критику и советы. В моём окружении нет людей, которые имеют отношение к веб-разработке, поэтому не у кого просить совет.
шаблон в формате PSD
Результат

Answer 1

[Mr Crabbz]

1. Привыкайте выкладывать превью вашей верстки в сервисы по типу codepen, jsfiddle или github pages. Никто не будет клонировать вашу верстку на локальный ПК, чтобы что-то там проверить.

2. Привыкайте давать осознанные, читаемые id и class. В более сложной верстке вы потом сами забудете какой класс или id у вас за что отвечает. У вас сейчас так:
<figure id="h">

3. Если у вас пустая ссылка - в href ставьте #. Таким образом вы избежите неожиданностей в виде внезапно изменившегося стиля ссылки в случае, если ваш макет внезапно пойдёт в продакшн и ссылки реально будут вести на какую нибудь страницу. У вас так:

<a href="" class="twit"></a>

4. Приступайте к более сложным макетам.

Comments

[Одиночка Айс]

Если у вас пустая ссылка - в href ставьте #.

- лучше #!, тогда хоть на верх страницы кидать не будет

[your-brother]

спасибо большое. продолжу работу.

[Антон Литвиненко]

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

[your-brother]

Anton Litvinenko, спасибо большое, учту при нынешней вёрстке.

Answer 2

[NaN]

1) У тега html нет lang.
2) Почитайте про различные мета теги, для чего нужны и как использовать. (так же в консоли во вкладке аудит можно посмотреть свои ошибки)
3) Проверьте код валидатором и исправьте то, что будет
4) Пока не поздно - изучите БЭМ. Это упростит верстку и все встанет по полочкам (либо другую методологию). Соответсвенно уйдут стили на теги и id.
5) Настройте свлю среду разработки на авто форматирование кода, почитайте рекомендации (мне нравится от airbnb)
6) Вместо картинок попробуйте подключать иконочные шрифты, либо используйте svg, либо спрайт из иконок png. (но на данном этапе это не приципиально)
7) Посмотрите список форматов шрифтов, которые нужны для разных браузеров и, собственно, подключите их по вашим требованиям.
8) Старайте не писать все стили в одном файле (на будущее почитайте, например, sass 7-1 pattern)

Если есть вопросы, пиши (контакты в профиле)

Comments

[your-brother]

Спасибо большое, обязательно обращусь.