mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-09-24 23:01:18 +08:00
chore(curriculum): add flexbox photo gallery workshop (#56705)
This commit is contained in:
Dario-DC
@@ -1941,7 +1941,13 @@
|
||||
"Test what you've learned in this quiz of the box model, transforms, filters, and overflow in CSS."
|
||||
]
|
||||
},
|
||||
"tcwi": { "title": "78", "intro": [] },
|
||||
"workshop-flexbox-photo-gallery": {
|
||||
"title": "Build a Flexbox Photo Gallery",
|
||||
"intro": [
|
||||
"Flexbox helps you design your webpage so that it looks good on any screen size.",
|
||||
"In this workshop, you'll use Flexbox to build a responsive photo gallery webpage."
|
||||
]
|
||||
},
|
||||
"uptf": { "title": "79", "intro": [] },
|
||||
"lab-page-of-playing-cards": {
|
||||
"title": "Build a Page of Playing Cards",
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Introduction to the Build Flexbox a Photo Gallery
|
||||
block: workshop-flexbox-photo-gallery
|
||||
superBlock: front-end-development
|
||||
---
|
||||
|
||||
## Introduction to the Build a Flexbox Photo Gallery
|
||||
|
||||
Flexbox helps you design your webpage so that it looks good on any screen size.
|
||||
|
||||
In this workshop, you'll use Flexbox to build a responsive photo gallery webpage.
|
||||
@@ -0,0 +1,101 @@
|
||||
{
|
||||
"name": "Build a Flexbox Photo Gallery",
|
||||
"blockType": "workshop",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "workshop-flexbox-photo-gallery",
|
||||
"order": 78,
|
||||
"superBlock": "front-end-development",
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "61537bb9b1a29430ac15ad38",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "61537c5f81f0cf325b4a854c",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "61537c9eecea6a335db6da79",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "61537d86bdc3dd343688fceb",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "64dd076a1b33c86d84b4232f",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
"id": "6494da0daf5df5197963671d",
|
||||
"title": "Step 6"
|
||||
},
|
||||
{
|
||||
"id": "6493bc0d99879635209565aa",
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "64dd136e4e8b0894f9c70d86",
|
||||
"title": "Step 8"
|
||||
},
|
||||
{
|
||||
"id": "615380dff67172357fcf0425",
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "615f171d05def3218035dc85",
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "6153893900438b4643590367",
|
||||
"title": "Step 11"
|
||||
},
|
||||
{
|
||||
"id": "6153897c27f6334716ee5abe",
|
||||
"title": "Step 12"
|
||||
},
|
||||
{
|
||||
"id": "6153908a366afb4d57185c8d",
|
||||
"title": "Step 13"
|
||||
},
|
||||
{
|
||||
"id": "615392916d83fa4f02f7e2cf",
|
||||
"title": "Step 14"
|
||||
},
|
||||
{
|
||||
"id": "6153938dce8b294ff8f5a4e9",
|
||||
"title": "Step 15"
|
||||
},
|
||||
{
|
||||
"id": "6153947986535e5117e60615",
|
||||
"title": "Step 16"
|
||||
},
|
||||
{
|
||||
"id": "61539e07e7430b528fbffe21",
|
||||
"title": "Step 17"
|
||||
},
|
||||
{
|
||||
"id": "61539f32a206bd53ec116465",
|
||||
"title": "Step 18"
|
||||
},
|
||||
{
|
||||
"id": "6153a04847abee57a3a406ac",
|
||||
"title": "Step 19"
|
||||
},
|
||||
{
|
||||
"id": "6153a3485f0b20591d26d2a1",
|
||||
"title": "Step 20"
|
||||
},
|
||||
{
|
||||
"id": "6153a3952facd25a83fe8083",
|
||||
"title": "Step 21"
|
||||
},
|
||||
{
|
||||
"id": "6153a3ebb4f7f05b8401b716",
|
||||
"title": "Step 22"
|
||||
}
|
||||
],
|
||||
"helpCategory": "HTML-CSS"
|
||||
}
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
---
|
||||
id: 61537bb9b1a29430ac15ad38
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
demoType: onLoad
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Start this project by linking your `styles.css` file to the page.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `link` element should have an `href` attribute with the value `styles.css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!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>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 61537c5f81f0cf325b4a854c
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a `header` element within the `body` element and assign a class of `header` to it.
|
||||
|
||||
Inside the `header`, create an `h1` with `css flexbox photo gallery` as the text.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `header` element within your `body` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('body')?.querySelector('header'));
|
||||
```
|
||||
|
||||
Your `header` element should have a `class` with `header` as the value.
|
||||
|
||||
```js
|
||||
assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));
|
||||
```
|
||||
|
||||
Your `header` element should have an `h1` element inside it.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.header')?.querySelector('h1'));
|
||||
```
|
||||
|
||||
Your `h1` element should have the text `css flexbox photo gallery` inside it.
|
||||
|
||||
```js
|
||||
assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'css flexbox photo gallery');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 61537c9eecea6a335db6da79
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `.header` element, create a new `div` element and assign it a `class` of `gallery`. This `div` will act as a container for the gallery images.
|
||||
|
||||
Inside that `.gallery` element, create nine `img` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `div` element in your `body` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body')?.querySelectorAll('div')?.length >= 1);
|
||||
```
|
||||
|
||||
Your new `div` element should have a `class` with `gallery` set as the value.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body')?.querySelector('.gallery'));
|
||||
```
|
||||
|
||||
Your new `div` element should come after your `.header` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery'));
|
||||
```
|
||||
|
||||
Your `.gallery` element should have nine `img` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.gallery')?.querySelectorAll('img')?.length === 9);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!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>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 61537d86bdc3dd343688fceb
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, give each `img` a `src` attribute according to its order in the document. The first `img` should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`. The rest should be the same, except replace the `1` with the number the `img` is in the document.
|
||||
|
||||
# --hints--
|
||||
|
||||
All nine of your `img` elements should have a `src` attribute.
|
||||
|
||||
```js
|
||||
const images = [...document.querySelectorAll('img')];
|
||||
assert(images.every(image => image.getAttribute('src')));
|
||||
```
|
||||
|
||||
Your first `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` set as the `src` attribute value.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
|
||||
```
|
||||
|
||||
Your second `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` set as the `src` attribute value.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
|
||||
```
|
||||
|
||||
Your third `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` set as the `src` attribute value.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
|
||||
```
|
||||
|
||||
Your fourth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` set as the `src` attribute value.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
|
||||
```
|
||||
|
||||
Your fifth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` set as the `src` attribute value.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
|
||||
```
|
||||
|
||||
Your sixth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` set as the `src` attribute value.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
|
||||
```
|
||||
|
||||
Your seventh `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` set as the `src` attribute value.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
|
||||
```
|
||||
|
||||
Your eighth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` set as the `src` attribute value.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
|
||||
```
|
||||
|
||||
Your ninth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` set as the `src` attribute value.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
|
||||
```
|
||||
|
||||
# --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>
|
||||
--fcc-editable-region--
|
||||
<div class="gallery">
|
||||
<img>
|
||||
<img>
|
||||
<img>
|
||||
<img>
|
||||
<img>
|
||||
<img>
|
||||
<img>
|
||||
<img>
|
||||
<img>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
+83
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 615380dff67172357fcf0425
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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('.gallery img'));
|
||||
```
|
||||
|
||||
Your `.gallery img` selector should have a `width` property set to `100%` as the value.
|
||||
|
||||
```js
|
||||
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
|
||||
<!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--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+112
@@ -0,0 +1,112 @@
|
||||
---
|
||||
id: 6153893900438b4643590367
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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--
|
||||
|
||||
You should have a `.header` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
|
||||
```
|
||||
|
||||
Your `.header` selector should have a `text-align` property set to `center` as the value.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign, 'center');
|
||||
```
|
||||
|
||||
Your `.header` selector should have a `text-transform` property set to `uppercase` as the value.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform, 'uppercase');
|
||||
```
|
||||
|
||||
Your `.header` selector should have a `padding` property set to `32px` as the value.
|
||||
|
||||
```js
|
||||
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--
|
||||
|
||||
```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;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background-color: #f5f6f7;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 6153897c27f6334716ee5abe
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.gallery` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
|
||||
```
|
||||
|
||||
Your `.gallery` selector should have a `display` property set to `flex` as the value.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.display, 'flex');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
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--
|
||||
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 6153908a366afb4d57185c8d
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Flexbox has a main and cross axis. The main axis is defined by the `flex-direction` property, which has four possible values:
|
||||
|
||||
- `row` (default): horizontal axis with flex items from left to right
|
||||
- `row-reverse`: horizontal axis with flex items from right to left
|
||||
- `column`: vertical axis with flex items from top to bottom
|
||||
- `column-reverse`: vertical axis with flex items from bottom to top
|
||||
|
||||
**Note**: The axes and directions will be different depending on the text direction. The values shown are for a left-to-right text direction.
|
||||
|
||||
Try the different values to see how they affect the layout.
|
||||
|
||||
When you are done, set an explicit `flex-direction` of `row` on the `.gallery` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.gallery` selector should have a `flex-direction` property set to `row` as the value.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection === 'row');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.gallery {
|
||||
display: flex;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 615392916d83fa4f02f7e2cf
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
|
||||
The `flex-wrap` property determines how your flex items behave when the flex container is too small. Setting it to `wrap` will allow the items to wrap to the next row or column. `nowrap` (default) will prevent your items from wrapping and shrink them if needed.
|
||||
|
||||
|
||||
Make it so your flex items wrap to the next row when they run out of space.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.gallery` selector should have a `flex-wrap` property set to `wrap` as the value.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap === 'wrap');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 6153938dce8b294ff8f5a4e9
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `justify-content` property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.
|
||||
|
||||
Give your `.gallery` selector a `justify-content` property with `center` as the value.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.gallery` selector should have a `justify-content` property set to `center` as the value.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent === 'center');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 6153947986535e5117e60615
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `align-items` property positions the flex content along the cross axis. In this case, with your `flex-direction` set to `row`, your cross axis would be vertical.
|
||||
|
||||
To vertically center your images, give your `.gallery` selector an `align-items` property with `center` as the value.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.gallery` selector should have an `align-items` property set to `center` as the value.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.alignItems === 'center');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 61539e07e7430b528fbffe21
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `.gallery` selector a `padding` property set to `20px 10px` to create some space around the container.
|
||||
|
||||
Then, give it a `max-width` of `1400px` and add a `margin` of `0 auto` to center it.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.gallery` selector should have a `padding` property set to `20px 10px` as the value.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingTop, '20px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingBottom, '20px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingLeft, '10px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingRight, '10px');
|
||||
```
|
||||
|
||||
Your `.gallery` selector should have a `max-width` property set to `1400px` as the value.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth === '1400px');
|
||||
```
|
||||
|
||||
Your `.gallery` element should be centered using a `margin` with `0 auto` as the value.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.gallery').cssText, 'margin: 0px auto');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 61539f32a206bd53ec116465
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice how some of your images have become distorted. This is because the images have different aspect ratios. Rather than setting each aspect ratio individually, you can use the `object-fit` property to determine how images should behave.
|
||||
|
||||
Give your `.gallery img` selector the `object-fit` property and set it to `cover`. This will tell the image to fill the `img` container while maintaining aspect ratio, resulting in cropping to fit.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.gallery img` selector should have an `object-fit` property set to `cover` as the value.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit === 'cover');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+95
@@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 6153a04847abee57a3a406ac
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your images need some space between them.
|
||||
|
||||
The `gap` CSS shorthand property sets the gaps, also known as gutters, between rows and columns. The `gap` property and its `row-gap` and `column-gap` sub-properties provide this functionality for flex, grid, and multi-column layout. You apply the property to the container element.
|
||||
|
||||
Give your `.gallery` flex container a `gap` property with `16px` as the value.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.gallery` selector should have a `gap` property with `16px` set as the value.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap === '16px');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
}
|
||||
```
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 6153a3485f0b20591d26d2a1
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Smooth out your images a bit by giving the `.gallery img` selector a `border-radius` property with `10px` set as the value.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.gallery img` selector should have a `border-radius` property with `10px` set as the value.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius === '10px');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+112
@@ -0,0 +1,112 @@
|
||||
---
|
||||
id: 6153a3952facd25a83fe8083
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `::after` pseudo-element creates an element that is the last child of the selected element. You can use it to add an empty element after the last image. If you give it the same `width` as the images it will push the last image to the left when the gallery is in a two-column layout. Right now, it is in the center because you set `justify-content: center` on the flex container.
|
||||
|
||||
Example:
|
||||
|
||||
```CSS
|
||||
.container::after {
|
||||
content: "";
|
||||
width: 860px;
|
||||
}
|
||||
```
|
||||
|
||||
Create a new selector using an `::after` pseudo-element on the `.gallery` element. Add a `content` property set to an empty string `""` and `350px` set for the `width` property.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.gallery::after` selector should have an empty string `""` set for the `content` property.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content === "\"\"");
|
||||
```
|
||||
|
||||
Your `.gallery::after` selector should have `350px` set for the `width` property.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width === "350px");
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
+181
@@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 6153a3ebb4f7f05b8401b716
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
|
||||
The `alt` image attribute should describe the image content. Screen readers announce the alternative text in place of images. If the image can't be loaded, this text is presented in place of the image.
|
||||
|
||||
To complete the project, add an `alt` attribute to all nine of your cat images to describe them. Use a value at least five characters long for each.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
All nine of your `img` elements should have a `alt` attribute with text describing each image, with each description using at least `5` letters.
|
||||
|
||||
```js
|
||||
const images = [...document.querySelectorAll('img')];
|
||||
assert(images.every(image => image.getAttribute('alt')));
|
||||
assert(images.every(image => image.getAttribute('alt').length >= 5));
|
||||
```
|
||||
|
||||
# --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">
|
||||
--fcc-editable-region--
|
||||
<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">
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.gallery::after {
|
||||
content: "";
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="Gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt="Gallery">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding: 32px;
|
||||
background-color: #0a0a23;
|
||||
color: #fff;
|
||||
border-bottom: 4px solid #fdb347;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.gallery::after {
|
||||
content: "";
|
||||
width: 350px;
|
||||
}
|
||||
```
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 615f171d05def3218035dc85
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `body` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
Your `body` selector should have a `margin` property set to 0 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');
|
||||
```
|
||||
|
||||
Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
|
||||
```
|
||||
|
||||
Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
```
|
||||
+75
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 6493bc0d99879635209565aa
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --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;
|
||||
}
|
||||
```
|
||||
+83
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 6494da0daf5df5197963671d
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --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;
|
||||
}
|
||||
```
|
||||
+126
@@ -0,0 +1,126 @@
|
||||
---
|
||||
id: 64dd076a1b33c86d84b4232f
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --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--
|
||||
```
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 64dd136e4e8b0894f9c70d86
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --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--
|
||||
```
|
||||
@@ -158,6 +158,28 @@ const duplicatedProjectIds = [
|
||||
'60a3e3396c7b40068ad69997',
|
||||
|
||||
// Flexbox Photo Gallery
|
||||
'61537bb9b1a29430ac15ad38',
|
||||
'61537c5f81f0cf325b4a854c',
|
||||
'61537c9eecea6a335db6da79',
|
||||
'61537d86bdc3dd343688fceb',
|
||||
'64dd076a1b33c86d84b4232f',
|
||||
'6494da0daf5df5197963671d',
|
||||
'6493bc0d99879635209565aa',
|
||||
'64dd136e4e8b0894f9c70d86',
|
||||
'615380dff67172357fcf0425',
|
||||
'615f171d05def3218035dc85',
|
||||
'6153893900438b4643590367',
|
||||
'6153897c27f6334716ee5abe',
|
||||
'6153908a366afb4d57185c8d',
|
||||
'615392916d83fa4f02f7e2cf',
|
||||
'6153938dce8b294ff8f5a4e9',
|
||||
'6153947986535e5117e60615',
|
||||
'61539e07e7430b528fbffe21',
|
||||
'61539f32a206bd53ec116465',
|
||||
'6153a04847abee57a3a406ac',
|
||||
'6153a3485f0b20591d26d2a1',
|
||||
'6153a3952facd25a83fe8083',
|
||||
'6153a3ebb4f7f05b8401b716',
|
||||
|
||||
// Nutrition Label
|
||||
'615f2abbe7d18d49a1e0e1c8',
|
||||
|
||||
Reference in New Issue
Block a user