feat: css photo gallery (#43602)
* feat: initial infra * feat: create steps * feat: prototype tests Haven't tested locally yet :) * feat: complete tests * feat: move image size step * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: apply kris' review suggestions Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * fix: index.md linting * chore: steps are parts in disguise * chore: apply tom's review suggestions Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: colon to period Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
c1fb339bbc
commit
2868347742
@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 61537485c4f2a624f18d7794
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Begin with your standard HTML boilerplate. Add a `DOCTYPE` declaration, an `html` element, a `head` element, and a `body` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should contain the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
You should include a space after the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
You should define the document type to be `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
```
|
||||
|
||||
You should close the `DOCTYPE` declaration with a `>` after the type.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have an opening tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
Your `html` element should be below the `DOCTYPE` declaration.
|
||||
|
||||
```js
|
||||
assert(code.match(/(?<!<html\s*>)<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
You should have an opening `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
You should have an opening `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
The `head` and `body` elements should be siblings.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
|
||||
```
|
||||
|
||||
The `head` element should be within the `html` element.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
The `body` element should be within the `html` element.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,58 @@
|
||||
---
|
||||
id: 61537a8054753e2f1f2a1574
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `head` element, add a `meta` tag with the `name` set to `viewport` and the `content` set to `width=device-width, initial-scale=1`.
|
||||
|
||||
Also add a `meta` tag with the `charset` set to `UTF-8`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have two `meta` elements.
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert(meta?.length === 2);
|
||||
```
|
||||
|
||||
One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content').match(/width=device-width,\s?initial-scale=1(.0)?/) && !m?.getAttribute('charset'));
|
||||
assert.exists(target);
|
||||
```
|
||||
|
||||
Your other `meta` element should have the `charset` attribute set to `UTF-8`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
|
||||
assert.exists(target);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 61537bb9b1a29430ac15ad38
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `head` element, add a `title` element with the text set to `CSS Flexbox Photo Gallery`, and a `link` element to add 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/)
|
||||
```
|
||||
|
||||
Your code should have a `title` element.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
Your project should have a title of `CSS Flexbox Photo Gallery`.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim()?.toLowerCase(), 'css flexbox photo gallery')
|
||||
```
|
||||
|
||||
Remember, the casing and spelling matter for the title.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim(), 'CSS Flexbox Photo Gallery');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 61537c5f81f0cf325b4a854c
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `body` element, create a `div` with the `class` set to `header`.
|
||||
|
||||
Inside the `.header` element nest an `h1` element with the text `CSS FLEXBOX PHOTO GALLERY`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `div` element within your `body` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('body')?.querySelector('div'))
|
||||
```
|
||||
|
||||
Your `div` element should have the `class` set to `header`.
|
||||
|
||||
```js
|
||||
assert(document?.querySelector('body')?.querySelector('div')?.classList?.contains('header'))
|
||||
```
|
||||
|
||||
Your `.header` element should have an `h1` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.header')?.querySelector('h1'));
|
||||
```
|
||||
|
||||
Your `h1` should have the text `CSS FLEXBOX PHOTO GALLERY`. Remember that casing matters.
|
||||
|
||||
```js
|
||||
assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'CSS FLEXBOX PHOTO GALLERY')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 61537c9eecea6a335db6da79
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `.header` element, create a new `div` element with the `id` set to `gallery`.
|
||||
|
||||
In that `#gallery` element, create ten `img` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a second `div` element in your `body` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body')?.querySelectorAll('div')?.length === 2);
|
||||
```
|
||||
|
||||
Your new `div` element should come after your `.header` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body')?.querySelectorAll('div')?.[0]?.classList?.contains('header'));
|
||||
```
|
||||
|
||||
Your new `div` element should have an `id` set to `gallery`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body')?.querySelectorAll('div')?.[1]?.id === 'gallery');
|
||||
```
|
||||
|
||||
Your `#gallery` element should have ten `img` elements.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#gallery')?.querySelectorAll('img')?.length === 10);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 61537d86bdc3dd343688fceb
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to give each `img` element a `src` attribute. You are going to use the format `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/#.jpg`, replacing `#` with the `img` element order.
|
||||
|
||||
So your first `img` element would use `1.jpg`, your second would use `2.jpg`, and so on.
|
||||
|
||||
# --hints--
|
||||
|
||||
All ten 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 the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
|
||||
```
|
||||
|
||||
Your second `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
|
||||
```
|
||||
|
||||
Your third `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
|
||||
```
|
||||
|
||||
Your fourth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
|
||||
```
|
||||
|
||||
Your fifth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
|
||||
```
|
||||
|
||||
Your sixth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
|
||||
```
|
||||
|
||||
Your seventh `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
|
||||
```
|
||||
|
||||
Your eighth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
|
||||
```
|
||||
|
||||
Your ninth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
|
||||
```
|
||||
|
||||
Your tenth `img` element should have the `src` attribute set to `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img')?.[9]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div id="gallery">
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 615380dff67172357fcf0425
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Normalize your box model by creating a `*` selector and setting the `box-sizing` property to `border-box`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `*` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
|
||||
```
|
||||
|
||||
Your `*` selector should have a `box-sizing` property set to `border-box`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 615f171d05def3218035dc85
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your images are currently too large, and you will not be able to see your CSS changes.
|
||||
|
||||
Create a `#gallery img` selector to target your images. Give it a `width` property set to `25%`.
|
||||
|
||||
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 `25%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.width === '25%')
|
||||
```
|
||||
|
||||
Your `#gallery img` selector should have a `height` property set to `300px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.height === '300px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 6153893900438b4643590367
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remove the margin from your `body` element, set the font to `Arial`, and give it a background color of `#EBE7E7`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `body` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('body'))
|
||||
```
|
||||
|
||||
Your `body` selector should have a `font-family` property set to `Arial`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'Arial');
|
||||
```
|
||||
|
||||
Your `body` selector should have a `background-color` property set to `#EBE7E7`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(235, 231, 231)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 6153897c27f6334716ee5abe
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Align your `.header` text in the center, give it a padding of `32px` on all sides, and set the background to `#E0DDDD`.
|
||||
|
||||
# --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`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center');
|
||||
```
|
||||
|
||||
Your `.header` selector should have a `padding` property set to `32px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px');
|
||||
```
|
||||
|
||||
Your `.header` selector should have a `background-color` property set to `#E0DDDD`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(224, 221, 221)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 615389bd81347947ea7ba896
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Flexbox is a one-dimensional CSS layout approach that focuses on the flow of content. It offers the ability to control the way items are spaced and aligned within a container.
|
||||
|
||||
To set an element to use Flexbox, you give it a `display` property set to `flex`. Create a `#gallery` selector and give it that property.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#gallery` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery'));
|
||||
```
|
||||
|
||||
Your `#gallery` selector should have a `display` property set to `flex`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.display === 'flex');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 6153908a366afb4d57185c8d
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Flexbox can be thought of as having two axes, the main axis and the cross axis. The main axis is determined by the `flex-direction` property. If `flex-direction` is set to `row` or `row-reverse`, the main axis is horizontal. If `flex-direction` is set to `column` or `column-reverse`, the main axis is vertical.
|
||||
|
||||
Give your `#gallery` selector a `flex-direction` property set to `row`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery` selector should have a `flex-direction` property set to `row`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexDirection === 'row');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
display: flex;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 615392916d83fa4f02f7e2cf
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You may have noticed that your images have all moved onto the same row.
|
||||
|
||||
The `flex-wrap` property determines how your items should behave when the flex container is too small. Setting this property to `wrap` will allow your items to wrap to the next row/column (depending on your main axis), where `nowrap` will prevent your items from wrapping. When this is set to `nowrap`, items may either shrink to fit or overflow.
|
||||
|
||||
Give the `#gallery` selector a `flex-wrap` property set to `wrap`. You should see your images take a four-column layout. This is because you set their `width` to `25%` in an earlier step.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery` selector should have a `flex-wrap` property set to `wrap`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexWrap === 'wrap');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 6153938dce8b294ff8f5a4e9
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --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 set to `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery` selector should have a `justify-content` property set to `center`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.justifyContent === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 6153947986535e5117e60615
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --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 set to `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery` selector should have an `align-items` property set to `center`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.alignItems === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 61539e07e7430b528fbffe21
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `#gallery` selector a `padding` property set to `0 4px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery` selector should have a `padding` property set to `0 4px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.padding === '0px 4px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 61539f32a206bd53ec116465
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --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`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.objectFit === 'cover');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 6153a04847abee57a3a406ac
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your images need some space between them.
|
||||
|
||||
Give your `#gallery img` selector a `margin-top` property of `8px` and a `padding` property of `0 4px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery img` selector should have a `margin-top` property of `8px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.marginTop === '8px');
|
||||
```
|
||||
|
||||
Your `#gallery img` selector should have a `padding` property of `0 4px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.padding === '0px 4px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 6153a3485f0b20591d26d2a1
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Smooth out your images a bit by giving the `#gallery img` selector a `border-radius` property of `10px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gallery img` selector should have a `border-radius` property set to `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.borderRadius === '10px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
margin-top: 8px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 6153a3952facd25a83fe8083
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a media query for screens smaller than `800px` in width. In that media query, create a `#gallery img` rule and set the `width` property to `50%`. This will convert your gallery to a two-column layout.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `@media` query.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
|
||||
```
|
||||
|
||||
Your new `@media` query should have a `max-width` of `800px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)');
|
||||
```
|
||||
|
||||
Your `@media` query should have a `#gallery img` rule.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)');
|
||||
assert(rules?.find(rule => rule.selectorText === '#gallery img'));
|
||||
```
|
||||
|
||||
Your `#gallery img` rule should have a `width` property set to `50%`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)');
|
||||
const imgRule = rules?.find(rule => rule.selectorText === '#gallery img');
|
||||
assert(imgRule?.style.width === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
margin-top: 8px;
|
||||
padding: 0 4px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 6153a3ebb4f7f05b8401b716
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Resize the preview to see the layout change from your media query.
|
||||
|
||||
Finally, create another media query for screens smaller than `600px` wide. In that media query, create a `#gallery img` rule and set the `width` property to `100%`. This will give your gallery a single-column layout.
|
||||
|
||||
Your CSS Flexbox Photo Gallery is now complete.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a second `@media` query.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
|
||||
```
|
||||
|
||||
Your new `@media` query should come after your existing one.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)');
|
||||
```
|
||||
|
||||
Your new `@media` query should have a `max-width` of `600px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === '(max-width: 600px)');
|
||||
```
|
||||
|
||||
Your new `@media` query should have a `#gallery img` selector.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)');
|
||||
assert(rules?.find(rule => rule?.selectorText === '#gallery img'));
|
||||
```
|
||||
|
||||
Your `#gallery img` rule should have a `width` property set to `100%`.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)');
|
||||
const imgRule = rules?.find(rule => rule?.selectorText === '#gallery img');
|
||||
assert(imgRule?.style?.width === '100%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Flexbox Photo Gallery</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
|
||||
</div>
|
||||
<div id="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"/>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
background: #EBE7E7;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
background: #E0DDDD;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#gallery img {
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
margin-top: 8px;
|
||||
padding: 0 4px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
#gallery img {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
Reference in New Issue
Block a user