diff --git a/challenges/basic-html5-and-css.json b/challenges/basic-html5-and-css.json
index 143e92cab5..0c360f7043 100644
--- a/challenges/basic-html5-and-css.json
+++ b/challenges/basic-html5-and-css.json
@@ -6,7 +6,7 @@
"id": "bd7123c8c441eddfaeb5bdef",
"name": "Waypoint: Say Hello to HTML Elements",
"dashedName": "waypoint-say-hello-to-html-elements",
- "difficulty": 0.0085,
+ "difficulty": 0.001,
"description": [
"Welcome to Free Code Camp's first coding challenge! Click on the button below for further instructions.",
"Awesome. Now you can read the rest of this challenge's instructions.",
@@ -56,7 +56,7 @@
"id": "bad87fee1348bd9aedf0887a",
"name": "Waypoint: Headline with the h2 Element",
"dashedName": "waypoint-headline-with-the-h2-element",
- "difficulty": 0.010,
+ "difficulty": 0.002,
"description": [
"Add an h2
tag that says \"CatPhotoApp\" to create a second HTML element
below your \"Hello World\" h1
element.",
"The h2
element you enter will create an h2
element on the website.",
@@ -100,7 +100,7 @@
"id": "bad87fee1348bd9aedf08801",
"name": "Waypoint: Inform with the Paragraph Element",
"dashedName": "waypoint-inform-with-the-paragraph-element",
- "difficulty": 0.011,
+ "difficulty": 0.003,
"description": [
"Create a p
element below your h2
element, and give it the text \"Hello Paragraph\".",
"p
elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
@@ -141,7 +141,7 @@
"id": "bad87fee1348bd9aeaf08801",
"name": "Waypoint: Visually Separate Elements with Line Breaks",
"dashedName": "waypoint-visually-separate-elements-with-line-breaks",
- "difficulty": 0.012,
+ "difficulty": 0.004,
"description": [
"Add a br
element to your page, preferably between two of your elements.",
"br
elements, also known as \"line break\" elements, can be created with <br>
.",
@@ -184,7 +184,7 @@
"id": "bad87fee1348bd9aedf08802",
"name": "Waypoint: Uncomment HTML",
"dashedName": "waypoint-uncomment-html",
- "difficulty": 0.013,
+ "difficulty": 0.005,
"description": [
"Uncomment your h1
, h2
and p
elements.",
"Commenting is a way that you can leave comments within your code without affecting the code itself.",
@@ -236,7 +236,7 @@
"id": "bad87fee1348bd9aedf08804",
"name": "Waypoint: Comment out HTML",
"dashedName": "waypoint-comment-out-html",
- "difficulty": 0.014,
+ "difficulty": 0.006,
"description": [
"Comment out your h1
element and your p
element, but leave your h2
element uncommented.",
"Remember that in order to start a comment, you need to use <!--
and to end a comment, you need to use -->
.",
@@ -285,7 +285,7 @@
"id": "bad87fee1348bd9aedf08833",
"name": "Waypoint: Fill in the Blank with Placeholder Text",
"dashedName": "waypoint-fill-in-the-blank-with-placeholder-text",
- "difficulty": 0.015,
+ "difficulty": 0.007,
"description": [
"Replace the text inside your p
element with the first few words of the provided \"Kitty Ipsum\" text.",
"Web developers traditionally use \"Lorem Ipsum\" text as placeholder text. It's called \"Lorem Ipsum\" text because those are the first two words of a famous passage by Cicero of Ancient Rome.",
@@ -335,7 +335,7 @@
"id": "bad87fed1348bd9aedf08833",
"name": "Waypoint: Delete HTML Elements",
"dashedName": "waypoint-delete-html-elements",
- "difficulty": 0.016,
+ "difficulty": 0.008,
"description": [
"Delete your h1
and br
elements so we can simplify our view.",
"Our phone doesn't have much vertical space.",
@@ -382,7 +382,7 @@
"id": "bad87fee1348bd9aedf08803",
"name": "Waypoint: Change the Color of Text",
"dashedName": "waypoint-change-the-color-of-text",
- "difficulty": 0.017,
+ "difficulty": 0.009,
"description": [
"Change your h2
element's style so that its text color is red.",
"We can do this by changing the \"style\" of your h2
element.",
@@ -424,7 +424,7 @@
"id": "bad87fee1348bd9aedf08805",
"name": "Waypoint: Use CSS Selectors to Style Elements",
"dashedName": "waypoint-use-css-selectors-to-style-elements",
- "difficulty": 0.018,
+ "difficulty": 0.010,
"description": [
"Delete your h2
element's style attribute and instead create a CSS style
element. Add the necessary CSS to turn all h2
elements blue.",
"With CSS, there are hundreds of CSS \"attributes\" that you can use to change the way an element looks on your page.",
@@ -479,7 +479,7 @@
"id": "bad87fee1348bd9aecf08806",
"name": "Waypoint: Use a CSS Class to Style an Element",
"dashedName": "waypoint-use-a-css-class-to-style-an-element",
- "difficulty": 0.019,
+ "difficulty": 0.011,
"description": [
"Create a CSS class called \"red-text\" and apply it to your h2
element.",
"Classes are reusable styles that can be added to HTML elements.",
@@ -532,7 +532,7 @@
"id": "bad87fee1348bd9aefe08806",
"name": "Waypoint: Style Multiple Elements with a CSS Class",
"dashedName": "waypoint-style-multiple-elements-with-a-css-class",
- "difficulty": 0.020,
+ "difficulty": 0.012,
"description": [
"Apply the \"red-text\" class to your h2
and p
elements.",
"Remember that you can attach classes to HTML elements by using class=\"your-class-here\"
within the relevant element's opening tag.",
@@ -577,7 +577,7 @@
"id": "bad87fee1348bd9aedf08806",
"name": "Waypoint: Change the Font Size of an Element",
"dashedName": "waypoint-change-the-font-size-of-an-element",
- "difficulty": 0.021,
+ "difficulty": 0.013,
"description": [
"Create a second p
element. Then, inside your <style>
element, set the \"font-size\" of all p
elements to 16 pixels.",
"Font size is controlled by the \"font-size\" CSS attribute, like this: h1 { font-size: 30px; }
.",
@@ -624,7 +624,7 @@
"id": "bad87fee1348bd9aede08807",
"name": "Waypoint: Set the Font Family of an Element",
"dashedName": "waypoint-set-the-font-family-of-an-element",
- "difficulty": 0.022,
+ "difficulty": 0.014,
"description": [
"Make all of your p
elements use the \"Monospace\" font.",
"You can set an element's font by using the \"font-family\" attribute.",
@@ -671,7 +671,7 @@
"id": "bad87fee1348bd9aedf08807",
"name": "Waypoint: Import a Google Font",
"dashedName": "waypoint-import-a-google-font",
- "difficulty": 0.023,
+ "difficulty": 0.015,
"description": [
"Apply the font-family
of \"Lobster\" to your h2
element.",
"First, you'll need to make a \"call\" to Google to grab the \"Lobster\" font and load it into your HTML.",
@@ -725,7 +725,7 @@
"id": "bad87fee1348bd9aedf08808",
"name": "Waypoint: Specify How Fonts Should Degrade",
"dashedName": "waypoint-specify-how-fonts-should-degrade",
- "difficulty": 0.024,
+ "difficulty": 0.016,
"description": [
"Make all your h2
elements use \"Lobster\" as their font family, but degrade to the \"Monospace\" font when the \"Lobster\" font isn't available.",
"You can leave \"Lobster\" your h2
element's font-family, and have it \"degrade\" to a different font when \"Lobster\" isn't available.",
@@ -779,79 +779,11 @@
"Jetzt versuche den Aufruf von Google Fonts in deinem HTML auszukommentieren, sodass \"Lobster\" nicht zur Verfügung steht. Beachte, wie nun die Schriftart \"Monospace\" geladen wird."
]
},
- {
- "id": "bad87fee1348bd9aedf08809",
- "name": "Waypoint: Override Styles with Important",
- "dashedName": "waypoint-override-styles-with-important",
- "difficulty": 0.025,
- "description": [
- "Create an \"urgently-red\" class that gives an element the font-color of red, but add !important
to the class to ensure the element is rendered as being red. Immediately below your \"urgently-red\" class declaration, create a \"blue-text\" class that gives an element the font-color of blue. Apply both classes to your h2
element.",
- "You can add more than one class to an element by separating the class declarations with a space, like this: <h2 class='green-text giant-text'>This will be giant green text</h2>
.",
- "Sometimes HTML elements will receive conflicting information from CSS classes as to how they should be styled.",
- "If there's a conflict in the CSS, the browser will use whichever style declaration is closest to the bottom of the CSS document (whichever declaration comes last). Note that in-line style declarations are the final authority in how an HTML element will be rendered.",
- "There's one way to ensure that an element is rendered with a certain style, regardless of where that declaration is located. That one way is to use !important
.",
- "In case you're curious, this is the priority hierarchy for element styles: !important
beats inline styles, which beats CSS class selectors, which beats CSS selector. That is, !important
trumps all other styles, and inline styles trump style tag declarations.",
- "Here's an example of a CSS style that uses !important
: <style> .urgently-blue { color: blue !important; } </style>
.",
- "Now see if you can make sure the h2
element is rendered in the color red without removing the \"blue-text\" class, doing an in-line styling, and without changing the sequence of CSS class declarations."
- ],
- "tests": [
- "assert(new RegExp('\\.blue-text', 'gi').test(editor), 'Create the CSS class \"blue-text\"')",
- "assert(new RegExp('\\.urgently-red', 'gi').test(editor), 'Create the CSS class \"urgently-red\"')",
- "assert(new RegExp('red.?!important', 'gi').test(editor), 'Add the \"!important\" declaration!')",
- "assert($('h2').hasClass('blue-text'), 'Your h2 element should have the class \"blue-text\".')",
- "assert($('h2').hasClass('urgently-red'), 'Your h2 element should have the class \"urgently-red\".')",
- "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')"
- ],
- "challengeSeed": [
- "",
- "",
- "",
- "
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", - "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" - ], - "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], - "namePt": "", - "descriptionPt": [], - "nameDe": "Waypoint: Überschreibe Styles mit Important", - "descriptionDe": [ - "Erstelle eine \"urgently-red\" Klasse, welche einem Element die Schriftfarbe Rot verleiht, füge aber!important
zur Klasse hinzu um sicherzustellen, dass die Farbe auch übernommen wird. Erstelle direkt unter deiner \"urgently-red\" Klasse eine weitere Klasse namens \"blue-text\", die einem Element die Schriftfarbe Blau gibt. Füge beide Klassen zu deinem h2
Element hinzu.",
- "Du kannst mehrere Klassen zu einem Element hinzufügen, indem du sie mit einem Leerzeichen trennst: <h2 class='green-text giant-text'>Das wird ein großer grüner Text</h2>
.",
- "Ab und zu erhalten HTML Elemente ähnliche Informationen von verschiedenen CSS Klassen.",
- "Wenn es einen solchen Konflikt gibt, wird der Browser die Styles verwenden, welche am Ende des CSS Dokuments stehen. Beachte, dass Inline Styles die höchste Priorität haben.",
- "Es gibt einen Weg um sicherzustellen, dass ein bestimmter Style akzeptiert wird. Egal wo dieser sich befindet. Die Rede ist von !important
.",
- "Verwirrt? Hier ist die Hierarchie, in der Styles angewandt werden: !important
schlägt alle anderen Styles und Inline Styles kommen vor Style Tag Deklarationen.",
- "Ein Beispiel für CSS Styles, die !important
verwenden: <style> .urgently-blue { color: blue !important; } </style>
.",
- "Jetzt stelle sicher, dass dein h2
Element die Farbe Rot erhält, ohne die \"blue-text\" Klasse zu entfernen, einen Inline Style anzuwenden oder die Reihenfolge der CSS Klassen zu verändern."
- ]
- },
{
"id": "bad87fee1348bd9aedf08812",
"name": "Waypoint: Add Images to your Website",
"dashedName": "waypoint-add-images-to-your-website",
- "difficulty": 0.026,
+ "difficulty": 0.017,
"description": [
"Use an img
element to add the image http://bit.ly/fcc-kittens
to your website.",
"You can add images to your website by using the img
element, and point to an specific image's URL using the src
attribute.",
@@ -907,7 +839,7 @@
"id": "bad87fee1348bd9acdf08812",
"name": "Waypoint: Size your Images",
"dashedName": "waypoint-size-your-images",
- "difficulty": 0.027,
+ "difficulty": 0.018,
"description": [
"Create a class called smaller-image
and use it to resize the image so that it's only 100 pixels wide.",
"CSS has an attribute called width
that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the image's width.",
@@ -963,7 +895,7 @@
"id": "bad87fee1348bd9bedf08813",
"name": "Waypoint: Add Borders Around your Elements",
"dashedName": "waypoint-add-borders-around-your-elements",
- "difficulty": 0.028,
+ "difficulty": 0.019,
"description": [
"Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply that class to your cat photo.",
"CSS borders have attributes like style, color and width.",
@@ -1026,7 +958,7 @@
"id": "bad87fee1348bd9aedf08814",
"name": "Waypoint: Add Rounded Corners with a Border Radius",
"dashedName": "waypoint-add-rounded-corners-with-a-border-radius",
- "difficulty": 0.029,
+ "difficulty": 0.020,
"description": [
"Give your cat photo a border-radius
of 10 pixels.",
"Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called border-radius
.",
@@ -1092,7 +1024,7 @@
"id": "bad87fee1348bd9aedf08815",
"name": "Waypoint: Make Circular Images with a Border Radius",
"dashedName": "waypoint-make-circular-images-with-a-border-radius",
- "difficulty": 0.030,
+ "difficulty": 0.021,
"description": [
"Give your cat photo a border-radius
of 50%.",
"In addition to pixels, you can also specify a border-radius
using a percentage."
@@ -1157,7 +1089,7 @@
"id": "bad87fee1348bd9aedf08816",
"name": "Waypoint: Link to External Pages with Anchor Elements",
"dashedName": "waypoint-link-to-external-pages-with-anchor-elements",
- "difficulty": 0.031,
+ "difficulty": 0.022,
"description": [
"Create an a
element, or \"anchor element\", that links to http://catphotoapp.com and has \"cat photos\" as its link text, or \"anchor text\".",
"Here's a diagram of an a
element. In this case, it's used in the middle of a paragraph element, which means your link will appear in the middle of your sentence.",
@@ -1227,7 +1159,7 @@
"id": "bad87fee1348bd9aede08817",
"name": "Waypoint: Wrap an Anchor Element within a Paragraph",
"dashedName": "waypoint-wrap-an-anchor-element-within-a-paragraph",
- "difficulty": 0.032,
+ "difficulty": 0.023,
"description": [
"Now wrap your a
element within a new p
element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link - the rest is plain text.",
"Again, here's a diagram of an a
element for your reference:",
@@ -1302,7 +1234,7 @@
"id": "bad87fee1348bd9aedf08817",
"name": "Waypoint: Make Dead Links using the Hash Symbol",
"dashedName": "waypoint-make-dead-links-using-the-hash-symbol",
- "difficulty": 0.033,
+ "difficulty": 0.024,
"description": [
"Use the hash symbol (#) to turn your a
element's link into a dead link.",
"Sometimes you want to add a
elements to your website before you know where they will link.",
@@ -1372,7 +1304,7 @@
"id": "bad87fee1348bd9aedf08820",
"name": "Waypoint: Turn an Image into a Link",
"dashedName": "waypoint-turn-an-image-into-a-link",
- "difficulty": 0.034,
+ "difficulty": 0.025,
"description": [
"Wrap your img
element inside an a
element with a dead link.",
"You can make elements into links by wrapping them within an a
element.",
@@ -1446,7 +1378,7 @@
"id": "bad87fee1348bd9aedf08818",
"name": "Waypoint: Add Alt Text to an Image for Accessibility",
"dashedName": "waypoint-add-alt-text-to-an-image-for-accessibility",
- "difficulty": 0.035,
+ "difficulty": 0.026,
"description": [
"Add an alt
attribute with the text \"A cute orange cat lying on its back\" to our cat photo.",
"alt
attributes, also known as \"alt text\", are what browsers will display if they fail to load the image. alt
attributes are also important for blind or visually impaired users to understand what an image portrays. Search engines also look at alt
attributes.",
@@ -1518,7 +1450,7 @@
"id": "bad87fee1348bd9aedf08827",
"name": "Waypoint: Create a Bulleted Unordered List",
"dashedName": "waypoint-create-a-bulleted-unordered-list",
- "difficulty": 0.036,
+ "difficulty": 0.027,
"description": [
"Replace your p
elements with an unordered list of three things that cats love.",
"HTML has a special element for creating unordered lists, or bullet point-style lists.",
@@ -1591,7 +1523,7 @@
"id": "bad87fee1348bd9aedf08828",
"name": "Waypoint: Create an Ordered List",
"dashedName": "waypoint-create-an-ordered-list",
- "difficulty": 0.037,
+ "difficulty": 0.028,
"description": [
"Create an ordered list of the top 3 things cats hate the most.",
"HTML has a special element for creating ordered lists, or numbered-style lists.",
@@ -1671,7 +1603,7 @@
"id": "bad87fee1348bd9aedf08829",
"name": "Waypoint: Create a Text Field",
"dashedName": "waypoint-create-a-text-field",
- "difficulty": 0.038,
+ "difficulty": 0.029,
"description": [
"Now we'll create a web form. Create a text input under your lists.",
"Text inputs are a convenient way to get input from your user.",
@@ -1749,7 +1681,7 @@
"id": "bad87fee1348bd9aedf08830",
"name": "Waypoint: Add Placeholder Text to a Text Field",
"dashedName": "waypoint-add-placeholder-text-to-a-text-field",
- "difficulty": 0.039,
+ "difficulty": 0.030,
"description": [
"Set the placeholder
value of your text input
to \"cat photo URL\".",
"Your placeholder text is what appears in your text input
before your user has inputed anything.",
@@ -1829,7 +1761,7 @@
"id": "bad87fee1348bd9aede08830",
"name": "Waypoint: Create a Form Element",
"dashedName": "waypoint-create-a-form-element",
- "difficulty": 0.040,
+ "difficulty": 0.031,
"description": [
"Wrap your text field in a form
element. Add the action=\"/submit-cat-photo\"
attribute to this form element.",
"You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your form
element.",
@@ -1911,7 +1843,7 @@
"id": "bad87fee1348bd9aedd08830",
"name": "Waypoint: Add a Submit Button to a Form",
"dashedName": "waypoint-add-a-submit-button-to-a-form",
- "difficulty": 0.041,
+ "difficulty": 0.032,
"description": [
"Add a submit button to your form
element with type \"submit\" and \"Submit\" as its text.",
"Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's action
attribute.",
@@ -1995,7 +1927,7 @@
"id": "bad87fee1348bd9aedc08830",
"name": "Waypoint: Use HTML5 to Require a Field",
"dashedName": "waypoint-use-html5-to-require-a-field",
- "difficulty": 0.042,
+ "difficulty": 0.033,
"description": [
"Make your text input
a \"required\" field, so that your user can't submit the form without completing this field.",
"You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.",
@@ -2077,7 +2009,7 @@
"id": "bad87fee1348bd9aedf08834",
"name": "Waypoint: Create a Set of Radio Buttons",
"dashedName": "waypoint-create-a-set-of-radio-buttons",
- "difficulty": 0.043,
+ "difficulty": 0.034,
"description": [
"Add to your form a pair of radio buttons. Each radio button should be wrapped within its own label
element. They should share a common name
attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\".",
"You can use radio buttons for questions where you want the user to only give you one answer.",
@@ -2170,7 +2102,7 @@
"id": "bad87fee1348bd9aedf08835",
"name": "Waypoint: Create a Set of Checkboxes",
"dashedName": "waypoint-create-a-set-of-checkboxes",
- "difficulty": 0.044,
+ "difficulty": 0.035,
"description": [
"Add to your form a set of three checkbox elements. Each checkbox should be wrapped within its own label
element. All three should share the name
attribute of \"personality\".",
"Forms commonly use checkbox inputs for questions that may have more than one answer.",
@@ -2257,7 +2189,7 @@
"id": "bad87fee1348bd9aede18835",
"name": "Waypoint: Clean up your form using Linebreaks",
"dashedName": "waypoint-clean-up-your-form-using-linebreaks",
- "difficulty": 0.045,
+ "difficulty": 0.036,
"description": [
"Clean up your form by adding linebreaks between form elements.",
"Remember that you can create a linebreak element by using the code: <br>
."
@@ -2342,7 +2274,7 @@
"id": "bad87fee1348bd9aedd08835",
"name": "Waypoint: Check Radio Buttons and Checkboxes by Default",
"dashedName": "waypoint-check-radio-buttons-and-checkboxes-by-default",
- "difficulty": 0.046,
+ "difficulty": 0.037,
"description": [
"Set the first of your radio buttons and the first of your checkboxes to both be checked by default.",
"You set a checkbox or radio button to be checked by default using the checked
attribute.",
@@ -2432,7 +2364,7 @@
"id": "bad87fee1348bd9aede08835",
"name": "Waypoint: Wrap Many Elements within a Single Div Element",
"dashedName": "waypoint-wrap-many-elements-within-a-single-div-element",
- "difficulty": 0.047,
+ "difficulty": 0.038,
"description": [
"Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single div
element.",
"The div
element, or \"Division\" element, is a general purpose container for other elements.",
@@ -2529,7 +2461,7 @@
"id": "bad87fee1348bd9aede07836",
"name": "Waypoint: Give a Background Color to a Div Element",
"dashedName": "waypoint-give-a-background-color-to-a-div-element",
- "difficulty": 0.048,
+ "difficulty": 0.039,
"description": [
"Create a class called \"gray-background\" with the background color of gray. Assign this class to your div
element.",
"You can set an element's background color with the \"background-color\" attribute.",
@@ -2622,7 +2554,7 @@
"id": "bad88fee1348bd9aedf08825",
"name": "Waypoint: Adjusting the Padding of an Element",
"dashedName": "waypoint-adjusting-the-padding-of-an-element",
- "difficulty": 0.064,
+ "difficulty": 0.040,
"description": [
"These next few Waypoints will give you a brief tour of three important aspects of the space surrounding HTML elements: padding
, margin
, and border
. Change the padding
of your green box to match that of your red box.",
"An element's padding
controls the amount of space between the element and its border
.",
@@ -2691,7 +2623,7 @@
"id": "bad87fee1348bd9aedf08822",
"name": "Waypoint: Adjust the Margin of an Element",
"dashedName": "waypoint-adjust-the-margin-of-an-element",
- "difficulty": 0.065,
+ "difficulty": 0.041,
"description": [
"Change the margin
of the green box to match that of the red box.",
"An element's margin
controls the amount of space between an element's border
and surrounding elements.",
@@ -2762,7 +2694,7 @@
"id": "bad87fee1348bd9aedf08823",
"name": "Waypoint: Add a Negative Margin to an Element",
"dashedName": "waypoint-add-a-negative-margin-to-an-element",
- "difficulty": 0.066,
+ "difficulty": 0.042,
"description": [
"Change the margin
of the green box to a negative value, so it fills the entire horizontal width of the yellow box around it.",
"An element's margin
controls the amount of space between an element's border
and surrounding elements.",
@@ -2832,7 +2764,7 @@
"id": "bad87fee1348bd9aedf08824",
"name": "Waypoint: Add Different Padding to Each Side of an Element",
"dashedName": "waypoint-add-different-padding-to-each-side-of-an-element",
- "difficulty": 0.067,
+ "difficulty": 0.043,
"description": [
"Give the green box a padding
of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
"Sometimes you will want to customize an element so that it has different padding
on each of its sides.",
@@ -2904,7 +2836,7 @@
"id": "bad87fee1248bd9aedf08824",
"name": "Waypoint: Add Different Margins to Each Side of an Element",
"dashedName": "waypoint-add-different-margins-to-each-side-of-an-element",
- "difficulty": 0.068,
+ "difficulty": 0.044,
"description": [
"Give the green box a margin
of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
"Sometimes you will want to customize an element so that it has a different margin
on each of its sides.",
@@ -2975,7 +2907,7 @@
"id": "bad87fee1348bd9aedf08826",
"name": "Waypoint: Use Clockwise Notation to Specify the Padding of an Element",
"dashedName": "waypoint-use-clockwise-notation-to-specify-the-padding-of-an-element",
- "difficulty": 0.069,
+ "difficulty": 0.044,
"description": [
"Use Clockwise Notation to give the \".green-box\" class a padding
of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
"Instead of specifying an element's padding-top
, padding-right
, padding-bottom
, and padding-left
attributes, you can specify them all in one line, like this: padding: 10px 20px 10px 20px;
.",
@@ -3041,10 +2973,10 @@
]
},
{
- "id": "bad87fee1348bd9aedf08726",
+ "id": "bad87fee1348bd9afdf08726",
"name": "Waypoint: Use Clockwise Notation to Specify the Margin of an Element",
"dashedName": "waypoint-use-clockwise-notation-to-specify-the-margin-of-an-element",
- "difficulty": 0.070,
+ "difficulty": 0.045,
"description": [
"Let's try this again, but with margin
this time. Use Clockwise Notation
to give an element a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
"Instead of specifying an element's margin-top
, margin-right
, margin-bottom
, and margin-left
attributes, you can specify them all in one line, like this: margin: 10px 20px 10px 20px;
.",
@@ -3109,6 +3041,315 @@
"Anstatt die Eigenschaften margin-top
, margin-right
, margin-bottom
und margin-left
zu verwenden, kannst du alle in eine Zeile schreiben: margin: 10px 20px 10px 20px;
.",
"Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie meinen exakt das gleiche wie die seitenspezifischen Anweisungen."
]
+ },
+
+
+
+ {
+ "id": "bad87fee1348bd9aedf08736",
+ "name": "Waypoint: Style the HTML Body Element",
+ "dashedName": "waypoint-style-the-html-body-element",
+ "difficulty": 0.046,
+ "description": [
+ "Now let's start fresh and talk about CSS inheritance.",
+ "Every HTML page has body
element.",
+ "We can prove that the body
element exists here by giving it a \"background-color\" of blue.",
+ "We can do this by adding body { background-color: blue; }
to our style
element."
+ ],
+ "tests": [
+ "assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your body
element the background-color of blue.')"
+ ],
+ "challengeSeed": [
+ ""
+ ],
+ "challengeType": 0,
+ "nameCn": "",
+ "descriptionCn": [],
+ "nameFr": "",
+ "descriptionFr": [],
+ "nameRu": "",
+ "descriptionRu": [],
+ "nameEs": "",
+ "descriptionEs": [],
+ "namePt": "",
+ "descriptionPt": [],
+ "nameDe": "",
+ "descriptionDe": []
+ },
+ {
+ "id": "bad87fee1348bd9aedf08746",
+ "name": "Waypoint: Inherit Styles from the Body Element",
+ "dashedName": "waypoint-inherit-styles-from-the-body-element",
+ "difficulty": 0.047,
+ "description": [
+ "Every HTML page has body
element.",
+ "You can style your body
element just like any other HTML element, and all your other elements will inherit your body
element's styles.",
+ "Let's prove this by creating a h2
element with the text \"somebody\".",
+ "Then, let's add the font family of \"Monospace\" to the our body
element's style declaration.",
+ "See how this gives our h2
element the font-family of "
+ ],
+ "tests": [
+ "assert(($('body').css('color') === 'rgb(0, 128, 0)'), 'Give your body
element the \"color\" attribute of green.')",
+ "assert(($('body').css('font-family').match(/Monospace/i)), 'Give your body
element the \"font-family\" attribute of \"Monospace\".')",
+ "assert(($('h1').length > 0), 'Create an h1
element.')",
+ "assert(($('h1').length > 0 && $('h1').text().match(/hello world/i)), 'Your h1
element should have the text \"Hello World\".')",
+ "assert(($('h1').length > 0 && $('h1').css('font-family').match(/monospace/i)), 'Your h1
element should inherit the font \"Monospace\" from your body
element.')",
+ "assert(($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)'), 'Your h1
element should inherit the color green.')",
+ "assert(editor.match(/<\\/h1>/g) && editor.match(/h1
element the class of \"pink-text\"."
+ ],
+ "tests": [
+ "assert($('h1').hasClass('pink-text'), 'Your h1
element should have the class \"pink-text\".')",
+ "assert($('h1').css('color') === 'rgb(255, 192, 203)', 'Your h1
element should be pink.')"
+ ],
+ "challengeSeed": [
+ "",
+ "body
element.",
+ "You can style your body
element just like any other HTML element, and all your other elements will inherit your body
element's styles.",
+ "Let's prove this by creating a h2
element with the text \"somebody\".",
+ "Then, let's add the font family of \"Monospace\" to the our body
element's style declaration.",
+ "See how this gives our h2
element the font-family of "
+ ],
+ "tests": [
+ "assert($('h1').hasClass('pink-text'), 'Your h1
element should have the class \"pink-text\".')",
+ "assert($('h1').hasClass('blue-text'), 'Your h1
element should have the class \"blue-text\".')",
+ "assert($('h1').css('color') === 'rgb(0, 0, 255)', 'Your h1
element should be blue.')"
+ ],
+ "challengeSeed": [
+ "",
+ "<h1 style=\"color: white\"&rt;
"
+ ],
+ "tests": [
+ "assert($('h1').hasClass('pink-text'), 'Your h1
element should have the class \"pink-text\".')",
+ "assert($('h1').hasClass('blue-text'), 'Your h1
element should have the class \"blue-text\".')",
+ "assert(!$('h1').hasClass('white-text'), 'Your h1
element should have the inline style of \"color: white\".')",
+ "assert($('h1').css('color') === 'rgb(255, 255, 255)', 'Your h1
element should be white.')"
+ ],
+ "challengeSeed": [
+ "",
+ "h1
element should have the class \"pink-text\".')",
+ "assert($('h1').hasClass('blue-text'), 'Your h1
element should have the class \"blue-text\".')",
+ "assert(!$('h1').hasClass('white-text'), 'Your h1
element should have the inline style of \"color: white\".')",
+ "assert($('h1').hasClass('yellow-text'), 'Your h1
element should have the class \"yellow-text\".')",
+ "assert($('h1').css('color') === 'rgb(255, 255, 0)', 'Your h1
element should be yellow.')"
+ ],
+ "challengeSeed": [
+ "",
+ "$(document).ready(function() {
function with \\}\\);
.')"
],
"challengeSeed": [
+ "",
"",
"",
- "