{9/18} Прошу проверить код на оптимальность (100%).

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

Здравствуйте. Оцените пожалуйста код на оптимальность. Спасибо.

HTML:

CSS:

body {
width: 280px;
min-height: 280px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
font-family: “Arial”, sans-serif;
line-height: 1.2;
background: #ecf0f1; }

.course-card {
padding: 20px;
width: 200px;
color: white;
background: #1abc9c; }

.course-card h1 {
margin: 0;
font-size: 20px;
font-weight: normal; }

.course-card p {
margin-top: 20px;
margin-bottom: 25px; }

.social {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 5px;
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat;
vertical-align: middle; }

.social-fb {
background-position: 0 0; }

.social-tw {
background-position: -30px 0; }

.social-gp {
background-position: -60px 0; }

2

Уделите больше внимания адресам ссылок. Каждая ссылка начинается с http://

3

Спасибо.

4

Что-то не так с пикселями… В чём проблема???

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

body {
width: 280px;
min-height: 280px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
font-family: “Arial”, sans-serif;
line-height: 1.2;
background: #ecf0f1;
}
.block {
width: 200px;
background-color: #1abc9c;
padding: 20px;
color: #ffffff;
}
.social {
display: inline-block;
width: 30px;
height: 30px;
background-color: #16a085;
margin-left: 5px;
margin-top: 5px;
margin-bottom: -3px;
}
span {
font-size: 20px;
}
p {
white-space: pre;
padding: 6px 0;
}
.facebook {
margin-left: 0px;
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat 0 0;
}
.twitter {
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat -30px 0;
}
.google {
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat -60px 0;
}

5

Разметку в студию.

6

Вместо ‘h1’ - ‘span’. ‘div’ с классом ‘.block’. В ‘p’ переносы строк сделаны ‘br’.

7

<br> - плохо. Лучше ограничить ширину родителя. Не забывайте, что у текстовых тегов есть отступы по умолчанию, и внешние, и внутренние. Их лучше сбрасывать, чтобы не было проблем с кратностью пяти.

8

Хорошо, попробую по колдовать без < br >…

9

Добрый день. Посмотрите и мой код, пожалуйста. Что можно и нужно исправить.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Испытание: карточка курса</title>
</head>
<body>
<div class="text">
<p>Курс &laquo;Фоны&raquo;</p>
Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.
</div>
<div class="icon">
    <a class="social f"></a>
     <a class="social t"></a>
     <a class="social g"></a>
</div>
</body>
</html>

html,

body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 280px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
font-family: “Arial”, sans-serif;
line-height: 1.2;
background: #ecf0f1;
}

/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адрес картинки-спрайта:
/assets/course14/social-challenge.png
*/

div {
color: white;
background: #1abc9c;
width: 200px;
padding: 20px;

}
.icon {
padding-top: 5px;
}
p {
margin: 0;
font-size: 20px;
font-weight: normal;
margin-bottom: 20px;

}
.social {
background: #16a085 url(’/assets/course14/social-challenge.png’) no-repeat;
display: inline-block;
width: 30px;
height: 30px;
margin-right: 5px;
vertical-align: middle;

}
.f {
background-position: 0 0;
}
.t {
background-position: -30px 0;
}
.g {
background-position: -60px 0;
}

10

"Курс “Фоны” - это заголовок, а вот текст ниже - это как раз абзац. Используйте семантически правильные теги.

1 лайк
11

+ href для ссылок