Ответы на вопросы из коллекции "Веб-технологии и верстка" на СтудИзбе

Добавьте ещё один файл в репозиторий. Зафиксируйте изменения. Отправьте изменения на сервер. Убедитесь, что новый файл появился в удалённом репозитории на GitHub.
После каждого шага необходимо выполнить команду ..., чтобы убедиться в синхронизации веток master на локальном компьютере и удалённом сервере и фиксации изменений.
Впишите название команды:

Вы разрабатываете приложение для продажи товаров для животных PetFriends. Ваши файлы под версионным контролем. В ветке master находится стабильная версия регулярных акций.
Для создания страницы со специальными предложениями, приуроченными ко дню защиты морских свинок, вы создали ветку MS-200 и отладили код новых акций. Вам необходимо добавить код новых предложений к уже существующим.
Ваши действия?

• Ничего делать не буду. Ведь ветка MS-200 была создана от master, в которой уже был на тот момент стабильный код. Её и продолжу использовать.
• Сделаю слияние веток командами git checkout master и git merge MS-200
• Сделаю слияние веток командой git merge master
• Сделаю слияние веток командой git merge MS-200

Сейчас вы находитесь на ветке master. Измените один из файлов и выполните команды для подготовки файлов и фиксации изменений.
Переключитесь на ветку testbranch00 и проверьте содержимое того файла, который вы меняли в ветке master.
Есть ли изменения, которые вы только что сделали в этом файле:

Переключитесь на ветку master и выполните команду dir, если вы работаете в Windows или ls для других ОС. Видите ли вы только что созданный вами файл в списке файлов?

Вы находитесь на ветке new-feature, которая ранее была создана в репозитории. Напишите команду, которая вливает ветку hot-fix в ветку new-feature

Что делает команда git branch ?

• Создаёт новую ветку или переключается на другую
• Создаёт новую ветку и переключается на созданную
• Создаёт новую ветку
• Делает master текущей веткой

Какой флаг в команде git commit можно использовать, чтобы изменить название уже созданного коммита, если была допущена ошибка?

• -am
• -m
• --amend
• -change
• -rename

Какая команда добавляет изменения из рабочей директории в область подготовленных файлов?

• git commit
• git add
• git push
• git pull

Какая версия проекта расположена в рабочей директории?

• Самая последняя
• Конкретная выбранная версия
• Все версии из истории лежат в рабочей директории

Где в Git расположены файлы, в которых вы сделали какие-то изменения, но специально не помечали для добавления в коммит?

• В рабочей директории
• в Git-репозитории/директории
• В области подготовленных файлов

Обязательно ли для работы с Git иметь доступ к серверу или другому компьютеру?

• Да
• Нет

Напишите команду, которая используется для определения того, какие файлы в каком состоянии находятся.

Что позволяет делать распределённая система контроля версий?

• Одновременно работать с одним файлом нескольким разработчикам
• Оптимизировать размер файлов
• Сохранять предыдущие версии документа
• Производить код-ревью
• Возвращать отдельные файлы к прежнему виду
• Загружать проекты в сеть для демонстрации заказчику

Можно ли разрабатывать одновременно по подходу Progressive Enhancement и Graceful Degradation?

Progressive Enhancement отличается от Graceful Degradation тем, что...

• Ничем не отличается
• При разработке используются новые технологии, а затем ищутся альтернативные пути для их работы в старых браузерах
• При разработке идет постепенное улучшение функционала, от простого к сложному, к новым технологиям

Выберите параметры, которые используют медиазапросы, чтобы определить тип устройства

• операционная система
• ширина и высота устройства
• видеопроцессор
• ориентация
• разрешение
• объем оперативной памяти
• количество строк на экране
• ширина и высота видимой пользователю области веб-страницы

Отметьте все верные утверждения

• Медиазапрос является выражением, которое возвращает истину или ложь.
• CSS3 такой умный, что может определить модель устройства, к которому подключается.
• Ключевое слово all используется, чтобы указать, что таблица стилей применяется ко всем типам носителей.
• Оператор together связывает друг с другом разные условия.
• @media only screen скрывает стили от старых браузеров, которые понимают только CSS2.
• Медиазапросы могут быть расположены исключительно внутри отдельного файла с таблицами стилей.
• viewport используют для управления разметкой в мобильных браузерах.

