Criticize the layout, what are the errors in it?

Question

Apache HTTP Server

People, criticize, pliz, layout:
dzn.16mb.com/fudi
My first adaptive layout (so far, manually, without bootstrap).
And look at JS, pls, there is not much of it.
You can take the layout for it here:
https://yadi.sk/d/5IwJMyZqht5jt
Shl. It would be great if the HTML / CSS / JS code was criticized))
zzy. Fixed the comments.

Answer 1

Use an object-oriented approach when writing HTML/CSS, name classes clearly (look at SMACSS & BEM, browse github, learn how modern frameworks are written). Get rid of unnecessary containers for which you do not write styles.
This is not necessary, it is enough to add an id with a name for the container.

Answer 2

Everywhere full width, but no footer.
Recipe pictures - make it smooth when the cursor leaves, not sharp.
The text after the pictures of the recipes is difficult to read in this form. Make in the form of 3 columns as above.

Answer 3

“so far manually, without bootstrap” - what makes you think that adaptive layout, and layout in general, is necessarily done with Bootstrap? This is a completely unnecessary CSS framework, which for some reason everyone shove everywhere.

Answer 4

1. The logo does not deviate from the borders when the screen narrows and does not look like in the full version.
2. It is desirable to give some kind of animation to the top menu (on hover).
3. When hovering over "GET STARTED" it smoothly switches to a white background, but as soon as I remove the mouse, the color becomes sharply according to the standard. To be honest, it's not cool.
4. Image size of the first slide, larger than my screen. And it seems to adapt to any screen size.
5. The bottom block, the very last one (gray), you have some narrowed one too. And the text inside it.

Answer 5

You did well.
Here I noticed that the text runs into the arrows: take.ms/W0T40

Answer 6

1. The menu by the button on the top right with small (600-900px in width) extensions is not on top of everything.
2. text-shadow is very difficult to read the text. Either remove it or make the text itself brighter.
3. In the carousel with reviews, the text goes under the controls with small extensions.
4. There are not enough hovers (for example, as on GET REWARDED) on the menu items from above.
And in general, very good.

Answer 7

Also note that the site is not adapted for iPhone 4 joxi.ru/MAj7XWpHpOe1re and not only. Horizontal scrolling appears on most mobile devices.