Сверстал первую часть макета, и пожалуйста, можете дать советы, по оптимизации/улучшении моего кода?

Question

[Бержан Алишер]

Сверстал по макету первый раздел, и почему-то мучает вопрос, что я неправильно сделал этот раздел. А именно, что получился говнокод, неправильное применение тегов, и свойств.
Если в моем коде есть говнокод, то пожалуйста подскажите, как сделать его лучше. Снизу будет 2 скриншота, и мой код (1-й скрин: моя верстка) (На 2-ом, сам PSD макет)



И вот, сам код:
https://jsfiddle.net/Berzhan_Alisher/5o4fbvrk/1/

Сама верстка сырая, и слабо соответствует макету. Но со временем, буду дорабатывать

Comments

[Flying]

Судя по скриншотам результат отличается настолько, что смотреть в код смысла вообще нет

[Бержан Алишер]

Flying, Я как раз-таки понимаю это, но мои знания не позволяют сделать его лучше. Может вы знаете, как его улучшить?

[Ankhena]

Скажите, а вы сами-то песочницу смотрели? Она совсем не похожа не то что на макет, даже на ваш скрин ;)

Никто в верстке прямоугольники не вставляет картинками, а тем более контентными.

[Бержан Алишер]

Ankhena, а вместо прямоугольников что вставляют тогда? Или же сами создают?

[Ankhena]

Бержан Алишер, background-color разумеется

[Бержан Алишер]

Ankhena, Спасибо! Применю данный совет

[Undefined User]

Я этот макет верстал очень давно, мой первый сверстанный сайт
https://enygf.github.io/
На, посмотри что и как я делал, но у меня тоже не идеально. Я тебе больше скажу, сейчас мне стыдно на этот код смотреть, но что-то полезное ты точно там найдешь. Ну я надеюсь...

[Дмитрий]

Бержан Алишер, рекомендую два-три любых видео flexbox на ютубе посмотреть сперва.

[Бержан Алишер]

Undefined User, Крутяяяяк! Обязательно посмотрю.