Перед вами код, который должен описывать некие стили для всех устройств с максимальной шириной до 1024px. Заполните пропуск

Перед вами код, описывающий стили для экранов медиа-устройств. Заполните пропуск для портретной ориентации.

Вставьте пропуски, чтобы сделать грид-сетку. В ней должно быть столько колонок, сколько поместится с фиксированной шириной в 400 пикселей.

Заполните пропуски, чтобы создать грид-раскладку следующего вида: четыре колонки, каждая по 400 пикселей. Три ряда, каждый по 500 пикселей. Используйте функцию, которая позволяет повторять одинаковые колонки и ряды.

Временно удаляет элемент из DOM. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было

Элемент показывается как блочный. Применение этого значения для строчных элементов, например тега «span», заставляет его вести себя подобно блокам — происходит перенос строк в начале и в конце содержимого.

Устанавливает элемент как блочный или строчный в зависимости от контекста.

Элемент отображается как строчный. Отменяет особенность тегов <div> и <p> переносить их содержимое на новую строку.

Какой тип шрифта используется на картинках? Введите CSS-название:

Какой тип шрифта используется на картинках? Введите CSS-название:

В ответ напишите пример реализации для картинки home.img со значением атрибута alt = "Мой дом — моя крепость".
*alt будет работать в том случае, если по каким-либо причинам картинка не погрузиться. Тогда вместо нее будет написан тот текст, который вы передадите как значение в alt.
Будьте внимательны — в ответе не ставьте лишние пробелы.

В ответ напишите, как вставить ссылку https://skillfactory.ru/ в тег <a> со значением «Контакты». Будьте внимательны — в ответе не ставьте лишние пробелы.

Для стилизации чего используется элемент span ?

• картинок
• всего параграфа
• текстового содержимого
• всего текста

Какое значение position используется элементами по умолчанию?

• relative
• absolute
• fixed
• static
• sticky
• none

Что называют позиционированным элементом?
Несколько вариантов ответа

• Элемент, значение position которого отличается от значения по умолчанию.
• Элемент, значение position которого отличается от значения static.
• Элемент, у которого определено свойство position.
• Элемент, у которого указан z-index.

Что можно делать при помощи инспектора (инструмента разработчика)?

• Менять текстовое содержимое элементов
• Менять стили элементов
• Добавлять стили элементов сразу в файл на диске
• Скрывать элемент
• Смотреть как сайт будет выглядеть на экране телефона

Какие из следующих единиц измерения являются относительными?

• px
• rem
• %
• cm
• vh

Какое свойство позволяет задать фоновый цвет элемента? Ответ напишите без тегов и знаков.

Переведите цвет #37d129 из шестнадцатеричного формата в формат rgb(). Вы можете воспользоваться онлайн-палитрами и другими инструментами. Ответ укажите в формате без точки с запятой. Используйте один пробел после каждой запятой.

Запишите в функциональном представлении с использованием цветового пространства RGB полнонасыщенный синий цвет со значением альфа-канала 20%. В ответе указывайте только значение цвета без селектора и других синтаксических элементов стилей.

Запишите в шестнадцатеричном представлении цвет с полнонасыщенным зелёным каналом без использования альфа-канала и с нулевой насыщенностью других каналов. В ответе указывайте только значение цвета без селектора и других синтаксических элементов стилей.

Какие селекторы относятся к данному элементу?

• a
• a.home-link
• a .home-link
• a, .home-link
• #video

Определите, какой селектор будет иметь наибольшую специфичность:

• a
• a. home-link
• .home-link.home-tabs__search
• .home-link
• .home-tabs_search

Напишите:

1. Селектор по тегу для посещённой ссылки.
2. Селектор по идентификатору для картинки.
3. Селектор для всех элементов, с классом home (при помощи простого селектора).
4. Селектор по тегу для всех изображений.

С помощью какого псевдокласса окрашены пункты списков?

• :visited
• :nth-child (3n+1)
• :hover
• :focus

Какой псевдокласс позволяет в примере окрасить фон зеленым цветом при наведении курсора на пункты меню?

