Is the layout of my site good?

Question

code review

Here is the link to the code https://github.com/nikitaden03/Bulgaria

Answer 1

Yes, it looks very good. Including small mobile screens. But w3c validator swears at some subtleties, for example,

<input type="mail" class="form__input" required placeholder="E-mail">

because no such type exists. You can see for yourself what he doesn't like: validator.w3.org

Answer 2

In fact, not everything is so good if you stick to the BEM methodology. Just looked at the markup:

Answer 3

Immediately, I note that I looked only at the main page.
The HTML code as a whole looks quite clean, PHPStorm only complains about the ul inside the menu which is really not allowed . The forced animation on all elements is
somewhat embarrassing . I don't think that browsers, especially mobile ones, will be happy with such styles. In addition, it leads to at least very strange menu jumps when passing through 1200px. The desktop menu does not align vertically. for menu blocks and phones in the header, "alignment" via margin-top is used, rather than normal alignment via flexbox with align-items: center.
The blocks in the "Our Benefits" section lack at least horizontal paddings, which causes the text in the blocks to stick to the borders of the containers. In the same block, letter-spacing was lost in the main header and block headers (I didn’t measure it, you can see it by eye). With a width less than 980px, the blocks go off the screen, apparently not completed yet.
The block "Moving to Bulgaria" is completely broken at a width of 980..1200px, and even narrower - some of the elements are out of alignment. The .move__how block has the same horizontal padding problem as the block above.
Property block - same problem with centering (button), letter-spacing and horizontal padding.
By the way,here .
Feedback block: left/right navigation icons don't match the layout, obviously taken from font-awesome even though they are different in the layout. By the way, the same applies to the "fa-angle-down" icon, it's also not from font awesome in the layout. The vertical position of the navigation icons does not match the layout (the paginator block should not be taken into account). In-block padding and letter-spacing seem to be a common sore point. Due to the fact that the 3 elements of the review header are not combined into a common container, there is a problem with alignment and without a container, it is treated not quite trivially. The arrow in "Moscow -> Sofia" does not match the layout.
Form block: :focus state is not implemented (in the layout it is E-mail), below 768px the form elements stick to the edges of the screen without any padding. The block's bottom darkening gradient is missing. The down arrow icon doesn't fit the layout (here and elsewhere). The style of the button differs from the layout (border and font style)
Separate large fi - graphics and general relation to resource sizes:

• 4.5 megabytes of images in PNG, are you serious? Banal optimization through optipng / pngout gives almost 800kb. Two background pictures take a total of 3.5 megabytes, although they are in JPEG at 85% quality and optimized through guetzly give 225kb, and you can shrink even more. city.png is an almost completely transparent image used exclusively on a white background - why is it in a PNG with an alpha channel? JPEG + guetzly gives 43kb vs 376kb.
  
• 4 fonts, with sizes of 100 and 900, although there are at least 400 more on the page, 700 glyphs each! Why are they there if you have Russian and Latin on your site? Subsetting in Font Squirrel already cancelled? At the same time, two italic fonts, although italic is actually used at the moment only in the comment text (100 thick), why?
  
• All layouts use a total of 4 different font icons (3 arrows and a "lifebuoy"), while the arrows, as described above, do not match the layout. And for this, all 1145 (!) font awesome icons are loaded with a total volume (at best) of almost 100kb. Of course, the Internet is fast today, but why like this right away?
  
• All pages load the entire Bootstrap 3.3.7 (almost 120kb of CSS) for the sake of the Bootstrap grid? Does it take 3-5kb at best, and the rest is not used? In this case, loading CSS is a blocking operation i.e. The render stops while the CSS is loading.