opensource/freeCodeCamp
3
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-09-24 23:01:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(i18n,learn): processed translations (#51487)

Browse Source
This commit is contained in:
camperbot
2023-09-05 23:29:50 +05:30
committed by GitHub
parent 396afa8bdc
commit 3fe2d1aec0
244 changed files with 4437 additions and 1163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md
+2 -2
View File
@@ -8,9 +8,9 @@ dashedName: seek-and-destroy
# --description--
سيتم تزويدك بمصفوفة أولية (أول وسيطة في دالة `destroyer`)، تليها وسيطة واحدة أو أكثر. قم بإزالة جميع العناصر من المصفوفة الأولية التي لها نفس قيمة هذه الوسيطات.
You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. قم بإزالة جميع العناصر من المصفوفة الأولية التي لها نفس قيمة هذه الوسيطات.
**ملاحظة:** يجب عليك استخدام كائن `arguments`.
The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object.
# --hints--
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md
+28 -7
View File
@@ -1,30 +1,47 @@
---
id: 615380dff67172357fcf0425
title: الخطوة 7
title: Step 11
challengeType: 0
dashedName: step-7
dashedName: step-11
---
# --description--
سوي نموذجك للصندوق (box model) عن طريق إنشاء منتقي `*` وتعيين خاصية `box-sizing` ألى `border-box`.
Now your images are too big.
Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px`.
Also set the `height` property to `300px` to keep your images a uniform size.
# --hints--
يجب أن يكون لديك منتقي `*`.
You should have a `.gallery img` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
```
يجب أن يكون لمنتقيك `*` خاصية `box-sizing` بقيمة `border-box`.
Your `.gallery img` selector should have a `width` property set to `100%` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
```
Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth, '350px');
```
Your `.gallery img` selector should have a `height` property set to `300px` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height, '300px');
```
# --seed--
## --seed-contents--
```html
@@ -56,6 +73,10 @@ assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'
```
```css
* {
box-sizing: border-box;
}
--fcc-editable-region--
--fcc-editable-region--
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
+39 -14
View File
@@ -1,43 +1,63 @@
---
id: 6153893900438b4643590367
title: الخطوة 9
title: Step 13
challengeType: 0
dashedName: step-9
dashedName: step-13
---
# --description--
أزل margin من عنصرك `body`، وعيّن `font-family` بقيمة `sans-serif`، وأعطيه `background-color` بقيمة `#f5f6f7`.
Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value.
Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values.
Add a `border-bottom` with `4px solid #fdb347` as the value.
# --hints--
يجب أن يكون لديك منتقي `body`.
You should have a `.header` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
```
يجب أن يحتوي منتقي `body` على خاصية `margin` بقيمة `0`.
Your `.header` selector should have a `text-align` property set to `center` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign, 'center');
```
يجب أن يكون لمنتقاك `body` خاصية `font-family` بقيمة `sans-serif`.
Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform, 'uppercase');
```
يجب أن يحتوي منتقى `body` على خاصية `background-color` بقيمة `#f5f6f7`.
Your `.header` selector should have a `padding` property set to `32px` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.padding, '32px');
```
Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor, 'rgb(10, 10, 35)');
```
Your `.header` selector should have a `color` property set to `#fff` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.color, 'rgb(255, 255, 255)');
```
Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom, '4px solid rgb(253, 179, 71)');
```
# --seed--
## --seed-contents--
@@ -74,6 +94,11 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rg
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
background-color: #f5f6f7;
}
--fcc-editable-region--
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
+19 -40
View File
@@ -1,62 +1,32 @@
---
id: 6153897c27f6334716ee5abe
title: الخطوة 10
title: Step 14
challengeType: 0
dashedName: step-10
dashedName: step-14
---
# --description--
حاذي نصك `.header` في منتصف. أجعل النص كبير باستخدام خاصية `text-transform` مع خاصية بقيمة `uppercase`.
Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
أعطاها padding بقيمة `32px` على جميع الجوانب. عيّن قيم ألوان الخلفية إلى `#0a0a23` والنص إلى `#fff`.
To use it, give an element a `display` property of `flex`. This will make the element a <em>flex container</em>. Any direct children of a flex container are called <em>flex items</em>.
Create a `.gallery` selector and make it a flex container.
أضف `border-bottom` بقيمة `4px solid #fdb347`.
# --hints--
يجب أن يكون لديك منتقي `.header`.
You should have a `.gallery` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
يجب أن يكون لمنتقي `.header` الخاص بك خاصية `text-align` بقيمة `center`.
Your `.gallery` selector should have a `display` property set to `flex` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center');
```
يجب أن يكون لمنتقي `.header` الخاص بك خاصية `text-transform` بقيمة `uppercase`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase');
```
يجب أن يحتوي منتقي `.header` على خاصية `padding` بقيمة `32px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px');
```
يجب أن يحتوي منتقى `.header` على خاصية `background-color` بقيمة `#0a0a23`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)');
```
يجب أن يحتوي منتقي `.header` على خاصية `color` بقيمة `#fff`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)');
```
يجب أن يكون لمنتقاك `.header` الخاصية `border-bottom` بقيمة `4px solid #fdb347`.
```js
console.log(new __helpers.CSSHelp(document).getStyle('.header'))
assert(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom === '4px solid rgb(253, 179, 71)');
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.display, 'flex');
```
# --seed--
@@ -102,6 +72,15 @@ body {
background: #f5f6f7;
}
.header {
text-align: center;
text-transform: uppercase;
padding: 32px;
background-color: #0a0a23;
color: #fff;
border-bottom: 4px solid #fdb347;
}
--fcc-editable-region--
--fcc-editable-region--
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153908a366afb4d57185c8d
title: الخطوة 12
title: Step 15
challengeType: 0
dashedName: step-12
dashedName: step-15
---
# --description--
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 615392916d83fa4f02f7e2cf
title: الخطوة 13
title: Step 16
challengeType: 0
dashedName: step-13
dashedName: step-16
---
# --description--
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153938dce8b294ff8f5a4e9
title: الخطوة 14
title: Step 17
challengeType: 0
dashedName: step-14
dashedName: step-17
---
# --description--
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153947986535e5117e60615
title: الخطوة 15
title: Step 18
challengeType: 0
dashedName: step-15
dashedName: step-18
---
# --description--
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 61539e07e7430b528fbffe21
title: الخطوة 16
title: Step 19
challengeType: 0
dashedName: step-16
dashedName: step-19
---
# --description--
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 61539f32a206bd53ec116465
title: الخطوة 17
title: Step 20
challengeType: 0
dashedName: step-17
dashedName: step-20
---
# --description--
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a04847abee57a3a406ac
title: الخطوة 18
title: Step 21
challengeType: 0
dashedName: step-18
dashedName: step-21
---
# --description--
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3485f0b20591d26d2a1
title: الخطوة 19
title: Step 22
challengeType: 0
dashedName: step-19
dashedName: step-22
---
# --description--
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3952facd25a83fe8083
title: الخطوة 20
title: Step 23
challengeType: 0
dashedName: step-20
dashedName: step-23
---
# --description--
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3ebb4f7f05b8401b716
title: الخطوة 21
title: Step 24
challengeType: 0
dashedName: step-21
dashedName: step-24
---
# --description--
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
+24 -12
View File
@@ -1,40 +1,45 @@
---
id: 615f171d05def3218035dc85
title: الخطوة 8
title: Step 12
challengeType: 0
dashedName: step-8
dashedName: step-12
---
# --description--
صورك كبيرة جداً. أنشئ منتقي `.gallery img` لاستهدافهم. اعطيهم جميعا `width` بقيمة `100%` و `max-width` بقيمة `350px` حتى يتقلص حسب الحاجة، لكنهم لا يصبحون أكبر مما ينبغي.
Remove the margin from your body element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value.
قم أيضا بتعيين خاصية `height` إلى `300px` للحفاظ على حجم موحد للصور.
# --hints--
يجب أن يكون لديك منتقي `.gallery img`.
You should have a `body` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
```
يجب أن يحتوي منتقي `.gallery img` على خاصية `width` بقيمة `100%`.
Your `body` selector should have a `margin` property set to 0 as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
```
يجب أن يحتوي منتقي `.gallery img` على خاصية `max-width` بقيمة `350px`.
Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth === '350px');
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
```
يجب أن يحتوي منتقي `.gallery img` على خاصية `height` بقيمة `300px`.
Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300px');
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
```
# --seed--
@@ -77,4 +82,11 @@ assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300
--fcc-editable-region--
--fcc-editable-region--
.gallery img {
width: 100%;
max-width: 350px;
height: 300px;
}
```
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md
+75
View File
@@ -0,0 +1,75 @@
---
id: 6493bc0d99879635209565aa
title: Step 9
challengeType: 0
dashedName: step-9
---
# --description--
The `border-box` sizing model does the opposite of `content-box`. The total width of the element, including padding and border, will be the explicit width set. The content of the element will shrink to make room for the padding and border.
Change the `box-sizing` property to `border-box`. Notice how your blue image borders now fit within your red gallery border.
# --hints--
Your * selector should have a `box-sizing` property set to `border-box` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'border-box');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
</div>
</body>
</html>
```
```css
--fcc-editable-region--
* {
box-sizing: content-box;
}
--fcc-editable-region--
.gallery {
border: 5px solid red;
width: 50%;
}
img {
width: 100%;
border: 5px solid blue;
padding: 5px;
}
```
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md
+83
View File
@@ -0,0 +1,83 @@
---
id: 6494da0daf5df5197963671d
title: Step 8
challengeType: 0
dashedName: step-8
---
# --description--
Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
# --hints--
You should have a `*` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
```
Your `*` selector should have a `box-sizing` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
```
Your `*` selector should have its `box-sizing` property set to `content-box`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
</div>
</body>
</html>
```
```css
--fcc-editable-region--
--fcc-editable-region--
.gallery {
border: 5px solid red;
width: 50%;
}
img {
width: 100%;
border: 5px solid blue;
padding: 5px;
}
```
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md
+126
View File
@@ -0,0 +1,126 @@
---
id: 64dd076a1b33c86d84b4232f
title: Step 7
challengeType: 0
dashedName: step-7
---
# --description--
In order to better visualize how your elements are sized, adding a border can be helpful.
Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`.
Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`.
# --hints--
You should have a `.gallery` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
Your `.gallery` selector should have a `width` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);
```
Your `.gallery` selector should have a `width` property set to `50%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');
```
Your `.gallery` selector should have a `border` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);
```
Your `.gallery` selector should have a `border` property set to `5px solid red`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');
```
You should have an `img` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img'));
```
Your `img` selector should have a `width` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);
```
Your `img` selector should have a `width` property set to `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');
```
Your `img` selector should have a `padding` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);
```
Your `img` selector should have a `padding` property set to `5px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');
```
Your `img` selector should have a `border` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);
```
Your `img` selector should have a `border` property set to `5px solid blue`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
</div>
</body>
</html>
```
```css
--fcc-editable-region--
--fcc-editable-region--
```
curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md
+79
View File
@@ -0,0 +1,79 @@
---
id: 64dd136e4e8b0894f9c70d86
title: Step 10
challengeType: 0
dashedName: step-10
---
# --description--
Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes.
Remove your `.gallery` and `img` selectors, and all rules within.
# --hints--
You should not have a `.gallery` selector.
```js
assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
You should not have an `img` selector.
```js
assert.notExists(new __helpers.CSSHelp(document).getStyle('img'));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
</div>
</body>
</html>
```
```css
* {
box-sizing: border-box;
}
--fcc-editable-region--
.gallery {
border: 5px solid red;
width: 50%;
}
img {
width: 100%;
border: 5px solid blue;
padding: 5px;
}
--fcc-editable-region--
```
curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md
+2 -2
View File
@@ -8,9 +8,9 @@ dashedName: seek-and-destroy
# --description--
你將獲得一個初始數組（`destroyer` 函數中的第一個參數），後跟一個或多個參數。 從初始數組中移除所有與後續參數相等的元素。
You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. 從初始數組中移除所有與後續參數相等的元素。
**注意：** 你可以使用 `arguments` 對象。
The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object.
# --hints--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md
+28 -7
View File
@@ -1,30 +1,47 @@
---
id: 615380dff67172357fcf0425
title: 步驟 7
title: Step 11
challengeType: 0
dashedName: step-7
dashedName: step-11
---
# --description--
通過創建 `*` 選擇器將 `box-sizing` 屬性設置爲 `border-box` 來規範盒模型。
Now your images are too big.
Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px`.
Also set the `height` property to `300px` to keep your images a uniform size.
# --hints--
你應該有一個 `*` 選擇器。
You should have a `.gallery img` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
```
你的 `*` 選擇器應將 `box-sizing` 屬性設置爲 `border-box`。
Your `.gallery img` selector should have a `width` property set to `100%` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
```
Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth, '350px');
```
Your `.gallery img` selector should have a `height` property set to `300px` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height, '300px');
```
# --seed--
## --seed-contents--
```html
@@ -56,6 +73,10 @@ assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'
```
```css
* {
box-sizing: border-box;
}
--fcc-editable-region--
--fcc-editable-region--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
+39 -14
View File
@@ -1,43 +1,63 @@
---
id: 6153893900438b4643590367
title: 步驟 9
title: Step 13
challengeType: 0
dashedName: step-9
dashedName: step-13
---
# --description--
從 `body` 元素中刪除外邊距，將 `font-family` 設置爲 `sans-serif`，並將 `background-color` 設置爲 `#f5f6f7`。
Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value.
Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values.
Add a `border-bottom` with `4px solid #fdb347` as the value.
# --hints--
你應該有一個 `body` 選擇器。
You should have a `.header` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
```
`body` 選擇器的 `margin` 屬性應該設置爲 `0`。
Your `.header` selector should have a `text-align` property set to `center` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign, 'center');
```
`body` 選擇器的 `font-family` 屬性應該設置爲 `sans-serif`。
Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform, 'uppercase');
```
`body` 選擇器的 `background-color` 屬性應該設置爲 `#f5f6f7`。
Your `.header` selector should have a `padding` property set to `32px` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.padding, '32px');
```
Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor, 'rgb(10, 10, 35)');
```
Your `.header` selector should have a `color` property set to `#fff` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.color, 'rgb(255, 255, 255)');
```
Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom, '4px solid rgb(253, 179, 71)');
```
# --seed--
## --seed-contents--
@@ -74,6 +94,11 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rg
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
background-color: #f5f6f7;
}
--fcc-editable-region--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
+19 -40
View File
@@ -1,62 +1,32 @@
---
id: 6153897c27f6334716ee5abe
title: 步驟 10
title: Step 14
challengeType: 0
dashedName: step-10
dashedName: step-14
---
# --description--
將 `.header` 文本居中對齊。 使用 `text-transform` 屬性的 `uppercase` 值將其文本大寫顯示。
Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
將其所有方向的內邊距都設置爲 `32px`。 並將背景設置爲 `#0a0a23`，文本顏色設置爲 `#fff` 。
To use it, give an element a `display` property of `flex`. This will make the element a <em>flex container</em>. Any direct children of a flex container are called <em>flex items</em>.
Create a `.gallery` selector and make it a flex container.
並添加 `border-bottom`，使其值爲 `4px solid #fdb347`。
# --hints--
應該使用 `.header` 選擇器。
You should have a `.gallery` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
`.header` 選擇器應該有一個值爲 `center` 的 `text-align` 屬性。
Your `.gallery` selector should have a `display` property set to `flex` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center');
```
`.header` 選擇器應該有一個值爲 `uppercase` 的 `text-transform` 屬性。
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase');
```
`.header` 選擇器應該有一個值爲 `32px` 的 `padding` 屬性。
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px');
```
`.header` 選擇器應該有一個值爲 `#0a0a23` 的 `background-color` 屬性。
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)');
```
`.header` 選擇器應該有一個值爲 `#fff` 的 `color` 屬性。
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)');
```
`.header` 選擇器應該有一個值爲 `4px solid #fdb347` 的 `border-bottom` 屬性。
```js
console.log(new __helpers.CSSHelp(document).getStyle('.header'))
assert(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom === '4px solid rgb(253, 179, 71)');
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.display, 'flex');
```
# --seed--
@@ -102,6 +72,15 @@ body {
background: #f5f6f7;
}
.header {
text-align: center;
text-transform: uppercase;
padding: 32px;
background-color: #0a0a23;
color: #fff;
border-bottom: 4px solid #fdb347;
}
--fcc-editable-region--
--fcc-editable-region--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 615389bd81347947ea7ba896
title: 步驟 11
title: Step 15
challengeType: 0
dashedName: step-11
dashedName: step-15
---
# --description--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153908a366afb4d57185c8d
title: 步驟 12
title: Step 15
challengeType: 0
dashedName: step-12
dashedName: step-15
---
# --description--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 615392916d83fa4f02f7e2cf
title: 步驟 13
title: Step 16
challengeType: 0
dashedName: step-13
dashedName: step-16
---
# --description--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153938dce8b294ff8f5a4e9
title: 步驟 14
title: Step 17
challengeType: 0
dashedName: step-14
dashedName: step-17
---
# --description--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153947986535e5117e60615
title: 步驟 15
title: Step 18
challengeType: 0
dashedName: step-15
dashedName: step-18
---
# --description--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 61539e07e7430b528fbffe21
title: 步驟 16
title: Step 19
challengeType: 0
dashedName: step-16
dashedName: step-19
---
# --description--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 61539f32a206bd53ec116465
title: 步驟 17
title: Step 20
challengeType: 0
dashedName: step-17
dashedName: step-20
---
# --description--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a04847abee57a3a406ac
title: 步驟 18
title: Step 21
challengeType: 0
dashedName: step-18
dashedName: step-21
---
# --description--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3485f0b20591d26d2a1
title: 步驟 19
title: Step 22
challengeType: 0
dashedName: step-19
dashedName: step-22
---
# --description--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3952facd25a83fe8083
title: 步驟 20
title: Step 23
challengeType: 0
dashedName: step-20
dashedName: step-23
---
# --description--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3ebb4f7f05b8401b716
title: 步驟 21
title: Step 24
challengeType: 0
dashedName: step-21
dashedName: step-24
---
# --description--
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
+24 -12
View File
@@ -1,40 +1,45 @@
---
id: 615f171d05def3218035dc85
title: 步驟 8
title: Step 12
challengeType: 0
dashedName: step-8
dashedName: step-12
---
# --description--
你的圖像目前太大，你將無法看到你的 CSS 變化。 創建一個 `.gallery img` 選擇器來定位你的圖像。 將它們的 `width` 屬性設置爲 `100%`，`max-width` 設置爲 `350px`，以便它們適當調整，不至於太大。
Remove the margin from your body element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value.
並將 `height` 屬性設置爲 `300px`，以保持圖像大小一致。
# --hints--
你應該有一個 `.gallery img` 選擇器。
You should have a `body` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
```
你的 `.gallery img` 選擇器應該將 `width` 屬性設置爲 `100%`。
Your `body` selector should have a `margin` property set to 0 as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
```
應將 `.gallery img` 選擇器的 `max-width` 屬性設置爲 `350px`。
Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth === '350px');
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
```
你的 `.gallery img` 選擇器應該將 `height` 屬性設置爲 `300px`。
Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300px');
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
```
# --seed--
@@ -77,4 +82,11 @@ assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300
--fcc-editable-region--
--fcc-editable-region--
.gallery img {
width: 100%;
max-width: 350px;
height: 300px;
}
```
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md
+75
View File
@@ -0,0 +1,75 @@
---
id: 6493bc0d99879635209565aa
title: Step 9
challengeType: 0
dashedName: step-9
---
# --description--
The `border-box` sizing model does the opposite of `content-box`. The total width of the element, including padding and border, will be the explicit width set. The content of the element will shrink to make room for the padding and border.
Change the `box-sizing` property to `border-box`. Notice how your blue image borders now fit within your red gallery border.
# --hints--
Your * selector should have a `box-sizing` property set to `border-box` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'border-box');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
</div>
</body>
</html>
```
```css
--fcc-editable-region--
* {
box-sizing: content-box;
}
--fcc-editable-region--
.gallery {
border: 5px solid red;
width: 50%;
}
img {
width: 100%;
border: 5px solid blue;
padding: 5px;
}
```
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md
+83
View File
@@ -0,0 +1,83 @@
---
id: 6494da0daf5df5197963671d
title: Step 8
challengeType: 0
dashedName: step-8
---
# --description--
Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
# --hints--
You should have a `*` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
```
Your `*` selector should have a `box-sizing` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
```
Your `*` selector should have its `box-sizing` property set to `content-box`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
</div>
</body>
</html>
```
```css
--fcc-editable-region--
--fcc-editable-region--
.gallery {
border: 5px solid red;
width: 50%;
}
img {
width: 100%;
border: 5px solid blue;
padding: 5px;
}
```
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md
+126
View File
@@ -0,0 +1,126 @@
---
id: 64dd076a1b33c86d84b4232f
title: Step 7
challengeType: 0
dashedName: step-7
---
# --description--
In order to better visualize how your elements are sized, adding a border can be helpful.
Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`.
Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`.
# --hints--
You should have a `.gallery` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
Your `.gallery` selector should have a `width` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);
```
Your `.gallery` selector should have a `width` property set to `50%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');
```
Your `.gallery` selector should have a `border` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);
```
Your `.gallery` selector should have a `border` property set to `5px solid red`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');
```
You should have an `img` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img'));
```
Your `img` selector should have a `width` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);
```
Your `img` selector should have a `width` property set to `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');
```
Your `img` selector should have a `padding` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);
```
Your `img` selector should have a `padding` property set to `5px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');
```
Your `img` selector should have a `border` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);
```
Your `img` selector should have a `border` property set to `5px solid blue`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
</div>
</body>
</html>
```
```css
--fcc-editable-region--
--fcc-editable-region--
```
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md
+79
View File
@@ -0,0 +1,79 @@
---
id: 64dd136e4e8b0894f9c70d86
title: Step 10
challengeType: 0
dashedName: step-10
---
# --description--
Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes.
Remove your `.gallery` and `img` selectors, and all rules within.
# --hints--
You should not have a `.gallery` selector.
```js
assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
You should not have an `img` selector.
```js
assert.notExists(new __helpers.CSSHelp(document).getStyle('img'));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
</div>
</body>
</html>
```
```css
* {
box-sizing: border-box;
}
--fcc-editable-region--
.gallery {
border: 5px solid red;
width: 50%;
}
img {
width: 100%;
border: 5px solid blue;
padding: 5px;
}
--fcc-editable-region--
```
curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md
+2 -2
View File
@@ -8,9 +8,9 @@ dashedName: seek-and-destroy
# --description--
你将获得一个初始数组（`destroyer` 函数中的第一个参数），后跟一个或多个参数。 从初始数组中移除所有与后续参数相等的元素。
You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. 从初始数组中移除所有与后续参数相等的元素。
**注意：** 你可以使用 `arguments` 对象。
The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object.
# --hints--
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md
+1 -1
View File
@@ -1,6 +1,6 @@
---
id: 61537485c4f2a624f18d7794
title: Step 1
title: 步骤 1
challengeType: 0
dashedName: step-1
---
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md
+1 -1
View File
@@ -1,6 +1,6 @@
---
id: 61537a8054753e2f1f2a1574
title: Step 2
title: 步骤 2
challengeType: 0
dashedName: step-2
---
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md
+1 -1
View File
@@ -1,6 +1,6 @@
---
id: 61537bb9b1a29430ac15ad38
title: Step 3
title: 步骤 3
challengeType: 0
dashedName: step-3
---
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md
+1 -1
View File
@@ -1,6 +1,6 @@
---
id: 61537c5f81f0cf325b4a854c
title: Step 4
title: 步骤 4
challengeType: 0
dashedName: step-4
---
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md
+1 -1
View File
@@ -1,6 +1,6 @@
---
id: 61537c9eecea6a335db6da79
title: Step 5
title: 步骤 5
challengeType: 0
dashedName: step-5
---
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
+1 -1
View File
@@ -1,6 +1,6 @@
---
id: 61537d86bdc3dd343688fceb
title: Step 6
title: 步骤 6
challengeType: 0
dashedName: step-6
---
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md
+26 -5
View File
@@ -7,24 +7,41 @@ dashedName: step-11
# --description--
通过创建 `*` 选择器将 `box-sizing` 属性设置为 `border-box` 来规范盒模型。
Now your images are too big.
Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px`.
Also set the `height` property to `300px` to keep your images a uniform size.
# --hints--
你应该有一个 `*` 选择器。
You should have a `.gallery img` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
```
你的 `*` 选择器应将 `box-sizing` 属性设置为 `border-box`。
Your `.gallery img` selector should have a `width` property set to `100%` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
```
Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth, '350px');
```
Your `.gallery img` selector should have a `height` property set to `300px` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height, '300px');
```
# --seed--
## --seed-contents--
```html
@@ -56,6 +73,10 @@ assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'
```
```css
* {
box-sizing: border-box;
}
--fcc-editable-region--
--fcc-editable-region--
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
+37 -12
View File
@@ -7,37 +7,57 @@ dashedName: step-13
# --description--
从 `body` 元素中删除外边距，将 `font-family` 设置为 `sans-serif`，并将 `background-color` 设置为 `#f5f6f7`。
Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value.
Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values.
Add a `border-bottom` with `4px solid #fdb347` as the value.
# --hints--
你应该有一个 `body` 选择器。
You should have a `.header` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
```
`body` 选择器的 `margin` 属性应该设置为 `0`。
Your `.header` selector should have a `text-align` property set to `center` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign, 'center');
```
`body` 选择器的 `font-family` 属性应该设置为 `sans-serif`。
Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform, 'uppercase');
```
`body` 选择器的 `background-color` 属性应该设置为 `#f5f6f7`。
Your `.header` selector should have a `padding` property set to `32px` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.padding, '32px');
```
Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor, 'rgb(10, 10, 35)');
```
Your `.header` selector should have a `color` property set to `#fff` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.color, 'rgb(255, 255, 255)');
```
Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom, '4px solid rgb(253, 179, 71)');
```
# --seed--
## --seed-contents--
@@ -74,6 +94,11 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rg
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
background-color: #f5f6f7;
}
--fcc-editable-region--
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
+17 -38
View File
@@ -7,56 +7,26 @@ dashedName: step-14
# --description--
将 `.header` 文本居中对齐。 使用 `text-transform` 属性的 `uppercase` 值将其文本大写显示。
Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
将其所有方向的内边距都设置为 `32px`。 并将背景设置为 `#0a0a23`，文本颜色设置为 `#fff` 。
To use it, give an element a `display` property of `flex`. This will make the element a <em>flex container</em>. Any direct children of a flex container are called <em>flex items</em>.
Create a `.gallery` selector and make it a flex container.
并添加 `border-bottom`，使其值为 `4px solid #fdb347`。
# --hints--
应该使用 `.header` 选择器。
You should have a `.gallery` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
`.header` 选择器应该有一个值为 `center` 的 `text-align` 属性。
Your `.gallery` selector should have a `display` property set to `flex` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center');
```
`.header` 选择器应该有一个值为 `uppercase` 的 `text-transform` 属性。
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase');
```
`.header` 选择器应该有一个值为 `32px` 的 `padding` 属性。
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px');
```
`.header` 选择器应该有一个值为 `#0a0a23` 的 `background-color` 属性。
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)');
```
`.header` 选择器应该有一个值为 `#fff` 的 `color` 属性。
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)');
```
`.header` 选择器应该有一个值为 `4px solid #fdb347` 的 `border-bottom` 属性。
```js
console.log(new __helpers.CSSHelp(document).getStyle('.header'))
assert(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom === '4px solid rgb(253, 179, 71)');
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.display, 'flex');
```
# --seed--
@@ -102,6 +72,15 @@ body {
background: #f5f6f7;
}
.header {
text-align: center;
text-transform: uppercase;
padding: 32px;
background-color: #0a0a23;
color: #fff;
border-bottom: 4px solid #fdb347;
}
--fcc-editable-region--
--fcc-editable-region--
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153908a366afb4d57185c8d
title: Step 16
title: Step 15
challengeType: 0
dashedName: step-16
dashedName: step-15
---
# --description--
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 615392916d83fa4f02f7e2cf
title: Step 17
title: Step 16
challengeType: 0
dashedName: step-17
dashedName: step-16
---
# --description--
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153938dce8b294ff8f5a4e9
title: Step 18
title: Step 17
challengeType: 0
dashedName: step-18
dashedName: step-17
---
# --description--
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153947986535e5117e60615
title: Step 19
title: Step 18
challengeType: 0
dashedName: step-19
dashedName: step-18
---
# --description--
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 61539e07e7430b528fbffe21
title: Step 20
title: Step 19
challengeType: 0
dashedName: step-20
dashedName: step-19
---
# --description--
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 61539f32a206bd53ec116465
title: Step 21
title: Step 20
challengeType: 0
dashedName: step-21
dashedName: step-20
---
# --description--
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a04847abee57a3a406ac
title: Step 22
title: Step 21
challengeType: 0
dashedName: step-22
dashedName: step-21
---
# --description--
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3485f0b20591d26d2a1
title: Step 23
title: Step 22
challengeType: 0
dashedName: step-23
dashedName: step-22
---
# --description--
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3952facd25a83fe8083
title: Step 24
title: Step 23
challengeType: 0
dashedName: step-24
dashedName: step-23
---
# --description--
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3ebb4f7f05b8401b716
title: Step 25
title: Step 24
challengeType: 0
dashedName: step-25
dashedName: step-24
---
# --description--
curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
+22 -10
View File
@@ -7,34 +7,39 @@ dashedName: step-12
# --description--
你的图像目前太大，你将无法看到你的 CSS 变化。 创建一个 `.gallery img` 选择器来定位你的图像。 将它们的 `width` 属性设置为 `100%`，`max-width` 设置为 `350px`，以便它们适当调整，不至于太大。
Remove the margin from your body element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value.
并将 `height` 属性设置为 `300px`，以保持图像大小一致。
# --hints--
你应该有一个 `.gallery img` 选择器。
You should have a `body` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
```
你的 `.gallery img` 选择器应该将 `width` 属性设置为 `100%`。
Your `body` selector should have a `margin` property set to 0 as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
```
应将 `.gallery img` 选择器的 `max-width` 属性设置为 `350px`。
Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth === '350px');
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
```
你的 `.gallery img` 选择器应该将 `height` 属性设置为 `300px`。
Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300px');
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
```
# --seed--
@@ -77,4 +82,11 @@ assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300
--fcc-editable-region--
--fcc-editable-region--
.gallery img {
width: 100%;
max-width: 350px;
height: 300px;
}
```
curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md
+2 -2
View File
@@ -8,9 +8,9 @@ dashedName: seek-and-destroy
# --description--
Se proporcionará un arreglo inicial (el primer argumento en la función `destroyer`), seguido de uno o más argumentos. Elimina todos los elementos del arreglo inicial que tengan el mismo valor que estos argumentos.
You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. Elimina todos los elementos del arreglo inicial que tengan el mismo valor que estos argumentos.
**Nota:** Tienes que utilizar el objeto `arguments`.
The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object.
# --hints--
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md
+1 -1
View File
@@ -1,6 +1,6 @@
---
id: 61537485c4f2a624f18d7794
title: Step 1
title: Paso 1
challengeType: 0
dashedName: step-1
---
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md
+1 -1
View File
@@ -1,6 +1,6 @@
---
id: 61537a8054753e2f1f2a1574
title: Step 2
title: Paso 2
challengeType: 0
dashedName: step-2
---
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md
+1 -1
View File
@@ -1,6 +1,6 @@
---
id: 61537bb9b1a29430ac15ad38
title: Step 3
title: Paso 3
challengeType: 0
dashedName: step-3
---
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md
+1 -1
View File
@@ -1,6 +1,6 @@
---
id: 61537c5f81f0cf325b4a854c
title: Step 4
title: Paso 4
challengeType: 0
dashedName: step-4
---
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md
+1 -1
View File
@@ -1,6 +1,6 @@
---
id: 61537c9eecea6a335db6da79
title: Step 5
title: Paso 5
challengeType: 0
dashedName: step-5
---
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
+1 -1
View File
@@ -1,6 +1,6 @@
---
id: 61537d86bdc3dd343688fceb
title: Step 6
title: Paso 6
challengeType: 0
dashedName: step-6
---
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md
+26 -5
View File
@@ -7,24 +7,41 @@ dashedName: step-11
# --description--
Normaliza tu modelo de caja creando un selector `*` y estableciendo la propiedad `box-sizing` con el valor `border-box`.
Now your images are too big.
Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px`.
Also set the `height` property to `300px` to keep your images a uniform size.
# --hints--
Debes tener un selector `*`.
You should have a `.gallery img` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
```
Tu selector `*` debe tener una propiedad `box-sizing` establecida en `border-box`.
Your `.gallery img` selector should have a `width` property set to `100%` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
```
Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth, '350px');
```
Your `.gallery img` selector should have a `height` property set to `300px` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height, '300px');
```
# --seed--
## --seed-contents--
```html
@@ -56,6 +73,10 @@ assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'
```
```css
* {
box-sizing: border-box;
}
--fcc-editable-region--
--fcc-editable-region--
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
+37 -12
View File
@@ -7,37 +7,57 @@ dashedName: step-13
# --description--
Elimina el margen de tu elemento `body`, establece `font-family` a `sans-serif`, y dale un `background-color` de `#f5f6f7`.
Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value.
Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values.
Add a `border-bottom` with `4px solid #fdb347` as the value.
# --hints--
Debes tener un selector `body`.
You should have a `.header` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
```
Tu selector `body` debe tener una propiedad `margin` establecida en `0`.
Your `.header` selector should have a `text-align` property set to `center` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign, 'center');
```
Tu selector `body` debe tener una propiedad `font-family` establecida en `sans-serif`.
Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform, 'uppercase');
```
Tu selector `body` debe tener una propiedad `background-color` establecida en `#f5f6f7`.
Your `.header` selector should have a `padding` property set to `32px` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.padding, '32px');
```
Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor, 'rgb(10, 10, 35)');
```
Your `.header` selector should have a `color` property set to `#fff` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.color, 'rgb(255, 255, 255)');
```
Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom, '4px solid rgb(253, 179, 71)');
```
# --seed--
## --seed-contents--
@@ -74,6 +94,11 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rg
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
background-color: #f5f6f7;
}
--fcc-editable-region--
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
+17 -38
View File
@@ -7,56 +7,26 @@ dashedName: step-14
# --description--
Alinea tu texto `.header` en el centro. Pone el texto en mayúsculas usando la propiedad `text-transform` con `uppercase` como valor.
Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
Dale un relleno de `32px` en todos los lados. Establece el fondo en `#0a0a23` y el texto en `#fff` como valores de color.
To use it, give an element a `display` property of `flex`. This will make the element a <em>flex container</em>. Any direct children of a flex container are called <em>flex items</em>.
Create a `.gallery` selector and make it a flex container.
Añade un `border-bottom` con `4px solid #fdb347` como valor.
# --hints--
Debes tener un selector `.header`.
You should have a `.gallery` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
Tu selector `.header` debe tener una propiedad `text-align` establecida en `center`.
Your `.gallery` selector should have a `display` property set to `flex` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center');
```
Tu selector `.header` debe tener una propiedad `text-transform` establecida en `uppercase`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase');
```
Tu selector `.header` debe tener una propiedad `padding` establecida en `32px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px');
```
Tu selector `.header` debe tener una propiedad `background-color` establecida en `#0a0a23`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)');
```
Tu selector `.header` debe tener una propiedad `color` establecida en `#fff`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)');
```
Tu selector `.header` debe tener una propiedad `border-bottom` establecida en `4px solid #fdb347`.
```js
console.log(new __helpers.CSSHelp(document).getStyle('.header'))
assert(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom === '4px solid rgb(253, 179, 71)');
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.display, 'flex');
```
# --seed--
@@ -102,6 +72,15 @@ body {
background: #f5f6f7;
}
.header {
text-align: center;
text-transform: uppercase;
padding: 32px;
background-color: #0a0a23;
color: #fff;
border-bottom: 4px solid #fdb347;
}
--fcc-editable-region--
--fcc-editable-region--
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153908a366afb4d57185c8d
title: Step 16
title: Step 15
challengeType: 0
dashedName: step-16
dashedName: step-15
---
# --description--
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 615392916d83fa4f02f7e2cf
title: Step 17
title: Step 16
challengeType: 0
dashedName: step-17
dashedName: step-16
---
# --description--
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153938dce8b294ff8f5a4e9
title: Step 18
title: Step 17
challengeType: 0
dashedName: step-18
dashedName: step-17
---
# --description--
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153947986535e5117e60615
title: Step 19
title: Step 18
challengeType: 0
dashedName: step-19
dashedName: step-18
---
# --description--
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 61539e07e7430b528fbffe21
title: Step 20
title: Step 19
challengeType: 0
dashedName: step-20
dashedName: step-19
---
# --description--
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 61539f32a206bd53ec116465
title: Step 21
title: Step 20
challengeType: 0
dashedName: step-21
dashedName: step-20
---
# --description--
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a04847abee57a3a406ac
title: Step 22
title: Step 21
challengeType: 0
dashedName: step-22
dashedName: step-21
---
# --description--
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3485f0b20591d26d2a1
title: Step 23
title: Step 22
challengeType: 0
dashedName: step-23
dashedName: step-22
---
# --description--
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3952facd25a83fe8083
title: Step 24
title: Step 23
challengeType: 0
dashedName: step-24
dashedName: step-23
---
# --description--
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3ebb4f7f05b8401b716
title: Step 25
title: Step 24
challengeType: 0
dashedName: step-25
dashedName: step-24
---
# --description--
curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
+22 -10
View File
@@ -7,34 +7,39 @@ dashedName: step-12
# --description--
Tus imágenes son demasiado grandes. Crea un selector `.gallery img` que las apunte. Dale a todas un `width` de `100%` y un `max-width` de `350px` para que se achiquen lo necesario, sin que se vuelvan demasiado grandes.
Remove the margin from your body element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value.
También establece la propiedad `height` en `300px` para mantenes las imágenes en un tamaño uniforme.
# --hints--
Debes tener un selector `.gallery img`.
You should have a `body` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
```
Tu selector `.gallery img` debe tener la propiedad `width` con un valor de `100%`.
Your `body` selector should have a `margin` property set to 0 as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
```
Tu selector `.gallery img` debe tener la propiedad `max-width` con un valor de `350px`.
Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth === '350px');
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
```
Tu selector `.gallery img` debe tener la propiedad `height` con un valor de `300px`.
Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300px');
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
```
# --seed--
@@ -77,4 +82,11 @@ assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300
--fcc-editable-region--
--fcc-editable-region--
.gallery img {
width: 100%;
max-width: 350px;
height: 300px;
}
```
curriculum/challenges/german/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md
+2 -2
View File
@@ -8,9 +8,9 @@ dashedName: seek-and-destroy
# --description--
Dir wird ein Ausgangsarray (das erste Argument in der `destroyer`-Funktion) zur Verfügung gestellt, gefolgt von einem oder mehreren Argumenten. Entferne alle Elemente aus dem Ausgangsarray, die den gleichen Wert wie diese Argumente haben.
You will be provided with an initial array as the first argument to the `destroyer` function, followed by one or more arguments. Entferne alle Elemente aus dem Ausgangsarray, die den gleichen Wert wie diese Argumente haben.
**Hinweis:** Du musst das `arguments`-Objekt verwenden.
The function must accept an indeterminate number of arguments, also known as a variadic function. You can access the additional arguments by adding a rest parameter to the function definition or using the `arguments` object.
# --hints--
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md
+28 -7
View File
@@ -1,30 +1,47 @@
---
id: 615380dff67172357fcf0425
title: Schritt 7
title: Step 11
challengeType: 0
dashedName: step-7
dashedName: step-11
---
# --description--
Normalisiere dein Box-Modell, indem du einen `*`-Selektor erstellst und die `box-sizing`-Eigenschaft auf den Wert `border-box` einstellst.
Now your images are too big.
Create a `.gallery img` selector to target them. Give them all a `width` of `100%` and a `max-width` of `350px`.
Also set the `height` property to `300px` to keep your images a uniform size.
# --hints--
Du solltest einen `*`-Selektor haben.
You should have a `.gallery img` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
```
Dein `*`-Selektor sollte eine `box-sizing`-Eigenschaft von `border-box` als Wert haben.
Your `.gallery img` selector should have a `width` property set to `100%` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
```
Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth, '350px');
```
Your `.gallery img` selector should have a `height` property set to `300px` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height, '300px');
```
# --seed--
## --seed-contents--
```html
@@ -56,6 +73,10 @@ assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'
```
```css
* {
box-sizing: border-box;
}
--fcc-editable-region--
--fcc-editable-region--
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
+39 -14
View File
@@ -1,43 +1,63 @@
---
id: 6153893900438b4643590367
title: Schritt 9
title: Step 13
challengeType: 0
dashedName: step-9
dashedName: step-13
---
# --description--
Entferne den Rand aus deinem `body`-Element, setze die `font-family` auf `sans-serif` und gib ihm die `background-color` mit dem Wert `#f5f6f7`.
Align your `.header` text in the center. Make the text uppercase using the `text-transform` property with `uppercase` as the value.
Give it a padding of `32px` on all sides. Set the background to `#0a0a23` and the text to `#fff` as the color values.
Add a `border-bottom` with `4px solid #fdb347` as the value.
# --hints--
Du solltest einen `body`-Selektor haben.
You should have a `.header` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
```
Dein `body`-Selektor sollte eine `margin`-Eigenschaft mit dem Wert `0` haben.
Your `.header` selector should have a `text-align` property set to `center` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign, 'center');
```
Dein `body`-Selektor sollte eine `font-family`-Eigenschaft mit dem Wert `sans-serif` haben.
Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform, 'uppercase');
```
Dein `body`-Selektor sollte eine `background-color`-Eigenschaft mit dem Wert `#f5f6f7` haben.
Your `.header` selector should have a `padding` property set to `32px` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.padding, '32px');
```
Your `.header` selector should have a `background-color` property set to `#0a0a23` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor, 'rgb(10, 10, 35)');
```
Your `.header` selector should have a `color` property set to `#fff` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.color, 'rgb(255, 255, 255)');
```
Your `.header` selector should have a `border-bottom` property set to `4px solid #fdb347` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom, '4px solid rgb(253, 179, 71)');
```
# --seed--
## --seed-contents--
@@ -74,6 +94,11 @@ assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rg
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
background-color: #f5f6f7;
}
--fcc-editable-region--
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
+19 -40
View File
@@ -1,62 +1,32 @@
---
id: 6153897c27f6334716ee5abe
title: Schritt 10
title: Step 14
challengeType: 0
dashedName: step-10
dashedName: step-14
---
# --description--
Richte deinen `.header`-Text mittig aus. Schreibe den Text in Großbuchstaben unter der Verwendung der `text-transform`-Eigenschaft mit dem Wert `uppercase`.
Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
Gib ihm auf allen Seiten ein Padding von `32px`. Setze die Farbwerte des Hintergrundes auf `#0a0a23` und des Textes auf `#fff`.
To use it, give an element a `display` property of `flex`. This will make the element a <em>flex container</em>. Any direct children of a flex container are called <em>flex items</em>.
Create a `.gallery` selector and make it a flex container.
Füge einen `border-bottom` mit `4px solid #fdb347` als Wert hinzu.
# --hints--
Du solltest einen `.header`-Selektor haben.
You should have a `.gallery` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
Dein `.header`-Selektor sollte eine `text-align`-Eigenschaft mit dem Wert `center` haben.
Your `.gallery` selector should have a `display` property set to `flex` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center');
```
Dein `.header`-Selektor sollte eine `text-transform`-Eigenschaft mit dem Wert `uppercase` haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase');
```
Dein `.header`-Selektor sollte eine `padding`-Eigenschaft mit dem Wert `32px` haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px');
```
Dein `.header`-Selektor sollte eine `background-color`-Eigenschaft mit `#0a0a23` als Wert haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)');
```
Dein `.header`-Selektor sollte eine `color`-Eigenschaft mit `#fff` als Wert haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)');
```
Dein `.header`-Selektor sollte eine `border-bottom`-Eigenschaft mit `4px solid #fdb347` als Wert haben.
```js
console.log(new __helpers.CSSHelp(document).getStyle('.header'))
assert(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom === '4px solid rgb(253, 179, 71)');
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.display, 'flex');
```
# --seed--
@@ -102,6 +72,15 @@ body {
background: #f5f6f7;
}
.header {
text-align: center;
text-transform: uppercase;
padding: 32px;
background-color: #0a0a23;
color: #fff;
border-bottom: 4px solid #fdb347;
}
--fcc-editable-region--
--fcc-editable-region--
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153908a366afb4d57185c8d
title: Schritt 12
title: Step 15
challengeType: 0
dashedName: step-12
dashedName: step-15
---
# --description--
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 615392916d83fa4f02f7e2cf
title: Schritt 13
title: Step 16
challengeType: 0
dashedName: step-13
dashedName: step-16
---
# --description--
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153938dce8b294ff8f5a4e9
title: Schritt 14
title: Step 17
challengeType: 0
dashedName: step-14
dashedName: step-17
---
# --description--
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153947986535e5117e60615
title: Schritt 15
title: Step 18
challengeType: 0
dashedName: step-15
dashedName: step-18
---
# --description--
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 61539e07e7430b528fbffe21
title: Schritt 16
title: Step 19
challengeType: 0
dashedName: step-16
dashedName: step-19
---
# --description--
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 61539f32a206bd53ec116465
title: Schritt 17
title: Step 20
challengeType: 0
dashedName: step-17
dashedName: step-20
---
# --description--
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a04847abee57a3a406ac
title: Schritt 18
title: Step 21
challengeType: 0
dashedName: step-18
dashedName: step-21
---
# --description--
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3485f0b20591d26d2a1
title: Schritt 19
title: Step 22
challengeType: 0
dashedName: step-19
dashedName: step-22
---
# --description--
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3952facd25a83fe8083
title: Schritt 20
title: Step 23
challengeType: 0
dashedName: step-20
dashedName: step-23
---
# --description--
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 6153a3ebb4f7f05b8401b716
title: Schritt 21
title: Step 24
challengeType: 0
dashedName: step-21
dashedName: step-24
---
# --description--
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
+24 -12
View File
@@ -1,40 +1,45 @@
---
id: 615f171d05def3218035dc85
title: Schritt 8
title: Step 12
challengeType: 0
dashedName: step-8
dashedName: step-12
---
# --description--
Deine Bilder sind zu groß. Erstelle einen `.gallery img`-Selektor, um sie zu bestimmen. Gib ihnen allen eine `width` von `100%` und eine `max-width` von `350px`, so dass sie bei Bedarf schrumpfen, aber nicht zu groß werden.
Remove the margin from your body element, set the `font-family` to `sans-serif`, and give it a `background-color` of `#f5f6f7` as the value.
Setze ebenfalls die `height`-Eigenschaft auf `300px`, damit die Bilder eine einheitliche Größe haben.
# --hints--
Du solltest einen `.gallery img`-Selektor haben.
You should have a `body` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
```
Dein `.gallery img`-Selektor sollte eine `width`-Eigenschaft mit `100%` als Wert haben.
Your `body` selector should have a `margin` property set to 0 as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
```
Dein `.gallery img`-Selektor sollte eine `max-width`-Eigenschaft mit `350px` als Wert haben.
Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth === '350px');
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
```
Dein `.gallery img`-Selektor sollte eine `height`-Eigenschaft mit `300px` als Wert haben.
Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
```js
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300px');
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
```
# --seed--
@@ -77,4 +82,11 @@ assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300
--fcc-editable-region--
--fcc-editable-region--
.gallery img {
width: 100%;
max-width: 350px;
height: 300px;
}
```
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6493bc0d99879635209565aa.md
+75
View File
@@ -0,0 +1,75 @@
---
id: 6493bc0d99879635209565aa
title: Step 9
challengeType: 0
dashedName: step-9
---
# --description--
The `border-box` sizing model does the opposite of `content-box`. The total width of the element, including padding and border, will be the explicit width set. The content of the element will shrink to make room for the padding and border.
Change the `box-sizing` property to `border-box`. Notice how your blue image borders now fit within your red gallery border.
# --hints--
Your * selector should have a `box-sizing` property set to `border-box` as the value.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'border-box');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
</div>
</body>
</html>
```
```css
--fcc-editable-region--
* {
box-sizing: content-box;
}
--fcc-editable-region--
.gallery {
border: 5px solid red;
width: 50%;
}
img {
width: 100%;
border: 5px solid blue;
padding: 5px;
}
```
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md
+83
View File
@@ -0,0 +1,83 @@
---
id: 6494da0daf5df5197963671d
title: Step 8
challengeType: 0
dashedName: step-8
---
# --description--
Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
# --hints--
You should have a `*` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
```
Your `*` selector should have a `box-sizing` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
```
Your `*` selector should have its `box-sizing` property set to `content-box`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
</div>
</body>
</html>
```
```css
--fcc-editable-region--
--fcc-editable-region--
.gallery {
border: 5px solid red;
width: 50%;
}
img {
width: 100%;
border: 5px solid blue;
padding: 5px;
}
```
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md
+126
View File
@@ -0,0 +1,126 @@
---
id: 64dd076a1b33c86d84b4232f
title: Step 7
challengeType: 0
dashedName: step-7
---
# --description--
In order to better visualize how your elements are sized, adding a border can be helpful.
Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`.
Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`.
# --hints--
You should have a `.gallery` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
Your `.gallery` selector should have a `width` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);
```
Your `.gallery` selector should have a `width` property set to `50%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');
```
Your `.gallery` selector should have a `border` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);
```
Your `.gallery` selector should have a `border` property set to `5px solid red`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');
```
You should have an `img` selector.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img'));
```
Your `img` selector should have a `width` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);
```
Your `img` selector should have a `width` property set to `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');
```
Your `img` selector should have a `padding` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);
```
Your `img` selector should have a `padding` property set to `5px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');
```
Your `img` selector should have a `border` property.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);
```
Your `img` selector should have a `border` property set to `5px solid blue`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
</div>
</body>
</html>
```
```css
--fcc-editable-region--
--fcc-editable-region--
```
curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md
+79
View File
@@ -0,0 +1,79 @@
---
id: 64dd136e4e8b0894f9c70d86
title: Step 10
challengeType: 0
dashedName: step-10
---
# --description--
Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes.
Remove your `.gallery` and `img` selectors, and all rules within.
# --hints--
You should not have a `.gallery` selector.
```js
assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
You should not have an `img` selector.
```js
assert.notExists(new __helpers.CSSHelp(document).getStyle('img'));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header class="header">
<h1>css flexbox photo gallery</h1>
</header>
<div class="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
</div>
</body>
</html>
```
```css
* {
box-sizing: border-box;
}
--fcc-editable-region--
.gallery {
border: 5px solid red;
width: 50%;
}
img {
width: 100%;
border: 5px solid blue;
padding: 5px;
}
--fcc-editable-region--
```

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