{
    "componentChunkName": "component---src-templates-introduction-super-block-intro-tsx",
    "path": "/learn/responsive-web-design/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"certification":"responsive-web-design","superBlock":"responsive-web-design","title":"Responsive Web Design"}},"allChallengeNode":{"edges":[{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements","blockName":"Basic HTML and HTML5"},"id":"bd7123c8c441eddfaeb5bdef","block":"basic-html-and-html5","challengeType":0,"title":"Say Hello to HTML Elements","order":0,"superBlock":"responsive-web-design","dashedName":"say-hello-to-html-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/headline-with-the-h2-element","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf0887a","block":"basic-html-and-html5","challengeType":0,"title":"Headline with the h2 Element","order":0,"superBlock":"responsive-web-design","dashedName":"headline-with-the-h2-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf08801","block":"basic-html-and-html5","challengeType":0,"title":"Inform with the Paragraph Element","order":0,"superBlock":"responsive-web-design","dashedName":"inform-with-the-paragraph-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf08833","block":"basic-html-and-html5","challengeType":0,"title":"Fill in the Blank with Placeholder Text","order":0,"superBlock":"responsive-web-design","dashedName":"fill-in-the-blank-with-placeholder-text"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/uncomment-html","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf08802","block":"basic-html-and-html5","challengeType":0,"title":"Uncomment HTML","order":0,"superBlock":"responsive-web-design","dashedName":"uncomment-html"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/comment-out-html","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf08804","block":"basic-html-and-html5","challengeType":0,"title":"Comment out HTML","order":0,"superBlock":"responsive-web-design","dashedName":"comment-out-html"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/delete-html-elements","blockName":"Basic HTML and HTML5"},"id":"bad87fed1348bd9aedf08833","block":"basic-html-and-html5","challengeType":0,"title":"Delete HTML Elements","order":0,"superBlock":"responsive-web-design","dashedName":"delete-html-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/introduction-to-html5-elements","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aecf08801","block":"basic-html-and-html5","challengeType":0,"title":"Introduction to HTML5 Elements","order":0,"superBlock":"responsive-web-design","dashedName":"introduction-to-html5-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/add-images-to-your-website","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf08812","block":"basic-html-and-html5","challengeType":0,"title":"Add Images to Your Website","order":0,"superBlock":"responsive-web-design","dashedName":"add-images-to-your-website"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf08816","block":"basic-html-and-html5","challengeType":0,"title":"Link to External Pages with Anchor Elements","order":0,"superBlock":"responsive-web-design","dashedName":"link-to-external-pages-with-anchor-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements","blockName":"Basic HTML and HTML5"},"id":"bad88fee1348bd9aedf08816","block":"basic-html-and-html5","challengeType":0,"title":"Link to Internal Sections of a Page with Anchor Elements","order":0,"superBlock":"responsive-web-design","dashedName":"link-to-internal-sections-of-a-page-with-anchor-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aede08817","block":"basic-html-and-html5","challengeType":0,"title":"Nest an Anchor Element within a Paragraph","order":0,"superBlock":"responsive-web-design","dashedName":"nest-an-anchor-element-within-a-paragraph"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf08817","block":"basic-html-and-html5","challengeType":0,"title":"Make Dead Links Using the Hash Symbol","order":0,"superBlock":"responsive-web-design","dashedName":"make-dead-links-using-the-hash-symbol"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf08820","block":"basic-html-and-html5","challengeType":0,"title":"Turn an Image into a Link","order":0,"superBlock":"responsive-web-design","dashedName":"turn-an-image-into-a-link"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf08827","block":"basic-html-and-html5","challengeType":0,"title":"Create a Bulleted Unordered List","order":0,"superBlock":"responsive-web-design","dashedName":"create-a-bulleted-unordered-list"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/create-an-ordered-list","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf08828","block":"basic-html-and-html5","challengeType":0,"title":"Create an Ordered List","order":0,"superBlock":"responsive-web-design","dashedName":"create-an-ordered-list"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/create-a-text-field","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf08829","block":"basic-html-and-html5","challengeType":0,"title":"Create a Text Field","order":0,"superBlock":"responsive-web-design","dashedName":"create-a-text-field"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf08830","block":"basic-html-and-html5","challengeType":0,"title":"Add Placeholder Text to a Text Field","order":0,"superBlock":"responsive-web-design","dashedName":"add-placeholder-text-to-a-text-field"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/create-a-form-element","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aede08830","block":"basic-html-and-html5","challengeType":0,"title":"Create a Form Element","order":0,"superBlock":"responsive-web-design","dashedName":"create-a-form-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedd08830","block":"basic-html-and-html5","challengeType":0,"title":"Add a Submit Button to a Form","order":0,"superBlock":"responsive-web-design","dashedName":"add-a-submit-button-to-a-form"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedc08830","block":"basic-html-and-html5","challengeType":0,"title":"Use HTML5 to Require a Field","order":0,"superBlock":"responsive-web-design","dashedName":"use-html5-to-require-a-field"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf08834","block":"basic-html-and-html5","challengeType":0,"title":"Create a Set of Radio Buttons","order":0,"superBlock":"responsive-web-design","dashedName":"create-a-set-of-radio-buttons"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedf08835","block":"basic-html-and-html5","challengeType":0,"title":"Create a Set of Checkboxes","order":0,"superBlock":"responsive-web-design","dashedName":"create-a-set-of-checkboxes"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes","blockName":"Basic HTML and HTML5"},"id":"5c6c06847491271903d37cfd","block":"basic-html-and-html5","challengeType":0,"title":"Use the value attribute with Radio Buttons and Checkboxes","order":0,"superBlock":"responsive-web-design","dashedName":"use-the-value-attribute-with-radio-buttons-and-checkboxes"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aedd08835","block":"basic-html-and-html5","challengeType":0,"title":"Check Radio Buttons and Checkboxes by Default","order":0,"superBlock":"responsive-web-design","dashedName":"check-radio-buttons-and-checkboxes-by-default"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element","blockName":"Basic HTML and HTML5"},"id":"bad87fee1348bd9aede08835","block":"basic-html-and-html5","challengeType":0,"title":"Nest Many Elements within a Single div Element","order":0,"superBlock":"responsive-web-design","dashedName":"nest-many-elements-within-a-single-div-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document","blockName":"Basic HTML and HTML5"},"id":"587d78aa367417b2b2512aed","block":"basic-html-and-html5","challengeType":0,"title":"Declare the Doctype of an HTML Document","order":0,"superBlock":"responsive-web-design","dashedName":"declare-the-doctype-of-an-html-document"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document","blockName":"Basic HTML and HTML5"},"id":"587d78aa367417b2b2512aec","block":"basic-html-and-html5","challengeType":0,"title":"Define the Head and Body of an HTML Document","order":0,"superBlock":"responsive-web-design","dashedName":"define-the-head-and-body-of-an-html-document"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/change-the-color-of-text","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08803","block":"basic-css","challengeType":0,"title":"Change the Color of Text","order":1,"superBlock":"responsive-web-design","dashedName":"change-the-color-of-text"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/use-css-selectors-to-style-elements","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08805","block":"basic-css","challengeType":0,"title":"Use CSS Selectors to Style Elements","order":1,"superBlock":"responsive-web-design","dashedName":"use-css-selectors-to-style-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/use-a-css-class-to-style-an-element","blockName":"Basic CSS"},"id":"bad87fee1348bd9aecf08806","block":"basic-css","challengeType":0,"title":"Use a CSS Class to Style an Element","order":1,"superBlock":"responsive-web-design","dashedName":"use-a-css-class-to-style-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/style-multiple-elements-with-a-css-class","blockName":"Basic CSS"},"id":"bad87fee1348bd9aefe08806","block":"basic-css","challengeType":0,"title":"Style Multiple Elements with a CSS Class","order":1,"superBlock":"responsive-web-design","dashedName":"style-multiple-elements-with-a-css-class"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/change-the-font-size-of-an-element","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08806","block":"basic-css","challengeType":0,"title":"Change the Font Size of an Element","order":1,"superBlock":"responsive-web-design","dashedName":"change-the-font-size-of-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/set-the-font-family-of-an-element","blockName":"Basic CSS"},"id":"bad87fee1348bd9aede08807","block":"basic-css","challengeType":0,"title":"Set the Font Family of an Element","order":1,"superBlock":"responsive-web-design","dashedName":"set-the-font-family-of-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/import-a-google-font","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08807","block":"basic-css","challengeType":0,"title":"Import a Google Font","order":1,"superBlock":"responsive-web-design","dashedName":"import-a-google-font"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/specify-how-fonts-should-degrade","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08808","block":"basic-css","challengeType":0,"title":"Specify How Fonts Should Degrade","order":1,"superBlock":"responsive-web-design","dashedName":"specify-how-fonts-should-degrade"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/size-your-images","blockName":"Basic CSS"},"id":"bad87fee1348bd9acdf08812","block":"basic-css","challengeType":0,"title":"Size Your Images","order":1,"superBlock":"responsive-web-design","dashedName":"size-your-images"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/add-borders-around-your-elements","blockName":"Basic CSS"},"id":"bad87fee1348bd9bedf08813","block":"basic-css","challengeType":0,"title":"Add Borders Around Your Elements","order":1,"superBlock":"responsive-web-design","dashedName":"add-borders-around-your-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/add-rounded-corners-with-border-radius","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08814","block":"basic-css","challengeType":0,"title":"Add Rounded Corners with border-radius","order":1,"superBlock":"responsive-web-design","dashedName":"add-rounded-corners-with-border-radius"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/make-circular-images-with-a-border-radius","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08815","block":"basic-css","challengeType":0,"title":"Make Circular Images with a border-radius","order":1,"superBlock":"responsive-web-design","dashedName":"make-circular-images-with-a-border-radius"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/give-a-background-color-to-a-div-element","blockName":"Basic CSS"},"id":"bad87fed1348bd9aede07836","block":"basic-css","challengeType":0,"title":"Give a Background Color to a div Element","order":1,"superBlock":"responsive-web-design","dashedName":"give-a-background-color-to-a-div-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/set-the-id-of-an-element","blockName":"Basic CSS"},"id":"bad87eee1348bd9aede07836","block":"basic-css","challengeType":0,"title":"Set the id of an Element","order":1,"superBlock":"responsive-web-design","dashedName":"set-the-id-of-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element","blockName":"Basic CSS"},"id":"bad87dee1348bd9aede07836","block":"basic-css","challengeType":0,"title":"Use an id Attribute to Style an Element","order":1,"superBlock":"responsive-web-design","dashedName":"use-an-id-attribute-to-style-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/adjust-the-padding-of-an-element","blockName":"Basic CSS"},"id":"bad88fee1348bd9aedf08825","block":"basic-css","challengeType":0,"title":"Adjust the Padding of an Element","order":1,"superBlock":"responsive-web-design","dashedName":"adjust-the-padding-of-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/adjust-the-margin-of-an-element","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08822","block":"basic-css","challengeType":0,"title":"Adjust the Margin of an Element","order":1,"superBlock":"responsive-web-design","dashedName":"adjust-the-margin-of-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/add-a-negative-margin-to-an-element","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08823","block":"basic-css","challengeType":0,"title":"Add a Negative Margin to an Element","order":1,"superBlock":"responsive-web-design","dashedName":"add-a-negative-margin-to-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08824","block":"basic-css","challengeType":0,"title":"Add Different Padding to Each Side of an Element","order":1,"superBlock":"responsive-web-design","dashedName":"add-different-padding-to-each-side-of-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element","blockName":"Basic CSS"},"id":"bad87fee1248bd9aedf08824","block":"basic-css","challengeType":0,"title":"Add Different Margins to Each Side of an Element","order":1,"superBlock":"responsive-web-design","dashedName":"add-different-margins-to-each-side-of-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08826","block":"basic-css","challengeType":0,"title":"Use Clockwise Notation to Specify the Padding of an Element","order":1,"superBlock":"responsive-web-design","dashedName":"use-clockwise-notation-to-specify-the-padding-of-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element","blockName":"Basic CSS"},"id":"bad87fee1348bd9afdf08726","block":"basic-css","challengeType":0,"title":"Use Clockwise Notation to Specify the Margin of an Element","order":1,"superBlock":"responsive-web-design","dashedName":"use-clockwise-notation-to-specify-the-margin-of-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/use-attribute-selectors-to-style-elements","blockName":"Basic CSS"},"id":"58c383d33e2e3259241f3076","block":"basic-css","challengeType":0,"title":"Use Attribute Selectors to Style Elements","order":1,"superBlock":"responsive-web-design","dashedName":"use-attribute-selectors-to-style-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/understand-absolute-versus-relative-units","blockName":"Basic CSS"},"id":"bad82fee1322bd9aedf08721","block":"basic-css","challengeType":0,"title":"Understand Absolute versus Relative Units","order":1,"superBlock":"responsive-web-design","dashedName":"understand-absolute-versus-relative-units"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/style-the-html-body-element","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08736","block":"basic-css","challengeType":0,"title":"Style the HTML Body Element","order":1,"superBlock":"responsive-web-design","dashedName":"style-the-html-body-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/inherit-styles-from-the-body-element","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08746","block":"basic-css","challengeType":0,"title":"Inherit Styles from the Body Element","order":1,"superBlock":"responsive-web-design","dashedName":"inherit-styles-from-the-body-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/prioritize-one-style-over-another","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08756","block":"basic-css","challengeType":0,"title":"Prioritize One Style Over Another","order":1,"superBlock":"responsive-web-design","dashedName":"prioritize-one-style-over-another"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/override-styles-in-subsequent-css","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf04756","block":"basic-css","challengeType":0,"title":"Override Styles in Subsequent CSS","order":1,"superBlock":"responsive-web-design","dashedName":"override-styles-in-subsequent-css"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes","blockName":"Basic CSS"},"id":"bad87fee1348bd8aedf06756","block":"basic-css","challengeType":0,"title":"Override Class Declarations by Styling ID Attributes","order":1,"superBlock":"responsive-web-design","dashedName":"override-class-declarations-by-styling-id-attributes"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/override-class-declarations-with-inline-styles","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf06756","block":"basic-css","challengeType":0,"title":"Override Class Declarations with Inline Styles","order":1,"superBlock":"responsive-web-design","dashedName":"override-class-declarations-with-inline-styles"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/override-all-other-styles-by-using-important","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf07756","block":"basic-css","challengeType":0,"title":"Override All Other Styles by using Important","order":1,"superBlock":"responsive-web-design","dashedName":"override-all-other-styles-by-using-important"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/use-hex-code-for-specific-colors","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08726","block":"basic-css","challengeType":0,"title":"Use Hex Code for Specific Colors","order":1,"superBlock":"responsive-web-design","dashedName":"use-hex-code-for-specific-colors"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/use-hex-code-to-mix-colors","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08721","block":"basic-css","challengeType":0,"title":"Use Hex Code to Mix Colors","order":1,"superBlock":"responsive-web-design","dashedName":"use-hex-code-to-mix-colors"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/use-abbreviated-hex-code","blockName":"Basic CSS"},"id":"bad87fee1348bd9aedf08719","block":"basic-css","challengeType":0,"title":"Use Abbreviated Hex Code","order":1,"superBlock":"responsive-web-design","dashedName":"use-abbreviated-hex-code"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/use-rgb-values-to-color-elements","blockName":"Basic CSS"},"id":"bad87fee1348bd9aede08718","block":"basic-css","challengeType":0,"title":"Use RGB values to Color Elements","order":1,"superBlock":"responsive-web-design","dashedName":"use-rgb-values-to-color-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/use-rgb-to-mix-colors","blockName":"Basic CSS"},"id":"bad82fee1348bd9aedf08721","block":"basic-css","challengeType":0,"title":"Use RGB to Mix Colors","order":1,"superBlock":"responsive-web-design","dashedName":"use-rgb-to-mix-colors"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once","blockName":"Basic CSS"},"id":"5a9d725e424fe3d0e10cad10","block":"basic-css","challengeType":0,"title":"Use CSS Variables to change several elements at once","order":1,"superBlock":"responsive-web-design","dashedName":"use-css-variables-to-change-several-elements-at-once"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/create-a-custom-css-variable","blockName":"Basic CSS"},"id":"5a9d726c424fe3d0e10cad11","block":"basic-css","challengeType":0,"title":"Create a custom CSS Variable","order":1,"superBlock":"responsive-web-design","dashedName":"create-a-custom-css-variable"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/use-a-custom-css-variable","blockName":"Basic CSS"},"id":"5a9d727a424fe3d0e10cad12","block":"basic-css","challengeType":0,"title":"Use a custom CSS Variable","order":1,"superBlock":"responsive-web-design","dashedName":"use-a-custom-css-variable"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable","blockName":"Basic CSS"},"id":"5a9d7286424fe3d0e10cad13","block":"basic-css","challengeType":0,"title":"Attach a Fallback value to a CSS Variable","order":1,"superBlock":"responsive-web-design","dashedName":"attach-a-fallback-value-to-a-css-variable"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks","blockName":"Basic CSS"},"id":"5b7d72c338cd7e35b63f3e14","block":"basic-css","challengeType":0,"title":"Improve Compatibility with Browser Fallbacks","order":1,"superBlock":"responsive-web-design","dashedName":"improve-compatibility-with-browser-fallbacks"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/inherit-css-variables","blockName":"Basic CSS"},"id":"5a9d7295424fe3d0e10cad14","block":"basic-css","challengeType":0,"title":"Inherit CSS Variables","order":1,"superBlock":"responsive-web-design","dashedName":"inherit-css-variables"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/change-a-variable-for-a-specific-area","blockName":"Basic CSS"},"id":"5a9d72a1424fe3d0e10cad15","block":"basic-css","challengeType":0,"title":"Change a variable for a specific area","order":1,"superBlock":"responsive-web-design","dashedName":"change-a-variable-for-a-specific-area"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/basic-css/use-a-media-query-to-change-a-variable","blockName":"Basic CSS"},"id":"5a9d72ad424fe3d0e10cad16","block":"basic-css","challengeType":0,"title":"Use a media query to change a variable","order":1,"superBlock":"responsive-web-design","dashedName":"use-a-media-query-to-change-a-variable"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property","blockName":"Applied Visual Design"},"id":"587d7791367417b2b2512ab3","block":"applied-visual-design","challengeType":0,"title":"Create Visual Balance Using the text-align Property","order":2,"superBlock":"responsive-web-design","dashedName":"create-visual-balance-using-the-text-align-property"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property","blockName":"Applied Visual Design"},"id":"587d7791367417b2b2512ab4","block":"applied-visual-design","challengeType":0,"title":"Adjust the Width of an Element Using the width Property","order":2,"superBlock":"responsive-web-design","dashedName":"adjust-the-width-of-an-element-using-the-width-property"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property","blockName":"Applied Visual Design"},"id":"587d7791367417b2b2512ab5","block":"applied-visual-design","challengeType":0,"title":"Adjust the Height of an Element Using the height Property","order":2,"superBlock":"responsive-web-design","dashedName":"adjust-the-height-of-an-element-using-the-height-property"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold","blockName":"Applied Visual Design"},"id":"587d781a367417b2b2512ab7","block":"applied-visual-design","challengeType":0,"title":"Use the strong Tag to Make Text Bold","order":2,"superBlock":"responsive-web-design","dashedName":"use-the-strong-tag-to-make-text-bold"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text","blockName":"Applied Visual Design"},"id":"587d781a367417b2b2512ab8","block":"applied-visual-design","challengeType":0,"title":"Use the u Tag to Underline Text","order":2,"superBlock":"responsive-web-design","dashedName":"use-the-u-tag-to-underline-text"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text","blockName":"Applied Visual Design"},"id":"587d781a367417b2b2512ab9","block":"applied-visual-design","challengeType":0,"title":"Use the em Tag to Italicize Text","order":2,"superBlock":"responsive-web-design","dashedName":"use-the-em-tag-to-italicize-text"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text","blockName":"Applied Visual Design"},"id":"587d781b367417b2b2512aba","block":"applied-visual-design","challengeType":0,"title":"Use the s Tag to Strikethrough Text","order":2,"superBlock":"responsive-web-design","dashedName":"use-the-s-tag-to-strikethrough-text"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element","blockName":"Applied Visual Design"},"id":"587d781b367417b2b2512abb","block":"applied-visual-design","challengeType":0,"title":"Create a Horizontal Line Using the hr Element","order":2,"superBlock":"responsive-web-design","dashedName":"create-a-horizontal-line-using-the-hr-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text","blockName":"Applied Visual Design"},"id":"587d781b367417b2b2512abc","block":"applied-visual-design","challengeType":0,"title":"Adjust the background-color Property of Text","order":2,"superBlock":"responsive-web-design","dashedName":"adjust-the-background-color-property-of-text"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/adjust-the-size-of-a-heading-element-versus-a-paragraph-element","blockName":"Applied Visual Design"},"id":"587d781b367417b2b2512abd","block":"applied-visual-design","challengeType":0,"title":"Adjust the Size of a Heading Element Versus a Paragraph Element","order":2,"superBlock":"responsive-web-design","dashedName":"adjust-the-size-of-a-heading-element-versus-a-paragraph-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element","blockName":"Applied Visual Design"},"id":"587d781b367417b2b2512abe","block":"applied-visual-design","challengeType":0,"title":"Add a box-shadow to a Card-like Element","order":2,"superBlock":"responsive-web-design","dashedName":"add-a-box-shadow-to-a-card-like-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element","blockName":"Applied Visual Design"},"id":"587d781c367417b2b2512abf","block":"applied-visual-design","challengeType":0,"title":"Decrease the Opacity of an Element","order":2,"superBlock":"responsive-web-design","dashedName":"decrease-the-opacity-of-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase","blockName":"Applied Visual Design"},"id":"587d781c367417b2b2512ac0","block":"applied-visual-design","challengeType":0,"title":"Use the text-transform Property to Make Text Uppercase","order":2,"superBlock":"responsive-web-design","dashedName":"use-the-text-transform-property-to-make-text-uppercase"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements","blockName":"Applied Visual Design"},"id":"587d781c367417b2b2512ac2","block":"applied-visual-design","challengeType":0,"title":"Set the font-size for Multiple Heading Elements","order":2,"superBlock":"responsive-web-design","dashedName":"set-the-font-size-for-multiple-heading-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements","blockName":"Applied Visual Design"},"id":"587d781c367417b2b2512ac3","block":"applied-visual-design","challengeType":0,"title":"Set the font-weight for Multiple Heading Elements","order":2,"superBlock":"responsive-web-design","dashedName":"set-the-font-weight-for-multiple-heading-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text","blockName":"Applied Visual Design"},"id":"587d781c367417b2b2512ac4","block":"applied-visual-design","challengeType":0,"title":"Set the font-size of Paragraph Text","order":2,"superBlock":"responsive-web-design","dashedName":"set-the-font-size-of-paragraph-text"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs","blockName":"Applied Visual Design"},"id":"587d781d367417b2b2512ac5","block":"applied-visual-design","challengeType":0,"title":"Set the line-height of Paragraphs","order":2,"superBlock":"responsive-web-design","dashedName":"set-the-line-height-of-paragraphs"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag","blockName":"Applied Visual Design"},"id":"587d781d367417b2b2512ac8","block":"applied-visual-design","challengeType":0,"title":"Adjust the Hover State of an Anchor Tag","order":2,"superBlock":"responsive-web-design","dashedName":"adjust-the-hover-state-of-an-anchor-tag"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/change-an-elements-relative-position","blockName":"Applied Visual Design"},"id":"587d781e367417b2b2512ac9","block":"applied-visual-design","challengeType":0,"title":"Change an Element's Relative Position","order":2,"superBlock":"responsive-web-design","dashedName":"change-an-elements-relative-position"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets","blockName":"Applied Visual Design"},"id":"587d781e367417b2b2512aca","block":"applied-visual-design","challengeType":0,"title":"Move a Relatively Positioned Element with CSS Offsets","order":2,"superBlock":"responsive-web-design","dashedName":"move-a-relatively-positioned-element-with-css-offsets"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning","blockName":"Applied Visual Design"},"id":"587d781e367417b2b2512acb","block":"applied-visual-design","challengeType":0,"title":"Lock an Element to its Parent with Absolute Positioning","order":2,"superBlock":"responsive-web-design","dashedName":"lock-an-element-to-its-parent-with-absolute-positioning"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning","blockName":"Applied Visual Design"},"id":"587d781e367417b2b2512acc","block":"applied-visual-design","challengeType":0,"title":"Lock an Element to the Browser Window with Fixed Positioning","order":2,"superBlock":"responsive-web-design","dashedName":"lock-an-element-to-the-browser-window-with-fixed-positioning"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property","blockName":"Applied Visual Design"},"id":"587d78a3367417b2b2512ace","block":"applied-visual-design","challengeType":0,"title":"Push Elements Left or Right with the float Property","order":2,"superBlock":"responsive-web-design","dashedName":"push-elements-left-or-right-with-the-float-property"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property","blockName":"Applied Visual Design"},"id":"587d78a3367417b2b2512acf","block":"applied-visual-design","challengeType":0,"title":"Change the Position of Overlapping Elements with the z-index Property","order":2,"superBlock":"responsive-web-design","dashedName":"change-the-position-of-overlapping-elements-with-the-z-index-property"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property","blockName":"Applied Visual Design"},"id":"587d78a3367417b2b2512ad0","block":"applied-visual-design","challengeType":0,"title":"Center an Element Horizontally Using the margin Property","order":2,"superBlock":"responsive-web-design","dashedName":"center-an-element-horizontally-using-the-margin-property"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/learn-about-complementary-colors","blockName":"Applied Visual Design"},"id":"587d78a3367417b2b2512ad1","block":"applied-visual-design","challengeType":0,"title":"Learn about Complementary Colors","order":2,"superBlock":"responsive-web-design","dashedName":"learn-about-complementary-colors"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/learn-about-tertiary-colors","blockName":"Applied Visual Design"},"id":"587d78a4367417b2b2512ad2","block":"applied-visual-design","challengeType":0,"title":"Learn about Tertiary Colors","order":2,"superBlock":"responsive-web-design","dashedName":"learn-about-tertiary-colors"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors","blockName":"Applied Visual Design"},"id":"587d78a4367417b2b2512ad3","block":"applied-visual-design","challengeType":0,"title":"Adjust the Color of Various Elements to Complementary Colors","order":2,"superBlock":"responsive-web-design","dashedName":"adjust-the-color-of-various-elements-to-complementary-colors"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color","blockName":"Applied Visual Design"},"id":"587d78a4367417b2b2512ad4","block":"applied-visual-design","challengeType":0,"title":"Adjust the Hue of a Color","order":2,"superBlock":"responsive-web-design","dashedName":"adjust-the-hue-of-a-color"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color","blockName":"Applied Visual Design"},"id":"587d78a4367417b2b2512ad5","block":"applied-visual-design","challengeType":0,"title":"Adjust the Tone of a Color","order":2,"superBlock":"responsive-web-design","dashedName":"adjust-the-tone-of-a-color"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient","blockName":"Applied Visual Design"},"id":"587d78a5367417b2b2512ad6","block":"applied-visual-design","challengeType":0,"title":"Create a Gradual CSS Linear Gradient","order":2,"superBlock":"responsive-web-design","dashedName":"create-a-gradual-css-linear-gradient"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element","blockName":"Applied Visual Design"},"id":"587d78a5367417b2b2512ad7","block":"applied-visual-design","challengeType":0,"title":"Use a CSS Linear Gradient to Create a Striped Element","order":2,"superBlock":"responsive-web-design","dashedName":"use-a-css-linear-gradient-to-create-a-striped-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image","blockName":"Applied Visual Design"},"id":"587d78a5367417b2b2512ad8","block":"applied-visual-design","challengeType":0,"title":"Create Texture by Adding a Subtle Pattern as a Background Image","order":2,"superBlock":"responsive-web-design","dashedName":"create-texture-by-adding-a-subtle-pattern-as-a-background-image"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element","blockName":"Applied Visual Design"},"id":"587d78a5367417b2b2512ad9","block":"applied-visual-design","challengeType":0,"title":"Use the CSS Transform scale Property to Change the Size of an Element","order":2,"superBlock":"responsive-web-design","dashedName":"use-the-css-transform-scale-property-to-change-the-size-of-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover","blockName":"Applied Visual Design"},"id":"587d78a5367417b2b2512ada","block":"applied-visual-design","challengeType":0,"title":"Use the CSS Transform scale Property to Scale an Element on Hover","order":2,"superBlock":"responsive-web-design","dashedName":"use-the-css-transform-scale-property-to-scale-an-element-on-hover"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis","blockName":"Applied Visual Design"},"id":"587d78a6367417b2b2512adb","block":"applied-visual-design","challengeType":0,"title":"Use the CSS Transform Property skewX to Skew an Element Along the X-Axis","order":2,"superBlock":"responsive-web-design","dashedName":"use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis","blockName":"Applied Visual Design"},"id":"587d78a6367417b2b2512adc","block":"applied-visual-design","challengeType":0,"title":"Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis","order":2,"superBlock":"responsive-web-design","dashedName":"use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/create-a-graphic-using-css","blockName":"Applied Visual Design"},"id":"587d78a6367417b2b2512add","block":"applied-visual-design","challengeType":0,"title":"Create a Graphic Using CSS","order":2,"superBlock":"responsive-web-design","dashedName":"create-a-graphic-using-css"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html","blockName":"Applied Visual Design"},"id":"587d78a6367417b2b2512ade","block":"applied-visual-design","challengeType":0,"title":"Create a More Complex Shape Using CSS and HTML","order":2,"superBlock":"responsive-web-design","dashedName":"create-a-more-complex-shape-using-css-and-html"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work","blockName":"Applied Visual Design"},"id":"587d78a7367417b2b2512adf","block":"applied-visual-design","challengeType":0,"title":"Learn How the CSS @keyframes and animation Properties Work","order":2,"superBlock":"responsive-web-design","dashedName":"learn-how-the-css-keyframes-and-animation-properties-work"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button","blockName":"Applied Visual Design"},"id":"587d78a7367417b2b2512ae0","block":"applied-visual-design","challengeType":0,"title":"Use CSS Animation to Change the Hover State of a Button","order":2,"superBlock":"responsive-web-design","dashedName":"use-css-animation-to-change-the-hover-state-of-a-button"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation","blockName":"Applied Visual Design"},"id":"58a7a6ebf9a6318348e2d5aa","block":"applied-visual-design","challengeType":0,"title":"Modify Fill Mode of an Animation","order":2,"superBlock":"responsive-web-design","dashedName":"modify-fill-mode-of-an-animation"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/create-movement-using-css-animation","blockName":"Applied Visual Design"},"id":"587d78a7367417b2b2512ae1","block":"applied-visual-design","challengeType":0,"title":"Create Movement Using CSS Animation","order":2,"superBlock":"responsive-web-design","dashedName":"create-movement-using-css-animation"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right","blockName":"Applied Visual Design"},"id":"587d78a7367417b2b2512ae2","block":"applied-visual-design","challengeType":0,"title":"Create Visual Direction by Fading an Element from Left to Right","order":2,"superBlock":"responsive-web-design","dashedName":"create-visual-direction-by-fading-an-element-from-left-to-right"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count","blockName":"Applied Visual Design"},"id":"587d78a8367417b2b2512ae3","block":"applied-visual-design","challengeType":0,"title":"Animate Elements Continually Using an Infinite Animation Count","order":2,"superBlock":"responsive-web-design","dashedName":"animate-elements-continually-using-an-infinite-animation-count"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count","blockName":"Applied Visual Design"},"id":"587d78a8367417b2b2512ae4","block":"applied-visual-design","challengeType":0,"title":"Make a CSS Heartbeat using an Infinite Animation Count","order":2,"superBlock":"responsive-web-design","dashedName":"make-a-css-heartbeat-using-an-infinite-animation-count"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/animate-elements-at-variable-rates","blockName":"Applied Visual Design"},"id":"587d78a8367417b2b2512ae5","block":"applied-visual-design","challengeType":0,"title":"Animate Elements at Variable Rates","order":2,"superBlock":"responsive-web-design","dashedName":"animate-elements-at-variable-rates"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates","blockName":"Applied Visual Design"},"id":"587d78a8367417b2b2512ae6","block":"applied-visual-design","challengeType":0,"title":"Animate Multiple Elements at Variable Rates","order":2,"superBlock":"responsive-web-design","dashedName":"animate-multiple-elements-at-variable-rates"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/change-animation-timing-with-keywords","blockName":"Applied Visual Design"},"id":"587d78a8367417b2b2512ae7","block":"applied-visual-design","challengeType":0,"title":"Change Animation Timing with Keywords","order":2,"superBlock":"responsive-web-design","dashedName":"change-animation-timing-with-keywords"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/learn-how-bezier-curves-work","blockName":"Applied Visual Design"},"id":"587d78a9367417b2b2512ae8","block":"applied-visual-design","challengeType":0,"title":"Learn How Bezier Curves Work","order":2,"superBlock":"responsive-web-design","dashedName":"learn-how-bezier-curves-work"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic","blockName":"Applied Visual Design"},"id":"587d78a9367417b2b2512ae9","block":"applied-visual-design","challengeType":0,"title":"Use a Bezier Curve to Move a Graphic","order":2,"superBlock":"responsive-web-design","dashedName":"use-a-bezier-curve-to-move-a-graphic"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve","blockName":"Applied Visual Design"},"id":"587d78a9367417b2b2512aea","block":"applied-visual-design","challengeType":0,"title":"Make Motion More Natural Using a Bezier Curve","order":2,"superBlock":"responsive-web-design","dashedName":"make-motion-more-natural-using-a-bezier-curve"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility","blockName":"Applied Accessibility"},"id":"587d774c367417b2b2512a9c","block":"applied-accessibility","challengeType":0,"title":"Add a Text Alternative to Images for Visually Impaired Accessibility","order":3,"superBlock":"responsive-web-design","dashedName":"add-a-text-alternative-to-images-for-visually-impaired-accessibility"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank","blockName":"Applied Accessibility"},"id":"587d774c367417b2b2512a9d","block":"applied-accessibility","challengeType":0,"title":"Know When Alt Text Should be Left Blank","order":3,"superBlock":"responsive-web-design","dashedName":"know-when-alt-text-should-be-left-blank"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content","blockName":"Applied Accessibility"},"id":"587d774d367417b2b2512a9e","block":"applied-accessibility","challengeType":0,"title":"Use Headings to Show Hierarchical Relationships of Content","order":3,"superBlock":"responsive-web-design","dashedName":"use-headings-to-show-hierarchical-relationships-of-content"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element","blockName":"Applied Accessibility"},"id":"587d774e367417b2b2512a9f","block":"applied-accessibility","challengeType":0,"title":"Jump Straight to the Content Using the main Element","order":3,"superBlock":"responsive-web-design","dashedName":"jump-straight-to-the-content-using-the-main-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/wrap-content-in-the-article-element","blockName":"Applied Accessibility"},"id":"587d774e367417b2b2512aa0","block":"applied-accessibility","challengeType":0,"title":"Wrap Content in the article Element","order":3,"superBlock":"responsive-web-design","dashedName":"wrap-content-in-the-article-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark","blockName":"Applied Accessibility"},"id":"587d7787367417b2b2512aa1","block":"applied-accessibility","challengeType":0,"title":"Make Screen Reader Navigation Easier with the header Landmark","order":3,"superBlock":"responsive-web-design","dashedName":"make-screen-reader-navigation-easier-with-the-header-landmark"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark","blockName":"Applied Accessibility"},"id":"587d7788367417b2b2512aa2","block":"applied-accessibility","challengeType":0,"title":"Make Screen Reader Navigation Easier with the nav Landmark","order":3,"superBlock":"responsive-web-design","dashedName":"make-screen-reader-navigation-easier-with-the-nav-landmark"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark","blockName":"Applied Accessibility"},"id":"587d7788367417b2b2512aa3","block":"applied-accessibility","challengeType":0,"title":"Make Screen Reader Navigation Easier with the footer Landmark","order":3,"superBlock":"responsive-web-design","dashedName":"make-screen-reader-navigation-easier-with-the-footer-landmark"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element","blockName":"Applied Accessibility"},"id":"587d7789367417b2b2512aa4","block":"applied-accessibility","challengeType":0,"title":"Improve Accessibility of Audio Content with the audio Element","order":3,"superBlock":"responsive-web-design","dashedName":"improve-accessibility-of-audio-content-with-the-audio-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element","blockName":"Applied Accessibility"},"id":"587d778a367417b2b2512aa5","block":"applied-accessibility","challengeType":0,"title":"Improve Chart Accessibility with the figure Element","order":3,"superBlock":"responsive-web-design","dashedName":"improve-chart-accessibility-with-the-figure-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element","blockName":"Applied Accessibility"},"id":"587d778a367417b2b2512aa6","block":"applied-accessibility","challengeType":0,"title":"Improve Form Field Accessibility with the label Element","order":3,"superBlock":"responsive-web-design","dashedName":"improve-form-field-accessibility-with-the-label-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility","blockName":"Applied Accessibility"},"id":"587d778b367417b2b2512aa7","block":"applied-accessibility","challengeType":0,"title":"Wrap Radio Buttons in a fieldset Element for Better Accessibility","order":3,"superBlock":"responsive-web-design","dashedName":"wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/add-an-accessible-date-picker","blockName":"Applied Accessibility"},"id":"587d778b367417b2b2512aa8","block":"applied-accessibility","challengeType":0,"title":"Add an Accessible Date Picker","order":3,"superBlock":"responsive-web-design","dashedName":"add-an-accessible-date-picker"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute","blockName":"Applied Accessibility"},"id":"587d778c367417b2b2512aa9","block":"applied-accessibility","challengeType":0,"title":"Standardize Times with the HTML5 datetime Attribute","order":3,"superBlock":"responsive-web-design","dashedName":"standardize-times-with-the-html5-datetime-attribute"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css","blockName":"Applied Accessibility"},"id":"587d778d367417b2b2512aaa","block":"applied-accessibility","challengeType":0,"title":"Make Elements Only Visible to a Screen Reader by Using Custom CSS","order":3,"superBlock":"responsive-web-design","dashedName":"make-elements-only-visible-to-a-screen-reader-by-using-custom-css"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text","blockName":"Applied Accessibility"},"id":"587d778e367417b2b2512aab","block":"applied-accessibility","challengeType":0,"title":"Improve Readability with High Contrast Text","order":3,"superBlock":"responsive-web-design","dashedName":"improve-readability-with-high-contrast-text"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast","blockName":"Applied Accessibility"},"id":"587d778f367417b2b2512aac","block":"applied-accessibility","challengeType":0,"title":"Avoid Colorblindness Issues by Using Sufficient Contrast","order":3,"superBlock":"responsive-web-design","dashedName":"avoid-colorblindness-issues-by-using-sufficient-contrast"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information","blockName":"Applied Accessibility"},"id":"587d778f367417b2b2512aad","block":"applied-accessibility","challengeType":0,"title":"Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information","order":3,"superBlock":"responsive-web-design","dashedName":"avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text","blockName":"Applied Accessibility"},"id":"587d778f367417b2b2512aae","block":"applied-accessibility","challengeType":0,"title":"Give Links Meaning by Using Descriptive Link Text","order":3,"superBlock":"responsive-web-design","dashedName":"give-links-meaning-by-using-descriptive-link-text"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys","blockName":"Applied Accessibility"},"id":"587d7790367417b2b2512aaf","block":"applied-accessibility","challengeType":0,"title":"Make Links Navigable with HTML Access Keys","order":3,"superBlock":"responsive-web-design","dashedName":"make-links-navigable-with-html-access-keys"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element","blockName":"Applied Accessibility"},"id":"587d7790367417b2b2512ab0","block":"applied-accessibility","challengeType":0,"title":"Use tabindex to Add Keyboard Focus to an Element","order":3,"superBlock":"responsive-web-design","dashedName":"use-tabindex-to-add-keyboard-focus-to-an-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements","blockName":"Applied Accessibility"},"id":"587d7790367417b2b2512ab1","block":"applied-accessibility","challengeType":0,"title":"Use tabindex to Specify the Order of Keyboard Focus for Several Elements","order":3,"superBlock":"responsive-web-design","dashedName":"use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/responsive-web-design-principles/create-a-media-query","blockName":"Responsive Web Design Principles"},"id":"587d78b0367417b2b2512b08","block":"responsive-web-design-principles","challengeType":0,"title":"Create a Media Query","order":4,"superBlock":"responsive-web-design","dashedName":"create-a-media-query"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/responsive-web-design-principles/make-an-image-responsive","blockName":"Responsive Web Design Principles"},"id":"587d78b1367417b2b2512b09","block":"responsive-web-design-principles","challengeType":0,"title":"Make an Image Responsive","order":4,"superBlock":"responsive-web-design","dashedName":"make-an-image-responsive"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays","blockName":"Responsive Web Design Principles"},"id":"587d78b1367417b2b2512b0a","block":"responsive-web-design-principles","challengeType":0,"title":"Use a Retina Image for Higher Resolution Displays","order":4,"superBlock":"responsive-web-design","dashedName":"use-a-retina-image-for-higher-resolution-displays"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/responsive-web-design-principles/make-typography-responsive","blockName":"Responsive Web Design Principles"},"id":"587d78b1367417b2b2512b0c","block":"responsive-web-design-principles","challengeType":0,"title":"Make Typography Responsive","order":4,"superBlock":"responsive-web-design","dashedName":"make-typography-responsive"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes","blockName":"CSS Flexbox"},"id":"587d78ab367417b2b2512af0","block":"css-flexbox","challengeType":0,"title":"Use display: flex to Position Two Boxes","order":5,"superBlock":"responsive-web-design","dashedName":"use-display-flex-to-position-two-boxes"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed","blockName":"CSS Flexbox"},"id":"587d78ab367417b2b2512af1","block":"css-flexbox","challengeType":0,"title":"Add Flex Superpowers to the Tweet Embed","order":5,"superBlock":"responsive-web-design","dashedName":"add-flex-superpowers-to-the-tweet-embed"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row","blockName":"CSS Flexbox"},"id":"587d78ab367417b2b2512af2","block":"css-flexbox","challengeType":0,"title":"Use the flex-direction Property to Make a Row","order":5,"superBlock":"responsive-web-design","dashedName":"use-the-flex-direction-property-to-make-a-row"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed","blockName":"CSS Flexbox"},"id":"587d78ab367417b2b2512af3","block":"css-flexbox","challengeType":0,"title":"Apply the flex-direction Property to Create Rows in the Tweet Embed","order":5,"superBlock":"responsive-web-design","dashedName":"apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column","blockName":"CSS Flexbox"},"id":"587d78ac367417b2b2512af4","block":"css-flexbox","challengeType":0,"title":"Use the flex-direction Property to Make a Column","order":5,"superBlock":"responsive-web-design","dashedName":"use-the-flex-direction-property-to-make-a-column"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed","blockName":"CSS Flexbox"},"id":"587d78ac367417b2b2512af5","block":"css-flexbox","challengeType":0,"title":"Apply the flex-direction Property to Create a Column in the Tweet Embed","order":5,"superBlock":"responsive-web-design","dashedName":"apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property","blockName":"CSS Flexbox"},"id":"587d78ac367417b2b2512af6","block":"css-flexbox","challengeType":0,"title":"Align Elements Using the justify-content Property","order":5,"superBlock":"responsive-web-design","dashedName":"align-elements-using-the-justify-content-property"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed","blockName":"CSS Flexbox"},"id":"587d78ac367417b2b2512af7","block":"css-flexbox","challengeType":0,"title":"Use the justify-content Property in the Tweet Embed","order":5,"superBlock":"responsive-web-design","dashedName":"use-the-justify-content-property-in-the-tweet-embed"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/align-elements-using-the-align-items-property","blockName":"CSS Flexbox"},"id":"587d78ad367417b2b2512af8","block":"css-flexbox","challengeType":0,"title":"Align Elements Using the align-items Property","order":5,"superBlock":"responsive-web-design","dashedName":"align-elements-using-the-align-items-property"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed","blockName":"CSS Flexbox"},"id":"587d78ad367417b2b2512af9","block":"css-flexbox","challengeType":0,"title":"Use the align-items Property in the Tweet Embed","order":5,"superBlock":"responsive-web-design","dashedName":"use-the-align-items-property-in-the-tweet-embed"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column","blockName":"CSS Flexbox"},"id":"587d78ad367417b2b2512afa","block":"css-flexbox","challengeType":0,"title":"Use the flex-wrap Property to Wrap a Row or Column","order":5,"superBlock":"responsive-web-design","dashedName":"use-the-flex-wrap-property-to-wrap-a-row-or-column"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items","blockName":"CSS Flexbox"},"id":"587d78ad367417b2b2512afb","block":"css-flexbox","challengeType":0,"title":"Use the flex-shrink Property to Shrink Items","order":5,"superBlock":"responsive-web-design","dashedName":"use-the-flex-shrink-property-to-shrink-items"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items","blockName":"CSS Flexbox"},"id":"587d78ae367417b2b2512afc","block":"css-flexbox","challengeType":0,"title":"Use the flex-grow Property to Expand Items","order":5,"superBlock":"responsive-web-design","dashedName":"use-the-flex-grow-property-to-expand-items"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item","blockName":"CSS Flexbox"},"id":"587d78ae367417b2b2512afd","block":"css-flexbox","challengeType":0,"title":"Use the flex-basis Property to Set the Initial Size of an Item","order":5,"superBlock":"responsive-web-design","dashedName":"use-the-flex-basis-property-to-set-the-initial-size-of-an-item"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/use-the-flex-shorthand-property","blockName":"CSS Flexbox"},"id":"587d78ae367417b2b2512afe","block":"css-flexbox","challengeType":0,"title":"Use the flex Shorthand Property","order":5,"superBlock":"responsive-web-design","dashedName":"use-the-flex-shorthand-property"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items","blockName":"CSS Flexbox"},"id":"587d78ae367417b2b2512aff","block":"css-flexbox","challengeType":0,"title":"Use the order Property to Rearrange Items","order":5,"superBlock":"responsive-web-design","dashedName":"use-the-order-property-to-rearrange-items"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-flexbox/use-the-align-self-property","blockName":"CSS Flexbox"},"id":"587d78af367417b2b2512b00","block":"css-flexbox","challengeType":0,"title":"Use the align-self Property","order":5,"superBlock":"responsive-web-design","dashedName":"use-the-align-self-property"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/create-your-first-css-grid","blockName":"CSS Grid"},"id":"5a858944d96184f06fd60d61","block":"css-grid","challengeType":0,"title":"Create Your First CSS Grid","order":6,"superBlock":"responsive-web-design","dashedName":"create-your-first-css-grid"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/add-columns-with-grid-template-columns","blockName":"CSS Grid"},"id":"5a9036d038fddaf9a66b5d32","block":"css-grid","challengeType":0,"title":"Add Columns with grid-template-columns","order":6,"superBlock":"responsive-web-design","dashedName":"add-columns-with-grid-template-columns"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/add-rows-with-grid-template-rows","blockName":"CSS Grid"},"id":"5a9036e138fddaf9a66b5d33","block":"css-grid","challengeType":0,"title":"Add Rows with grid-template-rows","order":6,"superBlock":"responsive-web-design","dashedName":"add-rows-with-grid-template-rows"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows","blockName":"CSS Grid"},"id":"5a9036ee38fddaf9a66b5d34","block":"css-grid","challengeType":0,"title":"Use CSS Grid units to Change the Size of Columns and Rows","order":6,"superBlock":"responsive-web-design","dashedName":"use-css-grid-units-to-change-the-size-of-columns-and-rows"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap","blockName":"CSS Grid"},"id":"5a9036ee38fddaf9a66b5d35","block":"css-grid","challengeType":0,"title":"Create a Column Gap Using grid-column-gap","order":6,"superBlock":"responsive-web-design","dashedName":"create-a-column-gap-using-grid-column-gap"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap","blockName":"CSS Grid"},"id":"5a9036ee38fddaf9a66b5d36","block":"css-grid","challengeType":0,"title":"Create a Row Gap using grid-row-gap","order":6,"superBlock":"responsive-web-design","dashedName":"create-a-row-gap-using-grid-row-gap"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/add-gaps-faster-with-grid-gap","blockName":"CSS Grid"},"id":"5a9036ee38fddaf9a66b5d37","block":"css-grid","challengeType":0,"title":"Add Gaps Faster with grid-gap","order":6,"superBlock":"responsive-web-design","dashedName":"add-gaps-faster-with-grid-gap"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/use-grid-column-to-control-spacing","blockName":"CSS Grid"},"id":"5a90372638fddaf9a66b5d38","block":"css-grid","challengeType":0,"title":"Use grid-column to Control Spacing","order":6,"superBlock":"responsive-web-design","dashedName":"use-grid-column-to-control-spacing"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/use-grid-row-to-control-spacing","blockName":"CSS Grid"},"id":"5a90373638fddaf9a66b5d39","block":"css-grid","challengeType":0,"title":"Use grid-row to Control Spacing","order":6,"superBlock":"responsive-web-design","dashedName":"use-grid-row-to-control-spacing"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self","blockName":"CSS Grid"},"id":"5a90374338fddaf9a66b5d3a","block":"css-grid","challengeType":0,"title":"Align an Item Horizontally using justify-self","order":6,"superBlock":"responsive-web-design","dashedName":"align-an-item-horizontally-using-justify-self"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/align-an-item-vertically-using-align-self","blockName":"CSS Grid"},"id":"5a90375238fddaf9a66b5d3b","block":"css-grid","challengeType":0,"title":"Align an Item Vertically using align-self","order":6,"superBlock":"responsive-web-design","dashedName":"align-an-item-vertically-using-align-self"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items","blockName":"CSS Grid"},"id":"5a90376038fddaf9a66b5d3c","block":"css-grid","challengeType":0,"title":"Align All Items Horizontally using justify-items","order":6,"superBlock":"responsive-web-design","dashedName":"align-all-items-horizontally-using-justify-items"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/align-all-items-vertically-using-align-items","blockName":"CSS Grid"},"id":"5a94fdf869fb03452672e45b","block":"css-grid","challengeType":0,"title":"Align All Items Vertically using align-items","order":6,"superBlock":"responsive-web-design","dashedName":"align-all-items-vertically-using-align-items"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/divide-the-grid-into-an-area-template","blockName":"CSS Grid"},"id":"5a94fe0569fb03452672e45c","block":"css-grid","challengeType":0,"title":"Divide the Grid Into an Area Template","order":6,"superBlock":"responsive-web-design","dashedName":"divide-the-grid-into-an-area-template"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property","blockName":"CSS Grid"},"id":"5a94fe1369fb03452672e45d","block":"css-grid","challengeType":0,"title":"Place Items in Grid Areas Using the grid-area Property","order":6,"superBlock":"responsive-web-design","dashedName":"place-items-in-grid-areas-using-the-grid-area-property"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template","blockName":"CSS Grid"},"id":"5a94fe2669fb03452672e45e","block":"css-grid","challengeType":0,"title":"Use grid-area Without Creating an Areas Template","order":6,"superBlock":"responsive-web-design","dashedName":"use-grid-area-without-creating-an-areas-template"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function","blockName":"CSS Grid"},"id":"5a94fe3669fb03452672e45f","block":"css-grid","challengeType":0,"title":"Reduce Repetition Using the repeat Function","order":6,"superBlock":"responsive-web-design","dashedName":"reduce-repetition-using-the-repeat-function"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/limit-item-size-using-the-minmax-function","blockName":"CSS Grid"},"id":"5a94fe4469fb03452672e460","block":"css-grid","challengeType":0,"title":"Limit Item Size Using the minmax Function","order":6,"superBlock":"responsive-web-design","dashedName":"limit-item-size-using-the-minmax-function"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill","blockName":"CSS Grid"},"id":"5a94fe5469fb03452672e461","block":"css-grid","challengeType":0,"title":"Create Flexible Layouts Using auto-fill","order":6,"superBlock":"responsive-web-design","dashedName":"create-flexible-layouts-using-auto-fill"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit","blockName":"CSS Grid"},"id":"5a94fe6269fb03452672e462","block":"css-grid","challengeType":0,"title":"Create Flexible Layouts Using auto-fit","order":6,"superBlock":"responsive-web-design","dashedName":"create-flexible-layouts-using-auto-fit"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts","blockName":"CSS Grid"},"id":"5a94fe7769fb03452672e463","block":"css-grid","challengeType":0,"title":"Use Media Queries to Create Responsive Layouts","order":6,"superBlock":"responsive-web-design","dashedName":"use-media-queries-to-create-responsive-layouts"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/css-grid/create-grids-within-grids","blockName":"CSS Grid"},"id":"5a94fe8569fb03452672e464","block":"css-grid","challengeType":0,"title":"Create Grids within Grids","order":6,"superBlock":"responsive-web-design","dashedName":"create-grids-within-grids"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page","blockName":"Responsive Web Design Projects"},"id":"bd7158d8c442eddfaeb5bd18","block":"responsive-web-design-projects","challengeType":3,"title":"Build a Tribute Page","order":7,"superBlock":"responsive-web-design","dashedName":"build-a-tribute-page"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/responsive-web-design-projects/build-a-survey-form","blockName":"Responsive Web Design Projects"},"id":"587d78af367417b2b2512b03","block":"responsive-web-design-projects","challengeType":3,"title":"Build a Survey Form","order":7,"superBlock":"responsive-web-design","dashedName":"build-a-survey-form"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page","blockName":"Responsive Web Design Projects"},"id":"587d78af367417b2b2512b04","block":"responsive-web-design-projects","challengeType":3,"title":"Build a Product Landing Page","order":7,"superBlock":"responsive-web-design","dashedName":"build-a-product-landing-page"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page","blockName":"Responsive Web Design Projects"},"id":"587d78b0367417b2b2512b05","block":"responsive-web-design-projects","challengeType":3,"title":"Build a Technical Documentation Page","order":7,"superBlock":"responsive-web-design","dashedName":"build-a-technical-documentation-page"}}},{"node":{"challenge":{"fields":{"slug":"/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage","blockName":"Responsive Web Design Projects"},"id":"bd7158d8c242eddfaeb5bd13","block":"responsive-web-design-projects","challengeType":3,"title":"Build a Personal Portfolio Webpage","order":7,"superBlock":"responsive-web-design","dashedName":"build-a-personal-portfolio-webpage"}}}]}},"pageContext":{"certification":"responsive-web-design","superBlock":"responsive-web-design","slug":"/learn/responsive-web-design/"}},
    "staticQueryHashes": ["3851966407","3877153394"]}