diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index fbc128622e..0ddd63abdf 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -72,6 +72,13 @@ "title": "Basic CSS Cafe Menu", "intro": ["", ""] }, + "css-box-model": { + "title": "CSS Box Model", + "intro": [ + "Mark Rothko was known for his abstract style of painting. Rothko paintings commonly depicted rectangular regions of color in varying sizes.", + "In this lesson, you will be using CSS to create your own painting in Rothko's style. You will use many of the skills you have already been practicing, as well as new CSS tool such as blur and transform." + ] + }, "css-variables-skyline": { "title": "CSS Variables Skyline", "intro": ["", ""] diff --git a/client/utils/help-category-map.json b/client/utils/help-category-map.json index 676024a8c8..4bca3f2bb4 100644 --- a/client/utils/help-category-map.json +++ b/client/utils/help-category-map.json @@ -6,6 +6,7 @@ "responsive-web-design-principles": "HTML-CSS", "css-flexbox": "HTML-CSS", "css-grid": "HTML-CSS", + "css-box-model": "HTML-CSS", "css-picasso-painting": "HTML-CSS", "responsive-web-design-projects": "HTML-CSS", "basic-javascript": "JavaScript", diff --git a/curriculum/challenges/_meta/css-box-model/meta.json b/curriculum/challenges/_meta/css-box-model/meta.json new file mode 100644 index 0000000000..8601b698ad --- /dev/null +++ b/curriculum/challenges/_meta/css-box-model/meta.json @@ -0,0 +1,198 @@ +{ + "name": "CSS Box Model", + "isUpcomingChange": true, + "dashedName": "css-box-model", + "order": 12, + "time": "5 hours", + "template": "", + "required": [], + "superBlock": "responsive-web-design", + "superOrder": 1, + "isBeta": true, + "challengeOrder": [ + [ + "60a3e3396c7b40068ad6996a", + "Part 1" + ], + [ + "60a3e3396c7b40068ad6996b", + "Part 2" + ], + [ + "60a3e3396c7b40068ad6996c", + "Part 3" + ], + [ + "60a3e3396c7b40068ad6996d", + "Part 4" + ], + [ + "60a3e3396c7b40068ad6996e", + "Part 5" + ], + [ + "60a3e3396c7b40068ad6996f", + "Part 6" + ], + [ + "60a3e3396c7b40068ad69970", + "Part 7" + ], + [ + "60a3e3396c7b40068ad69971", + "Part 8" + ], + [ + "60a3e3396c7b40068ad69972", + "Part 9" + ], + [ + "60a3e3396c7b40068ad69973", + "Part 10" + ], + [ + "60a3e3396c7b40068ad69974", + "Part 11" + ], + [ + "60a3e3396c7b40068ad69975", + "Part 12" + ], + [ + "60a3e3396c7b40068ad69976", + "Part 13" + ], + [ + "60a3e3396c7b40068ad69977", + "Part 14" + ], + [ + "60a3e3396c7b40068ad69978", + "Part 15" + ], + [ + "60a3e3396c7b40068ad69979", + "Part 16" + ], + [ + "60a3e3396c7b40068ad6997a", + "Part 17" + ], + [ + "60a3e3396c7b40068ad6997b", + "Part 18" + ], + [ + "60a3e3396c7b40068ad6997c", + "Part 19" + ], + [ + "60a3e3396c7b40068ad6997d", + "Part 20" + ], + [ + "60a3e3396c7b40068ad6997e", + "Part 21" + ], + [ + "60a3e3396c7b40068ad6997f", + "Part 22" + ], + [ + "60a3e3396c7b40068ad69980", + "Part 23" + ], + [ + "60a3e3396c7b40068ad69981", + "Part 24" + ], + [ + "60a3e3396c7b40068ad69982", + "Part 25" + ], + [ + "60a3e3396c7b40068ad69983", + "Part 26" + ], + [ + "60a3e3396c7b40068ad69984", + "Part 27" + ], + [ + "60a3e3396c7b40068ad69985", + "Part 28" + ], + [ + "60a3e3396c7b40068ad69986", + "Part 29" + ], + [ + "60a3e3396c7b40068ad69987", + "Part 30" + ], + [ + "60a3e3396c7b40068ad69988", + "Part 31" + ], + [ + "60a3e3396c7b40068ad69989", + "Part 32" + ], + [ + "60a3e3396c7b40068ad6998a", + "Part 33" + ], + [ + "60a3e3396c7b40068ad6998b", + "Part 34" + ], + [ + "60a3e3396c7b40068ad6998c", + "Part 35" + ], + [ + "60a3e3396c7b40068ad6998d", + "Part 36" + ], + [ + "60a3e3396c7b40068ad6998e", + "Part 37" + ], + [ + "60a3e3396c7b40068ad6998f", + "Part 38" + ], + [ + "60a3e3396c7b40068ad69990", + "Part 39" + ], + [ + "60a3e3396c7b40068ad69991", + "Part 40" + ], + [ + "60a3e3396c7b40068ad69992", + "Part 41" + ], + [ + "60a3e3396c7b40068ad69993", + "Part 42" + ], + [ + "60a3e3396c7b40068ad69994", + "Part 43" + ], + [ + "60a3e3396c7b40068ad69995", + "Part 44" + ], + [ + "60a3e3396c7b40068ad69996", + "Part 45" + ], + [ + "60a3e3396c7b40068ad69997", + "Part 46" + ] + ] +} diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-001.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-001.md new file mode 100644 index 0000000000..5ac3212ae2 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-001.md @@ -0,0 +1,55 @@ +--- +id: 60a3e3396c7b40068ad6996a +title: Part 1 +challengeType: 0 +dashedName: part-1 +--- + +# --description-- + +By now, you should be familiar with the basic elements an HTML page should have. + +Set up your code with a `DOCTYPE` declaration, an `html` element, a `head` element, and a `body` element. + +# --hints-- + +Your code should have a `` declaration. + +```js +assert(code.match(//i)); +``` + +Your code should have an `html` element. + +```js +assert(document.querySelectorAll('html').length === 1); +``` + +Your code should have a `head` element within the `html` element. + +```js +assert(document.querySelectorAll('head').length === 1); +``` + +Your code should have a `body` element within the `html` element. + +```js +assert(document.querySelectorAll('body').length === 1); +``` + +Your `head` element should come before your `body` element. + +```js +assert(document.querySelector('body').previousElementSibling.tagName === 'HEAD'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-002.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-002.md new file mode 100644 index 0000000000..249c87c179 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-002.md @@ -0,0 +1,65 @@ +--- +id: 60a3e3396c7b40068ad6996b +title: Part 2 +challengeType: 0 +dashedName: part-2 +--- + +# --description-- + +Within the `head` element, add a `meta` tag which sets the `charset` to `UTF-8`, and a `title` element with the value `Rothko`. + +Within the `body` element, add an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. +# --hints-- + +Your code should have a `meta` tag. + +```js +assert(document.querySelectorAll('meta').length === 1); +``` + +The `meta` tag should set the `charset` to `UTF-8`. + +```js +assert(document.querySelector('meta').getAttribute('charset') === 'UTF-8'); +``` + +Your code should have a `title` element. + +```js +assert(document.querySelectorAll('title').length === 1); +``` + +The `title` should be `Rothko`. + +```js +assert(document.querySelector('title').innerText === 'Rothko'); +``` + +Your code should have an `img` element. + +```js +assert(document.querySelectorAll('img').length === 1); +``` + +The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. + +```js +assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-003.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-003.md new file mode 100644 index 0000000000..52b88eddd5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-003.md @@ -0,0 +1,42 @@ +--- +id: 60a3e3396c7b40068ad6996c +title: Part 3 +challengeType: 0 +dashedName: part-3 +--- + +# --description-- + +In the CSS box model, every HTML element is treated as a box with four areas. + +Imagine you receive a box from your favorite online retailer -- the content is the item in the box, or in our case, a header, paragraph, or image element. + +Change the `src` attribute in the `` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`. + +# --hints-- + +The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png` + +```js +assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-004.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-004.md new file mode 100644 index 0000000000..8d49679d74 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-004.md @@ -0,0 +1,41 @@ +--- +id: 60a3e3396c7b40068ad6996d +title: Part 4 +challengeType: 0 +dashedName: part-4 +--- + +# --description-- + +The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it. + +Think of the border like the cardboard box your item was shipped in. + +Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` + +# --hints-- + +The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` + +```js +assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-005.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-005.md new file mode 100644 index 0000000000..4ae7bb86f6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-005.md @@ -0,0 +1,43 @@ +--- +id: 60a3e3396c7b40068ad6996e +title: Part 5 +challengeType: 0 +dashedName: part-5 +--- + +# --description-- + +Margin is the area outside of the box, and can be used to control the space between other boxes or elements. + +Here the bottom element has a larger top margin, pushing it further down the page. + +Now that you understand the CSS box model, let's get started on the Rothko painting. + +Remove the `` element. + +# --hints-- + +You should not have an `img` element in your code. + +```js +assert(document.querySelector('img') === null); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-006.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-006.md new file mode 100644 index 0000000000..f9a0d992ee --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-006.md @@ -0,0 +1,47 @@ +--- +id: 60a3e3396c7b40068ad6996f +title: Part 6 +challengeType: 0 +dashedName: part-6 +--- + +# --description-- + +Add a `div` element in the `body`. + +Set the `class` attribute equal to `canvas`. For example, `
`. + +This will act as the canvas for your painting. + +# --hints-- + +Your code should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 1) +``` + +The `div` element should have a `class` with the value `canvas`. + +```js +assert(document.querySelector('div').className.split(' ').includes('canvas')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-007.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-007.md new file mode 100644 index 0000000000..d4ad31754d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-007.md @@ -0,0 +1,59 @@ +--- +id: 60a3e3396c7b40068ad69970 +title: Part 7 +challengeType: 0 +dashedName: part-7 +--- + +# --description-- + +Before you can start styling the `div` you added, you need to link your CSS to your HTML. + +Add a `link` element to link your `styles.css` file. Set the `href` to `./styles.css`, and remember to set the `rel` attribute to `stylesheet`. + +# --hints-- + +Your code should have a `link` element. + +```js +assert(//.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-008.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-008.md new file mode 100644 index 0000000000..ad33dc7391 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-008.md @@ -0,0 +1,69 @@ +--- +id: 60a3e3396c7b40068ad69971 +title: Part 8 +challengeType: 0 +dashedName: part-8 +--- + +# --description-- + +Time for CSS. + +Even though your `
` has no text, it's still treated as a box with content. +Write a CSS rule that uses the `.canvas` class selector and set its `width` to 500 pixels. +Here's a CSS rule that sets the width of the class `card` to 300 pixels: + +```css +.card { + width: 300px; +} +``` + +# --hints-- + +Your code should have a `.canvas` selector. + +```js +const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas'); +assert(hasCanvas) +``` + +You should set the `width` property to `500px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px') +assert(hasWidth); +``` + +Your `.canvas` element should have a `width` of `500px`. + +```js +const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width'); +assert(width === '500px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko + + + +
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-009.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-009.md new file mode 100644 index 0000000000..66593f72c1 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-009.md @@ -0,0 +1,54 @@ +--- +id: 60a3e3396c7b40068ad69972 +title: Part 9 +challengeType: 0 +dashedName: part-9 +--- + +# --description-- + +Add the `height` property with the value `600px` to your `.canvas` rule. + +# --hints-- + +You should set the `height` property to `600px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px'); +assert(hasHeight); +``` + +Your `.canvas` element should have a `height` of `600px`. + +```js +const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height'); +assert(canvasHeight === '600px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-010.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-010.md new file mode 100644 index 0000000000..5310134a4d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-010.md @@ -0,0 +1,56 @@ +--- +id: 60a3e3396c7b40068ad69973 +title: Part 10 +challengeType: 0 +dashedName: part-10 +--- + +# --description-- + +Change the `background-color` of the canvas to `#4d0f00`. + +# --hints-- + +You should set the `background-color` property to `#4d0f00`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)'); +// TODO: Why does it still do this? +assert(hasBackground); +``` + +Your `.canvas` element should have a `background-color` of `#4d0f00`. + +```js +const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color'); +assert(canvasBackground === 'rgb(77, 15, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-011.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-011.md new file mode 100644 index 0000000000..fe13693d46 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-011.md @@ -0,0 +1,67 @@ +--- +id: 60a3e3396c7b40068ad69974 +title: Part 11 +challengeType: 0 +dashedName: part-11 +--- + +# --description-- + +Every painting needs a frame. + +Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class. +# --hints-- + +You should add a new `div` element. + +```js +assert(document.querySelectorAll('div').length === 2) +``` + +Your `.canvas` element should be nested in the new `div` element. + +```js +assert(document.querySelector('.canvas').parentElement.tagName === 'DIV'); +``` + +Your new `div` should have a `class` with the value `frame`. + +```js +assert(document.querySelector('div').className.split(' ').includes('frame')); +``` + +Your new `div` should be within your `body` element. + +```js +assert(document.querySelector('div').parentElement.tagName === 'BODY'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} +``` + +```html + + + + + Rothko + + + +--fcc-editable-region-- + +
+
+ +--fcc-editable-region-- + + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-012.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-012.md new file mode 100644 index 0000000000..e7bdf5c3ac --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-012.md @@ -0,0 +1,67 @@ +--- +id: 60a3e3396c7b40068ad69975 +title: Part 12 +challengeType: 0 +dashedName: part-12 +--- + +# --description-- + +Write a new rule using the `.frame` class selector. + +Give the `.frame` a border with the shorthand `border: 50px solid black;` declaration. + +# --hints-- + +Your code should have a `.frame` selector. + +```js +const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame'); +assert(hasFrame); +``` + +You should set the `border` property to `50px solid black`. + +```js +const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black'); +assert(hasBorder); +``` + +Your `.frame` element should have a `50px solid black` `border`. + +```js +const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border'); +assert(frameBorder === '50px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +```html + + + + + Rothko + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-013.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-013.md new file mode 100644 index 0000000000..17a5db4987 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-013.md @@ -0,0 +1,64 @@ +--- +id: 60a3e3396c7b40068ad69976 +title: Part 13 +challengeType: 0 +dashedName: part-13 +--- + +# --description-- + +The frame is much too wide. + +In `.frame`, set its `width` to 500 pixels. + +# --hints-- + +You should set the `width` property to `500px`. + +```js +const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px'); +assert(widthFilter.length === 2); +``` + +Your `.frame` element should have a `width` of `500px`. + +```js +const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width'); +assert(frameWidth === '500px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-014.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-014.md new file mode 100644 index 0000000000..f76fab81a4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-014.md @@ -0,0 +1,65 @@ +--- +id: 60a3e3396c7b40068ad69977 +title: Part 14 +challengeType: 0 +dashedName: part-14 +--- + +# --description-- + +Use padding to adjust the spacing within an element. + +In `.frame`, use the shorthand `padding: 50px;` to increase the space between the top, bottom, left, and right of the frame's border and the canvas within. + +# --hints-- + +You should set the `padding` property to `50px`. + +```js +const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px'); +assert(hasPadding); +``` + +Your `.frame` element should have a `padding` value of `50px`. + +```js +const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding'); +assert(framePadding === '50px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-015.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-015.md new file mode 100644 index 0000000000..905fb24a02 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-015.md @@ -0,0 +1,66 @@ +--- +id: 60a3e3396c7b40068ad69978 +title: Part 15 +challengeType: 0 +dashedName: part-15 +--- + +# --description-- + +Use margins to adjust the spacing outside of an element. + +Add the `margin` property to `.frame` and set it to `20px auto` to move the frame down 20 pixels and center it horizontally on the page. + +# --hints-- + +You should set the `margin` property to `20px auto`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto'); +assert(hasMargin); +``` + +Your `.frame` element should have a `margin` value of `20px auto`. + +```js +const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin'); +assert(frameMargin === '20px auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-016.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-016.md new file mode 100644 index 0000000000..58d29e5d30 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-016.md @@ -0,0 +1,71 @@ +--- +id: 60a3e3396c7b40068ad69979 +title: Part 16 +challengeType: 0 +dashedName: part-16 +--- + +# --description-- + +Add a new `div` element inside of your `.canvas` element. + +Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle. + +# --hints-- + +You should create a new `div` element. + +```js +assert(document.querySelectorAll('div').length === 3); +``` + +You should nest the new `div` element within your `.canvas` element. + +```js +assert(document.querySelector('.canvas').children[0].tagName === 'DIV'); +``` + +Your new `div` should have a `class` attribute with a value `one`. + +```js +assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one')); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} +``` + +```html + + + + + Rothko + + + +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-017.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-017.md new file mode 100644 index 0000000000..3dbbd0ddb8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-017.md @@ -0,0 +1,74 @@ +--- +id: 60a3e3396c7b40068ad6997a +title: Part 17 +challengeType: 0 +dashedName: part-17 +--- + +# --description-- + +Write a new rule that targets `.one` and set its `width` to 425 pixels. + +# --hints-- + +You should have a `.one` selector. + +```js +const hasOne = new __helpers.CSSHelp(document).getStyle('.one'); +assert(hasOne); +``` + +You should set the `width` property to `425px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px'); +assert(hasWidth); +``` + +Your `.one` element should have a `width` value of `425px`. + +```js +const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width'); +assert(oneWidth === '425px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-018.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-018.md new file mode 100644 index 0000000000..cd41dcb8e9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-018.md @@ -0,0 +1,70 @@ +--- +id: 60a3e3396c7b40068ad6997b +title: Part 18 +challengeType: 0 +dashedName: part-18 +--- + +# --description-- + +Now set the `height` for `.one` to 150 pixels. + +# --hints-- + +You should set the `height` property to `150px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px'); +assert(hasHeight); +``` + +Your `.one` element should have a `height` value of `150px`. + +```js +const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height'); +assert(oneHeight === '150px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-019.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-019.md new file mode 100644 index 0000000000..0a73c802a3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-019.md @@ -0,0 +1,71 @@ +--- +id: 60a3e3396c7b40068ad6997c +title: Part 19 +challengeType: 0 +dashedName: part-19 +--- + +# --description-- + +Set the `background-color` of `.one` to `#efb762`. + +# --hints-- + +You should set the `background-color` property to `#efb762`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)'); +assert(hasBackground) +``` + +Your `.one` element should have a `background-color` value of `#efb762`. + +```js +const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color'); +assert(oneBackground === 'rgb(239, 183, 98)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-020.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-020.md new file mode 100644 index 0000000000..fc0de3833a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-020.md @@ -0,0 +1,74 @@ +--- +id: 60a3e3396c7b40068ad6997d +title: Part 20 +challengeType: 0 +dashedName: part-20 +--- + +# --description-- + +Use margins to position the `.one` element on the canvas. + +Add the shorthand `margin: 20px auto;` to set the top and bottom margins to 20 pixels, and center it horizontally. + +# --hints-- + +You should set the `margin` property to `20px auto`. + +```js +const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto'); +assert(marginFilter.length === 2); +``` + +Your `.one` element should have a `margin` value of `20px auto`. + +```js +const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin'); +assert(oneMargin === '20px auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-021.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-021.md new file mode 100644 index 0000000000..a1e8d427f3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-021.md @@ -0,0 +1,75 @@ +--- +id: 60a3e3396c7b40068ad6997e +title: Part 21 +challengeType: 0 +dashedName: part-21 +--- + +# --description-- + +Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels. + +Add `padding: 1px;` to `.canvas` to give the `.one` element something solid to push off of. + +# --hints-- + +You should set the `padding` property to `1px`. + +```js +const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px'); +assert(hasPadding); +``` + +Your `.canvas` element should have a `padding` value of `1px`. + +```js +const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding'); +assert(canvasPadding === '1px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-022.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-022.md new file mode 100644 index 0000000000..9f5f449f1f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-022.md @@ -0,0 +1,82 @@ +--- +id: 60a3e3396c7b40068ad6997f +title: Part 22 +challengeType: 0 +dashedName: part-22 +--- + +# --description-- + +Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels. + +Replace `padding: 1px;` with `overflow: hidden;` to change the canvas back to its original dimensions. + +# --hints-- + +You should remove the `padding` property from the `.one` selector. + +```js +const onePadding = new __helpers.CSSHelp(document).getStyle('.one').getPropertyValue('padding'); +assert(!onePadding); +``` + +You should set the `overflow` property to `hidden`. + +```js +const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden'); +assert(hasOverflow); +``` + +Your `.canvas` element should have an `overflow` value of `hidden`. + +```js +const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow'); +assert(canvasOverflow === 'hidden') +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +--fcc-editable-region-- + padding: 1px; +--fcc-editable-region-- +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-023.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-023.md new file mode 100644 index 0000000000..a8747ff16d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-023.md @@ -0,0 +1,84 @@ +--- +id: 60a3e3396c7b40068ad69980 +title: Part 23 +challengeType: 0 +dashedName: part-23 +--- + +# --description-- + +Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle. + +# --hints-- + +You should not change the existing `.one` element. + +```js +assert(document.querySelectorAll('.one').length === 1); +``` + +You should have a second `div` element in your `.canvas` element. + +```js +assert(document.querySelector('.canvas').children[1].tagName === 'DIV'); +``` + +Your second `div` element should have a `class` value of `two`. + +```js +assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two')); +``` + +Your `.two` element should come after your `.one` element. + +```js +assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one')); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-024.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-024.md new file mode 100644 index 0000000000..6d7da6aac4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-024.md @@ -0,0 +1,84 @@ +--- +id: 60a3e3396c7b40068ad69981 +title: Part 24 +challengeType: 0 +dashedName: part-24 +--- + +# --description-- + +Create a new CSS rule using the `.two` selector and set its `width` to 475 pixels. + +# --hints-- + +You should have a `.two` selector. + +```js +const hasTwo = new __helpers.CSSHelp(document).getStyle('.two'); +assert(hasTwo); +``` + +You should set the `width` property to `475px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px'); +assert(hasWidth); +``` + +Your `.two` element should have a `width` value of `475px`. + +```js +const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width'); +assert(twoWidth === '475px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-025.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-025.md new file mode 100644 index 0000000000..f15e8e7a0f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-025.md @@ -0,0 +1,79 @@ +--- +id: 60a3e3396c7b40068ad69982 +title: Part 25 +challengeType: 0 +dashedName: part-25 +--- + +# --description-- + +Set the `height` of the `.two` to 200 pixels. + +# --hints-- + +You should set the `height` property to `200px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px'); +assert(hasHeight); +``` + +Your `.two` element should have a `height` value of `200px`. + +```js +const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height'); +assert(twoHeight === '200px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-026.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-026.md new file mode 100644 index 0000000000..a723c5efcd --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-026.md @@ -0,0 +1,80 @@ +--- +id: 60a3e3396c7b40068ad69983 +title: Part 26 +challengeType: 0 +dashedName: part-26 +--- + +# --description-- + +Set the `background-color` of the `.two` element to `#8f0401`. + +# --hints-- + +You should set the `background-color` property to `#8f0401`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)'); +assert(hasBackground); +``` + +Your `.two` element should have a `background-color` value of `#8f0401`. + +```js +const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color'); +assert(twoBackground === 'rgb(143, 4, 1)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-027.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-027.md new file mode 100644 index 0000000000..afe025f5d3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-027.md @@ -0,0 +1,81 @@ +--- +id: 60a3e3396c7b40068ad69984 +title: Part 27 +challengeType: 0 +dashedName: part-27 +--- + +# --description-- + +Center the `.two` element by setting its `margin` to `auto`. + +# --hints-- + +You should set the `margin` property to `auto`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto'); +assert(hasMargin); +``` + +Your `.two` element should have a `margin` value of `auto`. + +```js +const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); +assert(twoMargin === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-028.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-028.md new file mode 100644 index 0000000000..aae61ba7b7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-028.md @@ -0,0 +1,84 @@ +--- +id: 60a3e3396c7b40068ad69985 +title: Part 28 +challengeType: 0 +dashedName: part-28 +--- + +# --description-- + +Use margins to adjust the spacing between `one` and `two`. + +Change the `margin` of `.one` to `20px auto 20px` so the top margin is 20 pixels, it's centered horizontally, and the bottom margin is 20 pixels. + +# --hints-- + +You should set the `margin` property to `20px auto 20px`. + +```js +const hasMarginRegex = /20px\s*auto\s*20px/; +// TODO: Why is this stripped? Because margins are the same? +assert(hasMarginRegex.test(code)); +``` + +Your `.one` element should have a `margin` value of `20px auto 20px`. + +```js +const oneMarginRegex = /\.one\s*{[^}]*margin:\s*20px\s*auto\s*20px;?\s*}/ +assert(oneMarginRegex.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; +--fcc-editable-region-- + margin: 20px auto; +--fcc-editable-region-- +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-029.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-029.md new file mode 100644 index 0000000000..a5da2fe919 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-029.md @@ -0,0 +1,93 @@ +--- +id: 60a3e3396c7b40068ad69986 +title: Part 29 +challengeType: 0 +dashedName: part-29 +--- + +# --description-- + +Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle. + +# --hints-- + +Your existing `.one` and `.two` elements should not be changed. + +```js +assert(document.querySelectorAll('.one').length === 1); +assert(document.querySelectorAll('.two').length === 1); +``` + +Your new `div` should be nested in your `.canvas` element. + +```js +assert(document.querySelector('.canvas').children[2].tagName === 'DIV'); +``` + +Your new `div` should come after your `.two` element. + +```js +assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV'); +``` + +Your new `div` element should have a `class` with the value `three`. + +```js +assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three')); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-030.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-030.md new file mode 100644 index 0000000000..40da5bd741 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-030.md @@ -0,0 +1,94 @@ +--- +id: 60a3e3396c7b40068ad69987 +title: Part 30 +challengeType: 0 +dashedName: part-30 +--- + +# --description-- + +You don't always have to use pixels when sizing an element. + +Create a new rule, `.three`, and set its `width` to `91%`. + +# --hints-- + +You should use the `.three` selector. + +```js +const hasThree = new __helpers.CSSHelp(document).getStyle('.three'); +assert(hasThree); +``` + +You should set the `width` property to `91%`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%'); +assert(hasWidth); +``` + +Your `.three` element should have a `width` value of `91%`. + +```js +const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width'); +assert(threeWidth === '91%'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-031.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-031.md new file mode 100644 index 0000000000..25c706e373 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-031.md @@ -0,0 +1,87 @@ +--- +id: 60a3e3396c7b40068ad69988 +title: Part 31 +challengeType: 0 +dashedName: part-31 +--- + +# --description-- + +Set the `height` of `.three` to `28%`. + +# --hints-- + +You should set the `height` property to `28%`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%'); +assert(hasHeight); +``` + +Your `.three` element should have a `height` value of `28%`. + +```js +const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height'); +assert(threeHeight === '28%'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +.three { + width: 91%; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-032.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-032.md new file mode 100644 index 0000000000..9b97392a26 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-032.md @@ -0,0 +1,88 @@ +--- +id: 60a3e3396c7b40068ad69989 +title: Part 32 +challengeType: 0 +dashedName: part-32 +--- + +# --description-- + +Change the `background-color` of `.three` to `#b20403`. + +# --hints-- + +You should set the `background-color` property to `#b20403`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)'); +assert(hasBackground); +``` + +Your `.three` element should have a `background-color` value of `#b20403`. + +```js +const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color'); +assert(threeBackground === 'rgb(178, 4, 3)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +.three { + width: 91%; + height: 28%; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-033.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-033.md new file mode 100644 index 0000000000..2a662b684b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-033.md @@ -0,0 +1,89 @@ +--- +id: 60a3e3396c7b40068ad6998a +title: Part 33 +challengeType: 0 +dashedName: part-33 +--- + +# --description-- + +Center the `.three` element on the canvas by setting its `margin` to `auto`. + +# --hints-- + +You should set the `margin` property to `auto`. + +```js +const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto'); +assert(marginFilter.length === 2); +``` + +Your `.three` element should have a `margin` value of `auto`. + +```js +const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin'); +assert(threeMargin === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-034.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-034.md new file mode 100644 index 0000000000..99ad16cf8f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-034.md @@ -0,0 +1,93 @@ +--- +id: 60a3e3396c7b40068ad6998b +title: Part 34 +challengeType: 0 +dashedName: part-34 +--- + +# --description-- + +It's helpful to have your margins push in one direction. + +In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels. + +In `.two`, add `margin: 0 auto 20px;` to set its top margin to 0, center it horizontally, and set its bottom margin to 20 pixels. + +# --hints-- + +You should set the `margin` property to `0 auto 20px`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px'); +assert(hasMargin); +``` + +Your `.two` element should have a `margin` value of `0 auto 20px`. + +```js +const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); +assert(twoMargin === '0px auto 20px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; +--fcc-editable-region-- + margin: auto; +--fcc-editable-region-- +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-035.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-035.md new file mode 100644 index 0000000000..b84cdd36ee --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-035.md @@ -0,0 +1,92 @@ +--- +id: 60a3e3396c7b40068ad6998c +title: Part 35 +challengeType: 0 +dashedName: part-35 +--- + +# --description-- + +The colors and shapes of your painting are too sharp to pass as a Rothko. + +Use the `filter` property with the value `blur(2px)` in the `.canvas`. + +# --hints-- + +You should set the `filter` property to `blur(2px)`. + +```js +const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)'); +assert(hasFilter); +``` + +Your `.canvas` element should have a `filter` value of `blur(2px)`. + +```js +const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter'); +assert(canvasFilter === 'blur(2px)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-036.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-036.md new file mode 100644 index 0000000000..94b9dc0151 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-036.md @@ -0,0 +1,116 @@ +--- +id: 60a3e3396c7b40068ad6998d +title: Part 36 +challengeType: 0 +dashedName: part-36 +--- + +# --description-- + +Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel. + +Here's an example of a rule that increases the `blur` of two elements: + +```css +h1, p { + filter: blur(3px); +} +``` + +# --hints-- + +You should have a `.one, .two` selector. + +```js +const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two'); +assert(oneTwo); +``` + +You should set the `filter` property to `blur(1px)`. + +```js +const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)'); +assert(hasFilter) +``` + +Your `.one` element should have a `filter` value of `blur(1px)`. + +```js +const one = document.querySelector('.one'); +const oneFilter = getComputedStyle(one).filter; +assert(oneFilter === 'blur(1px)'); +``` + +Your `.two` element should have a filter value of `blur(1px)`. + +```js +const two = document.querySelector('.two'); +const twoFilter = getComputedStyle(two).filter; +assert(twoFilter === 'blur(1px)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-037.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-037.md new file mode 100644 index 0000000000..c5065bf2c8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-037.md @@ -0,0 +1,95 @@ +--- +id: 60a3e3396c7b40068ad6998e +title: Part 37 +challengeType: 0 +dashedName: part-37 +--- + +# --description-- + +Increase the `blur` of `.three` by 2 pixels. + +# --hints-- + +You should set the `filter` property to `blur(2px)`. + +```js +const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)'); +assert(filterFilter.length === 2); +``` + +Your `.three` element should have a `filter` value of `blur(2px)`. + +```js +const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter'); +assert(threeFilter === 'blur(2px)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-038.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-038.md new file mode 100644 index 0000000000..5735877fbf --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-038.md @@ -0,0 +1,98 @@ +--- +id: 60a3e3396c7b40068ad6998f +title: Part 38 +challengeType: 0 +dashedName: part-38 +--- + +# --description-- + +The rectangles are too small and their edges don't have the soft quality of a painting. + +Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`. + +# --hints-- + +You should set the `box-shadow` property to `0 0 3px 3px #efb762`. + +```js +const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px'); +assert(hasBoxShadow); +``` + +Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`. + +```js +const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow'); +assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-039.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-039.md new file mode 100644 index 0000000000..33ac4f6e14 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-039.md @@ -0,0 +1,97 @@ +--- +id: 60a3e3396c7b40068ad69990 +title: Part 39 +challengeType: 0 +dashedName: part-39 +--- + +# --description-- + +Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`. + +# --hints-- + +You should set the `box-shadow` property to `0 0 3px 3px #8f0401`. + +```js +const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px'); +assert(hasBoxShadow); +``` + +Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`. + +```js +const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow'); +assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-040.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-040.md new file mode 100644 index 0000000000..debeeac85c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-040.md @@ -0,0 +1,98 @@ +--- +id: 60a3e3396c7b40068ad69991 +title: Part 40 +challengeType: 0 +dashedName: part-40 +--- + +# --description-- + +Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`. + +# --hints-- + +You should set the `box-shadow` property to `0 0 5px 5px #b20403`. + +```js +const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px'); +assert(hasBoxShadow); +``` + +Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`. + +```js +const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow'); +assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-041.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-041.md new file mode 100644 index 0000000000..5b88f5c899 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-041.md @@ -0,0 +1,101 @@ +--- +id: 60a3e3396c7b40068ad69992 +title: Part 41 +challengeType: 0 +dashedName: part-41 +--- + +# --description-- + +The corners of each rectangle are still too sharp. + +Round each corner of `.one` by 9 pixels with `border-radius: 9px;`. + +# --hints-- + +You should set the `border-radius` property to `9px`. + +```js +const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px'); +assert(hasBorderRadius); +``` + +Your `.one` element should have a `border-radius` value of `9px`. + +```js +const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius'); +assert(oneBorderRadius === '9px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-042.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-042.md new file mode 100644 index 0000000000..9ffd462baa --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-042.md @@ -0,0 +1,100 @@ +--- +id: 60a3e3396c7b40068ad69993 +title: Part 42 +challengeType: 0 +dashedName: part-42 +--- + +# --description-- + +Set the `border-radius` of `.two` to `8px 10px`. This will round its top-left and bottom-right corners by 8 pixels, and top-right and bottom-left corners by 10 pixels. + +# --hints-- + +You should set the `border-radius` property to `8px 10px`. + +```js +const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px'); +assert(hasBorderRadius); +``` + +Your `.two` element should have a `border-radius` value of `8px 10px`. + +```js +const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius'); +assert(twoBorderRadius === '8px 10px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-043.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-043.md new file mode 100644 index 0000000000..ba79987408 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-043.md @@ -0,0 +1,103 @@ +--- +id: 60a3e3396c7b40068ad69994 +title: Part 43 +challengeType: 0 +dashedName: part-43 +--- + +# --description-- + +The `border-radius` property accepts up to four values to round the round the top-left, top-right, bottom-right, and bottom-left corners. + +Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels. + +# --hints-- + +You should set the `border-radius` property to `30px 25px 60px 12px`. + +```js +const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px'); +assert(hasBorderRadius); +``` + +Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`. + +```js +const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius'); +assert(threeBorderRadius === '30px 25px 60px 12px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-044.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-044.md new file mode 100644 index 0000000000..097ad49f9b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-044.md @@ -0,0 +1,104 @@ +--- +id: 60a3e3396c7b40068ad69995 +title: Part 44 +challengeType: 0 +dashedName: part-44 +--- + +# --description-- + +Rotate each rectangle to give them more of an imperfect, hand-painted look. + +Use the following to rotate `.one` counter clockwise by 0.6 degrees: `transform: rotate(-0.6deg);` + +# --hints-- + +You should set the `transform` property to `rotate(-0.6deg)`. + +```js +const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)'); +assert(hasTransform); +``` + +Your `.one` element should have a `transform` value of `rotate(-0.6deg)`. + +```js +const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform'); +assert(oneTransform === 'rotate(-0.6deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-045.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-045.md new file mode 100644 index 0000000000..1cbf7b948f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-045.md @@ -0,0 +1,103 @@ +--- +id: 60a3e3396c7b40068ad69996 +title: Part 45 +challengeType: 0 +dashedName: part-45 +--- + +# --description-- + +Rotate `.two` clockwise slightly by adding the `transform` property with the value `rotate(0.4deg)`. + +# --hints-- + +You should set the `transform` property to `rotate(0.4deg)`. + +```js +const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)'); +assert(hasTransform); +``` + +Your `.two` element should have a `transform` value of `rotate(0.4deg)`. + +```js +const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform'); +assert(twoTransform === 'rotate(0.4deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; + transform: rotate(-0.6deg); +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-046.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-046.md new file mode 100644 index 0000000000..8b1c18ed1e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-046.md @@ -0,0 +1,180 @@ +--- +id: 60a3e3396c7b40068ad69997 +title: Part 46 +challengeType: 0 +dashedName: part-46 +--- + +# --description-- + +Rotate `.three` counter clockwise by 0.2 degrees. + +With this final step, your Rothko painting is now complete. + +# --hints-- + +You should set the `transform` property to `rotate(-0.2deg)`. + +```js +const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)'); +assert(hasTransform); +``` + +Your `.three` element should have a `transform` value of `rotate(-0.2deg)`. + +```js +const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform'); +assert(threeTransform === 'rotate(-0.2deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; + transform: rotate(-0.6deg); +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; + transform: rotate(0.4deg); +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` + +## --solutions-- + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; + transform: rotate(-0.6deg); +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; + transform: rotate(0.4deg); +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; + transform: rotate(-0.2deg); +} +``` diff --git a/utils/preformatted-block-names.json b/utils/preformatted-block-names.json index 3c049e8076..90014bf477 100644 --- a/utils/preformatted-block-names.json +++ b/utils/preformatted-block-names.json @@ -21,6 +21,7 @@ "basic-html-cat-photo-app": "HTML Cat Photo App", "basic-css-cafe-menu": "CSS Cafe Menu", "css-variables-skyline": "CSS Variables Skyline", + "css-box-model": "CSS Box Model", "css-picasso-painting": "CSS Picasso Painting", "javascript-spreadsheet": "JavaScript Spreadsheet", "intermediate-javascript-calorie-counter": "Intermediate JavaScript Calorie Counter",