• :visited
• :nth-child(even)
• :hover
• :focus

Как обозначается селектор класса в CSS-коде?

• запятой
• точкой
• пробелом

Отметьте все верные утверждения.

• Глобальные стили подключаются с помощью тега link .
• Использование глобальных стилей может замедлять загрузку страницы.
• При работе с внутренними стилями необходимо вручную корректировать каждый элемент.
• Атрибут href указывает тип связи между текущим документом и файлом.
• Глобальные стили наиболее предпочтительны для работы с многостраничными проектами.
• Как правило, внешние стили подключают внутри тега head.

Напишите заголовок первого уровня «Моя страница».

Напишите, в каком элементе должно находится всё содержимое, которое увидит посетитель.

Укажите, в каком элементе нужно писать заголовок документа, который увидит пользователь на вкладке браузера.

Замените встроенную CSS на внутреннюю в своем документе. В поле ввода напишите часть кода, которая будет отвечать за изменение цвета фона. Формат ответа: название_тега (название_стиля: значение). Ответ запишите в одну строчку. Цвет для фона выберите blue.

Подумайте, что нужно изменить, чтобы получился следующий результат:
В ответе напишите тег, в который будут вноситься изменения, чтобы получить необходимый результат. Формат ответа ‹название тега> .

Добавьте пропущенные теги, чтобы получить верный код. Ответ впишите без скобок.

Добавьте пропущенные теги, чтобы получить верный код.

Определите, что не является результатом применения CSS.

• Текст заголовка
• Дизайн пунктов
• Изменение цвета текста меню при наведении мышки на него
• Цвет фона

Для чего предназначено поле Content-Type в НТТР-пакете?

• С его помощью браузер узнаёт, что именно лежит внутри пакета: текст, видео, картинка и так далее.
• С его помощью браузер может сказать серверу, какие именно данные он ожидает увидеть.

Что неверно для DNS?

• DNS хранит данные об именах сайтов и соответствующих им IP.
• DNS обеспечивают связь между устройствами от источника до назначения и обратно в любом сетевом взаимодействии.

Укажите, содержимое каких элементов должно быть одинаковым на всех страницах сайта:

• footer
• main
• body
• header

Accessibility — это ...

• Использование новых тегов в вёрстке.
• Поддержка сайта голосовыми помощниками.
• Обеспечение доступности сайта для людей с ограниченными физическими/техническими возможностями.

B HTML5 ...

• Появились новые теги.
• Появились новые теги и API.
• Была исправлена документация для HTML4.

Исследуйте три сайта на предмет наличия в них iframe.
На каких сайтах он используется? Воспользуйтесь инструментами разработчика (вкладка Elements).

• https://www.youtube.com/
• https://tv3.ru/live
• https://ru.wikipedia.org/

На главной странице сайта нужно поставить ссылку на второй ваш сайт. Какой путь ссылки будет здесь использоваться?

• абсолютный
• относительный
• интерактивный

На главной странице сайта нужно поставить ссылку на страницу с контактами. Какой путь ссылки будет здесь использоваться?

• абсолютный
• относительный
• интерактивный

Какой формат графического файла лучше использовать для иконок, чтобы при изменении размера не менялось качество?

• svg
• jpg
• png

Выберите атрибуты, которые можно использовать для элемента img:

• src
• scr
• png
• alt
• width
• height

Мы добавляем на сайт меню для навигации по страницам. Какой вид списка для этого подойдёт? Тег в ответе напишите в угловых скобках:

Мы составляем инструкцию по установке приложения. Какой вид списка для этого подойдёт? Тег в ответе напишите в угловых скобках:

Укажите, какой элемент можно использовать для перечеркивания текста? Укажите только открывающий тег в ответе (с угловыми скобками):

Укажите, какой элемент используется для создания цитаты внутри текстового содержимого? Укажите только открывающий тег в ответе (с угловыми скобками):

Укажите, сколько заголовков разных уровней нужно делать на странице:

• один
• по количеству смысловых частей
• по количеству внешних блоков
• любое количество

Выберите основные элементы современного HTML-документа:

• !DOCTYPE html
• meta
• title
• html
• head
• P
• body

С помощью HTML нельзя ...