Can you rate the layout?

Question

Layout

Hello, can you evaluate my layout? One of the first works, namely the second layout and the first in which I used scss, it is not adapted for small or too large devices, my next layout will be with adaptation, but for now I want you to point me to the mistakes I made! Here is the link: https://c0ral0vii.github.io/twomaket/

Answer 1

Responsive will need a meta tag in the head

<meta name="viewport" content="width=device-width, initial-scale=1">

Styles for the container would not hurt, for example:

.container {
  width: 1920px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

navbar section:
replace floats with flexes, and height position align-items rather than margins
top-panel section:
Here you have margin-top on the section and margin-bottom on the sub-header. Replace with paddings at the section.
For sections, paddings are usually set, because if the anchor menu, then so that the text does not press straight to the very top, but there is space.
On the right side, the title, description and button have the right margin. Why give three elements when you can just give the parent a padding?
The button contains a link. Pick one. Buttons are usually used for some action, such as opening a mobile menu. To go to other pages, the anchor menu is a link.
Section Slider:
For slider arrows, I think position: absolute; well, center align
position: absolute; top: 50%; transform: translateY(-50%);
slider-bottom - give it a padding, not a paragraph margin
column-text section:
The distance between the heading and the image consists of the margins of both elements, it's better to define one..
Read More margin-bottom when explicitly asked padding for the parent, or alternatively the height for the slide/slider
Footer
Again, the margins of the elements, when the paddings of the parent or ancestor are preferable.
Use floats to wrap around images, and now flexes rule.
General advice
For flex and grid grids, here when how and how to whom. Study.
I suggest wrapping all img in a wrapper, you never know where you have to apply a translucent substrate, parallax or something else. You can for example in the picture tag
Try to avoid large nesting.
About the naming. Everyone recommends BEM, but it didn't work for me. Yes, and in layout the most difficult thing is to come up with names for classes)
Try not to prescribe styles for tags, today it's p, tomorrow it's span. Or the same element will be added, for which these styles are just not needed.
But it is clear that it depends on the situation. For example, menus usually refer to ul and li, because when stretching on cms, your classes will have to add or redo styles
In order not to write properties separated by commas, set a common class for each element of the same type. For example, for navbar-brand elements, navbar-brand__item would be suitable and it’s already otsupov
It seems that he didn’t advise any game, but still keep in mind that the situations are different, the taste and color of the felt-tip pens are also different

Answer 2

Almost passable, go to work