gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(curriculum): fix challenges for russian language

Browse Source
This commit is contained in:
Valeriy S
2019-08-28 16:26:13 +03:00
committed by mrugesh
parent a17c3c44aa
commit 12f65a6742
1418 changed files with 39634 additions and 19395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.russian.md
View File

@ -1,32 +1,31 @@
--- ---
id: 587d774c367417b2b2512a9c id: 587d774c367417b2b2512a9c
title: Добавьте текстовое описание для изображений, чтобы увеличить их информативность для пользователей с нарушением зрения title: Add a Text Alternative to Images for Visually Impaired Accessibility
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cPp7VfD
forumTopicId: 16628
localeTitle: Добавьте текстовое описание для изображений, чтобы увеличить их информативность для пользователей с нарушением зрения localeTitle: Добавьте текстовое описание для изображений, чтобы увеличить их информативность для пользователей с нарушением зрения
--- ---
## Description (Описание)
<section id="description"> Вероятно, вы уже встречали атрибут <code>alt</code> в теге <code>img</code> в других задачах. <code>Alt</code> описывает содержимое изображения при помощи текстовой альтернативы. Текстовая альтернатива - тот текст, который увидит пользователь в том случае, если изображение не загружается, не может быть отображено, или пользователь с ограниченными возможностями не способен его увидеть. Поисковые системы также используют этот альтернативный текст в качестве описания изображения, чтобы включить изображение в результаты поиска.
Например: <code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code>
Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не могут получить информацию, которая представлена только в виде изображения, если это изображение не сопровождается описанием(текстовой альтернативой). Программы, предназначенные для людей с нарушениями зрения, могут получить доступ к атрибуту <code>alt</code> и прочитать его содержимое для доставки пользователю ключевой информации. Хорошее описание <code>alt</code> должно быть кратким, но достаточно емким, чтобы передать смысл изображения. Спецификация HTML5 требует обязательного включения атрибута <code>alt</code> для каждого изображения. </section>
## Instructions (Задание)
<section id="instructions"> Camper Cat, настоящий ниндзя в жизни и в программировании, создает веб-сайт, чтобы поделиться своими знаниями. Он хочет использовать изображение для профиля, которое продемонстрирует его навыки и будет оценено всеми посетителями сайта. Добавьте атрибут <code>alt</code> в тег <code>img</code> так, чтобы всем стало понятно, что Camper Cat занимается каратэ. (Изображение <code>src</code> не ссылается на фактический файл, поэтому вы должны увидеть текст <code>alt</code> на дисплее.) </section>
## Description ## Description
<section id="description"> Вероятно, вы видели атрибут <code>alt</code> в теге <code>img</code> в других задачах. Текст <code>Alt</code> описывает содержимое изображения и предоставляет текстовую альтернативу. Это помогает в случае, если изображение не загружается или не может быть замечено пользователем. Он также используется поисковыми системами, чтобы понять, что содержит изображение, чтобы включить его в результаты поиска. Вот пример: <code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code> Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не получат информацию, если они представлены только визуально. Для изображений экранные программы могут получить доступ к атрибуту <code>alt</code> и прочитать его содержимое для сообщения ключевой информации. Хороший <code>alt</code> представляет из себя короткий текст, который передает основной смысл изоражения. Вы всегда должны использовать атрибут <code>alt</code> для своих изображений. По спецификации HTML5 это считается обязательным. </section> <section id='description'>
Вероятно, вы уже встречали атрибут <code>alt</code> в теге <code>img</code> в других задачах. <code>Alt</code> описывает содержимое изображения при помощи текстовой альтернативы. Текстовая альтернатива - тот текст, который увидит пользователь в том случае, если изображение не загружается, не может быть отображено, или пользователь с ограниченными возможностями не способен его увидеть. Поисковые системы также используют этот альтернативный текст в качестве описания изображения, чтобы включить изображение в результаты поиска.
Например: <code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code>
Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не могут получить информацию, которая представлена только в виде изображения, если это изображение не сопровождается описанием(текстовой альтернативой). Программы, предназначенные для людей с нарушениями зрения, могут получить доступ к атрибуту <code>alt</code> и прочитать его содержимое для доставки пользователю ключевой информации. Хорошее описание <code>alt</code> должно быть кратким, но достаточно емким, чтобы передать смысл изображения. Спецификация HTML5 требует обязательного включения атрибута <code>alt</code> для каждого изображения.
</section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat оказался как ниндзя кодером, так и настоящим ниндзя, и создает веб-сайт, чтобы поделиться своими знаниями. Изображение профиля, которое он хочет использовать, показывает его навыки и должно быть оценено всеми посетителями сайта. Добавьте атрибут <code>alt</code> в тег <code>img</code> , который объясняет, что Camper Cat занимается каратэ. (Изображение <code>src</code> не ссылается на фактический файл, поэтому вы должны увидеть текст <code>alt</code> на дисплее.) </section> <section id='instructions'>
Camper Cat, настоящий ниндзя в жизни и в программировании, создает веб-сайт, чтобы поделиться своими знаниями. Он хочет использовать изображение для профиля, которое продемонстрирует его навыки и будет оценено всеми посетителями сайта. Добавьте атрибут <code>alt</code> в тег <code>img</code> так, чтобы всем стало понятно, что Camper Cat занимается каратэ. (Изображение <code>src</code> не ссылается на фактический файл, поэтому вы должны увидеть текст <code>alt</code> на дисплее.)
## Tests (Тесты) </section>
## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Ваш тег <code>img</code> должен иметь атрибут <code>alt</code>, и он не должен быть пустым.' - text: Your <code>img</code> tag should have an <code>alt</code> attribute and it should not be empty.
testString: 'assert($("img").attr("alt"), "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.");' testString: assert($('img').attr('alt'));
``` ```
@ -44,14 +43,13 @@ tests:
</div> </div>
</section> </section>
## Solution (Решение) ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// здесь должно быть ваше решение <img src="doingKarateWow.jpeg" alt="Someone doing karate">
``` ```
</section> </section>

67
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.russian.md
View File

@ -2,34 +2,34 @@
id: 587d778b367417b2b2512aa8 id: 587d778b367417b2b2512aa8
title: Add an Accessible Date Picker title: Add an Accessible Date Picker
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cR3bRbCV
forumTopicId: 301008
localeTitle: Добавить возможность выбора даты localeTitle: Добавить возможность выбора даты
--- ---
## Description
<section id='description'>
Формы часто включают поле <code>input</code> . Это поле может использоваться для создания различных элементов управления формой. Атрибут <code>type</code> в этом элементе указывает, какой тип информации может быть введен. Возможно, вы уже встречали в предыдущих задачах типы ввода <code>text</code> и <code>submit</code> . В HTML5 появилась возможность указать поле <code>date</code> . В зависимости от поддержки браузера в поле <code>input</code> появляется окно выбора даты, что облегчает заполнение формы для всех пользователей. Для более старых браузеров будет по умолчанию использоваться тип <code>text</code> , он также помогает показывать пользователям ожидаемый формат даты, но в текстовом виде. Например: <blockquote> &lt;label for = &quot;input1&quot;&gt; Введите дату: &lt;/ label&gt; <br> &lt;input type = &quot;date&quot; id = &quot;input1&quot; name = &quot;input1&quot;&gt; <br></blockquote>
</section>
## Description (Описание) ## Instructions
<section id="description"> Формы часто включают поле <code>input</code> . Это поле может использоваться для создания различных элементов управления формой. Атрибут <code>type</code> в этом элементе указывает, какой тип информации может быть введен. Возможно, вы уже встречали в предыдущих задачах типы ввода <code>text</code> и <code>submit</code> . В HTML5 появилась возможность указать поле <code>date</code> . В зависимости от поддержки браузера в поле <code>input</code> появляется окно выбора даты, что облегчает заполнение формы для всех пользователей. Для более старых браузеров будет по умолчанию использоваться тип <code>text</code> , он также помогает показывать пользователям ожидаемый формат даты, но в текстовом виде. Например: <blockquote> &lt;label for = &quot;input1&quot;&gt; Введите дату: &lt;/ label&gt; <br> &lt;input type = &quot;date&quot; id = &quot;input1&quot; name = &quot;input1&quot;&gt; <br></blockquote></section> <section id='instructions'>
Camper Cat решил организовать турнир по Mortal Kombat и хочет попросить будущих участников определить, какая дата для проведения лучше всего подойдет. Добавьте <code>input</code> тег с <code>type</code> атрибутом «дата», с <code>id</code> атрибутом «pickdate», и <code>name</code> атрибутом «дата».
</section>
## Tests
## Instructions (Задание)
<section id="instructions"> Camper Cat решил организовать турнир по Mortal Kombat и хочет попросить будущих участников определить, какая дата для проведения лучше всего подойдет. Добавьте <code>input</code> тег с <code>type</code> атрибутом «дата», с <code>id</code> атрибутом «pickdate», и <code>name</code> атрибутом «дата». </section>
## Tests (Тесты)
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Your code should add one <code>input</code> tag for the date selector field.
- text: Вы должны добавить один тег <code>input</code> для поля выбора даты. testString: assert($('input').length == 2);
testString: 'assert($("input").length == 2, "Your code should add one <code>input</code> tag for the date selector field.");' - text: Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.
- text: Тег <code>input</code> должен иметь атрибут <code>type</code> со значением date. testString: assert($('input').attr('type') == 'date');
testString: 'assert($("input").attr("type") == "date", "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.");' - text: Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.
- text: Ваш тег <code>input</code> должен иметь атрибут <code>id</code> со значением pickdate. testString: assert($('input').attr('id') == 'pickdate');
testString: 'assert($("input").attr("id") == "pickdate", "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.");' - text: Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.
- text: Ваш тег <code>input</code> должен иметь атрибут <code>name</code> со значением date. testString: assert($('input').attr('name') == 'date');
testString: 'assert($("input").attr("name") == "date", "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.");'
``` ```
@ -52,11 +52,11 @@ tests:
<p>Tell us the best date for the competition</p> <p>Tell us the best date for the competition</p>
<label for="pickdate">Preferred Date:</label> <label for="pickdate">Preferred Date:</label>
<!-- Добавьте ваш код под этой линией --> <!-- Add your code below this line -->
<!-- Добавьте ваш код над этой линией --> <!-- Add your code above this line -->
<input type="submit" name="submit" value="Submit"> <input type="submit" name="submit" value="Submit">
</form> </form>
@ -69,14 +69,29 @@ tests:
</div> </div>
</section> </section>
## Solution (Решение) ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// здесь должно быть ваше решение <body>
<header>
<h1>Tournaments</h1>
</header>
<main>
<section>
<h2>Mortal Kombat Tournament Survey</h2>
<form>
<p>Tell us the best date for the competition</p>
<label for="pickdate">Preferred Date:</label>
<input type="date" id="pickdate" name="date">
<input type="submit" name="submit" value="Submit">
</form>
</section>
</main>
<footer>&copy; 2018 Camper Cat</footer>
</body>
``` ```
</section> </section>

46
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.russian.md
View File

@ -2,28 +2,28 @@
id: 587d778f367417b2b2512aad id: 587d778f367417b2b2512aad
title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c437as3
localeTitle: 'Будьте внимательны к пользователям, которые не могут различать некоторые цвета - аккуратно выбирайте цвет текста и фона для передачи значимой информации' forumTopicId: 301011
localeTitle: Будьте внимательны к пользователям, которые не могут различать некоторые цвета - аккуратно выбирайте цвет текста и фона для передачи значимой информации
--- ---
## Description (Описание)
<section id="description"> Существуют различные формы слепоты: от пониженной чувствительности к отдельным цветам до полного отсутствия цветного зрения. Наиболее распространенной формой является снижение способности различать зеленый цвет. Например, если вы выберете два близких зеленых оттенка для текста и для фона вашей страницы, некоторые пользователи не смогут ничего различить и прочитать. Чтобы узнать, какие цвета и оттенки являются потенциально проблемными, воспользуйтесь цветовым кругом - эти цвета будут располагаться по соседству. Их следует избегать при передаче важной информации. Некоторые онлайн-инструменты для выбора цвета дают возможность увидеть сочетание цветов глазами пользователей с различными типами слепоты. Это отличные ресурсы в дополнение к онлайн-калькуляторам проверки контраста, воспользуйтесь ими. </section>
## Description ## Description
<section id="description"> Существуют различные формы слепоты. Они могут варьироваться от пониженной чувствительности к определенной длины волны света до невозможности видеть цвет вообще. Наиболее распространенной формой является снижение чувствительности к обнаружению зеленого цвета. Например, если два похожих зеленых цвета являются цветом переднего плана и фона вашего контента, пользователь с цветовой слепотой может не распознать их. Близкие цвета можно рассматривать как соседей на цветовом колесе, и эти комбинации следует избегать при передаче важной информации. <strong>Заметка</strong> <br> Некоторые онлайн-инструменты для выбора цвета включают визуальное моделирование того, как появляются цвета для разных типов слепоты. Это отличные ресурсы в дополнение к онлайн-калькуляторам проверки контраста. </section> <section id='description'>
Существуют различные формы слепоты: от пониженной чувствительности к отдельным цветам до полного отсутствия цветного зрения. Наиболее распространенной формой является снижение способности различать зеленый цвет. Например, если вы выберете два близких зеленых оттенка для текста и для фона вашей страницы, некоторые пользователи не смогут ничего различить и прочитать. Чтобы узнать, какие цвета и оттенки являются потенциально проблемными, воспользуйтесь цветовым кругом - эти цвета будут располагаться по соседству. Их следует избегать при передаче важной информации. Некоторые онлайн-инструменты для выбора цвета дают возможность увидеть сочетание цветов глазами пользователей с различными типами слепоты. Это отличные ресурсы в дополнение к онлайн-калькуляторам проверки контраста, воспользуйтесь ими.
</section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat тестирует различные стили для важной кнопки, но желтый ( <code>#FFFF33</code> ) <code>background-color</code> и зеленый ( <code>#33FF33</code> ) текст <code>color</code> соседствующие оттенки на цветовом колесе и практически неразличимы для некоторых пользователей с дальтонизмом. (Их аналогичная легкость также не позволяет проверить коэффициент контрастности). Измените <code>color</code> текста на синий ( <code>#003366</code> ), чтобы решить обе проблемы. </section> <section id='instructions'>
Camper Cat тестирует различные стили для важной кнопки, но желтый ( <code>#FFFF33</code> ) <code>background-color</code> и зеленый ( <code>#33FF33</code> ) текст <code>color</code> соседствующие оттенки на цветовом колесе и практически неразличимы для некоторых пользователей с дальтонизмом. (Их аналогичная легкость также не позволяет проверить коэффициент контрастности). Измените <code>color</code> текста на синий ( <code>#003366</code> ), чтобы решить обе проблемы.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен изменить цвет <code>color</code> текста для <code>button</code> на синий. - text: Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.
testString: 'assert($("button").css("color") == "rgb(0, 51, 102)", "Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.");' testString: assert($('button').css('color') == 'rgb(0, 51, 102)');
``` ```
@ -56,14 +56,28 @@ tests:
</div> </div>
</section> </section>
## Solution (Решение) ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// здесь должно быть ваше решение <head>
<style>
button {
color: #003366;
background-color: #FFFF33;
font-size: 14px;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Danger!</h1>
</header>
<button>Delete Internet</button>
</body>
``` ```
</section> </section>

49
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.russian.md
View File

@ -2,25 +2,30 @@
id: 587d778f367417b2b2512aac id: 587d778f367417b2b2512aac
title: Avoid Colorblindness Issues by Using Sufficient Contrast title: Avoid Colorblindness Issues by Using Sufficient Contrast
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cmzMEUw
localeTitle: 'Избегайте недостаточной контрастности текста и фона, чтобы пользователю было легче их воспринимать' forumTopicId: 301012
localeTitle: Избегайте недостаточной контрастности текста и фона, чтобы пользователю было легче их воспринимать
--- ---
## Description ## Description
<section id="description"> Цвет - большая часть визуального дизайна, но его использование представляет две проблемы доступности. Во-первых, цвет сам по себе не должен использоваться как единственный способ передачи важной информации, потому что пользователи программ чтения с экрана его не увидят. Во-вторых, цвета переднего и заднего фона требуют достаточного контраста, чтобы пользователи, имеющие проблемы с различением цветов, могли отличать их. Предыдущие задачи курса охватывали наличие текстовых альтернатив для решения первой проблемы. Последняя задача заключалась в инструментах проверки контраста, чтобы помочь во втором случае. Контрастность, рекомендованная WCAG, равная 4,5: 1, применяется для использования цвета, а также для комбинаций по шкале серого. Пользователи, страдающие дальтонизмом, не могут отличить некоторые цвета от других - обычно по оттенку, но иногда и по яркости. Вы можете вспомнить, что коэффициент контрастности рассчитывается с использованием значений относительной яркости (или яркости) цветов переднего плана и фона. На практике соотношение 4,5: 1 может быть достигнуто путем затемнения более темного цвета и осветления светлого с помощью анализатора цветного контраста. Более темными цветами на цветовом круге считаются синий, фиолетовый, пурпурный и красный, тогда как более светлыми цветами - оранжевый, желтый, зеленый и сине-зеленый. </section> <section id='description'>
Цвет - большая часть визуального дизайна, но его использование представляет две проблемы доступности. Во-первых, цвет сам по себе не должен использоваться как единственный способ передачи важной информации, потому что пользователи программ чтения с экрана его не увидят. Во-вторых, цвета переднего и заднего фона требуют достаточного контраста, чтобы пользователи, имеющие проблемы с различением цветов, могли отличать их. Предыдущие задачи курса охватывали наличие текстовых альтернатив для решения первой проблемы. Последняя задача заключалась в инструментах проверки контраста, чтобы помочь во втором случае. Контрастность, рекомендованная WCAG, равная 4,5: 1, применяется для использования цвета, а также для комбинаций по шкале серого. Пользователи, страдающие дальтонизмом, не могут отличить некоторые цвета от других - обычно по оттенку, но иногда и по яркости. Вы можете вспомнить, что коэффициент контрастности рассчитывается с использованием значений относительной яркости (или яркости) цветов переднего плана и фона. На практике соотношение 4,5: 1 может быть достигнуто путем затемнения более темного цвета и осветления светлого с помощью анализатора цветного контраста. Более темными цветами на цветовом круге считаются синий, фиолетовый, пурпурный и красный, тогда как более светлыми цветами - оранжевый, желтый, зеленый и сине-зеленый.
</section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat экспериментирует с использованием цвета для текста своего блога и фона, но его текущая комбинация зеленоватого <code>background-color</code> с <code>color</code> текстом в темно-коричневом <code>color</code> имеет коэффициент контрастности 2,5: 1. Вы можете легко регулировать яркость цветов, так как он объявил их, используя <code>hsl()</code> CSS <code>hsl()</code> (которое означает оттенок, насыщенность, яркость), изменив третий аргумент. Увеличьте значение яркости <code>background-color</code> с 35% до 55% и уменьшите значение яркости <code>color</code> с 20% до 15%. Это улучшает контрастность до 5.9: 1. </section> <section id='instructions'>
Camper Cat экспериментирует с использованием цвета для текста своего блога и фона, но его текущая комбинация зеленоватого <code>background-color</code> с <code>color</code> текстом в темно-коричневом <code>color</code> имеет коэффициент контрастности 2,5: 1. Вы можете легко регулировать яркость цветов, так как он объявил их, используя <code>hsl()</code> CSS <code>hsl()</code> (которое означает оттенок, насыщенность, яркость), изменив третий аргумент. Увеличьте значение яркости <code>background-color</code> с 35% до 55% и уменьшите значение яркости <code>color</code> с 20% до 15%. Это улучшает контрастность до 5.9: 1.
</section>
## Tests (Тесты) ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен только изменить значение яркости для свойства <code>color</code> текста на значение 15%. - text: Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.
testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), "Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.");' testString: assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
- text: Ваш код должен только изменить значение яркости для свойства <code>background-color</code> на значение 55%. - text: Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.
testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), "Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.");' testString: assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
``` ```
@ -55,14 +60,30 @@ tests:
</div> </div>
</section> </section>
## Solution (Решение) ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// здесь должно быть ваше решение <head>
<style>
body {
color: hsl(0, 55%, 15%);
background-color: hsl(120, 25%, 55%);
}
</style>
</head>
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<article>
<h2>A Word on the Recent Catnip Doping Scandal</h2>
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
</article>
</body>
``` ```
</section> </section>

44
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.russian.md
View File

@ -2,29 +2,30 @@
id: 587d778f367417b2b2512aae id: 587d778f367417b2b2512aae
title: Give Links Meaning by Using Descriptive Link Text title: Give Links Meaning by Using Descriptive Link Text
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c437DcV
localeTitle: 'Определите ссылку при помощи описания' forumTopicId: 301013
localeTitle: Определите ссылку при помощи описания
--- ---
## Description
## Description <section id='description'>
<section id="description"> У аудиоинтерфейсов (читалок), предназначенных для озвучивания текста на экране, есть разные опции в зависимости от типа контента. Они могут включать пропуск отдельных элементов, переход к основному содержимому или выдачу краткой выжимки содержания страницы только из заголовков. Или например, может быть выбрана озвучивание только ссылок, находящихся на странице. Когда мы просматриваем веб-страницу на экране, мы получаем информацию о том, куда ведет ссылка, из ее названия или того текста, который находится между тэгами anchor ( <code>a</code> ). Поэтому ссылки вида "продолжение здесь", "читать дальше" или "нажмите здесь" - это плохое решение. Вместо этого вы должны использовать короткий, но емкое описание между тегами <code>a</code>. Так вы не потеряете пользователей, которые используют аудиоинтерфейс.</section> У аудиоинтерфейсов (читалок), предназначенных для озвучивания текста на экране, есть разные опции в зависимости от типа контента. Они могут включать пропуск отдельных элементов, переход к основному содержимому или выдачу краткой выжимки содержания страницы только из заголовков. Или например, может быть выбрана озвучивание только ссылок, находящихся на странице. Когда мы просматриваем веб-страницу на экране, мы получаем информацию о том, куда ведет ссылка, из ее названия или того текста, который находится между тэгами anchor ( <code>a</code> ). Поэтому ссылки вида "продолжение здесь", "читать дальше" или "нажмите здесь" - это плохое решение. Вместо этого вы должны использовать короткий, но емкое описание между тегами <code>a</code>. Так вы не потеряете пользователей, которые используют аудиоинтерфейс.
</section>
## Instructions ## Instructions
<section id="instructions"> Текст ссылки, который использует Camper Cat, не очень понятен вне контекста страницы. Переместите теги ( <code>a</code> ) так, чтобы они выдавали описание "information about batteries"(«информация об аккумуляторах») вместо "Click here"(«Нажмите здесь»). </section> <section id='instructions'>
Текст ссылки, который использует Camper Cat, не очень понятен вне контекста страницы. Переместите теги ( <code>a</code> ) так, чтобы они выдавали описание "information about batteries"(«информация об аккумуляторах») вместо "Click here"(«Нажмите здесь»).
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".
- text: 'Ваш код должен переместить теги от словосочетания «Нажмите здесь» , к словосочетанию «информация об акумуляторах. <code>a</code>' testString: assert($('a').text().match(/^(information about batteries)$/g));
- text: Make sure your <code>a</code> element has a closing tag.
testString: 'assert($("a").text().match(/^(information about batteries)$/g), "Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".");' testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length);
- text: 'Убедитесь , что вы не забыли закрывающий тег. <code>a</code>'
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(""|"")>/g).length, "Make sure your <code>a</code> element has a closing tag.");'
``` ```
@ -50,14 +51,21 @@ tests:
</div> </div>
</section> </section>
## Solution (Решение) ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// здесь должно быть ваше решение <body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for <a href="">information about batteries</a></p>
</article>
</body>
``` ```
</section> </section>

60
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.russian.md
View File

@ -2,37 +2,40 @@
id: 587d7789367417b2b2512aa4 id: 587d7789367417b2b2512aa4
title: Improve Accessibility of Audio Content with the audio Element title: Improve Accessibility of Audio Content with the audio Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cVJVkcZ
forumTopicId: 301014
localeTitle: Улучшаем доступность аудиоконтента localeTitle: Улучшаем доступность аудиоконтента
--- ---
## Description ## Description
<section id="description"> В HTML5 <code>audio</code> элемент дает смысловое значение, когда он оборачивает звук или аудио поток контента в разметке. Аудиоконтент также нуждается в текстовой альтернативе, доступной для людей, которые являются глухими или слабослышащими. Это можно сделать рядом с текстом на странице или ссылкой на стенограмму. <code>audio</code> тег поддерживает атрибут <code>controls</code> . Это показывает воспроизведение по умолчанию в браузере, паузу и другие элементы управления и поддерживает функциональность клавиатуры. Это логический атрибут, то есть он не нуждается в значении, его присутствие на теге включает настройку. Вот пример: <blockquote> &lt;audio id = &quot;meowClip&quot; элементы управления&gt; <br> &lt;источник src = &quot;audio / meow.mp3&quot; type = &quot;audio / mpeg&quot; /&gt; <br> &lt;источник src = &quot;audio / meow.ogg&quot; type = &quot;audio / ogg&quot; /&gt; <br> &lt;/ Аудио&gt; <br></blockquote> <strong>Заметка</strong> <br> Мультимедийный контент обычно имеет как визуальные, так и звуковые компоненты. Для этого нужны синхронизированные подписи и расшифровка стенограммы, чтобы пользователи с визуальными и / или слуховыми нарушениями могли получить к ней доступ. Как правило, веб-разработчик не несет ответственности за создание титров или расшифровки, но должен знать, чтобы их включать. </section> <section id='description'>
В HTML5 <code>audio</code> элемент дает смысловое значение, когда он оборачивает звук или аудио поток контента в разметке. Аудиоконтент также нуждается в текстовой альтернативе, доступной для людей, которые являются глухими или слабослышащими. Это можно сделать рядом с текстом на странице или ссылкой на стенограмму. <code>audio</code> тег поддерживает атрибут <code>controls</code> . Это показывает воспроизведение по умолчанию в браузере, паузу и другие элементы управления и поддерживает функциональность клавиатуры. Это логический атрибут, то есть он не нуждается в значении, его присутствие на теге включает настройку. Вот пример: <blockquote> &lt;audio id = &quot;meowClip&quot; элементы управления&gt; <br> &lt;источник src = &quot;audio / meow.mp3&quot; type = &quot;audio / mpeg&quot; /&gt; <br> &lt;источник src = &quot;audio / meow.ogg&quot; type = &quot;audio / ogg&quot; /&gt; <br> &lt;/ Аудио&gt; <br></blockquote> <strong>Заметка</strong> <br> Мультимедийный контент обычно имеет как визуальные, так и звуковые компоненты. Для этого нужны синхронизированные подписи и расшифровка стенограммы, чтобы пользователи с визуальными и / или слуховыми нарушениями могли получить к ней доступ. Как правило, веб-разработчик не несет ответственности за создание титров или расшифровки, но должен знать, чтобы их включать.
</section>
## Instructions ## Instructions
<section id="instructions"> Пора отдохнуть от Camper Cat и познакомиться с кемпером Zersiax (@zersiax), чемпионом доступности и пользователем экрана. Чтобы услышать клип его экранного ридера в действии, добавьте <code>audio</code> элемент после <code>p</code> . Включите атрибут <code>controls</code> . Затем поместите <code>source</code> тег внутри <code>audio</code> тегов с атрибутом <code>src</code> установленным на «https://s3.amazonaws.com/freecodecamp/screen-reader.mp3», и <code>type</code> атрибут «audio / mpeg». <strong>Заметка</strong> <br> Звуковой клип может звучать быстро и быть трудно понятен, но это обычная скорость для пользователей с экрана. </section> <section id='instructions'>
Пора отдохнуть от Camper Cat и познакомиться с кемпером Zersiax (@zersiax), чемпионом доступности и пользователем экрана. Чтобы услышать клип его экранного ридера в действии, добавьте <code>audio</code> элемент после <code>p</code> . Включите атрибут <code>controls</code> . Затем поместите <code>source</code> тег внутри <code>audio</code> тегов с атрибутом <code>src</code> установленным на «https://s3.amazonaws.com/freecodecamp/screen-reader.mp3», и <code>type</code> атрибут «audio / mpeg». <strong>Заметка</strong> <br> Звуковой клип может звучать быстро и быть трудно понятен, но это обычная скорость для пользователей с экрана.
</section>
## Tests
## Tests (Тесты)
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: В вашем коде должен быть один <code>audio</code> тег. - text: Your code should have one <code>audio</code> tag.
testString: 'assert($("audio").length === 1, "Your code should have one <code>audio</code> tag.");' testString: assert($('audio').length === 1);
- text: 'Убедитесь, что ваш <code>audio</code> имеет закрывающий тег.' - text: Make sure your <code>audio</code> element has a closing tag.
testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), "Make sure your <code>audio</code> element has a closing tag.");' testString: assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g));
- text: <code>audio</code> тег должен иметь атрибут <code>controls</code> . - text: The <code>audio</code> tag should have the <code>controls</code> attribute.
testString: 'assert($("audio").attr("controls"), "The <code>audio</code> tag should have the <code>controls</code> attribute.");' testString: assert($('audio').attr('controls'));
- text: Ваш код должен иметь один тег <code>source</code> . - text: Your code should have one <code>source</code> tag.
testString: 'assert($("source").length === 1, "Your code should have one <code>source</code> tag.");' testString: assert($('source').length === 1);
- text: Ваш тег <code>source</code> должен находиться внутри <code>audio</code> тегов. - text: Your <code>source</code> tag should be inside the <code>audio</code> tags.
testString: 'assert($("audio").children("source").length === 1, "Your <code>source</code> tag should be inside the <code>audio</code> tags.");' testString: assert($('audio').children('source').length === 1);
- text: Значение атрибута <code>src</code> в теге <code>source</code> должно точно соответствовать ссылке в инструкциях. - text: The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.
testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.");' testString: assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3');
- text: Ваш код должен включать атрибут <code>type</code> в тег <code>source</code> со значением audio / mpeg. - text: Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.
testString: 'assert($("source").attr("type") === "audio/mpeg", "Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.");' testString: assert($('source').attr('type') === 'audio/mpeg');
``` ```
@ -60,14 +63,23 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// здесь должно быть ваше решение <body>
<header>
<h1>Real Coding Ninjas</h1>
</header>
<main>
<p>A sound clip of Zersiax's screen reader in action.</p>
<audio controls>
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
</audio>
</main>
</body>
``` ```
</section> </section>

92
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.russian.md
View File

@ -2,37 +2,38 @@
id: 587d778a367417b2b2512aa5 id: 587d778a367417b2b2512aa5
title: Improve Chart Accessibility with the figure Element title: Improve Chart Accessibility with the figure Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cGJMqtE
forumTopicId: 301015
localeTitle: Улучшите читаемость диаграммы localeTitle: Улучшите читаемость диаграммы
--- ---
## Description ## Description
<section id='description'>
<section id="description"> HTML5 представил элемент <code>figure</code> вместе со связанной <code>figcaption</code>. Используемые вместе эти элементы обертывают визуальное представление (например, изображение, диаграмму или схему) вместе с его заголовком. Это дает двукратное повышение доступности как с семантической группировкой связанного контента, так и с предоставлением текстовой альтернативы, которая объясняет эту <code>figure</code>. Для визуализации данных, таких как диаграммы, заголовок можно использовать, чтобы кратко отметить тенденции или выводы для пользователей с нарушениями зрения. Другая проблема заключается в том, как переносить табличную версию данных диаграммы за пределы экрана (с использованием CSS) для пользователей с экрана. Вот пример - обратите внимание, что <code>figcaption</code> идет внутри <code>figure</code> тегов и может быть объединен с другими элементами: <blockquote> &lt;Цифра&gt; <br> &lt;img src = &quot;roundhouseDestruction.jpeg&quot; alt = &quot;Фотография Кэмпер Кота, выполняющего удар с разворота&quot;&gt; <br> &lt;br&gt; <br> &lt;Figcaption&gt; <br> Мастер Кэмпер Кот демонстрирует правильный удар с разворота. <br> &lt;/ Figcaption&gt; <br> &lt;/ Цифра&gt; <br></blockquote></section> HTML5 представил элемент <code>figure</code> вместе со связанной <code>figcaption</code>. Используемые вместе эти элементы обертывают визуальное представление (например, изображение, диаграмму или схему) вместе с его заголовком. Это дает двукратное повышение доступности как с семантической группировкой связанного контента, так и с предоставлением текстовой альтернативы, которая объясняет эту <code>figure</code>. Для визуализации данных, таких как диаграммы, заголовок можно использовать, чтобы кратко отметить тенденции или выводы для пользователей с нарушениями зрения. Другая проблема заключается в том, как переносить табличную версию данных диаграммы за пределы экрана (с использованием CSS) для пользователей с экрана. Вот пример - обратите внимание, что <code>figcaption</code> идет внутри <code>figure</code> тегов и может быть объединен с другими элементами: <blockquote> &lt;Цифра&gt; <br> &lt;img src = &quot;roundhouseDestruction.jpeg&quot; alt = &quot;Фотография Кэмпер Кота, выполняющего удар с разворота&quot;&gt; <br> &lt;br&gt; <br> &lt;Figcaption&gt; <br> Мастер Кэмпер Кот демонстрирует правильный удар с разворота. <br> &lt;/ Figcaption&gt; <br> &lt;/ Цифра&gt; <br></blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Кэмпер Кот тяжело работает, создавая сложную гистограмму, показывающую количество времени в неделю, затраченное на обучение в хитрости, сражении и оружии. Помогите ему лучше структурировать свою страницу, изменив тег <code>div</code> который он использовал для тега <code>figure</code>, и тэг <code>p</code> который окружает подпись к тегу <code>figcaption</code>. </section> <section id='instructions'>
Кэмпер Кот тяжело работает, создавая сложную гистограмму, показывающую количество времени в неделю, затраченное на обучение в хитрости, сражении и оружии. Помогите ему лучше структурировать свою страницу, изменив тег <code>div</code> который он использовал для тега <code>figure</code>, и тэг <code>p</code> который окружает подпись к тегу <code>figcaption</code>.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен иметь один <code>figure</code> тег. - text: Your code should have one <code>figure</code> tag.
testString: 'assert($("figure").length == 1, "Your code should have one <code>figure</code> tag.");' testString: assert($('figure').length == 1);
- text: В вашем коде должен быть один тег <code>figcaption</code> . - text: Your code should have one <code>figcaption</code> tag.
testString: 'assert($("figcaption").length == 1, "Your code should have one <code>figcaption</code> tag.");' testString: assert($('figcaption').length == 1);
- text: У вашего кода не должно быть никаких тегов <code>div</code> . - text: Your code should not have any <code>div</code> tags.
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");' testString: assert($('div').length == 0);
- text: Your code should not have any <code>p</code> tags.
- text: Ваш код не должен иметь каких - либо <code>p</code> - тегов. testString: assert($('p').length == 0);
- text: The <code>figcaption</code> should be a child of the <code>figure</code> tag.
testString: 'assert($("p").length == 0, "Your code should not have any <code>p</code> tags.");' testString: assert($('figure').children('figcaption').length == 1);
- text: <code>figcaption</code> должен быть дочерним элементом тега <code>figure</code> . - text: Make sure your <code>figure</code> element has a closing tag.
testString: 'assert($("figure").children("figcaption").length == 1, "The <code>figcaption</code> should be a child of the <code>figure</code> tag.");' testString: assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length);
- text: 'Убедитесь, что ваш <code>figure</code> элемент имеет закрывающий тег.'
testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, "Make sure your <code>figure</code> element has a closing tag.");'
``` ```
@ -58,13 +59,13 @@ tests:
<main> <main>
<section> <section>
<!-- Добавьте ваш код под этой строкой --> <!-- Add your code below this line -->
<div> <div>
<!-- Stacked bar chart will go here --> <!-- Stacked bar chart will go here -->
<br> <br>
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p> <p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
</div> </div>
<!-- Добавьте ваш код над этой строкой --> <!-- Add your code above this line -->
</section> </section>
<section id="stealth"> <section id="stealth">
@ -90,14 +91,53 @@ tests:
</div> </div>
</section> </section>
## Solution (Решение) ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// ваше решение должно быть здесь <body>
<header>
<h1>Training</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<main>
<section>
<!-- Add your code below this line -->
<figure>
<!-- Stacked bar chart will go here -->
<br>
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
</figure>
<!-- Add your code above this line -->
</section>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
<footer>&copy; 2018 Camper Cat</footer>
</body>
``` ```
</section> </section>

57
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.russian.md
View File

@ -2,25 +2,30 @@
id: 587d778a367417b2b2512aa6 id: 587d778a367417b2b2512aa6
title: Improve Form Field Accessibility with the label Element title: Improve Form Field Accessibility with the label Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cGJMMAN
forumTopicId: 301016
localeTitle: Улучшить доступность поля формы с помощью элемента Element localeTitle: Улучшить доступность поля формы с помощью элемента Element
--- ---
## Description ## Description
<section id="description"> Улучшение доступности с семантической разметкой HTML применяется к использованию как соответствующих имен тегов, так и атрибутов. Следующие несколько проблем охватывают некоторые важные сценарии с использованием атрибутов в формах. <code>label</code> метки обертывают текст для определенного элемента управления формой, как правило это имя или ярлык для выбора. Это связывает смысл с элементом и делает форму более читаемой. <code>for</code> атрибут на <code>label</code> теге явно связывает этот <code>label</code> с контролем формы и используется для чтения с экрана. Вы узнали о переключателях и их ярлыках в уроке в разделе «Основы HTML». В этом уроке мы завернули элемент ввода переключателя внутри элемента <code>label</code> вместе с текстом ярлыка, чтобы сделать текст кликабельным. Другой способ добиться этого - использовать атрибут <code>for</code> как объяснено в этом уроке. Значение атрибута <code>for</code> должно быть таким же, как значение атрибута <code>id</code> элемента управления формой. Вот пример: <blockquote> &lt;Форма&gt; <br> &lt;label for = &quot;name&quot;&gt; Имя: &lt;/ label&gt; <br> &lt;input type = &quot;text&quot; id = &quot;name&quot; name = &quot;name&quot;&gt; <br> &lt;/ Форма&gt; <br></blockquote></section> <section id='description'>
Улучшение доступности с семантической разметкой HTML применяется к использованию как соответствующих имен тегов, так и атрибутов. Следующие несколько проблем охватывают некоторые важные сценарии с использованием атрибутов в формах. <code>label</code> метки обертывают текст для определенного элемента управления формой, как правило это имя или ярлык для выбора. Это связывает смысл с элементом и делает форму более читаемой. <code>for</code> атрибут на <code>label</code> теге явно связывает этот <code>label</code> с контролем формы и используется для чтения с экрана. Вы узнали о переключателях и их ярлыках в уроке в разделе «Основы HTML». В этом уроке мы завернули элемент ввода переключателя внутри элемента <code>label</code> вместе с текстом ярлыка, чтобы сделать текст кликабельным. Другой способ добиться этого - использовать атрибут <code>for</code> как объяснено в этом уроке. Значение атрибута <code>for</code> должно быть таким же, как значение атрибута <code>id</code> элемента управления формой. Вот пример: <blockquote> &lt;Форма&gt; <br> &lt;label for = &quot;name&quot;&gt; Имя: &lt;/ label&gt; <br> &lt;input type = &quot;text&quot; id = &quot;name&quot; name = &quot;name&quot;&gt; <br> &lt;/ Форма&gt; <br></blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat рассчитывает на большой интерес к его вдумчивым сообщениям в блоге и хочет включить форму для регистрации электронной почты. Добавьте <code>for</code> атрибут к <code>label</code> электронной почты, которая соответствует <code>id</code> на его <code>input</code> поле. </section> <section id='instructions'>
Camper Cat рассчитывает на большой интерес к его вдумчивым сообщениям в блоге и хочет включить форму для регистрации электронной почты. Добавьте <code>for</code> атрибут к <code>label</code> электронной почты, которая соответствует <code>id</code> на его <code>input</code> поле.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Ваш код должен иметь атрибут <code>for</code> в теге <code>label</code>, который не является пустым.' - text: Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.
testString: 'assert($("label").attr("for"), "Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.");' testString: assert($('label').attr('for'));
- text: 'Значение атрибута <code>for</code> должно соответствовать значению <code>id</code> электронной почты <code>input</code>.' - text: Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.
testString: 'assert($("label").attr("for") == "email", "Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.");' testString: assert($('label').attr('for') == 'email');
``` ```
@ -69,14 +74,44 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<section>
<form>
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<input type="submit" name="submit" value="Submit">
</form>
</section>
<article>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
``` ```
</section> </section>

43
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.russian.md
View File

@ -2,25 +2,30 @@
id: 587d778e367417b2b2512aab id: 587d778e367417b2b2512aab
title: Improve Readability with High Contrast Text title: Improve Readability with High Contrast Text
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cKb3nCq
forumTopicId: 301017
localeTitle: Улучшить читаемость с помощью текста с высоким контрастом localeTitle: Улучшить читаемость с помощью текста с высоким контрастом
--- ---
## Description ## Description
<section id="description"> Низкий контраст между цветами текста и фона может затруднить чтение текста. Достаточный контраст улучшает читаемость вашего текста, но что именно означает «достаточный»? Рекомендации по доступности веб-содержимого (WCAG) рекомендуют коэффициент контрастности не ниже 4,5:1 для обычного текста. Отношение рассчитывается путем сравнения относительных значений яркости двух цветов. Оно колеблется от 1:1 для того же цвета или без контраста до 21:1 для белого против черного, самого сильного контраста. В Интернете доступно множество инструментов для проверки контраста, которые вычисляют это соотношение. </section> <section id='description'>
Низкий контраст между цветами текста и фона может затруднить чтение текста. Достаточный контраст улучшает читаемость вашего текста, но что именно означает «достаточный»? Рекомендации по доступности веб-содержимого (WCAG) рекомендуют коэффициент контрастности не ниже 4,5:1 для обычного текста. Отношение рассчитывается путем сравнения относительных значений яркости двух цветов. Оно колеблется от 1:1 для того же цвета или без контраста до 21:1 для белого против черного, самого сильного контраста. В Интернете доступно множество инструментов для проверки контраста, которые вычисляют это соотношение.
</section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat выбрал светло-серый текст на белом фоне для его недавнего сообщения в блоге, такая пара имеет коэффициент контрастности 1,5:1, что затрудняет чтение текста. Измените <code>color</code> текста с текущего серого ( <code>#D3D3D3</code> ) на более темный серый ( <code>#636363</code> ), чтобы улучшить коэффициент контрастности до 6:1. </section> <section id='instructions'>
Camper Cat выбрал светло-серый текст на белом фоне для его недавнего сообщения в блоге, такая пара имеет коэффициент контрастности 1,5:1, что затрудняет чтение текста. Измените <code>color</code> текста с текущего серого ( <code>#D3D3D3</code> ) на более темный серый ( <code>#636363</code> ), чтобы улучшить коэффициент контрастности до 6:1.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен изменить <code>color</code> текста для <code>body</code> на темный серый цвет. - text: Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.
testString: 'assert($("body").css("color") == "rgb(99, 99, 99)", "Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.");' testString: assert($('body').css('color') == 'rgb(99, 99, 99)');
- text: Ваш код не должен изменять <code>background-color</code> для <code>body</code> . - text: Your code should not change the <code>background-color</code> for the <code>body</code>.
testString: 'assert($("body").css("background-color") == "rgb(255, 255, 255)", "Your code should not change the <code>background-color</code> for the <code>body</code>.");' testString: assert($('body').css('background-color') == 'rgb(255, 255, 255)');
``` ```
@ -55,14 +60,30 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <head>
<style>
body {
color: #636363;
background-color: #FFF;
}
</style>
</head>
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<article>
<h2>A Word on the Recent Catnip Doping Scandal</h2>
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
</article>
</body>
``` ```
</section> </section>

36
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.russian.md
View File

@ -2,28 +2,31 @@
id: 587d774e367417b2b2512a9f id: 587d774e367417b2b2512a9f
title: Jump Straight to the Content Using the main Element title: Jump Straight to the Content Using the main Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cPp7zuE
forumTopicId: 301018
localeTitle: Перейти прямо к контенту, используя элемент main localeTitle: Перейти прямо к контенту, используя элемент main
--- ---
## Description ## Description
<section id='description'>
<section id="description"> В HTML5 появилось несколько новых элементов, которые предоставляют разработчикам больше опций, а также включают функции доступности. Эти теги включают в себя <code>main</code>, <code>header</code>, <code>footer</code>, <code>nav</code>, <code>article</code> и <code>section</code>, среди прочих. По умолчанию браузер отображает эти элементы аналогично традиционному <code>div</code> . Однако использование их в соответствующих случаях дает дополнительный смысл в вашей разметке. Имя тега может указывать на тип информации, который он содержит, что добавляет семантический смысл этому контенту. Вспомогательные технологии могут получить доступ к этой информации, чтобы предоставить пользователям более подробные сведения о странице или вариантах навигации. В HTML5 появилось несколько новых элементов, которые предоставляют разработчикам больше опций, а также включают функции доступности. Эти теги включают в себя <code>main</code>, <code>header</code>, <code>footer</code>, <code>nav</code>, <code>article</code> и <code>section</code>, среди прочих. По умолчанию браузер отображает эти элементы аналогично традиционному <code>div</code> . Однако использование их в соответствующих случаях дает дополнительный смысл в вашей разметке. Имя тега может указывать на тип информации, который он содержит, что добавляет семантический смысл этому контенту. Вспомогательные технологии могут получить доступ к этой информации, чтобы предоставить пользователям более подробные сведения о странице или вариантах навигации.
Элемент <code>main</code> используется для обертывания (как вы уже догадались) основного содержимого, и на странице должно быть только один такой элемент. Он предназначен для того, чтобы обертывать информацию, связанную с центральной темой вашей страницы. Он не должен включать элементы, которые повторяются на разных страницах, например, ссылки на навигацию или баннеры. <code>main</code> тег также имеет встроенную ориентирную функцию, которую вспомогательные технологии могут использовать для быстрого перехода к основному контенту. Если вы когда-либо видели ссылку «Перейти к основному содержимому» в верхней части страницы, использование тега <code>main</code> автоматически предоставляет вспомогательные устройства, которые имеют функциональность. </section> Элемент <code>main</code> используется для обертывания (как вы уже догадались) основного содержимого, и на странице должно быть только один такой элемент. Он предназначен для того, чтобы обертывать информацию, связанную с центральной темой вашей страницы. Он не должен включать элементы, которые повторяются на разных страницах, например, ссылки на навигацию или баннеры. <code>main</code> тег также имеет встроенную ориентирную функцию, которую вспомогательные технологии могут использовать для быстрого перехода к основному контенту. Если вы когда-либо видели ссылку «Перейти к основному содержимому» в верхней части страницы, использование тега <code>main</code> автоматически предоставляет вспомогательные устройства, которые имеют функциональность.
</section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat имеет несколько больших идей для своей страницы оружия ниндзя. Помогите ему настроить свою разметку, добавив открывающие и закрывающие <code>main</code>-теги между <code>header</code> и <code>footer</code> (из других задач). Пока не оставляйте тег <code>main</code> пустым. </section> <section id='instructions'>
Camper Cat имеет несколько больших идей для своей страницы оружия ниндзя. Помогите ему настроить свою разметку, добавив открывающие и закрывающие <code>main</code>-теги между <code>header</code> и <code>footer</code> (из других задач). Пока не оставляйте тег <code>main</code> пустым.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: В вашем коде должен быть один <code>main</code> тег. - text: Your code should have one <code>main</code> tag.
testString: 'assert($("main").length == 1, "В вашем коде должен быть один <code>main</code> тег.");' testString: assert($('main').length == 1);
- text: <code>main</code> теги должны быть между закрывающем тегом <code>header</code> и открывающим тегом <code>footer</code>. - text: The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.
testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), "<code>main</code> теги должны быть между закрывающем тегом <code>header</code> и открывающим тегом <code>footer</code>.");' testString: assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
``` ```
@ -47,14 +50,19 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <header>
<h1>Weapons of the Ninja</h1>
</header>
<main>
</main>
<footer></footer>
``` ```
</section> </section>

39
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.russian.md
View File

@ -2,25 +2,30 @@
id: 587d774c367417b2b2512a9d id: 587d774c367417b2b2512a9d
title: Know When Alt Text Should be Left Blank title: Know When Alt Text Should be Left Blank
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cM9P4t2
localeTitle: 'Знать, когда Alt-текст должен оставаться пустым' forumTopicId: 301019
localeTitle: Знать, когда Alt-текст должен оставаться пустым
--- ---
## Description ## Description
<section id="description"> В последней задаче вы узнали, что включение атрибута <code>alt</code> в теги img является обязательным. Однако иногда изображения сгруппированы с надписью, уже описывающей их, или используются только для украшения. В этих случаях <code>alt</code> текст может показаться излишним или ненужным. В ситуациях, когда изображение уже объясняется текстовым контентом или не добавляет значения для страницы, <code>img</code> прежнему нуждается в атрибуте <code>alt</code>, но его можно установить в пустую строку. Вот пример: <code>&lt;img src=&quot;visualDecoration.jpeg&quot; alt=&quot;&quot;&gt;</code> Фоновые изображения обычно подпадают под «декоративную» метку. Тем не менее, они обычно применяются с правилами CSS и, следовательно, не являются частью процесса чтения расшифровок экрана. <strong>Заметка</strong> <br> Для изображений с надписью вы можете захотеть включить текст <code>alt</code>, так как он помогает поисковым системам вносить в каталог содержимое изображения. </section> <section id='description'>
В последней задаче вы узнали, что включение атрибута <code>alt</code> в теги img является обязательным. Однако иногда изображения сгруппированы с надписью, уже описывающей их, или используются только для украшения. В этих случаях <code>alt</code> текст может показаться излишним или ненужным. В ситуациях, когда изображение уже объясняется текстовым контентом или не добавляет значения для страницы, <code>img</code> прежнему нуждается в атрибуте <code>alt</code>, но его можно установить в пустую строку. Вот пример: <code>&lt;img src=&quot;visualDecoration.jpeg&quot; alt=&quot;&quot;&gt;</code> Фоновые изображения обычно подпадают под «декоративную» метку. Тем не менее, они обычно применяются с правилами CSS и, следовательно, не являются частью процесса чтения расшифровок экрана. <strong>Заметка</strong> <br> Для изображений с надписью вы можете захотеть включить текст <code>alt</code>, так как он помогает поисковым системам вносить в каталог содержимое изображения.
</section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat закодировал каркас страницы для части блога своего сайта. Он планирует добавить визуальный разрыв между двумя статьями с декоративным изображением самурайского меча. Добавьте атрибут <code>alt</code> в тег <code>img</code> и установите его в пустую строку. (Обратите внимание, что изображение <code>src</code> не связано с фактическим файлом - не беспокойтесь, что на дисплее нет мечей.) </section> <section id='instructions'>
Camper Cat закодировал каркас страницы для части блога своего сайта. Он планирует добавить визуальный разрыв между двумя статьями с декоративным изображением самурайского меча. Добавьте атрибут <code>alt</code> в тег <code>img</code> и установите его в пустую строку. (Обратите внимание, что изображение <code>src</code> не связано с фактическим файлом - не беспокойтесь, что на дисплее нет мечей.)
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш тег <code>img</code> должен иметь атрибут <code>alt</code>. - text: Your <code>img</code> tag should have an <code>alt</code> attribute.
testString: 'assert(!($("img").attr("alt") == undefined), "Your <code>img</code> tag should have an <code>alt</code> attribute.");' testString: assert(!($('img').attr('alt') == undefined));
- text: Атрибут <code>alt</code> должен быть установлен в пустую строку. - text: The <code>alt</code> attribute should be set to an empty string.
testString: 'assert($("img").attr("alt") == "", "The <code>alt</code> attribute should be set to an empty string.");' testString: assert($('img').attr('alt') == '');
``` ```
@ -49,14 +54,24 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <h1>Deep Thoughts with Master Camper Cat</h1>
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>To Come...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>To Come...</p>
</article>
``` ```
</section> </section>

117
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.russian.md
View File

@ -2,29 +2,34 @@
id: 587d778d367417b2b2512aaa id: 587d778d367417b2b2512aaa
title: Make Elements Only Visible to a Screen Reader by Using Custom CSS title: Make Elements Only Visible to a Screen Reader by Using Custom CSS
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cJ8QGkhJ
forumTopicId: 301020
localeTitle: Сделать элементы доступными только для чтения с экрана с помощью пользовательского CSS localeTitle: Сделать элементы доступными только для чтения с экрана с помощью пользовательского CSS
--- ---
## Description ## Description
<section id="description"> Вы заметили, что все прикладные проблемы доступности до сих пор не использовали CSS? Это должно показать важность контура логического документа и использовать семантически значимые теги вокруг вашего контента, прежде чем вводить визуальный дизайн. Однако магия CSS также может улучшить доступность вашей страницы, когда вы хотите визуально скрывать контент, предназначенный только для чтения с экрана. Это происходит, когда информация находится в визуальном формате (например, диаграмме), но пользователям экрана чтения требуется альтернативная презентация (например, таблица) для доступа к данным. CSS используется для размещения элементов экрана только для чтения с визуальной области окна браузера. Вот пример правил CSS, которые это делают: <blockquote> .sr-only { <br> позиция: абсолютная; <br> left: -10000px; <br> ширина: 1px; <br> высота: 1шт; <br> top: auto; <br> переполнение: скрыто; <br> } </blockquote> <strong>Заметка</strong> <br> Следующие подходы CSS НЕ будут делать то же самое: <ul><li> <code>display: none;</code> или <code>visibility: hidden;</code> скрывает контент для всех, включая пользователей с экрана </li><li> Нулевые значения для размеров пикселей, такие как <code>width: 0px; height: 0px;</code> удаляет этот элемент из потока вашего документа, то есть читатели экрана будут игнорировать его </li></ul></section> <section id='description'>
Вы заметили, что все прикладные проблемы доступности до сих пор не использовали CSS? Это должно показать важность контура логического документа и использовать семантически значимые теги вокруг вашего контента, прежде чем вводить визуальный дизайн. Однако магия CSS также может улучшить доступность вашей страницы, когда вы хотите визуально скрывать контент, предназначенный только для чтения с экрана. Это происходит, когда информация находится в визуальном формате (например, диаграмме), но пользователям экрана чтения требуется альтернативная презентация (например, таблица) для доступа к данным. CSS используется для размещения элементов экрана только для чтения с визуальной области окна браузера. Вот пример правил CSS, которые это делают: <blockquote> .sr-only { <br> позиция: абсолютная; <br> left: -10000px; <br> ширина: 1px; <br> высота: 1шт; <br> top: auto; <br> переполнение: скрыто; <br> } </blockquote> <strong>Заметка</strong> <br> Следующие подходы CSS НЕ будут делать то же самое: <ul><li> <code>display: none;</code> или <code>visibility: hidden;</code> скрывает контент для всех, включая пользователей с экрана </li><li> Нулевые значения для размеров пикселей, такие как <code>width: 0px; height: 0px;</code> удаляет этот элемент из потока вашего документа, то есть читатели экрана будут игнорировать его </li></ul>
</section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat создал действительно классную стеклянную гистограмму для своей учебной страницы и помещал данные в таблицу для своих слабовидящих пользователей. В таблице уже есть класс <code>sr-only</code> , но правила CSS еще не заполнены. Дайте <code>position</code> абсолютное значение, <code>left</code> значение a -10000px, а также <code>width</code> и <code>height</code> как значения 1px. </section> <section id='instructions'>
Camper Cat создал действительно классную стеклянную гистограмму для своей учебной страницы и помещал данные в таблицу для своих слабовидящих пользователей. В таблице уже есть класс <code>sr-only</code> , но правила CSS еще не заполнены. Дайте <code>position</code> абсолютное значение, <code>left</code> значение a -10000px, а также <code>width</code> и <code>height</code> как значения 1px.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен установить для свойства <code>sr-only</code> свойство <code>position</code> значение абсолютное. - text: Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.
testString: 'assert($(".sr-only").css("position") == "absolute", "Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.");' testString: assert($('.sr-only').css('position') == 'absolute');
- text: Ваш код должен установить свойство <code>left</code> класса <code>sr-only</code> равным -10000px. - text: Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.
testString: 'assert($(".sr-only").css("left") == "-10000px", "Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.");' testString: assert($('.sr-only').css('left') == '-10000px');
- text: Ваш код должен установить свойство <code>width</code> класса <code>sr-only</code> равным 1 пикселю. - text: Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.
testString: 'assert(code.match(/width:\s*?1px/gi), "Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.");' testString: assert(code.match(/width:\s*?1px/gi));
- text: Ваш код должен установить свойство <code>height</code> класса <code>sr-only</code> равным 1 пикселю. - text: Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.
testString: 'assert(code.match(/height:\s*?1px/gi), "Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.");' testString: assert(code.match(/height:\s*?1px/gi));
``` ```
@ -125,14 +130,96 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <head>
<style>
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
</style>
</head>
<body>
<header>
<h1>Training</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<section>
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
<figure>
<!-- Stacked bar chart of weekly training-->
<p>[Stacked bar chart]</p>
<br />
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
</figure>
<table class="sr-only">
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
<thead>
<tr>
<th></th>
<th scope="col">Stealth &amp; Agility</th>
<th scope="col">Combat</th>
<th scope="col">Weapons</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Week One</th>
<td>3</td>
<td>5</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<th scope="row">Week Two</th>
<td>4</td>
<td>5</td>
<td>3</td>
<td>12</td>
</tr>
<tr>
<th scope="row">Week Three</th>
<td>4</td>
<td>6</td>
<td>3</td>
<td>13</td>
</tr>
</tbody>
</table>
</section>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
<footer>&copy; 2018 Camper Cat</footer>
</body>
``` ```
</section> </section>

22
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.russian.md
View File

@ -7,10 +7,14 @@ localeTitle: Сделать ссылки навигационными с клю
--- ---
## Description ## Description
<section id="description"> HTML предлагает атрибут <code>accesskey</code> для указания сочетания клавиш для активации или приведения фокуса к элементу. Это может сделать навигацию более эффективной для пользователей только для клавиатуры. HTML5 позволяет использовать этот атрибут для любого элемента, но особенно полезен, когда он используется с интерактивными. Сюда входят ссылки, кнопки и элементы управления формой. Вот пример: <code>&lt;button accesskey=&quot;b&quot;&gt;Important Button&lt;/button&gt;</code> </section> <section id='description'>
HTML предлагает атрибут <code>accesskey</code> для указания сочетания клавиш для активации или приведения фокуса к элементу. Это может сделать навигацию более эффективной для пользователей только для клавиатуры. HTML5 позволяет использовать этот атрибут для любого элемента, но особенно полезен, когда он используется с интерактивными. Сюда входят ссылки, кнопки и элементы управления формой. Вот пример: <code>&lt;button accesskey=&quot;b&quot;&gt;Important Button&lt;/button&gt;</code>
</section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat хочет, чтобы ссылки вокруг двух названий статей в блогах имели быстрые клавиши, чтобы пользователи сайта могли быстро перейти к полной истории. Добавьте атрибут <code>accesskey</code> к обоим ссылкам и установите первый для «g» (для Гарфилда), а второй - «c» (для Chuck Norris). </section> <section id='instructions'>
Camper Cat хочет, чтобы ссылки вокруг двух названий статей в блогах имели быстрые клавиши, чтобы пользователи сайта могли быстро перейти к полной истории. Добавьте атрибут <code>accesskey</code> к обоим ссылкам и установите первый для «g» (для Гарфилда), а второй - «c» (для Chuck Norris).
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
@ -18,14 +22,13 @@ localeTitle: Сделать ссылки навигационными с клю
```yml ```yml
tests: tests:
- text: Ваш код должен добавить атрибут <code>accesskey</code> к тегу <code>a</code> с <code>id</code> «first». - text: Ваш код должен добавить атрибут <code>accesskey</code> к тегу <code>a</code> с <code>id</code> «first».
testString: 'assert($("#first").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".");' testString: assert($('#first').attr('accesskey'));
- text: Ваш код должен добавить атрибут <code>accesskey</code> к тегу <code>a</code> с <code>id</code> «второй». - text: Ваш код должен добавить атрибут <code>accesskey</code> к тегу <code>a</code> с <code>id</code> «второй».
testString: 'assert($("#second").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".");' testString: assert($('#second').attr('accesskey'));
- text: 'Ваш код должен установить атрибут <code>accesskey</code> в теге <code>a</code> с <code>id</code> «first» до «g». Обратите внимание, что дело имеет значение.' - text: 'Ваш код должен установить атрибут <code>accesskey</code> в теге <code>a</code> с <code>id</code> «first» до «g». Обратите внимание, что дело имеет значение.'
testString: 'assert($("#first").attr("accesskey") == "g", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.");' testString: assert($('#first').attr('accesskey') == 'g');
- text: 'Ваш код должен установить атрибут <code>accesskey</code> в теге <code>a</code> с <code>id</code> «second» до «c». Обратите внимание, что дело имеет значение.' - text: 'Ваш код должен установить атрибут <code>accesskey</code> в теге <code>a</code> с <code>id</code> «second» до «c». Обратите внимание, что дело имеет значение.'
testString: 'assert($("#second").attr("accesskey") == "c", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.");' testString: assert($('#second').attr('accesskey') == 'c');
``` ```
</section> </section>
@ -63,14 +66,13 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required // solution required
``` ```
</section> </section>

63
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.russian.md
View File

@ -2,27 +2,32 @@
id: 587d7788367417b2b2512aa3 id: 587d7788367417b2b2512aa3
title: Make Screen Reader Navigation Easier with the footer Landmark title: Make Screen Reader Navigation Easier with the footer Landmark
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/crVrDh8
forumTopicId: 301022
localeTitle: Улучшение навигации в Screen Reader с помощью нижнего колонтитула Landmark localeTitle: Улучшение навигации в Screen Reader с помощью нижнего колонтитула Landmark
--- ---
## Description ## Description
<section id="description"> Подобно <code>header</code> и <code>nav</code>, элемент <code>footer</code> имеет встроенную функцию ориентира, которая позволяет вспомогательным устройствам быстро перейти к ней. Он в основном используется для хранения информации об авторских правах или ссылок на связанные документы, которые обычно располагаются внизу страницы. </section> <section id='description'>
Подобно <code>header</code> и <code>nav</code>, элемент <code>footer</code> имеет встроенную функцию ориентира, которая позволяет вспомогательным устройствам быстро перейти к ней. Он в основном используется для хранения информации об авторских правах или ссылок на связанные документы, которые обычно располагаются внизу страницы.
</section>
## Instructions ## Instructions
<section id="instructions"> Учебная страница Camper Cat продвигается вперед. Измените <code>div</code>, который он использовал, чтобы связать свою информацию об авторских правах в нижней части страницы с элементом нижнего <code>footer</code>. </section> <section id='instructions'>
Учебная страница Camper Cat продвигается вперед. Измените <code>div</code>, который он использовал, чтобы связать свою информацию об авторских правах в нижней части страницы с элементом нижнего <code>footer</code>.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: В вашем коде должен быть один <code>footer</code> тег. - text: Your code should have one <code>footer</code> tag.
testString: 'assert($("footer").length == 1, "Your code should have one <code>footer</code> tag.");' testString: assert($('footer').length == 1);
- text: У вашего кода не должно быть никаких тегов <code>div</code>. - text: Your code should not have any <code>div</code> tags.
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");' testString: assert($('div').length == 0);
- text: Ваш код должен иметь тег открытия и закрытия <code>footer</code> . - text: Your code should have an opening and closing <code>footer</code> tag.
testString: 'assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g), "Your code should have an opening and closing <code>footer</code> tag.");' testString: assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g));
``` ```
@ -73,14 +78,46 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <body>
<header>
<h1>Training</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<main>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
<footer>&copy; 2018 Camper Cat</footer>
</body>
``` ```
</section> </section>

58
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.russian.md
View File

@ -2,29 +2,34 @@
id: 587d7787367417b2b2512aa1 id: 587d7787367417b2b2512aa1
title: Make Screen Reader Navigation Easier with the header Landmark title: Make Screen Reader Navigation Easier with the header Landmark
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cB76vtv
forumTopicId: 301023
localeTitle: Сделать экранную навигацию проще с заголовком Landmark localeTitle: Сделать экранную навигацию проще с заголовком Landmark
--- ---
## Description ## Description
<section id="description"> Следующий элемент HTML5, который добавляет смысловое значение и улучшает доступность, является тегом <code>header</code> . Он используется для обертывания вводной информации или навигационных ссылок для своего родительского тега и хорошо работает вокруг контента, который повторяется вверху на нескольких страницах. <code>header</code> разделяет встроенную функцию ориентира, которую вы видели с <code>main</code> , позволяя вспомогательным технологиям быстро перейти к этому контенту. <strong>Заметка</strong> <br> <code>header</code> предназначен для использования в теге <code>body</code> вашего HTML-документа. Это отличается от <code>head</code> элемента, который содержит заголовок страницы, мета - информации и т.д. </section> <section id='description'>
Следующий элемент HTML5, который добавляет смысловое значение и улучшает доступность, является тегом <code>header</code> . Он используется для обертывания вводной информации или навигационных ссылок для своего родительского тега и хорошо работает вокруг контента, который повторяется вверху на нескольких страницах. <code>header</code> разделяет встроенную функцию ориентира, которую вы видели с <code>main</code> , позволяя вспомогательным технологиям быстро перейти к этому контенту. <strong>Заметка</strong> <br> <code>header</code> предназначен для использования в теге <code>body</code> вашего HTML-документа. Это отличается от <code>head</code> элемента, который содержит заголовок страницы, мета - информации и т.д.
</section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat пишет отличные статьи о тренировках ниндзя и хочет добавить страницу на свой сайт. Измените верхний <code>div</code> который в настоящее время содержит <code>h1</code> для тега <code>header</code> . </section> <section id='instructions'>
Camper Cat пишет отличные статьи о тренировках ниндзя и хочет добавить страницу на свой сайт. Измените верхний <code>div</code> который в настоящее время содержит <code>h1</code> для тега <code>header</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен иметь один тег <code>header</code> . - text: Your code should have one <code>header</code> tag.
testString: 'assert($("header").length == 1, "Your code should have one <code>header</code> tag.");' testString: assert($('header').length == 1);
- text: Ваши теги <code>header</code> должны обернуться вокруг <code>h1</code> . - text: Your <code>header</code> tags should wrap around the <code>h1</code>.
testString: 'assert($("header").children("h1").length == 1, "Your <code>header</code> tags should wrap around the <code>h1</code>.");' testString: assert($('header').children('h1').length == 1);
- text: У вашего кода не должно быть никаких тегов <code>div</code> . - text: Your code should not have any <code>div</code> tags.
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");' testString: assert($('div').length == 0);
- text: 'Убедитесь, что ваш элемент <code>header</code> имеет закрывающий тег.' - text: Make sure your <code>header</code> element has a closing tag.
testString: 'assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length, "Make sure your <code>header</code> element has a closing tag.");' testString: assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length);
``` ```
@ -66,14 +71,37 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <body>
<header>
<h1>Training with Camper Cat</h1>
</header>
<main>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
</body>
``` ```
</section> </section>

64
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.russian.md
View File

@ -2,29 +2,34 @@
id: 587d7788367417b2b2512aa2 id: 587d7788367417b2b2512aa2
title: Make Screen Reader Navigation Easier with the nav Landmark title: Make Screen Reader Navigation Easier with the nav Landmark
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/czVwWSv
forumTopicId: 301024
localeTitle: Сделать навигацию с помощью экрана лучше с помощью навигационной системы Landmark localeTitle: Сделать навигацию с помощью экрана лучше с помощью навигационной системы Landmark
--- ---
## Description ## Description
<section id="description"> Элемент <code>nav</code> - это еще один элемент HTML5 со встроенной функцией ориентира для удобной навигации на экране. Этот тег предназначен для обхода основных ссылок навигации на вашей странице. Если в нижней части страницы повторяются ссылки на сайты, нет необходимости разметки тегов с помощью тега <code>nav</code> . Использование <code>footer</code> (в следующей задаче) достаточно. </section> <section id='description'>
Элемент <code>nav</code> - это еще один элемент HTML5 со встроенной функцией ориентира для удобной навигации на экране. Этот тег предназначен для обхода основных ссылок навигации на вашей странице. Если в нижней части страницы повторяются ссылки на сайты, нет необходимости разметки тегов с помощью тега <code>nav</code> . Использование <code>footer</code> (в следующей задаче) достаточно.
</section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat включил навигационные ссылки в верхней части своей учебной страницы, но завернул их в <code>div</code> . Измените <code>div</code> на тег <code>nav</code> чтобы улучшить доступность на его странице. </section> <section id='instructions'>
Camper Cat включил навигационные ссылки в верхней части своей учебной страницы, но завернул их в <code>div</code> . Измените <code>div</code> на тег <code>nav</code> чтобы улучшить доступность на его странице.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: В вашем коде должен быть один тег <code>nav</code> . - text: Your code should have one <code>nav</code> tag.
testString: 'assert($("nav").length == 1, "Your code should have one <code>nav</code> tag.");' testString: assert($('nav').length == 1);
- text: Теги вашего <code>nav</code> должны быть обернуты вокруг <code>ul</code> и элементов списка. - text: Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.
testString: 'assert($("nav").children("ul").length == 1, "Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.");' testString: assert($('nav').children('ul').length == 1);
- text: У вашего кода не должно быть никаких тегов <code>div</code> . - text: Your code should not have any <code>div</code> tags.
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");' testString: assert($('div').length == 0);
- text: 'Убедитесь, что ваш элемент <code>nav</code> имеет закрывающий тег.' - text: Make sure your <code>nav</code> element has a closing tag.
testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length, "Make sure your <code>nav</code> element has a closing tag.");' testString: assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length);
``` ```
@ -72,14 +77,43 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <body>
<header>
<h1>Training with Camper Cat</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<main>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
</body>
``` ```
</section> </section>

75
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.russian.md
View File

@ -2,29 +2,34 @@
id: 587d778c367417b2b2512aa9 id: 587d778c367417b2b2512aa9
title: Standardize Times with the HTML5 datetime Attribute title: Standardize Times with the HTML5 datetime Attribute
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cmzMgtz
forumTopicId: 301025
localeTitle: Стандартизировать время с атрибутом datetime HTML5 localeTitle: Стандартизировать время с атрибутом datetime HTML5
--- ---
## Description ## Description
<section id="description"> Продолжая тему даты, HTML5 также представил элемент <code>time</code> вместе с атрибутом <code>datetime</code> для стандартизации времени. Это встроенный элемент, который может привязывать дату или время на странице. Действительный формат этой даты <code>datetime</code> атрибутом <code>datetime</code> . Это значение, доступное с помощью вспомогательных устройств. Это помогает избежать путаницы, заявляя стандартизированную версию времени, даже если она написана неформальным или разговорным образом в тексте. Вот пример: <code>&lt;p&gt;Master Camper Cat officiated the cage match between Goro and Scorpion &lt;time datetime=&quot;2013-02-13&quot;&gt;last Wednesday&lt;/time&gt;, which ended in a draw.&lt;/p&gt;</code> </section> <section id='description'>
Продолжая тему даты, HTML5 также представил элемент <code>time</code> вместе с атрибутом <code>datetime</code> для стандартизации времени. Это встроенный элемент, который может привязывать дату или время на странице. Действительный формат этой даты <code>datetime</code> атрибутом <code>datetime</code> . Это значение, доступное с помощью вспомогательных устройств. Это помогает избежать путаницы, заявляя стандартизированную версию времени, даже если она написана неформальным или разговорным образом в тексте. Вот пример: <code>&lt;p&gt;Master Camper Cat officiated the cage match between Goro and Scorpion &lt;time datetime=&quot;2013-02-13&quot;&gt;last Wednesday&lt;/time&gt;, which ended in a draw.&lt;/p&gt;</code>
</section>
## Instructions ## Instructions
<section id="instructions"> Результаты опроса Camter Cat&#39;s Mortal Kombat в! Обведите тег <code>time</code> вокруг текста «Четверг, 15 сентября &lt;sup&gt; th &lt;/ sup&gt;» и добавьте к нему атрибут <code>datetime</code> установленный в «2016-09-15». </section> <section id='instructions'>
Результаты опроса Camter Cat&#39;s Mortal Kombat в! Обведите тег <code>time</code> вокруг текста «Четверг, 15 сентября &lt;sup&gt; th &lt;/ sup&gt;» и добавьте к нему атрибут <code>datetime</code> установленный в «2016-09-15».
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Ваши теги <code>time</code> должны обтекать текст «Четверг, 15 сентября &lt;sup&gt; th &lt;/ sup&gt;».' - text: Your code should have a <code>p</code> element which includes the text "Thank you to everyone for responding to Master Camper Cat's survey." and include a <code>time</code> element.
testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your <code>time</code> tags should wrap around the text "Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;".");' testString: assert(timeElement.length);
- text: Ваш тег <code>time</code> должен иметь атрибут <code>datetime</code> который не является пустым. - text: Your added <code>time</code> tags should wrap around the text "Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;".
testString: 'assert($("time").attr("datetime"), "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.");' testString: assert(timeElement.length && $(timeElement).html().trim() === "Thursday, September 15<sup>th</sup>");
- text: Ваш атрибут <code>datetime</code> должен быть установлен в значение 2016-09-15. - text: Your added <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.
testString: 'assert($("time").attr("datetime") === "2016-09-15", "Your <code>datetime</code> attribute should be set to a value of 2016-09-15.");' testString: assert(datetimeAttr && datetimeAttr.length);
- text: 'Убедитесь, что ваш элемент <code>time</code> имеет закрывающий тег.' - text: Your added <code>datetime</code> attribute should be set to a value of 2016-09-15.
testString: 'assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4, "Make sure your <code>time</code> element has a closing tag.");' testString: assert(datetimeAttr === "2016-09-15");
``` ```
@ -72,14 +77,58 @@ tests:
</div> </div>
### After Tests
<div id='html-teardown'>
```html
<script>
const pElement = $("article > p")
.filter((_, elem) => $(elem).text().includes("Thank you to everyone for responding to Master Camper Cat's survey."));
const timeElement = pElement[0] ? $(pElement[0]).find("time") : null;
const datetimeAttr = $(timeElement).attr("datetime");
</script>
```
</div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <body>
<header>
<h1>Tournaments</h1>
</header>
<article>
<h2>Mortal Kombat Tournament Survey Results</h2>
<!-- Add your code below this line -->
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
<!-- Add your code above this line -->
<section>
<h3>Comments:</h3>
<article>
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
<p>Johnny Cage better be there, I'll finish him!</p>
</article>
<article>
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
<p>Wow, much combat, so mortal.</p>
</article>
<article>
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
<p>Looks like I'll be busy that day.</p>
</article>
</section>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
``` ```
</section> </section>

43
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.russian.md
View File

@ -2,25 +2,34 @@
id: 587d774d367417b2b2512a9e id: 587d774d367417b2b2512a9e
title: Use Headings to Show Hierarchical Relationships of Content title: Use Headings to Show Hierarchical Relationships of Content
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cqVEktm
forumTopicId: 301026
localeTitle: Использовать заголовки для отображения иерархических отношений содержимого localeTitle: Использовать заголовки для отображения иерархических отношений содержимого
--- ---
## Description ## Description
<section id="description"> Заголовки (элементы от <code>h1</code> до <code>h6</code> ) являются основными тегами, которые помогают сформировать структуру и заголовки вашего контента. Программы экранного доступа (скринридеры) могут быть настроены только на чтение заголовков на странице, так пользователь получит краткое содержание страницы. Поэтому важно, чтобы теги-заголовки в разметке имели семантическое значение и отношение друг к другу, а не просто использовались на основе размера заголовка. <em>Семантическое значение</em> – это когда тег, в который вы обернули содержимое, указывает на тип информации внутри него. Если бы вы писали статью с введением, основной частью и заключением, то не имело бы смысла поместить заключение в виде подраздела к основной части вашей статьи. Это должен быть отдельный раздел. Точно так же теги заголовков на веб-странице должны идти в определенном порядке и отражать иерархию вашего контента. Заголовки с равным (или более высоким) рангом озаглавливают новые разделы, заголовки с меньшим рангом являются их подразделами. Например, страница с элементом <code>h2</code> под которым идут несколько подразделов с элементом <code>h4</code> будет сбивать с толку пользователя, который использует программу экранного доступа (скринридер). С шестью вариантами заголовков заманчиво выбирать тег, только потому, что он лучше выглядит в браузере, но для изменения размеров заголовков вы можете использоваться CSS. И последнее, на каждой странице всегда должен быть один (и только один) элемент <code>h1</code>, который является главным заголовком для всего вашего контента. Этот и другие заголовки частично используются поисковыми системами, чтобы понять, что находится на странице. </section> <section id='description'>
Заголовки (элементы от <code>h1</code> до <code>h6</code> ) являются основными тегами, которые помогают сформировать структуру и заголовки вашего контента. Программы экранного доступа (скринридеры) могут быть настроены только на чтение заголовков на странице, так пользователь получит краткое содержание страницы. Поэтому важно, чтобы теги-заголовки в разметке имели семантическое значение и отношение друг к другу, а не просто использовались на основе размера заголовка. <em>Семантическое значение</em> – это когда тег, в который вы обернули содержимое, указывает на тип информации внутри него. Если бы вы писали статью с введением, основной частью и заключением, то не имело бы смысла поместить заключение в виде подраздела к основной части вашей статьи. Это должен быть отдельный раздел. Точно так же теги заголовков на веб-странице должны идти в определенном порядке и отражать иерархию вашего контента. Заголовки с равным (или более высоким) рангом озаглавливают новые разделы, заголовки с меньшим рангом являются их подразделами. Например, страница с элементом <code>h2</code> под которым идут несколько подразделов с элементом <code>h4</code> будет сбивать с толку пользователя, который использует программу экранного доступа (скринридер). С шестью вариантами заголовков заманчиво выбирать тег, только потому, что он лучше выглядит в браузере, но для изменения размеров заголовков вы можете использоваться CSS. И последнее, на каждой странице всегда должен быть один (и только один) элемент <code>h1</code>, который является главным заголовком для всего вашего контента. Этот и другие заголовки частично используются поисковыми системами, чтобы понять, что находится на странице.
</section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat хочет, чтобы страница на его сайте была посвящена тому, как стать ниндзя. Помогите ему исправить заголовки так, чтобы его разметка придавала семантический смысл содержанию и показывала правильные отношения между родительскими и дочерними элементами его разделов. Измените все теги <code>h5</code> на соответствующий уровень заголовка, чтобы указать, что они являются подразделами <code>h2</code> . </section> <section id='instructions'>
Camper Cat хочет, чтобы страница на его сайте была посвящена тому, как стать ниндзя. Помогите ему исправить заголовки так, чтобы его разметка придавала семантический смысл содержанию и показывала правильные отношения между родительскими и дочерними элементами его разделов. Измените все теги <code>h5</code> на соответствующий уровень заголовка, чтобы указать, что они являются подразделами <code>h2</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен иметь шесть тегов <code>h3</code> . - text: Your code should have 6 <code>h3</code> tags.
testString: 'assert($("h3").length === 6, "Your code should have six <code>h3</code> tags.");' testString: assert($("h3").length === 6);
- text: В вашем коде не должно быть тегов <code>h5</code> . - text: Your code should have 6 <code>h3</code> closing tags.
testString: 'assert($("h5").length === 0, "Your code should not have any <code>h5</code> tags.");' testString: assert((code.match(/\/h3/g) || []).length===6);
- text: Your code should not have any <code>h5</code> tags.
testString: assert($("h5").length === 0);
- text: Your code should not have any <code>h5</code> closing tags.
testString: assert(/\/h5/.test(code)===false);
``` ```
@ -51,14 +60,26 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <h1>How to Become a Ninja</h1>
<main>
<h2>Learn the Art of Moving Stealthily</h2>
<h3>How to Hide in Plain Sight</h3>
<h3>How to Climb a Wall</h3>
<h2>Learn the Art of Battle</h2>
<h3>How to Strengthen your Body</h3>
<h3>How to Fight like a Ninja</h3>
<h2>Learn the Art of Living with Honor</h2>
<h3>How to Breathe Properly</h3>
<h3>How to Simplify your Life</h3>
</main>
``` ```
</section> </section>

72
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.russian.md
View File

@ -2,25 +2,30 @@
id: 587d7790367417b2b2512ab0 id: 587d7790367417b2b2512ab0
title: Use tabindex to Add Keyboard Focus to an Element title: Use tabindex to Add Keyboard Focus to an Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cmzMDHW
forumTopicId: 301027
localeTitle: Использование tabindex для добавления фокуса клавиатуры к элементу localeTitle: Использование tabindex для добавления фокуса клавиатуры к элементу
--- ---
## Description ## Description
<section id="description"> <code>tabindex</code> HTML имеет три различные функции, относящиеся к фокусу клавиатуры элемента. Когда он находится в теге, он указывает, что элемент можно сфокусировать. Значение (целое число, положительное, отрицательное или нулевое) определяет поведение. Некоторые элементы, такие как ссылки и элементы управления формами, автоматически получают фокус клавиатуры, когда пользователь переходит через страницу. Он находится в том же порядке, что и элементы, входящие в разметку HTML-источника. Эта же функциональность может быть предоставлена ​​другим элементам, таким как <code>div</code> , <code>span</code> и <code>p</code> , поместив на них <code>tabindex=&quot;0&quot;</code> . Вот пример: <code>&lt;div tabindex=&quot;0&quot;&gt;I need keyboard focus!&lt;/div&gt;</code> <strong>Примечание.</strong> <br> Отрицательное значение <code>tabindex</code> (обычно -1) указывает, что элемент является настраиваемым, но недоступен клавиатурой. Этот метод обычно используется для программного программирования фокуса на контент (например, когда активируется <code>div</code> для всплывающего окна) и выходит за рамки этих задач. </section> <section id='description'>
<code>tabindex</code> HTML имеет три различные функции, относящиеся к фокусу клавиатуры элемента. Когда он находится в теге, он указывает, что элемент можно сфокусировать. Значение (целое число, положительное, отрицательное или нулевое) определяет поведение. Некоторые элементы, такие как ссылки и элементы управления формами, автоматически получают фокус клавиатуры, когда пользователь переходит через страницу. Он находится в том же порядке, что и элементы, входящие в разметку HTML-источника. Эта же функциональность может быть предоставлена ​​другим элементам, таким как <code>div</code> , <code>span</code> и <code>p</code> , поместив на них <code>tabindex=&quot;0&quot;</code> . Вот пример: <code>&lt;div tabindex=&quot;0&quot;&gt;I need keyboard focus!&lt;/div&gt;</code> <strong>Примечание.</strong> <br> Отрицательное значение <code>tabindex</code> (обычно -1) указывает, что элемент является настраиваемым, но недоступен клавиатурой. Этот метод обычно используется для программного программирования фокуса на контент (например, когда активируется <code>div</code> для всплывающего окна) и выходит за рамки этих задач.
</section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat создал новый опрос для сбора информации о своих пользователях. Он знает, что поля ввода автоматически получают фокус клавиатуры, но он хочет убедиться, что его пользователи клавиатуры приостанавливаются при выполнении инструкций при перемещении элементов. Добавьте атрибут <code>tabindex</code> к тегу <code>p</code> и установите его значение «0». Бонус - использование <code>tabindex</code> также позволяет псевдо-классу CSS <code>:focus</code> работать <code>p</code> тегом <code>p</code> . </section> <section id='instructions'>
Camper Cat создал новый опрос для сбора информации о своих пользователях. Он знает, что поля ввода автоматически получают фокус клавиатуры, но он хочет убедиться, что его пользователи клавиатуры приостанавливаются при выполнении инструкций при перемещении элементов. Добавьте атрибут <code>tabindex</code> к тегу <code>p</code> и установите его значение «0». Бонус - использование <code>tabindex</code> также позволяет псевдо-классу CSS <code>:focus</code> работать <code>p</code> тегом <code>p</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен добавить атрибут <code>tabindex</code> к тегу <code>p</code> который содержит инструкции формы. - text: Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.
testString: 'assert($("p").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.");' testString: assert($('p').attr('tabindex'));
- text: Ваш код должен установить атрибут <code>tabindex</code> в теге <code>p</code> равным 0. - text: Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.
testString: 'assert($("p").attr("tabindex") == "0", "Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.");' testString: assert($('p').attr('tabindex') == '0');
``` ```
@ -84,14 +89,59 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <head>
<style>
p:focus {
background-color: yellow;
}
</style>
</head>
<body>
<header>
<h1>Ninja Survey</h1>
</header>
<section>
<form>
<p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<fieldset>
<legend>What level ninja are you?</legend>
<input id="newbie" type="radio" name="levels" value="newbie">
<label for="newbie">Newbie Kitten</label><br>
<input id="intermediate" type="radio" name="levels" value="intermediate">
<label for="intermediate">Developing Student</label><br>
<input id="master" type="radio" name="levels" value="master">
<label for="master">9th Life Master</label>
</fieldset>
<br>
<fieldset>
<legend>Select your favorite weapons:</legend>
<input id="stars" type="checkbox" name="weapons" value="stars">
<label for="stars">Throwing Stars</label><br>
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
<label for="nunchucks">Nunchucks</label><br>
<input id="sai" type="checkbox" name="weapons" value="sai">
<label for="sai">Sai Set</label><br>
<input id="sword" type="checkbox" name="weapons" value="sword">
<label for="sword">Sword</label>
</fieldset>
<br>
<input type="submit" name="submit" value="Submit">
</form><br>
</section>
<footer>&copy; 2018 Camper Cat</footer>
</body>
``` ```
</section> </section>

56
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.russian.md
View File

@ -2,7 +2,8 @@
id: 587d7790367417b2b2512ab1 id: 587d7790367417b2b2512ab1
title: Use tabindex to Specify the Order of Keyboard Focus for Several Elements title: Use tabindex to Specify the Order of Keyboard Focus for Several Elements
challengeType: 0 challengeType: 0
videoUrl: 'https://scrimba.com/c/cmzRRcb' videoUrl: https://scrimba.com/c/cmzRRcb
forumTopicId: 301028
localeTitle: Использование tabindex для указания порядка фокуса клавиатуры для нескольких элементов localeTitle: Использование tabindex для указания порядка фокуса клавиатуры для нескольких элементов
--- ---
@ -26,14 +27,14 @@ Camper Cat имеет поле поиска на странице Вдохнов
```yml ```yml
tests: tests:
- text: 'Ваш код должен добавить к тегу <code>input</code> атрибут <code>tabindex</code>.' - text: Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.
testString: 'assert($("#search").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.");' testString: assert($('#search').attr('tabindex'));
- text: 'Ваш код должен добавить атрибут <code>tabindex</code> в тег submit <code>input</code>.' - text: Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.
testString: 'assert($("#submit").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.");' testString: assert($('#submit').attr('tabindex'));
- text: 'Ваш код должен установить атрибут <code>tabindex</code> в теге <code>input</code> для поиска <значение> к значению 1.' - text: Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.
testString: 'assert($("#search").attr("tabindex") == "1", "Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.");' testString: assert($('#search').attr('tabindex') == '1');
- text: 'Ваш код должен установить атрибут <code>tabindex</code> в теге отправки <code>input</code> значение 2.' - text: Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.
testString: 'assert($("#submit").attr("tabindex") == "2", "Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.");' testString: assert($('#submit').attr('tabindex') == '2');
``` ```
@ -81,14 +82,43 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <body>
<header>
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Training</a></li>
</ul>
</nav>
</header>
<form>
<label for="search">Search:</label>
<input tabindex="1" type="search" name="search" id="search">
<input tabindex="2" type="submit" name="submit" value="Submit" id="submit">
</form>
<h2>Inspirational Quotes</h2>
<blockquote>
<p>&ldquo;There's no Theory of Evolution, just a list of creatures I've allowed to live.&rdquo;<br>
- Chuck Norris</p>
</blockquote>
<blockquote>
<p>&ldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.&rdquo;<br>
- TMNT</p>
</blockquote>
<footer>&copy; 2018 Camper Cat</footer>
</body>
``` ```
</section> </section>

42
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.russian.md
View File

@ -2,7 +2,8 @@
id: 587d774e367417b2b2512aa0 id: 587d774e367417b2b2512aa0
title: Wrap Content in the article Element title: Wrap Content in the article Element
challengeType: 0 challengeType: 0
videoUrl: 'https://scrimba.com/c/cPp79S3' videoUrl: https://scrimba.com/c/cPp79S3
forumTopicId: 301029
localeTitle: Оборачивание контента в элемент article localeTitle: Оборачивание контента в элемент article
--- ---
@ -16,17 +17,19 @@ localeTitle: Оборачивание контента в элемент article
</section> </section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat использовал теги <code>article</code> для обертывания сообщений на своей странице блога, но он забыл использовать их в верхней части. Измените тег <code>div</code> чтобы вместо этого использовать тег <code>article</code>. </section> <section id='instructions'>
Camper Cat использовал теги <code>article</code> для обертывания сообщений на своей странице блога, но он забыл использовать их в верхней части. Измените тег <code>div</code> чтобы вместо этого использовать тег <code>article</code>.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен содержать три тега <code>article</code>. - text: Your code should have three <code>article</code> tags.
testString: 'assert($("article").length == 3, "Your code should have three <code>article</code> tags.");' testString: assert($('article').length == 3);
- text: У вашего кода не должно быть никаких тегов <code>div</code>. - text: Your code should not have any <code>div</code> tags.
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");' testString: assert($('div').length == 0);
``` ```
@ -64,14 +67,33 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <h1>Deep Thoughts with Master Camper Cat</h1>
<main>
<article>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
</main>
``` ```
</section> </section>

80
curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.russian.md
View File

@ -2,31 +2,36 @@
id: 587d778b367417b2b2512aa7 id: 587d778b367417b2b2512aa7
title: Wrap Radio Buttons in a fieldset Element for Better Accessibility title: Wrap Radio Buttons in a fieldset Element for Better Accessibility
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cVJVefw
forumTopicId: 301030
localeTitle: Обтекание переключателей в элементе Fieldset для лучшей доступности localeTitle: Обтекание переключателей в элементе Fieldset для лучшей доступности
--- ---
## Description ## Description
<section id="description"> Следующая тема охватывает доступность переключателей. Каждый выбор дается <code>label</code> с <code>for</code> атрибутом привязки к <code>id</code> соответствующего пункта, как рассматривалось в последней задаче. Поскольку радиокнопки часто входят в группу, где пользователь должен выбрать одну, есть способ семантически показать, что выбор является частью набора. Тег <code>fieldset</code> окружает всю группу переключателей для достижения этого. Он часто использует тег <code>legend</code> чтобы предоставить описание для группировки, которое считывается программами чтения с экрана для каждого выбора в элементе <code>fieldset</code>. <code>fieldset</code> и тег <code>legend</code> не нужны, если выбор не требует пояснений, например, гендерный выбор. Использование <code>label</code> с <code>for</code> атрибута для каждого переключателя достаточно. Вот пример: <blockquote> &lt;form&gt; <br> &lt;fieldset&gt; <br> &lt;legend&gt; Выберите один из этих трех элементов: &lt;/ legend&gt; <br> &lt;input id = &quot;one&quot; type = &quot;radio&quot; name = &quot;items&quot; value = &quot;one&quot;&gt; <br> &lt;label for = &quot;one&quot;&gt; Выбор 1 &lt;/ label&gt; &lt;br&gt; <br> &lt;input id = &quot;two&quot; type = &quot;radio&quot; name = &quot;items&quot; value = &quot;two&quot;&gt; <br> &lt;label for = &quot;two&quot;&gt; Выбор 2 &lt;/ label&gt; &lt;br&gt; <br> &lt;input id = &quot;three&quot; type = &quot;radio&quot; name = &quot;items&quot; value = &quot;three&quot;&gt; <br> &lt;label for = &quot;three&quot;&gt; Choice Three &lt;/ label&gt; <br> &lt;/ fieldset&gt; <br> &lt;/ form&gt; <br></blockquote></section> <section id='description'>
Следующая тема охватывает доступность переключателей. Каждый выбор дается <code>label</code> с <code>for</code> атрибутом привязки к <code>id</code> соответствующего пункта, как рассматривалось в последней задаче. Поскольку радиокнопки часто входят в группу, где пользователь должен выбрать одну, есть способ семантически показать, что выбор является частью набора. Тег <code>fieldset</code> окружает всю группу переключателей для достижения этого. Он часто использует тег <code>legend</code> чтобы предоставить описание для группировки, которое считывается программами чтения с экрана для каждого выбора в элементе <code>fieldset</code>. <code>fieldset</code> и тег <code>legend</code> не нужны, если выбор не требует пояснений, например, гендерный выбор. Использование <code>label</code> с <code>for</code> атрибута для каждого переключателя достаточно. Вот пример: <blockquote> &lt;form&gt; <br> &lt;fieldset&gt; <br> &lt;legend&gt; Выберите один из этих трех элементов: &lt;/ legend&gt; <br> &lt;input id = &quot;one&quot; type = &quot;radio&quot; name = &quot;items&quot; value = &quot;one&quot;&gt; <br> &lt;label for = &quot;one&quot;&gt; Выбор 1 &lt;/ label&gt; &lt;br&gt; <br> &lt;input id = &quot;two&quot; type = &quot;radio&quot; name = &quot;items&quot; value = &quot;two&quot;&gt; <br> &lt;label for = &quot;two&quot;&gt; Выбор 2 &lt;/ label&gt; &lt;br&gt; <br> &lt;input id = &quot;three&quot; type = &quot;radio&quot; name = &quot;items&quot; value = &quot;three&quot;&gt; <br> &lt;label for = &quot;three&quot;&gt; Choice Three &lt;/ label&gt; <br> &lt;/ fieldset&gt; <br> &lt;/ form&gt; <br></blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Camper Cat хочет получить информацию о уровне ниндзя своих пользователей, когда они регистрируются в его списке электронной почты. Он добавил набор переключателей и узнал из нашего последнего урока, чтобы использовать метки меток <code>for</code> атрибутов для каждого выбора. Вперед Camper Cat! Однако его код по-прежнему нуждается в некоторой помощи. Измените тег <code>div</code> окружающий радиокнопки, на тег <code>fieldset</code> и измените тег <code>p</code> внутри него на <code>legend</code>. </section> <section id='instructions'>
Camper Cat хочет получить информацию о уровне ниндзя своих пользователей, когда они регистрируются в его списке электронной почты. Он добавил набор переключателей и узнал из нашего последнего урока, чтобы использовать метки меток <code>for</code> атрибутов для каждого выбора. Вперед Camper Cat! Однако его код по-прежнему нуждается в некоторой помощи. Измените тег <code>div</code> окружающий радиокнопки, на тег <code>fieldset</code> и измените тег <code>p</code> внутри него на <code>legend</code>.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен иметь тег <code>fieldset</code> вокруг установленного переключателя. - text: Your code should have a <code>fieldset</code> tag around the radio button set.
testString: 'assert($("fieldset").length == 1, "Your code should have a <code>fieldset</code> tag around the radio button set.");' testString: assert($('fieldset').length == 1);
- text: 'Убедитесь, что ваш элемент <code>fieldset</code> имеет закрывающий тег.' - text: Make sure your <code>fieldset</code> element has a closing tag.
testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, "Make sure your <code>fieldset</code> element has a closing tag.");' testString: assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length);
- text: 'Ваш код должен иметь тег <code>legend</code> вокруг текста, спрашивающий, какой уровень ниндзя является пользователем.' - text: Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.
testString: 'assert($("legend").length == 1, "Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.");' testString: assert($('legend').length == 1);
- text: У вашего кода не должно быть никаких тегов <code>div</code>. - text: Your code should not have any <code>div</code> tags.
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");' testString: assert($('div').length == 0);
- text: 'В вашем коде больше нет тега <code>p</code> вокруг текста, спрашивающего, какой уровень ниндзя является пользователем.' - text: Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.
testString: 'assert($("p").length == 4, "Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.");' testString: assert($('p').length == 4);
``` ```
@ -86,14 +91,55 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<section>
<form>
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<!-- Add your code below this line -->
<fieldset>
<legend>What level ninja are you?</legend>
<input id="newbie" type="radio" name="levels" value="newbie">
<label for="newbie">Newbie Kitten</label><br>
<input id="intermediate" type="radio" name="levels" value="intermediate">
<label for="intermediate">Developing Student</label><br>
<input id="master" type="radio" name="levels" value="master">
<label for="master">Master</label>
</fieldset>
<!-- Add your code above this line -->
<input type="submit" name="submit" value="Submit">
</form>
</section>
<article>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
``` ```
</section> </section>

75
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.russian.md
View File

@ -2,31 +2,30 @@
id: 587d781b367417b2b2512abe id: 587d781b367417b2b2512abe
title: Add a box-shadow to a Card-like Element title: Add a box-shadow to a Card-like Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cvVZdUd
forumTopicId: 301031
localeTitle: Добавьте тень к карточному элементу localeTitle: Добавьте тень к карточному элементу
--- ---
## Description ## Description
<section id='description'>
Свойство <code>box-shadow</code> применяет одну или несколько теней к элементу. Свойство <code>box-shadow</code> принимает значения для <code>offset-x</code> (как далеко отбрасывать тень горизонтально от элемента), <code>offset-y</code> (как далеко отбрасывать тень вертикально от элемента), <code>blur-radius</code> <code>spread-radius</code> и значения цвета в этом порядке. Значения <code>blur-radius</code> и <code>spread-radius</code> необязательны. Вот пример CSS для создания нескольких теней с некоторым размытием в основном прозрачных черных цветах: <blockquote> box-shadow: 0 10px 20px rgba (0,0,0,0,19), 0 6px 6px rgba (0,0,0,0,23); </blockquote>
<section id="description"> Свойство <code>box-shadow</code> применяет одну или несколько теней к элементу. Свойство <code>box-shadow</code> принимает значения для <code>offset-x</code> (как далеко отбрасывать тень горизонтально от элемента), <code>offset-y</code> (как далеко отбрасывать тень вертикально от элемента), <code>blur-radius</code> <code>spread-radius</code> и значения цвета в этом порядке. Значения <code>blur-radius</code> и <code>spread-radius</code> необязательны. Вот пример CSS для создания нескольких теней с некоторым размытием в основном прозрачных черных цветах: <blockquote> box-shadow: 0 10px 20px rgba (0,0,0,0,19), 0 6px 6px rgba (0,0,0,0,23); </blockquote></section> </section>
## Instructions ## Instructions
<section id="instructions"> Элемент теперь имеет идентификатор <code>thumbnail</code>. С помощью этого селектора используйте приведенные выше примеры CSS, чтобы применить <code>box-shadow</code> к карточке. </section> <section id='instructions'>
Элемент теперь имеет идентификатор <code>thumbnail</code>. С помощью этого селектора используйте приведенные выше примеры CSS, чтобы применить <code>box-shadow</code> к карточке.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.
testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
- text: Ваш код должен добавить свойство <code>box-shadow</code> для идентификатора <code>thumbnail</code>. - text: You should use the given CSS for the <code>box-shadow</code> value.
testString: assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi));
testString: 'assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), "Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.");'
- text: Вы должны использовать данный CSS для значения <code>box-shadow</code>.
testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), "You should use the given CSS for the <code>box-shadow</code> value.");'
``` ```
@ -87,14 +86,56 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard" id="thumbnail">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

69
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.russian.md
View File

@ -2,27 +2,32 @@
id: 587d781b367417b2b2512abc id: 587d781b367417b2b2512abc
title: Adjust the background-color Property of Text title: Adjust the background-color Property of Text
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cEDqwA6
forumTopicId: 301032
localeTitle: Отрегулируйте фоновый цвет Свойство текста localeTitle: Отрегулируйте фоновый цвет Свойство текста
--- ---
## Description ## Description
<section id="description"> Вместо исправления общего фона или цвета текста, для читаемости переднего плана вы можете добавить <code>background-color</code> к элементу, содержащему текст, который вы хотите подчеркнуть. Эта проблема использует <code>rgba()</code> вместо <code>hex</code> кодов или нормальный <code>rgb()</code> . <blockquote> rgba акроним расшифровывается как: <br> r = красный <br> g = зеленый <br> b = синий <br> a = альфа / уровень непрозрачности </blockquote> Значения RGB могут находиться в диапазоне от 0 до 255. Значение альфа может варьироваться от 1, полностью непрозрачного или сплошного цвета, до 0, что является полностью прозрачным или невидимым. <code>rgba()</code> отлично подходит для использования в этом случае, так как он позволяет вам регулировать непрозрачность. Это означает, что вам не нужно полностью блокировать фон. Для этой задачи вы будете использовать <code>background-color: rgba(45, 45, 45, 0.1)</code> . Он производит темно-серый цвет, который почти прозрачен, учитывая низкое значение непрозрачности 0,1. </section> <section id='description'>
Вместо исправления общего фона или цвета текста, для читаемости переднего плана вы можете добавить <code>background-color</code> к элементу, содержащему текст, который вы хотите подчеркнуть. Эта проблема использует <code>rgba()</code> вместо <code>hex</code> кодов или нормальный <code>rgb()</code> . <blockquote> rgba акроним расшифровывается как: <br> r = красный <br> g = зеленый <br> b = синий <br> a = альфа / уровень непрозрачности </blockquote> Значения RGB могут находиться в диапазоне от 0 до 255. Значение альфа может варьироваться от 1, полностью непрозрачного или сплошного цвета, до 0, что является полностью прозрачным или невидимым. <code>rgba()</code> отлично подходит для использования в этом случае, так как он позволяет вам регулировать непрозрачность. Это означает, что вам не нужно полностью блокировать фон. Для этой задачи вы будете использовать <code>background-color: rgba(45, 45, 45, 0.1)</code> . Он производит темно-серый цвет, который почти прозрачен, учитывая низкое значение непрозрачности 0,1.
</section>
## Instructions ## Instructions
<section id="instructions"> Чтобы текст сильнее выделялся, отрегулируйте <code>background-color</code> элемента <code>h4</code> на заданное значение <code>rgba()</code> . Также для <code>h4</code> удалите свойство <code>height</code> и добавьте <code>padding</code> 10px. </section> <section id='instructions'>
Чтобы текст сильнее выделялся, отрегулируйте <code>background-color</code> элемента <code>h4</code> на заданное значение <code>rgba()</code> . Также для <code>h4</code> удалите свойство <code>height</code> и добавьте <code>padding</code> 10px.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Ваш код должен добавить свойство <code>background-color</code> к элементу <code>h4</code> установленному в <code>rgba(45, 45, 45, 0.1)</code> .' - text: Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.
testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), "Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.");' testString: assert(code.match(/(background-color|background):\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\);/gi));
- text: Ваш код должен добавить свойство <code>padding</code> к элементу <code>h4</code> и установить его на 10 пикселей. - text: Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.
testString: 'assert($("h4").css("padding-top") == "10px" && $("h4").css("padding-right") == "10px" && $("h4").css("padding-bottom") == "10px" && $("h4").css("padding-left") == "10px", "Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.");' testString: assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px');
- text: Свойство <code>height</code> в элементе <code>h4</code> должно быть удалено. - text: The <code>height</code> property on the <code>h4</code> element should be removed.
testString: 'assert(!($("h4").css("height") == "25px"), "The <code>height</code> property on the <code>h4</code> element should be removed.");' testString: assert(!($('h4').css('height') == '25px'));
``` ```
@ -80,14 +85,52 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
padding: 10px;
background-color: rgba(45, 45, 45, 0.1);
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

71
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.russian.md
View File

@ -2,29 +2,34 @@
id: 587d78a4367417b2b2512ad3 id: 587d78a4367417b2b2512ad3
title: Adjust the Color of Various Elements to Complementary Colors title: Adjust the Color of Various Elements to Complementary Colors
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cWmPpud
forumTopicId: 301033
localeTitle: Отрегулируйте цвет различных элементов для дополнительных цветов localeTitle: Отрегулируйте цвет различных элементов для дополнительных цветов
--- ---
## Description ## Description
<section id="description"> Задача «Дополнительные цвета» показала, что противоположные цвета на цветовом круге могут сделать друг друга более сочными, когда они расположены бок о бок. Однако сильный визуальный контраст может быть слишком резким, если он чрезмерно используется на веб-сайте и иногда может сделать текст более трудным для чтения, если он размещен на фоне дополнительного цвета. На практике один из цветов обычно доминирует, а дополнительный используется для привлечения внимания к определенному контенту на странице. </section> <section id='description'>
Задача «Дополнительные цвета» показала, что противоположные цвета на цветовом круге могут сделать друг друга более сочными, когда они расположены бок о бок. Однако сильный визуальный контраст может быть слишком резким, если он чрезмерно используется на веб-сайте и иногда может сделать текст более трудным для чтения, если он размещен на фоне дополнительного цвета. На практике один из цветов обычно доминирует, а дополнительный используется для привлечения внимания к определенному контенту на странице.
</section>
## Instructions ## Instructions
<section id="instructions"> Эта страница будет использовать сине-зеленый оттенок ( <code>#09A7A1</code> ) в качестве доминирующего цвета, а дополняющий его оранжевый ( <code>#FF790E</code> ) для визуального выделения кнопок sign-up. Измените <code>background-color</code> обоих элементов <code>header</code> и <code>footer</code> с черного на сине-зеленый. Затем также измените <code>color</code> текста <code>h2</code> на сине-зеленый. Наконец, измените <code>background-color</code> <code>button</code> на оранжевый цвет. </section> <section id='instructions'>
Эта страница будет использовать сине-зеленый оттенок ( <code>#09A7A1</code> ) в качестве доминирующего цвета, а дополняющий его оранжевый ( <code>#FF790E</code> ) для визуального выделения кнопок sign-up. Измените <code>background-color</code> обоих элементов <code>header</code> и <code>footer</code> с черного на сине-зеленый. Затем также измените <code>color</code> текста <code>h2</code> на сине-зеленый. Наконец, измените <code>background-color</code> <code>button</code> на оранжевый цвет.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Элемент <code>header</code> должен иметь <code>background-color</code> # 09A7A1.' - text: 'The <code>header</code> element should have a <code>background-color</code> of #09A7A1.'
testString: 'assert($("header").css("background-color") == "rgb(9, 167, 161)", "The <code>header</code> element should have a <code>background-color</code> of #09A7A1.");' testString: assert($('header').css('background-color') == 'rgb(9, 167, 161)');
- text: 'Элемент нижнего <code>footer</code> должен иметь <code>background-color</code> # 09A7A1.' - text: 'The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.'
testString: 'assert($("footer").css("background-color") == "rgb(9, 167, 161)", "The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.");' testString: assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
- text: 'Элемент <code>h2</code> должен иметь <code>color</code> # 09A7A1.' - text: 'The <code>h2</code> element should have a <code>color</code> of #09A7A1.'
testString: 'assert($("h2").css("color") == "rgb(9, 167, 161)", "The <code>h2</code> element should have a <code>color</code> of #09A7A1.");' testString: assert($('h2').css('color') == 'rgb(9, 167, 161)');
- text: 'Элемент <code>button</code> должен иметь <code>background-color</code> # FF790E.' - text: 'The <code>button</code> element should have a <code>background-color</code> of #FF790E.'
testString: 'assert($("button").css("background-color") == "rgb(255, 121, 14)", "The <code>button</code> element should have a <code>background-color</code> of #FF790E.");' testString: assert($('button').css('background-color') == 'rgb(255, 121, 14)');
``` ```
@ -79,14 +84,50 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background-color: white;
}
header {
background-color: #09A7A1;
color: white;
padding: 0.25em;
}
h2 {
color: #09A7A1;
}
button {
background-color: #FF790E;
}
footer {
background-color: #09A7A1;
color: white;
padding: 0.5em;
}
</style>
<header>
<h1>Cooking with FCC!</h1>
</header>
<main>
<article>
<h2>Machine Learning in the Kitchen</h2>
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
<button>Sign Up</button>
</article>
<article>
<h2>Bisection Vegetable Chopping</h2>
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
<button>Sign Up</button>
</article>
</main>
<br>
<footer>&copy; 2018 FCC Kitchen</footer>
``` ```
</section> </section>

56
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.russian.md
View File

@ -2,23 +2,28 @@
id: 587d7791367417b2b2512ab5 id: 587d7791367417b2b2512ab5
title: Adjust the Height of an Element Using the height Property title: Adjust the Height of an Element Using the height Property
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cEDaDTN
forumTopicId: 301034
localeTitle: Отрегулируйте высоту элемента с помощью свойства height localeTitle: Отрегулируйте высоту элемента с помощью свойства height
--- ---
## Description ## Description
<section id="description"> Вы можете указать высоту элемента, используя свойство <code>height</code> в CSS, подобное свойству <code>width</code> . Вот пример, который изменяет высоту изображения на 20 пикселей: <blockquote> img { <br> height: 20 px; <br> } </blockquote></section> <section id='description'>
Вы можете указать высоту элемента, используя свойство <code>height</code> в CSS, подобное свойству <code>width</code> . Вот пример, который изменяет высоту изображения на 20 пикселей: <blockquote> img { <br> height: 20 px; <br> } </blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Добавьте свойство <code>height</code> в тег <code>h4</code> и установите его на 25 пикселей. </section> <section id='instructions'>
Добавьте свойство <code>height</code> в тег <code>h4</code> и установите его на 25 пикселей.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен изменить свойство <code>h4</code> <code>height</code> на значение 25 пикселей. - text: Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.
testString: 'assert($("h4").css("height") == "25px", "Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.");' testString: assert($('h4').css('height') === '25px' && /h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g ,'')));
``` ```
@ -70,14 +75,47 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
}
.links {
margin-right: 20px;
text-align: left;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Google</h4>
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

36
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.russian.md
View File

@ -2,27 +2,30 @@
id: 587d781d367417b2b2512ac8 id: 587d781d367417b2b2512ac8
title: Adjust the Hover State of an Anchor Tag title: Adjust the Hover State of an Anchor Tag
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cakRGcm
forumTopicId: 301035
localeTitle: Отрегулируйте состояние ссылок при наведении курсора localeTitle: Отрегулируйте состояние ссылок при наведении курсора
--- ---
## Description ## Description
<section id='description'>
<section id="description"> Эта проблема будет касаться использования псевдоклассов. Псевдокласс - это ключевое слово, которое можно добавить в селектор, чтобы выбрать конкретное состояние элемента. Например, стиль тега привязки может быть изменен для его состояния зависания с помощью селектора псевдо-класса <code>:hover</code> . Вот CSS, чтобы изменить <code>color</code> привязанного тега на красный во время наведения на него: <blockquote> a: hover { <br> красный цвет; <br> } </blockquote></section> Эта проблема будет касаться использования псевдоклассов. Псевдокласс - это ключевое слово, которое можно добавить в селектор, чтобы выбрать конкретное состояние элемента. Например, стиль тега привязки может быть изменен для его состояния зависания с помощью селектора псевдо-класса <code>:hover</code> . Вот CSS, чтобы изменить <code>color</code> привязанного тега на красный во время наведения на него: <blockquote> a: hover { <br> красный цвет; <br> } </blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Редактор кода имеет правило CSS в стиле все <code>a</code> теги черный. Добавьте правила, так чтобы когда пользователь наводит на <code>a</code> тег, то <code>color</code> становился синим. </section> <section id='instructions'>
Редактор кода имеет правило CSS в стиле все <code>a</code> теги черный. Добавьте правила, так чтобы когда пользователь наводит на <code>a</code> тег, то <code>color</code> становился синим.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: '<code>color</code> метки привязки должен оставаться черным, добавьте только правила CSS для состояния <code>:hover</code>.' - text: The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.
testString: 'assert($("a").css("color") == "rgb(0, 0, 0)", "The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.");' testString: assert($('a').css('color') == 'rgb(0, 0, 0)');
- text: Якорная метка должна иметь <code>color</code> синего цвета при наведении. - text: The anchor tag should have a <code>color</code> of blue on hover.
testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), "The anchor tag should have a <code>color</code> of blue on hover.");' testString: assert(code.match(/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi));
``` ```
@ -48,14 +51,21 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
a {
color: #000;
}
a:hover {
color: rgba(0,0,255,1);
}
</style>
<a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
``` ```
</section> </section>

67
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.russian.md
View File

@ -2,33 +2,38 @@
id: 587d78a4367417b2b2512ad4 id: 587d78a4367417b2b2512ad4
title: Adjust the Hue of a Color title: Adjust the Hue of a Color
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cPp38TZ
forumTopicId: 301036
localeTitle: Отрегулируйте оттенок цвета localeTitle: Отрегулируйте оттенок цвета
--- ---
## Description ## Description
<section id="description"> Цвета имеют несколько характеристик, включая оттенок, насыщенность и легкость. CSS3 представила <code>hsl()</code> как альтернативный способ выбрать цвет, указав непосредственно эти характеристики. <b>Хюэ</b> - это то, что люди обычно считают «цветным». Если вы изображаете спектр цветов, начиная с красного слева, перемещаясь по зеленому посередине, а синий справа, оттенок - это то, где цвет соответствует этой линии. В <code>hsl()</code> оттенок использует концепцию цветового круга вместо спектра, где угол цвета на круге задается как значение от 0 до 360. <b>Насыщенность</b> - это количество серого цвета. Полностью насыщенный цвет не имеет серого цвета, а минимально насыщенный цвет почти полностью серый. Это задается в процентах, при этом 100% полностью насыщенный. <b>Легкость</b> - это количество белого или черного цвета. Процент задается от 0% (черный) до 100% (белый), где 50% - это нормальный цвет. Вот несколько примеров использования <code>hsl()</code> с полностью насыщенными, нормальными цветами легкости: <table class="table table-striped"><thead><tr><th> цвет </th><th> HSL </th></tr></thead><tbody><tr><td> красный </td><td> hsl (0, 100%, 50%) </td></tr><tr><td> желтый </td><td> hsl (60, 100%, 50%) </td></tr><tr><td> зеленый </td><td> hsl (120, 100%, 50%) </td></tr><tr><td> циан </td><td> hsl (180, 100%, 50%) </td></tr><tr><td> синий </td><td> hsl (240, 100%, 50%) </td></tr><tr><td> фуксин </td><td> hsl (300, 100%, 50%) </td></tr></tbody></table></section> <section id='description'>
Цвета имеют несколько характеристик, включая оттенок, насыщенность и легкость. CSS3 представила <code>hsl()</code> как альтернативный способ выбрать цвет, указав непосредственно эти характеристики. <b>Хюэ</b> - это то, что люди обычно считают «цветным». Если вы изображаете спектр цветов, начиная с красного слева, перемещаясь по зеленому посередине, а синий справа, оттенок - это то, где цвет соответствует этой линии. В <code>hsl()</code> оттенок использует концепцию цветового круга вместо спектра, где угол цвета на круге задается как значение от 0 до 360. <b>Насыщенность</b> - это количество серого цвета. Полностью насыщенный цвет не имеет серого цвета, а минимально насыщенный цвет почти полностью серый. Это задается в процентах, при этом 100% полностью насыщенный. <b>Легкость</b> - это количество белого или черного цвета. Процент задается от 0% (черный) до 100% (белый), где 50% - это нормальный цвет. Вот несколько примеров использования <code>hsl()</code> с полностью насыщенными, нормальными цветами легкости: <table class="table table-striped"><thead><tr><th> цвет </th><th> HSL </th></tr></thead><tbody><tr><td> красный </td><td> hsl (0, 100%, 50%) </td></tr><tr><td> желтый </td><td> hsl (60, 100%, 50%) </td></tr><tr><td> зеленый </td><td> hsl (120, 100%, 50%) </td></tr><tr><td> циан </td><td> hsl (180, 100%, 50%) </td></tr><tr><td> синий </td><td> hsl (240, 100%, 50%) </td></tr><tr><td> фуксин </td><td> hsl (300, 100%, 50%) </td></tr></tbody></table>
</section>
## Instructions ## Instructions
<section id="instructions"> Измените <code>background-color</code> каждого элемента <code>div</code> на основе имен классов ( <code>green</code>, <code>cyan</code> или <code>blue</code> ) с помощью <code>hsl()</code>. Все три должны иметь полную насыщенность и нормальную легкость. </section> <section id='instructions'>
Измените <code>background-color</code> каждого элемента <code>div</code> на основе имен классов ( <code>green</code>, <code>cyan</code> или <code>blue</code> ) с помощью <code>hsl()</code>. Все три должны иметь полную насыщенность и нормальную легкость.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен использовать <code>hsl()</code> чтобы объявить зеленый цвет. - text: Your code should use the <code>hsl()</code> property to declare the color green.
testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color green.");' testString: assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
- text: Ваш код должен использовать <code>hsl()</code> для объявления цвета морской волны. - text: Your code should use the <code>hsl()</code> property to declare the color cyan.
testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color cyan.");' testString: assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
- text: Ваш код должен использовать <code>hsl()</code> для объявления синего цвета. - text: Your code should use the <code>hsl()</code> property to declare the color blue.
testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color blue.");' testString: assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
- text: '<code>div</code> элемент с классом <code>green</code> должен иметь <code>background-color</code> зеленый.' - text: The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.
testString: 'assert($(".green").css("background-color") == "rgb(0, 255, 0)", "The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.");' testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
- text: '<code>div</code> элемент с классом <code>green</code> должен иметь <code>background-color</code> морской волны.' - text: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.
testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.");' testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
- text: '<code>div</code> элемент с классом <code>green</code> должен иметь <code>background-color</code> синий.' - text: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.
testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.");' testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
``` ```
@ -72,14 +77,38 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background-color: #FFFFFF;
}
.green {
background-color: hsl(120, 100%, 50%);
}
.cyan {
background-color: hsl(180, 100%, 50%);
}
.blue {
background-color: hsl(240, 100%, 50%);
}
div {
display: inline-block;
height: 100px;
width: 100px;
}
</style>
<div class="green"></div>
<div class="cyan"></div>
<div class="blue"></div>
``` ```
</section> </section>

62
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.russian.md
View File

@ -2,23 +2,28 @@
id: 587d781b367417b2b2512abd id: 587d781b367417b2b2512abd
title: Adjust the Size of a Header Versus a Paragraph Tag title: Adjust the Size of a Header Versus a Paragraph Tag
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c3bRPTz
forumTopicId: 301037
localeTitle: Отрегулируйте размер заголовка в сравнении с тегом абзаца localeTitle: Отрегулируйте размер заголовка в сравнении с тегом абзаца
--- ---
## Description ## Description
<section id="description"> Размер шрифта тегов заголовков (от <code>h1</code> до <code>h6</code> ) обычно должен быть больше размера шрифта тегов абзаца. Это облегчает пользователю визуальное понимание макета и уровня важности всего содержимого на странице. Для изменения размера текста в элементе используется свойство <code>font-size</code>. </section> <section id='description'>
Размер шрифта тегов заголовков (от <code>h1</code> до <code>h6</code> ) обычно должен быть больше размера шрифта тегов абзаца. Это облегчает пользователю визуальное понимание макета и уровня важности всего содержимого на странице. Для изменения размера текста в элементе используется свойство <code>font-size</code>.
</section>
## Instructions ## Instructions
<section id="instructions"> Чтобы заголовок был значительно больше абзаца, измените <code>font-size</code> тега <code>h4</code> на 27 пикселей. </section> <section id='instructions'>
Чтобы заголовок был значительно больше абзаца, измените <code>font-size</code> тега <code>h4</code> на 27 пикселей.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен добавить свойство <code>font-size</code> к элементу <code>h4</code> установленному в 27 пикселей. - text: Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.
testString: 'assert($("h4").css("font-size") == "27px", "Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.");' testString: assert($('h4').css('font-size') == '27px');
``` ```
@ -76,14 +81,53 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

61
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.russian.md
View File

@ -2,23 +2,28 @@
id: 587d78a4367417b2b2512ad5 id: 587d78a4367417b2b2512ad5
title: Adjust the Tone of a Color title: Adjust the Tone of a Color
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cEDJvT7
forumTopicId: 301038
localeTitle: Отрегулируйте тон цвета localeTitle: Отрегулируйте тон цвета
--- ---
## Description ## Description
<section id="description"> Опция <code>hsl()</code> в CSS также упрощает настройку тона цвета. Смешение белого цвета с чистым оттенком создает оттенок этого цвета, а добавление черного оттенка сделает оттенок. В качестве альтернативы, тон создается путем добавления серого или как под тонировку, так и как затенение. Напомним, что &#39;s&#39; и &#39;l&#39; в <code>hsl()</code> означают насыщенность и легкость соответственно. Процент насыщения изменяет количество серого, а процент света определяет, сколько белого или черного цвета. Это полезно, когда у вас есть базовый оттенок, который вам нравится, но ему нужны разные варианты. </section> <section id='description'>
Опция <code>hsl()</code> в CSS также упрощает настройку тона цвета. Смешение белого цвета с чистым оттенком создает оттенок этого цвета, а добавление черного оттенка сделает оттенок. В качестве альтернативы, тон создается путем добавления серого или как под тонировку, так и как затенение. Напомним, что &#39;s&#39; и &#39;l&#39; в <code>hsl()</code> означают насыщенность и легкость соответственно. Процент насыщения изменяет количество серого, а процент света определяет, сколько белого или черного цвета. Это полезно, когда у вас есть базовый оттенок, который вам нравится, но ему нужны разные варианты.
</section>
## Instructions ## Instructions
<section id="instructions"> Навигационная панель на этом сайте в настоящее время наследует свой <code>background-color</code> от элемента <code>header</code>. Начиная с этого цвета в качестве базы, добавьте <code>background-color</code> к элементу <code>nav</code> так чтобы он использовал тот же голубой оттенок, но имел 80% насыщенности и 25% значения яркости, чтобы изменить его тон и оттенок. </section> <section id='instructions'>
Навигационная панель на этом сайте в настоящее время наследует свой <code>background-color</code> от элемента <code>header</code>. Начиная с этого цвета в качестве базы, добавьте <code>background-color</code> к элементу <code>nav</code> так чтобы он использовал тот же голубой оттенок, но имел 80% насыщенности и 25% значения яркости, чтобы изменить его тон и оттенок.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Элемент <code>nav</code> должен иметь <code>background-color</code> настроенного голубого тона с использованием <code>hsl()</code>. - text: The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.
testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), "The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.");' testString: assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi));
``` ```
@ -76,14 +81,52 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
header {
background-color: hsl(180, 90%, 35%);
color: #FFFFFF;
}
nav {
background-color: hsl(180, 80%, 25%);
}
h1 {
text-indent: 10px;
padding-top: 10px;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 20px;
}
a {
text-decoration: none;
color: inherit;
}
</style>
<header>
<h1>Cooking with FCC!</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Classes</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
``` ```
</section> </section>

57
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.russian.md
View File

@ -2,23 +2,28 @@
id: 587d7791367417b2b2512ab4 id: 587d7791367417b2b2512ab4
title: Adjust the Width of an Element Using the width Property title: Adjust the Width of an Element Using the width Property
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cvVLPtN
forumTopicId: 301039
localeTitle: Настройка ширины элемента с помощью свойства width localeTitle: Настройка ширины элемента с помощью свойства width
--- ---
## Description ## Description
<section id="description"> Вы можете указать ширину элемента, используя свойство <code>width</code> в CSS. Значения могут быть указаны в единицах относительной длины (например, em), единицах абсолютной длины (например, px) или в процентах от содержащего его родительского элемента. Вот пример, который задаёт ширину изображения равной 220 пикселям: <blockquote> img { <br> width: 220px; <br> } </blockquote></section> <section id='description'>
Вы можете указать ширину элемента, используя свойство <code>width</code> в CSS. Значения могут быть указаны в единицах относительной длины (например, em), единицах абсолютной длины (например, px) или в процентах от содержащего его родительского элемента. Вот пример, который задаёт ширину изображения равной 220 пикселям: <blockquote> img { <br> width: 220px; <br> } </blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Добавьте свойство <code>width</code> ко всей карточке и установите абсолютное значение 245px. Используйте класс <code>fullCard</code> чтобы выбрать элемент. </section> <section id="instructions">
Добавьте свойство <code>width</code> ко всей карточке и установите абсолютное значение 245px. Используйте класс <code>fullCard</code> чтобы выбрать элемент.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Ваш код должен изменить свойство <code>width</code> карточки на 245 пикселей, используя селектор класса <code>fullCard</code> .' - text: Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.
testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), "Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.");' testString: assert($('.fullCard').css('width') === '245px' && /\.fullCard{\S*width:245px(;\S*}|})/.test($('style').text().replace(/\s/g ,'')));
``` ```
@ -69,14 +74,46 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
}
p {
text-align: justify;
}
.links {
margin-right: 20px;
text-align: left;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Google</h4>
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

72
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.russian.md
View File

@ -2,23 +2,28 @@
id: 587d78a8367417b2b2512ae5 id: 587d78a8367417b2b2512ae5
title: Animate Elements at Variable Rates title: Animate Elements at Variable Rates
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cZ89WA4
forumTopicId: 301040
localeTitle: Анимационные элементы по переменным ценам localeTitle: Анимационные элементы по переменным ценам
--- ---
## Description ## Description
<section id="description"> Существует множество способов изменить скорость анимации похожих анимированных элементов. До сих пор это было достигнуто путем применения свойства <code>animation-iteration-count</code> и установки правил <code>@keyframes</code> . Чтобы проиллюстрировать, анимация справа состоит из двух «звезд», каждая из которых уменьшает размер и непрозрачность на 20% в правиле <code>@keyframes</code> , что создает анимацию мерцания. Вы можете изменить правило <code>@keyframes</code> для одного из элементов, чтобы звезды мерцали с разной скоростью. </section> <section id='description'>
Существует множество способов изменить скорость анимации похожих анимированных элементов. До сих пор это было достигнуто путем применения свойства <code>animation-iteration-count</code> и установки правил <code>@keyframes</code> . Чтобы проиллюстрировать, анимация справа состоит из двух «звезд», каждая из которых уменьшает размер и непрозрачность на 20% в правиле <code>@keyframes</code> , что создает анимацию мерцания. Вы можете изменить правило <code>@keyframes</code> для одного из элементов, чтобы звезды мерцали с разной скоростью.
</section>
## Instructions ## Instructions
<section id="instructions"> Измените коэффициент анимации для элемента с именем класса <code>star-1</code> , изменив его правило <code>@keyframes</code> на 50%. </section> <section id='instructions'>
Измените коэффициент анимации для элемента с именем класса <code>star-1</code> , изменив его правило <code>@keyframes</code> на 50%.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Правило <code>@keyframes</code> для класса <code>star-1</code> должно быть 50%. - text: The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.
testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), "The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.");' testString: assert(code.match(/twinkle-1\s*?{\s*?50%/g));
``` ```
@ -87,14 +92,63 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.stars {
background-color: white;
height: 30px;
width: 30px;
border-radius: 50%;
animation-iteration-count: infinite;
}
.star-1 {
margin-top: 15%;
margin-left: 60%;
animation-name: twinkle-1;
animation-duration: 1s;
}
.star-2 {
margin-top: 25%;
margin-left: 25%;
animation-name: twinkle-2;
animation-duration: 1s;
}
@keyframes twinkle-1 {
50% {
transform: scale(0.5);
opacity: 0.5;
}
}
@keyframes twinkle-2 {
20% {
transform: scale(0.5);
opacity: 0.5;
}
}
#back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
}
</style>
<div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
``` ```
</section> </section>

55
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.russian.md
View File

@ -2,23 +2,28 @@
id: 587d78a8367417b2b2512ae3 id: 587d78a8367417b2b2512ae3
title: Animate Elements Continually Using an Infinite Animation Count title: Animate Elements Continually Using an Infinite Animation Count
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cVJDVfq
localeTitle: 'Анимация элементов, постоянно использующих бесконечный подсчет анимации' forumTopicId: 301041
localeTitle: Анимация элементов, постоянно использующих бесконечный подсчет анимации
--- ---
## Description ## Description
<section id="description"> Предыдущие проблемы касались использования некоторых свойств анимации и правила <code>@keyframes</code> . Другим свойством анимации является <code>animation-iteration-count</code> , который позволяет вам контролировать, сколько раз вы хотели бы прокручивать анимацию. Вот пример: <code>animation-iteration-count: 3;</code> В этом случае анимация остановится после запуска 3 раза, но можно сделать анимацию непрерывной, установив это значение в бесконечное. </section> <section id='description'>
Предыдущие проблемы касались использования некоторых свойств анимации и правила <code>@keyframes</code> . Другим свойством анимации является <code>animation-iteration-count</code> , который позволяет вам контролировать, сколько раз вы хотели бы прокручивать анимацию. Вот пример: <code>animation-iteration-count: 3;</code> В этом случае анимация остановится после запуска 3 раза, но можно сделать анимацию непрерывной, установив это значение в бесконечное.
</section>
## Instructions ## Instructions
<section id="instructions"> Чтобы держать мяч подпрыгивая справа в непрерывном цикле, измените свойство <code>animation-iteration-count</code> на бесконечность. </section> <section id='instructions'>
Чтобы держать мяч подпрыгивая справа в непрерывном цикле, измените свойство <code>animation-iteration-count</code> на бесконечность.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Свойство <code>animation-iteration-count</code> должно иметь значение бесконечное. - text: The <code>animation-iteration-count</code> property should have a value of infinite.
testString: 'assert($("#ball").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property should have a value of infinite.");' testString: assert($('#ball').css('animation-iteration-count') == 'infinite');
``` ```
@ -68,14 +73,44 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes bounce{
0% {
top: 0px;
}
50% {
top: 249px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
</style>
<div id="ball"></div>
``` ```
</section> </section>

81
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.russian.md
View File

@ -2,27 +2,32 @@
id: 587d78a8367417b2b2512ae6 id: 587d78a8367417b2b2512ae6
title: Animate Multiple Elements at Variable Rates title: Animate Multiple Elements at Variable Rates
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cnpWZc9
forumTopicId: 301042
localeTitle: Анимация нескольких элементов при переменных значениях localeTitle: Анимация нескольких элементов при переменных значениях
--- ---
## Description ## Description
<section id="description"> В предыдущей задаче вы изменили скорость анимации для двух одинаково анимированных элементов, изменив их правила <code>@keyframes</code> . Вы можете достичь той же цели, манипулируя <code>animation-duration</code> нескольких элементов. В анимации, запущенной в редакторе кода, в небе есть три «звезды», которые мерцают с одинаковой скоростью в непрерывном цикле. Чтобы заставить их мерцать с разной скоростью, вы можете установить для свойства <code>animation-duration</code> для разных значений для каждого элемента. </section> <section id='description'>
В предыдущей задаче вы изменили скорость анимации для двух одинаково анимированных элементов, изменив их правила <code>@keyframes</code> . Вы можете достичь той же цели, манипулируя <code>animation-duration</code> нескольких элементов. В анимации, запущенной в редакторе кода, в небе есть три «звезды», которые мерцают с одинаковой скоростью в непрерывном цикле. Чтобы заставить их мерцать с разной скоростью, вы можете установить для свойства <code>animation-duration</code> для разных значений для каждого элемента.
</section>
## Instructions ## Instructions
<section id="instructions"> Установите <code>animation-duration</code> элементов с классами <code>star-1</code> , <code>star-2</code> и <code>star-3</code> на 1s, 0.9s и 1.1s соответственно. </section> <section id='instructions'>
Установите <code>animation-duration</code> элементов с классами <code>star-1</code> , <code>star-2</code> и <code>star-3</code> на 1s, 0.9s и 1.1s соответственно.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Свойство <code>animation-duration</code> для звезды с классом <code>star-1</code> должно оставаться на уровне 1 с. - text: The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.
testString: 'assert($(".star-1").css("animation-duration") == "1s", "The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.");' testString: assert($('.star-1').css('animation-duration') == '1s');
- text: 'Свойство <code>animation-duration</code> для звезды с классом <code>star-2</code> должно быть 0,9 с.' - text: The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.
testString: 'assert($(".star-2").css("animation-duration") == "0.9s", "The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.");' testString: assert($('.star-2').css('animation-duration') == '0.9s');
- text: 'Свойство <code>animation-duration</code> для звезды с классом <code>star-3</code> должно быть 1,1 с.' - text: The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.
testString: 'assert($(".star-3").css("animation-duration") == "1.1s", "The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.");' testString: assert($('.star-3').css('animation-duration') == '1.1s');
``` ```
@ -92,14 +97,64 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.stars {
background-color: white;
height: 30px;
width: 30px;
border-radius: 50%;
animation-iteration-count: infinite;
}
.star-1 {
margin-top: 15%;
margin-left: 60%;
animation-duration: 1s;
animation-name: twinkle;
}
.star-2 {
margin-top: 25%;
margin-left: 25%;
animation-duration: 0.9s;
animation-name: twinkle;
}
.star-3 {
margin-top: 10%;
margin-left: 50%;
animation-duration: 1.1s;
animation-name: twinkle;
}
@keyframes twinkle {
20% {
transform: scale(0.5);
opacity: 0.5;
}
}
#back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
}
</style>
<div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
<div class="star-3 stars"></div>
``` ```
</section> </section>

30
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.russian.md
View File

@ -2,23 +2,28 @@
id: 587d78a3367417b2b2512ad0 id: 587d78a3367417b2b2512ad0
title: Center an Element Horizontally Using the margin Property title: Center an Element Horizontally Using the margin Property
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cyLJqU4
forumTopicId: 301043
localeTitle: Центрировать элемент горизонтально Использование поля Свойства localeTitle: Центрировать элемент горизонтально Использование поля Свойства
--- ---
## Description ## Description
<section id="description"> Другой метод позиционирования - центрировать элемент блока горизонтально. Один из способов сделать это - установить <code>margin</code> в значение auto. Этот метод работает и для изображений. Изображения являются встроенными элементами по умолчанию, но могут быть изменены на блокирующие элементы, когда вы устанавливаете свойство <code>display</code> для блокировки. </section> <section id='description'>
Другой метод позиционирования - центрировать элемент блока горизонтально. Один из способов сделать это - установить <code>margin</code> в значение auto. Этот метод работает и для изображений. Изображения являются встроенными элементами по умолчанию, но могут быть изменены на блокирующие элементы, когда вы устанавливаете свойство <code>display</code> для блокировки.
</section>
## Instructions ## Instructions
<section id="instructions"> <code>div</code> на странице, добавив свойство <code>margin</code> со значением auto. </section> <section id='instructions'>
<code>div</code> на странице, добавив свойство <code>margin</code> со значением auto.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: У <code>div</code> должен быть установлен <code>margin</code> в auto. - text: The <code>div</code> should have a <code>margin</code> set to auto.
testString: 'assert(code.match(/margin:\s*?auto;/g), "The <code>div</code> should have a <code>margin</code> set to auto.");' testString: assert(code.match(/margin:\s*?auto;/g));
``` ```
@ -44,14 +49,21 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
div {
background-color: blue;
height: 100px;
width: 100px;
margin: auto;
}
</style>
<div></div>
``` ```
</section> </section>

36
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.russian.md
View File

@ -2,25 +2,30 @@
id: 587d781e367417b2b2512ac9 id: 587d781e367417b2b2512ac9
title: Change an Element's Relative Position title: Change an Element's Relative Position
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/czVmMtZ
forumTopicId: 301044
localeTitle: Изменение относительного положения элемента localeTitle: Изменение относительного положения элемента
--- ---
## Description ## Description
<section id="description"> CSS обрабатывает каждый элемент HTML как свой собственный ящик, который обычно называют <code>CSS Box Model</code> . Элементы уровня блока автоматически начинаются с новой строки (считайте заголовки, абзацы и div), в то время как встроенные элементы располагаются внутри окружающего содержимого (например, изображения или промежутки). Стандартная компоновка элементов таким образом называется <code>normal flow</code> документа, но CSS предлагает свойство position, чтобы переопределить его. Когда позиция элемента установлена ​​на <code>relative</code> , она позволяет указать, как CSS должен перемещать ее <i>относительно</i> текущей позиции в обычном потоке страницы. Он соединяется со свойствами смещения CSS <code>left</code> или <code>right</code> , а <code>top</code> или <code>bottom</code> . Они говорят , сколько пикселей, проценты, или Эмс , чтобы переместить элемент <i>от</i> места , где она обычно располагается. В следующем примере перемещение абзаца 10 пикселей снизу: <blockquote> п { <br> позиция: относительная; <br> снизу: 10 пикселей; <br> } </blockquote> Изменение положения элемента относительно относительного не удаляет его из обычного потока - другие элементы вокруг него все еще ведут себя так, как если бы этот элемент находился в позиции по умолчанию. <strong>Заметка</strong> <br> Позиционирование дает вам большую гибкость и силу над визуальным расположением страницы. Приятно помнить, что независимо от положения элементов базовая разметка HTML должна быть организована и иметь смысл при чтении сверху вниз. Это то, как пользователи с нарушениями зрения (которые полагаются на вспомогательные устройства, такие как устройства чтения с экрана) получают доступ к вашему контенту. </section> <section id='description'>
CSS обрабатывает каждый элемент HTML как свой собственный ящик, который обычно называют <code>CSS Box Model</code> . Элементы уровня блока автоматически начинаются с новой строки (считайте заголовки, абзацы и div), в то время как встроенные элементы располагаются внутри окружающего содержимого (например, изображения или промежутки). Стандартная компоновка элементов таким образом называется <code>normal flow</code> документа, но CSS предлагает свойство position, чтобы переопределить его. Когда позиция элемента установлена ​​на <code>relative</code> , она позволяет указать, как CSS должен перемещать ее <i>относительно</i> текущей позиции в обычном потоке страницы. Он соединяется со свойствами смещения CSS <code>left</code> или <code>right</code> , а <code>top</code> или <code>bottom</code> . Они говорят , сколько пикселей, проценты, или Эмс , чтобы переместить элемент <i>от</i> места , где она обычно располагается. В следующем примере перемещение абзаца 10 пикселей снизу: <blockquote> п { <br> позиция: относительная; <br> снизу: 10 пикселей; <br> } </blockquote> Изменение положения элемента относительно относительного не удаляет его из обычного потока - другие элементы вокруг него все еще ведут себя так, как если бы этот элемент находился в позиции по умолчанию. <strong>Заметка</strong> <br> Позиционирование дает вам большую гибкость и силу над визуальным расположением страницы. Приятно помнить, что независимо от положения элементов базовая разметка HTML должна быть организована и иметь смысл при чтении сверху вниз. Это то, как пользователи с нарушениями зрения (которые полагаются на вспомогательные устройства, такие как устройства чтения с экрана) получают доступ к вашему контенту.
</section>
## Instructions ## Instructions
<section id="instructions"> Измените <code>position</code> <code>h2</code> на <code>relative</code> и используйте смещение CSS, чтобы переместить его на 15 пикселей от <code>top</code> где он находится в нормальном потоке. Обратите внимание, что нет никакого влияния на позиции окружающих элементов h1 и p. </section> <section id='instructions'>
Измените <code>position</code> <code>h2</code> на <code>relative</code> и используйте смещение CSS, чтобы переместить его на 15 пикселей от <code>top</code> где он находится в нормальном потоке. Обратите внимание, что нет никакого влияния на позиции окружающих элементов h1 и p.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Элемент <code>h2</code> должен иметь свойство <code>position</code> заданное <code>relative</code> . - text: The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.
testString: 'assert($("h2").css("position") == "relative", "The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.");' testString: assert($('h2').css('position') == 'relative');
- text: Ваш код должен использовать смещение CSS для относительно позиционирования <code>h2</code> 15px от <code>top</code> где он обычно сидит. - text: Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.
testString: 'assert($("h2").css("top") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.");' testString: assert($('h2').css('top') == '15px');
``` ```
@ -48,14 +53,23 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h2 {
position: relative;
top: 15px;
}
</style>
<body>
<h1>On Being Well-Positioned</h1>
<h2>Move me!</h2>
<p>I still think the h2 is where it normally sits.</p>
</body>
``` ```
</section> </section>

75
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.russian.md
View File

@ -2,25 +2,30 @@
id: 587d78a8367417b2b2512ae7 id: 587d78a8367417b2b2512ae7
title: Change Animation Timing with Keywords title: Change Animation Timing with Keywords
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cJKvwCM
forumTopicId: 301045
localeTitle: Изменение времени анимации с помощью ключевых слов localeTitle: Изменение времени анимации с помощью ключевых слов
--- ---
## Description ## Description
<section id="description"> В анимации CSS свойство <code>animation-timing-function</code> определяет, как быстро изменяется анимированный элемент во время анимации. Если анимация - это автомобиль, перемещающийся из точки A в точку B в заданное время (продолжительность <code>animation-duration</code> ), <code>animation-timing-function</code> говорит о том, как автомобиль ускоряется и замедляется в ходе движения. Для популярных опций есть несколько предопределенных ключевых слов. Например, значение по умолчанию - это <code>ease</code> , которая начинается медленно, ускоряется в середине, а затем в конце замедляется. Другие варианты включают <code>ease-out</code> , которое быстро начинается, а затем замедляется, <code>ease-in</code> , что медленно начинается, а затем ускоряется в конце или <code>linear</code> , что накладывает постоянную скорость анимации. </section> <section id='description'>
В анимации CSS свойство <code>animation-timing-function</code> определяет, как быстро изменяется анимированный элемент во время анимации. Если анимация - это автомобиль, перемещающийся из точки A в точку B в заданное время (продолжительность <code>animation-duration</code> ), <code>animation-timing-function</code> говорит о том, как автомобиль ускоряется и замедляется в ходе движения. Для популярных опций есть несколько предопределенных ключевых слов. Например, значение по умолчанию - это <code>ease</code> , которая начинается медленно, ускоряется в середине, а затем в конце замедляется. Другие варианты включают <code>ease-out</code> , которое быстро начинается, а затем замедляется, <code>ease-in</code> , что медленно начинается, а затем ускоряется в конце или <code>linear</code> , что накладывает постоянную скорость анимации.
</section>
## Instructions ## Instructions
undefined <section id='instructions'>
For the elements with id of <code>ball1</code> and <code>ball2</code>, add an <code>animation-timing-function</code> property to each, and set <code>#ball1</code> to <code>linear</code>, and <code>#ball2</code> to <code>ease-out</code>. Notice the difference between how the elements move during the animation but end together, since they share the same <code>animation-duration</code> of 2 seconds.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: '' - text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.
testString: 'assert($("#ball1").css("animation-timing-function") == "linear", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.");' testString: assert($('#ball1').css('animation-timing-function') == 'linear');
- text: '' - text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.");' testString: assert($('#ball2').css('animation-timing-function') == 'ease-out');
``` ```
@ -58,14 +63,14 @@ tests:
} }
@keyframes bounce { @keyframes bounce {
0% { 0% {
top: 0px; top: 0px;
}
100% {
top: 249px;
}
} }
100% {
top: 249px;
}
}
</style> </style>
@ -76,14 +81,48 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.balls {
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
left:27%;
animation-timing-function: linear;
}
#ball2 {
left:56%;
animation-timing-function: ease-out;
}
@keyframes bounce {
0% {
top: 0px;
}
100% {
top: 249px;
}
}
</style>
<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>
``` ```
</section> </section>

43
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.russian.md
View File

@ -2,23 +2,28 @@
id: 587d78a3367417b2b2512acf id: 587d78a3367417b2b2512acf
title: Change the Position of Overlapping Elements with the z-index Property title: Change the Position of Overlapping Elements with the z-index Property
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cM94aHk
forumTopicId: 301046
localeTitle: Изменение позиции перекрывающихся элементов с помощью свойства z-index localeTitle: Изменение позиции перекрывающихся элементов с помощью свойства z-index
--- ---
## Description ## Description
<section id="description"> Когда элементы расположены для перекрытия, элемент, следующий позже в разметке HTML, по умолчанию будет отображаться поверх других элементов. Однако свойство <code>z-index</code> может указывать порядок расположения элементов друг над другом. Он должен быть целым числом (то есть целым числом, а не десятичным), а более высокие значения для свойства <code>z-index</code> элемента перемещают его выше в стеке, чем те, у которых более низкие значения. </section> <section id='description'>
Когда элементы расположены для перекрытия, элемент, следующий позже в разметке HTML, по умолчанию будет отображаться поверх других элементов. Однако свойство <code>z-index</code> может указывать порядок расположения элементов друг над другом. Он должен быть целым числом (то есть целым числом, а не десятичным), а более высокие значения для свойства <code>z-index</code> элемента перемещают его выше в стеке, чем те, у которых более низкие значения.
</section>
## Instructions ## Instructions
<section id="instructions"> Добавьте свойство <code>z-index</code> к элементу с именем класса <code>first</code> (красный прямоугольник) и установите для него значение 2, чтобы он покрывал другой элемент (синий прямоугольник). </section> <section id='instructions'>
Добавьте свойство <code>z-index</code> к элементу с именем класса <code>first</code> (красный прямоугольник) и установите для него значение 2, чтобы он покрывал другой элемент (синий прямоугольник).
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Элемент с классом <code>first</code> должен иметь значение <code>z-index</code> 2. - text: The element with class <code>first</code> should have a <code>z-index</code> value of 2.
testString: 'assert($(".first").css("z-index") == "2", "The element with class <code>first</code> should have a <code>z-index</code> value of 2.");' testString: assert($('.first').css('z-index') == '2');
``` ```
@ -58,14 +63,34 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
div {
width: 60%;
height: 200px;
margin-top: 20px;
}
.first {
background-color: red;
position: absolute;
z-index: 2;
}
.second {
background-color: blue;
position: absolute;
left: 40px;
top: 50px;
z-index: 1;
}
</style>
<div class="first"></div>
<div class="second"></div>
``` ```
</section> </section>

34
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.russian.md
View File

@ -2,23 +2,28 @@
id: 587d78a5367417b2b2512ad6 id: 587d78a5367417b2b2512ad6
title: Create a Gradual CSS Linear Gradient title: Create a Gradual CSS Linear Gradient
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cg4dpt9
forumTopicId: 301047
localeTitle: Создать линейный градиент линейного CSS localeTitle: Создать линейный градиент линейного CSS
--- ---
## Description ## Description
<section id="description"> Применение цвета на элементах HTML не ограничивается одним плоским оттенком. CSS обеспечивает возможность использования цветовых переходов, иначе называемых градиентами, на элементах. Доступ к нему осуществляется через <code>background</code> отеля <code>linear-gradient()</code> функции. Вот общий синтаксис: <code>background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);</code> Первый аргумент указывает направление, с которого начинается переход цвета - его можно указать как градус, где 90deg делает вертикальный градиент, а 45deg - угловым, как обратная косая черта. Следующие аргументы определяют порядок цветов, используемых в градиенте. Пример: <code>background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));</code> </section> <section id='description'>
Применение цвета на элементах HTML не ограничивается одним плоским оттенком. CSS обеспечивает возможность использования цветовых переходов, иначе называемых градиентами, на элементах. Доступ к нему осуществляется через <code>background</code> отеля <code>linear-gradient()</code> функции. Вот общий синтаксис: <code>background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);</code> Первый аргумент указывает направление, с которого начинается переход цвета - его можно указать как градус, где 90deg делает вертикальный градиент, а 45deg - угловым, как обратная косая черта. Следующие аргументы определяют порядок цветов, используемых в градиенте. Пример: <code>background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));</code>
</section>
## Instructions ## Instructions
<section id="instructions"> Используйте <code>linear-gradient()</code> для <code>background</code> элемента <code>div</code> и установите его в направлении 35 градусов, чтобы изменить цвет с <code>#CCFFFF</code> на <code>#FFCCCC</code> . <strong>Заметка</strong> <br> Хотя есть другие способы указать значение цвета, например <code>rgb()</code> или <code>hsl()</code> , используйте шестнадцатеричные значения для этой задачи. </section> <section id='instructions'>
Используйте <code>linear-gradient()</code> для <code>background</code> элемента <code>div</code> и установите его в направлении 35 градусов, чтобы изменить цвет с <code>#CCFFFF</code> на <code>#FFCCCC</code> . <strong>Заметка</strong> <br> Хотя есть другие способы указать значение цвета, например <code>rgb()</code> или <code>hsl()</code> , используйте шестнадцатеричные значения для этой задачи.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Элемент <code>div</code> должен иметь <code>background</code> с <code>linear-gradient</code> с заданным направлением и цветами. - text: The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.
testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), "The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.");' testString: assert($('div').css('background-image').match(/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi));
``` ```
@ -31,8 +36,7 @@ tests:
```html ```html
<style> <style>
div {
div{
border-radius: 20px; border-radius: 20px;
width: 70%; width: 70%;
height: 400px; height: 400px;
@ -48,14 +52,22 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
div {
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
}
</style>
<div></div>
``` ```
</section> </section>

72
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.russian.md
View File

@ -2,27 +2,32 @@
id: 587d78a6367417b2b2512add id: 587d78a6367417b2b2512add
title: Create a Graphic Using CSS title: Create a Graphic Using CSS
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cEDWPs6
forumTopicId: 301048
localeTitle: Создать графику с помощью CSS localeTitle: Создать графику с помощью CSS
--- ---
## Description ## Description
<section id="description"> Управляя различными селекторами и свойствами, вы можете создавать интересные фигуры. Один из самых простых способов - полумесяц. Для этой задачи вам нужно работать с свойством <code>box-shadow</code> которое задает тень элемента, а также свойство <code>border-radius</code> которое контролирует округлость углов элемента. Вы создадите круглый прозрачный объект с хрустящей тень, слегка смещенной в сторону - тень на самом деле будет формой луны, которую вы видите. Чтобы создать круглый объект, свойство <code>border-radius</code> должно быть установлено равным 50%. Вы можете вспомнить более раннюю задачу о том, что свойство <code>box-shadow</code> принимает значения для <code>offset-x</code> , <code>offset-y</code> , <code>blur-radius</code> , <code>spread-radius</code> и значение цвета в этом порядке. Значения <code>blur-radius</code> <code>spread-radius</code> необязательны. </section> <section id='description'>
Управляя различными селекторами и свойствами, вы можете создавать интересные фигуры. Один из самых простых способов - полумесяц. Для этой задачи вам нужно работать с свойством <code>box-shadow</code> которое задает тень элемента, а также свойство <code>border-radius</code> которое контролирует округлость углов элемента. Вы создадите круглый прозрачный объект с хрустящей тень, слегка смещенной в сторону - тень на самом деле будет формой луны, которую вы видите. Чтобы создать круглый объект, свойство <code>border-radius</code> должно быть установлено равным 50%. Вы можете вспомнить более раннюю задачу о том, что свойство <code>box-shadow</code> принимает значения для <code>offset-x</code> , <code>offset-y</code> , <code>blur-radius</code> , <code>spread-radius</code> и значение цвета в этом порядке. Значения <code>blur-radius</code> <code>spread-radius</code> необязательны.
</section>
## Instructions ## Instructions
<section id="instructions"> Манипулируйте квадратный элемент в редакторе, чтобы создать форму луны. Сначала измените <code>background-color</code> на прозрачный, затем установите для свойства <code>border-radius</code> значение 50%, чтобы сделать круглую форму. Наконец, измените свойство <code>box-shadow</code> чтобы установить <code>offset-x</code> в 25px, <code>offset-y</code> до 10px, <code>blur-radius</code> до 0, <code>spread-radius</code> до 0 и цвет в синий. </section> <section id='instructions'>
Манипулируйте квадратный элемент в редакторе, чтобы создать форму луны. Сначала измените <code>background-color</code> на прозрачный, затем установите для свойства <code>border-radius</code> значение 50%, чтобы сделать круглую форму. Наконец, измените свойство <code>box-shadow</code> чтобы установить <code>offset-x</code> в 25px, <code>offset-y</code> до 10px, <code>blur-radius</code> до 0, <code>spread-radius</code> до 0 и цвет в синий.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Значение свойства <code>background-color</code> должно быть установлено на <code>transparent</code> . - text: The value of the <code>background-color</code> property should be set to <code>transparent</code>.
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the <code>background-color</code> property should be set to <code>transparent</code>.");' testString: assert(code.match(/background-color:\s*?transparent;/gi));
- text: Значение свойства <code>border-radius</code> должно быть установлено на <code>50%</code> . - text: The value of the <code>border-radius</code> property should be set to <code>50%</code>.
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the <code>border-radius</code> property should be set to <code>50%</code>.");' testString: assert(code.match(/border-radius:\s*?50%;/gi));
- text: 'Значение свойства <code>box-shadow</code> должно быть установлено равным 25px для <code>offset-x</code> , 10px для <code>offset-y</code> , 0 для <code>blur-radius</code> , 0 для <code>spread-radius</code> и, наконец, синего цвета.' - text: The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), "The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.");' testString: assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi));
``` ```
@ -35,20 +40,19 @@ tests:
```html ```html
<style> <style>
.center .center {
{ position: absolute;
position: absolute; margin: auto;
margin: auto; top: 0;
top: 0; right: 0;
right: 0; bottom: 0;
bottom: 0; left: 0;
left: 0; width: 100px;
width: 100px; height: 100px;
height: 100px; background-color: blue;
background-color: blue; border-radius: 0px;
border-radius: 0px; box-shadow: 25px 10px 10px 10px green;
box-shadow: 25px 10px 10px 10px green; }
}
</style> </style>
<div class="center"></div> <div class="center"></div>
@ -57,14 +61,28 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: transparent;
border-radius: 50%;
box-shadow: 25px 10px 0 0 blue;
}
</style>
<div class="center"></div>
``` ```
</section> </section>

64
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.russian.md
View File

@ -2,25 +2,30 @@
id: 587d781b367417b2b2512abb id: 587d781b367417b2b2512abb
title: Create a Horizontal Line Using the hr Element title: Create a Horizontal Line Using the hr Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c3bR8t7
forumTopicId: 301049
localeTitle: Создание горизонтальной линии с использованием элемента hr localeTitle: Создание горизонтальной линии с использованием элемента hr
--- ---
## Description ## Description
<section id="description"> Вы можете использовать тег <code>hr</code> чтобы добавить горизонтальную линию по ширине содержащего ее элемента. Это можно использовать для определения изменения темы или для визуального разделения групп контента. </section> <section id='description'>
Вы можете использовать тег <code>hr</code> чтобы добавить горизонтальную линию по ширине содержащего ее элемента. Это можно использовать для определения изменения темы или для визуального разделения групп контента.
</section>
## Instructions ## Instructions
<section id="instructions"> Добавьте <code>hr</code> тег под <code>h4</code> который содержит название карты. <strong>Заметка</strong> <br> В HTML <code>hr</code> является самозакрывающимся тегом и поэтому не требует отдельного закрывающего тега. </section> <section id='instructions'>
Добавьте <code>hr</code> тег под <code>h4</code> который содержит название карты. <strong>Заметка</strong> <br> В HTML <code>hr</code> является самозакрывающимся тегом и поэтому не требует отдельного закрывающего тега.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен добавить метку <code>hr</code> к разметке. - text: Your code should add an <code>hr</code> tag to the markup.
testString: 'assert($("hr").length == 1, "Your code should add an <code>hr</code> tag to the markup.");' testString: assert($('hr').length == 1);
- text: Тег <code>hr</code> должен находиться между заголовком и абзацем. - text: The <code>hr</code> tag should come between the title and the paragraph.
testString: 'assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), "The <code>hr</code> tag should come between the title and the paragraph.");' testString: assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
``` ```
@ -76,14 +81,51 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4><s>Google</s>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

134
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.russian.md
View File

@ -2,29 +2,34 @@
id: 587d78a6367417b2b2512ade id: 587d78a6367417b2b2512ade
title: Create a More Complex Shape Using CSS and HTML title: Create a More Complex Shape Using CSS and HTML
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cPpz4fr
forumTopicId: 301050
localeTitle: Создание более сложной формы с использованием CSS и HTML localeTitle: Создание более сложной формы с использованием CSS и HTML
--- ---
## Description ## Description
<section id="description"> Одна из самых популярных фигур в мире - это форма сердца, и в этой задаче вы создадите один, используя чистый CSS. Но сначала вам нужно понять псевдо-элементы <code>::before</code> и <code>::after</code> . Эти псевдоэлементы используются для добавления чего-либо до или после выбранного элемента. В следующем примере под <code>::before</code> a <code>::before</code> используется для добавления прямоугольника к элементу с <code>heart</code> класса: <blockquote> .heart :: before { <br> content: &quot;&quot;; <br> background-color: желтый; <br> пограничный радиус: 25%; <br> позиция: абсолютная; <br> высота: 50 пикселей; <br> ширина: 70 пикселей; <br> top: -50px; <br> left: 5px; <br> } </blockquote> Чтобы функции <code>::before</code> и <code>::after</code> псевдоэлементов функционировали должным образом, они должны иметь определенное свойство <code>content</code> . Это свойство обычно используется для добавления к выбранному элементу таких вещей, как фотография или текст. Когда для создания фигур используются элементы <code>::before</code> и <code>::after</code> псевдоэлементов, свойство <code>content</code> по-прежнему требуется, но оно установлено в пустую строку. В приведенном выше примере элемент с классом <code>heart</code> имеет <code>::before</code> псевдоэлементом, который создает желтый прямоугольник с <code>height</code> и <code>width</code> 50 пикселей и 70 пикселей соответственно. Этот прямоугольник имеет круглые углы из-за его 25-процентного пограничного радиуса и расположен абсолютно в 5px <code>left</code> и 50px над <code>top</code> частью элемента. </section> <section id='description'>
Одна из самых популярных фигур в мире - это форма сердца, и в этой задаче вы создадите один, используя чистый CSS. Но сначала вам нужно понять псевдо-элементы <code>::before</code> и <code>::after</code> . Эти псевдоэлементы используются для добавления чего-либо до или после выбранного элемента. В следующем примере под <code>::before</code> a <code>::before</code> используется для добавления прямоугольника к элементу с <code>heart</code> класса: <blockquote> .heart :: before { <br> content: &quot;&quot;; <br> background-color: желтый; <br> пограничный радиус: 25%; <br> позиция: абсолютная; <br> высота: 50 пикселей; <br> ширина: 70 пикселей; <br> top: -50px; <br> left: 5px; <br> } </blockquote> Чтобы функции <code>::before</code> и <code>::after</code> псевдоэлементов функционировали должным образом, они должны иметь определенное свойство <code>content</code> . Это свойство обычно используется для добавления к выбранному элементу таких вещей, как фотография или текст. Когда для создания фигур используются элементы <code>::before</code> и <code>::after</code> псевдоэлементов, свойство <code>content</code> по-прежнему требуется, но оно установлено в пустую строку. В приведенном выше примере элемент с классом <code>heart</code> имеет <code>::before</code> псевдоэлементом, который создает желтый прямоугольник с <code>height</code> и <code>width</code> 50 пикселей и 70 пикселей соответственно. Этот прямоугольник имеет круглые углы из-за его 25-процентного пограничного радиуса и расположен абсолютно в 5px <code>left</code> и 50px над <code>top</code> частью элемента.
</section>
## Instructions ## Instructions
<section id="instructions"> Преобразуйте элемент на экране в сердце. В <code>heart::after</code> селектора измените <code>background-color</code> на розовый и <code>border-radius</code> до 50%. Затем задайте элемент с <code>heart</code> класса (просто <code>heart</code> ) и заполните свойство <code>transform</code> . Используйте функцию <code>rotate()</code> с -45 градусов. ( <code>rotate()</code> работает так же, как <code>skewX()</code> и <code>skewY()</code> do). Наконец, в <code>heart::before</code> селектором установите его свойство <code>content</code> в пустую строку. </section> <section id='instructions'>
Преобразуйте элемент на экране в сердце. В <code>heart::after</code> селектора измените <code>background-color</code> на розовый и <code>border-radius</code> до 50%. Затем задайте элемент с <code>heart</code> класса (просто <code>heart</code> ) и заполните свойство <code>transform</code> . Используйте функцию <code>rotate()</code> с -45 градусов. ( <code>rotate()</code> работает так же, как <code>skewX()</code> и <code>skewY()</code> do). Наконец, в <code>heart::before</code> селектором установите его свойство <code>content</code> в пустую строку.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Свойство <code>background-color</code> для <code>heart::after</code> селектора должно быть розовым.' - text: The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.");' testString: assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi));
- text: '' - text: The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.");' testString: assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
- text: Свойство <code>transform</code> для класса <code>heart</code> должно использовать функцию <code>rotate()</code> установленную на -45 градусов. - text: The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.");' testString: assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
- text: '<code>content</code> <code>heart::before</code> селектором должна быть пустая строка.' - text: The <code>content</code> of the <code>heart::before</code> selector should be an empty string.
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.");' testString: assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
``` ```
@ -37,53 +42,86 @@ tests:
```html ```html
<style> <style>
.heart { .heart {
position: absolute; position: absolute;
margin: auto; margin: auto;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: pink; background-color: pink;
height: 50px; height: 50px;
width: 50px; width: 50px;
transform: ; transform: ;
} }
.heart::after { .heart::after {
background-color: blue; background-color: blue;
content: ""; content: "";
border-radius: 25%; border-radius: 25%;
position: absolute; position: absolute;
width: 50px; width: 50px;
height: 50px; height: 50px;
top: 0px; top: 0px;
left: 25px; left: 25px;
} }
.heart::before { .heart::before {
content: ; content: ;
background-color: pink; background-color: pink;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
width: 50px; width: 50px;
height: 50px; height: 50px;
top: -25px; top: -25px;
left: 0px; left: 0px;
} }
</style> </style>
<div class = "heart"></div> <div class="heart"></div>
``` ```
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart::after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content: "";
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
<div class="heart"></div>
``` ```
</section> </section>

99
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.russian.md
View File

@ -2,27 +2,32 @@
id: 587d78a7367417b2b2512ae1 id: 587d78a7367417b2b2512ae1
title: Create Movement Using CSS Animation title: Create Movement Using CSS Animation
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c7amZfW
forumTopicId: 301051
localeTitle: Создание движения с использованием анимации CSS localeTitle: Создание движения с использованием анимации CSS
--- ---
## Description ## Description
<section id="description"> Когда элементы имеют заданную <code>position</code> , например <code>fixed</code> или <code>relative</code> , свойства смещения CSS <code>right</code> , <code>left</code> , <code>top</code> и <code>bottom</code> могут использоваться в правилах анимации для создания движения. Как показано в приведенном ниже примере, вы можете нажать элемент вниз, а затем вверх, установив <code>top</code> свойство <code>50%</code> ключевого кадра на <code>50%</code> пикселей, но установив его на 0px для первого ( <code>0%</code> ) и последнего ( <code>100%</code> ) ключевого кадра. <blockquote> @keyframes rainbow { <br> 0% { <br> background-color: blue; <br> top: 0px; <br> } <br> 50% { <br> фон-цвет: зеленый; <br> top: 50px; <br> } <br> 100% { <br> background-color: желтый; <br> top: 0px; <br> } <br> } </blockquote></section> <section id='description'>
Когда элементы имеют заданную <code>position</code> , например <code>fixed</code> или <code>relative</code> , свойства смещения CSS <code>right</code> , <code>left</code> , <code>top</code> и <code>bottom</code> могут использоваться в правилах анимации для создания движения. Как показано в приведенном ниже примере, вы можете нажать элемент вниз, а затем вверх, установив <code>top</code> свойство <code>50%</code> ключевого кадра на <code>50%</code> пикселей, но установив его на 0px для первого ( <code>0%</code> ) и последнего ( <code>100%</code> ) ключевого кадра. <blockquote> @keyframes rainbow { <br> 0% { <br> background-color: blue; <br> top: 0px; <br> } <br> 50% { <br> фон-цвет: зеленый; <br> top: 50px; <br> } <br> 100% { <br> background-color: желтый; <br> top: 0px; <br> } <br> } </blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Добавьте горизонтальное движение в анимацию <code>div</code> . Используя свойство <code>left</code> offset, добавьте правило <code>@keyframes</code> так что радуга начинается с 0 пикселей на <code>0%</code> , перемещается до 25 пикселей с <code>50%</code> и заканчивается на -25 пикселей при <code>100%</code> . Не заменяйте <code>top</code> свойство в редакторе - анимация должна иметь как вертикальное, так и горизонтальное движение. </section> <section id='instructions'>
Добавьте горизонтальное движение в анимацию <code>div</code> . Используя свойство <code>left</code> offset, добавьте правило <code>@keyframes</code> так что радуга начинается с 0 пикселей на <code>0%</code> , перемещается до 25 пикселей с <code>50%</code> и заканчивается на -25 пикселей при <code>100%</code> . Не заменяйте <code>top</code> свойство в редакторе - анимация должна иметь как вертикальное, так и горизонтальное движение.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Правило <code>@keyframes</code> для <code>0%</code> должно использовать <code>left</code> смещение 0px. - text: The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), "The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.");' testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi));
- text: Правило <code>@keyframes</code> для <code>50%</code> должно использовать <code>left</code> смещение 25px. - text: The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.");' testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi));
- text: Правило <code>@keyframes</code> для <code>100%</code> должно использовать <code>left</code> смещение -25px. - text: The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.");' testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi));
``` ```
@ -44,28 +49,28 @@ tests:
position: relative; position: relative;
} }
#rect { #rect {
animation-name: rainbow; animation-name: rainbow;
animation-duration: 4s; animation-duration: 4s;
}
@keyframes rainbow {
0% {
background-color: blue;
top: 0px;
} }
50% {
background-color: green;
top: 50px;
} @keyframes rainbow {
100% { 0% {
background-color: yellow; background-color: blue;
top: 0px; top: 0px;
}
50% {
background-color: green;
top: 50px;
}
100% {
background-color: yellow;
top: 0px;
}
} }
}
</style> </style>
<div id="rect"></div> <div id="rect"></div>
@ -74,14 +79,46 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
position: relative;
}
#rect {
animation-name: rainbow;
animation-duration: 4s;
}
@keyframes rainbow {
0% {
background-color: blue;
top: 0px;
left: 0px;
}
50% {
background-color: green;
top: 50px;
left: 25px;
}
100% {
background-color: yellow;
top: 0px;
left: -25px;
}
}
</style>
<div id="rect"></div>
``` ```
</section> </section>

26
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.russian.md
View File

@ -2,23 +2,28 @@
id: 587d78a5367417b2b2512ad8 id: 587d78a5367417b2b2512ad8
title: Create Texture by Adding a Subtle Pattern as a Background Image title: Create Texture by Adding a Subtle Pattern as a Background Image
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cQdwJC8
forumTopicId: 301052
localeTitle: Создание текстуры путем добавления тонкого шаблона в качестве фонового изображения localeTitle: Создание текстуры путем добавления тонкого шаблона в качестве фонового изображения
--- ---
## Description ## Description
<section id="description"> Один из способов добавить текстуру и интерес к фону и подчеркнуть ее - добавить тонкий узор. Ключом является баланс, так как вы не хотите, чтобы фон выделялся слишком много, и убирайте с переднего плана. Свойство <code>background</code> поддерживает функцию <code>url()</code> , чтобы ссылаться на изображение выбранной текстуры или рисунка. Адрес ссылки заключен в кавычки внутри круглых скобок. </section> <section id='description'>
Один из способов добавить текстуру и интерес к фону и подчеркнуть ее - добавить тонкий узор. Ключом является баланс, так как вы не хотите, чтобы фон выделялся слишком много, и убирайте с переднего плана. Свойство <code>background</code> поддерживает функцию <code>url()</code> , чтобы ссылаться на изображение выбранной текстуры или рисунка. Адрес ссылки заключен в кавычки внутри круглых скобок.
</section>
## Instructions ## Instructions
<section id="instructions"> Использование URL в <code>https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png</code> , установить <code>background</code> всей страницы с <code>body</code> селектором. </section> <section id='instructions'>
Использование URL в <code>https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png</code> , установить <code>background</code> всей страницы с <code>body</code> селектором.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Элемент вашего <code>body</code> должен иметь свойство <code>background</code> установленное в <code>url()</code> с указанной ссылкой. - text: Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.
testString: 'assert(code.match(/background:\s*?url\(\s*("|"|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi), "Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.");' testString: assert(code.match(/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi));
``` ```
@ -40,14 +45,17 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
}
</style>
``` ```
</section> </section>

58
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.russian.md
View File

@ -2,25 +2,30 @@
id: 587d7791367417b2b2512ab3 id: 587d7791367417b2b2512ab3
title: Create Visual Balance Using the text-align Property title: Create Visual Balance Using the text-align Property
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c3b4EAp
forumTopicId: 301053
localeTitle: Создание визуального баланса Использование свойства text-align localeTitle: Создание визуального баланса Использование свойства text-align
--- ---
## Description ## Description
<section id="description"> Этот раздел учебной программы посвящен прикладному визуальному дизайну. Первая группа задач основывается на данном макете карты, чтобы показать ряд основных принципов. Текст часто является большой частью веб-контента. CSS имеет несколько вариантов выравнивания его с свойством <code>text-align</code> . <code>text-align: justify;</code> вызывает все строки текста, кроме последней строки, для соответствия левому и правому краям строки строки. <code>text-align: center;</code> центрирует текст <code>text-align: right;</code> выравнивание по правому краю текста и <code>text-align: left;</code> (по умолчанию) выравнивает текст по левому краю. </section> <section id='description'>
Этот раздел учебной программы посвящен прикладному визуальному дизайну. Первая группа задач основывается на данном макете карты, чтобы показать ряд основных принципов. Текст часто является большой частью веб-контента. CSS имеет несколько вариантов выравнивания его с свойством <code>text-align</code> . <code>text-align: justify;</code> вызывает все строки текста, кроме последней строки, для соответствия левому и правому краям строки строки. <code>text-align: center;</code> центрирует текст <code>text-align: right;</code> выравнивание по правому краю текста и <code>text-align: left;</code> (по умолчанию) выравнивает текст по левому краю.
</section>
## Instructions ## Instructions
<section id="instructions"> Совместите текст тега <code>h4</code> , в котором говорится «Google», в центр. Затем оправдайте тег абзаца, который содержит информацию о том, как Google был основан. </section> <section id='instructions'>
Совместите текст тега <code>h4</code> , в котором говорится «Google», в центр. Затем оправдайте тег абзаца, который содержит информацию о том, как Google был основан.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен использовать свойство text-align для тега <code>h4</code> чтобы установить его в центр. - text: Your code should use the text-align property on the <code>h4</code> tag to set it to center.
testString: 'assert($("h4").css("text-align") == "center", "Your code should use the text-align property on the <code>h4</code> tag to set it to center.");' testString: assert($('h4').css('text-align') == 'center');
- text: Ваш код должен использовать свойство text-align на тэге <code>p</code> чтобы установить его для оправдания. - text: Your code should use the text-align property on the <code>p</code> tag to set it to justify.
testString: 'assert($("p").css("text-align") == "justify", "Your code should use the text-align property on the <code>p</code> tag to set it to justify.");' testString: assert($('p').css('text-align') == 'justify');
``` ```
@ -70,14 +75,45 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
}
p {
text-align: justify;
}
.links {
margin-right: 20px;
}
.fullCard {
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Google</h4>
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

48
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.russian.md
View File

@ -2,23 +2,28 @@
id: 587d78a7367417b2b2512ae2 id: 587d78a7367417b2b2512ae2
title: Create Visual Direction by Fading an Element from Left to Right title: Create Visual Direction by Fading an Element from Left to Right
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cGJqqAE
localeTitle: 'Создать визуальное направление, затухая элемент слева направо' forumTopicId: 301054
localeTitle: Создать визуальное направление, затухая элемент слева направо
--- ---
## Description ## Description
<section id="description"> Для этой задачи вы измените <code>opacity</code> анимированного элемента, чтобы он постепенно исчезал, когда он достиг правой стороны экрана. В отображаемой анимации круглый элемент с фоном градиента перемещается вправо на 50% метки анимации по правилу <code>@keyframes</code> . </section> <section id='description'>
Для этой задачи вы измените <code>opacity</code> анимированного элемента, чтобы он постепенно исчезал, когда он достиг правой стороны экрана. В отображаемой анимации круглый элемент с фоном градиента перемещается вправо на 50% метки анимации по правилу <code>@keyframes</code> .
</section>
## Instructions ## Instructions
<section id="instructions"> Задайте элемент с идентификатором <code>ball</code> и добавьте свойство <code>opacity</code> равное 0.1, равное <code>50%</code> , поэтому элемент исчезает, когда он перемещается вправо. </section> <section id='instructions'>
Задайте элемент с идентификатором <code>ball</code> и добавьте свойство <code>opacity</code> равное 0.1, равное <code>50%</code> , поэтому элемент исчезает, когда он перемещается вправо.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Правило <code>keyframes</code> для fade должно установить свойство <code>opacity</code> 0,1 на 50%.' - text: The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.
testString: 'assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), "The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.");' testString: assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi));
``` ```
@ -63,14 +68,37 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
#ball {
width: 70px;
height: 70px;
margin: 50px auto;
position: fixed;
left: 20%;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: fade;
animation-duration: 3s;
}
@keyframes fade {
50% {
left: 60%;
opacity: 0.1;
}
}
</style>
<div id="ball"></div>
``` ```
</section> </section>

66
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.russian.md
View File

@ -2,23 +2,28 @@
id: 587d781c367417b2b2512abf id: 587d781c367417b2b2512abf
title: Decrease the Opacity of an Element title: Decrease the Opacity of an Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c7aKqu4
forumTopicId: 301055
localeTitle: Уменьшить непрозрачность элемента localeTitle: Уменьшить непрозрачность элемента
--- ---
## Description ## Description
<section id="description"> Свойство <code>opacity</code> в CSS используется для настройки непрозрачности или, наоборот, прозрачности для элемента. <blockquote> Значение 1 непрозрачно, что совсем не прозрачно. <br> Значение 0,5 равно половине видимости. <br> Значение 0 полностью прозрачно. </blockquote> Приведенное значение будет применяться ко всему элементу, будь то изображение с некоторой прозрачностью или цвета переднего плана и фона для блока текста. </section> <section id='description'>
Свойство <code>opacity</code> в CSS используется для настройки непрозрачности или, наоборот, прозрачности для элемента. <blockquote> Значение 1 непрозрачно, что совсем не прозрачно. <br> Значение 0,5 равно половине видимости. <br> Значение 0 полностью прозрачно. </blockquote> Приведенное значение будет применяться ко всему элементу, будь то изображение с некоторой прозрачностью или цвета переднего плана и фона для блока текста.
</section>
## Instructions ## Instructions
<section id="instructions"> Установите <code>opacity</code> тегов привязки на 0.7, используя класс <code>links</code> чтобы выбрать их. </section> <section id='instructions'>
Установите <code>opacity</code> тегов привязки на 0.7, используя класс <code>links</code> чтобы выбрать их.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Ваш код должен установить свойство <code>opacity</code> 0,7 в тегах привязки, выбрав класс <code>links</code> .' - text: Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.
testString: 'assert.approximately(parseFloat($(".links").css("opacity")), 0.7, 0.1, "Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.");' testString: assert(/\.links\s*\{[^}]+opacity\s*:\s*0.7;/.test(code));
``` ```
@ -80,14 +85,57 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
opacity: 0.7;
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard" id="thumbnail">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

43
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.russian.md
View File

@ -2,25 +2,30 @@
id: 587d78a3367417b2b2512ad1 id: 587d78a3367417b2b2512ad1
title: Learn about Complementary Colors title: Learn about Complementary Colors
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c2MD3Tr
forumTopicId: 301056
localeTitle: Узнайте о дополнительных цветах localeTitle: Узнайте о дополнительных цветах
--- ---
## Description ## Description
<section id="description"> Теория цвета и его влияние на дизайн являются глубокой темой, и только основные вопросы рассматриваются в следующих задачах. На веб-сайте цвет может привлекать внимание к контенту, вызывать эмоции или создавать визуальную гармонию. Использование различных комбинаций цветов может действительно изменить внешний вид веб-сайта, и многие мысли могут пойти на подбор цветовой палитры, которая работает с вашим контентом. Цветовое колесо - полезный инструмент для визуализации того, как соотносятся цвета друг с другом - это круг, где похожие оттенки соседствуют, а разные оттенки находятся дальше друг от друга. Когда два цвета противоположны друг другу на колесе, их называют дополнительными цветами. У них есть характеристика, что если они объединены, они «отменяют» друг друга и создают серый цвет. Однако при размещении бок о бок эти цвета выглядят более яркими и создают сильный визуальный контраст. Некоторые примеры дополнительных цветов с шестнадцатеричными кодами: <blockquote> красный (# FF0000) и голубой (# 00FFFF) <br> зеленый (# 00FF00) и пурпурный (# FF00FF) <br> синий (# 0000FF) и желтый (# FFFF00) </blockquote> Это отличается от устаревшей цветовой модели RYB, которую многие из нас преподавали в школе, которая имеет разные первичные и дополнительные цвета. Современная теория цвета использует аддитивную модель RGB (например, на экране компьютера) и субтрактивную модель CMY (K) (например, в печати). Читайте <a href="https://en.wikipedia.org/wiki/Color_model" target="_blank">здесь</a> для получения дополнительной информации об этом сложном предмете. В Интернете доступно множество инструментов для выбора цветов, которые могут найти дополнение к цвету. <strong>Заметка</strong> <br> Для всех цветовых задач: использование цвета может стать мощным способом добавить визуальный интерес к странице. Тем не менее, только цвет не должен использоваться как единственный способ передачи важной информации, поскольку пользователи с нарушениями зрения могут не понимать этот контент. Эта проблема будет рассмотрена более подробно в задачах прикладной доступности. </section> <section id='description'>
Теория цвета и его влияние на дизайн являются глубокой темой, и только основные вопросы рассматриваются в следующих задачах. На веб-сайте цвет может привлекать внимание к контенту, вызывать эмоции или создавать визуальную гармонию. Использование различных комбинаций цветов может действительно изменить внешний вид веб-сайта, и многие мысли могут пойти на подбор цветовой палитры, которая работает с вашим контентом. Цветовое колесо - полезный инструмент для визуализации того, как соотносятся цвета друг с другом - это круг, где похожие оттенки соседствуют, а разные оттенки находятся дальше друг от друга. Когда два цвета противоположны друг другу на колесе, их называют дополнительными цветами. У них есть характеристика, что если они объединены, они «отменяют» друг друга и создают серый цвет. Однако при размещении бок о бок эти цвета выглядят более яркими и создают сильный визуальный контраст. Некоторые примеры дополнительных цветов с шестнадцатеричными кодами: <blockquote> красный (# FF0000) и голубой (# 00FFFF) <br> зеленый (# 00FF00) и пурпурный (# FF00FF) <br> синий (# 0000FF) и желтый (# FFFF00) </blockquote> Это отличается от устаревшей цветовой модели RYB, которую многие из нас преподавали в школе, которая имеет разные первичные и дополнительные цвета. Современная теория цвета использует аддитивную модель RGB (например, на экране компьютера) и субтрактивную модель CMY (K) (например, в печати). Читайте <a href="https://en.wikipedia.org/wiki/Color_model" target="_blank">здесь</a> для получения дополнительной информации об этом сложном предмете. В Интернете доступно множество инструментов для выбора цветов, которые могут найти дополнение к цвету. <strong>Заметка</strong> <br> Для всех цветовых задач: использование цвета может стать мощным способом добавить визуальный интерес к странице. Тем не менее, только цвет не должен использоваться как единственный способ передачи важной информации, поскольку пользователи с нарушениями зрения могут не понимать этот контент. Эта проблема будет рассмотрена более подробно в задачах прикладной доступности.
</section>
## Instructions ## Instructions
<section id="instructions"> Измените свойство <code>background-color</code> <code>blue</code> и <code>yellow</code> классов на соответствующие цвета. Обратите внимание, как цвета выглядят по-разному рядом друг с другом, чем они сравниваются с белым фоном. </section> <section id='instructions'>
Измените свойство <code>background-color</code> <code>blue</code> и <code>yellow</code> классов на соответствующие цвета. Обратите внимание, как цвета выглядят по-разному рядом друг с другом, чем они сравниваются с белым фоном.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Элемент <code>div</code> с <code>blue</code> должен иметь синий <code>background-color</code> . - text: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.
testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.");' testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
- text: Элемент <code>div</code> с <code>yellow</code> классом должен иметь желтый <code>background-color</code> . - text: The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.
testString: 'assert($(".yellow").css("background-color") == "rgb(255, 255, 0)", "The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.");' testString: assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
``` ```
@ -55,14 +60,30 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background-color: #FFFFFF;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
div {
display: inline-block;
height: 100px;
width: 100px;
}
</style>
<div class="blue"></div>
<div class="yellow"></div>
``` ```
</section> </section>

57
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.russian.md
View File

@ -2,27 +2,34 @@
id: 587d78a4367417b2b2512ad2 id: 587d78a4367417b2b2512ad2
title: Learn about Tertiary Colors title: Learn about Tertiary Colors
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c3bRDAb
forumTopicId: 301057
localeTitle: Узнайте о третичных цветах localeTitle: Узнайте о третичных цветах
--- ---
## Description ## Description
<section id="description"> Компьютерные мониторы и экраны устройств создают разные цвета, комбинируя количество красного, зеленого и синего света. Это известно как цветовая модель RGB-аддитивности в современной теории цвета. Красный (R), зеленый (G) и синий (B) называются основными цветами. Смешивание двух основных цветов создает вторичные цвета cyan (G + B), пурпурный (R + B) и желтый (R + G). Вы видели эти цвета в задаче «Дополнительные цвета». Эти вторичные цвета являются дополнением к основному цвету, не используемому при их создании, и противоположны этому основному цвету на цветовом круге. Например, пурпурный цвет выполнен красным и синим цветом и является дополнением к зеленому. Третичные цвета являются результатом объединения основного цвета с одним из его вторичных соседних цветов. Например, красный (первичный) и желтый (вторичный) оранжевый. Это добавляет еще шесть цветов к простому цветному колесу в общей сложности двенадцать. Существуют различные способы выбора разных цветов, которые приводят к гармоничному сочетанию в дизайне. Один пример, который может использовать третичные цвета, называется схемой разделения цветов. Эта схема начинается с базового цвета, а затем соединяет ее с двумя цветами, которые смежны с его дополнением. Три цвета обеспечивают сильный визуальный контраст в дизайне, но более тонкие, чем использование двух дополнительных цветов. Вот три цвета, созданные с использованием схемы сплит-дополнений: <table class="table table-striped"><thead><tr><th> цвет </th><th> Шестнадцатеричный код </th></tr></thead><thead></thead><tbody><tr><td> оранжевый </td><td> # FF7D00 </td></tr><tr><td> циан </td><td> # 00FFFF </td></tr><tr><td> малина </td><td> # FF007D </td></tr></tbody></table></section> <section id='description'>
Компьютерные мониторы и экраны устройств создают разные цвета, комбинируя количество красного, зеленого и синего света. Это известно как цветовая модель RGB-аддитивности в современной теории цвета. Красный (R), зеленый (G) и синий (B) называются основными цветами. Смешивание двух основных цветов создает вторичные цвета cyan (G + B), пурпурный (R + B) и желтый (R + G). Вы видели эти цвета в задаче «Дополнительные цвета». Эти вторичные цвета являются дополнением к основному цвету, не используемому при их создании, и противоположны этому основному цвету на цветовом круге. Например, пурпурный цвет выполнен красным и синим цветом и является дополнением к зеленому. Третичные цвета являются результатом объединения основного цвета с одним из его вторичных соседних цветов. Например, красный (первичный) и желтый (вторичный) оранжевый. Это добавляет еще шесть цветов к простому цветному колесу в общей сложности двенадцать. Существуют различные способы выбора разных цветов, которые приводят к гармоничному сочетанию в дизайне. Один пример, который может использовать третичные цвета, называется схемой разделения цветов. Эта схема начинается с базового цвета, а затем соединяет ее с двумя цветами, которые смежны с его дополнением. Три цвета обеспечивают сильный визуальный контраст в дизайне, но более тонкие, чем использование двух дополнительных цветов. Вот три цвета, созданные с использованием схемы сплит-дополнений: <table class="table table-striped"><thead><tr><th> цвет </th><th> Шестнадцатеричный код </th></tr></thead><thead></thead><tbody><tr><td> оранжевый </td><td> # FF7D00 </td></tr><tr><td> циан </td><td> # 00FFFF </td></tr><tr><td> малина </td><td> # FF007D </td></tr></tbody></table>
</section>
## Instructions ## Instructions
<section id="instructions"> Измените свойство <code>background-color</code> классов <code>orange</code> , <code>cyan</code> и <code>raspberry</code> цветов на соответствующие цвета. Обязательно используйте шестнадцатеричные коды как оранжевые, а малины не являются признанными в браузере именами цветов. </section> <section id='instructions'>
Измените свойство <code>background-color</code> классов <code>orange</code> , <code>cyan</code> и <code>raspberry</code> цветов на соответствующие цвета. Обязательно используйте шестнадцатеричные коды как оранжевые, а малины не являются признанными в браузере именами цветов.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Элемент <code>div</code> с <code>orange</code> класса должен иметь оранжевый <code>background-color</code> . - text: The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.
testString: 'assert($(".orange").css("background-color") == "rgb(255, 125, 0)", "The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.");' testString: assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
- text: Элемент <code>div</code> с классом <code>cyan</code> должен иметь <code>background-color</code> cyan. - text: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.
testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.");' testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
- text: Элемент <code>div</code> с классом <code>raspberry</code> должен иметь <code>background-color</code> малины. - text: The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.
testString: 'assert($(".raspberry").css("background-color") == "rgb(255, 0, 125)", "The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.");' testString: assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
- text: All <code>background-color</code> values for the color classes should be hex codes and not color names.
testString: assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
``` ```
@ -66,14 +73,38 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background-color: #FFFFFF;
}
.orange {
background-color: #FF7F00;
}
.cyan {
background-color: #00FFFF;
}
.raspberry {
background-color: #FF007F;
}
div {
height: 100px;
width: 100px;
margin-bottom: 5px;
}
</style>
<div class="orange"></div>
<div class="cyan"></div>
<div class="raspberry"></div>
``` ```
</section> </section>

78
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.russian.md
View File

@ -2,25 +2,30 @@
id: 587d78a9367417b2b2512ae8 id: 587d78a9367417b2b2512ae8
title: Learn How Bezier Curves Work title: Learn How Bezier Curves Work
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c9bDrs8
localeTitle: 'Узнайте, как работают кривые Безье' forumTopicId: 301058
localeTitle: Узнайте, как работают кривые Безье
--- ---
## Description ## Description
<section id="description"> Последняя задача <code>animation-timing-function</code> свойство <code>animation-timing-function</code> и несколько ключевых слов, которые изменяют скорость анимации в течение ее продолжительности. CSS предлагает опцию, отличную от ключевых слов, которая обеспечивает еще более точный контроль над тем, как анимация разыгрывается, используя кривые Безье. В анимациях CSS кривые Безье используются с функцией <code>cubic-bezier</code> . Форма кривой показывает, как анимация разыгрывается. Кривая живет в системе координат 1 на 1. Ось X этой системы координат - это продолжительность анимации (считайте ее временной шкалой), а ось Y - это изменение анимации. Функция <code>cubic-bezier</code> состоит из четырех основных точек, которые расположены на этой сетке 1 на 1: <code>p0</code> , <code>p1</code> , <code>p2</code> и <code>p3</code> . <code>p0</code> и <code>p3</code> для вас - это начальная и конечная точки, которые всегда расположены соответственно в начале (0, 0) и (1, 1). Вы устанавливаете значения x и y для двух других точек, а место размещения в сетке определяет форму кривой для анимации. Это делается в CSS, объявляя значения x и y опорных точек <code>p1</code> и <code>p2</code> в форме: <code>(x1, y1, x2, y2)</code> . Вытянув все это вместе, вот пример кривой Безье в CSS-коде: <code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code> В приведенном выше примере значения x и y эквивалентны для каждой точки (x1 = 0,25 = y1 и x2 = 0,75 = y2), которая, если вы помните из класса геометрии, приводит к строке, которая простирается от начала координат до точки (1 , 1). Эта анимация представляет собой линейное изменение элемента в течение длины анимации и совпадает с использованием <code>linear</code> ключевого слова. Другими словами, он изменяется с постоянной скоростью. </section> <section id='description'>
Последняя задача <code>animation-timing-function</code> свойство <code>animation-timing-function</code> и несколько ключевых слов, которые изменяют скорость анимации в течение ее продолжительности. CSS предлагает опцию, отличную от ключевых слов, которая обеспечивает еще более точный контроль над тем, как анимация разыгрывается, используя кривые Безье. В анимациях CSS кривые Безье используются с функцией <code>cubic-bezier</code> . Форма кривой показывает, как анимация разыгрывается. Кривая живет в системе координат 1 на 1. Ось X этой системы координат - это продолжительность анимации (считайте ее временной шкалой), а ось Y - это изменение анимации. Функция <code>cubic-bezier</code> состоит из четырех основных точек, которые расположены на этой сетке 1 на 1: <code>p0</code> , <code>p1</code> , <code>p2</code> и <code>p3</code> . <code>p0</code> и <code>p3</code> для вас - это начальная и конечная точки, которые всегда расположены соответственно в начале (0, 0) и (1, 1). Вы устанавливаете значения x и y для двух других точек, а место размещения в сетке определяет форму кривой для анимации. Это делается в CSS, объявляя значения x и y опорных точек <code>p1</code> и <code>p2</code> в форме: <code>(x1, y1, x2, y2)</code> . Вытянув все это вместе, вот пример кривой Безье в CSS-коде: <code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code> В приведенном выше примере значения x и y эквивалентны для каждой точки (x1 = 0,25 = y1 и x2 = 0,75 = y2), которая, если вы помните из класса геометрии, приводит к строке, которая простирается от начала координат до точки (1 , 1). Эта анимация представляет собой линейное изменение элемента в течение длины анимации и совпадает с использованием <code>linear</code> ключевого слова. Другими словами, он изменяется с постоянной скоростью.
</section>
## Instructions ## Instructions
<section id="instructions"> Для элемента с идентификатором <code>ball1</code> измените значение свойства <code>animation-timing-function</code> от <code>linear</code> до его эквивалентного значения функции <code>cubic-bezier</code> . Используйте значения точек, приведенные в примере выше. </section> <section id='instructions'>
Для элемента с идентификатором <code>ball1</code> измените значение свойства <code>animation-timing-function</code> от <code>linear</code> до его эквивалентного значения функции <code>cubic-bezier</code> . Используйте значения точек, приведенные в примере выше.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Значение свойства <code>animation-timing-function</code> для элемента с <code>ball1</code> должно быть линейно-эквивалентной функцией кубического безье. - text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.
testString: 'assert($("#ball1").css("animation-timing-function") == "cubic-bezier(0.25, 0.25, 0.75, 0.75)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.");' testString: assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)');
- text: Значение свойства <code>animation-timing-function</code> для элемента с id <code>ball2</code> не должно меняться. - text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.");' testString: assert($('#ball2').css('animation-timing-function') == 'ease-out');
``` ```
@ -58,14 +63,14 @@ tests:
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
@keyframes bounce { @keyframes bounce {
0% { 0% {
top: 0px; top: 0px;
}
100% {
top: 249px;
}
} }
100% {
top: 249px;
}
}
</style> </style>
@ -76,14 +81,49 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.balls{
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
left: 27%;
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
#ball2 {
left: 56%;
animation-timing-function: ease-out;
}
@keyframes bounce {
0% {
top: 0px;
}
100% {
top: 249px;
}
}
</style>
<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>
``` ```
</section> </section>

70
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.russian.md
View File

@ -2,33 +2,38 @@
id: 587d78a7367417b2b2512adf id: 587d78a7367417b2b2512adf
title: Learn How the CSS @keyframes and animation Properties Work title: Learn How the CSS @keyframes and animation Properties Work
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cakprhv
localeTitle: 'Узнайте, как работают CSS-файлы и анимация CSS' forumTopicId: 301059
localeTitle: Узнайте, как работают CSS-файлы и анимация CSS
--- ---
## Description ## Description
<section id="description"> Чтобы анимировать элемент, вам нужно знать свойства анимации и правило <code>@keyframes</code> . Свойства анимации определяют, как должна себя вести анимация, и правило <code>@keyframes</code> контролирует, что происходит во время этой анимации. Всего имеется восемь свойств анимации. Эта задача будет держать ее простой и охватывать две самые важные из них: <code>animation-name</code> задает имя анимации, которое позже используется <code>@keyframes</code> чтобы сообщить CSS, какие правила идут с анимацией. <code>animation-duration</code> задает <code>animation-duration</code> анимации. <code>@keyframes</code> - это то, как точно указать, что происходит в анимации в течение продолжительности. Это делается путем предоставления свойств CSS для определенных «кадров» во время анимации с процентами от 0% до 100%. Если вы сравниваете это с фильмом, свойства CSS для 0% - это то, как элемент отображается в начальной сцене. Свойства CSS на 100% - это то, как элемент появляется в конце, прямо перед броском кредитов. Затем CSS применяет магию для перехода элемента за заданную продолжительность, чтобы вывести сцену. Вот пример, иллюстрирующий использование <code>@keyframes</code> и свойств анимации: <blockquote> #anim { <br> анимация-имя: красочный; <br> продолжительность анимации: 3 с; <br> } <br> @keyframes colorful { <br> 0% { <br> background-color: blue; <br> } <br> 100% { <br> background-color: желтый; <br> } <br> } </blockquote> Для элемента с <code>anim</code> идентификатором, фрагмент кода выше , задает <code>animation-name</code> , чтобы <code>colorful</code> и устанавливает <code>animation-duration</code> до 3 секунд. Затем правило <code>@keyframes</code> ссылается на свойства анимации с именем <code>colorful</code> . Он устанавливает цвет в синий цвет в начале анимации (0%), который к концу анимации перейдет в желтый цвет (100%). Вы не ограничены только начальными переходами, вы можете установить свойства для элемента для любого процента от 0% до 100%. </section> <section id='description'>
Чтобы анимировать элемент, вам нужно знать свойства анимации и правило <code>@keyframes</code> . Свойства анимации определяют, как должна себя вести анимация, и правило <code>@keyframes</code> контролирует, что происходит во время этой анимации. Всего имеется восемь свойств анимации. Эта задача будет держать ее простой и охватывать две самые важные из них: <code>animation-name</code> задает имя анимации, которое позже используется <code>@keyframes</code> чтобы сообщить CSS, какие правила идут с анимацией. <code>animation-duration</code> задает <code>animation-duration</code> анимации. <code>@keyframes</code> - это то, как точно указать, что происходит в анимации в течение продолжительности. Это делается путем предоставления свойств CSS для определенных «кадров» во время анимации с процентами от 0% до 100%. Если вы сравниваете это с фильмом, свойства CSS для 0% - это то, как элемент отображается в начальной сцене. Свойства CSS на 100% - это то, как элемент появляется в конце, прямо перед броском кредитов. Затем CSS применяет магию для перехода элемента за заданную продолжительность, чтобы вывести сцену. Вот пример, иллюстрирующий использование <code>@keyframes</code> и свойств анимации: <blockquote> #anim { <br> анимация-имя: красочный; <br> продолжительность анимации: 3 с; <br> } <br> @keyframes colorful { <br> 0% { <br> background-color: blue; <br> } <br> 100% { <br> background-color: желтый; <br> } <br> } </blockquote> Для элемента с <code>anim</code> идентификатором, фрагмент кода выше , задает <code>animation-name</code> , чтобы <code>colorful</code> и устанавливает <code>animation-duration</code> до 3 секунд. Затем правило <code>@keyframes</code> ссылается на свойства анимации с именем <code>colorful</code> . Он устанавливает цвет в синий цвет в начале анимации (0%), который к концу анимации перейдет в желтый цвет (100%). Вы не ограничены только начальными переходами, вы можете установить свойства для элемента для любого процента от 0% до 100%.
</section>
## Instructions ## Instructions
<section id="instructions"> Создайте анимацию для элемента с id <code>rect</code> , установив <code>animation-name</code> на радугу и <code>animation-duration</code> до 4 секунд. Затем объявите правило <code>@keyframes</code> и установите <code>background-color</code> в начале анимации ( <code>0%</code> ) на синий, середина анимации ( <code>50%</code> ) на зеленый, а конец анимации ( <code>100%</code> ) на желтый. </section> <section id='instructions'>
Создайте анимацию для элемента с id <code>rect</code> , установив <code>animation-name</code> на радугу и <code>animation-duration</code> до 4 секунд. Затем объявите правило <code>@keyframes</code> и установите <code>background-color</code> в начале анимации ( <code>0%</code> ) на синий, середина анимации ( <code>50%</code> ) на зеленый, а конец анимации ( <code>100%</code> ) на желтый.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Элемент с идентификатором <code>rect</code> должен иметь свойство <code>animation-name</code> со значением радуги. - text: The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.
testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.");' testString: assert($('#rect').css('animation-name') == 'rainbow');
- text: Элемент с идентификатором <code>rect</code> должен иметь свойство <code>animation-duration</code> со значением 4s. - text: The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.
testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.");' testString: assert($('#rect').css('animation-duration') == '4s');
- text: Правило <code>@keyframes</code> должно использовать <code>animation-name</code> радуги. - text: The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.
testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.");' testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
- text: Правило <code>@keyframes</code> для радуги должно использовать <code>background-color</code> синего цвета при 0%. - text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.");' testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
- text: Правило <code>@keyframes</code> для радуги должно использовать зеленый <code>background-color</code> на 50%. - text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.");' testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
- text: Правило <code>@keyframes</code> для радуги должно использовать <code>background-color</code> желтого цвета на 100%. - text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.");' testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
``` ```
@ -64,14 +69,39 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
}
#rect {
animation-name: rainbow;
animation-duration: 4s;
}
@keyframes rainbow {
0% {
background-color: blue;
}
50% {
background-color: green;
}
100% {
background-color: yellow;
}
}
</style>
<div id="rect"></div>
``` ```
</section> </section>

49
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.russian.md
View File

@ -2,27 +2,32 @@
id: 587d781e367417b2b2512acb id: 587d781e367417b2b2512acb
title: Lock an Element to its Parent with Absolute Positioning title: Lock an Element to its Parent with Absolute Positioning
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cyLJ7c3
forumTopicId: 301060
localeTitle: Блокировка элемента для его родителя с абсолютным позиционированием localeTitle: Блокировка элемента для его родителя с абсолютным позиционированием
--- ---
## Description ## Description
<section id="description"> Следующая опция для свойства <code>position</code> CSS является <code>absolute</code> , которая блокирует элемент на месте относительно его родительского контейнера. В отличие от <code>relative</code> положения, это удаляет элемент из нормального потока документа, поэтому окружающие объекты игнорируют его. Свойства смещения CSS (сверху или снизу и слева или справа) используются для настройки положения. Один нюанс с абсолютным позиционированием состоит в том, что он будет заблокирован относительно его ближайшего <em>расположенного</em> предка. Если вы забыли добавить правило позиции к родительскому элементу (это обычно делается с использованием <code>position: relative;</code> ), браузер будет продолжать искать цепочку и, в конечном счете, по умолчанию использовать тег body. </section> <section id='description'>
Следующая опция для свойства <code>position</code> CSS является <code>absolute</code> , которая блокирует элемент на месте относительно его родительского контейнера. В отличие от <code>relative</code> положения, это удаляет элемент из нормального потока документа, поэтому окружающие объекты игнорируют его. Свойства смещения CSS (сверху или снизу и слева или справа) используются для настройки положения. Один нюанс с абсолютным позиционированием состоит в том, что он будет заблокирован относительно его ближайшего <em>расположенного</em> предка. Если вы забыли добавить правило позиции к родительскому элементу (это обычно делается с использованием <code>position: relative;</code> ), браузер будет продолжать искать цепочку и, в конечном счете, по умолчанию использовать тег body.
</section>
## Instructions ## Instructions
<section id="instructions"> Заблокируйте элемент <code>#searchbar</code> в верхнем правом углу родительского <code>section</code> , объявив его <code>position</code> <code>absolute</code> . Дайте ему <code>top</code> и <code>right</code> смещения по 50 пикселей каждый. </section> <section id='instructions'>
Заблокируйте элемент <code>#searchbar</code> в верхнем правом углу родительского <code>section</code> , объявив его <code>position</code> <code>absolute</code> . Дайте ему <code>top</code> и <code>right</code> смещения по 50 пикселей каждый.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Элемент <code>#searchbar</code> должен иметь <code>absolute</code> <code>position</code> .' - text: The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.
testString: 'assert($("#searchbar").css("position") == "absolute", "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.");' testString: assert($('#searchbar').css('position') == 'absolute');
- text: 'Ваш код должен использовать <code>top</code> смещение CSS 50 пикселей в элементе <code>#searchbar</code> .' - text: Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.
testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");' testString: assert($('#searchbar').css('top') == '50px');
- text: 'Ваш код должен использовать <code>right</code> смещение CSS 50 пикселей в элементе <code>#searchbar</code> .' - text: Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.
testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");' testString: assert($('#searchbar').css('right') == '50px');
``` ```
@ -59,14 +64,32 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
#searchbar {
position: absolute;
top: 50px;
right: 50px;
}
section {
position: relative;
}
</style>
<body>
<h1>Welcome!</h1>
<section>
<form id="searchbar">
<label for="search">Search:</label>
<input type="search" id="search" name="search">
<input type="submit" name="submit" value="Go!">
</form>
</section>
</body>
``` ```
</section> </section>

61
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.russian.md
View File

@ -2,27 +2,32 @@
id: 587d781e367417b2b2512acc id: 587d781e367417b2b2512acc
title: Lock an Element to the Browser Window with Fixed Positioning title: Lock an Element to the Browser Window with Fixed Positioning
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c2MDNUR
forumTopicId: 301061
localeTitle: Блокировка элемента в окне браузера с фиксированным позиционированием localeTitle: Блокировка элемента в окне браузера с фиксированным позиционированием
--- ---
## Description ## Description
<section id="description"> Следующая схема компоновки, которую предлагает CSS, - это <code>fixed</code> позиция, которая является типом абсолютного позиционирования, который блокирует элемент относительно окна браузера. Подобно абсолютному позиционированию, он используется со свойствами смещения CSS, а также удаляет элемент из обычного потока документа. Другие предметы больше не «реализуют», где они позиционируются, что может потребовать некоторых корректировок компоновки в другом месте. Одно ключевое различие между <code>fixed</code> и <code>absolute</code> позициями состоит в том, что элемент с фиксированной позицией не будет перемещаться, когда пользователь прокручивается. </section> <section id='description'>
Следующая схема компоновки, которую предлагает CSS, - это <code>fixed</code> позиция, которая является типом абсолютного позиционирования, который блокирует элемент относительно окна браузера. Подобно абсолютному позиционированию, он используется со свойствами смещения CSS, а также удаляет элемент из обычного потока документа. Другие предметы больше не «реализуют», где они позиционируются, что может потребовать некоторых корректировок компоновки в другом месте. Одно ключевое различие между <code>fixed</code> и <code>absolute</code> позициями состоит в том, что элемент с фиксированной позицией не будет перемещаться, когда пользователь прокручивается.
</section>
## Instructions ## Instructions
<section id="instructions"> Навигационная панель в коде помечена идентификатором <code>navbar</code> . Измените его <code>position</code> на <code>fixed</code> и смещайте его на 0 пикселей <code>top</code> и на 0 пикселей <code>left</code> . Обратите внимание на (отсутствие) воздействия на позицию <code>h1</code> , оно не было сдвинуто вниз, чтобы разместить панель навигации, и ее необходимо будет отрегулировать отдельно. </section> <section id='instructions'>
Навигационная панель в коде помечена идентификатором <code>navbar</code> . Измените его <code>position</code> на <code>fixed</code> и смещайте его на 0 пикселей <code>top</code> и на 0 пикселей <code>left</code> . Обратите внимание на (отсутствие) воздействия на позицию <code>h1</code> , оно не было сдвинуто вниз, чтобы разместить панель навигации, и ее необходимо будет отрегулировать отдельно.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: '<code>#navbar</code> элемент должен иметь <code>position</code> набор для <code>fixed</code> .' - text: The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.
testString: 'assert($("#navbar").css("position") == "fixed", "The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.");' testString: assert($('#navbar').css('position') == 'fixed');
- text: 'Ваш код должен использовать <code>top</code> сдвиг CSS в 0 пикселей в элементе <code>#navbar</code> .' - text: Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.
testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");' testString: assert($('#navbar').css('top') == '0px');
- text: 'Ваш код должен использовать <code>left</code> сдвиг CSS в 0 пикселей на элементе <code>#navbar</code> .' - text: Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.
testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");' testString: assert($('#navbar').css('left') == '0px');
``` ```
@ -71,14 +76,44 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #767676;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 20px;
}
a {
text-decoration: none;
}
</style>
<body>
<header>
<h1>Welcome!</h1>
<nav id="navbar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<p>I shift up when the #navbar is fixed to the browser window.</p>
</body>
``` ```
</section> </section>

93
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.russian.md
View File

@ -2,25 +2,30 @@
id: 587d78a8367417b2b2512ae4 id: 587d78a8367417b2b2512ae4
title: Make a CSS Heartbeat using an Infinite Animation Count title: Make a CSS Heartbeat using an Infinite Animation Count
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cDZpDUr
forumTopicId: 301062
localeTitle: Сделайте Heartbeat с использованием бесконечного количества анимации localeTitle: Сделайте Heartbeat с использованием бесконечного количества анимации
--- ---
## Description ## Description
<section id="description"> Вот еще один пример непрерывной анимации с свойством <code>animation-iteration-count</code> которое использует сердце, которое вы разработали в предыдущем задании. Односекундная анимация сердечного ритма состоит из двух анимированных фигур. Элементы <code>heart</code> (включая <code>:before</code> и <code>:after</code> фрагментов) анимируются, чтобы изменить размер с помощью свойства <code>transform</code> , а фоновый <code>div</code> анимирован, чтобы изменить его цвет, используя свойство <code>background</code> . </section> <section id='description'>
Вот еще один пример непрерывной анимации с свойством <code>animation-iteration-count</code> которое использует сердце, которое вы разработали в предыдущем задании. Односекундная анимация сердечного ритма состоит из двух анимированных фигур. Элементы <code>heart</code> (включая <code>:before</code> и <code>:after</code> фрагментов) анимируются, чтобы изменить размер с помощью свойства <code>transform</code> , а фоновый <code>div</code> анимирован, чтобы изменить его цвет, используя свойство <code>background</code> .
</section>
## Instructions ## Instructions
undefined <section id='instructions'>
Keep the heart beating by adding the <code>animation-iteration-count</code> property for both the <code>back</code> class and the <code>heart</code> class and setting the value to infinite. The <code>heart:before</code> and <code>heart:after</code> selectors do not need any animation properties.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: '' - text: The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.
testString: 'assert($(".heart").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.");' testString: assert($('.heart').css('animation-iteration-count') == 'infinite');
- text: '' - text: The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.
testString: 'assert($(".back").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.");' testString: assert($('.back').css('animation-iteration-count') == 'infinite');
``` ```
@ -106,14 +111,80 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
@keyframes backdiv {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}
</style>
<div class="back"></div>
<div class="heart"></div>
``` ```
</section> </section>

59
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.russian.md
View File

@ -2,23 +2,28 @@
id: 587d78a9367417b2b2512aea id: 587d78a9367417b2b2512aea
title: Make Motion More Natural Using a Bezier Curve title: Make Motion More Natural Using a Bezier Curve
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c7akWUv
localeTitle: 'Сделать движение более естественным, используя кривую Безье' forumTopicId: 301063
localeTitle: Сделать движение более естественным, используя кривую Безье
--- ---
## Description ## Description
<section id="description"> Этот вызов оживляет элемент для репликации движения шарика, который жонглирует. Предыдущие проблемы охватывали <code>linear</code> и <code>ease-out</code> кубические кривые Безье, однако они не отображали точное движение жонглирования. Для этого вам нужно настроить кривую Безье. Функция <code>animation-timing-function</code> автоматически зацикливается на каждом ключевом кадре, когда <code>animation-iteration-count</code> установлен на бесконечный. Поскольку в середине продолжительности анимации задано правило ключевого кадра (на <code>50%</code> ), это приводит к двум идентичным прогрессиям анимации при движении мяча вверх и вниз. Следующая кубическая кривая Безье моделирует движение жонглирования: <code>cubic-bezier(0.3, 0.4, 0.5, 1.6);</code> Обратите внимание, что значение y2 больше 1. Хотя кубическая кривая Безье отображается в системе координат 1 на 1, и она может принимать только значения х от 0 до 1, значение y может быть установлено на числа, большие, чем единицы. Это приводит к прыгающему движению, которое идеально подходит для имитации шара жонглирования. </section> <section id='description'>
Этот вызов оживляет элемент для репликации движения шарика, который жонглирует. Предыдущие проблемы охватывали <code>linear</code> и <code>ease-out</code> кубические кривые Безье, однако они не отображали точное движение жонглирования. Для этого вам нужно настроить кривую Безье. Функция <code>animation-timing-function</code> автоматически зацикливается на каждом ключевом кадре, когда <code>animation-iteration-count</code> установлен на бесконечный. Поскольку в середине продолжительности анимации задано правило ключевого кадра (на <code>50%</code> ), это приводит к двум идентичным прогрессиям анимации при движении мяча вверх и вниз. Следующая кубическая кривая Безье моделирует движение жонглирования: <code>cubic-bezier(0.3, 0.4, 0.5, 1.6);</code> Обратите внимание, что значение y2 больше 1. Хотя кубическая кривая Безье отображается в системе координат 1 на 1, и она может принимать только значения х от 0 до 1, значение y может быть установлено на числа, большие, чем единицы. Это приводит к прыгающему движению, которое идеально подходит для имитации шара жонглирования.
</section>
## Instructions ## Instructions
<section id="instructions"> Измените значение функции <code>animation-timing-function</code> элемента с идентификатором <code>green</code> на функцию <code>cubic-bezier</code> с значениями x1, y1, x2, y2, установленными соответственно 0,311, 0,441, 0,444, 1,649. </section> <section id='instructions'>
Измените значение функции <code>animation-timing-function</code> элемента с идентификатором <code>green</code> на функцию <code>cubic-bezier</code> с значениями x1, y1, x2, y2, установленными соответственно 0,311, 0,441, 0,444, 1,649.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Значение свойства <code>animation-timing-function</code> для элемента с <code>green</code> идентификатором должно быть функцией <code>cubic-bezier</code> с значениями x1, y1, x2, y2, как указано.' - text: The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.
testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.' testString: assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)');
``` ```
@ -71,14 +76,48 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.balls {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 60%;
animation-name: jump;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#red {
background: red;
left: 25%;
animation-timing-function: linear;
}
#blue {
background: blue;
left: 50%;
animation-timing-function: ease-out;
}
#green {
background: green;
left: 75%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump {
50% {
top: 10%;
}
}
</style>
<div class="balls" id="red"></div>
<div class="balls" id="blue"></div>
<div class="balls" id="green"></div>
``` ```
</section> </section>

40
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.russian.md
View File

@ -2,23 +2,28 @@
id: 58a7a6ebf9a6318348e2d5aa id: 58a7a6ebf9a6318348e2d5aa
title: Modify Fill Mode of an Animation title: Modify Fill Mode of an Animation
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cVJDmcE
forumTopicId: 301064
localeTitle: Изменить режим заполнения анимации localeTitle: Изменить режим заполнения анимации
--- ---
## Description ## Description
<section id="description"> Это здорово, но пока это не работает. Обратите внимание, как сбрасывается анимация после <code>500ms</code> , и кнопка возвращается к исходному цвету. Вы хотите, чтобы кнопка оставалась подсвеченной. Это можно сделать, установив свойство <code>animation-fill-mode</code> <code>forwards</code> . Режим <code>animation-fill-mode</code> задает стиль, применяемый к элементу, когда анимация завершена. Вы можете установить его так: <code>animation-fill-mode: forwards;</code> </section> <section id='description'>
Это здорово, но пока это не работает. Обратите внимание, как сбрасывается анимация после <code>500ms</code> , и кнопка возвращается к исходному цвету. Вы хотите, чтобы кнопка оставалась подсвеченной. Это можно сделать, установив свойство <code>animation-fill-mode</code> <code>forwards</code> . Режим <code>animation-fill-mode</code> задает стиль, применяемый к элементу, когда анимация завершена. Вы можете установить его так: <code>animation-fill-mode: forwards;</code>
</section>
## Instructions ## Instructions
<section id="instructions"> Задайте свойство <code>animation-fill-mode</code> <code>button:hover</code> <code>forwards</code> чтобы кнопка оставалась выделенной, когда пользователь наводил на нее курсор. </section> <section id='instructions'>
Задайте свойство <code>animation-fill-mode</code> <code>button:hover</code> <code>forwards</code> чтобы кнопка оставалась выделенной, когда пользователь наводил на нее курсор.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: '' - text: <code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.
testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), "<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.");' testString: assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi));
``` ```
@ -56,14 +61,31 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
button {
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
animation-fill-mode: forwards;
}
@keyframes background-color {
100% {
background-color: #4791d0;
}
}
</style>
<button>Register</button>
``` ```
</section> </section>

39
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.russian.md
View File

@ -2,25 +2,30 @@
id: 587d781e367417b2b2512aca id: 587d781e367417b2b2512aca
title: Move a Relatively Positioned Element with CSS Offsets title: Move a Relatively Positioned Element with CSS Offsets
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c9bQEA4
forumTopicId: 301065
localeTitle: Перемещение Относительно Позиционированного Элемента с помощью смещений CSS localeTitle: Перемещение Относительно Позиционированного Элемента с помощью смещений CSS
--- ---
## Description ## Description
<section id="description"> Смещение CSS <code>top</code> или <code>bottom</code> , а также <code>left</code> или <code>right</code> указывают браузеру, насколько можно смещать элемент относительно того, где он будет сидеть в нормальном потоке документа. Вы компенсируете элемент вдали от заданного места, которое перемещает элемент от указанной стороны (фактически, в противоположном направлении). Как вы видели в последнем вызове, использование верхнего смещения сдвинуло <code>h2</code> вниз. Аналогично, используя левое смещение перемещает элемент справа. <h2> инструкции </h2><section id="instructions"> Используйте смещения CSS для перемещения <code>h2</code> 15 пикселей вправо и 10 пикселей вверх. </section><h2> тесты </h2><section id="tests"><pre> <code class="language-yml">tests: - text: &#39;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 10px upwards. In other words, move it 10px away from the &lt;code&gt;bottom&lt;/code&gt; of where it normally sits.&#39; testString: &#39;assert($(&quot;h2&quot;).css(&quot;bottom&quot;) == &quot;10px&quot;, &quot;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 10px upwards. In other words, move it 10px away from the &lt;code&gt;bottom&lt;/code&gt; of where it normally sits.&quot;);&#39; - text: &#39;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px towards the right. In other words, move it 15px away from the &lt;code&gt;left&lt;/code&gt; of where it normally sits.&#39; testString: &#39;assert($(&quot;h2&quot;).css(&quot;left&quot;) == &quot;15px&quot;, &quot;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px towards the right. In other words, move it 15px away from the &lt;code&gt;left&lt;/code&gt; of where it normally sits.&quot;);&#39;</code> </pre></section><h2> Сезон испытания </h2><section id="challengeSeed"><div id="html-seed"><pre> <code class="language-html">&lt;head&gt; &lt;style&gt; h2 { position: relative; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;On Being Well-Positioned&lt;/h1&gt; &lt;h2&gt;Move me!&lt;/h2&gt; &lt;p&gt;I still think the h2 is where it normally sits.&lt;/p&gt; &lt;/body&gt;</code> </pre></div></section><h2> Решение </h2><section id="solution"><pre> <code class="language-js">// solution required</code> </pre></section></section> <section id='description'>
Смещение CSS <code>top</code> или <code>bottom</code> , а также <code>left</code> или <code>right</code> указывают браузеру, насколько можно смещать элемент относительно того, где он будет сидеть в нормальном потоке документа. Вы компенсируете элемент вдали от заданного места, которое перемещает элемент от указанной стороны (фактически, в противоположном направлении). Как вы видели в последнем вызове, использование верхнего смещения сдвинуло <code>h2</code> вниз. Аналогично, используя левое смещение перемещает элемент справа. <h2> инструкции </h2><section id="instructions"> Используйте смещения CSS для перемещения <code>h2</code> 15 пикселей вправо и 10 пикселей вверх. </section><h2> тесты </h2><section id="tests"><pre> <code class="language-yml">tests: - text: &#39;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 10px upwards. In other words, move it 10px away from the &lt;code&gt;bottom&lt;/code&gt; of where it normally sits.&#39; testString: &#39;assert($(&quot;h2&quot;).css(&quot;bottom&quot;) == &quot;10px&quot;, &quot;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 10px upwards. In other words, move it 10px away from the &lt;code&gt;bottom&lt;/code&gt; of where it normally sits.&quot;);&#39; - text: &#39;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px towards the right. In other words, move it 15px away from the &lt;code&gt;left&lt;/code&gt; of where it normally sits.&#39; testString: &#39;assert($(&quot;h2&quot;).css(&quot;left&quot;) == &quot;15px&quot;, &quot;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px towards the right. In other words, move it 15px away from the &lt;code&gt;left&lt;/code&gt; of where it normally sits.&quot;);&#39;</code> </pre></section><h2> Сезон испытания </h2><section id="challengeSeed"><div id="html-seed"><pre> <code class="language-html">&lt;head&gt; &lt;style&gt; h2 { position: relative; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;On Being Well-Positioned&lt;/h1&gt; &lt;h2&gt;Move me!&lt;/h2&gt; &lt;p&gt;I still think the h2 is where it normally sits.&lt;/p&gt; &lt;/body&gt;</code> </pre></div></section><h2> Решение </h2><section id="solution"><pre> <code class="language-js">// solution required</code> </pre></section>
</section>
## Instructions ## Instructions
<section id="instructions"> Используйте смещения CSS для перемещения <code>h2</code> 15 пикселей вправо и 10 пикселей вверх. </section> <section id='instructions'>
Используйте смещения CSS для перемещения <code>h2</code> 15 пикселей вправо и 10 пикселей вверх.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Ваш код должен использовать смещение CSS для относительно позиционирования <code>h2</code> 10px вверх. Другими словами, переместите его на расстоянии 10 пикселей от <code>bottom</code> где он обычно сидит.' - text: Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.
testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");' testString: assert($('h2').css('bottom') == '10px');
- text: 'Ваш код должен использовать смещение CSS, чтобы относительно позиционировать <code>h2</code> 15px вправо. Другими словами, переместите его на 15 пикселей <code>left</code> от места, где он обычно сидит.' - text: Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.
testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");' testString: assert($('h2').css('left') == '15px');
``` ```
@ -51,14 +56,26 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <head>
<style>
h2 {
position: relative;
left: 15px;
bottom: 10px;
}
</style>
</head>
<body>
<h1>On Being Well-Positioned</h1>
<h2>Move me!</h2>
<p>I still think the h2 is where it normally sits.</p>
</body>
``` ```
</section> </section>

74
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.russian.md
View File

@ -2,25 +2,30 @@
id: 587d78a3367417b2b2512ace id: 587d78a3367417b2b2512ace
title: Push Elements Left or Right with the float Property title: Push Elements Left or Right with the float Property
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c2MDqu2
forumTopicId: 301066
localeTitle: Нажатие элементов влево или вправо с помощью свойства float localeTitle: Нажатие элементов влево или вправо с помощью свойства float
--- ---
## Description ## Description
<section id="description"> Следующий инструмент позиционирования фактически не использует <code>position</code> , а устанавливает свойство <code>float</code> элемента. Плавающие элементы удаляются из нормального потока документа и перемещаются <code>left</code> или <code>right</code> от содержащего их родительского элемента. Он обычно используется с свойством <code>width</code> чтобы указать, сколько горизонтального пространства требуется для элемента с плавающей точкой. </section> <section id='description'>
Следующий инструмент позиционирования фактически не использует <code>position</code> , а устанавливает свойство <code>float</code> элемента. Плавающие элементы удаляются из нормального потока документа и перемещаются <code>left</code> или <code>right</code> от содержащего их родительского элемента. Он обычно используется с свойством <code>width</code> чтобы указать, сколько горизонтального пространства требуется для элемента с плавающей точкой.
</section>
## Instructions ## Instructions
<section id="instructions"> Данная разметка будет хорошо работать в качестве макета из двух столбцов, с <code>section</code> и в <code>aside</code> элементов рядом друг с другом. Дайте элементу <code>#left</code> <code>float</code> <code>left</code> а элемент <code>#right</code> - <code>float</code> <code>right</code> . </section> <section id='instructions'>
Данная разметка будет хорошо работать в качестве макета из двух столбцов, с <code>section</code> и в <code>aside</code> элементов рядом друг с другом. Дайте элементу <code>#left</code> <code>float</code> <code>left</code> а элемент <code>#right</code> - <code>float</code> <code>right</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Элемент с id <code>left</code> должен иметь значение <code>float</code> <code>left</code> . - text: The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.
testString: 'assert($("#left").css("float") == "left", "The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.");' testString: assert($('#left').css('float') == 'left');
- text: Элемент с <code>right</code> id должен иметь значение <code>float</code> <code>right</code> . - text: The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.
testString: 'assert($("#right").css("float") == "right", "The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.");' testString: assert($('#right').css('float') == 'right');
``` ```
@ -34,18 +39,18 @@ tests:
```html ```html
<head> <head>
<style> <style>
#left { #left {
width: 50%; width: 50%;
} }
#right { #right {
width: 40%; width: 40%;
} }
aside, section { aside, section {
padding: 2px; padding: 2px;
background-color: #ccc; background-color: #ccc;
} }
</style> </style>
</head> </head>
<body> <body>
@ -66,14 +71,41 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <head>
<style>
#left {
float: left;
width: 50%;
}
#right {
float: right;
width: 40%;
}
aside, section {
padding: 2px;
background-color: #ccc;
}
</style>
</head>
<body>
<header>
<h1>Welcome!</h1>
</header>
<section id="left">
<h2>Content</h2>
<p>Good stuff</p>
</section>
<aside id="right">
<h2>Sidebar</h2>
<p>Links</p>
</aside>
</body>
``` ```
</section> </section>

67
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.russian.md
View File

@ -2,33 +2,38 @@
id: 587d781c367417b2b2512ac2 id: 587d781c367417b2b2512ac2
title: Set the font-size for Multiple Heading Elements title: Set the font-size for Multiple Heading Elements
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cPpQNT3
forumTopicId: 301067
localeTitle: Установите размер шрифта для нескольких элементов заголовка localeTitle: Установите размер шрифта для нескольких элементов заголовка
--- ---
## Description ## Description
<section id="description"> Свойство <code>font-size</code> используется для указания того, насколько большой текст в данном элементе. Это правило может использоваться для нескольких элементов для создания визуальной согласованности текста на странице. В этой задаче вы установите значения для всех тегов <code>h1</code> <code>h6</code> чтобы сбалансировать размеры заголовков. </section> <section id='description'>
Свойство <code>font-size</code> используется для указания того, насколько большой текст в данном элементе. Это правило может использоваться для нескольких элементов для создания визуальной согласованности текста на странице. В этой задаче вы установите значения для всех тегов <code>h1</code> <code>h6</code> чтобы сбалансировать размеры заголовков.
</section>
## Instructions ## Instructions
undefined <section id='instructions'>
<ul><li>Set the <code>font-size</code> of the <code>h1</code> tag to 68px.</li><li>Set the <code>font-size</code> of the <code>h2</code> tag to 52px.</li><li>Set the <code>font-size</code> of the <code>h3</code> tag to 40px.</li><li>Set the <code>font-size</code> of the <code>h4</code> tag to 32px.</li><li>Set the <code>font-size</code> of the <code>h5</code> tag to 21px.</li><li>Set the <code>font-size</code> of the <code>h6</code> tag to 14px.</li></ul>
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: '' - text: Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.
testString: 'assert($("h1").css("font-size") == "68px", "Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.");' testString: assert($('h1').css('font-size') == '68px');
- text: '' - text: Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.
testString: 'assert($("h2").css("font-size") == "52px", "Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.");' testString: assert($('h2').css('font-size') == '52px');
- text: Ваш код должен установить свойство <code>font-size</code> для тега <code>h3</code> до 40 пикселей. - text: Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.
testString: 'assert($("h3").css("font-size") == "40px", "Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.");' testString: assert($('h3').css('font-size') == '40px');
- text: '' - text: Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.
testString: 'assert($("h4").css("font-size") == "32px", "Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.");' testString: assert($('h4').css('font-size') == '32px');
- text: '' - text: Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.
testString: 'assert($("h5").css("font-size") == "21px", "Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.");' testString: assert($('h5').css('font-size') == '21px');
- text: '' - text: Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.
testString: 'assert($("h6").css("font-size") == "14px", "Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.");' testString: assert($('h6').css('font-size') == '14px');
``` ```
@ -59,14 +64,38 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h1 {
font-size: 68px;
}
h2 {
font-size: 52px;
}
h3 {
font-size: 40px;
}
h4 {
font-size: 32px;
}
h5 {
font-size: 21px;
}
h6 {
font-size: 14px;
}
</style>
<h1>This is h1 text</h1>
<h2>This is h2 text</h2>
<h3>This is h3 text</h3>
<h4>This is h4 text</h4>
<h5>This is h5 text</h5>
<h6>This is h6 text</h6>
``` ```
</section> </section>

29
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.russian.md
View File

@ -2,23 +2,28 @@
id: 587d781c367417b2b2512ac4 id: 587d781c367417b2b2512ac4
title: Set the font-size of Paragraph Text title: Set the font-size of Paragraph Text
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cVJ36Cr
forumTopicId: 301068
localeTitle: Установите размер шрифта текста абзаца localeTitle: Установите размер шрифта текста абзаца
--- ---
## Description ## Description
<section id="description"> Свойство <code>font-size</code> в CSS не ограничивается заголовками, оно может применяться к любому элементу, содержащему текст. </section> <section id='description'>
Свойство <code>font-size</code> в CSS не ограничивается заголовками, оно может применяться к любому элементу, содержащему текст.
</section>
## Instructions ## Instructions
<section id="instructions"> Измените значение свойства <code>font-size</code> для абзаца на 16 пикселей, чтобы сделать его более видимым. </section> <section id='instructions'>
Измените значение свойства <code>font-size</code> для абзаца на 16 пикселей, чтобы сделать его более видимым.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш тег <code>p</code> должен иметь <code>font-size</code> 16 пикселей. - text: Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.
testString: 'assert($("p").css("font-size") == "16px", "Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.");' testString: assert($('p').css('font-size') == '16px');
``` ```
@ -43,14 +48,20 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
p {
font-size: 16px;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
``` ```
</section> </section>

73
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.russian.md
View File

@ -2,33 +2,38 @@
id: 587d781c367417b2b2512ac3 id: 587d781c367417b2b2512ac3
title: Set the font-weight for Multiple Heading Elements title: Set the font-weight for Multiple Heading Elements
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/crVWRHq
forumTopicId: 301069
localeTitle: Установите вес шрифта для нескольких элементов заголовка localeTitle: Установите вес шрифта для нескольких элементов заголовка
--- ---
## Description ## Description
<section id="description"> Вы устанавливаете <code>font-size</code> для каждого заголовка в последнем вызове, здесь вы настраиваете <code>font-weight</code> . Свойство <code>font-weight</code> устанавливает, как толстые или тонкие символы находятся в разделе текста. </section> <section id='description'>
Вы устанавливаете <code>font-size</code> для каждого заголовка в последнем вызове, здесь вы настраиваете <code>font-weight</code> . Свойство <code>font-weight</code> устанавливает, как толстые или тонкие символы находятся в разделе текста.
</section>
## Instructions ## Instructions
<section id="instructions"><ul><li> Установите <code>font-weight</code> тега <code>h1</code> равным 800. </li><li> Установите <code>font-weight</code> тега <code>h2</code> равным 600. </li><li> Установите <code>font-weight</code> тега <code>h3</code> равным 500. </li><li> Установите <code>font-weight</code> тега <code>h4</code> равным 400. </li><li> Установите <code>font-weight</code> тега <code>h5</code> равным 300. </li><li> Установите <code>font-weight</code> тега <code>h6</code> равным 200. </li></ul></section> <section id='instructions'>
<ul><li> Установите <code>font-weight</code> тега <code>h1</code> равным 800. </li><li> Установите <code>font-weight</code> тега <code>h2</code> равным 600. </li><li> Установите <code>font-weight</code> тега <code>h3</code> равным 500. </li><li> Установите <code>font-weight</code> тега <code>h4</code> равным 400. </li><li> Установите <code>font-weight</code> тега <code>h5</code> равным 300. </li><li> Установите <code>font-weight</code> тега <code>h6</code> равным 200. </li></ul>
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен установить свойство <code>font-weight</code> для тега <code>h1</code> равным 800. - text: Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.
testString: 'assert($("h1").css("font-weight") == "800", "Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.");' testString: assert($('h1').css('font-weight') == '800');
- text: Ваш код должен установить свойство <code>font-weight</code> для тега <code>h2</code> равным 600. - text: Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.
testString: 'assert($("h2").css("font-weight") == "600", "Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.");' testString: assert($('h2').css('font-weight') == '600');
- text: Ваш код должен установить свойство <code>font-weight</code> для тега <code>h3</code> равным 500. - text: Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.
testString: 'assert($("h3").css("font-weight") == "500", "Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.");' testString: assert($('h3').css('font-weight') == '500');
- text: Ваш код должен установить свойство <code>font-weight</code> для тега <code>h4</code> равным 400. - text: Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.
testString: 'assert($("h4").css("font-weight") == "400", "Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.");' testString: assert($('h4').css('font-weight') == '400');
- text: Ваш код должен установить свойство <code>font-weight</code> для тега <code>h5</code> равным 300. - text: Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.
testString: 'assert($("h5").css("font-weight") == "300", "Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.");' testString: assert($('h5').css('font-weight') == '300');
- text: Ваш код должен установить свойство <code>font-weight</code> для тега <code>h6</code> равным 200. - text: Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.
testString: 'assert($("h6").css("font-weight") == "200", "Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.");' testString: assert($('h6').css('font-weight') == '200');
``` ```
@ -77,14 +82,44 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h1 {
font-size: 68px;
font-weight: 800;
}
h2 {
font-size: 52px;
font-weight: 600;
}
h3 {
font-size: 40px;
font-weight: 500;
}
h4 {
font-size: 32px;
font-weight: 400;
}
h5 {
font-size: 21px;
font-weight: 300;
}
h6 {
font-size: 14px;
font-weight: 200;
}
</style>
<h1>This is h1 text</h1>
<h2>This is h2 text</h2>
<h3>This is h3 text</h3>
<h4>This is h4 text</h4>
<h5>This is h5 text</h5>
<h6>This is h6 text</h6>
``` ```
</section> </section>

30
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.russian.md
View File

@ -2,23 +2,28 @@
id: 587d781d367417b2b2512ac5 id: 587d781d367417b2b2512ac5
title: Set the line-height of Paragraphs title: Set the line-height of Paragraphs
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/crVWdcv
forumTopicId: 301070
localeTitle: Задайте высоту строки абзацев localeTitle: Задайте высоту строки абзацев
--- ---
## Description ## Description
<section id="description"> CSS предлагает свойство <code>line-height</code> для изменения высоты каждой строки в блоке текста. Как следует из названия, он изменяет количество вертикального пространства, которое получает каждая строка текста. </section> <section id='description'>
CSS предлагает свойство <code>line-height</code> для изменения высоты каждой строки в блоке текста. Как следует из названия, он изменяет количество вертикального пространства, которое получает каждая строка текста.
</section>
## Instructions ## Instructions
<section id="instructions"> Добавьте свойство <code>line-height</code> в тег <code>p</code> и установите его на 25 пикселей. </section> <section id='instructions'>
Добавьте свойство <code>line-height</code> в тег <code>p</code> и установите его на 25 пикселей.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен установить <code>line-height</code> тега <code>p</code> до 25 пикселей. - text: Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.
testString: 'assert($("p").css("line-height") == "25px", "Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.");' testString: assert($('p').css('line-height') == '25px');
``` ```
@ -44,14 +49,21 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
p {
font-size: 16px;
line-height: 25px;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
``` ```
</section> </section>

61
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.russian.md
View File

@ -2,27 +2,32 @@
id: 587d78a9367417b2b2512ae9 id: 587d78a9367417b2b2512ae9
title: Use a Bezier Curve to Move a Graphic title: Use a Bezier Curve to Move a Graphic
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c6bnRCK
forumTopicId: 301071
localeTitle: Используйте кривую Безье для перемещения графика localeTitle: Используйте кривую Безье для перемещения графика
--- ---
## Description ## Description
<section id="description"> В предыдущем задании обсуждалось ключевое слово <code>ease-out</code> которое описывает изменение анимации, которое ускоряется сначала, а затем замедляется в конце анимации. Справа показана разница между ключевым словом <code>ease-out</code> (для синего элемента) и <code>linear</code> ключевым словом (для красного элемента). Подобные анимационные прогрессии к <code>ease-out</code> ключевому слову могут быть достигнуты с помощью пользовательской кубической функции кривой Безье. В общем случае изменение опорных точек <code>p1</code> и <code>p2</code> приводит к созданию различных кривых Безье, которые контролируют ход анимации во времени. Вот пример кривой Безье с использованием значений, имитирующих стиль непринужденности: <code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code> Помните, что все функции <code>cubic-bezier</code> начинаются с <code>p0</code> at (0, 0) и заканчиваются <code>p3</code> в (1, 1). В этом примере кривая движется быстрее по оси Y (начинается с 0, переходит в <code>p1</code> y значение 0, затем переходит в значение <code>p2</code> y 1), чем она перемещается по оси X (0 для начала, затем 0 для <code>p1</code> , до 0,58 для <code>p2</code> ). В результате изменение анимированного элемента происходит быстрее, чем время анимации для этого сегмента. К концу кривой соотношение между изменением значений x и y меняется на противоположное - значение y перемещается от 1 до 1 (без изменений), а значения x перемещаются от 0,58 до 1, что делает изменения анимации медленнее по сравнению с продолжительность анимации. </section> <section id='description'>
В предыдущем задании обсуждалось ключевое слово <code>ease-out</code> которое описывает изменение анимации, которое ускоряется сначала, а затем замедляется в конце анимации. Справа показана разница между ключевым словом <code>ease-out</code> (для синего элемента) и <code>linear</code> ключевым словом (для красного элемента). Подобные анимационные прогрессии к <code>ease-out</code> ключевому слову могут быть достигнуты с помощью пользовательской кубической функции кривой Безье. В общем случае изменение опорных точек <code>p1</code> и <code>p2</code> приводит к созданию различных кривых Безье, которые контролируют ход анимации во времени. Вот пример кривой Безье с использованием значений, имитирующих стиль непринужденности: <code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code> Помните, что все функции <code>cubic-bezier</code> начинаются с <code>p0</code> at (0, 0) и заканчиваются <code>p3</code> в (1, 1). В этом примере кривая движется быстрее по оси Y (начинается с 0, переходит в <code>p1</code> y значение 0, затем переходит в значение <code>p2</code> y 1), чем она перемещается по оси X (0 для начала, затем 0 для <code>p1</code> , до 0,58 для <code>p2</code> ). В результате изменение анимированного элемента происходит быстрее, чем время анимации для этого сегмента. К концу кривой соотношение между изменением значений x и y меняется на противоположное - значение y перемещается от 1 до 1 (без изменений), а значения x перемещаются от 0,58 до 1, что делает изменения анимации медленнее по сравнению с продолжительность анимации.
</section>
## Instructions ## Instructions
<section id="instructions"> Чтобы увидеть эффект этой кривой Безье в действии, измените <code>animation-timing-function</code> элемента с id <code>red</code> на функцию <code>cubic-bezier</code> с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0.58, 1 Это заставит оба элемента продвигаться по анимации аналогичным образом. </section> <section id='instructions'>
Чтобы увидеть эффект этой кривой Безье в действии, измените <code>animation-timing-function</code> элемента с id <code>red</code> на функцию <code>cubic-bezier</code> с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0.58, 1 Это заставит оба элемента продвигаться по анимации аналогичным образом.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Значение свойства <code>animation-timing-function</code> элемента с <code>red</code> id должно быть функцией <code>cubic-bezier</code> с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0,58, 1.' - text: The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .
testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");' testString: assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)');
- text: Элемент с <code>red</code> идентификатором должен больше не обладать свойством <code>animation-timing-function</code> линейным. - text: The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.
testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.");' testString: assert($('#red').css('animation-timing-function') !== 'linear');
- text: Значение свойства <code>animation-timing-function</code> для элемента с <code>blue</code> не должно изменяться. - text: The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.
testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.");' testString: assert($('#blue').css('animation-timing-function') == 'ease-out');
``` ```
@ -71,14 +76,44 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.balls{
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#red {
background: red;
left: 27%;
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
}
#blue {
background: blue;
left: 56%;
animation-timing-function: ease-out;
}
@keyframes bounce {
0% {
top: 0px;
}
100% {
top: 249px;
}
}
</style>
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>
``` ```
</section> </section>

57
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.russian.md
View File

@ -2,33 +2,38 @@
id: 587d78a5367417b2b2512ad7 id: 587d78a5367417b2b2512ad7
title: Use a CSS Linear Gradient to Create a Striped Element title: Use a CSS Linear Gradient to Create a Striped Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c6bmQh2
forumTopicId: 301072
localeTitle: Используйте линейный градиент CSS для создания полосатого элемента localeTitle: Используйте линейный градиент CSS для создания полосатого элемента
--- ---
## Description ## Description
<section id="description"> Функция <code>repeating-linear-gradient()</code> очень похожа на <code>linear-gradient()</code> с большой разницей, что повторяет заданный шаблон градиента. <code>repeating-linear-gradient()</code> принимает множество значений, но для простоты вы будете работать с значениями угла и значениями остановки цвета в этой задаче. Значением угла является направление градиента. Остановки цвета - это значения ширины, которые указывают, где происходит переход, и даются с процентом или количеством пикселей. В примере, показанном в редакторе кода, градиент начинается с <code>yellow</code> цвета в 0 пикселей, который смешивается со вторым <code>blue</code> цветом в 40 пикселей от начала. Так как следующая остановка цвета также находится на 40 пикселях, градиент сразу же меняется на третий <code>green</code> цвет, который сам вписывается в четвертое значение цвета <code>red</code> которое составляет 80 пикселей от начала градиента. В этом примере это помогает думать о цветовых остановках как о парах, где смешиваются два разных цвета. <code>0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px</code> Если каждые два значения останова цвета имеют один и тот же цвет, смешение не заметно, потому что оно находится между одним и тем же цветом, за которым следует жесткий переход к следующему цвету, так что вы попадаете в полоску. </section> <section id='description'>
Функция <code>repeating-linear-gradient()</code> очень похожа на <code>linear-gradient()</code> с большой разницей, что повторяет заданный шаблон градиента. <code>repeating-linear-gradient()</code> принимает множество значений, но для простоты вы будете работать с значениями угла и значениями остановки цвета в этой задаче. Значением угла является направление градиента. Остановки цвета - это значения ширины, которые указывают, где происходит переход, и даются с процентом или количеством пикселей. В примере, показанном в редакторе кода, градиент начинается с <code>yellow</code> цвета в 0 пикселей, который смешивается со вторым <code>blue</code> цветом в 40 пикселей от начала. Так как следующая остановка цвета также находится на 40 пикселях, градиент сразу же меняется на третий <code>green</code> цвет, который сам вписывается в четвертое значение цвета <code>red</code> которое составляет 80 пикселей от начала градиента. В этом примере это помогает думать о цветовых остановках как о парах, где смешиваются два разных цвета. <code>0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px</code> Если каждые два значения останова цвета имеют один и тот же цвет, смешение не заметно, потому что оно находится между одним и тем же цветом, за которым следует жесткий переход к следующему цвету, так что вы попадаете в полоску.
</section>
## Instructions ## Instructions
<section id="instructions"> Сделайте полосы, изменив <code>repeating-linear-gradient()</code> чтобы использовать градиентный угол <code>45deg</code> , затем установите, чтобы первые два цвета остановились на <code>yellow</code> , и, наконец, второй цвет прекратился до <code>black</code> . </section> <section id='instructions'>
Сделайте полосы, изменив <code>repeating-linear-gradient()</code> чтобы использовать градиентный угол <code>45deg</code> , затем установите, чтобы первые два цвета остановились на <code>yellow</code> , и, наконец, второй цвет прекратился до <code>black</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Угол <code>repeating-linear-gradient()</code> должен быть 45deg. - text: The angle of the <code>repeating-linear-gradient()</code> should be 45deg.
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should be 45deg.");' testString: assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
- text: Угол <code>repeating-linear-gradient()</code> должен превышать 90 градусов - text: The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg
testString: 'assert(!code.match(/90deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg");' testString: assert(!code.match(/90deg/gi));
- text: Остановка цвета в 0 пикселях должна быть <code>yellow</code> . - text: The color stop at 0 pixels should be <code>yellow</code>.
testString: 'assert(code.match(/yellow\s+?0(px)?/gi), "The color stop at 0 pixels should be <code>yellow</code>.");' testString: assert(code.match(/yellow\s+?0(px)?/gi));
- text: Одна остановка цвета на 40 пикселей должна быть <code>yellow</code> . - text: One color stop at 40 pixels should be <code>yellow</code>.
testString: 'assert(code.match(/yellow\s+?40px/gi), "One color stop at 40 pixels should be <code>yellow</code>.");' testString: assert(code.match(/yellow\s+?40px/gi));
- text: Вторая остановка цвета на 40 пикселей должна быть <code>black</code> . - text: The second color stop at 40 pixels should be <code>black</code>.
testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), "The second color stop at 40 pixels should be <code>black</code>.");' testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
- text: Последняя остановка цвета на 80 пикселей должна быть <code>black</code> . - text: The last color stop at 80 pixels should be <code>black</code>.
testString: 'assert(code.match(/black\s+?80px/gi), "The last color stop at 80 pixels should be <code>black</code>.");' testString: assert(code.match(/black\s+?80px/gi));
``` ```
@ -64,14 +69,28 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px
);
}
</style>
<div></div>
``` ```
</section> </section>

45
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.russian.md
View File

@ -2,25 +2,30 @@
id: 587d78a7367417b2b2512ae0 id: 587d78a7367417b2b2512ae0
title: Use CSS Animation to Change the Hover State of a Button title: Use CSS Animation to Change the Hover State of a Button
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cg4vZAa
forumTopicId: 301073
localeTitle: Использование анимации CSS для изменения состояния наведения кнопки localeTitle: Использование анимации CSS для изменения состояния наведения кнопки
--- ---
## Description ## Description
<section id="description"> Вы можете использовать CSS <code>@keyframes</code> для изменения цвета кнопки в состоянии зависания. Ниже приведен пример изменения ширины изображения при наведении: <blockquote> &lt;Стиль&gt; <br> img: hover { <br> animation-name: width; <br> продолжительность анимации: 500 мс; <br> } <br><br> Ширина @keyframes { <br> 100% { <br> ширина: 40 пикселей; <br> } <br> } <br> &lt;/ Стиль&gt; <br><br> &lt;img src = &quot;https://bit.ly/smallgooglelogo&quot; alt = &quot;Логотип Google&quot; /&gt; </blockquote></section> <section id='description'>
Вы можете использовать CSS <code>@keyframes</code> для изменения цвета кнопки в состоянии зависания. Ниже приведен пример изменения ширины изображения при наведении: <blockquote> &lt;Стиль&gt; <br> img: hover { <br> animation-name: width; <br> продолжительность анимации: 500 мс; <br> } <br><br> Ширина @keyframes { <br> 100% { <br> ширина: 40 пикселей; <br> } <br> } <br> &lt;/ Стиль&gt; <br><br> &lt;img src = &quot;https://bit.ly/smallgooglelogo&quot; alt = &quot;Логотип Google&quot; /&gt; </blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Обратите внимание, что <code>ms</code> обозначает миллисекунды, где 1000 мс равно 1 с. Используйте CSS <code>@keyframes</code> чтобы изменить <code>background-color</code> элемента <code>button</code> чтобы он стал <code>#4791d0</code> когда пользователь <code>#4791d0</code> на него курсор. Правило <code>@keyframes</code> должно содержать только запись на <code>100%</code> . </section> <section id='instructions'>
Обратите внимание, что <code>ms</code> обозначает миллисекунды, где 1000 мс равно 1 с. Используйте CSS <code>@keyframes</code> чтобы изменить <code>background-color</code> элемента <code>button</code> чтобы он стал <code>#4791d0</code> когда пользователь <code>#4791d0</code> на него курсор. Правило <code>@keyframes</code> должно содержать только запись на <code>100%</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Правило @keyframes должно использовать фоновый цвет <code>animation-name</code> . - text: The @keyframes rule should use the <code>animation-name</code> background-color.
testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), "The @keyframes rule should use the <code>animation-name</code> background-color.");' testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g));
- text: 'В разделе <code>@keyframes</code> должно быть одно правило, которое изменяет <code>background-color</code> на <code>#4791d0</code> на 100%.' - text: There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), "There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.");' testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
``` ```
@ -54,14 +59,32 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
button {
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
}
@keyframes background-color {
100% {
background-color: #4791d0;
}
}
</style>
<button>Register</button>
``` ```
</section> </section>

37
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.russian.md
View File

@ -2,23 +2,28 @@
id: 587d78a6367417b2b2512adb id: 587d78a6367417b2b2512adb
title: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis title: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cyLP8Sr
forumTopicId: 301074
localeTitle: Используйте свойство преобразования CSS Transform для искажения элемента по оси X localeTitle: Используйте свойство преобразования CSS Transform для искажения элемента по оси X
--- ---
## Description ## Description
<section id="description"> Следующей функцией свойства <code>transform</code> является <code>skewX()</code> , которая искажает выбранный элемент вдоль его оси X (горизонтальной) на заданную степень. Следующий код перекосит элемент абзаца на -32 градуса по оси X. <blockquote> п { <br> transform: skewX (-32deg); <br> } </blockquote></section> <section id='description'>
Следующей функцией свойства <code>transform</code> является <code>skewX()</code> , которая искажает выбранный элемент вдоль его оси X (горизонтальной) на заданную степень. Следующий код перекосит элемент абзаца на -32 градуса по оси X. <blockquote> п { <br> transform: skewX (-32deg); <br> } </blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Перекосите элемент с <code>bottom</code> на 24 градуса по оси X, используя свойство <code>transform</code> . </section> <section id='instructions'>
Перекосите элемент с <code>bottom</code> на 24 градуса по оси X, используя свойство <code>transform</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Элемент с <code>bottom</code> id должен быть перекошен на 24 градуса по оси X. - text: The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.
testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), "The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.");' testString: assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
``` ```
@ -52,14 +57,28 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
div {
width: 70%;
height: 100px;
margin: 50px auto;
}
#top {
background-color: red;
}
#bottom {
background-color: blue;
transform: skewX(24deg);
}
</style>
<div id="top"></div>
<div id="bottom"></div>
``` ```
</section> </section>

38
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.russian.md
View File

@ -2,23 +2,28 @@
id: 587d78a6367417b2b2512adc id: 587d78a6367417b2b2512adc
title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c2MZ2uB
forumTopicId: 301075
localeTitle: Используйте свойство CSS Transform Property skewY для искажения элемента по оси Y localeTitle: Используйте свойство CSS Transform Property skewY для искажения элемента по оси Y
--- ---
## Description ## Description
<section id="description"> Учитывая, что <code>skewX()</code> выделенный элемент вдоль оси X на заданную степень, неудивительно, что <code>skewY()</code> элемент вдоль оси Y (по вертикали). </section> <section id='description'>
Учитывая, что <code>skewX()</code> выделенный элемент вдоль оси X на заданную степень, неудивительно, что <code>skewY()</code> элемент вдоль оси Y (по вертикали).
</section>
## Instructions ## Instructions
<section id="instructions"> Перекосите элемент с идентификатором <code>top</code> -10 градусов по оси Y, используя свойство <code>transform</code> . </section> <section id='instructions'>
Перекосите элемент с идентификатором <code>top</code> -10 градусов по оси Y, используя свойство <code>transform</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Элемент с <code>top</code> id должен быть перекошен на -10 градусов по оси Y. - text: The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.
testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), "The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.");' testString: assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
``` ```
@ -53,14 +58,29 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
div {
width: 70%;
height: 100px;
margin: 50px auto;
}
#top {
background-color: red;
transform: skewY(-10deg);
}
#bottom {
background-color: blue;
transform: skewX(24deg);
}
</style>
<div id="top"></div>
<div id="bottom"></div>
``` ```
</section> </section>

44
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.russian.md
View File

@ -2,23 +2,28 @@
id: 587d78a5367417b2b2512ad9 id: 587d78a5367417b2b2512ad9
title: Use the CSS Transform scale Property to Change the Size of an Element title: Use the CSS Transform scale Property to Change the Size of an Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c2MZVSg
forumTopicId: 301076
localeTitle: Используйте свойство масштабирования CSS Transform для изменения размера элемента localeTitle: Используйте свойство масштабирования CSS Transform для изменения размера элемента
--- ---
## Description ## Description
<section id="description"> Чтобы изменить масштаб элемента, CSS имеет свойство <code>transform</code> , а также функцию <code>scale()</code> . Следующий пример кода удваивает размер всех элементов абзаца на странице: <blockquote> п { <br> преобразования: масштаб (2); <br> } </blockquote></section> <section id='description'>
Чтобы изменить масштаб элемента, CSS имеет свойство <code>transform</code> , а также функцию <code>scale()</code> . Следующий пример кода удваивает размер всех элементов абзаца на странице: <blockquote> п { <br> преобразования: масштаб (2); <br> } </blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Увеличьте размер элемента с идентификатором <code>ball2</code> до его первоначального размера в 1,5 раза. </section> <section id='instructions'>
Увеличьте размер элемента с идентификатором <code>ball2</code> до его первоначального размера в 1,5 раза.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Установите свойство <code>transform</code> для <code>#ball2</code> чтобы увеличить его размер в 1,5 раза.' - text: Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.
testString: 'assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi), "Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.");' testString: assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi));
``` ```
@ -61,14 +66,35 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.ball {
width: 40px;
height: 40px;
margin: 50 auto;
position: fixed;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
border-radius: 50%;
}
#ball1 {
left: 20%;
}
#ball2 {
left: 65%;
transform: scale(1.5);
}
</style>
<div class="ball" id= "ball1"></div>
<div class="ball" id= "ball2"></div>
``` ```
</section> </section>

37
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.russian.md
View File

@ -2,23 +2,28 @@
id: 587d78a5367417b2b2512ada id: 587d78a5367417b2b2512ada
title: Use the CSS Transform scale Property to Scale an Element on Hover title: Use the CSS Transform scale Property to Scale an Element on Hover
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cyLPJuM
forumTopicId: 301077
localeTitle: Используйте свойство масштабирования CSS Transform для масштабирования элемента при наведении localeTitle: Используйте свойство масштабирования CSS Transform для масштабирования элемента при наведении
--- ---
## Description ## Description
<section id="description"> Свойство <code>transform</code> имеет множество функций, которые позволяют масштабировать, перемещать, вращать, перекосить и т. Д. Ваши элементы. При использовании с псевдоклассами, такими как <code>:hover</code> которые определяют определенное состояние элемента, свойство <code>transform</code> может легко добавлять интерактивность к вашим элементам. Ниже приведен пример масштабирования элементов абзаца в 2.1 раза по сравнению с их первоначальным размером, когда пользователь на них наводит: <blockquote> p: hover { <br> transform: масштаб (2.1); <br> } </blockquote></section> <section id='description'>
Свойство <code>transform</code> имеет множество функций, которые позволяют масштабировать, перемещать, вращать, перекосить и т. Д. Ваши элементы. При использовании с псевдоклассами, такими как <code>:hover</code> которые определяют определенное состояние элемента, свойство <code>transform</code> может легко добавлять интерактивность к вашим элементам. Ниже приведен пример масштабирования элементов абзаца в 2.1 раза по сравнению с их первоначальным размером, когда пользователь на них наводит: <blockquote> p: hover { <br> transform: масштаб (2.1); <br> } </blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Добавьте правило CSS для состояния <code>hover</code> <code>div</code> и используйте свойство <code>transform</code> для масштабирования элемента <code>div</code> до 1,1 раз по сравнению с его первоначальным размером, когда пользователь на него наводится. </section> <section id='instructions'>
Добавьте правило CSS для состояния <code>hover</code> <code>div</code> и используйте свойство <code>transform</code> для масштабирования элемента <code>div</code> до 1,1 раз по сравнению с его первоначальным размером, когда пользователь на него наводится.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Размер элемента <code>div</code> должен масштабироваться в 1,1 раза, когда пользователь на него нависает.' - text: The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.
testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), "The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.");' testString: assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
``` ```
@ -52,14 +57,28 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
div {
width: 70%;
height: 100px;
margin: 50px auto;
background: linear-gradient(
53deg,
#ccfffc,
#ffcccf
);
}
div:hover {
transform: scale(1.1);
}
</style>
<div></div>
``` ```
</section> </section>

63
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.russian.md
View File

@ -2,25 +2,30 @@
id: 587d781a367417b2b2512ab9 id: 587d781a367417b2b2512ab9
title: Use the em Tag to Italicize Text title: Use the em Tag to Italicize Text
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cVJRBtp
forumTopicId: 301078
localeTitle: Используйте тег em для текста курсива localeTitle: Используйте тег em для текста курсива
--- ---
## Description ## Description
<section id="description"> Чтобы подчеркнуть текст, вы можете использовать тег <code>em</code> . Это отображает текст как курсив, так как браузер применяет CSS стиля <code>font-style: italic;</code> к элементу. </section> <section id='description'>
Чтобы подчеркнуть текст, вы можете использовать тег <code>em</code> . Это отображает текст как курсив, так как браузер применяет CSS стиля <code>font-style: italic;</code> к элементу.
</section>
## Instructions ## Instructions
<section id="instructions"> Оберните тег <code>em</code> вокруг содержимого тега абзаца, чтобы подчеркнуть его. </section> <section id='instructions'>
Оберните тег <code>em</code> вокруг содержимого тега абзаца, чтобы подчеркнуть его.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен добавить тег <code>em</code> в разметку. - text: Your code should add an <code>em</code> tag to the markup.
testString: 'assert($("em").length == 1, "Your code should add an <code>em</code> tag to the markup.");' testString: assert($('em').length == 1);
- text: Тег <code>em</code> должен обертывать содержимое тега <code>p</code> но не сам тег <code>p</code> . - text: The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.
testString: 'assert($("p").children().length == 1 && $("em").children().length == 2, "The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.");' testString: assert($('p').children().length == 1 && $('em').children().length == 2);
``` ```
@ -75,14 +80,50 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Google</h4>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

65
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.russian.md
View File

@ -3,26 +3,31 @@ id: 587d781b367417b2b2512aba
title: Use the s Tag to Strikethrough Text title: Use the s Tag to Strikethrough Text
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: ''
forumTopicId: 301079
localeTitle: Используйте тег s для текста зачеркивания localeTitle: Используйте тег s для текста зачеркивания
--- ---
## Description ## Description
<section id="description"> Чтобы зачеркнуть текст, когда горизонтальная линия пересекает символы, вы можете использовать тег <code>s</code> . Он показывает, что часть текста больше не действительна. С помощью тега <code>s</code> браузер применяет CSS <code>text-decoration: line-through;</code> к элементу. </section> <section id='description'>
Чтобы зачеркнуть текст, когда горизонтальная линия пересекает символы, вы можете использовать тег <code>s</code> . Он показывает, что часть текста больше не действительна. С помощью тега <code>s</code> браузер применяет CSS <code>text-decoration: line-through;</code> к элементу.
</section>
## Instructions ## Instructions
<section id="instructions"> Оберните тег <code>s</code> вокруг «Google» внутри тега <code>h4</code> а затем добавьте слово «Алфавит» рядом с ним, в котором не должно быть форматирования зачеркивания. </section> <section id='instructions'>
Оберните тег <code>s</code> вокруг «Google» внутри тега <code>h4</code> а затем добавьте слово «Алфавит» рядом с ним, в котором не должно быть форматирования зачеркивания.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен добавить к метке один тег <code>s</code> . - text: Your code should add one <code>s</code> tag to the markup.
testString: 'assert($("s").length == 1, "Your code should add one <code>s</code> tag to the markup.");' testString: assert($('s').length == 1);
- text: Тег <code>s</code> должен обтекать текст Google в теге <code>h4</code> . Он не должен содержать слово «Алфавит». - text: A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.
testString: 'assert($("s").text().match(/Google/gi) && !$("s").text().match(/Alphabet/gi), "A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.");' testString: assert($('h4 > s').text().match(/Google/gi) && !$('h4 > s').text().match(/Alphabet/gi));
- text: 'Включите слово «Алфавит» в тег <code>h4</code> , без форматирования зачеркиванием.' - text: Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.
testString: 'assert($("h4").html().match(/Alphabet/gi), "Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.");' testString: assert($('h4').html().match(/Alphabet/gi));
``` ```
@ -77,14 +82,50 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4><s>Google</s> Alphabet</h4>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

69
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.russian.md
View File

@ -2,27 +2,32 @@
id: 587d781a367417b2b2512ab7 id: 587d781a367417b2b2512ab7
title: Use the strong Tag to Make Text Bold title: Use the strong Tag to Make Text Bold
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/ceJNBSb
localeTitle: 'Используйте сильный тег, чтобы сделать текст полужирным' forumTopicId: 301080
localeTitle: Используйте сильный тег, чтобы сделать текст полужирным
--- ---
## Description ## Description
<section id="description"> Чтобы сделать текст полужирным, вы можете использовать <code>strong</code> тег. Это часто используется, чтобы привлечь внимание к тексту и символизировать, что это важно. С <code>strong</code> тегом браузер применяет CSS <code>font-weight: bold;</code> к элементу. </section> <section id='description'>
Чтобы сделать текст полужирным, вы можете использовать <code>strong</code> тег. Это часто используется, чтобы привлечь внимание к тексту и символизировать, что это важно. С <code>strong</code> тегом браузер применяет CSS <code>font-weight: bold;</code> к элементу.
</section>
## Instructions ## Instructions
<section id="instructions"> Оберните <code>strong</code> бирку вокруг «Стэнфордского университета» внутри тега <code>p</code> . </section> <section id='instructions'>
Оберните <code>strong</code> бирку вокруг «Стэнфордского университета» внутри тега <code>p</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен добавить один <code>strong</code> тег к разметке. - text: Your code should add one <code>strong</code> tag to the markup.
testString: 'assert($("strong").length == 1, "Your code should add one <code>strong</code> tag to the markup.");' testString: assert($('strong').length == 1);
- text: <code>strong</code> тег должен находиться внутри тега <code>p</code> . - text: The <code>strong</code> tag should be inside the <code>p</code> tag.
testString: 'assert($("p").children("strong").length == 1, "The <code>strong</code> tag should be inside the <code>p</code> tag.");' testString: assert($('p').children('strong').length == 1);
- text: <code>strong</code> бирка должна охватывать слова «Стэнфордский университет». - text: The <code>strong</code> tag should wrap around the words "Stanford University".
testString: 'assert($("strong").text().match(/^Stanford University$/gi), "The <code>strong</code> tag should wrap around the words "Stanford University".");' testString: assert($('strong').text().match(/^Stanford University$/gi));
``` ```
@ -77,14 +82,50 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Google</h4>
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

71
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.russian.md
View File

@ -2,25 +2,30 @@
id: 587d781c367417b2b2512ac0 id: 587d781c367417b2b2512ac0
title: Use the text-transform Property to Make Text Uppercase title: Use the text-transform Property to Make Text Uppercase
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cvVZQSP
forumTopicId: 301081
localeTitle: Используйте свойство text-transform для создания текста в верхнем регистре localeTitle: Используйте свойство text-transform для создания текста в верхнем регистре
--- ---
## Description ## Description
<section id="description"> Свойство <code>text-transform</code> в CSS используется для изменения внешнего вида текста. Это удобный способ убедиться, что текст на веб-странице отображается постоянно, без необходимости изменять текстовое содержимое фактических элементов HTML. В следующей таблице показано, как различные значения <code>text-transform</code> изменяют текст примера «Transform me». <table class="table table-striped"><thead><tr><th> Стоимость </th><th> результат </th></tr></thead><tbody><tr><td> <code>lowercase</code> </td> <td> &quot;трансформировать меня&quot; </td></tr><tr><td> <code>uppercase</code> </td> <td> &quot;TRANSFORM ME&quot; </td></tr><tr><td> <code>capitalize</code> </td> <td> «Трансформировать меня» </td></tr><tr><td> <code>initial</code> </td> <td> Использовать значение по умолчанию </td></tr><tr><td> <code>inherit</code> </td> <td> Используйте значение <code>text-transform</code> из родительского элемента </td></tr><tr><td> <code>none</code> </td> <td> <strong>По умолчанию:</strong> используйте исходный текст </td></tr></tbody></table></section> <section id='description'>
Свойство <code>text-transform</code> в CSS используется для изменения внешнего вида текста. Это удобный способ убедиться, что текст на веб-странице отображается постоянно, без необходимости изменять текстовое содержимое фактических элементов HTML. В следующей таблице показано, как различные значения <code>text-transform</code> изменяют текст примера «Transform me». <table class="table table-striped"><thead><tr><th> Стоимость </th><th> результат </th></tr></thead><tbody><tr><td> <code>lowercase</code> </td> <td> &quot;трансформировать меня&quot; </td></tr><tr><td> <code>uppercase</code> </td> <td> &quot;TRANSFORM ME&quot; </td></tr><tr><td> <code>capitalize</code> </td> <td> «Трансформировать меня» </td></tr><tr><td> <code>initial</code> </td> <td> Использовать значение по умолчанию </td></tr><tr><td> <code>inherit</code> </td> <td> Используйте значение <code>text-transform</code> из родительского элемента </td></tr><tr><td> <code>none</code> </td> <td> <strong>По умолчанию:</strong> используйте исходный текст </td></tr></tbody></table>
</section>
## Instructions ## Instructions
<section id="instructions"> Преобразуйте текст <code>h4</code> в верхний регистр, используя свойство <code>text-transform</code> . </section> <section id='instructions'>
Преобразуйте текст <code>h4</code> в верхний регистр, используя свойство <code>text-transform</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Текст <code>h4</code> должен быть прописным. - text: The <code>h4</code> text should be uppercase.
testString: 'assert($("h4").css("text-transform") === "uppercase", "The <code>h4</code> text should be uppercase.");' testString: assert($('h4').css('text-transform') === 'uppercase');
- text: Исходный текст h4 не должен изменяться. - text: The original text of the h4 should not be changed.
testString: 'assert(($("h4").text() !== $("h4").text().toUpperCase()), "The original text of the h4 should not be changed.");' testString: assert(($('h4').text() !== $('h4').text().toUpperCase()));
``` ```
@ -83,14 +88,58 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
text-transform: uppercase;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
opacity: 0.7;
}
#thumbnail {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard" id="thumbnail">
<div class="cardContent">
<div class="cardText">
<h4>Alphabet</h4>
<hr>
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

63
curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.russian.md
View File

@ -2,25 +2,30 @@
id: 587d781a367417b2b2512ab8 id: 587d781a367417b2b2512ab8
title: Use the u Tag to Underline Text title: Use the u Tag to Underline Text
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cN6aQCL
forumTopicId: 301082
localeTitle: Используйте тег u для подчеркивания текста localeTitle: Используйте тег u для подчеркивания текста
--- ---
## Description ## Description
<section id="description"> Чтобы подчеркнуть текст, вы можете использовать тег <code>u</code> . Это часто используется для обозначения важности раздела текста или чего-то, что нужно запомнить. С тегом <code>u</code> браузер применяет CSS <code>text-decoration: underline;</code> к элементу. </section> <section id='description'>
Чтобы подчеркнуть текст, вы можете использовать тег <code>u</code> . Это часто используется для обозначения важности раздела текста или чего-то, что нужно запомнить. С тегом <code>u</code> браузер применяет CSS <code>text-decoration: underline;</code> к элементу.
</section>
## Instructions ## Instructions
<section id="instructions"> Оберните тег <code>u</code> только вокруг текста «Ph.D. students». <strong>Заметка</strong> <br> Старайтесь избегать использования тега <code>u</code> когда его можно путать для ссылки. Якорные теги также имеют стандартное подчеркнутое форматирование. </section> <section id='instructions'>
Оберните тег <code>u</code> только вокруг текста «Ph.D. students». <strong>Заметка</strong> <br> Старайтесь избегать использования тега <code>u</code> когда его можно путать для ссылки. Якорные теги также имеют стандартное подчеркнутое форматирование.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш код должен добавить тег <code>u</code> в разметку. - text: Your code should add a <code>u</code> tag to the markup.
testString: 'assert($("u").length === 1, "Your code should add a <code>u</code> tag to the markup.");' testString: assert($('u').length === 1);
- text: Тег <code>u</code> должен обернуться вокруг текста «Ph.D. students». - text: The <code>u</code> tag should wrap around the text "Ph.D. students".
testString: 'assert($("u").text() === "Ph.D. students", "The <code>u</code> tag should wrap around the text "Ph.D. students".");' testString: assert($('u').text() === 'Ph.D. students');
``` ```
@ -75,14 +80,50 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Google</h4>
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
``` ```
</section> </section>

69
curriculum/challenges/russian/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.russian.md
View File

@ -2,29 +2,34 @@
id: bad87fee1348bd9aedf08823 id: bad87fee1348bd9aedf08823
title: Add a Negative Margin to an Element title: Add a Negative Margin to an Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cnpyGs3
forumTopicId: 16166
localeTitle: Добавить отрицательные поля к элементу localeTitle: Добавить отрицательные поля к элементу
--- ---
## Описание ## Description
<section id="description">Значение <code>margin</code> (поле) элемента контролирует объем пространства между значением <code>border</code> (границей) элемента и окружающими элементами. Если вы установите значение <code>margin</code> отрицательным, то размер элемента увеличится. </section> <section id='description'>
Значение <code>margin</code> (поле) элемента контролирует объем пространства между значением <code>border</code> (границей) элемента и окружающими элементами. Если вы установите значение <code>margin</code> отрицательным, то размер элемента увеличится.
</section>
## Инструкции ## Instructions
<section id="instructions"> Попытайтесь установить значение <code>margin</code> отрицательным, как у красного окна. Установите <code>margin</code> синего окна равным <code>-15px</code>, чтобы он заполнил всю горизонтальную ширину желтой рамки вокруг него. </section> <section id='instructions'>
Попытайтесь установить значение <code>margin</code> отрицательным, как у красного окна. Установите <code>margin</code> синего окна равным <code>-15px</code>, чтобы он заполнил всю горизонтальную ширину желтой рамки вокруг него.
</section>
## Тесты ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш класс <code>blue-box</code> должен иметь значение <code>margin</code> равное <code>-15px</code>. - text: Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-top") === "-15px", "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.");' testString: assert($(".blue-box").css("margin-top") === "-15px");
``` ```
</section> </section>
## Исходной код ## Challenge Seed
<section id='challengeSeed'> <section id='challengeSeed'>
<div id='html-seed'> <div id='html-seed'>
@ -72,14 +77,50 @@ tests:
</div> </div>
</section> </section>
## Решение ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// впишите ваш код решения <style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
padding: 20px;
margin: -15px;
}
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
margin: 20px;
margin-top: -15px;
}
</style>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
``` ```
</section> </section>

95
curriculum/challenges/russian/01-responsive-web-design/basic-css/add-borders-around-your-elements.russian.md
View File

@ -2,32 +2,36 @@
id: bad87fee1348bd9bedf08813 id: bad87fee1348bd9bedf08813
title: Add Borders Around Your Elements title: Add Borders Around Your Elements
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c2MvnHZ
forumTopicId: 16630
localeTitle: Добавьте рамки вокруг ваших элементов localeTitle: Добавьте рамки вокруг ваших элементов
--- ---
## Description ## Description
<section id="description"> Рамки в CSS имеют такие свойства, как <code>style</code> , <code>color</code> и <code>width</code> Например, если бы мы хотели создать сплошную красную рамку с шириной 5 пикселей вокруг элемента HTML, мы могли бы использовать этот класс: <blockquote> &lt;Стиль&gt; <br> .thin-red-border { <br> border-color: red; <br> border-width: 5px; <br> border-style: solid; <br> } <br> &lt;/ Стиль&gt; </blockquote></section> <section id='description'>
Рамки в CSS имеют такие свойства, как <code>style</code> , <code>color</code> и <code>width</code> Например, если бы мы хотели создать сплошную красную рамку с шириной 5 пикселей вокруг элемента HTML, мы могли бы использовать этот класс: <blockquote> &lt;Стиль&gt; <br> .thin-red-border { <br> border-color: red; <br> border-width: 5px; <br> border-style: solid; <br> } <br> &lt;/ Стиль&gt; </blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Создайте класс под названием « <code>thick-green-border</code> . Этот класс должен добавить сплошную зелёную рамку шириной 10px вокруг элемента HTML. Примените этот класс к фотографии вашего кота. Помните, что вы можете применять несколько классов к элементу с помощью его атрибута <code>class</code>, вставляя пробелы между классами. Например: <code>&lt;img class=&quot;class1 class2&quot;&gt;</code> </section> <section id='instructions'>
Создайте класс под названием « <code>thick-green-border</code> . Этот класс должен добавить сплошную зелёную рамку шириной 10px вокруг элемента HTML. Примените этот класс к фотографии вашего кота. Помните, что вы можете применять несколько классов к элементу с помощью его атрибута <code>class</code>, вставляя пробелы между классами. Например: <code>&lt;img class=&quot;class1 class2&quot;&gt;</code>
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: '' - text: Your <code>img</code> element should have the class <code>smaller-image</code>.
testString: 'assert($("img").hasClass("smaller-image"), "Your <code>img</code> element should have the class <code>smaller-image</code>.");' testString: assert($("img").hasClass("smaller-image"));
- text: Ваш элемент <code>img</code> должен обладать классом <code>thick-green-border</code> . - text: Your <code>img</code> element should have the class <code>thick-green-border</code>.
testString: 'assert($("img").hasClass("thick-green-border"), "Your <code>img</code> element should have the class <code>thick-green-border</code>.");' testString: assert($("img").hasClass("thick-green-border"));
- text: Задайте вашему изображению ширину границы <code>10px</code> . - text: Give your image a border width of <code>10px</code>.
testString: 'assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12, "Give your image a border width of <code>10px</code>.");' testString: assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12);
- text: Задайте вашему изображению стиль границы <code>solid</code> . - text: Give your image a border style of <code>solid</code>.
testString: 'assert($("img").css("border-right-style") === "solid", "Give your image a border style of <code>solid</code>.");' testString: assert($("img").css("border-right-style") === "solid");
- text: Граница вокруг вашего элемента <code>img</code> должна быть зеленой. - text: The border around your <code>img</code> element should be green.
testString: 'assert($("img").css("border-left-color") === "rgb(0, 128, 0)", "The border around your <code>img</code> element should be green.");' testString: assert($("img").css("border-left-color") === "rgb(0, 128, 0)");
``` ```
@ -95,14 +99,69 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.smaller-image {
width: 100px;
}
.thick-green-border {
border-width: 10px;
border-color: green;
border-style: solid;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
``` ```
</section> </section>

75
curriculum/challenges/russian/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.russian.md
View File

@ -2,29 +2,34 @@
id: bad87fee1248bd9aedf08824 id: bad87fee1248bd9aedf08824
title: Add Different Margins to Each Side of an Element title: Add Different Margins to Each Side of an Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cg4RWh4
forumTopicId: 16633
localeTitle: Добавление разных полей в каждую сторону элемента localeTitle: Добавление разных полей в каждую сторону элемента
--- ---
## Description ## Description
<section id="description"> Иногда вам нужно настроить элемент таким образом, чтобы он имел разный <code>margin</code> на каждой из сторон. CSS позволяет вам контролировать <code>margin</code> всех четырех отдельных сторон элемента с параметрами <code>margin-top</code> , <code>margin-right</code> , <code>margin-bottom</code> и <code>margin-left</code> . </section> <section id='description'>
Иногда вам нужно настроить элемент таким образом, чтобы он имел разный <code>margin</code> на каждой из сторон. CSS позволяет вам контролировать <code>margin</code> всех четырех отдельных сторон элемента с параметрами <code>margin-top</code> , <code>margin-right</code> , <code>margin-bottom</code> и <code>margin-left</code> .
</section>
## Instructions ## Instructions
<section id="instructions"> Дайте синей коробке <code>margin</code> <code>40px</code> на ее верхней и левой стороне, но только <code>20px</code> на нижней и правой стороне. </section> <section id='instructions'>
Дайте синей коробке <code>margin</code> <code>40px</code> на ее верхней и левой стороне, но только <code>20px</code> на нижней и правой стороне.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш <code>blue-box</code> класс должен дать верхнюю часть элементов <code>40px</code> из <code>margin</code> . - text: Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.");' testString: assert($(".blue-box").css("margin-top") === "40px");
- text: Ваш класс <code>blue-box</code> должен предоставить право элементов <code>20px</code> <code>margin</code> . - text: Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.");' testString: assert($(".blue-box").css("margin-right") === "20px");
- text: Ваш класс с <code>blue-box</code> должен дать нижнюю часть <code>20px</code> <code>margin</code> . - text: Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.");' testString: assert($(".blue-box").css("margin-bottom") === "20px");
- text: Ваш класс с <code>blue-box</code> должен оставить слева от элементов <code>40px</code> <code>margin</code> . - text: Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.");' testString: assert($(".blue-box").css("margin-left") === "40px");
``` ```
@ -79,14 +84,54 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}
.blue-box {
background-color: blue;
color: #fff;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
``` ```
</section> </section>

75
curriculum/challenges/russian/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.russian.md
View File

@ -2,29 +2,34 @@
id: bad87fee1348bd9aedf08824 id: bad87fee1348bd9aedf08824
title: Add Different Padding to Each Side of an Element title: Add Different Padding to Each Side of an Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cB7mwUw
forumTopicId: 16634
localeTitle: Добавьте разные внутренние отступы к каждой стороне элемента localeTitle: Добавьте разные внутренние отступы к каждой стороне элемента
--- ---
## Description ## Description
<section id="description"> Иногда вам нужно настроить элемент таким образом, чтобы на каждой его стороне было различное количество внутренних отступов - <code>padding</code> . CSS позволяет вам управлять <code>padding</code> всех четырех отдельных сторон элемента с помощью свойств <code>padding-top</code> , <code>padding-right</code> , <code>padding-bottom</code> и <code>padding-left</code> . </section> <section id='description'>
Иногда вам нужно настроить элемент таким образом, чтобы на каждой его стороне было различное количество внутренних отступов - <code>padding</code> . CSS позволяет вам управлять <code>padding</code> всех четырех отдельных сторон элемента с помощью свойств <code>padding-top</code> , <code>padding-right</code> , <code>padding-bottom</code> и <code>padding-left</code> .
</section>
## Instructions ## Instructions
<section id="instructions"> Задайте синему квадрату <code>padding</code> <code>40px</code> на его верхней и левой стороне, но только <code>20px</code> на его нижней и правой стороне. </section> <section id='instructions'>
Задайте синему квадрату <code>padding</code> <code>40px</code> на его верхней и левой стороне, но только <code>20px</code> на его нижней и правой стороне.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш класс <code>blue-box</code> должен содержать <code>padding</code> сверху <code>40px</code>. - text: Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.");' testString: assert($(".blue-box").css("padding-top") === "40px");
- text: Ваш класс <code>blue-box</code> должен содержать <code>padding</code> справа <code>20px</code>. - text: Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.");' testString: assert($(".blue-box").css("padding-right") === "20px");
- text: Ваш класс <code>blue-box</code> должен содержать <code>padding</code> снизу <code>20px</code>. - text: Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.");' testString: assert($(".blue-box").css("padding-bottom") === "20px");
- text: Ваш класс <code>blue-box</code> должен содержать <code>padding</code> слева <code>40px</code>. - text: Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.");' testString: assert($(".blue-box").css("padding-left") === "40px");
``` ```
@ -79,14 +84,54 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}
.blue-box {
background-color: blue;
color: #fff;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
``` ```
</section> </section>

83
curriculum/challenges/russian/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.russian.md
View File

@ -2,25 +2,30 @@
id: bad87fee1348bd9aedf08814 id: bad87fee1348bd9aedf08814
title: Add Rounded Corners with border-radius title: Add Rounded Corners with border-radius
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cbZm2hg
forumTopicId: 16649
localeTitle: Добавить закругленные углы при помощи свойства border-radius localeTitle: Добавить закругленные углы при помощи свойства border-radius
--- ---
## Description ## Description
<section id="description"> Ваша фотография кошки в настоящее время имеет острые углы. Мы можем скруглить эти углы с помощью CSS-свойства, называемого <code>border-radius</code> . </section> <section id='description'>
Ваша фотография кошки в настоящее время имеет острые углы. Мы можем скруглить эти углы с помощью CSS-свойства, называемого <code>border-radius</code> .
</section>
## Instructions ## Instructions
<section id="instructions"> Вы можете указать <code>border-radius</code> в пикселях. Задайте вашей фотографии кошки <code>border-radius</code> <code>10px</code> . Примечание: эта задача позволяет использовать несколько возможных решений. Например, вы можете добавить <code>border-radius</code> для <code>.thick-green-border</code> или класса <code>.smaller-image</code> . </section> <section id='instructions'>
Вы можете указать <code>border-radius</code> в пикселях. Задайте вашей фотографии кошки <code>border-radius</code> <code>10px</code> . Примечание: эта задача позволяет использовать несколько возможных решений. Например, вы можете добавить <code>border-radius</code> для <code>.thick-green-border</code> или класса <code>.smaller-image</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Элемент изображения должен иметь класс «толсто-зеленая граница». - text: Your image element should have the class "thick-green-border".
testString: 'assert($("img").hasClass("thick-green-border"), "Your image element should have the class "thick-green-border".");' testString: assert($("img").hasClass("thick-green-border"));
- text: Ваше изображение должно иметь радиус границы <code>10px</code> - text: Your image should have a border radius of <code>10px</code>
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of <code>10px</code>");' testString: assert($("img").css("border-top-left-radius") === '10px' && $("img").css("border-top-right-radius") === '10px' && $("img").css("border-bottom-left-radius") === '10px' && $("img").css("border-bottom-right-radius") === '10px');
``` ```
@ -94,14 +99,70 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
}
.smaller-image {
width: 100px;
border-radius: 10px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
``` ```
</section> </section>

59
curriculum/challenges/russian/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.russian.md
View File

@ -2,23 +2,28 @@
id: bad87fee1348bd9aedf08822 id: bad87fee1348bd9aedf08822
title: Adjust the Margin of an Element title: Adjust the Margin of an Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cVJarHW
forumTopicId: 16654
localeTitle: Отрегулируйте маржу элемента localeTitle: Отрегулируйте маржу элемента
--- ---
## Description ## Description
<section id="description"> Элемент по <code>margin</code> контролирует объем пространства между элементом в <code>border</code> и окружающих элементами. Здесь мы видим, что синий ящик и красный ящик вложены в желтый квадрат. Обратите внимание, что красный ящик имеет больший <code>margin</code> чем синий квадрат, что делает его меньше. Когда вы увеличите <code>margin</code> синего <code>margin</code> , это увеличит расстояние между его границей и окружающими элементами. </section> <section id='description'>
Элемент по <code>margin</code> контролирует объем пространства между элементом в <code>border</code> и окружающих элементами. Здесь мы видим, что синий ящик и красный ящик вложены в желтый квадрат. Обратите внимание, что красный ящик имеет больший <code>margin</code> чем синий квадрат, что делает его меньше. Когда вы увеличите <code>margin</code> синего <code>margin</code> , это увеличит расстояние между его границей и окружающими элементами.
</section>
## Instructions ## Instructions
<section id="instructions"> Измените <code>margin</code> синего квадрата так, чтобы он был красным. </section> <section id='instructions'>
Измените <code>margin</code> синего квадрата так, чтобы он был красным.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш класс с <code>blue-box</code> должен давать элементы <code>20px</code> <code>margin</code> . - text: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.");' testString: assert($(".blue-box").css("margin-top") === "20px");
``` ```
@ -73,14 +78,50 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
padding: 20px;
margin: 20px;
}
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
margin: 20px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
``` ```
</section> </section>

57
curriculum/challenges/russian/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.russian.md
View File

@ -2,23 +2,28 @@
id: bad88fee1348bd9aedf08825 id: bad88fee1348bd9aedf08825
title: Adjust the Padding of an Element title: Adjust the Padding of an Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cED8ZC2
forumTopicId: 301083
localeTitle: Отрегулируйте прокладку элемента localeTitle: Отрегулируйте прокладку элемента
--- ---
## Description ## Description
<section id="description"> Теперь давайте немного отложим наше приложение для фотоаппарата Cat, и узнаем больше о стилизации HTML. Возможно, вы это уже заметили, но все элементы HTML по существу представляют собой небольшие прямоугольники. Три важных свойства управляют пространством, которое окружает каждый элемент HTML: <code>padding</code> , <code>margin</code> и <code>border</code> . Элемент в <code>padding</code> контролирует объем пространства между содержимым элемента и его <code>border</code> . Здесь мы видим, что синий ящик и красный ящик вложены в желтый квадрат. Обратите внимание, что красное поле имеет больше <code>padding</code> чем синий. При увеличении синей коробке в <code>padding</code> , это увеличит расстояние ( <code>padding</code> ) между текстом и границей вокруг него. </section> <section id='description'>
Теперь давайте немного отложим наше приложение для фотоаппарата Cat, и узнаем больше о стилизации HTML. Возможно, вы это уже заметили, но все элементы HTML по существу представляют собой небольшие прямоугольники. Три важных свойства управляют пространством, которое окружает каждый элемент HTML: <code>padding</code> , <code>margin</code> и <code>border</code> . Элемент в <code>padding</code> контролирует объем пространства между содержимым элемента и его <code>border</code> . Здесь мы видим, что синий ящик и красный ящик вложены в желтый квадрат. Обратите внимание, что красное поле имеет больше <code>padding</code> чем синий. При увеличении синей коробке в <code>padding</code> , это увеличит расстояние ( <code>padding</code> ) между текстом и границей вокруг него.
</section>
## Instructions ## Instructions
<section id="instructions"> Измените <code>padding</code> синего квадрата в соответствии с вашим красным полем. </section> <section id='instructions'>
Измените <code>padding</code> синего квадрата в соответствии с вашим красным полем.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш класс <code>blue-box</code> должен давать элементы <code>20px</code> <code>padding</code> . - text: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.");' testString: assert($(".blue-box").css("padding-top") === "20px");
``` ```
@ -71,14 +76,48 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
padding: 20px;
}
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
``` ```
</section> </section>

26
curriculum/challenges/russian/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.russian.md
View File

@ -2,25 +2,30 @@
id: 5a9d7286424fe3d0e10cad13 id: 5a9d7286424fe3d0e10cad13
title: Attach a Fallback value to a CSS Variable title: Attach a Fallback value to a CSS Variable
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c6bDNfp
forumTopicId: 301084
localeTitle: Прикрепите значение возврата к переменной CSS localeTitle: Прикрепите значение возврата к переменной CSS
--- ---
## Description ## Description
<section id="description"> При использовании переменной в качестве значения свойства CSS вы можете добавить резервное значение, которое ваш браузер вернет, если данная переменная недействительна. <strong>Примечание.</strong> Этот резерв не используется для повышения совместимости браузера, и он не будет работать в браузерах IE. Скорее, он используется, чтобы браузер отображал цвет, если он не может найти вашу переменную. Вот как вы это делаете: <blockquote> фон: var (- пингвин-кожа, черный); </blockquote> Это установит фон в черный, если ваша переменная не была установлена. Обратите внимание, что это может быть полезно для отладки. </section> <section id='description'>
При использовании переменной в качестве значения свойства CSS вы можете добавить резервное значение, которое ваш браузер вернет, если данная переменная недействительна. <strong>Примечание.</strong> Этот резерв не используется для повышения совместимости браузера, и он не будет работать в браузерах IE. Скорее, он используется, чтобы браузер отображал цвет, если он не может найти вашу переменную. Вот как вы это делаете: <blockquote> фон: var (- пингвин-кожа, черный); </blockquote> Это установит фон в черный, если ваша переменная не была установлена. Обратите внимание, что это может быть полезно для отладки.
</section>
## Instructions ## Instructions
<section id="instructions"> Похоже, что существует проблема с переменными, <code>.penguin-top</code> в <code>.penguin-top</code> и <code>.penguin-bottom</code> . Вместо того, чтобы исправить опечатку, добавьте запасное значение <code>black</code> в свойство <code>background</code> <code>.penguin-top</code> и <code>.penguin-bottom</code> . </section> <section id='instructions'>
Похоже, что существует проблема с переменными, <code>.penguin-top</code> в <code>.penguin-top</code> и <code>.penguin-bottom</code> . Вместо того, чтобы исправить опечатку, добавьте запасное значение <code>black</code> в свойство <code>background</code> <code>.penguin-top</code> и <code>.penguin-bottom</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Примените запасное значение <code>black</code> к свойству <code>background</code> класса <code>penguin-top</code> . - text: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.");' testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
- text: Примените запасное значение <code>black</code> к свойству <code>background</code> класса <code>penguin-bottom</code> . - text: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.");' testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi));
``` ```
@ -241,14 +246,13 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required var code = ".penguin-top {background: var(--pengiun-skin, black);} .penguin-bottom {background: var(--pengiun-skin, black);}"
``` ```
</section> </section>

14
curriculum/challenges/russian/01-responsive-web-design/basic-css/cascading-css-variables.russian.md
View File

@ -7,10 +7,14 @@ localeTitle: Каскадные переменные CSS
--- ---
## Description ## Description
<section id="description"> Когда вы создаете переменную, она становится доступной для использования внутри элемента, в котором вы его создаете. Он также становится доступным внутри любых элементов, вложенных в него. Этот эффект известен как <dfn>каскадный</dfn> . Из-за каскадирования переменные CSS часто определяются в <dfn>корневом</dfn> элементе. <code>:root</code> - это селектор <dfn>псевдокласса</dfn> , который соответствует корневому элементу документа, обычно <code></code> элемент. Создав переменные в <code>:root</code> , они будут доступны по всему миру и могут быть доступны из любого другого селектора позже в таблице стилей. </section> <section id='description'>
Когда вы создаете переменную, она становится доступной для использования внутри элемента, в котором вы его создаете. Он также становится доступным внутри любых элементов, вложенных в него. Этот эффект известен как <dfn>каскадный</dfn> . Из-за каскадирования переменные CSS часто определяются в <dfn>корневом</dfn> элементе. <code>:root</code> - это селектор <dfn>псевдокласса</dfn> , который соответствует корневому элементу документа, обычно <code></code> элемент. Создав переменные в <code>:root</code> , они будут доступны по всему миру и могут быть доступны из любого другого селектора позже в таблице стилей.
</section>
## Instructions ## Instructions
<section id="instructions"> Определите переменную с именем <code>--penguin-belly</code> в селекторе <code>:root</code> и придайте ей значение <code>pink</code> . Затем вы можете увидеть, как значение будет каскадно вниз, чтобы изменить значение на розовый, где бы ни была эта переменная. </section> <section id='instructions'>
Определите переменную с именем <code>--penguin-belly</code> в селекторе <code>:root</code> и придайте ей значение <code>pink</code> . Затем вы можете увидеть, как значение будет каскадно вниз, чтобы изменить значение на розовый, где бы ни была эта переменная.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
@ -19,7 +23,6 @@ localeTitle: Каскадные переменные CSS
tests: tests:
- text: 'объявите переменную <code>--penguin-belly</code> в <code>:root</code> и назначьте ее <code>pink</code> .' - text: 'объявите переменную <code>--penguin-belly</code> в <code>:root</code> и назначьте ее <code>pink</code> .'
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.");' testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.");'
``` ```
</section> </section>
@ -237,14 +240,13 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required // solution required
``` ```
</section> </section>

22
curriculum/challenges/russian/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.russian.md
View File

@ -2,23 +2,28 @@
id: 5a9d72a1424fe3d0e10cad15 id: 5a9d72a1424fe3d0e10cad15
title: Change a variable for a specific area title: Change a variable for a specific area
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cdRwbuW
forumTopicId: 301085
localeTitle: Изменение переменной для определенной области localeTitle: Изменение переменной для определенной области
--- ---
## Description ## Description
<section id="description"> Когда вы создаете переменные в <code>:root</code> они задают значение этой переменной для всей страницы. Вы можете переписать эти переменные, установив их снова в пределах определенного элемента. </section> <section id='description'>
Когда вы создаете переменные в <code>:root</code> они задают значение этой переменной для всей страницы. Вы можете переписать эти переменные, установив их снова в пределах определенного элемента.
</section>
## Instructions ## Instructions
<section id="instructions"> Измените значение <code>--penguin-belly</code> на <code>white</code> в классе <code>penguin</code> . </section> <section id='instructions'>
Измените значение <code>--penguin-belly</code> на <code>white</code> в классе <code>penguin</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Класс <code>penguin</code> должен переназначить переменную <code>--penguin-belly</code> на <code>white</code> . - text: The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.");' testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));
``` ```
@ -239,14 +244,13 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required var code = ".penguin {--penguin-belly: white;}"
``` ```
</section> </section>

58
curriculum/challenges/russian/01-responsive-web-design/basic-css/change-the-color-of-text.russian.md
View File

@ -2,25 +2,32 @@
id: bad87fee1348bd9aedf08803 id: bad87fee1348bd9aedf08803
title: Change the Color of Text title: Change the Color of Text
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cRkVmSm
forumTopicId: 16775
localeTitle: Изменение цвета текста localeTitle: Изменение цвета текста
--- ---
## Description ## Description
<section id="description"> Теперь давайте изменим цвет некоторых наших текстов. Мы можем сделать это, изменив <code>style</code> вашего элемента <code>h2</code> . Свойство, отвечающее за цвет текста элемента, является свойством стиля <code>color</code> . Вот как вы можете задать цвет текста вашего элемента <code>h2</code> синим: <code>&lt;h2 style=&quot;color: blue;&quot;&gt;CatPhotoApp&lt;/h2&gt;</code> Обратите внимание, что хорошей практикой является прекращение объявлений в <code>style</code> inline с помощью <code>;</code> , </section> <section id='description'>
Теперь давайте изменим цвет некоторых наших текстов. Мы можем сделать это, изменив <code>style</code> вашего элемента <code>h2</code> . Свойство, отвечающее за цвет текста элемента, является свойством стиля <code>color</code> . Вот как вы можете задать цвет текста вашего элемента <code>h2</code> синим: <code>&lt;h2 style=&quot;color: blue;&quot;&gt;CatPhotoApp&lt;/h2&gt;</code> Обратите внимание, что хорошей практикой является прекращение объявлений в <code>style</code> inline с помощью <code>;</code> ,
</section>
## Instructions ## Instructions
<section id="instructions"> Измените свой стиль элемента <code>h2</code> так, чтобы его цвет текста был красным. </section> <section id='instructions'>
Измените свой стиль элемента <code>h2</code> так, чтобы его цвет текста был красным.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш элемент <code>h2</code> должен быть красным. - text: Your <code>h2</code> element should have a <code>style</code> declaration.
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your <code>h2</code> element should be red.");' testString: assert($("h2").attr('style'));
- text: 'Ваше объявление <code>style</code> должно заканчиваться на <code>;</code> ,' - text: Your <code>h2</code> element should be red.
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\"|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\"|")>\s*CatPhotoApp\s*<\/h2>/)," Your <code>style</code> declaration should end with a <code>;</code> .");' testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
- text: Your <code>style</code> declaration should end with a <code>;</code> .
testString: assert($("h2").attr('style') && $("h2").attr('style').endsWith(';'));
``` ```
@ -68,14 +75,43 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <h2 style="color: red;">CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
``` ```
</section> </section>

61
curriculum/challenges/russian/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.russian.md
View File

@ -2,23 +2,28 @@
id: bad87fee1348bd9aedf08806 id: bad87fee1348bd9aedf08806
title: Change the Font Size of an Element title: Change the Font Size of an Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c3bvDc8
forumTopicId: 16777
localeTitle: Изменение размера шрифта элемента localeTitle: Изменение размера шрифта элемента
--- ---
## Description ## Description
<section id="description"> Размер шрифта контролируется свойством CSS <code>font-size</code> , например: <blockquote> h1 { <br> font-size: 30 px; <br> } </blockquote></section> <section id='description'>
Размер шрифта контролируется свойством CSS <code>font-size</code> , например: <blockquote> h1 { <br> font-size: 30 px; <br> } </blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Внутри тега <code>&lt;style&gt;</code>, который уже содержит класс <code>red-text</code>, создайте правило для <code>p</code> элементов и установите <code>font-size</code> 16 пикселей ( <code>16px</code> ). </section> <section id='instructions'>
Внутри тега <code>&lt;style&gt;</code>, который уже содержит класс <code>red-text</code>, создайте правило для <code>p</code> элементов и установите <code>font-size</code> 16 пикселей ( <code>16px</code> ).
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Между тегами <code>style</code> дайте <code>p</code> элементам <code>font-size</code> <code>16px</code> . Увеличение браузера и текста должно составлять 100%. - text: Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.");' testString: assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
``` ```
@ -72,14 +77,52 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.red-text {
color: red;
}
p {
font-size: 16px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
``` ```
</section> </section>

22
curriculum/challenges/russian/01-responsive-web-design/basic-css/create-a-custom-css-variable.russian.md
View File

@ -2,23 +2,28 @@
id: 5a9d726c424fe3d0e10cad11 id: 5a9d726c424fe3d0e10cad11
title: Create a custom CSS Variable title: Create a custom CSS Variable
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cQd27Hr
forumTopicId: 301086
localeTitle: Создание пользовательской переменной CSS localeTitle: Создание пользовательской переменной CSS
--- ---
## Description ## Description
<section id="description"> Чтобы создать переменную CSS, вам просто нужно дать ей <code>name</code> с <code>two dashes</code> перед ним и присвоить ему <code>value</code> подобное этому: <blockquote> - пингвин-кожа: серый; </blockquote> Это создаст переменную с именем <code>--penguin-skin</code> и присвоит ей значение <code>gray</code> . Теперь вы можете использовать эту переменную в другом месте вашего CSS, чтобы изменить значение других элементов на серый. </section> <section id='description'>
Чтобы создать переменную CSS, вам просто нужно дать ей <code>name</code> с <code>two dashes</code> перед ним и присвоить ему <code>value</code> подобное этому: <blockquote> - пингвин-кожа: серый; </blockquote> Это создаст переменную с именем <code>--penguin-skin</code> и присвоит ей значение <code>gray</code> . Теперь вы можете использовать эту переменную в другом месте вашего CSS, чтобы изменить значение других элементов на серый.
</section>
## Instructions ## Instructions
<section id="instructions"> В классе <code>penguin</code> создайте переменное имя <code>--penguin-skin</code> и придайте ему значение <code>gray</code> </section> <section id='instructions'>
В классе <code>penguin</code> создайте переменное имя <code>--penguin-skin</code> и придайте ему значение <code>gray</code>
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: класс <code>penguin</code> должен объявить переменную <code>--penguin-skin</code> и назначить ее <code>gray</code> . - text: <code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.");' testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));
``` ```
@ -232,14 +237,13 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required var code = ".penguin {--penguin-skin: gray;}"
``` ```
</section> </section>

91
curriculum/challenges/russian/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.russian.md
View File

@ -2,27 +2,32 @@
id: bad87fed1348bd9aede07836 id: bad87fed1348bd9aede07836
title: Give a Background Color to a div Element title: Give a Background Color to a div Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cdRKMCk
forumTopicId: 18190
localeTitle: Задайте цвет фона элементу div localeTitle: Задайте цвет фона элементу div
--- ---
## Description ## Description
<section id="description"> Вы можете установить цвет фона элемента при помощи свойства <code>background-color</code> . Например, если вы хотите, чтобы цвет фона элемента был <code>green</code> , вы должны поместить его в элемент <code>style</code> : <blockquote> .green-background { <br> background-color: green; <br> } </blockquote></section> <section id='description'>
Вы можете установить цвет фона элемента при помощи свойства <code>background-color</code> . Например, если вы хотите, чтобы цвет фона элемента был <code>green</code> , вы должны поместить его в элемент <code>style</code> : <blockquote> .green-background { <br> background-color: green; <br> } </blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Создайте класс с именем <code>silver-background</code> с <code>background-color</code> и присвойте ему значение <code>silver</code>. Назначьте этот класс вашему элементу <code>div</code> . </section> <section id='instructions'>
Создайте класс с именем <code>silver-background</code> с <code>background-color</code> и присвойте ему значение <code>silver</code>. Назначьте этот класс вашему элементу <code>div</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Дайте вашему элементу <code>div</code> класс <code>silver-background</code> . - text: Give your <code>div</code> element the class <code>silver-background</code>.
testString: 'assert($("div").hasClass("silver-background"), "Give your <code>div</code> element the class <code>silver-background</code>.");' testString: assert($("div").hasClass("silver-background"));
- text: Ваш элемент <code>div</code> должен иметь серебряный фон. - text: Your <code>div</code> element should have a silver background.
testString: 'assert($("div").css("background-color") === "rgb(192, 192, 192)", "Your <code>div</code> element should have a silver background.");' testString: assert($("div").css("background-color") === "rgb(192, 192, 192)");
- text: Определите класс с именем <code>silver-background</code> в элементе <code>style</code> и присвойте значение <code>silver</code> свойству <code>background-color</code> . - text: Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property.
testString: 'assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/), "Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property.");' testString: assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
``` ```
@ -97,14 +102,74 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
.silver-background {
background-color: silver;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div class="silver-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
``` ```
</section> </section>

80
curriculum/challenges/russian/01-responsive-web-design/basic-css/import-a-google-font.russian.md
View File

@ -2,29 +2,34 @@
id: bad87fee1348bd9aedf08807 id: bad87fee1348bd9aedf08807
title: Import a Google Font title: Import a Google Font
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cM9MRsJ
forumTopicId: 18200
localeTitle: Импорт шрифта Google localeTitle: Импорт шрифта Google
--- ---
## Description ## Description
<section id="description"> В дополнение к общим шрифтам, которые можно найти в большинстве операционных систем, можно так же использовать нестандартные пользовательские веб-шрифты для использования на нашем веб-сайте. Существует множество источников веб-шрифтов, но в этом примере мы сосредоточимся на библиотеке Google Fonts. <a href="https://fonts.google.com/" target="_blank">Google Fonts</a> - бесплатная библиотека веб-шрифтов, которую вы можете использовать в своем CSS, ссылаясь на URL-адрес шрифта. Итак, давайте попробуем импортировать и применить шрифт из библиотеки Google (обратите внимание, что если Google заблокирован в вашей стране, вам нужно будет пропустить этот пример). Чтобы импортировать шрифт Google, вы можете скопировать шрифт(ы) из библиотеки Google Fonts и затем вставить его в свой HTML. Для этого примера мы импортируем шрифт <code>Lobster</code>. Скопируйте следующий фрагмент кода и вставьте его в верхнюю часть редактора кода (перед элементом <code>style</code>): <code>&lt;link href=&quot;https://fonts.googleapis.com/css?family=Lobster&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;</code> Теперь вы можете использовать шрифт <code>Lobster</code> в своем CSS, используя <code>Lobster</code> как FAMILY_NAME, как в следующем примере: <br> <code>font-family: FAMILY_NAME, GENERIC_NAME;</code>, GENERIC_NAME необязателен и является резервным шрифтом, если другой указанный шрифт недоступен. Это будет рассматриваться в следующей задаче. Имена шрифтов чувствительны к регистру и должны быть указаны в кавычках, если в имени есть пробел. Например, вам нужны кавычки, чтобы использовать шрифт <code>&quot;Open Sans&quot;</code>, но не для шрифта <code>Lobster</code>. </section> <section id='description'>
В дополнение к общим шрифтам, которые можно найти в большинстве операционных систем, можно так же использовать нестандартные пользовательские веб-шрифты для использования на нашем веб-сайте. Существует множество источников веб-шрифтов, но в этом примере мы сосредоточимся на библиотеке Google Fonts. <a href="https://fonts.google.com/" target="_blank">Google Fonts</a> - бесплатная библиотека веб-шрифтов, которую вы можете использовать в своем CSS, ссылаясь на URL-адрес шрифта. Итак, давайте попробуем импортировать и применить шрифт из библиотеки Google (обратите внимание, что если Google заблокирован в вашей стране, вам нужно будет пропустить этот пример). Чтобы импортировать шрифт Google, вы можете скопировать шрифт(ы) из библиотеки Google Fonts и затем вставить его в свой HTML. Для этого примера мы импортируем шрифт <code>Lobster</code>. Скопируйте следующий фрагмент кода и вставьте его в верхнюю часть редактора кода (перед элементом <code>style</code>): <code>&lt;link href=&quot;https://fonts.googleapis.com/css?family=Lobster&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;</code> Теперь вы можете использовать шрифт <code>Lobster</code> в своем CSS, используя <code>Lobster</code> как FAMILY_NAME, как в следующем примере: <br> <code>font-family: FAMILY_NAME, GENERIC_NAME;</code>, GENERIC_NAME необязателен и является резервным шрифтом, если другой указанный шрифт недоступен. Это будет рассматриваться в следующей задаче. Имена шрифтов чувствительны к регистру и должны быть указаны в кавычках, если в имени есть пробел. Например, вам нужны кавычки, чтобы использовать шрифт <code>&quot;Open Sans&quot;</code>, но не для шрифта <code>Lobster</code>.
</section>
## Instructions ## Instructions
<section id="instructions"> Создайте правило CSS <code>font-family</code> шрифтов, которое использует шрифт <code>Lobster</code>, и убедитесь, что оно будет применено к вашему элементу <code>h2</code>. </section> <section id='instructions'>
Создайте правило CSS <code>font-family</code> шрифтов, которое использует шрифт <code>Lobster</code>, и убедитесь, что оно будет применено к вашему элементу <code>h2</code>.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Импортируйте шрифт <code>Lobster</code> . - text: Import the <code>Lobster</code> font.
testString: 'assert(new RegExp("googleapis", "gi").test(code), "Import the <code>Lobster</code> font.");' testString: assert(new RegExp("googleapis", "gi").test(code));
- text: Ваш элемент <code>h2</code> должен использовать шрифт <code>Lobster</code> . - text: Your <code>h2</code> element should use the font <code>Lobster</code>.
testString: 'assert($("h2").css("font-family").match(/lobster/i), "Your <code>h2</code> element should use the font <code>Lobster</code>.");' testString: assert($("h2").css("font-family").match(/lobster/i));
- text: С помощью селектора <code>h2</code> CSS измените шрифт. - text: Use an <code>h2</code> CSS selector to change the font.
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?\s*;\s*\}/gi.test(code), "Use an <code>h2</code> CSS selector to change the font.");' testString: assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?(.{0,})\s*;\s*\}/gi.test(code));
- text: Ваш элемент <code>p</code> все равно должен использовать шрифт <code>monospace</code> . - text: Your <code>p</code> element should still use the font <code>monospace</code>.
testString: 'assert($("p").css("font-family").match(/monospace/i), "Your <code>p</code> element should still use the font <code>monospace</code>.");' testString: assert($("p").css("font-family").match(/monospace/i));
``` ```
@ -83,14 +88,59 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
p {
font-size: 16px;
font-family: monospace;
}
h2 {
font-family: Lobster;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
``` ```
</section> </section>

31
curriculum/challenges/russian/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.russian.md
View File

@ -3,22 +3,27 @@ id: 5b7d72c338cd7e35b63f3e14
title: Improve Compatibility with Browser Fallbacks title: Improve Compatibility with Browser Fallbacks
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: ''
forumTopicId: 301087
localeTitle: Улучшение совместимости с отказами браузера localeTitle: Улучшение совместимости с отказами браузера
--- ---
## Description ## Description
<section id="description"> При работе с CSS вы, вероятно, столкнетесь с проблемами совместимости браузеров в какой-то момент. Вот почему важно обеспечить резервные копии браузера, чтобы избежать потенциальных проблем. Когда ваш браузер анализирует CSS веб-страницы, он игнорирует любые свойства, которые он не распознает или не поддерживает. Например, если вы используете переменную CSS для назначения цвета фона на сайте, Internet Explorer игнорирует цвет фона, поскольку он не поддерживает переменные CSS. В этом случае браузер будет использовать любое значение, которое он имеет для этого свойства. Если он не может найти какое-либо другое значение, установленное для этого свойства, оно вернется к значению по умолчанию, которое обычно не является идеальным. Это означает, что если вы хотите предоставить резервную копию браузера, это так же просто, как предоставить еще одно широко поддерживаемое значение непосредственно перед вашей декларацией. Таким образом, у более старого браузера есть что-то, на что можно положиться, в то время как более новый браузер будет просто интерпретировать любое объявление, которое позднее появится в каскаде. </section> <section id='description'>
При работе с CSS вы, вероятно, столкнетесь с проблемами совместимости браузеров в какой-то момент. Вот почему важно обеспечить резервные копии браузера, чтобы избежать потенциальных проблем. Когда ваш браузер анализирует CSS веб-страницы, он игнорирует любые свойства, которые он не распознает или не поддерживает. Например, если вы используете переменную CSS для назначения цвета фона на сайте, Internet Explorer игнорирует цвет фона, поскольку он не поддерживает переменные CSS. В этом случае браузер будет использовать любое значение, которое он имеет для этого свойства. Если он не может найти какое-либо другое значение, установленное для этого свойства, оно вернется к значению по умолчанию, которое обычно не является идеальным. Это означает, что если вы хотите предоставить резервную копию браузера, это так же просто, как предоставить еще одно широко поддерживаемое значение непосредственно перед вашей декларацией. Таким образом, у более старого браузера есть что-то, на что можно положиться, в то время как более новый браузер будет просто интерпретировать любое объявление, которое позднее появится в каскаде.
</section>
## Instructions ## Instructions
<section id="instructions"> Похоже, что переменная используется для установки цвета фона класса <code>.red-box</code> . Давайте улучшим совместимость с браузером, добавив еще одно <code>background</code> объявление прямо перед существующим объявлением и установив его значение в красный цвет. </section> <section id='instructions'>
Похоже, что переменная используется для установки цвета фона класса <code>.red-box</code> . Давайте улучшим совместимость с браузером, добавив еще одно <code>background</code> объявление прямо перед существующим объявлением и установив его значение в красный цвет.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: '<code>.red-box</code> должно включать <code>.red-box</code> с <code>background</code> установленным на красный, непосредственно перед существующей декларацией <code>background</code> .' - text: Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.
testString: 'assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), "Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.");' testString: assert(code.replace(/\s/g, "").match(/\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi));
``` ```
@ -47,14 +52,24 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
:root {
--red-color: red;
}
.red-box {
background: red;
background: var(--red-color);
height: 200px;
width:200px;
}
</style>
<div class="red-box"></div>
``` ```
</section> </section>

54
curriculum/challenges/russian/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.russian.md
View File

@ -2,35 +2,40 @@
id: bad87fee1348bd9aedf08746 id: bad87fee1348bd9aedf08746
title: Inherit Styles from the Body Element title: Inherit Styles from the Body Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c9bmdtR
forumTopicId: 18204
localeTitle: Наследовать стили из элемента тела localeTitle: Наследовать стили из элемента тела
--- ---
## Description ## Description
<section id="description"> Теперь мы доказали, что каждая HTML-страница имеет элемент <code>body</code> , а ее элемент <code>body</code> также может быть связан с CSS. Помните, вы можете стилизовать свой элемент <code>body</code> же, как любой другой элемент HTML, и все ваши другие элементы наследуют стили вашего <code>body</code> . </section> <section id='description'>
Теперь мы доказали, что каждая HTML-страница имеет элемент <code>body</code> , а ее элемент <code>body</code> также может быть связан с CSS. Помните, вы можете стилизовать свой элемент <code>body</code> же, как любой другой элемент HTML, и все ваши другие элементы наследуют стили вашего <code>body</code> .
</section>
## Instructions ## Instructions
<section id="instructions"> Во-первых, создайте элемент <code>h1</code> с текстом <code>Hello World</code> Затем дадим все элементы на вашей странице цвета <code>green</code> , добавив <code>color: green;</code> к объявлению стиля вашего <code>body</code> . Наконец, придайте вашему <code>body</code> элемент семейства шрифтов <code>monospace</code> , добавив <code>font-family: monospace;</code> к объявлению стиля вашего <code>body</code> . </section> <section id='instructions'>
Во-первых, создайте элемент <code>h1</code> с текстом <code>Hello World</code> Затем дадим все элементы на вашей странице цвета <code>green</code> , добавив <code>color: green;</code> к объявлению стиля вашего <code>body</code> . Наконец, придайте вашему <code>body</code> элемент семейства шрифтов <code>monospace</code> , добавив <code>font-family: monospace;</code> к объявлению стиля вашего <code>body</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Создайте элемент <code>h1</code> . - text: Create an <code>h1</code> element.
testString: 'assert(($("h1").length > 0), "Create an <code>h1</code> element.");' testString: assert(($("h1").length > 0));
- text: Ваш элемент <code>h1</code> должен иметь текст <code>Hello World</code> . - text: Your <code>h1</code> element should have the text <code>Hello World</code>.
testString: 'assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), "Your <code>h1</code> element should have the text <code>Hello World</code>.");' testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)));
- text: 'Убедитесь, что ваш элемент <code>h1</code> имеет закрывающий тег.' - text: Make sure your <code>h1</code> element has a closing tag.
testString: 'assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, "Make sure your <code>h1</code> element has a closing tag.");' testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length);
- text: Дайте элементу своего <code>body</code> свойство <code>color</code> <code>green</code> . - text: Give your <code>body</code> element the <code>color</code> property of <code>green</code>.
testString: 'assert(($("body").css("color") === "rgb(0, 128, 0)"), "Give your <code>body</code> element the <code>color</code> property of <code>green</code>.");' testString: assert(($("body").css("color") === "rgb(0, 128, 0)"));
- text: Дайте вашему элементу <code>body</code> свойство <code>font-family</code> <code>monospace</code> . - text: Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.
testString: 'assert(($("body").css("font-family").match(/monospace/i)), "Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.");' testString: assert(($("body").css("font-family").match(/monospace/i)));
- text: Ваш элемент <code>h1</code> должен наследовать шрифт <code>monospace</code> от вашего элемента <code>body</code> . - text: Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.
testString: 'assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), "Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.");' testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)));
- text: Ваш элемент <code>h1</code> должен наследовать зеленый цвет от вашего элемента <code>body</code> . - text: Your <code>h1</code> element should inherit the color green from your <code>body</code> element.
testString: 'assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), "Your <code>h1</code> element should inherit the color green from your <code>body</code> element.");' testString: assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"));
``` ```
@ -53,14 +58,21 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background-color: black;
font-family: monospace;
color: green;
}
</style>
<h1>Hello World!</h1>
``` ```
</section> </section>

84
curriculum/challenges/russian/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.russian.md
View File

@ -2,25 +2,30 @@
id: bad87fee1348bd9aedf08815 id: bad87fee1348bd9aedf08815
title: Make Circular Images with a border-radius title: Make Circular Images with a border-radius
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c2MvrcB
forumTopicId: 18229
localeTitle: Создание изображения формы - круг с помощью border-radius localeTitle: Создание изображения формы - круг с помощью border-radius
--- ---
## Description ## Description
<section id="description">В дополнение к пикселям вы также можете задать <code>border-radius</code> в процентном соотношении. </section> <section id='description'>
В дополнение к пикселям вы также можете задать <code>border-radius</code> в процентном соотношении.
</section>
## Instructions ## Instructions
<section id="instructions"> Задайте вашей фотографии кошки <code>border-radius</code> <code>50%</code> . </section> <section id='instructions'>
Задайте вашей фотографии кошки <code>border-radius</code> <code>50%</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 'Ваше изображение должно иметь радиус границы <code>50%</code> , что делает его идеально круглым.' - text: Your image should have a border radius of <code>50%</code>, making it perfectly circular.
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 48, "Ваше изображение должно иметь радиус границы <code>50%</code> , что делает его идеально круглым.");' testString: assert(parseInt($("img").css("border-top-left-radius")) > 48);
- text: 'Обязательно используйте процентное объявление <code>50%</code>.' - text: Be sure to use a percentage value of <code>50%</code>.
testString: 'assert(code.match(/50%/g), "Обязательно используйте процентное объявление <code>50%</code>.");' testString: assert(code.match(/50%/g));
``` ```
@ -95,14 +100,71 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 10px;
}
.smaller-image {
width: 100px;
border-radius: 50%;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
``` ```
</section> </section>

60
curriculum/challenges/russian/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.russian.md
View File

@ -2,33 +2,38 @@
id: bad87fee1348bd9aedf07756 id: bad87fee1348bd9aedf07756
title: Override All Other Styles by using Important title: Override All Other Styles by using Important
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cm24rcp
localeTitle: 'Переопределите все остальные стили, используя важные' forumTopicId: 18249
localeTitle: Переопределите все остальные стили, используя важные
--- ---
## Description ## Description
<section id="description"> Ура! Мы просто доказали, что встроенные стили переопределяют все объявления CSS в вашем элементе <code>style</code> . Но ждать. Есть один последний способ переопределить CSS. Это самый мощный метод для всех. Но прежде чем мы это сделаем, давайте поговорим о том, почему вы хотели бы переопределить CSS. Во многих ситуациях вы будете использовать библиотеки CSS. Они могут случайно переопределить ваш собственный CSS. Поэтому, когда вам абсолютно необходимо убедиться, что элемент имеет определенный CSS, вы можете использовать <code>!important</code> Давайте вернемся к нашему объявлению класса <code>pink-text</code> . Помните, что наш класс <code>pink-text</code> был переопределен последующими объявлениями классов, декларациями id и встроенными стилями. </section> <section id='description'>
Ура! Мы просто доказали, что встроенные стили переопределяют все объявления CSS в вашем элементе <code>style</code> . Но ждать. Есть один последний способ переопределить CSS. Это самый мощный метод для всех. Но прежде чем мы это сделаем, давайте поговорим о том, почему вы хотели бы переопределить CSS. Во многих ситуациях вы будете использовать библиотеки CSS. Они могут случайно переопределить ваш собственный CSS. Поэтому, когда вам абсолютно необходимо убедиться, что элемент имеет определенный CSS, вы можете использовать <code>!important</code> Давайте вернемся к нашему объявлению класса <code>pink-text</code> . Помните, что наш класс <code>pink-text</code> был переопределен последующими объявлениями классов, декларациями id и встроенными стилями.
</section>
## Instructions ## Instructions
<section id="instructions"> Давайте добавим ключевое слово <code>!important</code> для вашего объявления цвета вашего розового текста, чтобы 100% убедиться, что ваш элемент <code>h1</code> будет розовым. Пример того, как это сделать: <code>color: red !important;</code> </section> <section id='instructions'>
Давайте добавим ключевое слово <code>!important</code> для вашего объявления цвета вашего розового текста, чтобы 100% убедиться, что ваш элемент <code>h1</code> будет розовым. Пример того, как это сделать: <code>color: red !important;</code>
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш элемент <code>h1</code> должен иметь класс <code>pink-text</code> . - text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");' testString: assert($("h1").hasClass("pink-text"));
- text: Ваш элемент <code>h1</code> должен иметь <code>blue-text</code> . - text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");' testString: assert($("h1").hasClass("blue-text"));
- text: Ваш элемент <code>h1</code> должен иметь идентификатор <code>orange-text</code> . - text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");' testString: assert($("h1").attr("id") === "orange-text");
- text: 'Ваш элемент <code>h1</code> должен иметь встроенный стиль <code>color: white</code> .' - text: Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), "Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.");' testString: assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
- text: 'В объявлении класса <code>pink-text</code> должно быть ключевое слово <code>!important</code> Important, чтобы переопределить все другие объявления.' - text: Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.");' testString: assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g));
- text: Ваш элемент <code>h1</code> должен быть розовым. - text: Your <code>h1</code> element should be pink.
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");' testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
``` ```
@ -62,14 +67,29 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink !important;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
``` ```
</section> </section>

62
curriculum/challenges/russian/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.russian.md
View File

@ -2,35 +2,40 @@
id: bad87fee1348bd8aedf06756 id: bad87fee1348bd8aedf06756
title: Override Class Declarations by Styling ID Attributes title: Override Class Declarations by Styling ID Attributes
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cRkpDhB
forumTopicId: 18251
localeTitle: Переопределить объявления классов с помощью атрибутов идентификатора стилизации localeTitle: Переопределить объявления классов с помощью атрибутов идентификатора стилизации
--- ---
## Description ## Description
<section id="description"> Мы просто доказали, что браузеры читают CSS сверху вниз. Это означает, что в случае конфликта браузер будет использовать любую декларацию CSS. Но мы еще не закончили. Существуют и другие способы переопределения CSS. Вы помните атрибуты id? Давайте переопределим ваши классы с <code>pink-text</code> и <code>blue-text</code> и сделаем ваш элемент <code>h1</code> оранжевым, предоставив элементу <code>h1</code> идентификатор, а затем стиль этого идентификатора. </section> <section id='description'>
Мы просто доказали, что браузеры читают CSS сверху вниз. Это означает, что в случае конфликта браузер будет использовать любую декларацию CSS. Но мы еще не закончили. Существуют и другие способы переопределения CSS. Вы помните атрибуты id? Давайте переопределим ваши классы с <code>pink-text</code> и <code>blue-text</code> и сделаем ваш элемент <code>h1</code> оранжевым, предоставив элементу <code>h1</code> идентификатор, а затем стиль этого идентификатора.
</section>
## Instructions ## Instructions
<section id="instructions"> Дайте элементу <code>h1</code> атрибут <code>id</code> <code>orange-text</code> . Помните, что стили id выглядят следующим образом: <code>&lt;h1 id=&quot;orange-text&quot;&gt;</code> Оставьте классы <code>blue-text</code> и <code>pink-text</code> на вашем элементе <code>h1</code> . Создайте объявление CSS для вашего <code>orange-text</code> в элементе <code>style</code> . Вот пример того, как это выглядит: <blockquote> # brown-text { <br> коричневый цвет; <br> } </blockquote> Примечание. Неважно, объявляете ли вы этот CSS выше или ниже класса розового текста, поскольку атрибут id всегда будет иметь приоритет. </section> <section id='instructions'>
Дайте элементу <code>h1</code> атрибут <code>id</code> <code>orange-text</code> . Помните, что стили id выглядят следующим образом: <code>&lt;h1 id=&quot;orange-text&quot;&gt;</code> Оставьте классы <code>blue-text</code> и <code>pink-text</code> на вашем элементе <code>h1</code> . Создайте объявление CSS для вашего <code>orange-text</code> в элементе <code>style</code> . Вот пример того, как это выглядит: <blockquote> # brown-text { <br> коричневый цвет; <br> } </blockquote> Примечание. Неважно, объявляете ли вы этот CSS выше или ниже класса розового текста, поскольку атрибут id всегда будет иметь приоритет.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш элемент <code>h1</code> должен иметь класс <code>pink-text</code> . - text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");' testString: assert($("h1").hasClass("pink-text"));
- text: Ваш элемент <code>h1</code> должен иметь <code>blue-text</code> . - text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");' testString: assert($("h1").hasClass("blue-text"));
- text: Дайте элементу <code>h1</code> идентификатор <code>orange-text</code> . - text: Give your <code>h1</code> element the id of <code>orange-text</code>.
testString: 'assert($("h1").attr("id") === "orange-text", "Give your <code>h1</code> element the id of <code>orange-text</code>.");' testString: assert($("h1").attr("id") === "orange-text");
- text: Должен быть только один элемент <code>h1</code> . - text: There should be only one <code>h1</code> element.
testString: 'assert(($("h1").length === 1), "There should be only one <code>h1</code> element.");' testString: assert(($("h1").length === 1));
- text: Создайте объявление CSS для вашего идентификатора <code>orange-text</code> - text: Create a CSS declaration for your <code>orange-text</code> id
testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your <code>orange-text</code> id");' testString: assert(code.match(/#orange-text\s*{/gi));
- text: Не <code>h1</code> никаких атрибутов <code>style</code> . - text: Do not give your <code>h1</code> any <code>style</code> attributes.
testString: 'assert(!code.match(/<h1.*style.*>/gi), "Do not give your <code>h1</code> any <code>style</code> attributes.");' testString: assert(!code.match(/<h1.*style.*>/gi));
- text: Ваш элемент <code>h1</code> должен быть оранжевым. - text: Your <code>h1</code> element should be orange.
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your <code>h1</code> element should be orange.");' testString: assert($("h1").css("color") === "rgb(255, 165, 0)");
``` ```
@ -61,14 +66,29 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
#orange-text {
color: orange;
}
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
``` ```
</section> </section>

54
curriculum/challenges/russian/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.russian.md
View File

@ -2,31 +2,36 @@
id: bad87fee1348bd9aedf06756 id: bad87fee1348bd9aedf06756
title: Override Class Declarations with Inline Styles title: Override Class Declarations with Inline Styles
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cGJDRha
forumTopicId: 18252
localeTitle: Переопределить объявления классов со встроенными стилями localeTitle: Переопределить объявления классов со встроенными стилями
--- ---
## Description ## Description
<section id="description"> Таким образом, мы доказали, что объявления id переопределяют объявления классов, независимо от того, где они объявлены в вашем элементе <code>style</code> CSS. Существуют и другие способы переопределения CSS. Вы помните встроенные стили? </section> <section id='description'>
Таким образом, мы доказали, что объявления id переопределяют объявления классов, независимо от того, где они объявлены в вашем элементе <code>style</code> CSS. Существуют и другие способы переопределения CSS. Вы помните встроенные стили?
</section>
## Instructions ## Instructions
<section id="instructions"> Используйте <code>inline style</code> чтобы сделать наш элемент <code>h1</code> белым. Помните, что в стилях строк выглядит так: <code>&lt;h1 style=&quot;color: green;&quot;&gt;</code> Оставьте классы <code>blue-text</code> и <code>pink-text</code> на вашем элементе <code>h1</code> . </section> <section id='instructions'>
Используйте <code>inline style</code> чтобы сделать наш элемент <code>h1</code> белым. Помните, что в стилях строк выглядит так: <code>&lt;h1 style=&quot;color: green;&quot;&gt;</code> Оставьте классы <code>blue-text</code> и <code>pink-text</code> на вашем элементе <code>h1</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш элемент <code>h1</code> должен иметь класс <code>pink-text</code> . - text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");' testString: assert($("h1").hasClass("pink-text"));
- text: Ваш элемент <code>h1</code> должен иметь <code>blue-text</code> . - text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");' testString: assert($("h1").hasClass("blue-text"));
- text: Ваш элемент <code>h1</code> должен иметь идентификатор <code>orange-text</code> . - text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");' testString: assert($("h1").attr("id") === "orange-text");
- text: Дайте вашему элементу <code>h1</code> встроенный стиль. - text: Give your <code>h1</code> element an inline style.
testString: 'assert(document.querySelector("h1[style]"), "Give your <code>h1</code> element an inline style.");' testString: assert(document.querySelector('h1[style]'));
- text: Ваш элемент <code>h1</code> должен быть белым. - text: Your <code>h1</code> element should be white.
testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", "Your <code>h1</code> element should be white.");' testString: assert($("h1").css("color") === "rgb(255, 255, 255)");
``` ```
@ -60,14 +65,29 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
``` ```
</section> </section>

48
curriculum/challenges/russian/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.russian.md
View File

@ -2,29 +2,34 @@
id: bad87fee1348bd9aedf04756 id: bad87fee1348bd9aedf04756
title: Override Styles in Subsequent CSS title: Override Styles in Subsequent CSS
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cGJDQug
forumTopicId: 18253
localeTitle: Переопределить стили, записав их ниже в последующем CSS localeTitle: Переопределить стили, записав их ниже в последующем CSS
--- ---
## Description ## Description
<section id="description"> Наш класс <code>pink-text</code> переопределил декларацию CSS в <code>body</code> элементе! Мы просто доказали, что наши классы переопределяют CSS элемента <code>body</code> . Итак, следующий логический вопрос: что мы можем сделать, чтобы переопределить наш класс <code>pink-text</code> ? </section> <section id='description'>
Наш класс <code>pink-text</code> переопределил декларацию CSS в <code>body</code> элементе! Мы просто доказали, что наши классы переопределяют CSS элемента <code>body</code> . Итак, следующий логический вопрос: что мы можем сделать, чтобы переопределить наш класс <code>pink-text</code> ?
</section>
## Instructions ## Instructions
<section id="instructions"> Создайте дополнительный класс CSS <code>blue-text</code>, который задает элементу синий цвет. Убедитесь, что оно ниже вашего объявления класса <code>pink-text</code>. Примените класс <code>blue-text</code> к вашему элементу <code>h1</code> в дополнение к вашему классу <code>pink-text</code>, и давайте посмотрим, какой из них выиграет. Применение нескольких атрибутов класса к элементу HTML выполняется с пространством между ними следующим образом: <code>class=&quot;class1 class2&quot;</code> Примечание. Не имеет значения, какой порядок классов указан в элементе HTML. Тем не менее, порядок объявлений <code>class</code> в разделе <code>&lt;style&gt;</code> - это то, что важно. Вторая декларация всегда будет иметь приоритет над первой. Поскольку <code>.blue-text</code> объявлен вторым, он переопределяет атрибуты <code>.pink-text</code> </section> <section id='instructions'>
Создайте дополнительный класс CSS <code>blue-text</code>, который задает элементу синий цвет. Убедитесь, что оно ниже вашего объявления класса <code>pink-text</code>. Примените класс <code>blue-text</code> к вашему элементу <code>h1</code> в дополнение к вашему классу <code>pink-text</code>, и давайте посмотрим, какой из них выиграет. Применение нескольких атрибутов класса к элементу HTML выполняется с пространством между ними следующим образом: <code>class=&quot;class1 class2&quot;</code> Примечание. Не имеет значения, какой порядок классов указан в элементе HTML. Тем не менее, порядок объявлений <code>class</code> в разделе <code>&lt;style&gt;</code> - это то, что важно. Вторая декларация всегда будет иметь приоритет над первой. Поскольку <code>.blue-text</code> объявлен вторым, он переопределяет атрибуты <code>.pink-text</code>
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш элемент <code>h1</code> должен иметь класс <code>pink-text</code> . - text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");' testString: assert($("h1").hasClass("pink-text"));
- text: Ваш элемент <code>h1</code> должен иметь <code>blue-text</code> . - text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");' testString: assert($("h1").hasClass("blue-text"));
- text: И <code>blue-text</code> и <code>pink-text</code> должны принадлежать одному и тому же элементу <code>h1</code> . - text: Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.
testString: 'assert($(".pink-text").hasClass("blue-text"), "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.");' testString: assert($(".pink-text").hasClass("blue-text"));
- text: Ваш элемент <code>h1</code> должен быть синим. - text: Your <code>h1</code> element should be blue.
testString: 'assert($("h1").css("color") === "rgb(0, 0, 255)", "Your <code>h1</code> element should be blue.");' testString: assert($("h1").css("color") === "rgb(0, 0, 255)");
``` ```
@ -52,14 +57,27 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1>
``` ```
</section> </section>

40
curriculum/challenges/russian/01-responsive-web-design/basic-css/prioritize-one-style-over-another.russian.md
View File

@ -2,27 +2,32 @@
id: bad87fee1348bd9aedf08756 id: bad87fee1348bd9aedf08756
title: Prioritize One Style Over Another title: Prioritize One Style Over Another
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cZ8wnHv
forumTopicId: 18258
localeTitle: Приоритет одного стиля над другим localeTitle: Приоритет одного стиля над другим
--- ---
## Description ## Description
<section id="description"> Иногда ваши HTML-элементы получат несколько стилей, которые конфликтуют друг с другом. Например, ваш элемент <code>h1</code> не может быть одновременно зеленым и розовым. Давайте посмотрим, что произойдет, когда мы создадим класс, который делает текст розовым, а затем примените его к элементу. Будет ли наш класс <em>переопределять</em> <code>color: green;</code> элемента <code>body</code> <code>color: green;</code> Свойство CSS? </section> <section id='description'>
Иногда ваши HTML-элементы получат несколько стилей, которые конфликтуют друг с другом. Например, ваш элемент <code>h1</code> не может быть одновременно зеленым и розовым. Давайте посмотрим, что произойдет, когда мы создадим класс, который делает текст розовым, а затем примените его к элементу. Будет ли наш класс <em>переопределять</em> <code>color: green;</code> элемента <code>body</code> <code>color: green;</code> Свойство CSS?
</section>
## Instructions ## Instructions
<section id="instructions"> Создайте класс CSS, называемый <code>pink-text</code> который дает элементу цвет розовый. Дайте вашему элементу <code>h1</code> класс <code>pink-text</code> . </section> <section id='instructions'>
Создайте класс CSS, называемый <code>pink-text</code> который дает элементу цвет розовый. Дайте вашему элементу <code>h1</code> класс <code>pink-text</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш элемент <code>h1</code> должен иметь класс <code>pink-text</code> . - text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");' testString: assert($("h1").hasClass("pink-text"));
- text: Ваш <code>&lt;style&gt;</code> должен иметь класс CSS с <code>pink-text</code> который изменяет <code>color</code> . - text: Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.");' testString: assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
- text: Ваш элемент <code>h1</code> должен быть розовым. - text: Your <code>h1</code> element should be pink.
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");' testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
``` ```
@ -47,14 +52,23 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
</style>
<h1 class="pink-text">Hello World!</h1>
``` ```
</section> </section>

63
curriculum/challenges/russian/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.russian.md
View File

@ -2,23 +2,28 @@
id: bad87fee1348bd9aede08807 id: bad87fee1348bd9aede08807
title: Set the Font Family of an Element title: Set the Font Family of an Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/c3bvpCg
forumTopicId: 18278
localeTitle: Изменение семейства шрифтов элемента localeTitle: Изменение семейства шрифтов элемента
--- ---
## Description ## Description
<section id="description"> Вы можете выбрать, какой шрифт должен использовать элемент, используя свойство <code>font-family</code> . Например, если вы хотите чтобы шрифтом элемента <code>h2</code> был шрифт под названием <code>sans-serif</code>, то вы должны использовать следующий CSS: <blockquote> h2 { <br> font-family: sans-serif; <br> } </blockquote></section> <section id='description'>
Вы можете выбрать, какой шрифт должен использовать элемент, используя свойство <code>font-family</code> . Например, если вы хотите чтобы шрифтом элемента <code>h2</code> был шрифт под названием <code>sans-serif</code>, то вы должны использовать следующий CSS: <blockquote> h2 { <br> font-family: sans-serif; <br> } </blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Измените стиль всех <code>p</code> элементов данной программы на <code>monospace</code>. </section> <section id='instructions'>
Измените стиль всех <code>p</code> элементов данной программы на <code>monospace</code>.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваши элементы <code>p</code> должны использовать шрифт <code>monospace</code> . - text: Your <code>p</code> elements should use the font <code>monospace</code>.
testString: 'assert($("p").not(".red-text").css("font-family").match(/monospace/i), "Your <code>p</code> elements should use the font <code>monospace</code>.");' testString: assert($("p").not(".red-text").css("font-family").match(/monospace/i));
``` ```
@ -76,14 +81,54 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <style>
.red-text {
color: red;
}
p {
font-size: 16px;
font-family: monospace;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
``` ```
</section> </section>

83
curriculum/challenges/russian/01-responsive-web-design/basic-css/set-the-id-of-an-element.russian.md
View File

@ -2,23 +2,28 @@
id: bad87eee1348bd9aede07836 id: bad87eee1348bd9aede07836
title: Set the id of an Element title: Set the id of an Element
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cN6MEc2
forumTopicId: 18279
localeTitle: Установите идентификатор элемента localeTitle: Установите идентификатор элемента
--- ---
## Description ## Description
<section id="description"> В дополнение к классам каждый элемент HTML также может иметь атрибут <code>id</code> . Существует несколько преимуществ использования атрибутов <code>id</code>: вы можете использовать <code>id</code> для стилизации одного элемента, а позже вы узнаете, что вы можете использовать их для выбора и изменения определенных элементов с помощью JavaScript. Атрибуты <code>id</code> должны быть уникальными. Браузеры не будут применять это, но это широко согласованная передовая практика. Поэтому, пожалуйста, не указывайте одного и того же значения для атрибута <code>id</code> . Вот пример того, как вы присваиваете элементу <code>h2</code> идентификатор <code>cat-photo-app</code> : <code>&lt;h2 id=&quot;cat-photo-app&quot;&gt;</code> </section> <section id='description'>
В дополнение к классам каждый элемент HTML также может иметь атрибут <code>id</code> . Существует несколько преимуществ использования атрибутов <code>id</code>: вы можете использовать <code>id</code> для стилизации одного элемента, а позже вы узнаете, что вы можете использовать их для выбора и изменения определенных элементов с помощью JavaScript. Атрибуты <code>id</code> должны быть уникальными. Браузеры не будут применять это, но это широко согласованная передовая практика. Поэтому, пожалуйста, не указывайте одного и того же значения для атрибута <code>id</code> . Вот пример того, как вы присваиваете элементу <code>h2</code> идентификатор <code>cat-photo-app</code> : <code>&lt;h2 id=&quot;cat-photo-app&quot;&gt;</code>
</section>
## Instructions ## Instructions
<section id="instructions"> Задайте элементу <code>form</code> идентификатор <code>cat-photo-form</code> . </section> <section id='instructions'>
Задайте элементу <code>form</code> идентификатор <code>cat-photo-form</code> .
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Дайте элементу <code>form</code> идентификатор <code>cat-photo-form</code> . - text: Give your <code>form</code> element the id of <code>cat-photo-form</code>.
testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your <code>form</code> element the id of <code>cat-photo-form</code>.");' testString: assert($("form").attr("id") === "cat-photo-form");
``` ```
@ -97,14 +102,74 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
.silver-background {
background-color: silver;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div class="silver-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
``` ```
</section> </section>

76
curriculum/challenges/russian/01-responsive-web-design/basic-css/size-your-images.russian.md
View File

@ -2,25 +2,30 @@
id: bad87fee1348bd9acdf08812 id: bad87fee1348bd9acdf08812
title: Size Your Images title: Size Your Images
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: https://scrimba.com/c/cM9MmCP
forumTopicId: 18282
localeTitle: Управляйте размером ваших изображений localeTitle: Управляйте размером ваших изображений
--- ---
## Description ## Description
<section id="description"> CSS имеет свойство под названием <code>width</code>, которое управляет шириной элемента. Как и в случае с шрифтами, мы будем использовать пиксели <code>px</code> (pixels), чтобы указать ширину изображения. Например, если мы хотим создать класс CSS с именем <code>larger-image</code>, который дал бы HTML-элементам ширину 500 пикселей, мы будем использовать: <blockquote> &lt;style&gt; <br> .larger-image { <br> width: 500px; <br> } <br> &lt;/ style&gt; </blockquote></section> <section id='description'>
CSS имеет свойство под названием <code>width</code>, которое управляет шириной элемента. Как и в случае с шрифтами, мы будем использовать пиксели <code>px</code> (pixels), чтобы указать ширину изображения. Например, если мы хотим создать класс CSS с именем <code>larger-image</code>, который дал бы HTML-элементам ширину 500 пикселей, мы будем использовать: <blockquote> &lt;style&gt; <br> .larger-image { <br> width: 500px; <br> } <br> &lt;/ style&gt; </blockquote>
</section>
## Instructions ## Instructions
<section id="instructions"> Создайте класс <code>smaller-image</code> и используйте его для изменения размера изображения, чтобы оно было всего 100 пикселей в ширину. <strong>Заметка</strong> <br> Из-за различий в реализации браузера, вам может потребоваться 100% масштабирование для прохождения тестов в этом задании. </section> <section id='instructions'>
Создайте класс <code>smaller-image</code> и используйте его для изменения размера изображения, чтобы оно было всего 100 пикселей в ширину. <strong>Заметка</strong> <br> Из-за различий в реализации браузера, вам может потребоваться 100% масштабирование для прохождения тестов в этом задании.
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: Ваш элемент <code>img</code> должен иметь класс <code>smaller-image</code> . - text: Your <code>img</code> element should have the class <code>smaller-image</code>.
testString: 'assert($("img[src="https://bit.ly/fcc-relaxing-cat"]").attr("class") === "smaller-image", "Your <code>img</code> element should have the class <code>smaller-image</code>.");' testString: assert($("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') === "smaller-image");
- text: Ваше изображение должно быть 100 пикселей в ширину. Увеличение браузера должно составлять 100%. - text: Your image should be 100 pixels wide. Browser zoom should be at 100%.
testString: 'assert($("img").width() === 100, "Your image should be 100 pixels wide. Browser zoom should be at 100%.");' testString: assert($("img").width() === 100);
``` ```
@ -84,14 +89,63 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
``` ```
</section> </section>

Some files were not shown because too many files have changed in this diff Show More