add new challenges
This commit is contained in:
Quincy Larson
committed by
Berkeley Martinez
Berkeley Martinez
parent
426ff2175f
commit
6f9fab3043
2518
challenges/03-front-end-libraries/bootstrap.json
Normal file
2518
challenges/03-front-end-libraries/bootstrap.json
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,108 @@
|
||||
{
|
||||
"name": "Claim Your Front End Libraries Certificate",
|
||||
"order": 13,
|
||||
"time": "5 minutes",
|
||||
"challenges": [
|
||||
{
|
||||
"id": "587d7dbb367417b2b2512bad",
|
||||
"title": "Claim Your Front End Libraries Certificate",
|
||||
"description": [
|
||||
[
|
||||
"//i.imgur.com/k8btNUB.jpg",
|
||||
"An image of our Front End Libraries Certificate",
|
||||
"This challenge will give you your verified Front End Libraries Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/uLPsUko.jpg",
|
||||
"The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
|
||||
"By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
|
||||
"#"
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/UedoV2G.jpg",
|
||||
"An image of the text \"Front End Development Certificate requirements\"",
|
||||
"Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
|
||||
"#"
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/Q5Za9U6.jpg",
|
||||
"An image of the word \"Congratulations\"",
|
||||
"Congratulations! We've added your Front End Libraries Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
|
||||
""
|
||||
]
|
||||
],
|
||||
"challengeSeed": [
|
||||
{
|
||||
"properties": [
|
||||
"isHonest",
|
||||
"isFrontEndCert"
|
||||
],
|
||||
"apis": [
|
||||
"/certificate/honest",
|
||||
"/certificate/verify/front-end"
|
||||
],
|
||||
"stepIndex": [
|
||||
1,
|
||||
2
|
||||
]
|
||||
}
|
||||
],
|
||||
"tests": [
|
||||
{
|
||||
"id": "bd7158d8c442eddfaeb5bd0f",
|
||||
"title": "Build a Pomodoro Clock"
|
||||
},
|
||||
{
|
||||
"id": "bd7158d8c442eddfaeb5bd17",
|
||||
"title": "Build a JavaScript Calculator"
|
||||
},
|
||||
{
|
||||
"id": "587d7dbc367417b2b2512bae",
|
||||
"title": "Build a Drum Machine"
|
||||
},
|
||||
{
|
||||
"id": "bd7157d8c242eddfaeb5bd13",
|
||||
"title": "Build a Markdown Previewer"
|
||||
},
|
||||
{
|
||||
"id": "bd7158d8c442eddfaeb5bd13",
|
||||
"title": "Build a Random Quote Machine"
|
||||
}
|
||||
],
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Reclama tu certificado de Desarrollo de interfaces",
|
||||
"description": [
|
||||
[
|
||||
"//i.imgur.com/k8btNUB.jpg",
|
||||
"Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
|
||||
"Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/HArFfMN.jpg",
|
||||
"Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
|
||||
"Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
|
||||
"#"
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/14F2Van.jpg",
|
||||
"Una imagen del texto \"Front End Development Certificate requirements\"",
|
||||
"Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
|
||||
"#"
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/16SIhHO.jpg",
|
||||
"Una imagen de la palabra \"Congratulations\"",
|
||||
"¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
|
||||
""
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
{
|
||||
"name": "Front End Frameworks Projects",
|
||||
"order": 8,
|
||||
"time": "150 hours",
|
||||
"helpRoom": "Help",
|
||||
"challenges": [
|
||||
{
|
||||
"id": "bd7158d8c442eddfaeb5bd13",
|
||||
"title": "Build a Random Quote Machine",
|
||||
"description": [
|
||||
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||
"Here's a <a href='http://codepen.io/freeCodeCamp/full/qRZeGZ' target='_blank'>working example</a>. Try not to look at its code.",
|
||||
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"A9mEKIF"
|
||||
],
|
||||
"tests": [],
|
||||
"type": "zipline",
|
||||
"isRequired": true,
|
||||
"challengeType": 3,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Crea una máquina de frases aleatorias",
|
||||
"description": []
|
||||
},
|
||||
"ru": {
|
||||
"title": "Создайте генератор случайных цитат",
|
||||
"description": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bd7157d8c242eddfaeb5bd13",
|
||||
"title": "Build a Markdown Previewer",
|
||||
"description": [
|
||||
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||
"Here's a <a href='http://codepen.io/freeCodeCamp/full/GrZVVO' target='_blank'>working example</a>. Try not to look at its code.",
|
||||
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||
],
|
||||
"releasedOn": "January 10, 2017",
|
||||
"challengeSeed": [
|
||||
"FFDvuCP"
|
||||
],
|
||||
"tests": [],
|
||||
"type": "zipline",
|
||||
"isRequired": true,
|
||||
"challengeType": 3,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Crea una caja de recetas",
|
||||
"description": []
|
||||
},
|
||||
"ru": {
|
||||
"title": "Создайте хранилище рецептов",
|
||||
"description": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7dbc367417b2b2512bae",
|
||||
"title": "Build a Drum Machine",
|
||||
"description": [
|
||||
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||
"Here's a <a href='http://codepen.io/freeCodeCamp/full/MJyNMd' target='_blank'>working example</a>. Try not to look at its code.",
|
||||
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||
],
|
||||
"releasedOn": "January 10, 2016",
|
||||
"challengeSeed": [
|
||||
"OkeFgKL"
|
||||
],
|
||||
"tests": [],
|
||||
"type": "zipline",
|
||||
"isRequired": true,
|
||||
"challengeType": 3,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Crea un Juego de la vida",
|
||||
"description": []
|
||||
},
|
||||
"ru": {
|
||||
"title": "Создайте игру \"Жизнь\"",
|
||||
"description": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bd7158d8c442eddfaeb5bd17",
|
||||
"title": "Build a JavaScript Calculator",
|
||||
"description": [
|
||||
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||
"Here's a <a href='http://codepen.io/freeCodeCamp/full/wgGVVX' target='_blank'>working example</a>. Try not to look at its code.",
|
||||
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"xlAXPjX"
|
||||
],
|
||||
"tests": [],
|
||||
"type": "zipline",
|
||||
"challengeType": 3,
|
||||
"isRequired": true,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Crea una calculadora JavaScript",
|
||||
"description": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bd7158d8c442eddfaeb5bd0f",
|
||||
"title": "Build a Pomodoro Clock",
|
||||
"description": [
|
||||
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||
"Here's a <a href='http://codepen.io/freeCodeCamp/full/XpKrrW' target='_blank'>working example</a>. Try not to look at its code.",
|
||||
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"u5RTBt4"
|
||||
],
|
||||
"tests": [],
|
||||
"type": "zipline",
|
||||
"isRequired": true,
|
||||
"challengeType": 3,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Crea un reloj pomodoro",
|
||||
"description": []
|
||||
},
|
||||
"ru": {
|
||||
"title": "Создайте таймер Pomodoro",
|
||||
"description": []
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
1525
challenges/03-front-end-libraries/jquery.json
Normal file
1525
challenges/03-front-end-libraries/jquery.json
Normal file
File diff suppressed because it is too large
Load Diff
38
challenges/03-front-end-libraries/react-and-redux.json
Normal file
38
challenges/03-front-end-libraries/react-and-redux.json
Normal file
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "React and Redux",
|
||||
"order": 7,
|
||||
"time": "5 hours",
|
||||
"helpRoom": "Help",
|
||||
"challenges": [
|
||||
{
|
||||
"id": "587d7dbc367417b2b2512bb0",
|
||||
"title": "Introduction to the React and Redux Challenges",
|
||||
"description": [
|
||||
[
|
||||
"",
|
||||
"",
|
||||
"The React and Redux challenges have not been ported into Free Code Camp yet. You can visit <a href=\"http://hysterical-amusement.surge.sh/\" target=\"_blank\">this link to work through the alpha version</a> of these challenges. If you have feedback, you can open an issue (or pull request) directly on <a href=\"https://github.com/bonham000/fcc-react-tests-module\" target=\"_blank\">this repository.</a>",
|
||||
""
|
||||
]
|
||||
],
|
||||
"releasedOn": "",
|
||||
"challengeSeed": [],
|
||||
"tests": [],
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7,
|
||||
"isRequired": false,
|
||||
"titleEs": "",
|
||||
"descriptionEs": [
|
||||
[]
|
||||
],
|
||||
"titleFr": "",
|
||||
"descriptionFr": [
|
||||
[]
|
||||
],
|
||||
"titleDe": "",
|
||||
"descriptionDe": [
|
||||
[]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
44
challenges/03-front-end-libraries/react.json
Normal file
44
challenges/03-front-end-libraries/react.json
Normal file
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "React",
|
||||
"order": 5,
|
||||
"time": "5 hours",
|
||||
"helpRoom": "Help",
|
||||
"challenges": [
|
||||
{
|
||||
"id": "587d7dbc367417b2b2512bb1",
|
||||
"title": "Introduction to the React Challenges",
|
||||
"description": [
|
||||
[
|
||||
"",
|
||||
"",
|
||||
"React is a JavaScript library designed to make it easier to build complex user interfaces. React does this in a few ways:<br><br><ol><li>React allows HTML to render from a JavaScript file.</li><li>React breaks a website's parts into Components that can then be combined to build pages.</li><li>React Components can pass data to each other as properties</li></ol><br><br>React uses a virtual Document Object Model. Instead of changing the DOM directly, React makes a simplified copy of the DOM (the virtual DOM) when the page loads. This allows React to make changes to elements on the page without re-rendering the entire page. This can improve the responsiveness and functionality of single-page applications.<br><br>While not part of the React library and not required, JSX is often paired with React. JSX is a preprocessor for JavaScript written in a syntax akin to XML that results in more readable code.<br><br><strong>Fun fact:</strong>Free Code Camp is built using React.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"",
|
||||
"",
|
||||
"The React challenges have not been ported into Free Code Camp yet. You can visit <a href=\"http://hysterical-amusement.surge.sh/\" target=\"_blank\">this link to work through the alpha version</a> of these challenges. If you have feedback, you can open an issue (or pull request) directly on <a href=\"https://github.com/bonham000/fcc-react-tests-module\" target=\"_blank\">this repository.</a>",
|
||||
""
|
||||
]
|
||||
],
|
||||
"releasedOn": "",
|
||||
"challengeSeed": [],
|
||||
"tests": [],
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7,
|
||||
"isRequired": false,
|
||||
"titleEs": "",
|
||||
"descriptionEs": [
|
||||
[]
|
||||
],
|
||||
"titleFr": "",
|
||||
"descriptionFr": [
|
||||
[]
|
||||
],
|
||||
"titleDe": "",
|
||||
"descriptionDe": [
|
||||
[]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
38
challenges/03-front-end-libraries/redux.json
Normal file
38
challenges/03-front-end-libraries/redux.json
Normal file
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "Redux",
|
||||
"order": 6,
|
||||
"time": "5 hours",
|
||||
"helpRoom": "Help",
|
||||
"challenges": [
|
||||
{
|
||||
"id": "587d7dbd367417b2b2512bb2",
|
||||
"title": "Introduction to the Redux Challenges",
|
||||
"description": [
|
||||
[
|
||||
"",
|
||||
"",
|
||||
"The Redux challenges have not been ported into Free Code Camp yet. You can visit <a href=\"http://hysterical-amusement.surge.sh/\" target=\"_blank\">this link to work through the alpha version</a> of these challenges. If you have feedback, you can open an issue (or pull request) directly on <a href=\"https://github.com/bonham000/fcc-react-tests-module\" target=\"_blank\">this repository.</a>",
|
||||
""
|
||||
]
|
||||
],
|
||||
"releasedOn": "",
|
||||
"challengeSeed": [],
|
||||
"tests": [],
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7,
|
||||
"isRequired": false,
|
||||
"titleEs": "",
|
||||
"descriptionEs": [
|
||||
[]
|
||||
],
|
||||
"titleFr": "",
|
||||
"descriptionFr": [
|
||||
[]
|
||||
],
|
||||
"titleDe": "",
|
||||
"descriptionDe": [
|
||||
[]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
708
challenges/03-front-end-libraries/sass.json
Normal file
708
challenges/03-front-end-libraries/sass.json
Normal file
@@ -0,0 +1,708 @@
|
||||
{
|
||||
"name": "Sass",
|
||||
"order": 4,
|
||||
"time": "5 hours",
|
||||
"helpRoom": "Help",
|
||||
"challenges": [
|
||||
{
|
||||
"id": "587d7dbd367417b2b2512bb3",
|
||||
"title": "Introduction to the Sass Challenges",
|
||||
"description": [
|
||||
[
|
||||
"",
|
||||
"",
|
||||
"Sass, or \"Syntactically Awesome StyleSheets\", is a language extension of CSS. It adds features that aren't available using basic CSS syntax. Sass makes it easier for developers to simplify and maintain the style sheets for their projects.<br><br>Sass can extend the CSS language because it is a preprocessor. It takes code written using Sass syntax, and converts it into basic CSS. This allows you to create variables, nest CSS rules into others, and import other Sass files, among other things. The result is more compact, easier to read code.<br><br>This section introduces the basic features of Sass.",
|
||||
""
|
||||
]
|
||||
],
|
||||
"releasedOn": "",
|
||||
"challengeSeed": [],
|
||||
"tests": [],
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7,
|
||||
"isRequired": false,
|
||||
"titleEs": "",
|
||||
"descriptionEs": [
|
||||
[]
|
||||
],
|
||||
"titleFr": "",
|
||||
"descriptionFr": [
|
||||
[]
|
||||
],
|
||||
"titleDe": "",
|
||||
"descriptionDe": [
|
||||
[]
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "587d7dbd367417b2b2512bb4",
|
||||
"title": "Storing Data with Sass Variables",
|
||||
"required": [
|
||||
{
|
||||
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||
"raw": true
|
||||
}
|
||||
],
|
||||
"description": [
|
||||
"One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript.",
|
||||
"In Javascript, variables are defined using the <code>let</code> and <code>const</code> keywords. In Sass, variables start with a <code>$</code> followed by the variable name.",
|
||||
"Here are a couple examples:",
|
||||
"<blockquote>$main-fonts: Arial, sans-serif;<br>$headings-color: green;<br><br>//To use variables:<br>h1 {<br> font-family: $main-fonts;<br> color: $headings-color;<br>}</blockquote>",
|
||||
"One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value.",
|
||||
"<h4>Instructions</h4>",
|
||||
"Create a variable <code>$text-color</code> and set it to red. Then change the value of the <code>color</code> property for the <code>.blog-post</code> and <code>h2</code> to the <code>$text-color</code> variable."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" ",
|
||||
" ",
|
||||
" .header{",
|
||||
" text-align: center;",
|
||||
" }",
|
||||
" .blog-post h2 {",
|
||||
" color: red;",
|
||||
" }",
|
||||
"</style>",
|
||||
"",
|
||||
"<h1 class=\"header\">Learn Sass</h1>",
|
||||
"<div class=\"blog-post\">",
|
||||
" <h2>Some random title</h2>",
|
||||
" <p>This is a paragraph with some random text in it</p>",
|
||||
"</div>",
|
||||
"<div class=\"blog-post\">",
|
||||
" <h2>Header #2</h2>",
|
||||
" <p>Here is some more random text.</p>",
|
||||
"</div>",
|
||||
"<div class=\"blog-post\">",
|
||||
" <h2>Here is another header</h2>",
|
||||
" <p>Even more random text within a paragraph</p>",
|
||||
"</div>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/\\$text-color:\\s*?red;/g), 'message: Your code should have a Sass variable declared for <code>$text-color</code> with a value of red.');",
|
||||
"assert(code.match(/color:\\s*?\\$text-color;/g), 'message: Your code should use the <code>$text-color</code> variable to change the <code>color</code> for the <code>.blog-post</code> and <code>h2</code> items.');",
|
||||
"assert($('.blog-post').css('color') == 'rgb(255, 0, 0)', 'message: Your <code>.blog-post</code> element should have a </code>color</code> of red.');",
|
||||
"assert($('h2').css('color') == 'rgb(255, 0, 0)', 'message: Your <code>h2</code> elements should have a </code>color</code> of red.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"es": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"cn": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7dbd367417b2b2512bb5",
|
||||
"title": "Nesting CSS with Sass",
|
||||
"required": [
|
||||
{
|
||||
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||
"raw": true
|
||||
}
|
||||
],
|
||||
"description": [
|
||||
"Sass allows <code>nesting</code> of CSS rules, which is a useful way of organizing a style sheet.",
|
||||
"Normally, each element is targeted on a different line to style it, like so:",
|
||||
"<blockquote>nav {<br> background-color: red;<br>}<br><br>nav ul {<br> list-style: none;<br>}<br><br>li {<br> display: inline-block;<br>}</blockquote>",
|
||||
"For a large project, the CSS file will have many lines and rules. This is where <code>nesting</code> can help organize your code by placing child style rules within the respective parent elements:",
|
||||
"<blockquote>nav {<br> background-color: red;<br><br> ul {<br> list-style: none;<br><br> li {<br> display: inline-block;<br> }<br> }<br>}<br></blockquote>",
|
||||
"<h4>Instructions</h4>",
|
||||
"Use the <code>nesting</code> technique shown above to re-organize the CSS rules for both children of <code>.blog-post</code> element. For testing purposes, the <code>h1</code> should come before the <code>p</code> element."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" .blog-post {",
|
||||
" ",
|
||||
" }",
|
||||
" h1 {",
|
||||
" text-align: center;",
|
||||
" color: blue;",
|
||||
" }",
|
||||
" p {",
|
||||
" font-size: 20px;",
|
||||
" }",
|
||||
"</style>",
|
||||
"",
|
||||
"<div class=\"blog-post\">",
|
||||
" <h1>Blog Title</h1>",
|
||||
" <p>This is a paragraph</p>",
|
||||
"</div>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/\\.blog-post\\s*?{\\s*?h1\\s*?{\\s*?text-align:\\s*?center;\\s*?color:\\s*?blue;\\s*?}\\s*?p\\s*?{\\s*?font-size:\\s*?20px;\\s*?}\\s*?}/gi), 'message: Your code should re-organize the CSS rules so the <code>h1</code> and <code>p</code> are nested in the <code>.blog-post</code> parent element.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"es": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"cn": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7dbd367417b2b2512bb6",
|
||||
"title": "Creating Reusable CSS with Mixins",
|
||||
"required": [
|
||||
{
|
||||
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||
"raw": true
|
||||
}
|
||||
],
|
||||
"description": [
|
||||
"In Sass, a <code>mixin</code> is a group of CSS declarations that can be reused throughout the style sheet.",
|
||||
"Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider \"box-shadow\":",
|
||||
"<blockquote>div {<br> -webkit-box-shadow: 0px 0px 4px #fff;<br> -moz-box-shadow: 0px 0px 4px #fff;<br> -ms-box-shadow: 0px 0px 4px #fff;<br> box-shadow: 0px 0px 4px #fff;<br>}</blockquote>",
|
||||
"It's a lot of typing to re-write this rule for all the elements that have a <code>box-shadow</code>, or to change each value to test different effects.",
|
||||
"<code>Mixins</code> are like functions for CSS. Here is how to write one:",
|
||||
"<blockquote>@mixin box-shadow($x, $y, $blur, $c){ <br> -webkit-box-shadow: $x, $y, $blur, $c;<br> -moz-box-shadow: $x, $y, $blur, $c;<br> -ms-box-shadow: $x, $y, $blur, $c;<br> box-shadow: $x, $y, $blur, $c;<br>}</blockquote>",
|
||||
"The definition starts with <code>@mixin</code> followed by a custom name. The parameters (the <code>$x</code>, <code>$y</code>, <code>$blur</code>, and <code>$c</code> in the example above) are optional.",
|
||||
"Now any time a <code>box-shadow</code> rule is needed, only a single line calling the <code>mixin</code> replaces having to type all the vendor prefixes. A <code>mixin</code> is called with the <code>@include</code> directive:",
|
||||
"<blockquote>div {<br> @include box-shadow(0px, 0px, 4px, #fff);<br>}</blockquote>",
|
||||
"<h4>Instructions</h4>",
|
||||
"Write a <code>mixin</code> for <code>border-radius</code> and give it a <code>$radius</code> parameter. It should use all the vendor prefixes from the example. Then use the <code>border-radius</code> <code>mixin</code> to give the <code>#awesome</code> element a border radius of 15px."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" #awesome {",
|
||||
" width: 150px;",
|
||||
" height: 150px;",
|
||||
" background-color: green;",
|
||||
" ",
|
||||
" }",
|
||||
"</style>",
|
||||
"",
|
||||
"<div id=\"awesome\"></div>",
|
||||
" "
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/@mixin\\s+?border-radius\\(\\$radius\\)\\s*?{/gi), 'message: Your code should declare a <code>mixin</code> named <code>border-radius</code> which has a parameter named <code>$radius</code>.');",
|
||||
"assert(code.match(/-webkit-border-radius:\\s*?\\$radius;/gi), 'message: Your code should include the <code>-webkit-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');",
|
||||
"assert(code.match(/-moz-border-radius:\\s*?\\$radius;/gi), 'message: Your code should include the <code>-moz-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');",
|
||||
"assert(code.match(/-ms-border-radius:\\s*?\\$radius;/gi), 'message: Your code should include the <code>-ms-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');",
|
||||
"assert(code.match(/border-radius:\\s*?\\$radius;/gi).length == 4, 'message: Your code should include the general <code>border-radius</code> rule that uses the <code>$radius</code> parameter.');",
|
||||
"assert(code.match(/@include\\s+?border-radius\\(15px\\);/gi), 'message: Your code should call the <code>border-radius mixin</code> using the <code>@include</code> keyword, setting it to 15px.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"es": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"cn": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7dbe367417b2b2512bb8",
|
||||
"title": "Using @if and @else.",
|
||||
"required": [
|
||||
{
|
||||
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||
"raw": true
|
||||
}
|
||||
],
|
||||
"description": [
|
||||
"The <code>@if</code> directive in Sass is useful to test for a specific case - it works just like the <code>if</code> statement in JavaScript</code>.",
|
||||
"<blockquote>@mixin make-bold($bool) {<br> @if $bool == bold { font-weight: bold; }<br>}</blockquote>",
|
||||
"And just like in JavaScript, <code>@else if</code> and <code>@else</code> test for more conditions:",
|
||||
"<blockquote>@mixin text-effect($val) {<br> @if $val == danger {color: red;}<br> @else if $val == alert {color: yellow;}<br> @else if $val == success {color: green;}<br> @else {color: black;}<br>}</blockquote>",
|
||||
"<h4>Instructions</h4>",
|
||||
"Create a <code>mixin</code> called <code>border-stroke</code> that takes a parameter <code>$val</code>. The <code>mixin</code> should check for the following conditions using <code>@if</code>, <code>@else if</code>, and <code>@else</code>:",
|
||||
"<blockquote>light - 1px solid black<br>medium - 3px solid black<br>heavy - 6px solid black<br>none - no border</blockquote>"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" #box {",
|
||||
" width: 150px;",
|
||||
" height: 150px;",
|
||||
" background-color: red;",
|
||||
" @include border-stroke(medium);",
|
||||
" } ",
|
||||
"</style>",
|
||||
"",
|
||||
"<div id=\"box\"></div>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/@mixin\\s+?border-stroke\\(\\$val\\)\\s*?{/gi), 'message: Your code should declare a <code>mixin</code> named <code>border-stroke</code> which has a parameter named <code>$val</code>.');",
|
||||
"assert(code.match(/@if\\s+?\\$val\\s*?===?\\s*?light\\s*?{\\s*?border:\\s*?1px\\s+?solid\\s+?black;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@if</code> statement to check if <code>$val</code> is light, and to set the <code>border</code> to 1px solid black.');",
|
||||
"assert(code.match(/@else\\s+?if\\s+?\\$val\\s*?===?\\s*?medium\\s*?{\\s*?border:\\s*?3px\\s+?solid\\s+?black;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@else if</code> statement to check if <code>$val</code> is medium, and to set the <code>border</code> to 3px solid black.');",
|
||||
"assert(code.match(/@else\\s+?if\\s+?\\$val\\s*?===?\\s*?heavy\\s*?{\\s*?border:\\s*?6px\\s+?solid\\s+?black;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@else if</code> statement to check if <code>$val</code> is heavy, and to set the <code>border</code> to 6px solid black.');",
|
||||
"assert(code.match(/@else\\s*?{\\s*?border:\\s*?none;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@else</code> statement to set the <code>border</code> to none.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"es": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"cn": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7dbe367417b2b2512bb9",
|
||||
"title": "Continuing with @for",
|
||||
"required": [
|
||||
{
|
||||
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||
"raw": true
|
||||
}
|
||||
],
|
||||
"description": [
|
||||
"The <code>@for</code> directive adds styles in a loop, very similar to a <code>for</code> loop in JavaScript.",
|
||||
"<code>@for</code> is used in two ways: \"start through end\" or \"start to end\". The main difference is that \"start to end\" <em>excludes</em> the end number, and \"start through end\" <em>includes</em> the end number.",
|
||||
"Here's a start <b>through</b> end example:",
|
||||
"<blockquote>@for $i from 1 through 12 {<br> .col-#{$i} { width: 100%/12 * $i; }<br>}</blockquote>",
|
||||
"The <code>#{$i}</code> part is the syntax to combine a variable (<code>i</code>) with text to make a string. When the Sass file is converted to CSS, it looks like this:",
|
||||
"<blockquote>.col-1 {<br> width: 8.33333%;<br>}<br><br>.col-2 {<br> width: 16.66667%;<br>}<br><br>...<br><br>.col-12 {<br> width: 100%;<br>}</blockquote>",
|
||||
"This is a powerful way to create a grid layout. Now you have twelve options for column widths available as CSS classes.",
|
||||
"<h4>Instructions</h4>",
|
||||
"Write a <code>@for</code> directive that takes a variable <code>$j</code> that goes from 1 <b>to</b> 6.",
|
||||
"It should create 5 classes called <code>.text-1</code> to <code>.text-5</code> where each has a <code>font-size</code> set to 10px multiplied by the index."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
"</style>",
|
||||
"",
|
||||
"<p class=\"text-1\">Hello</p>",
|
||||
"<p class=\"text-2\">Hello</p>",
|
||||
"<p class=\"text-3\">Hello</p>",
|
||||
"<p class=\"text-4\">Hello</p>",
|
||||
"<p class=\"text-5\">Hello</p>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/@for /g), 'message: Your code should use the <code>@for</code> directive.');",
|
||||
"assert($('.text-1').css('font-size') == '10px', 'message: Your <code>.text-1</code> class should have a <code>font-size</code> of 10px.');",
|
||||
"assert($('.text-2').css('font-size') == '20px', 'message: Your <code>.text-2</code> class should have a <code>font-size</code> of 20px.');",
|
||||
"assert($('.text-3').css('font-size') == '30px', 'message: Your <code>.text-3</code> class should have a <code>font-size</code> of 30px.');",
|
||||
"assert($('.text-4').css('font-size') == '40px', 'message: Your <code>.text-4</code> class should have a <code>font-size</code> of 40px.');",
|
||||
"assert($('.text-5').css('font-size') == '50px', 'message: Your <code>.text-5</code> class should have a <code>font-size</code> of 50px.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"es": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"cn": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7dbf367417b2b2512bba",
|
||||
"title": "Expanding with @each",
|
||||
"required": [
|
||||
{
|
||||
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||
"raw": true
|
||||
}
|
||||
],
|
||||
"description": [
|
||||
"The last challenge showed how the <code>@for</code> directive uses a starting and ending value to loop a certain number of times. Sass also offers the <code>@each</code> directive which loops over each item in a list or map.",
|
||||
"On each iteration, the variable gets assigned to the current value from the list or map.",
|
||||
"<blockquote>@each $color in blue, red, green {<br> .#{$color}-text {color: $color;}<br>}</blockquote>",
|
||||
"A map has slightly different syntax. Here's an example:",
|
||||
"<blockquote>$colors: (color1: blue, color2: red, color3: green);<br><br>@each $key, $color in $colors {<br> .#{$color}-text {color: $color;}<br>}</blockquote>",
|
||||
"Note that the <code>$key</code> variable is needed to reference the keys in the map. Otherwise, the compiled CSS would have <code>color1</code>, <code>color2</code>... in it.",
|
||||
"Both of the above code examples are converted into the following CSS:",
|
||||
"<blockquote>.blue-text {<br> color: blue;<br>}<br><br>.red-text {<br> color: red;<br>}<br><br>.green-text {<br> color: green;<br>}</blockquote>",
|
||||
"<h4>Instructions</h4>",
|
||||
"Write an <code>@each</code> directive that goes through a list: <code>blue, black, red</code> and assigns each variable to a <code>.color-bg</code> class, where the \"color\" part changes for each item.",
|
||||
"Each class should set the <code>background-color</code> the respective color."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" div {",
|
||||
" height: 200px;",
|
||||
" width: 200px;",
|
||||
" }",
|
||||
"</style>",
|
||||
"",
|
||||
"<div class=\"blue-bg\"></div>",
|
||||
"<div class=\"black-bg\"></div>",
|
||||
"<div class=\"red-bg\"></div>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/@each /g), 'message: Your code should use the <code>@each</code> directive.');",
|
||||
"assert($('blue-bg').css('background-color') == 'rgb(0, 0, 255)', 'message: Your <code>.blue-bg</code> class should have a <code>background-color</code> of blue.');",
|
||||
"assert($('black-bg').css('background-color') == 'rgb(0, 0, 0)', 'message: Your <code>.black-bg</code> class should have a <code>background-color</code> of black.');",
|
||||
"assert($('red-bg').css('background-color') == 'rgb(255, 0, 0)', 'message: Your <code>.red-bg</code> class should have a <code>background-color</code> of red.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"es": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"cn": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7dbf367417b2b2512bbb",
|
||||
"title": "Wrapping up with @while",
|
||||
"required": [
|
||||
{
|
||||
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||
"raw": true
|
||||
}
|
||||
],
|
||||
"description": [
|
||||
"The <code>@while</code> directive is an option with similar functionality to the JavaScript <code>while</code> loop. It creates CSS rules until a condition is met.",
|
||||
"The <code>@for</code> challenge gave an example to create a simple grid system. This can also work with <code>@while</code>.",
|
||||
"<blockquote>$x: 1;<br>@while $x < 13 {<br> .col-#{$x} { width: 100%/12 * $x;}<br> $x: $x + 1;<br>}</blockquote>",
|
||||
"First, define a variable <code>$x</code> and set it to 1. Next, use the <code>@while</code> directive to create the grid system <i>while</i> <code>$x</code> is less than 13.",
|
||||
"After setting the CSS rule for <code>width</code>, <code>$x</code> is incremented by 1 to avoid an infinite loop.",
|
||||
"<h4>Instructions</h4>",
|
||||
"Use <code>@while</code> to create a series of classes with different <code>font-sizes</code>.",
|
||||
"There should be 10 different classes from <code>text-1</code> to <code>text-10</code>. Then set <code>font-size</code> to 5px multiplied by the current index number. Make sure to avoid an infinite loop!"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
"</style>",
|
||||
"",
|
||||
"<p class=\"text-1\">Hello</p>",
|
||||
"<p class=\"text-2\">Hello</p>",
|
||||
"<p class=\"text-3\">Hello</p>",
|
||||
"<p class=\"text-4\">Hello</p>",
|
||||
"<p class=\"text-5\">Hello</p>",
|
||||
"<p class=\"text-6\">Hello</p>",
|
||||
"<p class=\"text-7\">Hello</p>",
|
||||
"<p class=\"text-8\">Hello</p>",
|
||||
"<p class=\"text-9\">Hello</p>",
|
||||
"<p class=\"text-10\">Hello</p>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/@while /g), 'message: Your code should use the <code>@while</code> directive.');",
|
||||
"assert(code.match(/\\$.*:\\s*?1;/gi), 'message: Your code should set an index variable to 1 to start.');",
|
||||
"assert(code.match(/\\$(.*):\\s*?\\$\\1\\s*?\\+\\s*?1;/gi), 'message: Your code should increment the counter variable.');",
|
||||
"assert($('.text-1').css('font-size') == '5px', 'message: Your <code>.text-1</code> class should have a <code>font-size</code> of 5px.');",
|
||||
"assert($('.text-2').css('font-size') == '10px', 'message: Your <code>.text-2</code> class should have a <code>font-size</code> of 10px.');",
|
||||
"assert($('.text-3').css('font-size') == '15px', 'message: Your <code>.text-3</code> class should have a <code>font-size</code> of 15px.');",
|
||||
"assert($('.text-4').css('font-size') == '20px', 'message: Your <code>.text-4</code> class should have a <code>font-size</code> of 20px.');",
|
||||
"assert($('.text-5').css('font-size') == '25px', 'message: Your <code>.text-5</code> class should have a <code>font-size</code> of 25px.');",
|
||||
"assert($('.text-6').css('font-size') == '30px', 'message: Your <code>.text-6</code> class should have a <code>font-size</code> of 30px.');",
|
||||
"assert($('.text-7').css('font-size') == '35px', 'message: Your <code>.text-7</code> class should have a <code>font-size</code> of 35px.');",
|
||||
"assert($('.text-8').css('font-size') == '40px', 'message: Your <code>.text-8</code> class should have a <code>font-size</code> of 40px.');",
|
||||
"assert($('.text-9').css('font-size') == '45px', 'message: Your <code>.text-9</code> class should have a <code>font-size</code> of 45px.');",
|
||||
"assert($('.text-10').css('font-size') == '50px', 'message: Your <code>.text-10</code> class should have a <code>font-size</code> of 50px.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"es": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"cn": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7dbf367417b2b2512bbc",
|
||||
"title": "Partials",
|
||||
"required": [
|
||||
{
|
||||
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||
"raw": true
|
||||
}
|
||||
],
|
||||
"description": [
|
||||
"<code>Partials</code> in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized.",
|
||||
"Names for <code>partials</code> start with the underscore (<code>_</code>) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the <code>.scss</code> file extension. To bring the code in the <code>partial</code> into another Sass file, use the <code>@import</code> directive.",
|
||||
"For example, if all your <code>mixins</code> are saved in a <code>partial</code> named \"_mixins.scss\", and they are needed in the \"main.scss\" file, this is how to use them in the main file:",
|
||||
"<blockquote>// In the main.scss file<br><br>@import 'mixins'</blockquote>",
|
||||
"Note that the underscore is not needed in the <code>import</code> statement - Sass understands it is a <code>partial</code>. Once a <code>partial</code> is imported into a file, all variables, <code>mixins</code>, and other code are available to use.",
|
||||
"<h4>Instructions</h4>",
|
||||
"Write an <code>@import</code> statement to import a <code>partial</code> named <code>_variables.scss</code> into the main.scss file."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"// The main.scss file",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
""
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/@import\\s+?('|\")variables\\1/gi), 'message: Your code should use the <code>@import</code> directive, and should not include the underscore in the file name.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"es": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"cn": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7fa5367417b2b2512bbd",
|
||||
"title": "Extend your CSS styles",
|
||||
"required": [
|
||||
{
|
||||
"link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
|
||||
"raw": true
|
||||
}
|
||||
],
|
||||
"description": [
|
||||
"Sass has a feature called <code>extend</code> that makes it easy to borrow the CSS rules from one element and build upon them in another.",
|
||||
"For example, the below block of CSS rules style a <code>.panel</code> class. It has a <code>background-color</code>, <code>height</code> and <code>border</code>.",
|
||||
"<blockquote>.panel{<br> background-color: red;<br> height: 70px;<br> border: 2px solid green;<br>}</blockquote>",
|
||||
"Now you want another panel called <code>.big-panel</code>. It has the same base properties as <code>.panel</code>, but also needs a <code>width</code> and <code>font-size</code>.",
|
||||
"It's possible to copy and paste the initial CSS rules from <code>.panel</code>, but the code becomes repetitive as you add more types of panels.",
|
||||
"The <code>extend</code> directive is a simple way to reuse the rules written for one element, then add more for another:",
|
||||
"<blockquote>.big-panel{<br> @extend .panel;<br> width: 150px;<br> font-size: 2em;<br>}</blockquote>",
|
||||
"The <code>.big-panel</code> will have the same properties as <code>.panel</code> in addition to the new styles.",
|
||||
"<h4>Instructions</h4>",
|
||||
"Make a class <code>.info-important</code> that extends <code>.info</code> and also has a <code>background-color</code> set to magenta."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" h3{",
|
||||
" text-align: center;",
|
||||
" }",
|
||||
" .info{",
|
||||
" width: 200px;",
|
||||
" border: 1px solid black;",
|
||||
" margin: 0 auto;",
|
||||
" }",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
"</style>",
|
||||
"<h3>Posts</h3>",
|
||||
"<div class=\"info-important\">",
|
||||
" <p>This is an important post. It should extend the class \".info\" and have its own CSS styles.</p>",
|
||||
"</div>",
|
||||
"",
|
||||
"<div class=\"info\">",
|
||||
" <p>This is a simple post. It has basic styling and can be extended for other uses.</p>",
|
||||
"</div>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/@extend\\s+?\\.info/g), 'message: Your code should use the <code>@extend</code> directive to extend the <code>info</code> class.');",
|
||||
"assert($('.info-important').css('background-color') == 'rgb(255, 0, 255)', 'message: Your <code>info-important</code> class should have a <code>background-color</code> set to magenta.');",
|
||||
"assert($('.info-important').css('width') == '200px', 'message: Your <code>info-important</code> class should inherit the styling from the <code>info</code> class.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"es": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"cn": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user