Задачки

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

Задача №1

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

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

Задача №2

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

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

Задача №3

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

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

Задача №4

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

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

Задача №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> строчным?

Задача №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>

Задача №8

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

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

Задача №9

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

Задача №10

Дана разметка:

<div class="content">
    <div class="block">Плавающий блок</div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur magnam ducimus cumque reiciendis laborum qui, dolorum ipsum reprehenderit eligendi eos.
    </p>
</div>

Будет ли обтекать текст элемент с классом .block? Элементы в примере имеют следующий CSS:

.content{
    position: relative;
}

.block{
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background-color: tomato;
}

Задача №11

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

.block{
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background-color: tomato;
}

Задача №12

Чему будет равняться ширина элемента .block в следующем коде?

.parent{
  display: flex;
}

.block{
  flex-basis: 250px;
  width: 180px;
  height: 200px;
  min-width: 150px;
  max-width: 225px;
}

Задача №13

Чему будет равняться ширина элемента .block в следующем коде?

.parent{
  display: flex;
  flex-direction: column;
}

.block{
  flex-basis: 250px;
  width: 200px;
  height: 200px;
  min-width: 150px;
  max-width: 225px;
}

Задача №14

Чему будет равняться ширина элемента .block в следующем коде?

.parent{
  display: flex;
}

.block{
  flex-basis: 250px;
  width: 180px;
  height: 200px;
  min-width: 150px;
  max-width: 225px;
  position: absolute;
}