Какие у меня ошибки в верстке?

Question

[gleendo]

В общем, занимаюсь я версткой, занимаюсь долго, ну как занимаюсь, просто кручусь в этой области, особых результатов нет. И так вот, что то у меня бывает получится просто круто (какой то блок или элемент отдельно), а что то, если начинаю верстать макет полностью, получается (вернее не получает никак) плохо.
И так вот надоело просто крутиться, хочется нормально уже научиться верстать и зарабатывать на этом хоть что то.

В общем начал. Взял макет. И как стоило ожидать, все очень плохо.

Укажите пожалуйста на ошибки в верстке шапки. Прошу вас. Просто нервы уже не выдерживают от непонимания как правилно что верстать. Кажется уже что это не мое и хочется уже все бросить (но желание верстать есть)

Вот макет psd - https://cloud.mail.ru/public/DDgP/yWuFegh7K
Вот проект верстки - https://cloud.mail.ru/public/KSRP/gad9FwX5J
Вот "сверстанная" шапка - header-code.surge.sh
Вот картинка макета (для тех кто не захочет скачивать):


PS. Что вызывает у меня такой вопрос. Какие моменты:
1) Что так трудно то работать со шрифтами???
2) Как позиционировать лого и соц блок
3) Как правильно верстать слайдер (его структура) ?
4) Как определить высоту блока (header)? Стоит ли ее делать во всю высоту видимой области или фикс как в макете?
5) Стоит ли здесь делать лого картинкой или сделать текстом?
6) И вообще накидайте если не сложно общую структуру (html) этого блока. Просто непонятно как например верстать, надо ли заключать лого и соц блок в контейнер или не надо.

Вот как то так. Извините если что, но просто у меня уже нервов нехватает ничего не понимать. Хочу встать на путь истинный и все таки научиться нормально верстать. Жду ваших рекомендаций.

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

PSS. Всем спасибо кто ответил более менее развернуто. Закрыл для себя некоторые непонятности, с подобными макетами все стало понятно. Осталось разобраться с svg графикой и оптимизацией картинок, а так думаю пока что все идет более менее норм. Мда, нужно было давно уже хоть что то у кого нибудь спросить если непонятно что то в верстке.
На основе выше описанной верстки, немного изменив, получился вот такой вот header - awesome-web.surge.sh

Answer 1

[Danila]

"В общем, занимаюсь я версткой, занимаюсь долго"
Что вы понимаете под "долго", это месяц или пол-года/год? Если так, то дела ваши плохи, скорей всего у вас просто нет желания, потому что есть люди которые через 3-5 дней изучения html/css начинают уверенно верстать макеты, конечно не без ошибок, но всё же.

1) Что так трудно то работать со шрифтами???
- не совсем ясно в чем у вас трудность.
2) Как позиционировать лого и соц блок
- В вашем случае флоатами, или флексбокс ( лучший вариант, две строчки кода и все прекрасно работает ), но НЕ абсолютным позиционированием, как реализовано у вас
3) Как правильно верстать слайдер (его структура) ?
- за работоспособность слайдера отвечает жс, вам бы посоветовал для начала разобраться с разметкой и css.
4) Как определить высоту блока (header)? Стоит ли ее делать во всю высоту видимой области или фикс как в макете?
- в вашем случае min-height: 600px будет достаточно
5) Стоит ли здесь делать лого картинкой или сделать текстом?
- лого всегда картинка, обернутая в ссылку

Могу вам посоветовать две вещи, это пользоваться инструментом разработчика в браузере и смотреть как сделаны те или иные сайты, со временем подобные, вводящие вас в ступор вопросы отпадут. Постоянно читайте статьи, о новых технологиях, стандартах и всё что связанно с вашим направлением, даже если вы ничего не понимаете, расширяйте кругозор. И практика важней всего, иначе вы никуда не сдвинетесь.

По верстке: позиционирование хедера я сказал, для футера в html5 есть свой тег footer, используйте его, а не section.footer, и не совсем ясно зачем вам clearfix в контейнере, если вы не используете флоаты. Здесь мало что можно сказать, сделайте работу хотя-бы на 50%, как сможете, а там и показывайте.

Answer 2

[Дмитрий]

1) Что так трудно то работать со шрифтами???
В чем сложность? В конвертации?
Для этого есть спец. сервисы для конвертации (использую в основном эти)
- https://www.fontsquirrel.com/tools/webfont-generator
- https://fontie.flowyapps.com/home

2) Как позиционировать лого и соц блок
Варинтов позиционирование много.
Задаете общий контейнер, позиционируете внутренние блоки с помощью:
- float(не забывайте использовать clearfix)
- display: inline-block
- display: flex

3) Как правильно верстать слайдер (его структура) ?
В принципе такой слайдер можно сделать на css.
Пример

4) Как определить высоту блока (header)? Стоит ли ее делать во всю высоту видимой области или фикс как в макете?
Высота завит от высоты блока макета (В вашем случае 600px)

5) Стоит ли здесь делать лого картинкой или сделать текстом?
Лучше изображением svg

6) Приблизительная структура
Пример

Используйте спрайты, оптимизируйте изображения
header-code.surge.sh/img/header-background.jpg
вот это изображение у вас весит ~ 630Kb - это слишком много