Прошу оценить испытание 27/32 и совета

Курсы §15. Сетки
1

Всем привет, наконец я присоединился к тем кто прошёл это испытание на 100%, но внутри остался осадок, потому что под конец уже действовал методом тыка и подбора… внутренне понимаю, что походу много косяков, поэтому прошу более опытных наставников оценить, подсказать, да или просто покритиковать… заранее всех благодарю, напоминаю, что я только учусь и да, с названиями классов у меня беда…

вот собственно сам код:

<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="blok1">
            <div class="layout-positioner">
                <div class="Header"><p class="slovo1">Header</p></div>
                
                    <div class="Menu"><p class="slovo">Menu</p></div>
                    <div class="blok">
                        <div class="Promo1"><p>Promo 1</p></div>
                        <div class="Promo2"><p>Promo 2</p></div>
                    
                </div>
            </div>
        </div>
        <div class="layout-positioner">
            <div class="blok">
                <div class="feature Left"><p>Left</p></div>
                <div class="feature Main"><p>Main</p></div>
                <div class="feature Right"><p>Right</p></div>
            </div>
        </div>
        <div class="blok1">
            <div class="boxx">
                <div class="layout-positioner">
                    <div class="Footer"><p class="slovo2">Footer</p></div>
                </div>
            </div>
        </div>
    </body>
</html>

и стили
html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}

.layout-positioner::after {
display: table;
content: “”;
clear: both;
}

.blok1 {
background: #34495e;
padding-top: 5px;
}

.Header {
width: 350px;
margin-top: 5px;
background: #c0392b;
height: 35px;
margin-left: auto;
margin-right: auto;
}

.Menu {
width: 450px;
clear: both;
background: #3498DB;
margin-top: 10px;
height: 35px;
}

.blok {
width: 350px;
margin-left: auto;
margin-right: auto;

}

.boxx {
width: 350px;
height: 30px;
margin-left: auto;
margin-right: auto;

}

.Promo1 {
float: left;
width: 170px;
background: #c0392b;
margin: 10px 5px 10px 0;
height: 60px;
}

.Promo2 {
float: right;
width: 170px;
background: #c0392b;
margin: 10px 0 10px 5px;
height: 60px;
}

.feature {
float: left;
width: 70px;
height: 110px;
background: #3498DB;
margin-top: 10px;
margin-bottom: 10px;
}

.feature:nth-child(2n) {
width: 190px;
margin-left: 10px;
margin-right:10px;
}

.footer {

}

p {
margin: 5px;
}
.slovo {
padding: 5px 50px;
}

.slovo1 {
margin: 0;
padding: 5px
}
.slovo2 {
margin: 0;
padding: 0 5px
}

2

недостающая часть сверху

(div class=“blok1”)
(div class=“layout-positioner”)
(div class=“Header”)(p class=“slovo1”)Header(/p)(/div)
(div class=“Menu”)(p class=“slovo”)Menu(/p)(/div)

3

Про названия классов вы сами сказали - транслит использовать нежелательно.
Можете пользоваться списком самых употребляемых названий.

1 лайк
4

ОООО, спасибо!!! особенно за список названий!!!

5

а как исправить это?

6

Что исправить?

7

Можно оценить мой код, писал сам, вспомнил что мог из всех курсов, методом тыка все делал, не знаю правильно ли это. Просто дайте критику и оцените грамотность кода пожалуйста.

Испытание: строим сетку 
        <div class="fon1 clearfix" style="padding-top: 10px;" >
    <div class="header">Header</div>
    <div class="menu">Menu</div>
    <div class="Promo1">Promo 1</div>
    <div class="Promo2">Promo 2</div>
        </div>
        <div class="fon2 clearfix" style="padding-top: 10px;">
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right</div>
        </div>
        
    <div class="footer">Footer</div>

and style.css

html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}

.header {
background-color:#c0392b;
min-height: 30px;
padding-left: 5px;
padding-top: 5px;
margin-bottom: 10px;
width: 345px;
margin-left: 50px;

}

.menu {
background-color:#3498db;
min-height: 30px;
padding-left: 55px;
padding-top: 5px;
margin-bottom: 10px;
}

.Promo1{
background-color: #c0392b;
width: 165px;
height: 55px;
float: left;
margin-left: 50px;
margin-bottom: 10px;
padding-left: 5px;
padding-top: 5px;
}

.Promo2 {
background-color: #c0392b;
width: 165px;
height: 55px;
float: right;
margin-right: 50px;
padding-left: 5px;
padding-top: 5px;
}

.fon1 {
background-color: #34495e;
}

.clearfix::after {
content: “”;
display: block;
clear: both;
}

.left {
background-color:#3498db;
width: 65px;
float: left;
height: 105px;
margin-left: 50px;
padding-left: 5px;
padding-top: 5px;
}

.main {
background-color:#3498db;
width: 185px;
float: left;
height: 105px;
margin-left: 10px;
padding-left: 5px;
padding-top: 5px;

}

.right {
background-color:#3498db;
width: 65px;
float: right;
height: 105px;
margin-right: 50px;
padding-left: 5px;
padding-top: 5px;
}

.fon2 {
background-color: white;
}

.footer {
background-color: #34495e;
min-height: 40px;
padding-left: 5px;
padding-top: 5px;
margin-top: 10px;
padding-left: 55px;
}

8

Сделайте оценку кода пожалуйста