chore(i18n,curriculum): processed translations - new ukrainian (#44447)
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b08
|
||||
title: Створення медіа-запиту
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cqwKrtm'
|
||||
forumTopicId: 301139
|
||||
dashedName: create-a-media-query
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Медіа-запити є новою технікою CSS3, яка змінює представлення вмісту на основі різних розмірів області перегляду. Область перегляду — це видима область користувача веб-сторінки і відрізняється в залежності від пристрою, який використовується для доступу до сайту.
|
||||
|
||||
Медіа-запити складаються з типу медіа, і якщо цей тип медіа відповідає типу пристрою, на якому відображається документ, застосовуються стилі. У медіа-запиту може бути стільки селекторів та стилів, скільки Ви забажаєте.
|
||||
|
||||
Ось приклад медіа-запиту, який повертає контент, якщо ширина пристрою менше або дорівнює `100px`:
|
||||
|
||||
```css
|
||||
@media (max-width: 100px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
а наступний медіа-запит повертає контент, якщо висота пристрою більше або дорівнює `350px`:
|
||||
|
||||
```css
|
||||
@media (min-height: 350px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
Пам'ятайте, що CSS всередині медіа-запиту застосовується тільки в тому випадку, якщо тип медіа відповідає типу пристрою, який використовується.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте медіа-запит таким чином, щоб тег `p` мав `font-size` `10px`, якщо висота пристрою менша або ж дорівнює `800px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити запит `@media` для пристроїв з `height` меншим або рівним `800px`.
|
||||
|
||||
```js
|
||||
const media = new __helpers.CSSHelp(document).getCSSRules('media');
|
||||
assert(media.some(x => x.media?.mediaText?.includes('(max-height: 800px)')));
|
||||
```
|
||||
|
||||
Величина `font-size` вашого елементу `p` повинна становити `10px`, якщо `height` приладу менше або ж дорівнює `800px`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
|
||||
assert(rules?.find(x => x.selectorText === 'p')?.style?.fontSize === "10px");
|
||||
```
|
||||
|
||||
У елемента `p` повинен бути заданий початковий `font-size` в `20px`, якщо `height` пристрою перевищує `800px`.
|
||||
|
||||
```js
|
||||
const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
|
||||
assert(ifPFirst?.style?.fontSize === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
</style>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-height: 800px) {
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b09
|
||||
title: Зробити адаптивне зображення
|
||||
challengeType: 0
|
||||
forumTopicId: 301140
|
||||
dashedName: make-an-image-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Створення адаптивних зображень із CSS насправді дуже просто. Вам просто потрібно додати ці властивості до зображення:
|
||||
|
||||
```css
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
```
|
||||
|
||||
`max-width` в `100%` гарантує, що зображення не буде ширше, аніж контейнер, в якому воно знаходиться, а `height` `auto` збереже вихідне співвідношення сторін зображення.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте правила стилю до класу `responsive-img`, щоб зробити його адаптивним. Він ніколи не повинен бути ширшим за контейнер (в цьому випадку це вікно попереднього перегляду) та зберігати вихідне співвідношення сторін. Після додавання коду, змініть розмір вікна попереднього перегляду, щоб подивитись як ведуть себе ваші зображення.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `responsive-img` повинен мати `max-width` встановлений на `100%`.
|
||||
|
||||
```js
|
||||
assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
|
||||
```
|
||||
|
||||
Клас `responsive-img` повинен мати `height` встановлений на `auto`.
|
||||
|
||||
```js
|
||||
assert(code.match(/height:\s*?auto;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.responsive-img {
|
||||
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.responsive-img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0c
|
||||
title: Створення адаптивної типографії
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/crzN7T8'
|
||||
forumTopicId: 301141
|
||||
dashedName: make-typography-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Замість `em` чи `px` для визначення розмірів тексту, можна скористатися одиницями області перегляду для адаптивної типографії. Одиниці області перегляду, наприклад, відсотки - це відносні одиниці, але вони базуються на різних елементах. Одиниці області перегляду відносяться до розмірів області перегляду (ширини або висоти) пристрою, а відсотки - до розміру елемента батьківського контейнера.
|
||||
|
||||
Чотири різних одиниць області перегляду:
|
||||
|
||||
<ul><li><code>vw</code> (ширина перегляду): <code>10vw</code> складатиме 10% від ширини області перегляду.</li><li><code>vh</code> (висота перегляду): <code>3vh</code> складатиме 3% від висоти області перегляду.</li><li><code>vmin</code> (мінімальний перегляд): <code>70vmin</code> складатиме 70% від найменшого розміру області перегляду (висоти чи ширини).</li><li><code>vmax</code> (максимальний перегляд): <code>100vmax</code> складатиме 100% від найбільшого розміру області перегляду (висоти чи ширини).</li></ul>
|
||||
|
||||
Ось приклад, який встановлює тег `body` на 30% від ширини області перегляду.
|
||||
|
||||
```css
|
||||
body { width: 30vw; }
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Встановіть `width` тегу `h2` на 80% від ширини області перегляду, а `width` абзацу - на 75% від найменшого розміру області перегляду.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш тег `h2` повинен містити `width` 80vw.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш тег `p` повинен містити `width` 75vmin.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<h2>Importantus Ipsum</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
width: 80vw;
|
||||
}
|
||||
p {
|
||||
width: 75vmin;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2>Importantus Ipsum</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
```
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0a
|
||||
title: Використання зображень Retina для дисплеїв із високою роздільною здатністю
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cVZ4Rfp'
|
||||
forumTopicId: 301142
|
||||
dashedName: use-a-retina-image-for-higher-resolution-displays
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Зі збільшенням кількості підключених до Інтернету пристроїв їхні розміри і характеристики змінюються, а дисплеї, які вони використовують, можуть відрізнятися як ззовні і так і в середині. Щільність пікселів - це аспект, який може різнитися на одному пристрої від інших, і цей параметр називається Pixel Per Inch (PPI) або Dots Per Inch (DPI). Найбільш відомим дисплеєм такого типу є "Retina Display" на останніх ноутбуках Apple MacBook Pro, а останнім часом і на комп'ютерах iMac. Через різницю в щільності пікселів між екранами «Retina» і «Non-Retina» деякі зображення, які не були створені з високою роздільною здатністю, можуть виглядати «мозаїчно» при відтворенні і на дисплеї з високою роздільною здатністю.
|
||||
|
||||
Найпростіший спосіб, щоб ваші зображення належним чином відображалися на дисплеях з високою роздільною здатністю, таких як "Retina display" MacBook Pro, - це визначити значення `width` та `height` як половину вихідного файлу. Ось приклад зображення, що використовує тільки половину початкової висоти і ширини:
|
||||
|
||||
```html
|
||||
<style>
|
||||
img { height: 250px; width: 250px; }
|
||||
</style>
|
||||
<img src="coolPic500x500" alt="A most excellent picture">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Встановіть `width` та `height` тегу `img` в половину їх початкових значень. В цьому випадку як вихідна `height`, так і `width` дорівнюватимуть `200px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш тег `img` повинен містити `width` в 100 пікселів.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').width === 100);
|
||||
```
|
||||
|
||||
Ваш тег `img` повинен містити `height` в 100 пікселів.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').height === 100);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
|
||||
```
|
||||
Reference in New Issue
Block a user