Задача №1

Есть ли ошибки в следующем коде?

span{
    float: left;
    display: inline-block;
    padding: 20px;
    margin: 0 20px;
}

Свойства display перекрывается свойством float, поэтому для позиционирования элемента нужно использовать одно из них.

Задача №2

Есть ли ошибки в следующем коде?

span{
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 0 20px;
}

Лишние свойства width, height, padding-top и padding-bottom

Задача №3

Посчитай высоту элемента.

span{
    width: 100px;
    height: 100px;
    margin: 0 20px;
    border: 1px solid transparent;
}

2px плюс высота контента элемента

Задача №4

Есть ли ошибки в следующем коде?

<div class="search">
    <input class="search__field">
    <button class="search__button">Найти</button>
</div>

1. форма сверстана тегом div
2. у input не указан type="search"
3. у input нет label
4. у input нет атрибута required

Задача №5

Есть ли ошибки в следующем коде?

<article class="article">
    <header class="article__header">
        <img class="article__img" src="..." alt="...">
        <h3 class="article__title">Бесплатная книга по HTML5</h3>
    </header>
    <div class="article__body">
        <p>.....</p>
    </div>
    <footer class="article__footer">
        <span class="article__author">Стас Мельников</span>
        <a href="..." class="article__readmore">Читать далее</a>
    </footer>    
</article>

Нет ошибок

Задача №6

Какие есть способы узнать является ли тег <label> строчным?

1. Посмотреть в инспекторе свойство display
2. Вставить на страницу два тега <label> и посмотреть, как браузер их отобразит
3. Задать свойство width/height

Задача №7

Как можно улучшить следующую форму?

<form class="form">
    <label class="label">
        <span class="hint">Введите ваше имя</span>
        <input class="field" name="fullname" placeholder="Например, Иванов Иван" required>
    </label>
    <label class="label">
        <span class="hint">Введите ваш email</span>      
        <input class="field" name="user-email" placeholder="Например, [email protected]" required>
    </label>
    <label class="label">
        <span class="hint">Введите ваш телефон</span>              
        <input class="field" name="user-phone" placeholder="Например, 000-000" required>
    </label>
    <button class="button">Отправить</button>
</form>

Добавить type="email" и type="tel".

<form class="form">
    <label class="label">
        <span class="hint">Введите ваше имя</span>
        <input class="field" name="fullname" placeholder="Например, Иванов Иван" required>
    </label>
    <label class="label">
        <span class="hint">Введите ваш email</span>      
        <input type="email" class="field" name="user-email" placeholder="Например, [email protected]" required>
    </label>
    <label class="label">
        <span class="hint">Введите ваш телефон</span>              
        <input type="tel" class="field" name="user-phone" placeholder="Например, 000-000" required>
    </label>
    <button class="button">Отправить</button>
</form>

Задача №8

Есть ли ошибки в следующем коде?

p{
    vertical-align: middle;
    padding: 20px;
    margin: 20px;
}

Свойство vertical-align лишнее.

Задача №9

С помощью каких способов можно сделать тег <span> блочным элементом?

1. Указать свойство display: со значением block
2. Применить к элементу float
3. Применить к элементу свойство position со значением absolute или fixed