IT-Мастер
Чем margin отличается от padding?
Margin — внешний отступ, padding — внутренний
<img src="cat.jpg">
Код работает, но какой важный атрибут желательно добавить?
alt
<img src="cat.jpg" alt="Кот">
<h1>Hello</h1>
Что появится на странице?
Большой заголовок Hello.
Назовите 10 HTML-тегов за 17 сек
окей
Вся команда должна показать руками, телом символ не повторяя друг друга:
< >
Если получилось — +100 баллов
Объясни разницу между HTML, CSS и JavaScript одним примером.
JavaScript одним примером.HTML — структура, CSS — внешний вид, JavaScript — действия/логика
.box {
width: 200px
background-color: red;
}
После 200px пропущена точка с запятой ;.
p {
color: red;
}
Что произойдёт?
Текст всех элементов <p> станет красным.
Один участник должен объяснить слово
сss
Команда выбирает:
A) Забрать +150 баллов сразу.
B) Ответить на сложный вопрос и получить +400, но при ошибке −300.
Какой CSS-селектор используется для class?
. — точка.
Во всем мире 4 апреля отмечают неофициальный «День веб-мастера» (праздник всех, кто создает сайты). Дата выбрана не случайно: если записать ее цифрами, получится самая известная ошибка в интернете, когда страница не найдена. Какое это число?
404 (4-й день 4-го месяца = ошибка 404).
<a href="google.com">Google</a>
Что лучше исправить, чтобы ссылка была полной?
<a href="https://google.com">Google</a>
.box {
width: 100px;
height: 100px;
border-radius: 50%;
}
Какую форму получит квадратный .box?
Х2 ИЛИ НОЛЬ правильно — ваши баллы удваиваются, неправильно — теряете 500 баллов.
Круг
⚔️ ДУЭЛЬ
По одному игроку от двух команд выходят к доске.
Задание: За 30 секунд написать как можно больше правильных HTML-тегов.
Побеждает тот, у кого больше правильных тегов.
потеряйте 300 баллов… или передайте бомбу другой команде, но сначала ответьте на вопрос, но при условии если вы неправильно ответите на вопрос теряете уже 450 баллов
«Position Battle». Объясните разницу между:
position: relative;
position: absolute;
position: fixed;
relative — остаётся в обычном потоке и может смещаться; absolute — убирается из обычного потока и позиционируется относительно ближайшего позиционированного предка; fixed — фиксируется относительно окна браузера.
Какое животное, согласно легенде, стало причиной появления популярного слово, когда в 1947 году оно залетело внутрь огромного компьютера и закоротило контакты?
Мотылек (или бабочка / насекомое). Его буквально достали пинцетом из реле и вклеили в технический дневник.
<div class="card">
<h2>Spider-Man</h2>
</div>
CSS:
#card {
background-color: red;
}
В HTML используется class="card", поэтому в CSS нужно .card, а не #card.
button:hover {
transform: scale(1.2);
}
Что произойдёт при наведении мыши?
Кнопка увеличится.
Крикни слово codify так громко чтобы
Шумомер-онлайн для проверки шума достигло 120
гуд гууд
ФИНАЛЬНЫЙ БОСС
Команда выбирает одного игрока.
За 60 секунд он должен объяснить:
Как создаётся сайт от начала до конца?
(6 категории)
Полный ответ
В хорошем ответе должны прозвучать:
— 500 баллов.
В старых версиях операционной системы Windows (вплоть до Windows 7) на каждом компьютере были установлены стандартные игры — «Косынка» (Solitaire) и «Сапёр» (Minesweeper).
Многие думают, что компания Microsoft добавила их просто ради развлечения офисных сотрудников. Однако у этих игр была секретная, важнейшая обучающая цель для всех пользователей ПК того времени.
Чему именно эти игры тайно учили людей, пока те взрывали мины и перекладывали карты?
Они учили людей пользоваться компьютерной мышкой!
«Косынка» была придумана, чтобы научить пользователя технике «перетаскивания» (Drag and Drop), когда нужно зажать левую кнопку мыши и перенести карту в другое место.
«Сапёр» учил людей нажимать левую и правую кнопки мыши быстро и без путаницы (левой — открыть ячейку, правой — поставить флажок), а также развивал точность наведения курсора на мелкие объекты.
В начале 90-х годов мышка была для людей совершенно новым и непонятным гаджетом, а игры помогли привыкнуть к ней в игровой форме!
header .container{
justify-content:space-between;
align-items:center;
}
В чем заключается баг и какого свойства не хватает в этом коде, чтобы верстка заработала правильно?
display:flex;
Без display: flex; браузер их просто игнорирует, и элементы ведут себя как обычные блочные или строчные компоненты.
.container {
display: flex;
justify-content: center;
align-items: center;
}
Что делают эти свойства?
flex включает Flexbox, justify-content выравнивает по главной оси, align-items — по поперечной. В стандартном flex-direction: row элементы будут центрированы горизонтально и вертикально внутри контейнера.
За 60 секунд создайте:
500 баллов, если структура правильная.
подарите 200 баллов любой команде. Отказаться нельзя
200