9/18 100% оцените код пожалуйста)

Курсы §14. Мастерская: декоративные элементы
1

Прошу оценки. Много раз видел как тут указывают на недостатки людям у которых 100%. Также хочу критики со стороны) заранее спасибо)

<!DOCTYPE html>
  <body>
    <div class="block">
      <h2>Курс «Фоны»</h2>
      <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
      <a href="#" class="vk"></a>
      <a href="#" class="tw"></a>
      <a href="#" class="go"></a>
    </div>
  </body>

Это CSS:

body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 280px;
padding-top: 20px;
padding-left: 20px;

font-size: 14px;
line-height: 1.2;
font-family: “Arial”, sans-serif;

background-color: #ecf0f1;
}
.block{
width:200px;
background:#1abc9c;
padding:20px;
color:white;
}
.block h2{
font-weight:normal;
font-size: 20px;
padding:0;
margin:0;
}
.block p{
padding:20px 0;
margin:0;
}
.block a{
display:inline-block;
width:30px;
height:30px;
vertical-align:middle;
margin-right:5px;
margin-top:5px;
background-color:#16a085;
background-image:url(“social-challenge.png”);
background-repeat:no-repeat;
}

.vk{background-position:0 0;}
.tw{background-position:-30px 0;}
.go{background-position:-60px 0;}

2

Хороший код, ошибок нет. Единственный момент, для ссылок соцсетей обычно делают блок-обертку. Так удобнее потом располагать элементы и передвигать сразу группой. То есть по вашему коду margin-top:5px; было бы написано для родителя ссылок, а не для каждой ссылки в отдельности.

3

Спасибо. Учту Ваш совет.

4

Какой из этих двух контейнеров лучше-хуже?

<div class="social">
  <a href="#" class="vk"></a>
  <a href="#" class="tw"></a>
  <a href="#" class="go"></a>
</div>

<p class="social">
  <a href="#" class="vk"></a>
  <a href="#" class="tw"></a>
  <a href="#" class="go"></a>
</p>
5

Определённо ‘div’, но не ‘p’ точно. Всё таки ‘p’ это только абзацы и в основном его только так и используют.

6

Вот здесь такое увидел: https://github.com/efiand/kvast/blob/master/index.html, поэтому и спрашиваю…

7

Оба варианта правильные. Там же чуть другая разметка. В коде ссылки есть еще span с текстовым содержимым.
И если не брать в расчет стили (что ссылки будут блочно-строчными, у каждой будет своя иконка и т. д.), то с точки зрения разметки все семантически верно: абзац и внутри три текстовых ссылки.
Хоть раньше такого варианта видеть не приходилось, но он явно оправдан и хорошо продуман.

1 лайк