Merge branch 'staging' into js-curriculum

Conflicts:
	seed/challenges/basic-javascript.json
This commit is contained in:
Quincy Larson 2015-07-24 16:08:45 -07:00
commit cf7da2a7d5
22 changed files with 3450 additions and 2071 deletions

125
challenges/angularjs.json Normal file
View File

@ -0,0 +1,125 @@
{
"name": "AngularJS",
"order": 0.015,
"challenges": [
{
"id": "bd7154d8c441eddfaeb5bdef",
"name": "Waypoint: Get Started with Angular.js",
"dashedName": "waypoint-get-started-with-angularjs",
"difficulty": 0.34,
"challengeSeed": ["114684726"],
"description": [
"Code School has a short, free Angular.js course. This will give us a quick tour of Angular.js's mechanics and features.",
"In this course, we'll build a virtual shop entirely in Angular.js.",
"Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/1/video/1</a> and complete the section."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7155d8c441eddfaeb5bdef",
"name": "Waypoint: Apply Angular.js Directives",
"dashedName": "waypoint-apply-angularjs-directives",
"difficulty": 0.35,
"challengeSeed": ["114684727"],
"description": [
"Directives serve as markers in your HTML. When Angular.js compiles your HTML, it will can alter the behavior of DOM elements based on the directives you've used.",
"Let's learn how these powerful directives work, and how to use them to make your web apps more dynamic",
"Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/2/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/2/section/1/video/1</a> and complete the section."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7156d8c441eddfaeb5bdef",
"name": "Waypoint: Power Forms with Angular.js",
"dashedName": "waypoint-power-forms-with-angularjs",
"difficulty": 0.36,
"challengeSeed": ["114684729"],
"description": [
"One area where Angular.js really shines is its powerful web forms.",
"Learn how to create reactive Angular.js forms, including real-time form validation.",
"Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/3/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/3/section/1/video/1</a> and complete the section."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7157d8c441eddfaeb5bdef",
"name": "Waypoint: Customize Angular.js Directives",
"dashedName": "waypoint-customize-angularjs-directives",
"difficulty": 0.37,
"challengeSeed": ["114685062"],
"description": [
"Now we'll learn how to modify existing Angular.js directives, and even build directives of your own.",
"Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/4/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/4/section/1/video/1</a> and complete the section."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c441eddfaeb5bdef",
"name": "Waypoint: Create Angular.js Services",
"dashedName": "waypoint-create-angularjs-services",
"difficulty": 0.38,
"challengeSeed": ["114685060"],
"description": [
"Services are functions that you can use and reuse throughout your Angular.js app to get things done.",
"We'll learn how to use services in this final Code School Angular.js challenge.",
"Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/5/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/5/section/1/video/1</a> and complete the section."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
}
]
}

View File

@ -1,6 +1,6 @@
{
"name": "Full Stack JavaScript Projects",
"order": 0.014,
"order": 0.017,
"challenges": [
{
"id": "bd7158d8c443eddfaeb5bcef",
@ -17,9 +17,7 @@
"Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.",
"Give your workspace a name.",
"Choose Node.js in the selection area below the name field.",
"Click the Create button.",
"Wait for the workspace to finish processing and select it on the left sidebar, below the Create New Workspace button.",
"Click the \"Start Editing\" button.",
"Click the Create button. Then click into your new workspace.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",
"Never run this command on your local machine. But in your Cloud 9 terminal window, run: <code>rm -rf * && echo \"export NODE_PATH=$NODE_PATH:/home/ubuntu/.nvm/v0.10.35/lib/node_modules\" >> ~/.bashrc && source ~/.bashrc && npm install -g yo grunt grunt-cli generator-angular-fullstack && yo angular-fullstack</code>",
"Yeoman will prompt you to answer some questions. Answer them like this:",
@ -59,6 +57,7 @@
"Set the config flag for your Heroku environment and add MongoLab for your MongoDB instance by running the following command: <code>cd ~/workspace/dist && heroku config:set NODE_ENV=production && heroku addons:create mongolab</code>.",
"As you build your app, you should frequently commit changes to your codebase. Make sure you're in the <code>~/workspace</code> directory by running <code>cd ~/workspace</code>. Then you can this code to stage the changes to your changes and commit them: <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a short summary of the changes you made to your code, such as \"added a records controller and corresponding routes\".",
"You can push these new commits to GitHub by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
"Now you're ready to move on to your first Basejump. Click the \"I've completed this challenge\" and move on."
],
"challengeType": 2,
@ -69,9 +68,9 @@
"name": "Basejump: Build a Voting App",
"dashedName": "basejump-build-a-voting-app",
"difficulty": 2.01,
"challengeSeed": ["128451852"],
"challengeSeed": ["133315786"],
"description": [
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://voteplex.herokuapp.com/' target='_blank'>http://voteplex.herokuapp.com/</a> and deploy it to Heroku.",
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://votingapp.herokuapp.com/' target='_blank'>http://votingapp.herokuapp.com/</a> and deploy it to Heroku.",
"Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
"As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
"You can push these new commits to GitHub by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
@ -84,6 +83,7 @@
"<span class='text-info'>Bonus User Story:</span> As an unauthenticated user, I can see everyone's polls, but I can't vote on anything.",
"<span class='text-info'>Bonus User Story:</span> As an unauthenticated or authenticated user, I can see the results of polls in chart form. (This could be implemented using Chart.js or Google Charts.)",
"<span class='text-info'>Bonus User Story:</span> As an authenticated user, if I don't like the options on a poll, I can create a new option.",
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
@ -105,9 +105,9 @@
"name": "Basejump: Build a Nightlife Coordination App",
"dashedName": "basejump-build-a-nightlife-coordination-app",
"difficulty": 2.02,
"challengeSeed": ["128451852"],
"challengeSeed": ["133315781"],
"description": [
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://sociallife.herokuapp.com/' target='_blank'>http://sociallife.herokuapp.com/</a> and deploy it to Heroku.",
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://whatsgoinontonight.herokuapp.com/' target='_blank'>http://whatsgoinontonight.herokuapp.com/</a> and deploy it to Heroku.",
"Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
"As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
"You can push these new commits to GitHub by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
@ -116,6 +116,8 @@
"<span class='text-info'>User Story:</span> As an authenticated user, I can add myself to a bar to indicate I am going there tonight.",
"<span class='text-info'>User Story:</span> As an authenticated user, I can remove myself from a bar if I no longer want to go there.",
"<span class='text-info'>Bonus User Story:</span> As an unauthenticated user, when I login I should not have to search again.",
"<span class='text-info'>Hint:</span> Try using the <a href='https://www.yelp.com/developers/documentation/v2/overview' target='_blank'>Yelp API</a> to find venues in the cities your users search for.",
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
@ -137,9 +139,9 @@
"name": "Basejump: Chart the Stock Market",
"dashedName": "basejump-chart-the-stock-market",
"difficulty": 2.03,
"challengeSeed": ["128451852"],
"challengeSeed": ["133315787"],
"description": [
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://stockjump.herokuapp.com/' target='_blank'>http://stockjump.herokuapp.com/</a> and deploy it to Heroku.",
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://stockstream.herokuapp.com/' target='_blank'>http://stockstream.herokuapp.com/</a> and deploy it to Heroku.",
"Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
"As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
"You can push these new commits to GitHub by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
@ -148,6 +150,7 @@
"<span class='text-info'>User Story:</span> As a user, I can add new stocks by their symbol name.",
"<span class='text-info'>User Story:</span> As a user, I can remove stocks.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can see changes in real-time when any other user adds or removes a stock.",
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
@ -169,9 +172,9 @@
"name": "Basejump: Manage a Book Trading Club",
"dashedName": "basejump-manage-a-book-trading-club",
"difficulty": 2.04,
"challengeSeed": ["128451852"],
"challengeSeed": ["133316032"],
"description": [
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://bookoutpost.herokuapp.com/' target='_blank'>http://bookoutpost.herokuapp.com/</a> and deploy it to Heroku.",
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://bookjump.herokuapp.com/' target='_blank'>http://bookjump.herokuapp.com/</a> and deploy it to Heroku.",
"Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
"As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
"You can push these new commits to GitHub by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
@ -180,6 +183,7 @@
"<span class='text-info'>User Story:</span> As an authenticated user, I can add a new book.",
"<span class='text-info'>User Story:</span> As an authenticated user, I can update my settings to store my full name, city, and state.",
"<span class='text-info'>Bonus User Story:</span> As an authenticated user, I can propose a trade and wait for the other user to accept the trade.",
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
@ -201,9 +205,9 @@
"name": "Basejump: Build a Pinterest Clone",
"dashedName": "basejump-build-a-pinterest-clone",
"difficulty": 2.05,
"challengeSeed": ["128451852"],
"challengeSeed": ["133315784"],
"description": [
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://linkterest.herokuapp.com/' target='_blank'>http://linkterest.herokuapp.com/</a> and deploy it to Heroku.",
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://stark-lowlands-3680.herokuapp.com/' target='_blank'>http://stark-lowlands-3680.herokuapp.com/</a> and deploy it to Heroku.",
"Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
"As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
"You can push these new commits to GitHub by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
@ -215,6 +219,7 @@
"<span class='text-info'>User Story:</span> As an unauthenticated user, I can browse other users' walls of images.",
"<span class='text-info'>Bonus User Story:</span> As an authenticated user, if I upload an image that is broken, it will be replaced by a placeholder image. (can use jQuery broken image detection)",
"<span class='text-info'>Hint:</span> <a href='http://masonry.desandro.com/' target='_blank'>Masonry.js</a> is a library that allows for Pinterest-style image grids.",
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your Heroku project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],

View File

@ -3,7 +3,7 @@
"order": 0.006,
"challenges": [
{
"_id":"bd7123c9c441eddfaeb4bdef",
"id":"bd7123c9c441eddfaeb4bdef",
"name":"Welcome To Comments",
"dashedName":"waypoint-welcome-to-comments",
"difficulty":"9.98",
@ -29,7 +29,7 @@
"challengeType": 1
},
{
"_id": "bd7123c9c441eddfaeb5bdef",
"id": "bd7123c9c441eddfaeb5bdef",
"name": "Unconditionally Loving Booleans",
"dashedName": "waypoint-unconditionally-loving-booleans",
"difficulty": "9.98001",
@ -55,7 +55,7 @@
"challengeType": 1
},
{
"_id": "bd7123c9c443eddfaeb5bdef",
"id": "bd7123c9c443eddfaeb5bdef",
"name": "Start Using Variables",
"dashedName": "waypoint-start-using-variables",
"difficulty": "9.9801",
@ -83,7 +83,7 @@
"challengeType": 1
},
{
"_id": "bd7123c9c444eddfaeb5bdef",
"id": "bd7123c9c444eddfaeb5bdef",
"name": "Define Your First and Last Name",
"dashedName": "waypoint-define-your-first-and-last-name",
"difficulty": "9.9802",
@ -111,7 +111,7 @@
"challengeType": 1
},
{
"_id": "bd7123c9c448eddfaeb5bdef",
"id": "bd7123c9c448eddfaeb5bdef",
"name": "Check the Length Property of a String Variable",
"dashedName": "waypoint-check-the-length-property-of-a-string-variable",
"difficulty": "9.9809",
@ -142,7 +142,7 @@
"challengeType": 1
},
{
"_id": "bd7123c9c549eddfaeb5bdef",
"id": "bd7123c9c549eddfaeb5bdef",
"name": "Use Bracket Notation to Find the First Character in a String",
"dashedName": "waypoint-use-bracket-notation-to-find-the-first-character-in-a-string",
"difficulty": "9.9810",
@ -174,7 +174,7 @@
"challengeType": 1
},
{
"_id": "bd7123c9c450eddfaeb5bdef",
"id": "bd7123c9c450eddfaeb5bdef",
"name": "Use Bracket Notation to Find the Nth Character in a String",
"dashedName": "waypoint-use-bracket-notation-to-find-the-nth-character-in-a-string",
"difficulty": "9.9811",
@ -205,7 +205,7 @@
"challengeType": 1
},
{
"_id": "bd7123c9c451eddfaeb5bdef",
"id": "bd7123c9c451eddfaeb5bdef",
"name": "Use Bracket Notation to Find the Last Character in a String",
"dashedName": "waypoint-use-bracket-notation-to-find-the-last-character-in-a-string",
"difficulty": "9.9812",
@ -235,7 +235,7 @@
"challengeType": 1
},
{
"_id": "bd7123c9c452eddfaeb5bdef",
"id": "bd7123c9c452eddfaeb5bdef",
"name": "Use Bracket Notation to Find the Nth to Last Character in a String",
"dashedName": "waypoint-use-bracket-notation-to-find-the-nth-to-last-character-in-a-string",
"difficulty": "9.9813",
@ -265,7 +265,7 @@
"challengeType": 1
},
{
"_id": "cf1111c1c11feddfaeb3bdef",
"id": "cf1111c1c11feddfaeb3bdef",
"name": "Magical Maths Addition",
"dashedName": "waypoint-magical-maths-addition",
"difficulty": "9.98141",
@ -289,7 +289,7 @@
"challengeType": 1
},
{
"_id": "cf1111c1c11feddfaeb4bdef",
"id": "cf1111c1c11feddfaeb4bdef",
"name": "Magical Maths Subtraction",
"dashedName": "waypoint-magical-maths-subtraction",
"difficulty": "9.98142",
@ -313,7 +313,7 @@
"challengeType": 1
},
{
"_id": "cf1111c1c11feddfaeb5bdef",
"id": "cf1111c1c11feddfaeb5bdef",
"name": "Magical Maths Multiplication",
"dashedName": "waypoint-magical-maths-multiplication",
"difficulty": "9.98143",
@ -337,7 +337,7 @@
"challengeType": 1
},
{
"_id": "cf1111c1c11feddfaeb6bdef",
"id": "cf1111c1c11feddfaeb6bdef",
"name": "Magical Maths Division",
"dashedName": "waypoint-magical-maths-division",
"difficulty": "9.9814",
@ -361,7 +361,7 @@
"challengeType": 1
},
{
"_id": "cf1111c1c11feddfaeb4bdef",
"id": "cf1111c1c11feddfaeb4bdef",
"name": "Creating Decimals",
"dashedName": "waypoint-creating-decimals",
"difficulty": "9.9815",
@ -386,7 +386,7 @@
"challengeType": 1
},
{
"_id": "bd7993c9c69feddfaeb7bdef",
"id": "bd7993c9c69feddfaeb7bdef",
"name": "Working With Decimals",
"dashedName": "waypoint-working-with-decimals",
"difficulty": "9.98151",
@ -411,7 +411,7 @@
"challengeType": 1
},
{
"_id": "bd7993c9c69feddfaeb8bdef",
"id": "bd7993c9c69feddfaeb8bdef",
"name": "An Array Of new Information",
"dashedName": "waypoint-an-array-of-new-information",
"difficulty": "9.9816",
@ -439,7 +439,7 @@
"challengeType": 1
},
{
"_id":"cf1111c1c11feddfaeb7bdef",
"id":"cf1111c1c11feddfaeb7bdef",
"name":"Nesting Arrays",
"dashedName":"waypoint-nesting-arrays",
"difficulty":"9.98161",
@ -460,7 +460,7 @@
"challengeType": 1
},
{
"_id":"bg9997c9c79feddfaeb9bdef",
"id":"bg9997c9c79feddfaeb9bdef",
"name":"Accessing data with Indexes",
"dashedName":"waypoint-accessing-data-with-indexes",
"difficulty":"9.9817",
@ -492,7 +492,7 @@
"challengeType": 1
},
{
"_id":"cf1111c1c11feddfaeb8bdef",
"id":"cf1111c1c11feddfaeb8bdef",
"name":"Modifying Data With Indexes",
"dashedName":"waypoint-modifying-data-with-indexes",
"difficulty":"9.98171",
@ -525,7 +525,7 @@
"challengeType": 1
},
{
"_id": "bg9994c9c69feddfaeb9bdef",
"id": "bg9994c9c69feddfaeb9bdef",
"name": "Manipulating Arrays With pop()",
"dashedName": "waypoint-manipulating-arrays-with-pop",
"difficulty": "9.9818",
@ -557,7 +557,7 @@
"challengeType": 1
},
{
"_id": "bg9995c9c69feddfaeb9bdef",
"id": "bg9995c9c69feddfaeb9bdef",
"name": "Manipulating Arrays With push()",
"dashedName": "waypoint-manipulating-arrays-with-push",
"difficulty": "9.9818",
@ -580,7 +580,7 @@
"challengeType": 1
},
{
"_id": "bg9996c9c69feddfaeb9bdef",
"id": "bg9996c9c69feddfaeb9bdef",
"name": "Manipulating Arrays With shift()",
"dashedName": "waypoint-manipulating-arrays-with-shift",
"difficulty": "9.9817",
@ -604,7 +604,7 @@
"challengeType": 1
},
{
"_id": "bg9997c9c69feddfaeb9bdef",
"id": "bg9997c9c69feddfaeb9bdef",
"name": "Manipulating Arrays With unshift()",
"dashedName": "waypoint-manipulating-arrays-with-unshift",
"difficulty": "9.9818",
@ -627,7 +627,7 @@
"challengeType": 1
},
{
"_id":"bg9997c9c89feddfaeb9bdef",
"id":"bg9997c9c89feddfaeb9bdef",
"name":"Make it functional",
"dashedName":"waypoint-make-it-functional",
"difficulty":"9.9819",
@ -665,7 +665,7 @@
"challengeType": 1
},
{
"_id":"bg9998c9c99feddfaeb9bdef",
"id":"bg9998c9c99feddfaeb9bdef",
"name":"I Object!",
"dashedName":"waypoint-i-object",
"difficulty":"9.9822",
@ -712,7 +712,7 @@
"challengeType": 1
},
{
"_id":"bg9999c9c99feddfaeb9bdef",
"id":"bg9999c9c99feddfaeb9bdef",
"name":"Manipulating Objects",
"dashedName":"waypoint-manipulating-objects",
"difficulty":"9.9823",
@ -758,7 +758,7 @@
"challengeType": 1
},
{
"_id":"cf1111c1c11feddfaeb5bdef",
"id":"cf1111c1c11feddfaeb5bdef",
"name":"Looping with for",
"dashedName":"waypoint-looping-with-for",
"difficulty":"9.9824",
@ -788,7 +788,7 @@
"challengeType": 1
},
{
"_id":"cf1111c1c11feddfaeb1bdef",
"id":"cf1111c1c11feddfaeb1bdef",
"name":"Looping with while",
"dashedName":"waypoint-looping-with-while",
"difficulty":"9.9825",
@ -819,7 +819,7 @@
"challengeType": 1
},
{
"_id":"cf1111c1c11feddfaeb2bdef",
"id":"cf1111c1c11feddfaeb2bdef",
"name":"Looping with do while",
"dashedName":"waypoint-looping-with-do-while",
"difficulty":"9.9826",
@ -850,7 +850,7 @@
"challengeType": 1
},
{
"_id":"cf1111c1c11feddfaeb9bdef",
"id":"cf1111c1c11feddfaeb9bdef",
"name":"Random Numbers",
"dashedName":"waypoint-random-numbers",
"difficulty":"9.9827",
@ -877,7 +877,7 @@
"challengeType": 1
},
{
"_id":"cf1111c1c12feddfaeb1bdef",
"id":"cf1111c1c12feddfaeb1bdef",
"name":"Random Whole Numbers",
"dashedName":"waypoint-random-whole-numbers",
"difficulty":"9.9828",
@ -907,7 +907,7 @@
"challengeType": 1
},
{
"_id":"cf1111c1c12feddfaeb2bdef",
"id":"cf1111c1c12feddfaeb2bdef",
"name":"Random Whole Numbers In a Range",
"dashedName":"waypoint-random-whole-numbers-in-a-range",
"difficulty":"9.9829",
@ -936,7 +936,7 @@
"challengeType": 1
},
{
"_id":"cf1111c1c12feddfaeb3bdef",
"id":"cf1111c1c12feddfaeb3bdef",
"name":"If Else Statements",
"dashedName":"waypoint-if-else-statements",
"difficulty":"9.983",
@ -971,7 +971,7 @@
"challengeType": 1
},
{
"_id":"cf1111c1c12feddfaeb6bdef",
"id":"cf1111c1c12feddfaeb6bdef",
"name":"An Intro To RegEx",
"dashedName":"waypoint-an-intro-to-regex",
"difficulty":"9.984",
@ -1008,7 +1008,7 @@
"challengeType": 1
},
{
"_id":"cf1111c1c12feddfaeb7bdef",
"id":"cf1111c1c12feddfaeb7bdef",
"name":"Finding Numbers",
"dashedName":"waypoint-finding-numbers",
"difficulty":"9.985",
@ -1040,7 +1040,7 @@
"challengeType": 1
},
{
"_id":"cf1111c1c12feddfaeb8bdef",
"id":"cf1111c1c12feddfaeb8bdef",
"name":"Finding WhiteSpace",
"dashedName":"waypoint-finding-whitespace",
"difficulty":"9.987",

View File

@ -1,6 +1,6 @@
{
"name": "Front End Development Projects",
"order": 0.012,
"name": "Basic Front End Development Projects",
"order": 0.006,
"challenges": [
{
"id": "bd7158d8c442eddfbeb5bd1f",
@ -37,21 +37,58 @@
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c242eddfaeb5bd13",
"name": "Zipline: Build a Personal Portfolio Webpage",
"dashedName": "zipline-build-a-personal-portfolio-webpage",
"difficulty": 1.01,
"challengeSeed": ["133315782"],
"description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/ThiagoFerreir4/full/eNMxEp' target='_blank'>http://codepen.io/ThiagoFerreir4/full/eNMxEp</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can access all of the portfolio webpage's content just by scrolling.",
"<span class='text-info'>User Story:</span> As a user, I can click different buttons that will take me to the portfolio creator's different social media pages.",
"<span class='text-info'>User Story:</span> As a user, I can see thumbnail images of different projects the portfolio creator has built (if you don't haven't built any websites before, use placeholders.)",
"<span class='text-info'>Bonus User Story:</span> As a user, I navigate to different sections of the webpage by clicking buttons in the navigation.",
"Don't worry if you don't have anything to showcase on your portfolio yet - you will build several several apps on the next few CodePen challenges, and can come back and update your portfolio later.",
"There are many great portfolio templates out there, but for this challenge, you'll need to build a portfolio page yourself. Using Bootstrap will make this much easier for you.",
"Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jquery, you will need to target invisible anchor elements like this one: <code>&lt;a target='_blank'&rt;</a>.",
"Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
"challengeType": 3,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c442eddfaeb5bd13",
"name": "Zipline: Build a Random Quote Machine",
"dashedName": "zipline-build-a-random-quote-machine",
"difficulty": 1.01,
"difficulty": 1.02,
"challengeSeed": ["126415122"],
"description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/AdventureBear/full/vEoVMw' target='_blank'>http://codepen.io/AdventureBear/full/vEoVMw</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/AdventureBear/full/vEoVMw' target='_blank'>http://codepen.io/AdventureBear/full/vEoVMw</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can click a button to show me a new random quote.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can press a button to tweet out a quote.",
"Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.getjson/'>jQuery's $.getJSON()</a>to consume APIs.",
"Note that you can either put your quotes into an array and show them at random, or use an API to get quotes, such as <a href='http://forismatic.com/en/api/'>http://forismatic.com/en/api/</a>.",
"Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
@ -72,11 +109,11 @@
"id": "bd7158d8c442eddfaeb5bd10",
"name": "Zipline: Show the Local Weather",
"dashedName": "zipline-show-the-local-weather",
"difficulty": 1.02,
"difficulty": 1.03,
"challengeSeed": ["126415127"],
"description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/AdventureBear/full/yNBJRj' target='_blank'>http://codepen.io/AdventureBear/full/yNBJRj</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/AdventureBear/full/yNBJRj' target='_blank'>http://codepen.io/AdventureBear/full/yNBJRj</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
@ -84,110 +121,7 @@
"<span class='text-info'>Bonus User Story:</span> As a user, I can see an icon depending on the temperature..",
"<span class='text-info'>Bonus User Story:</span> As a user, I see a different background image depending on the temperature (e.g. snowy mountain, hot desert).",
"<span class='text-info'>Bonus User Story:</span> As a user, I can push a button to toggle between Fahrenheit and Celsius.",
"Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.getjson/'>jQuery's $.getJSON()</a>to consume APIs.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
"challengeType": 3,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c442eddfaeb5bd1f",
"name": "Zipline: Use the Twitch.tv JSON API",
"dashedName": "zipline-use-the-twitchtv-json-api",
"difficulty": 1.03,
"challengeSeed": ["126411564"],
"description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/GJKRxZ' target='_blank'>http://codepen.io/GeoffStorbeck/full/GJKRxZ</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can see whether Free Code Camp is currently streaming on Twitch.tv.",
"<span class='text-info'>User Story:</span> As a user, I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.",
"<span class='text-info'>User Story:</span> As a user, if Free Code Camp is streaming, I can see additional details about what they are streaming.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can search through the streams listed.",
"<span class='text-info'>Hint:</span> Here's an example call to Twitch.tv's JSON API: <code>https://api.twitch.tv/kraken/streams/freecodecamp</code>.",
"<span class='text-info'>Hint:</span> The relevant documentation about this API call is here: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
"<span class='text-info'>Hint:</span> Here's an array of the Twitch.tv usernames of people who regularly stream coding: <code>[\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"RobotCaleb\",\"comster404\",\"brunofin\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]</code>",
"Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.getjson/'>jQuery's $.getJSON()</a>to consume APIs.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
"challengeType": 3,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c442eddfaeb5bd18",
"name": "Zipline: Stylize Stories on Camper News",
"dashedName": "zipline-stylize-stories-on-camper-news",
"difficulty": 1.04,
"challengeSeed": ["126415129"],
"description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/Wveezv' target='_blank'>http://codepen.io/GeoffStorbeck/full/Wveezv</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can browse recent posts from Camper News.",
"<span class='text-info'>User Story:</span> As a user, I can click on a post to be taken to the story's original URL.",
"<span class='text-info'>User Story:</span> As a user, I can click a link to go directly to the post's discussion page.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can see how many upvotes each story has.",
"<span class='text-info'>Hint:</span> Here's the Camper News Hot Stories API endpoint: <code>http://www.freecodecamp.com/stories/hotStories</code>.",
"Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.getjson/'>jQuery's $.getJSON()</a>to consume APIs.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
"challengeType": 3,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c442eddfaeb5bd19",
"name": "Zipline: Wikipedia Viewer",
"dashedName": "zipline-wikipedia-viewer",
"difficulty": 1.05,
"challengeSeed": ["126415131"],
"description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/MwgQea' target='_blank'>http://codepen.io/GeoffStorbeck/full/MwgQea</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.",
"<span class='text-info'>Bonus User Story:</span>As a user, I can click a button to see a random Wikipedia entry.",
"<span class='text-info'>Bonus User Story:</span>As a user, when I type in the search box, I can see a dropdown menu with autocomplete options for matching Wikipedia entries.",
"<span class='text-info'>Hint:</span> Here's an entry on using Wikipedia's API: <code>http://www.mediawiki.org/wiki/API:Main_page</code>.",
"Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck. Try using <a href='http://api.jquery.com/jquery.getjson/'>jQuery's $.getJSON()</a>to consume APIs.",
"Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
@ -208,11 +142,11 @@
"id": "bd7158d8c442eddfaeb5bd0f",
"name": "Zipline: Build a Pomodoro Clock",
"dashedName": "zipline-build-a-pomodoro-clock",
"difficulty": 1.06,
"difficulty": 1.04,
"challengeSeed": ["126411567"],
"description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/RPbGxZ/' target='_blank'>http://codepen.io/GeoffStorbeck/full/RPbGxZ/</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/RPbGxZ/' target='_blank'>http://codepen.io/GeoffStorbeck/full/RPbGxZ/</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
@ -237,53 +171,24 @@
"descriptionPt": []
},
{
"id": "bd7158d8c442eddfaeb5bd17",
"name": "Zipline: Build a JavaScript Calculator",
"dashedName": "zipline-build-a-javascript-calculator",
"difficulty": 1.07,
"challengeSeed": ["126411565"],
"id": "bd7158d8c442eddfaeb5bd1f",
"name": "Zipline: Use the Twitch.tv JSON API",
"dashedName": "zipline-use-the-twitchtv-json-api",
"difficulty": 1.05,
"challengeSeed": ["126411564"],
"description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/zxgaqw' target='_blank'>http://codepen.io/GeoffStorbeck/full/zxgaqw</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/GJKRxZ' target='_blank'>http://codepen.io/GeoffStorbeck/full/GJKRxZ</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can add, subtract, multiply and divide two numbers.",
"<span class='text-info'>Bonus User Story:</span> I can clear the input field with a clear button.",
"<span class='text-info'>Bonus User Story:</span> I can keep chaining mathematical operations together until I hit the clear button, and the calculator will tell me the correct output.",
"Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
"challengeType": 3,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c442eddfaeb5bd1c",
"name": "Zipline: Build a Tic Tac Toe Game",
"dashedName": "zipline-build-a-tic-tac-toe-game",
"difficulty": 1.08,
"challengeSeed": ["126415123"],
"description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> that successfully reverse-engineers this: <a href='http://codepen.io/alex-dixon/full/JogOpQ/' target='_blank'>http://codepen.io/alex-dixon/full/JogOpQ/</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can play a game of Tic Tac Toe with the computer.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can never actually win against the computer - at best I can tie.",
"<span class='text-info'>Bonus User Story:</span> As a user, my game will reset as soon as it's over so I can play again.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can choose whether I want to play as X or O.",
"<span class='text-info'>User Story:</span> As a user, I can see whether Free Code Camp is currently streaming on Twitch.tv.",
"<span class='text-info'>User Story:</span> As a user, I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.",
"<span class='text-info'>User Story:</span> As a user, if Free Code Camp is streaming, I can see additional details about what they are streaming.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can search through the streams listed.",
"<span class='text-info'>Hint:</span> Here's an example call to Twitch.tv's JSON API: <code>https://api.twitch.tv/kraken/streams/freecodecamp</code>.",
"<span class='text-info'>Hint:</span> The relevant documentation about this API call is here: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
"<span class='text-info'>Hint:</span> Here's an array of the Twitch.tv usernames of people who regularly stream coding: <code>[\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"RobotCaleb\",\"comster404\",\"brunofin\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]</code>",
"Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"

View File

@ -6,7 +6,7 @@
"id": "bad87fee1348bd9acde08812",
"name": "Waypoint: Mobile Responsive Images",
"dashedName": "waypoint-mobile-responsive-images",
"difficulty": 0.047,
"difficulty": 1,
"description": [
"Now let's go back to our Cat Photo App. This time, we'll style it using the popular Bootstrap responsive CSS framework. First, add a new image with the <code>src</code> attribute of \"http://bit.ly/fcc-kittens2\", and add the \"img-responsive\" Bootstrap class to that image.",
"It would be great if the image could be exactly the width of our phone's screen.",
@ -92,7 +92,7 @@
"id": "bad87fee1348bd8acde08812",
"name": "Waypoint: Center Text with Bootstrap",
"dashedName": "waypoint-center-text-with-bootstrap",
"difficulty": 0.048,
"difficulty": 2,
"description": [
"Add Bootstrap's \"text-center\" class to your <code>h2</code> element.",
"Now that we're using Bootstrap, we can center our heading elements to make them look better. All we need to do is add the class <code>text-center</code> to our <code>h1</code> and <code>h2</code> elements.",
@ -174,7 +174,7 @@
"id": "bad87fee1348cd8acdf08812",
"name": "Waypoint: Create a Bootstrap Button",
"dashedName": "waypoint-create-a-bootstrap-button",
"difficulty": 0.049,
"difficulty": 3,
"description": [
"Create a new <code>button</code> element below your large kitten photo. Give it the class \"btn\" and the text of \"like this photo\".",
"Bootstrap has its own styles for <code>button</code> elements, which look much better than the plain HTML ones."
@ -257,7 +257,7 @@
"id": "bad87fee1348cd8acef08812",
"name": "Waypoint: Create a Block Element Bootstrap Button",
"dashedName": "waypoint-create-a-block-element-bootstrap-button",
"difficulty": 0.050,
"difficulty": 4,
"description": [
"Add Bootstrap's \"btn-block\" class to your Bootstrap button.",
"Normally, your <code>button</code> elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.",
@ -344,7 +344,7 @@
"id": "bad87fee1348cd8acef08811",
"name": "Waypoint: Taste the Bootstrap Button Color Rainbow",
"dashedName": "waypoint-taste-the-bootstrap-button-color-rainbow",
"difficulty": 0.051,
"difficulty": 5,
"description": [
"Add Bootstrap's \"btn-primary\" class to your button.",
"The \"btn-primary\" class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.",
@ -429,7 +429,7 @@
"id": "bad87fee1348cd8acef08813",
"name": "Waypoint: Call out Optional Actions with Button Info",
"dashedName": "waypoint-call-out-optional-actions-with-button-info",
"difficulty": 0.052,
"difficulty": 6,
"description": [
"Create a new block-level Bootstrap button below your \"Like\" button with the text \"Info\", and add Bootstrap's \"btn-info\" and \"btn-block\" classes to it.",
"Bootstrap comes with several pre-defined colors for buttons. The \"btn-info\" class is used to call attention to optional actions that the user can take.",
@ -515,7 +515,7 @@
"id": "bad87fee1348ce8acef08814",
"name": "Waypoint: Warn your Users of a Dangerous Action",
"dashedName": "waypoint-warn-your-users-of-a-dangerous-action",
"difficulty": 0.053,
"difficulty": 7,
"description": [
"Create a button with the text \"Delete\" and give it the class \"btn-danger\".",
"Bootstrap comes with several pre-defined colors for buttons. The \"btn-danger\" class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.",
@ -602,7 +602,7 @@
"id": "bad88fee1348ce8acef08815",
"name": "Waypoint: Use the Bootstrap Grid to Put Elements Side By Side",
"dashedName": "waypoint-use-the-bootstrap-grid-to-put-elements-side-by-side",
"difficulty": 0.054,
"difficulty": 8,
"description": [
"Put the \"Like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping all three of them within one <code>&#60;div class=\"row\"&#62;</code> element, then each of them within a <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",
"Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
@ -694,7 +694,7 @@
"id": "bad87fee1348bd9aedf08845",
"name": "Waypoint: Ditch Custom CSS for Bootstrap",
"dashedName": "waypoint-ditch-custom-css-for-bootstrap",
"difficulty": 0.055,
"difficulty": 9,
"description": [
"Delete the \".red-text\", \"p\", and \".smaller-image\" CSS declarations from your <code>style</code> element so that the only declarations left in your <code>style</code> element are \"h2\" and \"thick-green-border\". Then Delete the <code>p</code> element that contains a dead link. Then remove the \"red-text\" class from your <code>h2</code> element and replace it with the \"text-primary\" Bootstrap class. Finally, remove the \"smaller-image\" class from your first <code>img</code> element and replace it with the <code>img-responsive</code> class.",
"We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.",
@ -792,7 +792,7 @@
"id": "bad87fee1348bd9aede08845",
"name": "Waypoint: Create a Custom Heading",
"dashedName": "waypoint-create-a-custom-heading",
"difficulty": 0.056,
"difficulty": 11,
"description": [
"Wrap your first image and your <code>h2</code> element within a single <code>&#60;div class='row'&#62;</code> element. Wrap your <code>h2</code> text within a <code>&#60;div class='col-xs-8'&#62;</code> and your image in a <code>&#60;div class='col-xs-4'&#62;</code> so that they are on the same line.",
"We will make a simple heading for our Cat Photo App by putting them in the same row.",
@ -879,7 +879,7 @@
"id": "bad87fee1348bd9aedd08845",
"name": "Waypoint: Add Font Awesome Icons to our Buttons",
"dashedName": "waypoint-add-font-awesome-icons-to-our-buttons",
"difficulty": 0.057,
"difficulty": 12,
"description": [
"Use Font Awesome to add a \"thumbs-up\" icon to your like button by giving it a <code>i</code> element with the classes \"fa\" and \"fa-thumbs-up\".",
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the \".svg\" file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
@ -963,7 +963,7 @@
"id": "bad87fee1348bd9aedc08845",
"name": "Waypoint: Add Font Awesome Icons to all of our Buttons",
"dashedName": "waypoint-add-font-awesome-icons-to-all-of-our-Buttons",
"difficulty": 0.058,
"difficulty": 13,
"description": [
"Use Font Awesome to add a \"info-circle\" icon to your info button and a \"trash\" icon to your delete button.",
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the \".svg\" file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
@ -1047,7 +1047,7 @@
"id": "bad87fee1348bd9aedb08845",
"name": "Waypoint: Responsively Style Radio Buttons",
"dashedName": "waypoint-responsively-style-radio-buttons",
"difficulty": 0.059,
"difficulty": 14,
"description": [
"Wrap all of your radio buttons within a <code>&#60;div class='row'&#62;</code> element. Then wrap each of them within a <code>&#60;div class='col-xs-6'&#62;</code> element.",
"You can use Bootstrap's \"col-xs-*\" classes on <code>form</code> elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is."
@ -1130,7 +1130,7 @@
"id": "bad87fee1348bd9aeda08845",
"name": "Waypoint: Responsively Style Checkboxes",
"dashedName": "waypoint-responsively-style-checkboxes",
"difficulty": 0.060,
"difficulty": 15,
"description": [
"Wrap all your checkboxes in a <code>&#60;div class='row'&#62;</code> element. Then wrap each of them in a <code>&#60;div class='col-xs-4'&#62;</code> element.",
"You can use Bootstrap's \"col-xs-*\" classes on <code>form</code> elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is."
@ -1220,7 +1220,7 @@
"id": "bad87fee1348bd9aed908845",
"name": "Waypoint: Style Text Inputs as Form Controls",
"dashedName": "waypoint-style-text-inputs-as-form-controls",
"difficulty": 0.061,
"difficulty": 16,
"description": [
"Give your form's text input field a class of \"form-control\". Give your form's submit button the classes \"btn btn-primary\". Also give this button the Font Awesome icon of \"fa-paper-plane\".",
"You can add the \"fa-paper-plane\" Font Awesome icon by adding <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</code> within your submit <code>button</code> element."
@ -1319,7 +1319,7 @@
"id": "bad87fee1348bd9aec908845",
"name": "Waypoint: Line up Form Elements Responsively with Bootstrap",
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
"difficulty": 0.062,
"difficulty": 17,
"description": [
"Now let's get your form <code>input</code> and your submission <code>button</code> on the same line. We'll do this the same way we have previously: by using a <code>div</code> element with the class \"row\", and other <code>div</code> elements within it using the \"col-xs-*\" class.",
"Wrap both your form's text <code>input</code> and submit <code>button</code> within a <code>div</code> with the class \"row\". Wrap your form's text <code>input</code> within a div with the class of \"col-xs-7\". Wrap your form's submit <code>button</code> in a <code>div</code> with the class \"col-xs-5\".",
@ -1414,6 +1414,458 @@
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908846",
"name": "Waypoint: Create a Bootstrap Headline",
"dashedName": "waypoint-create-a-bootstrap-headline",
"difficulty": 18,
"description": [
],
"tests": [
"assert($('h3') && $('h3').length > 0, 'Add a <code>h3</code> element to your page.')",
"assert(editor.match(/<\\/h3>/g) && editor.match(/<h3/g) && editor.match(/<\\/h3>/g).length === editor.match(/<h3/g).length, 'Make sure your <code>h3</code> element has a closing tag.')",
"assert($('h3').hasClass('text-primary'), 'Your <code>h3</code> element should be colored by applying the class \"text-primary\"')",
"assert($('h3').hasClass('text-center'), 'Your <code>h3</code> element should be centered by applying the class \"text-center\"')",
"assert.isTrue((/jquery(\\s)+playground/gi).test($('h3').text()), 'Your <code>h3</code> element should have the text \"jQuery Playground\".')"
],
"challengeSeed": [
"",
"",
""
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9bec908846",
"name": "Waypoint: Create a Bootstrap Row",
"dashedName": "waypoint-create-a-bootstrap-row",
"difficulty": 18.5,
"description": [
],
"tests": [
"assert($('div').length > 0, 'Add a <code>div</code> element to your page.')",
"assert($('div').hasClass('row'), 'Your <code>div</code> element should have the class \"row\"')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure your <code>div</code> element has a closing tag.')"
],
"challengeSeed": [
"<h3 class='text-primary text-center'>jQuery Playground</h3>",
"",
""
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908847",
"name": "Waypoint: Split your Bootstrap Row",
"dashedName": "waypoint-split-your-bootstrap-row",
"difficulty": 19,
"description": [
],
"tests": [
"assert($('div.row').children('div.col-xs-6').length > 1, 'Wrap two <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')"
],
"challengeSeed": [
"<h3 class='text-primary text-center'>jQuery Playground</h3>",
"<div class='row'>",
"</div>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908848",
"name": "Waypoint: Create Bootstrap Wells",
"dashedName": "waypoint-create-bootstrap-wells",
"difficulty": 20,
"description": [
],
"tests": [
"assert($('div').length > 4, 'Add two <code>div</code> elements inside your <code>div class=\"row\"></code> element both with the class \"col-xs-6\"')",
"assert($('div.row').children('div.col-xs-6').length > 1, 'Wrap both of your <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
"assert($('div.col-xs-6').children('div.well').length > 1, 'Wrap both of your <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')"
],
"challengeSeed": [
"<h3 class='text-primary text-center'>jQuery Playground</h3>",
"<div class='row'>",
" <div class='col-xs-6'>",
" </div>",
" <div class='col-xs-6'>",
" </div>",
"</div>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908849",
"name": "Waypoint: Build a jQuery Playground in Bootstrap",
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
"difficulty": 21,
"description": [
],
"tests": [
],
"challengeSeed": [
"<h3 class='text-primary text-center'>jQuery Playground</h3>",
"<div class='row'>",
" <div class='col-xs-6'>",
" <div class='well'>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <div class='well'>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908850",
"name": "Waypoint: Build a jQuery Playground in Bootstrap",
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
"difficulty": 22,
"description": [
],
"tests": [
],
"challengeSeed": [
"<h3 class='text-primary text-center'>jQuery Playground</h3>",
"<div class='row'>",
" <div class='col-xs-6'>",
" <div class='well'>",
" <button></button>",
" <button></button>",
" <button></button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <div class='well'>",
" <button></button>",
" <button></button>",
" <button></button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908852",
"name": "Waypoint: Build a jQuery Playground in Bootstrap",
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
"difficulty": 23,
"description": [
],
"tests": [
],
"challengeSeed": [
"<h3 class='text-primary text-center'>jQuery Playground</h3>",
"<div class='row'>",
" <div class='col-xs-6'>",
" <div class='well'>",
" <button class='btn btn-default'></button>",
" <button class='btn btn-default'></button>",
" <button class='btn btn-default'></button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <div class='well'>",
" <button class='btn btn-default'></button>",
" <button class='btn btn-default'></button>",
" <button class='btn btn-default'></button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908853",
"name": "Waypoint: Build a jQuery Playground in Bootstrap",
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
"difficulty": 24,
"description": [
],
"tests": [
],
"challengeSeed": [
"<h3 class='text-primary text-center'>jQuery Playground</h3>",
"<div class='row'>",
" <div class='col-xs-6'>",
" <div class='well'>",
" <button class='btn btn-default target'></button>",
" <button class='btn btn-default target'></button>",
" <button class='btn btn-default target'></button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <div class='well'>",
" <button class='btn btn-default target'></button>",
" <button class='btn btn-default target'></button>",
" <button class='btn btn-default target'></button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908854",
"name": "Waypoint: Build a jQuery Playground in Bootstrap",
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
"difficulty": 25,
"description": [
],
"tests": [
],
"challengeSeed": [
"<h3 class='text-primary text-center'>jQuery Playground</h3>",
"<div class='row'>",
" <div class='col-xs-6'>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target'></button>",
" <button class='btn btn-default target'></button>",
" <button class='btn btn-default target'></button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target'></button>",
" <button class='btn btn-default target'></button>",
" <button class='btn btn-default target'></button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908855",
"name": "Waypoint: Build a jQuery Playground in Bootstrap",
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
"difficulty": 26,
"description": [
],
"tests": [
],
"challengeSeed": [
"<h3 class='text-primary text-center'>jQuery Playground</h3>",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target'></button>",
" <button class='btn btn-default target'></button>",
" <button class='btn btn-default target'></button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target'></button>",
" <button class='btn btn-default target'></button>",
" <button class='btn btn-default target'></button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908856",
"name": "Waypoint: Build a jQuery Playground in Bootstrap",
"dashedName": "waypoint-line-up-form-elements-responsively-with-bootstrap",
"difficulty": 27,
"description": [
],
"tests": [
],
"challengeSeed": [
"<h3 class='text-primary text-center'>jQuery Playground</h3>",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'></button>",
" <button class='btn btn-default target' id='target2'></button>",
" <button class='btn btn-default target' id='target3'></button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'></button>",
" <button class='btn btn-default target' id='target5'></button>",
" <button class='btn btn-default target' id='target6'></button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9aec908857",
"name": "Waypoint: Use Comments to Clarify Code",
"dashedName": "waypoint-use-comments-to-clarify-code",
"difficulty": 28,
"description": [
"add <!-- You shouldn't need to modify code below this line -->"
],
"tests": [
],
"challengeSeed": [
"<h3 class='text-primary text-center'>jQuery Playground</h3>",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
}
]
}

View File

@ -1,178 +0,0 @@
{
"name": "Computer Science",
"order": 0.005,
"challenges": [
{
"id": "bd7123d8c441eddfaeb5bdef",
"name": "Waypoint: Learn Basic Computer Science",
"dashedName": "waypoint-learn-basic-computer-science",
"difficulty": 0.90,
"challengeSeed": ["114628241"],
"description": [
"Stanford has an excellent free online Computer Science curriculum. This interactive course uses a modified version of JavaScript. It will cover a lot of concepts quickly.",
"Note that Harvard also has an excellent introduction to computer science course called CS50, but it takes more than 100 hours to complete, and doesn't use JavaScript.",
"Despite being completely self-paced, Stanford's CS101 course is broken up into weeks. Each of the following challenges will address one of those weeks.",
"Go to <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z54/z1/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z54/z1/</a> and complete the first week's course work."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Waypoint: Aprende Informática Básica",
"descriptionEs": [
"Stanford tiene en internet un excelente currículo gratuito sobre Informática. Este curso interactivo utiliza una versión modificada de JavaScript. En él se cubrirán varios conceptos rápidamente.",
"Vale recalcar que Harvard también tiene un excelente curso de introducción a la informática llamado CS50, pero éste toma más de 100 horas para completar y no utiliza JavaScript.",
"A pesar de que puedes llevarlo a tu propio ritmo, el curso de Stanford CS101 está separado en semanas. Cada uno de los desafíos apuntará a cada una de esas semanas.",
"Ingresa a <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z54/z1/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z54/z1/</a> y completa la primera semana del curso."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd8124d8c441eddfaeb5bdef",
"name": "Waypoint: Learn Loops",
"dashedName": "waypoint-learn-loops",
"difficulty": 0.19,
"challengeSeed": ["114597348"],
"description": [
"Now let's tackle week 2 of Stanford's Intro to Computer Science course.",
"This will introduce us to loops, a fundamental feature of every programming language.",
"Go to <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z100/a7a70ce6e4724c58862ee6007284face/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z100/a7a70ce6e4724c58862ee6007284face/</a> and complete Week 2."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Waypoint: Aprende Loops",
"descriptionEs": [
"Ahora apuntaremos a completar la semana 2 del curso de Introducción a Informática de Stanford.",
"Esto nos introducirá a los loops (bucles), una característica fundamental de todos los lenguajes de programación",
"Ingresa a <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z100/a7a70ce6e4724c58862ee6007284face/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z100/a7a70ce6e4724c58862ee6007284face/</a> y completa la segunda semana del curso."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd8125d8c441eddfaeb5bdef",
"name": "Waypoint: Learn Computer Hardware",
"dashedName": "waypoint-learn-computer-hardware",
"difficulty": 0.20,
"challengeSeed": ["114597347"],
"description": [
"Week 3 of Stanford's Intro to Computer Science covers computer hardware and explains Moore's law of exponential growth in the price-performance of processors.",
"This challenge will also give you an understanding of how bits and bytes work.",
"Go to <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z143/z101/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z143/z101/</a> and complete Week 3."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Waypoint: Aprende sobre el Hardware de las Computadoras",
"descriptionEs": [
"La semana 3 del curso de Introducción a Informática de Stanford cubrirá el hardware de las computadoras y explicará la ley de Moore sobre el crecimiento exponencial del precio-desempeño de los procesadores.",
"Este desafío también te dará un entendimiento más amplio sobre como funcionan los bits y bytes.",
"Ingresa a <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z143/z101/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z143/z101/</a> y completa la tercera semana del curso."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd8126d8c441eddfaeb5bdef",
"name": "Waypoint: Learn Computer Networking",
"dashedName": "waypoint-learn-computer-networking",
"difficulty": 0.21,
"challengeSeed": ["114604811"],
"description": [
"Now that you've learned about computer hardware, it's time to learn about the software that runs on top of it.",
"Particularly important, you will learn about networks and TCP/IP - the protocol that powers the internet.",
"Go to <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z187/z144/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z187/z144/</a> and complete Week 4."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Waypoint: Aprende sobre Redes de Computadoras",
"descriptionEs": [
"Ahora que ya hemos aprendido sobre hardware, es hora de aprender sobre el software que corre encima de él.",
"Es importante recalcar que aprenderás sobre como funcionan las redes y TCP/IP - el protocolo que potencia el internet.",
"Ingresa a <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z187/z144/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z187/z144/</a> y completa la cuarta semana del curso."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd8127d8c441eddfaeb5bdef",
"name": "Waypoint: Learn Boolean Logic",
"dashedName": "waypoint-learn-boolean-logic",
"difficulty": 0.22,
"challengeSeed": ["114604812"],
"description": [
"Now we'll do some more table exercises and learn boolean logic.",
"We'll also learn the difference between digital data and analog data.",
"Go to <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z208/z188/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z208/z188/</a> and complete Week 5."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Waypoint: Aprende Lógica Booleana",
"descriptionEs": [
"Ahora trabajaremos más ejercicios de tablas y aprenderemos lógica booleana.",
"También aprenderemos la diferencia entre datos digitales y datos análogos.",
"Ingresa a <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z208/z188/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z208/z188/</a> y completa la quinta semana del curso."
],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd8128d8c441eddfaeb5bdef",
"name": "Waypoint: Learn Computer Security",
"dashedName": "waypoint-learn-computer-security",
"difficulty": 0.23,
"challengeSeed": ["114604813"],
"description": [
"We're almost done with Stanford's Introduction to Computer Science course!",
"We'll learn about one of the most important inventions of the 20th century - spreadsheets.",
"We'll also learn about Computer Security and some of the more common vulnerabilities software systems have.",
"Go to <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z229/z213/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z229/z213/</a> and complete Week 6, the final week of the course."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Waypoint: Aprende sobre Seguridad Informática",
"descriptionEs": [
"¡Ya casi completamos el curso de Introducción a la Informática!",
"Aprenderemos sobre una de la más importante invención del siglo 20 - la hoja de cálculo.",
"También aprenderemos sobre la Seguridad Informática y sobre algunas de las vulnerabilidades más comúnes en los sistemas de software.",
"Ingresa a <a href='https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z229/z213/' target='_blank'>https://class.stanford.edu/courses/Engineering/CS101/Summer2014/courseware/z229/z213/</a> y completa la sexta y última semana del curso."
],
"namePt": "",
"descriptionPt": []
}
]
}

View File

@ -10,9 +10,10 @@
"challengeSeed": ["129169463"],
"description": [
"Functional programming holds the key to unlocking JavaScript's powerful asynchronous features.",
"Jafar Husain's 42-step interactive Functional Programming course will familiarize you with the various ways you can recombine these functions.",
"Jafar Husain's interactive Functional Programming course will familiarize you with the various ways you can recombine these functions.",
"Functional programming in JavaScript involves using five key functions: \"map\", \"reduce\", \"filter\", \"concatAll\", and \"zip\".",
"Click here to go to the challenge: <a href='http://jhusain.github.io/learnrx/' target='_blank'>http://jhusain.github.io/learnrx/</a>.",
"You only need to complete the first 27 steps of this tutorial.",
"This challenge will take several hours, but don't worry. Jafar's website will save your progress (using your browser's local storage) so you don't need to finish it in one sitting.",
"If you've spent several minutes on one of these challenges, and still can't figure out its correct answer, you can click \"show answer\", then click \"run\" to advance to the next challenge. Be sure to read the correct answer and make sure you understand it before moving on."
],

View File

@ -1,598 +0,0 @@
{
"name": "jQuery, Ajax and JSON",
"dashedName": "jQuery, Ajax and JSON",
"order": 0.004,
"challenges": [{
"id": "bad87fee1348bd9acdd08826",
"name": "Waypoint: Learn how Script Tags and Document Ready Work",
"dashedName": "Waypoint: Learn how Script Tags and Document Ready Work",
"difficulty": 0.072,
"description": [
"We've simplified our Cat Photo App and removed our <code>style</code> element. Add a <code>script</code> element to your page and create a <code>$(document).ready</code> function within it.",
"Add <code>$(document).ready(function() {</code> to your <code>script</code> element, and then close it on the following line with <code>});</code>."
],
"tests": [
"assert(editor.match(/<script>/g), 'Create a <code>script</code> element.')",
"assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Make sure your <code>script</code> element has a closing tag.')",
"assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Add <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'Close your <code>$(document).ready(function() {</code> function with <code>\\}\\);</code>.')"
],
"challengeSeed": [
"",
"",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9bedc08826",
"name": "Waypoint: Target Elements by Selectors Using jQuery",
"dashedName": "waypoint-target-elements-by-selectors-using-jquery",
"difficulty": 0.073,
"description": [
"Make all <code>button</code> elements bounce <code>$('button').addClass('animated bounce')</code>."
],
"tests": [
"assert($('button').hasClass('animated') && $('button').hasClass('bounce'), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"bounce\" to your <code>img</code> element.')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedc08826",
"name": "Waypoint: Target Elements by Class Using jQuery",
"dashedName": "waypoint-target-elements-by-class-using-jquery",
"difficulty": 0.074,
"description": [
"Make all the <code>div</code> elements with class \"well\" shake. <code>$('.well').addClass('animated shake')</code>"
],
"tests": [
"assert($('.well').hasClass('animated') && $('.well').hasClass('shake'), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"shake\" to all your elements with the class \"well\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aeda08826",
"name": "Waypoint: Target Elements by ID Using jQuery",
"dashedName": "waypoint-target-elements-by-id-using-jquery",
"difficulty": 0.075,
"description": [
"Make all the <code>button</code> element with the id \"target3\" pulse. <code>$('#target3').addClass('animated pulse')</code>."
],
"tests": [
"$('#target3').hasClass('animated') && $('#target3').hasClass('pulse'), 'Select the <code>button</code>element with the <code>id</code> of \"target3\" and use the jQuery <code>addClass()</code> function to give it the classes of \"animated\" and \"pulse\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed908826",
"name": "Waypoint: Change the CSS of an Element Using jQuery",
"dashedName": "waypoint-change-the-css-of-an-element-using-jquery",
"difficulty": 0.076,
"description": [
],
"tests": [
"assert(!editor.match(/nce\\'\\)\\;/g) && !editor.match(/ke\\'\\)\\;/g), 'Delete your <code>img</code> element selector statement and your \".btn\" selector statement.')",
"assert(editor.match(/css.*,.*background-color.*gray.\\);/g), 'Select the element with the <code>id</code> of \"cat-photo-form\" give it the background color of gray.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed808826",
"name": "Waypoint: Disable an Element Using jQuery",
"dashedName": "waypoint-disable-an-element-using-jquery",
"difficulty": 0.077,
"description": [
],
"tests": [
"assert($('form button').attr('id') === 'submit-button', 'Add the ID of \"submit-button\" to your the <code>button</code> on your <code>form</code> element.')",
"assert($('#submit-button') && $('#submit-button').prop('disabled'), 'Disable your element with the id of \"submit-button\".')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed708826",
"name": "Waypoint: Remove an Element Using jQuery",
"dashedName": "waypoint-remove-an-element-using-jquery",
"difficulty": 0.078,
"description": [
],
"tests": [
"assert($('img').length === 0, 'Use jQuery to remove your <code>img</code> element from your page.')",
"assert(editor.match(/<img/g), 'You should still have an <code>img</code> element in your HTML but jQuery should remove it.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed608826",
"name": "Waypoint: Use appendTo to Move Elements with jQuery",
"dashedName": "waypoint-use-appendto-to-move-elements-with-jquery",
"difficulty": 0.079,
"description": [
"$('.btn').appendTo('#right-well')"
],
"tests": [
"assert($('#left-well').children().length === 0, 'Your left well should not have any buttons inside it.')",
"assert($('#right-well').children().length === 6, 'Your right well should have all 6 buttons inside it.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed508826",
"name": "Waypoint: Clone an Element Using jQuery",
"dashedName": "waypoint-clone-an-element-using-jquery",
"difficulty": 0.080,
"description": [
"Clone the #target1 element and append it to the #left-well element. $('#target1').clone().appendTo('#left-well')"
],
"tests": [
"assert($('#left-well').children().length > 3, 'You should have at least 4 button elements in your #left-well element')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed308826",
"name": "Waypoint: Target the Parent of an Element Using jQuery",
"dashedName": "waypoint-target-the-parent-of-an-element-using-jquery",
"difficulty": 0.082,
"description": [
"Change the parent of the #target1 element to have the background color of red.",
"$('#target1').parent().css('background-color', 'red')"
],
"tests": [
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed208826",
"name": "Waypoint: Target the Children of an Element Using jQuery",
"dashedName": "waypoint-target-the-children-of-an-element-using-jquery",
"difficulty": 0.083,
"description": [
"Change the color of all the #left-well element's children to blue.",
"$('#right-well').children().css('background-color', 'blue')"
],
"tests": [
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed108826",
"name": "Waypoint: Target a Specific Child of an Element Using jQuery",
"dashedName": "waypoint-target-a-specific-child-of-an-element-using-jquery",
"difficulty": 0.084,
"description": [
],
"tests": [
],
"challengeSeed": [
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed008826",
"name": "Waypoint: Target Even Numbered Elements Using jQuery",
"dashedName": "waypoint-target-even-numbered-elements-using-jquery",
"difficulty": 0.085,
"description": [
],
"tests": [
],
"challengeSeed": [
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aecc08826",
"name": "Waypoint: Read Data from an Element Using jQuery",
"dashedName": "Waypoint-read-data-from-an-element-using-jquery",
"difficulty": 0.086,
"description": [
],
"tests": [
],
"challengeSeed": [
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aebc08826",
"name": "Waypoint: Get Data from an URL Using jQuery",
"dashedName": "waypoint-get-data-from-a-url-using-jquery",
"difficulty": 0.087,
"description": [
],
"tests": [
],
"challengeSeed": [
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9ae9c08826",
"name": "Waypoint: Loop through JSON Data Using jQuery",
"dashedName": "waypoint-loop-through-json-data-using-jquery",
"difficulty": 0.088,
"description": [
],
"tests": [
],
"challengeSeed": [
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9ae8c08826",
"name": "Waypoint: Setup Click Events Using jQuery",
"dashedName": "waypoint-setup-click-events-using-jquery",
"difficulty": 0.089,
"description": [
],
"tests": [
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<button id='count-presses-button' class='btn btn-primary btn-block btn-lg>Press me</button>",
"<span id='times-pressed'>"
],
"challengeType": 0
},
{
"id": "bad88fee1348bd9ae8c08826",
"name": "Waypoint: Wire AJAX Call into a jQuery Click Event",
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
"difficulty": 0.089,
"description": [
"<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>"
],
"tests": [
],
"challengeSeed": [
"fccss",
" var random = function() { return Math.floor(Math.random() * 3) }",
" $(document).ready(function() {",
"<!-- Don't change code above this line -->",
"",
" $('#cat-button').on('click', function() {",
" $.getJSON('/json/cats.json', function( json ) {",
" var kitten = json[random()];",
" $(\"<img src='\" + kitten.imageLink + \"'>\").appendTo('#output');",
" $(\"<h3>Code name: \" + kitten.codeNames[random()] + \"</h3>\").appendTo('#output');",
" });",
" });",
"",
"<!-- Don't change code below this line -->",
" });",
"fcces",
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>Cat Button</button>",
"<div class='jumbotron' id='output'>",
"</div>"
],
"challengeType": 0
}
]
}

52
challenges/git.json Normal file
View File

@ -0,0 +1,52 @@
{
"name": "Git",
"order" : 0.012,
"challenges": [
{
"id": "bd7353d8c341eddeaeb5bd0f",
"name": "Waypoint: Save your Code Revisions Forever with Git",
"dashedName": "waypoint-save-your-code-revisions-forever-with-git",
"difficulty": 0.01,
"challengeSeed": ["133316034"],
"description": [
"We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
"Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.",
"Give your workspace a name.",
"Choose Node.js in the selection area below the name field.",
"Click the Create button. Then click into your new workspace.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",
"Install <code>how-to-npm</code> with this command: <code>npm install -g git-it</code>",
"Now start the tutorial by running <code>git-it</code>.",
"Note that you can resize the c9.io's windows by dragging their borders.",
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
"You can view this Node School module's source code on GitHub at <a href='https://github.com/jlord/git-it'>https://github.com/jlord/git-it</a>.",
"Complete \"Get Git\"",
"Complete \"Repository\"",
"Complete \"Commit to it\"",
"Complete \"Githubbin\"",
"Complete \"Remote Control\"",
"Complete \"Forks and Clones\"",
"Complete \"Branches aren't just for Birds\"",
"Complete \"It's a Small World\"",
"Complete \"Pull, Never out of Date\"",
"Complete \"Requesting you Pull, Please\"",
"Complete \"Merge Tada!\"",
"Once you've completed these steps, move on to our next challenge."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
}
]
}

829
challenges/hikes.json Normal file
View File

@ -0,0 +1,829 @@
{
"name": "Hikes",
"order": 0.050,
"challenges": [
{
"id": "bd7128d8c441eddfbeb5bddf",
"name": "Hike: Computer Basics 1: The 4 Basic Parts of a Computer",
"dashedName": "hike-computer-basics-1-the-4-basic-parts-of-a-computer",
"difficulty": 9.01,
"challengeSeed": [
"132542064"
],
"description": [
"At the very least, a machine needs these four basic parts to be considered a computer.",
"Today we're going to talk about the basics of computer hardware.",
"Computers are made up of 4 basic parts: the input, output, CPU, and memory.",
"The input is what you're putting into the computer.",
"Think about mouse, keyboard, microphone, any way you're getting data into the computer.",
"The output is what you're watching on your monitor or listening to on your speakers.",
"These can both be any format like text, numbers, videos, images, what have you, it doesn't matter.",
"CPU stands for central processing unit, and that's what we all think of when we think of a computer.",
"It's what does the functions, it's what runs the software, it manipulates the data.",
"The memory is where we store data and information.",
"Now, the CPU has exclusive access to this memory.",
"You can't get to the memory from the input or the output without the use of the CPU.",
"So, just to review, we've got 4 basic parts of the computer: the input, the output, CPU, and memory."
],
"challengeType": 6,
"tests": [
["The computer has 3 basic parts.", false, "The computer has 4 basic parts: input, output, CPU, and memory"],
["CPU stands for Central Processing Unit.", true],
["All parts can access the memory", false, "Only the CPU has access to the memory"]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7127d8c441eddfbeb5bddf",
"name": "Hike: Computer Basics 2: More Computer Hardware",
"dashedName": "hike-computer-basics-2-more-computer-hardware",
"difficulty": 9.02,
"challengeSeed": [
"132542458"
],
"description": [
"In this video we cover the basic functions of a motherboard, expansion slots, and power supply.",
"Let's quickly review - the 4 basic parts of a computer are the input, like the mouse or the keyboard, the output, which is seen on the monitor or heard on the speakers, the CPU, the central processing unit, and the memory.",
"Now memory can be short term memory, called RAM, or longer term memory.",
"That's usually as a hard drive, but it can also be a CD-ROM or a flash drive, anything like that.",
"In addition to those four basic parts, we have three more things we're going to discuss today: the motherboard, expansion cards, and power supply.",
"The motherboard is what connects everything.",
"While the data's flying around over here trying to figure out where to go, the motherboard helps route it so it goes to the right place.",
"Expansion cards are sound cards, video cards, that kind of thing that can really up your experience as a user.",
"Power supply is, as it sounds, what gets power to the computer.",
"It's usually that part that has a fan on it to keep it from overheating.",
"So let's do a quick review.",
"In addition to the four basic parts of input, output, CPU, and memory, we also usually have a motherboard, expansion cards, and a power supply."
],
"challengeType": 6,
"tests": [
["The power supply isn't a necessary part of a computer since it's not one of the 4 main parts.", false, "The computer needs power!"],
["A motherboard connects all of the working parts in a computer.", true],
["Memory is usually categorized into 3 parts.", false, "Only 2 parts, RAM and long term memory such as a hard drive"]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7126d8c441eddfbeb5bddf",
"name": "Hike: Computer Basics 3: Intro to Binary Code",
"dashedName": "hike-computer-basics-3-intro-to-binary-code",
"difficulty": 9.03,
"challengeSeed": [
"132542757"
],
"description": [
"What binary looks like, and what it can mean.",
"0's and 1's can turn be interpreted into far more complex data.",
"Today we're going to talk a little bit about binary code.",
"Binary code is a really simple computer language where there are only 1's and 0's, that are either on or off, 1 being on and 0 being off.",
"Those 1's and 0's can be pretty much anything, but generally they are just numbers, letters, and symbols.",
"We're going to go into how you decode a number in binary, but as you can probably guess, translating binary can be done with a quick google search.",
"The most important part of this is you undrestand the concept that even simple things like 1's and 0's can translate into something really complex that is the basis for all of the computer languages that exist today."
],
"challengeType": 6,
"tests": [
["1's and 0's are how we talk about little switches being on and off.", true],
["1 means on, and 0 means off.", true],
["There are some things which cannot be translated into binary.", false, "everything can be expressed through binary code!"]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7125d8c441eddfbeb5bddf",
"name": "Hike: Computer Basics 4: Decoding a Binary Number",
"dashedName": "hike-computer-basics-4-decoding-a-binary-number",
"difficulty": 9.04,
"challengeSeed": [
"132543332"
],
"description": [
"In this video, we decode a number written in binary notation.",
"Let's talk about the binary numeral system, also known as a bunch of 1's and 0's over and over again.",
"We're going to start by labeling, staring backwards, how many numbers there are.",
"(In this video there are 7, but we start at 0, so we only get up to 6.) Pretty straightforward.",
"The next step is to take 2 to the power of whatever place it is, a 2 to the 0, 2 to the 1, all the way up to the largest placeholder.",
"Then, all we have to do is fill in some mathamatical blanks by completing the exponential 2 problems.",
"If there is a 1, we keep that number (the two to the exponent solution) and add it to other \"1\" or \"on\" numbers.",
"If it's a 0, we disregard it.",
"In this video, our number adds up to 75."
],
"challengeType": 6,
"tests": [
["1 === on and 0 ===off", true],
["Not all numbers can be expressed through binary numeral notation.", false, "All numbers can!"],
["If we have the opportunity to include base 2 to every given power, we can create any number.", true]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7124d8c441eddfbeb5bddf",
"name": "Hike: Computer Basics 5: How To Measure Data Size",
"dashedName": "hike-computer-basics-5-how-to-measure-data-size",
"difficulty": 9.05,
"challengeSeed": [
"132543959"
],
"description": [
"How the size/amount of data is measured, starting from a bit and going all the way up to a petabyte.",
"Today we're going to be talking about Data Size.",
"The smallest size we can have is called a bit.",
"That bit can only be a 1 or a 0, and that goes back go binary we've been talking about.",
"After that, we've got a Nibble, which is 4 bits, which isn't common but it's adorable.",
"The Byte, which is very common, is 8 bits.",
"A lot of things are expressed in binary Bytes.",
"After we get past the tiny bit and the small Byte, we get bigger really fast.",
"The next step up is a Kilobyte, 1024 Bytes, or 1,048,576 bits.",
"After that there's Megabyte, or 1024 Bytes to the power of two.",
"Then it's Gigabyte, 1024 Bytes to the power of three; Terabyte, 1024 Bytes to the power of 4, and Petabyte, 1024 to the power of 5.",
"These get much bigger really quickly!"
],
"challengeType": 6,
"tests": [
["A Byte is the smallest possible amount of data.", false, "A Byte is 8 bits."],
["A bit is the smallest possible amount of data.", true],
["A Kilobyte is 1024 Bytes.", true]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7123d8c441eddfbeb5bddf",
"name": "Hike: Computer Basics 6: Measuring Data Speed",
"dashedName": "hike-computer-basics-6-measuring-data-speed",
"difficulty": 9.06,
"challengeSeed": [
"132545171"
],
"description": [
"Data speed and data size are measured differently.",
"In this video, we cover how data speed is measured.",
"Let's talk about data speed.",
"Data speed, unlike data size, is usually measured in bits per second, whereas size is usually measured in Bits.",
"Once we start talking exponentially, that makes a really big difference.",
"How we talk about speed really depends on what we're talking about.",
"In audio download, we talk about kilobits per second.",
"In internet, we use megabits per second.",
"In network speed, we talk about Gigabits per second (one billion bits per second!).",
"The main takeaway here is that speed is usually measured in bits and size is measured in Bytes.",
"Additionally, if you have an internet speed that says however many bits per second, keep in mind they are talking about something 8 times less than Bytes, how you are thinking about data."
],
"challengeType": 6,
"tests": [
["Data speed is measured in bits.", true],
["Data size is measured in bits.", false, "Size is Bytes and speed is bits."]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7122d8c441eddfbeb5bddf",
"name": "Hike: Computer Basics 7: Binary Bytes",
"dashedName": "hike-computer-basics-7-binary-bytes",
"difficulty": 9.07,
"challengeSeed": [
"132545417"
],
"description": [
"Binary does more than express numbers - through bytes, it can symbolize all alphanumeric symbols, which can then be interpreted into more complex code.",
"Let's talk about the most basic level that computer can understand other languages, like javascript.",
"THe most basic thing is a bit, up or down, 1 or 0.",
"After that ther'es a Byte, 8 bits.",
"All numbers (255 and less), letters, and symbols can be translated into Bytes that the computer can understand.",
"So, all of the numbers, letters, and symbols in your javascript can be translated.",
"There are a lot of languages that computers can work with, and what I want you to get away from this video is that all data in your computer boils down to binary Bytes."
],
"challengeType": 6,
"tests": [
["All digits, letters, and symbols have a binary Byte translation.", true],
["It's good practice to memorize these.", false, "You can just look these up as needed."],
["Everything can be expressed binarily, even pictures, sound, and video", true]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7121d8c441eddfbeb5bddf",
"name": "Hike: Computer Basics 8: Types of Computers",
"dashedName": "hike-computer-basics-8-types-of-computers",
"difficulty": 9.08,
"challengeSeed": [
"132546182"
],
"description": [
"This video covers the basics of supercomputers, servers, workstations, PCs, and microcontrollers.",
"Let's discuss the different types of computers.",
"The biggest type is called a super computer, a computer with lots of CPUS that work on the same problem at the same time using a technique called parallel processing.",
"The next type is called a server.",
"A server holds and accesses lots of data or programs.",
"Free Code Camp is hosted on a server which stores all of that information.",
"Let's talk now about a workstation computer - a computer that may look similar to a personal computer, but has a lot more power and is a lot pricier.",
"Toy Story was built on workstation computers.",
"Now, personal computers are by far the most common.",
"Maybe you've heard \"I'm a Mac!\" or \"I'm a PC!\", something indicating they're different, but really my own personal MacBook is still a PC, a personal compter.",
"It's both a Mac and a PC.",
"The last type of computer we'll talk about is a microcontroller, the type of computer you might have in your car that is really good at a small specialized task, but wouldn't be used the same way a PC would be."
],
"challengeType": 6,
"tests": [
["The most common type of computer is a Personal Computer, a PC.", true],
["What makes Supercomputers 'super' is when multiple CPUs work on one problem, called parallel processing.", true],
["Microcontrollers and workstation computers can perform roughly the same tasks.", false, "A microcontroller can only perform a small specialized task while a workstation computer has a lot of power, though also specialized."]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7120d8c441eddfbeb5bddf",
"name": "Hike: Computer Basics 9: More on the Motherboard",
"dashedName": "hike-computer-basics-9-more-on-the-motherboard",
"difficulty": 9.09,
"challengeSeed": [
"132547285"
],
"description": [
"A little more detail on what constitutes a motherboard and what functionalities are standard in PCs.",
"Today we're going to be talking more about the motherboard.",
"We mentioned it briefly in previous videos, but we'll give some more detail today.",
"What makes a motherboard is the connection between the CPU and the memory - if it doesn't do that, it's not a motherboard.",
"But, most motherboards do a lot more than that.",
"Primarily, they have expansion slots and ports.",
"Expansion slots are where you put anything that can increase the performance of a computer without putting more load on the CPU.",
"For example, a graphics or a sound card would up the user experience by giving better sound or video quality, but it wouldn't slow down the computer.",
"A Network Interface Card could also go in an expansion slot.",
"This would help your computer conncet with the networks around it, something we'll talk about more in upcoming videos.",
"PC and Express cards are primarily found in laptops, and Express cards are taking over due to their smaller size.",
"In addition to expansion slots, motherboards have ports.",
"On your computer, you probably know there's a place to connect USB, firewire, SD card, ethernet, even an audio plug-in to listen through headphones.",
"These are all considered ports, a place on the motherboard where you can connect the CPU to some outside source to either get or give information."
],
"challengeType": 6,
"tests": [
["A motherboard must connect the CPU, the memory, and the network.", false, "A motherboard is a motherboard as long as it connects the CPU and the memory."],
["Expansion slots allow users to add capabilities to a computer.", true],
["Ports help the computer access information.", true]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd712fd8c441eddfbeb5bddf",
"name": "Hike: Computer Basics 10: Data Networks",
"dashedName": "hike-computer-basics-10-data-networks",
"difficulty": 9.10,
"challengeSeed": [
"132547590"
],
"description": [
"This video covers the basics of local area networks, wide area networks, and virtual private networks.",
"In this video we talk about Data Networks.",
"You've heard of networks, like a water network, road network, cell phone network, or television network.",
"Today we'll talk about data networks, which are the networks that computers use.",
"The three types we'll cover are the Local Area Network (LAN), the Wide Area Network (WAN), and the Virtual Private Network (VPN).",
"A LAN is just a small group of computers that are connected together.",
"The most important thing about a LAN is that those computers are close together.",
"So, if you're using wifi at Starbucks or at your school, you're probably using a LAN that you can only connect to if you are physically close to it.",
"A WAN (Wide Area Network) is two or more LANs that are connected over long distances.",
"So, maybe a school in Colorado wants to connect to a school in Missouri.",
"They could use a WAN.",
"You might think that these are connected over the internet, and in the case of a VPN (Virtual Private Network, which is basically the same conceptionally as a WAN), you're right.",
"However, a WAN usually rents a cable from an internet company to creat the connection."
],
"challengeType": 6,
"tests": [
["You can connect to a LAN from far away.", false, "To connect to a LAN you must be physically near to it."],
["VPNs (Virtual Private Networks) and WANs (Wide Area Networks) do just about the same thing.", true],
["VPNs and WANs both use the internet to connect LANs.", false, "While both connect LANs, VPNs use the internet and WANs use a rented cable."]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd712ed8c441eddfbeb5bddf",
"name": "Hike: Computer Basics 11: IP Addresses",
"dashedName": "hike-computer-basics-11-ip-addresses",
"difficulty": 9.11,
"challengeSeed": [
"132548071"
],
"description": [
"The Internet, part 1: IP Addresses.",
"Every device has an IP address.",
"IP addresses are assigned based on location, and are vital for the internet to work.",
"We're going to talk about the Internet: Part 1, How the Internet Works.",
"To know how the internet works, we're going to talk first about IP addresses.",
"You may be familliar with the fact that each of your devices has its own IP address, just like a house or an apartment has its own address.",
"The internet can't deliver data to a device unless it has an IP address.",
"Not only does your device have one, but so does the modem, the router, and every step along the way, which we'll get to later.",
"IP addresses are determined based on location, starting with 5 big international regions.",
"Moving from left to right, the numbers mean something specific about your location.",
"This number isn't specific enough that you could call 911, give them your IP address, and have them know where you live.",
"However, it is specific enough that you could google \"Where's the best ice cream near me\" and google could give you information close to your location.",
"This is done using your IP address."
],
"challengeType": 6,
"tests": [
["IP addresses are necessary to use and participate in the internet.", true],
["IP addresses are determined and assigned based on location.", true]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd712dd8c441eddfbeb5bddf",
"name": "Hike: Computer Basics 12: How the Internet Works",
"dashedName": "hike-computer-basics-12-how-the-internet-works",
"difficulty": 9.12,
"challengeSeed": [
"132548579"
],
"description": [
"This is a brief and basic overview of how the internet works.",
"For a more in-depth explanation, check out web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm",
"Let's talk a little more about how the internet works.",
"We've already estabilished that every device and router on the intenet has its own IP address, which is assigned based on location.",
"Using these IP addresses, your device can talk to your modem, then to a router, which is set up by a web service.",
"The router would go to the domain name server, still just sending a request.",
"That server would send back the information that was requested, and it would go back to your device.",
"You might think this is fallable; if one step goes out, then the whole process is done.",
"But really, there are so many routers and so many routes that if even a big chunk goes out, that still won't really affect the functionality.",
"It's really amazing.",
"What I want you take away from this video is that your device, since it has an IP address, can send out a request for informatoin, and that information will get back to your device via servers and routers that comprise the internet.",
"Now, this explaination is really quite basic.",
"For more information, check out web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm."
],
"challengeType": 6,
"tests": [
["Your computer sends a request for information.", true],
["The Internet can be broken by a large chunk of routers and servers going down.", false, "There are so many connections that even a large amount of routers and servers can stop functioning and your experience will still not be affected."]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd712cd8c441eddfbeb5bddf",
"name": "Hike: Computer Basics 13: Software",
"dashedName": "hike-computer-basics-13-software",
"difficulty": 9.13,
"challengeSeed": [
"132548908"
],
"description": [
"We discriminate between hardware and software, and also discuss the differences between an operating system and application software.",
"In this video, we'll discuss the basics of software.",
"We've already covered hardware, which are parts of the computer you can see and feel with your hands.",
"Software is the program or the programs that run on the hardware.",
"Software is the code that is written and imprinted onto hardware.",
"The two types of software we're going to talk about today are operating system software and applications.",
"There are three main operating systems: Windows, Mac, and Linux.",
"Applications comprise all other software, like your web browser, games, things like Photoshop, how you view your mail, editing documents, etc."
],
"challengeType": 6,
"tests": [
["Safari, Chrome, and Firefox are all examples of application software.", true]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd712bd8c441eddfbeb5bddf",
"name": "Hike: What Do Programmers Do?",
"dashedName": "hike-what-do-programmers-do",
"difficulty": 9.14,
"challengeSeed": [
"133166912"
],
"description": [
"Programmers (a.k.a. coders, developers, or software engineers) solve problems by turning big ideas into tiny steps that a computer can understand.",
"In this video, we'll discuss what programmers do.",
"Programmers can also be called coders, developers, or software engineers, and what all of these peple do is take ideas and turn them into functional code.",
"It's not just creating that code, but also maintaining it.",
"Let's look at how the computer looks at code, specifically javascript.",
"The computer looks at code one line at a time, and as you're writing code, you will notice numbers on the left hand side.",
"The computer literally goes down line by line, making sense of what each line has to say.",
"Everything is done sequentially, just straight down, so refrencing something that is below and hasn't happened yet will lead to a problem.",
"Computers just read straight down like you would read a book.",
"Programmers are the ones responsible for breaking their ideas down into the little tiny steps and writing them in a way that computers can understand them."
],
"challengeType": 6,
"tests": [
["Computers look at code one line at a time", true],
["Programmers and developers are totally different professions with very little in common.", false, "Those titles are so similar they could even describe the same job position."],
["Programmers take ideas and break them down into little tiny steps the computer can understand", true]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd712ad8c441eddfbeb5bddf",
"name": "Hike: Console and Logging",
"dashedName": "hike-console-and-logging",
"difficulty": 9.15,
"challengeSeed": [
"133170880"
],
"description": [
"We discuss what (and where) the console is, why it's useful, and show a little of how it works.",
"The console: what it is, where you can find it, and what you use it for.",
"The console is very commonly used to display system adminstrative messages.",
"Your browser and your computer both have their own consoles.",
"Once you become famlliar with it, you will find it to be a very useful and powerful tool.",
"In Javascript, the console is used as a great tool for debugging and finding out where in your code there's a problem.",
"One of the most important terms you'll need to remember is \"console.log()\".",
"The process of doing this can be put anywhere in the lines of code to help find, identify, and ultimately fix specific issues.",
"Using the Chrome browser and the Chrome console, if we type in \"console.log(\"Free Code Camp rocks!\");\", the console will literally display \"Free Code Camp rocks!\".",
"This will also work with numbers and booleans, which are true/false statements.",
"When consoling words, it's important to put it inside of quotations so it recognizes it's a string."
],
"challengeType": 6,
"tests": [
["The console serves only small, unnecessary purposes.", false, "The console's main purpose is to debug, which is a vital step in creating code."],
["You can console strings (sets of words), numbers, and booleans (true/false statements)", true]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7119d8c441eddfbeb5bddf",
"name": "Hike: Variables In Code",
"dashedName": "hike-variables-in-code",
"difficulty": 9.16,
"challengeSeed": [
"133172920"
],
"description": [
"Variables are used frequently in Javascript and many other coding languages.",
"In this video, we're going to talk about variables in code.",
"Variables, just like in Algebra, are when you have a letter or a word and it represents something else.",
"Here we're doing var x = \"Briana\". When we reference \"x\" later on, it's going to know that's Briana.",
"When we console.log(x), it's going to output \"Briana\".",
"But be careful - if we put console.log(\"x\"), with the x in quotation marks, it will output the letter \"x\".",
"What I want you to take away from this video is that variables exist in code, and you can store everything from a simple string all the way up to a function, all within a simple name."
],
"challengeType": 6,
"tests": [
["Variables are useful in coding languages like JavaScript.", true],
["Variables can't stand for anything that isn't a string, number, or boolean.", false, "Variables can stand for things ranging from simple to very complex"]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7029d8c441eddfbeb5bddf",
"name": "Hike: Source Code",
"dashedName": "hike-source-code",
"difficulty": 9.17,
"challengeSeed": [
"133177129"
],
"description": [
"In this video we discuss what source code is, interpreters and compilers, and what open source means.",
"Let's talk about source code: what source code is, where you'll see it, and how the computer makes sense of it.",
"Source code itself is the actual text document that the programmer creates: they type it up, it's letters, numbers, and symbols.",
"If you give that to somebody and have them look at that document on their computer, that's not going to help them view their email, it's not going to be a browser, it's just a text document.",
"The computer has to have a way of interpreting that and making something really powerful run from it.",
"There are two main ways this is done: either by an interpreter or a compiler.",
"Every browser has an interpreter, and that's how javascript is processed.",
"Other languages, like C++, are used with a compiler.",
"Unlike an interpreter, the compiler does all of its work on the programmer's end.",
"They send out their package, their product, and it's already been compiled, it can already run on a machine.",
"Javascript, however, and other interpreter languages, you just write the javascript and the browser on the user's end has the capability to interpret it so you don't need a compiler.",
"Everyone has an opinion to which is better (interpreter or compiler), but really each has their pros and cons, and it goes on a case by case basis.",
"They're better at different things.",
"Now, let's focus on what open source means.",
"Free Code Camp is open source, meaning that all of the documentation and source code is open and accessable.",
"You may be thinking, \"so what?\", but what's awesome is that if you want to change or improve Free Code Camp, you can write that improvement and maybe get it implemented.",
"It's a great way for websites and software to grow in a strong and fast way because of the community working together to improve it.",
"One unwritten rule of contributing to open source projects is that you should generally submit your improvements to also be open source, and by giving that improvement back to the public, you let others use your improvement as well."
],
"challengeType": 6,
"tests": [
["Source code is a text document.", true],
["Javascript is a compiler language.", false, "Javascript is an interpreter language"],
["Free Code Camp is open source.", true]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7129d8b441eddfbeb5bddf",
"name": "Hike: Routers and Packets",
"dashedName": "hike-routers-and-packets",
"difficulty": 9.18,
"challengeSeed": [
"133181251"
],
"description": [
"In this video, we go into a little more detail about routers and packets, important concepts to understand about how the internet works.",
"Let's talk more about routers and how they relate to networking.",
"Routers are the things that connect different small area networks.",
"I want to give a metaphor for this: I'm a teacher and I work at a school.",
"Say I have a package that I need to get to someone who works in the district offices.",
"I don't know where she is, I don't know where her office is located, but I know her name.",
"I go to my secretary, like my first router, and I say \"Hey, I need to get this to so-and-so at the district office, can you please help me?\", and she'll say \"Sure, I don't know exactly where her office is either, but I know the next step, I can get it to the district\".",
"So she goes on and sends it to the secretary at the district office, the next router.",
"That secretary has no idea who I am or where I am, but she sees the name on the package and knows the end location.",
"What I'm trying to get across here is that each router only has to know its own little network, the stops right next to it.",
"It doesn't have to know the whole internet, but just its own connections.",
"It can take information and say, alright, I don't know exactly where that's going, but I'll pass it along in the right direction.",
"That's really all it takes.",
"Routers can be different sizes, different capacities, but what they do is know their own neighborhood, take the information, and pass it in the right direction.",
"Another thing we'll get into a little later is that the routers don't even have to have the full package of information.",
"If one comptuer is trying to send information to another, the data might get split up between different routers and that's okay.",
"The computers still know how to put the information back together correctly.",
"The little pieces of information that are sent are called packets.",
"Packets are actually little pieces of binary code (drawn on board).",
"This is an example of what packets might look like, a visual representation of the electrical current that the computer can translate into 1's and 0's, which we all know is binary that can represent literally any digital data.",
"These little packets are sent across through routers, and if a file is too large for one packet, it can be broken up into frames (smaller little packets).",
"The frames don't have to take the same route to the end destination.",
"They can take whichever route is open, whichever is fastest, and since they have the end IP address, all of the routers know where to send them.",
"Once they get to the end destination, that computer knows how to put all of the information back together."
],
"challengeType": 6,
"tests": [
["Routers have to know the whole internet.", false, "Routers just have to know the stops around them to send information in the right direction."],
["Packets are little peices of binary code.", true],
["Packets have to be sent in one piece.", false, "packets can be broken up into frames."]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7129d8a441eddfbeb5bddf",
"name": "Hike: Hardware: Chips and Moore's Law",
"dashedName": "hike-chips-and-moores-law",
"difficulty": 9.19,
"challengeSeed": [
"133182057"
],
"description": [
"We discuss what constitutes a chip and why technology gets cheaper every year.",
"In this video we are going to be talking about chips and something called Moore's Law.",
"You've probably noticed over the last 10 or so years, if you're going to go buy an MP3 player, you can get a lot more storage for a lot lower price.",
"You probably have even done the thing where you're at the store and you think, \"Well, I can get one now, or I could wait 6 months and see how far the price has dropped\", which might sound ridiculous but this is actually a trend that's been happening for a long time.",
"Let's talk about what makes a chip.",
"A chip is full of these little things called transistors, which are switches that can either be a 1 or a 0 (noticing a theme here?).",
"All of these transistors fit onto a chip, and that's how it stores information.",
"What makes these chips larger/faster is the amount of transistors on a single chip.",
"Moore's Law is the observation that the amount of transistors fit on each chip has doubled every two years since 1965.",
"This is important because it's making technology more affordable and accessible."
],
"challengeType": 6,
"tests": [
["Chips have transistors, little switches that can store a 1 or a 0.", true],
["Moore's Law is the observation that technology doubles in speed every year.", false, "Moore's Law is the observation that the number of transistors per chip doubles every 2 years)."],
["Moore's Law has slowed down in recent years.", false, "Somehow this continues to be true."]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7129d80441eddfbeb5bddf",
"name": "Hike: Analog vs Digital and File Compression",
"dashedName": "hike-analog-vs-digital-and-file-compression",
"difficulty": 9.20,
"challengeSeed": [
"133182587"
],
"description": [
"How computers turn analog sound into digital files, and the pros and cons of data compression.",
"Let's discuss analog vs digital on a very basic level.",
"Most specifically, we'll talk about how computers interpret analog sound and turn it into a digital file.",
"An analog sound wave could look like anything, but for this example it's a wavy line.",
"The computer takes it and measures at lots of different points, turning them into numbers.",
"This is called sampling.",
"Later, the computer can take those numbers and turn them into sound again.",
"Let's also discuss data compression.",
"The benefit of compression is that it's a smaller file: it's easier to store, it's easier to send to someone else, and it just takes up less space.",
"One of the ways this is done in sound is that the sampling is taken less often.",
"Another way is that it takes the measurement from a median point instead of from 0, so the numbers recorded are smaller.",
"In images, it's done by measuring groups of pixels by 16 instead of individually.",
"The takeaway from this video is that you'll want to use digital files as they're a higher quality, and when you're looking at compression, you want to decide how far you are willing to go to ensure the user still has the best possible experience."
],
"challengeType": 6,
"tests": [
["Digital files can be made from analog sounds and analog sounds can be made from digital files.", true],
["Compression is not worth it, because it lessens quality.", false, "Sometimes compression is a great idea. It depends on what you're trying to do and what your end goal for the product is."]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7129d89441eddfbeb5bddf",
"name": "Hike: Computer Security",
"dashedName": "hike-computer-security",
"difficulty": 9.21,
"challengeSeed": [
"133186284"
],
"description": [
"The basics of computer security, and how to make sure you protect your information.",
"Let's cover computer security.",
"The first thing we're going to talk about is something called a dictionary attack which has to do with your passwords.",
"When creating your passwords, some sites require extremely specific and complicated passwords, which is actually a bit unnecessary.",
"The type of attacks they're trying to gaurd you from are dictionary attacks.",
"Dictionary attacks are programmed to try every word in the dictionary, or in its own database of common words and passwords, as the password for a large mass of usernames.",
"If your password is Kangaroo, they're probably going to break into your account.",
"Most passwords aren't this simple, but that doesn't matter.",
"They attack such a massive amount of accounts that they only need a few passwords that are relatively simple.",
"When creating a password, you want to use different cases, numbers, and symbols, but one of the most effective ways to create a good password is to throw some random letters in there (ex: kangarooSyCA67).",
"Also, stay away from sequential numbers.",
"Phishing, another thing to watch out for, is emails or webpages that mimic other valid sites to try and trick people into entering their personal information, though the site truly isn't connected to the site it's trying to mimic.",
"In general, two ways to safeguard from these attacks are checking the address in the browser and to open a new browser and go to the website that is claiming to contact you.",
"Let's also discuss encryption and HTTPS.",
"If you are at Starbucks trying to access your bank account, you have reason to be suspicious that someone could see and take your information.",
"You will want to look for a green HTTPS instead of HTTP at the beginning of the web address.",
"That means that the site you're sending your information to is encrypting your passwords and other information, scrambling up data according to a code that only they know.",
"In general, whenever you're showing private or sensitive information, check for HTTPS.",
"A few other general tips: don't share passwords between important accounts.",
"If a site you use gets hacked into, your password may be compromised regardless of its strength.",
"Also, don't download strange files.",
"If you don't recognise the file type like .pdf, .txt, .jpg, be wary.",
"Some of these files you download can be very powerful and even run your computer from the inside.",
"Lastly, keep your software updated, particularly software that interacts with the internet.",
"One way that information can be compromised is when 'bad guys' find holes and gaps in security of older versions of softwares.",
"Those bugs have been patched in newer versions, so if you keep everything updated, you'll avoid lots of problems.",
"These are all very basic things you should know about how to keep your information safe on your computer."
],
"challengeType": 6,
"tests": [
["Passwords should be shared with all of your accounts.", false, "Don't reuse important passwords"],
["If you don't trust a site or an email, open a new browser and re-enter the intended location.", true],
["Keeping software updated will help protect your computer and your information.", true]
],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
}
]
}

View File

@ -1,5 +1,5 @@
{
"name": "Basic HTML5 and CSS",
"name": "HTML5 and CSS",
"order": 0.002,
"challenges": [
{
@ -8,11 +8,10 @@
"dashedName": "waypoint-say-hello-to-html-elements",
"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.",
"Welcome to Free Code Camp's first coding challenge!",
"You can edit <code>code</code> in your <code>text editor</code>, which we've embedded into this web page.",
"Do you see the code in your text editor that says <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? That's an HTML <code>element</code>.",
"Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>. Opening tags look like this: <code>&#60;h1&#62;</code>. Closing tags look like this: <code>&#60;/h1&#62;</code>. Note that the only difference between opening and closing tags is that closing tags have a slash after their opening angle bracket.",
"Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>. Opening tags look like this: <code>&#60;h1&#62;</code>. Closing tags look like this: <code>&#60;/h1&#62;</code>. Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.",
"Once you've completed each challenge, and all its tests are passing, the \"Go to my next challenge\" button will become enabled. Click it - or press control and enter at the same time - to advance to the next challenge.",
"To enable the \"Go to my next challenge\" button on this exercise, change your <code>h1</code> tag's text to say \"Hello World\" instead of \"Hello\"."
],
@ -240,11 +239,10 @@
"dashedName": "waypoint-fill-in-the-blank-with-placeholder-text",
"difficulty": 0.007,
"description": [
"Replace the text inside your <code>p</code> 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.",
"\"Lorem Ipsum\" text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
"Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called \"Kitty Ipsum\"!",
"Here are the first few words of \"Kitty Ipsum\" text, which you can copy and paste into the right position: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
"Replace the text inside your <code>p</code> element with the first few words of this \"Kitty Ipsum\" text: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
],
"tests": [
"assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your <code>p</code> element should contain the first few words of the provided \"Kitty Ipsum\" text.')"
@ -528,9 +526,9 @@
"dashedName": "waypoint-change-the-font-size-of-an-element",
"difficulty": 0.013,
"description": [
"Create a second <code>p</code> element. Then, inside your <code>&#60;style&#62;</code> element, set the \"font-size\" of all <code>p</code> elements to 16 pixels.",
"Create a second <code>p</code> element with the following Kitty Ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
"Then, inside your <code>&#60;style&#62;</code> element, set the \"font-size\" of all <code>p</code> elements to 16 pixels.",
"Font size is controlled by the \"font-size\" CSS attribute, like this: <code>h1 { font-size: 30px; }</code>.",
"First, create a second <code>p</code> element with the following Kitty Ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
"See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code>&#60;style&#62;</code> tag that we created for your \"red-text\" class."
],
"tests": [
@ -676,15 +674,15 @@
"dashedName": "waypoint-specify-how-fonts-should-degrade",
"difficulty": 0.016,
"description": [
"Make all your <code>h2</code> 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 <code>h2</code> element's font-family, and have it \"degrade\" to a different font when \"Lobster\" isn't available.",
"There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". Leave \"Lobster\" as the font-family for your <code>h2</code> elements. Make them \"degrade\" to \"Monospace\" when \"Lobster\" isn't available.",
"For example, if you wanted an element to use the \"Helvetica\" font, but also degrade to the \"Sans-Serif\" font when \"Helvetica\" wasn't available, you could use this CSS style: <code>p { font-family: Helvetica, Sans-Serif; }</code>.",
"There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". See if you can set your <code>h2</code> elements to use \"Lobster\" and degrade to \"Monospace\".",
"Now try commenting out your call to Google Fonts, so that the \"Lobster\" font isn't available. Notice how it degrades to the \"Monospace\" font."
"Now comment out your call to Google Fonts, so that the \"Lobster\" font isn't available. Notice how it degrades to the \"Monospace\" font."
],
"tests": [
"assert($('h2').css('font-family').match(/^\"?lobster/i), 'Your h2 element should use the font \"Lobster\".')",
"assert($('h2').css('font-family').match(/lobster\"?,monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')"
"assert($('h2').css('font-family').match(/lobster.*,.*monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')",
"assert(new RegExp('<!--', 'gi').test(editor), 'Comment out your call to Google for the \"Lobster\" font by putting <code>&#60!-- in front of it.')",
"assert(new RegExp('-->', 'gi').test(editor), 'Be sure to close your comment by deleting all trailing comment tags&#44; i.e. <code>--&#62;</code>.')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -734,7 +732,6 @@
"dashedName": "waypoint-add-images-to-your-website",
"difficulty": 0.017,
"description": [
"Use an <code>img</code> element to add the image <code>http://bit.ly/fcc-kittens</code> to your website.",
"You can add images to your website by using the <code>img</code> element, and point to an specific image's URL using the <code>src</code> attribute.",
"An example of this would be <code>&#60img src=\"www.your-image-source.com/your-image.jpg\"/&#62</code>. Note that in most cases, <code>img</code> elements are self-closing.",
"Try it with this image: <code>http://bit.ly/fcc-kittens</code>."
@ -790,9 +787,9 @@
"dashedName": "waypoint-size-your-images",
"difficulty": 0.018,
"description": [
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide.",
"CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the image's width.",
"For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <code>&#60;style&#62; .larger-image { width: 500px; } &#60;/style&#62;</code>."
"For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <code>&#60;style&#62; .larger-image { width: 500px; } &#60;/style&#62;</code>.",
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
],
"tests": [
"assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')",
@ -846,9 +843,9 @@
"dashedName": "waypoint-add-borders-around-your-elements",
"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.",
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code>&#60;style&#62; .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } &#60;/style&#62;</code>."
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code>&#60;style&#62; .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } &#60;/style&#62;</code>.",
"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."
],
"tests": [
"assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')",
@ -909,9 +906,9 @@
"dashedName": "waypoint-add-rounded-corners-with-a-border-radius",
"difficulty": 0.020,
"description": [
"Give your cat photo a <code>border-radius</code> of 10 pixels.",
"Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called <code>border-radius</code>.",
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to 10 pixels."
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to 10 pixels.",
"Give your cat photo a <code>border-radius</code> of 10 pixels."
],
"tests": [
"assert($('img').hasClass('thick-green-border'), 'Your image element should have the class \"thick-green-border\".')",
@ -975,8 +972,8 @@
"dashedName": "waypoint-make-circular-images-with-a-border-radius",
"difficulty": 0.021,
"description": [
"Give your cat photo a <code>border-radius</code> of 50%.",
"In addition to pixels, you can also specify a <code>border-radius</code> using a percentage."
"In addition to pixels, you can also specify a <code>border-radius</code> using a percentage.",
"Give your cat photo a <code>border-radius</code> of 50%."
],
"tests": [
"assert(parseInt($('img').css('border-top-left-radius')) > 48, 'Your image should have a border radius of 50 percent&#44; making it perfectly circular.')",
@ -1040,10 +1037,11 @@
"dashedName": "waypoint-link-to-external-pages-with-anchor-elements",
"difficulty": 0.022,
"description": [
"Create an <code>a</code> 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 <code>a</code> 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.",
"<code>a</code> elements or \"anchor\" elements, are used to link to content outside of the current page.",
"Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
"<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>",
"Here's an example: <code>&#60;p&#62;Here's a &#60;a href='http://freecodecamp.com'&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>."
"Here's an example: <code>&#60;p&#62;Here's a &#60;a href='http://freecodecamp.com'&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>.",
"Create an <code>a</code> element that links to <code>http://catphotoapp.com</code> and has \"cat photos\" as its \"anchor text\"."
],
"tests": [
"assert((/cat photos/gi).test($('a').text()), 'Your <code>a</code> element should have the anchor text of \"cat photos\"')",
@ -1110,10 +1108,10 @@
"dashedName": "waypoint-wrap-an-anchor-element-within-a-paragraph",
"difficulty": 0.023,
"description": [
"Now wrap your <code>a</code> element within a new <code>p</code> 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 <code>a</code> element for your reference:",
"<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>",
"Here's an example: <code>&#60;p&#62;Here's a &#60;a href='http://freecodecamp.com'&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>."
"Here's an example: <code>&#60;p&#62;Here's a &#60;a href='http://freecodecamp.com'&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>.",
"Now wrap your <code>a</code> element within a new <code>p</code> 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."
],
"tests": [
"assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an <code>a</code> element that links to \"catphotoapp.com\".')",
@ -1185,10 +1183,9 @@
"dashedName": "waypoint-make-dead-links-using-the-hash-symbol",
"difficulty": 0.024,
"description": [
"Use the hash symbol (#) to turn your <code>a</code> element's link into a dead link.",
"Sometimes you want to add <code>a</code> elements to your website before you know where they will link.",
"This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.",
"Replace your <code>a</code> element's <code>href</code> attribute with a hash symbol to turn it into a dead link."
"Replace your <code>a</code> element's <code>href</code> attribute with a hash symbol (#) to turn it into a dead link."
],
"tests": [
"assert($('a').attr('href') === '#', 'Your <code>anchor</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')"
@ -1255,7 +1252,6 @@
"dashedName": "waypoint-turn-an-image-into-a-link",
"difficulty": 0.025,
"description": [
"Wrap your <code>img</code> element inside an <code>a</code> element with a dead link.",
"You can make elements into links by wrapping them within an <code>a</code> element.",
"Wrap your image within an <code>a</code> element. Here's an example: <code>&#60;a href='#'&#62;&#60;img src='http://bit.ly/fcc-kittens2'/&#62;&#60;/a&#62;</code>.",
"Remember to use the hash symbol (#) as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.",
@ -1329,11 +1325,11 @@
"dashedName": "waypoint-add-alt-text-to-an-image-for-accessibility",
"difficulty": 0.026,
"description": [
"Add an <code>alt</code> attribute with the text \"A cute orange cat lying on its back\" to our cat photo.",
"<code>alt</code> attributes, also known as \"alt text\", are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. Search engines also look at <code>alt</code> attributes.",
"In short, every image should have an <code>alt</code> attribute!",
"<code>alt</code> attributes are a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.",
"You can add an <code>alt</code> attribute right in the img element like this: <code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/&#62</code>."
"You can add an <code>alt</code> attribute right in the img element like this: <code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/&#62</code>.",
"Add an <code>alt</code> attribute with the text \"A cute orange cat lying on its back\" to our cat photo."
],
"tests": [
"assert($('img').filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an <code>alt</code> attribute set to \"A cute orange cat lying on its back\".')"
@ -1401,10 +1397,10 @@
"dashedName": "waypoint-create-a-bulleted-unordered-list",
"difficulty": 0.027,
"description": [
"Replace your <code>p</code> 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.",
"Unordered lists start with a <code>&#60;ul&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
"For example: <code>&#60;ul&#62;&#60;li&#62;milk&#60;/li&#62;&#60;li&#62;cheese&#60;/li&#62;&#60;/ul&#62;</code> would create a bulleted list of \"milk\" and \"cheese\"."
"For example: <code>&#60;ul&#62;&#60;li&#62;milk&#60;/li&#62;&#60;li&#62;cheese&#60;/li&#62;&#60;/ul&#62;</code> would create a bulleted list of \"milk\" and \"cheese\".",
"Replace your <code>p</code> elements with an unordered list of three things that cats love."
],
"tests": [
"assert($('ul').length > 0, 'Create a <code>ul</code> element.')",
@ -1474,10 +1470,10 @@
"dashedName": "waypoint-create-an-ordered-list",
"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.",
"Ordered lists start with a <code>&#60;ol&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
"For example: <code>&#60;ol&#62;&#60;li&#62;hydrogen&#60;/li&#62;&#60;li&#62;helium&#60;/li&#62;&#60;/ol&#62;</code> would create a numbered list of \"hydrogen\" and \"helium\"."
"For example: <code>&#60;ol&#62;&#60;li&#62;hydrogen&#60;/li&#62;&#60;li&#62;helium&#60;/li&#62;&#60;/ol&#62;</code> would create a numbered list of \"hydrogen\" and \"helium\".",
"Create an ordered list of the top 3 things cats hate the most."
],
"tests": [
"assert($('ul').length > 0, 'You should have an <code>ul</code> element on your page.')",
@ -1554,9 +1550,10 @@
"dashedName": "waypoint-create-a-text-field",
"difficulty": 0.029,
"description": [
"Now we'll create a web form. Create a text input under your lists.",
"Now let's create a web form.",
"Text inputs are a convenient way to get input from your user.",
"You can create one like this: <code>&#60;input type='text'&#62;</code>. Note that <code>input</code> elements are self-closing."
"You can create one like this: <code>&#60;input type=\"text\"&#62;</code>. Note that <code>input</code> elements are self-closing.",
"Create an <code>input</code> element of type \"text\" below your lists."
],
"tests": [
"assert($('input').length > 0, 'Your app should have a text field input element.')"
@ -1632,9 +1629,9 @@
"dashedName": "waypoint-add-placeholder-text-to-a-text-field",
"difficulty": 0.030,
"description": [
"Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\".",
"Your placeholder text is what appears in your text <code>input</code> before your user has inputed anything.",
"You can create placeholder text like so: <code>&#60;input type='text' placeholder='this is placeholder text'&#62;</code>."
"You can create placeholder text like so: <code>&#60;input type='text' placeholder='this is placeholder text'&#62;</code>.",
"Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\"."
],
"tests": [
"assert($('input[placeholder]').length > 0, 'Add a <code>placeholder</code> attribute text <code>input</code> element.')",
@ -1712,9 +1709,9 @@
"dashedName": "waypoint-create-a-form-element",
"difficulty": 0.031,
"description": [
"Wrap your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> 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 <code>form</code> element.",
"For example: <code>&#60;form action=\"/url-where-you-want-to-submit-form-data\"&#62;&#60;/form&#62;</code>."
"For example: <code>&#60;form action=\"/url-where-you-want-to-submit-form-data\"&#62;&#60;/form&#62;</code>.",
"Wrap your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element."
],
"tests": [
"assert($('form') && $('form').children('input') && $('form').children('input').length > 0, 'Wrap your text input element within a <code>form</code> element.')",
@ -1794,13 +1791,13 @@
"dashedName": "waypoint-add-a-submit-button-to-a-form",
"difficulty": 0.032,
"description": [
"Add a submit button to your <code>form</code> 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 <code>action</code> attribute.",
"Here's an example submit button: <code>&#60;button type='submit'&#62;this button submits the form&#60;/button&#62;</code>."
"Here's an example submit button: <code>&#60;button type='submit'&#62;this button submits the form&#60;/button&#62;</code>.",
"Add a submit button to your <code>form</code> element with type \"submit\" and \"Submit\" as its text."
],
"tests": [
"assert($('form').children('button').length > 0, 'Your form should have a button inside it.')",
"assert($('button').attr('type') === 'submit', 'Your submit button should have be of input type \"submit\".')",
"assert($('button').attr('type') === 'submit', 'Your submit button should have the attribute \"type\" set to \"submit\".')",
"assert($('button').text().match(/submit/gi), 'Your submit button should have the text \"submit\".')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure your <code>button</code> element has a closing tag.')"
],
@ -1878,9 +1875,9 @@
"dashedName": "waypoint-use-html5-to-require-a-field",
"difficulty": 0.033,
"description": [
"Make your text <code>input</code> 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.",
"For example, if you wanted to make a text input field required, you can just add the word \"required\" within your <code>input</code> element, you would use: <code>&#60;input type='text' required&#62;</code>."
"For example, if you wanted to make a text input field required, you can just add the word \"required\" within your <code>input</code> element, you would use: <code>&#60;input type='text' required&#62;</code>.",
"Make your text <code>input</code> a \"required\" field, so that your user can't submit the form without completing this field."
],
"tests": [
"assert($('input').prop('required'), 'Your text <code>input</code> element should have the \"required\" attribute.')"
@ -1960,12 +1957,12 @@
"dashedName": "waypoint-create-a-set-of-radio-buttons",
"difficulty": 0.034,
"description": [
"Add to your form a pair of radio buttons. Each radio button should be wrapped within its own <code>label</code> element. They should share a common <code>name</code> 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.",
"Radio buttons are a type of <code>input</code>.",
"Each of your radio buttons should be wrapped within its own <code>label</code> elements.",
"All related radio buttons should have the same <code>name</code> attribute.",
"Here's an example of a radio button: <code>&#60;label&#62;&#60;input type='radio' name='indoor-outdoor'&#62; Indoor&#60;/label&#62;</code>."
"Here's an example of a radio button: <code>&#60;label&#62;&#60;input type='radio' name='indoor-outdoor'&#62; Indoor&#60;/label&#62;</code>.",
"Add to your form a pair of radio buttons. Each radio button should be wrapped within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\"."
],
"tests": [
"assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')",
@ -2053,9 +2050,9 @@
"dashedName": "waypoint-create-a-set-of-checkboxes",
"difficulty": 0.035,
"description": [
"Add to your form a set of three checkbox elements. Each checkbox should be wrapped within its own <code>label</code> element. All three should share the <code>name</code> attribute of \"personality\".",
"Forms commonly use checkbox inputs for questions that may have more than one answer.",
"For example: <code>&#60;label&#62;&#60;input type='checkbox' name='personality'&#62; Loving&#60;/label&#62;</code>."
"For example: <code>&#60;label&#62;&#60;input type='checkbox' name='personality'&#62; Loving&#60;/label&#62;</code>.",
"Add to your form a set of three checkbox elements. Each checkbox should be wrapped within its own <code>label</code> element. All three should share the <code>name</code> attribute of \"personality\"."
],
"tests": [
"assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')",
@ -2140,9 +2137,9 @@
"dashedName": "waypoint-check-radio-buttons-and-checkboxes-by-default",
"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 <code>checked</code> attribute.",
"To do this, just add the word \"checked\" to the inside of an input element. For example, <code>&#60;input type='radio' name='test-name' checked&#62;</code>."
"You can set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.",
"To do this, just add the word \"checked\" to the inside of an input element. For example, <code>&#60;input type='radio' name='test-name' checked&#62;</code>.",
"Set the first of your radio buttons and the first of your checkboxes to both be checked by default."
],
"tests": [
"assert($('input[type=\"radio\"]').prop('checked'), 'Your first radio button on your form should be checked by default.');",
@ -2228,11 +2225,11 @@
"dashedName": "waypoint-wrap-many-elements-within-a-single-div-element",
"difficulty": 0.038,
"description": [
"Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element.",
"The <code>div</code> element, or \"Division\" element, is a general purpose container for other elements.",
"The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.",
"Just like any other non-self-closing element, you can open a <code>div</code> element with <code>&#60;div&#62;</code> and close it on another line with <code>&#60;/div&#62;</code>.",
"Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>."
"Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>.",
"Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element."
],
"tests": [
"assert($('div').children('ol').length > 0, 'Wrap your <code>ol</code> element inside your <code>div</code> element.')",
@ -3179,8 +3176,7 @@
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
"descriptionDe": []
},
{
"id": "bad87fee1348bd9aedf08725",
@ -3213,8 +3209,7 @@
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
"descriptionDe": []
},
{
"id": "bad87fee1348bd9aedf08724",
@ -3247,8 +3242,7 @@
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
"descriptionDe": []
},
{
"id": "bad87fee1348bd9aedf08723",
@ -3281,8 +3275,7 @@
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
"descriptionDe": []
},
{
"id": "bad87fee1348bd9aedf08722",
@ -3315,8 +3308,7 @@
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
"descriptionDe": []
},
{
"id": "bad87fee1348bd9aedf08721",
@ -3349,8 +3341,7 @@
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
"descriptionDe": []
},
{
"id": "bad87fee1348bd9aede08720",
@ -3383,8 +3374,7 @@
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
"descriptionDe": []
},
{
"id": "bad87fee1348bd9aedf08720",
@ -3417,8 +3407,7 @@
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
"descriptionDe": []
},
{
"id": "bad87fee1348bd9aedf08719",
@ -3451,25 +3440,24 @@
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
"descriptionDe": []
},
{
"id": "bad87fee1348bd9aedf08718",
"name": "Waypoint: Use RGB code for Colors Instead of Hex Code",
"dashedName": "waypoint-use-rgb-code-for-colors-instead-of-hex-code",
"id": "bad87fee1348bd9aede08718",
"name": "Waypoint: Use RGB to Color Elements Instead of Hex Code",
"dashedName": "waypoint-use-rgb-to-color-elements-instead-of-hex-code",
"difficulty": 0.063,
"description": [
"Use hex code instead of a color."
"Use RGB code instead of a color or hex code."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,0,0); }</code>.')"
"assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,0,0); }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #F00;",
" background-color: #000;",
" }",
"</style>"
],
@ -3485,8 +3473,304 @@
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": [
]
"descriptionDe": []
},
{
"id": "bad88fee1348bd9aedf08726",
"name": "Waypoint: Use RGB to Color Elements White",
"dashedName": "waypoint-use-rgb-to-color-elements-white",
"difficulty": 0.064,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(255, 255, 255)', 'Give your <code>body</code> element the background-color of red.')",
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*255\\s*,\\s*255\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,255,255); }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: rgb(0, 0, 255);",
" }",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": []
},
{
"id": "bad89fee1348bd9aedf08724",
"name": "Waypoint: Use RGB to Color Elements Red",
"dashedName": "waypoint-use-rgb-to-color-elements-red",
"difficulty": 0.065,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,0,0); }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #FFFFFF;",
" }",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": []
},
{
"id": "bad80fee1348bd9aedf08723",
"name": "Waypoint: Use RGB to Color Elements Green",
"dashedName": "waypoint-use-rgb-to-color-elements-green",
"difficulty": 0.066,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(0, 255, 0)', 'Give your <code>body</code> element the background-color of green.')",
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(0,255,0); }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #FF0000;",
" }",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": []
},
{
"id": "bad81fee1348bd9aedf08722",
"name": "Waypoint: Use RGB to Color Elements Blue",
"dashedName": "waypoint-use-rgb-to-color-elements-blue",
"difficulty": 0.067,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(0, 0, 255)', 'Give your <code>body</code> element the background-color of blue.')",
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(0,0,255); }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #00FF00;",
" }",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": []
},
{
"id": "bad82fee1348bd9aedf08721",
"name": "Waypoint: Use RGB to Mix Colors",
"dashedName": "waypoint-use-rgb-to-mix-colors",
"difficulty": 0.068,
"description": [
"Use hex code instead of a orange."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(255, 165, 0)', 'Give your <code>body</code> element the background-color of orange.')",
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,165,0); }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #0000FF;",
" }",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": []
},
{
"id": "bad83fee1348bd9aede08720",
"name": "Waypoint: Use RGB to Color Elements Gray",
"dashedName": "waypoint-use-rgb-to-color-elements-gray",
"difficulty": 0.069,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(128, 128, 128)', 'Give your <code>body</code> element the background-color of gray.')",
"assert(editor.match(/rgb\\s*\\(\\s*128\\s*,\\s*128\\s*,\\s*128\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(128,128,128); }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: FFA500;",
" }",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": []
},
{
"id": "bad84fee1348bd9aedf08720",
"name": "Waypoint: Use RGB Alpha for Specific Shades of Gray",
"dashedName": "waypoint-use-rgb-alpha-for-specific-shades-of-gray",
"difficulty": 0.070,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(17, 17, 17)', 'Give your <code>body</code> element the background-color of a light gray.')",
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,0,0); }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #808080;",
" }",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": []
},
{
"id": "bad85fee1348bd9aedf08720",
"name": "Waypoint: Use RGB Alpha to Make an Element Translucent",
"dashedName": "waypoint-use-rgb-alpha-to-make-an-element-translucent",
"difficulty": 0.071,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(17, 17, 17)', 'Give your <code>body</code> element the background-color of a light gray.')",
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,0,0); }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #808080;",
" }",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": []
},
{
"id": "bad86fee1348bd9aedf08720",
"name": "Waypoint: Use RGB Alpha to make an Element Nearly Opaque",
"dashedName": "waypoint-use-rgb-alpha-to-make-an-element-nearly-opaque",
"difficulty": 0.072,
"description": [
"Use hex code instead of a color."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(17, 17, 17)', 'Give your <code>body</code> element the background-color of a light gray.')",
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,0,0); }</code>.')"
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #808080;",
" }",
"</style>"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "",
"descriptionDe": []
}
]
}

View File

@ -0,0 +1,138 @@
{
"name": "Intermediate Front End Development Projects",
"order": 0.016,
"challenges": [
{
"id": "bd7158d8c442eddfaeb5bd18",
"name": "Zipline: Stylize Stories on Camper News",
"dashedName": "zipline-stylize-stories-on-camper-news",
"difficulty": 1.02,
"challengeSeed": ["126415129"],
"description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/Wveezv' target='_blank'>http://codepen.io/GeoffStorbeck/full/Wveezv</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can browse recent posts from Camper News.",
"<span class='text-info'>User Story:</span> As a user, I can click on a post to be taken to the story's original URL.",
"<span class='text-info'>User Story:</span> As a user, I can click a link to go directly to the post's discussion page.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can see how many upvotes each story has.",
"<span class='text-info'>Hint:</span> Here's the Camper News Hot Stories API endpoint: <code>http://www.freecodecamp.com/stories/hotStories</code>.",
"Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
"challengeType": 3,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c442eddfaeb5bd19",
"name": "Zipline: Wikipedia Viewer",
"dashedName": "zipline-wikipedia-viewer",
"difficulty": 1.03,
"challengeSeed": ["126415131"],
"description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/MwgQea' target='_blank'>http://codepen.io/GeoffStorbeck/full/MwgQea</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.",
"<span class='text-info'>Bonus User Story:</span>As a user, I can click a button to see a random Wikipedia entry.",
"<span class='text-info'>Bonus User Story:</span>As a user, when I type in the search box, I can see a dropdown menu with autocomplete options for matching Wikipedia entries.",
"<span class='text-info'>Hint:</span> Here's an entry on using Wikipedia's API: <code>http://www.mediawiki.org/wiki/API:Main_page</code>.",
"Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
"challengeType": 3,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c442eddfaeb5bd17",
"name": "Zipline: Build a JavaScript Calculator",
"dashedName": "zipline-build-a-javascript-calculator",
"difficulty": 1.05,
"challengeSeed": ["126411565"],
"description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/GeoffStorbeck/full/zxgaqw' target='_blank'>http://codepen.io/GeoffStorbeck/full/zxgaqw</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can add, subtract, multiply and divide two numbers.",
"<span class='text-info'>Bonus User Story:</span> I can clear the input field with a clear button.",
"<span class='text-info'>Bonus User Story:</span> I can keep chaining mathematical operations together until I hit the clear button, and the calculator will tell me the correct output.",
"Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
"challengeType": 3,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c442eddfaeb5bd1c",
"name": "Zipline: Build a Tic Tac Toe Game",
"dashedName": "zipline-build-a-tic-tac-toe-game",
"difficulty": 1.06,
"challengeSeed": ["126415123"],
"description": [
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/alex-dixon/full/JogOpQ/' target='_blank'>http://codepen.io/alex-dixon/full/JogOpQ/</a>.",
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
"<span class='text-info'>User Story:</span> As a user, I can play a game of Tic Tac Toe with the computer.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can never actually win against the computer - at best I can tie.",
"<span class='text-info'>Bonus User Story:</span> As a user, my game will reset as soon as it's over so I can play again.",
"<span class='text-info'>Bonus User Story:</span> As a user, I can choose whether I want to play as X or O.",
"Remember to use <a href='/field-guide/how-do-i-get-help-when-I-get-stuck' target='_blank'>RSAP</a> if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
],
"challengeType": 3,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
}
]
}

View File

@ -1,129 +1,599 @@
{
"name": "jQuery",
"name": "jQuery, Ajax, and JSON",
"dashedName": "jquery-ajax-and-json",
"order": 0.004,
"challenges": [
{
"id": "bd7112d8c441eddfaeb5bded",
"name": "Waypoint: Get Started with jQuery",
"dashedName": "waypoint-get-started-with-jquery",
"difficulty": 0.13,
"challengeSeed": ["125671865"],
"id": "bad87fee1348bd9acdd08826",
"name": "Waypoint: Learn how Script Tags and Document Ready Work",
"dashedName": "waypoint-learn-how-script-tags-and-document-ready-work",
"difficulty": 0.072,
"description": [
"jQuery is a powerful library built in Javascript for manipulating HTML elements.",
"It's a lot easier to use than Javascript itself, so we'll learn it first.",
"It's also extremely popular with employers, so we're going to learn it well.",
"Codecademy has an excellent free course that will walk us through the basics of jQuery.",
"Go to <a href='http://www.codecademy.com/courses/web-beginner-en-bay3D/0/1' target='_blank'>http://www.codecademy.com/courses/web-beginner-en-bay3D/0/1</a> and complete the first section."
"We've simplified our Cat Photo App and removed our <code>style</code> element. Add a <code>script</code> element to your page and create a <code>$(document).ready</code> function within it.",
"Add <code>$(document).ready(function() {</code> to your <code>script</code> element, and then close it on the following line with <code>});</code>."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
"tests": [
"assert(editor.match(/<script>/g), 'Create a <code>script</code> element.')",
"assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Make sure your <code>script</code> element has a closing tag.')",
"assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Add <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'Close your <code>$(document).ready(function() {</code> function with <code>\\}\\);</code>.')"
],
"challengeSeed": [
"",
"",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9bedc08826",
"name": "Waypoint: Target Elements by Selectors Using jQuery",
"dashedName": "waypoint-target-elements-by-selectors-using-jquery",
"difficulty": 0.073,
"description": [
"Make all <code>button</code> elements bounce <code>$('button').addClass('animated bounce')</code>."
],
"tests": [
"assert($('button').hasClass('animated') && $('button').hasClass('bounce'), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"bounce\" to your <code>img</code> element.')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedc08826",
"name": "Waypoint: Target Elements by Class Using jQuery",
"dashedName": "waypoint-target-elements-by-class-using-jquery",
"difficulty": 0.074,
"description": [
"Make all the <code>div</code> elements with class \"well\" shake. <code>$('.well').addClass('animated shake')</code>"
],
"tests": [
"assert($('.well').hasClass('animated') && $('.well').hasClass('shake'), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"shake\" to all your elements with the class \"well\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bd7113d8c441eddfaeb5bdef",
"name": "Waypoint: Write Functions with jQuery",
"dashedName": "waypoint-write-functions-with-jquery",
"difficulty": 0.14,
"challengeSeed": ["125658029"],
"id": "bad87fee1348bd9aeda08826",
"name": "Waypoint: Target Elements by ID Using jQuery",
"dashedName": "waypoint-target-elements-by-id-using-jquery",
"difficulty": 0.075,
"description": [
"Now we're ready to write your first jQuery functions.",
"Functions are little sub-programs. You can call a function and ask it to do something. Then it will return an answer.",
"First, you'll learn about one of the most important jQuery functions of all: <code>$(document).ready()</code>.",
"Go to <a href='http://www.codecademy.com/courses/web-beginner-en-GfjC6/0/1' target='_blank'>http://www.codecademy.com/courses/web-beginner-en-GfjC6/0/1</a> and complete the second section."
"Make all the <code>button</code> element with the id \"target3\" pulse. <code>$('#target3').addClass('animated pulse')</code>."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
"tests": [
"$('#target3').hasClass('animated') && $('#target3').hasClass('pulse'), 'Select the <code>button</code>element with the <code>id</code> of \"target3\" and use the jQuery <code>addClass()</code> function to give it the classes of \"animated\" and \"pulse\".')",
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed908826",
"name": "Waypoint: Change the CSS of an Element Using jQuery",
"dashedName": "waypoint-change-the-css-of-an-element-using-jquery",
"difficulty": 0.076,
"description": [
],
"tests": [
"assert(!editor.match(/nce\\'\\)\\;/g) && !editor.match(/ke\\'\\)\\;/g), 'Delete your <code>img</code> element selector statement and your \".btn\" selector statement.')",
"assert(editor.match(/css.*,.*background-color.*gray.\\);/g), 'Select the element with the <code>id</code> of \"cat-photo-form\" give it the background color of gray.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed808826",
"name": "Waypoint: Disable an Element Using jQuery",
"dashedName": "waypoint-disable-an-element-using-jquery",
"difficulty": 0.077,
"description": [
],
"tests": [
"assert($('form button').attr('id') === 'submit-button', 'Add the ID of \"submit-button\" to your the <code>button</code> on your <code>form</code> element.')",
"assert($('#submit-button') && $('#submit-button').prop('disabled'), 'Disable your element with the id of \"submit-button\".')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed708826",
"name": "Waypoint: Remove an Element Using jQuery",
"dashedName": "waypoint-remove-an-element-using-jquery",
"difficulty": 0.078,
"description": [
],
"tests": [
"assert($('img').length === 0, 'Use jQuery to remove your <code>img</code> element from your page.')",
"assert(editor.match(/<img/g), 'You should still have an <code>img</code> element in your HTML but jQuery should remove it.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed608826",
"name": "Waypoint: Use appendTo to Move Elements with jQuery",
"dashedName": "waypoint-use-appendto-to-move-elements-with-jquery",
"difficulty": 0.079,
"description": [
"$('.btn').appendTo('#right-well')"
],
"tests": [
"assert($('#left-well').children().length === 0, 'Your left well should not have any buttons inside it.')",
"assert($('#right-well').children().length === 6, 'Your right well should have all 6 buttons inside it.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed508826",
"name": "Waypoint: Clone an Element Using jQuery",
"dashedName": "waypoint-clone-an-element-using-jquery",
"difficulty": 0.080,
"description": [
"Clone the #target1 element and append it to the #left-well element. $('#target1').clone().appendTo('#left-well')"
],
"tests": [
"assert($('#left-well').children().length > 3, 'You should have at least 4 button elements in your #left-well element')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed308826",
"name": "Waypoint: Target the Parent of an Element Using jQuery",
"dashedName": "waypoint-target-the-parent-of-an-element-using-jquery",
"difficulty": 0.082,
"description": [
"Change the parent of the #target1 element to have the background color of red.",
"$('#target1').parent().css('background-color', 'red')"
],
"tests": [
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed208826",
"name": "Waypoint: Target the Children of an Element Using jQuery",
"dashedName": "waypoint-target-the-children-of-an-element-using-jquery",
"difficulty": 0.083,
"description": [
"Change the color of all the #left-well element's children to blue.",
"$('#right-well').children().css('background-color', 'blue')"
],
"tests": [
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<div class='row'>",
" <div class='col-xs-6'>",
" <h4>#left-well</h4>",
" <div class='well' id='left-well'>",
" <button class='btn btn-default target' id='target1'>#target1</button>",
" <button class='btn btn-default target' id='target2'>#target2</button>",
" <button class='btn btn-default target' id='target3'>#target3</button>",
" </div>",
" </div>",
" <div class='col-xs-6'>",
" <h4>#right-well</h4>",
" <div class='well' id='right-well'>",
" <button class='btn btn-default target' id='target4'>#target4</button>",
" <button class='btn btn-default target' id='target5'>#target5</button>",
" <button class='btn btn-default target' id='target6'>#target6</button>",
" </div>",
" </div>",
"</div>"
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed108826",
"name": "Waypoint: Target a Specific Child of an Element Using jQuery",
"dashedName": "waypoint-target-a-specific-child-of-an-element-using-jquery",
"difficulty": 0.084,
"description": [
],
"tests": [
],
"challengeSeed": [
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aed008826",
"name": "Waypoint: Target Even Numbered Elements Using jQuery",
"dashedName": "waypoint-target-even-numbered-elements-using-jquery",
"difficulty": 0.085,
"description": [
],
"tests": [
],
"challengeSeed": [
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aecc08826",
"name": "Waypoint: Read Data from an Element Using jQuery",
"dashedName": "Waypoint-read-data-from-an-element-using-jquery",
"difficulty": 0.086,
"description": [
],
"tests": [
],
"challengeSeed": [
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9aebc08826",
"name": "Waypoint: Get Data from an URL Using jQuery",
"dashedName": "waypoint-get-data-from-a-url-using-jquery",
"difficulty": 0.087,
"description": [
],
"tests": [
],
"challengeSeed": [
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9ae9c08826",
"name": "Waypoint: Loop through JSON Data Using jQuery",
"dashedName": "waypoint-loop-through-json-data-using-jquery",
"difficulty": 0.088,
"description": [
],
"tests": [
],
"challengeSeed": [
],
"challengeType": 0
},
{
"id": "bad87fee1348bd9ae8c08826",
"name": "Waypoint: Setup Click Events Using jQuery",
"dashedName": "waypoint-setup-click-events-using-jquery",
"difficulty": 0.089,
"description": [
],
"tests": [
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"<!-- You shouldn't need to modify code below this line -->",
"<button id='count-presses-button' class='btn btn-primary btn-block btn-lg>Press me</button>",
"<span id='times-pressed'>"
],
"challengeType": 0
},
{
"id": "bd7114d8c441eddfaeb5bdef",
"name": "Waypoint: Harness Dynamic HTML",
"dashedName": "waypoint-harness-dynamic-html",
"difficulty": 0.15,
"challengeSeed": ["125658028"],
"id": "bad88fee1348bd9ae8c08826",
"name": "Waypoint: Wire AJAX Call into a jQuery Click Event",
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
"difficulty": 0.090,
"description": [
"Did you know that you can create HTML elements using jQuery?",
"Let's learn some more advanced ways to use jQuery to manipulate the DOM.",
"Go to <a href='http://www.codecademy.com/courses/web-beginner-en-v6phg/0/1' target='_blank'>http://www.codecademy.com/courses/web-beginner-en-v6phg/0/1</a> and complete the third section."
"<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>"
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7115d8c441eddfaeb5bdef",
"name": "Waypoint: Listen for jQuery Events",
"dashedName": "waypoint-listen-for-jquery-events",
"difficulty": 0.16,
"challengeSeed": ["125658027"],
"description": [
"jQuery can listen for events, such as clicking a button, and respond to them.",
"Here we'll learn how to use the jQuery <code>click()</code> function to respond to events in the browser.",
"Go to <a href='http://www.codecademy.com/courses/web-beginner-en-JwhI1/0/1' target='_blank'>http://www.codecademy.com/courses/web-beginner-en-JwhI1/0/1</a> and complete the fourth section."
"tests": [
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7116d8c441eddfaeb5bdef",
"name": "Waypoint: Trigger jQuery Effects",
"dashedName": "waypoint-trigger-jquery-effects",
"difficulty": 0.17,
"challengeSeed": ["125658025"],
"description": [
"We can use jQuery to do all kinds of visual effects and transitions.",
"Let's explore some of the fun ways we can manipulate DOM elements with jQuery.",
"Go to <a href='http://www.codecademy.com/courses/web-beginner-en-jtFIC/0/1' target='_blank'>http://www.codecademy.com/courses/web-beginner-en-jtFIC/0/1</a> and complete the fifth section."
"challengeSeed": [
"fccss",
" var random = function() { return Math.floor(Math.random() * 3) }",
" $(document).ready(function() {",
"<!-- Don't change code above this line -->",
"",
" $('#cat-button').on('click', function() {",
" $.getJSON('/json/cats.json', function( json ) {",
" var kitten = json[random()];",
" $(\"<img src='\" + kitten.imageLink + \"'>\").appendTo('#output');",
" $(\"<h3>Code name: \" + kitten.codeNames[random()] + \"</h3>\").appendTo('#output');",
" });",
" });",
"",
"<!-- Don't change code below this line -->",
" });",
"fcces",
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>Cat Button</button>",
"<div class='jumbotron' id='output'>",
"</div>"
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
"challengeType": 0
}
]
}

51
challenges/mongodb.json Normal file
View File

@ -0,0 +1,51 @@
{
"name": "MongoDB",
"order" : 0.014,
"challenges": [
{
"id": "bd7243d8c341eddeaeb5bd0f",
"name": "Waypoint: Store Data in MongoDB",
"dashedName": "waypoint-store-data-in-mongodb",
"difficulty": 0.01,
"challengeSeed": ["133316035"],
"description": [
"We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
"Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.",
"Give your workspace a name.",
"Choose Node.js in the selection area below the name field.",
"Click the Create button. Then click into your new workspace.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",
"Install <code>learnyoumongo</code> with this command: <code>npm install learnyoumongo -g</code>",
"Now start the tutorial by running <code>learnyoumongo</code>.",
"Whenever you run a command that includes <code>mongod</code> on c9.io, be sure to also use the <code>--nojournal</code> flag, like this: <code>mongod --nojournal</code>.",
"Note that you can resize the c9.io's windows by dragging their borders.",
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
"You can view this Node School module's source code on GitHub at <a href='https://github.com/evanlucas/learnyoumongo'>https://github.com/evanlucas/learnyoumongo</a>.",
"Complete \"Mongod\"",
"Complete \"Connect\"",
"Complete \"Find\"",
"Complete \"Find Limit\"",
"Complete \"Insert\"",
"Complete \"Update\"",
"Complete \"Remove\"",
"Complete \"Count\"",
"Complete \"Aggregate\"",
"Once you've completed these steps, move on to our next challenge."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
}
]
}

View File

@ -1,126 +1,7 @@
{
"name": "Full Stack JavaScript",
"order": 0.013,
"name": "Node.js and Express.js",
"order" : 0.013,
"challenges": [
{
"id": "bd7154d8c441eddfaeb5bdef",
"name": "Waypoint: Get Started with Angular.js",
"dashedName": "waypoint-get-started-with-angularjs",
"difficulty": 0.34,
"challengeSeed": ["114684726"],
"description": [
"Code School has a short, free Angular.js course. This will give us a quick tour of Angular.js's mechanics and features.",
"In this course, we'll build a virtual shop entirely in Angular.js.",
"Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/1/video/1</a> and complete the section."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7155d8c441eddfaeb5bdef",
"name": "Waypoint: Apply Angular.js Directives",
"dashedName": "waypoint-apply-angularjs-directives",
"difficulty": 0.35,
"challengeSeed": ["114684727"],
"description": [
"Directives serve as markers in your HTML. When Angular.js compiles your HTML, it will can alter the behavior of DOM elements based on the directives you've used.",
"Let's learn how these powerful directives work, and how to use them to make your web apps more dynamic",
"Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/2/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/2/section/1/video/1</a> and complete the section."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7156d8c441eddfaeb5bdef",
"name": "Waypoint: Power Forms with Angular.js",
"dashedName": "waypoint-power-forms-with-angularjs",
"difficulty": 0.36,
"challengeSeed": ["114684729"],
"description": [
"One area where Angular.js really shines is its powerful web forms.",
"Learn how to create reactive Angular.js forms, including real-time form validation.",
"Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/3/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/3/section/1/video/1</a> and complete the section."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7157d8c441eddfaeb5bdef",
"name": "Waypoint: Customize Angular.js Directives",
"dashedName": "waypoint-customize-angularjs-directives",
"difficulty": 0.37,
"challengeSeed": ["114685062"],
"description": [
"Now we'll learn how to modify existing Angular.js directives, and even build directives of your own.",
"Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/4/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/4/section/1/video/1</a> and complete the section."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c441eddfaeb5bdef",
"name": "Waypoint: Create Angular.js Services",
"dashedName": "waypoint-create-angularjs-services",
"difficulty": 0.38,
"challengeSeed": ["114685060"],
"description": [
"Services are functions that you can use and reuse throughout your Angular.js app to get things done.",
"We'll learn how to use services in this final Code School Angular.js challenge.",
"Go to <a href='http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/5/section/1/video/1' target='_blank'>http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/5/section/1/video/1</a> and complete the section."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7153d8c441eddfaeb5bd0f",
"name": "Waypoint: Manage Packages with NPM",
@ -134,16 +15,15 @@
"Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.",
"Give your workspace a name.",
"Choose Node.js in the selection area below the name field.",
"Click the Create button.",
"Wait for the workspace to finish processing and select it on the left sidebar, below the Create New Workspace button.",
"Click the \"Start Editing\" button.",
"Click the Create button. Then click into your new workspace.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",
"Install <code>how-to-npm</code> with this command: <code>npm install how-to-npm -g</code>",
"Install <code>how-to-npm</code> with this command: <code>npm install -g how-to-npm</code>",
"Now start the tutorial by running <code>how-to-npm</code>.",
"Note that you can resize the c9.io's windows by dragging their borders.",
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
"Note that you can only add dist tags to the specific version numbers published in steps 8 and 10. If you receive a 403 or 404 error, run <code>how-to-npm</code> and try again.",
"Also, if you experience a bug, and you think you understand the concept, you can skip a step by running <code>how-to-npm verify skip</code> in the terminal.",
"You can view this Node School module's source code on GitHub at <a href='https://github.com/npm/how-to-npm'>https://github.com/npm/how-to-npm</a>.",
"Complete \"Install NPM\"",
"Complete \"Dev Environment\"",
"Complete \"Login\"",
@ -160,7 +40,8 @@
"Complete \"Outdated\"",
"Complete \"Update\"",
"Complete \"RM\"",
"Complete \"Finale\""
"Complete \"Finale\"",
"Once you've completed these steps, move on to our next challenge."
],
"challengeType": 2,
"tests": [],
@ -188,14 +69,13 @@
"Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.",
"Give your workspace a name.",
"Choose Node.js in the selection area below the name field.",
"Click the Create button.",
"Wait for the workspace to finish processing and select it on the left sidebar, below the Create New Workspace button.",
"Click the \"Start Editing\" button.",
"Click the Create button. Then click into your new workspace.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",
"Run this command: <code>sudo npm install learnyounode -g</code>",
"Run this command: <code>sudo npm install -g learnyounode</code>",
"Now start this tutorial by running <code>learnyounode</code>",
"Note that you can resize the c9.io's windows by dragging their borders.",
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
"You can view this Node School module's source code on GitHub at <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
"Complete \"Hello World\"",
"Complete \"Baby Steps\"",
"Complete \"My First I/O\"",
@ -203,7 +83,7 @@
"Complete \"Filtered LS\"",
"Complete \"Make it Modular\"",
"Complete \"HTTP Client\"",
"Once you've completed these first 7 challenges, move on to our next waypoint."
"Once you've completed these first 7 steps, move on to our next challenge."
],
"challengeType": 2,
"tests": [],
@ -228,10 +108,11 @@
"Let's continue the LearnYouNode Node School challenge. For this Waypoint, we'll do challenges 8 through 10.",
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
"Return to the c9.io workspace you created Now start this tutorial by running <code>learnyounode</code>",
"You can view this Node School module's source code on GitHub at <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
"Complete \"HTTP Collect\"",
"Complete \"Juggling Async\"",
"Complete \"Time Server\"",
"Once you've completed these 3 challenges, move on to our next waypoint."
"Once you've completed these 3 steps, move on to our next challenge."
],
"challengeType": 2,
"tests": [],
@ -256,10 +137,11 @@
"Let's continue the LearnYouNode Node School challenge. For this Waypoint, we'll do challenges 11 through 13.",
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
"Return to the c9.io workspace you created for the previous LearnYouNode challenges and start the tutorial by running <code>learnyounode</code>",
"You can view this Node School module's source code on GitHub at <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
"Complete \"HTTP File Server\"",
"Complete \"HTTP Uppercaserer\"",
"Complete \"HTTP JSON API Server\"",
"Once you've completed these final 3 challenges, move on to our next waypoint."
"Once you've completed these final 3 steps, move on to our next challenge."
],
"challengeType": 2,
"tests": [],
@ -279,7 +161,9 @@
"name": "Waypoint: Build Web Apps with Express.js",
"dashedName": "waypoint-build-web-apps-with-expressjs",
"difficulty": 0.43,
"challengeSeed": ["126411559"],
"challengeSeed": [
"126411559"
],
"description": [
"We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
@ -287,45 +171,20 @@
"Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.",
"Give your workspace a name.",
"Choose Node.js in the selection area below the name field.",
"Click the Create button.",
"Wait for the workspace to finish processing and select it on the left sidebar, below the Create New Workspace button.",
"Click the \"Start Editing\" button.",
"Click the Create button. Then click into your new workspace.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",
"Run this command: <code>git clone http://github.com/reddock/fcc_express && chmod 744 fcc_express/setup.sh && fcc_express/setup.sh && source ~/.profile</code>",
"Now start this tutorial by running <code>expressworks</code>",
"Note that you can resize the c9.io's windows by dragging their borders.",
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
"You can view this Node School module's source code on GitHub at <a href='https://github.com/azat-co/expressworks'>https://github.com/azat-co/expressworks</a>.",
"Complete \"Hello World\"",
"Complete \"Jade\"",
"Complete \"Good Old Form\"",
"Complete \"Stylish CSS\"",
"Complete \"Session and Cookie\"",
"Complete \"JSON Me\"",
"Once you've completed these challenges, move on to our next waypoint."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7140d8c441eddfaeb5bdef",
"name": "Waypoint: Manage Source Code with Git",
"dashedName": "waypoint-manage-source-code-with-git",
"difficulty": 0.44,
"challengeSeed": ["114635309"],
"description": [
"Version Control Systems like Git ensure that, no matter how you experiment with your code, you can always roll back your app to a stable previous state.",
"Git is also a great way to share and contribute to open source software.",
"Go to <a href='https://www.codeschool.com/courses/try-git' target='_blank'>https://www.codeschool.com/courses/try-git</a> and complete this short interactive course."
"Once you've completed these steps, move on to our next challenge."
],
"challengeType": 2,
"tests": [],

View File

@ -1,245 +0,0 @@
{
"name": "Object Oriented JavaScript",
"order" : 0.008,
"challenges": [
{
"id": "bd7129d8c441eddfaeb5bddf",
"name": "Waypoint: Scope Your Variables",
"dashedName": "waypoint-scope-your-variables",
"difficulty": 0.01,
"challengeSeed": ["128836683"],
"description": [
"Objects will allow you to build applications more efficiently by using small, reusable blocks of code.",
"This course on Udacity will help you learn Object-Oriented Programming in JavaScript.",
"First, we'll learn how JavaScript works in terms of scopes. You'll learn the difference between a \"Lexical Scope\" and an \"Execution Context\".",
"This theoretical foundation is useful for understanding when a variable can be accessed and when it can't.",
"You can save your progress by creating a free Udacity account, but note that it's also possible to complete this entire course without an account by following the links we provide.",
"Go to <a href='https://www.udacity.com/course/viewer#!/c-ud015/l-2593668697/m-2541189051' target='_blank'>https://www.udacity.com/course/viewer#!/c-ud015/l-2593668697/m-2541189051</a> and start the course.",
"Once you've completed this first section of scopes, mark this Waypoint complete and move on to the next one."
],
"challengeType": 2,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7131d8c441eddfaeb5bdbf",
"name": "Waypoint: Reference your Current Object with This",
"dashedName": "waypoint-reference-your-current-object-with-this",
"difficulty": 0.03,
"challengeSeed": ["128836508"],
"description": [
"In this section, you'll learn how you can use the keyword <code>this</code> to dynamically point to your current object.",
"For example, if we were inside the function <code>camper.completeCourse()</code>, <code>this</code> would refer to the specific camper upon which we were running the function.",
"Note that this section poses several trick questions that were designed to make you think. Don't get hung up on them, just keep moving forward.",
"You can save your progress by creating a free Udacity account, but note that it's also possible to complete this entire course without an account by following the links we provide.",
"Go to <a href='https://www.udacity.com/course/viewer#!/c-ud015/l-2593668699/m-2780408563' target='_blank'>https://www.udacity.com/course/viewer#!/c-ud015/l-2593668699/m-2780408563</a> and start the course.",
"Once you've completed this section of using the keyword <code>this</code>, mark this Waypoint complete and move on to the next one."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7132d8c441eddfaeb5bdaf",
"name": "Waypoint: Traverse the Prototype Chain",
"dashedName": "waypoint-traverse-the-prototype-chain",
"difficulty": 0.04,
"challengeSeed": ["128836684"],
"description": [
"Next we'll learn about the multiple ways you can create a copy of an object.",
"We'll also learn how an object's missing attributes can traverse the \"prototype chain\".",
"You can save your progress by creating a free Udacity account, but note that it's also possible to complete this entire course without an account by following the links we provide.",
"Go to <a href='https://www.udacity.com/course/viewer#!/c-ud015/l-2593668700/m-2616738615' target='_blank'>https://www.udacity.com/course/viewer#!/c-ud015/l-2593668700/m-2616738615</a> and start the course.",
"Once you've completed this section on prototype chain traversal, mark this Waypoint complete and move on to the next one."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7133d8c441eddfaeb5bd0f",
"name": "Waypoint: Reuse Code with Decorators",
"dashedName": "waypoint-reuse-code-with-decorators",
"difficulty": 0.05,
"challengeSeed": ["128836681"],
"description": [
"In this section, we'll learn about the \"Decorator Pattern\".",
"The Decorator Pattern will help you \"decorate\" an existing object with additional attributes. This pattern helps you reuse code, reducing the total amount of code you'll need to write and maintain.",
"It's a convenient way to add functionality to objects without changing their underlying structure.",
"You can save your progress by creating a free Udacity account, but note that it's also possible to complete this entire course without an account by following the links we provide.",
"Go to <a href='https://www.udacity.com/course/viewer#!/c-ud015/l-2794468536/m-2697628561' target='_blank'>https://www.udacity.com/course/viewer#!/c-ud015/l-2794468536/m-2697628561</a> and start the course.",
"Once you've completed this section of decorators, mark this Waypoint complete and move on to the next one."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7134d8c441eddfaeb5bd1f",
"name": "Waypoint: Build Objects with Functional Classes",
"dashedName": "waypoint-build-objects-with-functional-classes",
"difficulty": 0.06,
"challengeSeed": ["128836503"],
"description": [
"Now we'll go over the simplest way to implement a JavaScript class.",
"A class is a set of functions that you can use to easily produce similar objects.",
"You may have heard JavaScript doesn't have classes. While this is technically true, don't let this fact prevent you from learning the important concepts in this section.",
"You can save your progress by creating a free Udacity account, but note that it's also possible to complete this entire course without an account by following the links we provide.",
"Go to <a href='https://www.udacity.com/course/viewer#!/c-ud015/l-2794468537/m-2961989110' target='_blank'>https://www.udacity.com/course/viewer#!/c-ud015/l-2794468537/m-2961989110</a> and start the course.",
"Once you've completed this section of functional classes, mark this Waypoint complete and move on to the next one."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7135d8c441eddfaeb5bd2f",
"name": "Waypoint: Build Objects with Prototypal Classes",
"dashedName": "waypoint-build-objects-with-prototypal-classes",
"difficulty": 0.07,
"challengeSeed": ["128836505"],
"description": [
"Now we'll learn how one object can be prototyped off of another object.",
"Objects will delegate their \"failed lookups\" on up through the \"prototype chain\".",
"This means that when you create a second object based off another object, then try to access an attribute that the second object doesn't have, JavaScript will \"fall through\" to the original object to see whether it has that attribute.",
"You can save your progress by creating a free Udacity account, but note that it's also possible to complete this entire course without an account by following the links we provide.",
"Go to <a href='https://www.udacity.com/course/viewer#!/c-ud015/l-2794468538/m-3034538557' target='_blank'>https://www.udacity.com/course/viewer#!/c-ud015/l-2794468538/m-3034538557</a> and start the course.",
"Once you've completed this section of prototypal classes, mark this Waypoint complete and move on to the next one."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7136d8c441eddfaeb5bd3f",
"name": "Waypoint: Understand Pseudoclassical Patterns",
"dashedName": "waypoint-understand-pseudoclassical-patterns",
"difficulty": 0.08,
"challengeSeed": ["128836689"],
"description": [
"JavaScript doesn't have the traditional \"classes\" that lower-level languages like C++ and Java have.",
"Instead, JavaScript does some tricks to allow you to write code as though it had these traditional classes. We call these \"pseudo-classes\".",
"In this section, we'll learn how to build these pseudo-classes. We'll also learn some tricks for figuring out where these objects originally came from.",
"You can save your progress by creating a free Udacity account, but note that it's also possible to complete this entire course without an account by following the links we provide.",
"Go to <a href='https://www.udacity.com/course/viewer#!/c-ud015/l-2794468539/e-2783098540/m-2695768694' target='_blank'>https://www.udacity.com/course/viewer#!/c-ud015/l-2794468539/e-2783098540/m-2695768694</a> and start the course.",
"Once you've completed this section pseudoclasses, mark this Waypoint complete and move on to the next one."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7136d8c441eddfaeb5bd4f",
"name": "Waypoint: Subclass one Object to Another",
"dashedName": "waypoint-subclass-one-object-to-another",
"difficulty": 0.09,
"challengeSeed": ["128836686"],
"description": [
"Now we know the three ways that we can create objects. Through: <ol><li>functions</li><li>prototyping</li><li>pseudo classing</li></ol>",
"Let's learn how to \"subclass\" one object to another. This will give our new object the attributes of the original object. It will allow us to make further modifications to the new object without affecting the original object.",
"You can save your progress by creating a free Udacity account, but note that it's also possible to complete this entire course without an account by following the links we provide.",
"Go to <a href='https://www.udacity.com/course/viewer#!/c-ud015/l-2794468540/m-2785128536' target='_blank'>https://www.udacity.com/course/viewer#!/c-ud015/l-2794468540/m-2785128536</a> and start the course.",
"Once you've completed this section on subclassing, mark this Waypoint complete and move on to the next one."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7136d8c441eddfaeb5bd5f",
"name": "Waypoint: Use Pseudoclassical Subclasses",
"dashedName": "waypoint-use-pseudoclassical-subclasses",
"difficulty": 0.10,
"challengeSeed": ["128836937"],
"description": [
"This final section will teach us how to create subclasses from pseudo classes.",
"You can save your progress by creating a free Udacity account, but note that it's also possible to complete this entire course without an account by following the links we provide.",
"Go to <a href='https://www.udacity.com/course/viewer#!/c-ud015/l-2794468541/e-2693158566/m-2688408703' target='_blank'>https://www.udacity.com/course/viewer#!/c-ud015/l-2794468541/e-2693158566/m-2688408703</a> and start the course.",
"Once you've completed this final section on pseudoclassical subclassing, mark this Waypoint complete and move on."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
}
]
}

View File

@ -0,0 +1,91 @@
{
"name": "Object Oriented Programming",
"order" : 0.008,
"challenges": [
{
"id": "bd7153d8c44eeddfaeb5bd0f",
"name": "Waypoint: Learn Scope Chains and Closures",
"dashedName": "waypoint-learn-scope-chains-and-closures",
"difficulty": 0.01,
"challengeSeed": ["133316031"],
"description": [
"We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
"Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.",
"Give your workspace a name.",
"Choose Node.js in the selection area below the name field.",
"Click the Create button. Then click into your new workspace.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",
"Install <code>scope-chains-closures</code> with this command: <code>npm install -g scope-chains-closures</code>",
"Now start the tutorial by running <code>scope-chains-closures</code>.",
"Note that you can resize the c9.io's windows by dragging their borders.",
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
"You can view this Node School module's source code on GitHub at <a href='https://github.com/jesstelford/scope-chains-closures'>https://github.com/jesstelford/scope-chains-closures</a>.",
"Complete \"Scopes\"",
"Complete \"Scope Chains\"",
"Complete \"Global Scope and Shadowing\"",
"Complete \"Closures\"",
"Complete \"Garbage Collection\"",
"Once you've completed these steps, move on to our next challenge."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7153d8b44eeddfaeb5bd0f",
"name": "Waypoint: Use Prototypes for Inheriting Properties",
"dashedName": "waypoint-use-prototypes-for-inheriting-properties",
"difficulty": 0.02,
"challengeSeed": ["133316036"],
"description": [
"We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
"Click on Create New Workspace at the top right of the c9.io page, then click on the \"Create a new workspace\" popup that appears below it the button after you click on it.",
"Give your workspace a name.",
"Choose Node.js in the selection area below the name field.",
"Click the Create button. Then click into your new workspace.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",
"Install <code>planetproto</code> with this command: <code>npm install -g planetproto</code>",
"Now start the tutorial by running <code>planetproto</code>.",
"Note that you can resize the c9.io's windows by dragging their borders.",
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
"You can view this Node School module's source code on GitHub at <a href='https://github.com/sporto/planetproto'>https://github.com/sporto/planetproto</a>.",
"Complete \"Simple Objects\"",
"Complete \"Proto\"",
"Complete \"Dynamic Lookups\"",
"Complete \"Property Assignments\"",
"Complete \"Arrays and Objects\"",
"Complete \"Object Create\"",
"Complete \"Dot New\"",
"Complete \"Constructor Functions\"",
"Complete \"Implicit This\"",
"Note that you can skip the last challenge.",
"Once you've completed these steps, move on to our next challenge."
],
"challengeType": 2,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
}
]
}

309
field-guides/FYI.json Normal file
View File

@ -0,0 +1,309 @@
[
{
"id": "bd7158d9c436eddfaeb5bd3f",
"name": "Can I jump around in this guide?",
"dashedName": "can-i-jump-around-in-this-guide",
"category": "FYI",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>This guide was designed as a reference for you. You shouldn't try to read it all today.</h3>",
" <p class='large-p'>Feel free to come back any time and jump around, reading any articles that seem interesting to you at the time.</p>",
" <p class='large-p'>If you're currently doing our \"Browse our Field Guide\" Waypoint, go ahead and mark that challenge complete and move on to your next Waypoint.</p>",
"</div>"
]
},
{
"id": "bd7159d9c436eddfaeb5bdef",
"name": "Can I Calculate the True Cost of a Bootcamp with a Coding Bootcamp Cost Calculator?",
"dashedName": "can-i-calculate-the-true-cost-of-a-bootcamp-with-a-coding-bootcamp-cost-calculator",
"category": "FYI",
"description": [
"<script src=\"/js/calculator.js\"></script>",
"<div class=\"row\">",
" <div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3 id=\"chosen\" class=\"text-center text-primary\">Coming from _______, and making $_______, your true costs will be:</h3>",
" <div id=\"city-buttons\">",
" <div class=\"spacer\"></div>",
" <h2 class=\"text-center\">Where do you live?</h2>",
" <div class=\"spacer\"></div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"atlanta\" class=\"btn btn-primary btn-block btn-lg\">Atlanta</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"austin\" class=\"btn btn-primary btn-block btn-lg\">Austin</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"brisbane\" class=\"btn btn-primary btn-block btn-lg\">Brisbane</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"boulder\" class=\"btn btn-primary btn-block btn-lg\">Boulder</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"chicago\" class=\"btn btn-primary btn-block btn-lg\">Chicago</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"denver\" class=\"btn btn-primary btn-block btn-lg\">Denver</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"hong-kong\" class=\"btn btn-primary btn-block btn-lg\">Hong Kong</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"london\" class=\"btn btn-primary btn-block btn-lg\">London</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"los-angeles\" class=\"btn btn-primary btn-block btn-lg\">Los Angeles</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"manchester\" class=\"btn btn-primary btn-block btn-lg\">Manchester</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"melbourne\" class=\"btn btn-primary btn-block btn-lg\">Melbourne</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"new-york-city\" class=\"btn btn-primary btn-block btn-lg\">New York City</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"portland\" class=\"btn btn-primary btn-block btn-lg\">Portland</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"raleigh-durham\" class=\"btn btn-primary btn-block btn-lg\">Raleigh-Durham</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"san-francisco\" class=\"btn btn-primary btn-block btn-lg\">San Fransisco</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"seattle\" class=\"btn btn-primary btn-block btn-lg\">Seattle</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"singapore\" class=\"btn btn-primary btn-block btn-lg\">Singapore</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"toronto\" class=\"btn btn-primary btn-block btn-lg\">Toronto</button>",
" </div>",
" <div class=\"col-xs-12 btn-nav\">",
" <button id=\"other\" class=\"btn btn-primary btn-block btn-lg\">Other</button>",
" <div class=\"spacer\"></div>",
" </div>",
" </div>",
" <div id=\"income\" class=\"initially-hidden\">",
" <div class=\"spacer\"></div>",
" <h2 class=\"text-center\">How much money did you make last year (in USD)?</h2>",
" <div class=\"spacer\"></div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"0\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$0</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"20000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$20,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"30000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$30,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"40000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$40,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"50000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$50,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"60000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$60,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"70000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$70,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"80000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$80,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"90000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$90,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"100000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$100,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"120000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$120,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"140000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$140,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"160000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$160,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"180000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$180,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"200000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$200,000</button>",
" <div class=\"spacer\"></div>",
" </div>",
" </div>",
" <div id=\"chart\" class=\"initially-hidden\">",
" <div class=\"d3-centered\">",
" <svg class=\"chart\"></svg>",
" </div>",
" </div>",
" <div id=\"explanation\" class=\"initially-hidden\">",
" <div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <div class=\"text-center\">",
" <button id=\"transform\" class=\"btn btn-primary btn-lg\">Transform</button>",
" <div class=\"button-spacer\"></div><a href=\"/json/bootcamps.json\">View Data Source JSON</a><span>&nbsp; &bullet; &nbsp;</span><a href=\"/coding-bootcamp-cost-calculator\">Recalculate</a>",
" </div>",
" <h3>Notes:</h3>",
" <ol>",
" <li class=\"large-li\">For cash-up-front bootcamps, we assumed an APR of 6% and a term of 3 years.</li>",
" <li class=\"large-li\">For wage-garnishing bootcamps, we assume 18% of first year wages at their advertised starting annual salary of around $100,000.</li>",
" <li class=\"large-li\">We assume a cost of living of $500 for cities like San Francisco and New York City, and $400 per week for everywhere else.</li>",
" <li class=\"large-li\">The most substantial cost for most people is lost wages. A 40-hour-per-week job at the US Federal minimum wage would pay at least $15,000 per year. You can read more about economic cost<a href=\"https://en.wikipedia.org/wiki/Economic_cost\" target=\"_blank\"> here</a>.</li>",
" <li class=\"large-li\">Free Code Camp. We don't charge tuition or garnish wages. We're fully online so you don't have to move. We're self-paced so you don't have to quit your job. Thus, your true cost of attending Free Code Camp will be $0.</li>",
" </ol>",
" <div class=\"spacer\"></div>",
" <div class=\"row\">",
" <div class=\"col-xs-12 col-sm-4 col-md-3\"><img src=\"https://www.evernote.com/l/AHRIBndcq-5GwZVnSy1_D7lskpH4OcJcUKUB/image.png\" class=\"img-responsive testimonial-image\"/></div>",
" <div class=\"col-xs-12 col-sm-8 col-md-9\">",
" <h3>Built by Suzanne Atkinson</h3>",
" <p class=\"large-p\">Suzanne is an emergency medicine physician, triathlon coach and web developer from Pittsburgh. You should &thinsp;<a href=\"https://twitter.com/intent/user?screen_name=SteelCityCoach\" target=\"_blank\">follow her on Twitter</a>.</p>",
" </div>",
" </div>",
" <div class=\"spacer\"></div>",
" </div>",
" </div>",
" </div>",
"</div>"
]
},
{
"id": "bd7158d9c442eddfaeb5bdef",
"name": "How do I best use the Global Control Shortcuts for Mac?",
"dashedName": "how-do-i-best-use-the-global-control-shortcuts-for-mac",
"category": "FYI",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>These Global Control Shortcuts for Mac will save you hours by speeding up your typing.</h3><br>",
" <div class=\"embed-responsive embed-responsive-16by9\"><iframe src=\"//player.vimeo.com/video/107073108\" class=\"embed-responsive-item\"></iframe></div>",
" <p class='large-p'>These global shortcuts work everywhere on a Mac:</p>",
" <p class='large-p'>",
" <ul>",
" <li class='large-li'>Control + F = Forward</li>",
" <li class='large-li'>Control + B = Backward</li>",
" <li class='large-li'>Control + N = Next Line</li>",
" <li class='large-li'>Control + P = Previous Line</li>",
" <li class='large-li'>Control + H = Backspace</li>",
" <li class='large-li'>Control + D = Delete</li>",
" <li class='large-li'>Control + A = Beginning of Line</li>",
" <li class='large-li'>Control + E = End of Line</li>",
" <li class='large-li'>Control + K = Kill line</li>",
" </ul>",
" </p>",
"</div>"
]
},
{
"id": "bd7158d9c445eddfaeb5bdef",
"name": "How can I get to Inbox Zero with Gmail shortcuts?",
"dashedName": "how-can-i-get-to-inbox-zero-with-gmail-shortcuts",
"category": "FYI",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>These Gmail Shortcuts will save you hours and help you get to Inbox Zero.</h3><br/>",
" <div class=\"embed-responsive embed-responsive-16by9\">",
" <iframe src=\"//player.vimeo.com/video/115194016\" class=\"embed-responsive-item\"></iframe>",
" </div>",
" <p class='large-p'>The shortcuts:</p>",
" <p class='large-p'>",
" <ul>",
" <li class='large-li'>j - move down</li>",
" <li class='large-li'>k - move up</li>",
" <li class='large-li'>o - open</li>",
" <li class='large-li'>r - reply</li>",
" <li class='large-li'>a - reply all</li>",
" <li class='large-li'>f - forward</li>",
" <li class='large-li'>c - compose</li>",
" <li class='large-li'>x - select</li>",
" <li class='large-li'>e - archive</li>",
" <li class='large-li'>! - mark spam</li>",
" <li class='large-li'>z - undo</li>",
" </ul>",
" </p>",
"</div>"
]
},
{
"id": "bd7158d9c445eddfaeb5bdff",
"name": "How can I deploy a website without writing any code at all?",
"dashedName": "how-can-i-deploy-a-website-without-writing-any-code-at-all",
"category": "FYI",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>It's possible to build dynamic, mobile-responsive websites without writing any code at all, in just a few minutes.</h3><br/>",
" <div class=\"embed-responsive embed-responsive-16by9\">",
" <iframe src=\"//player.vimeo.com/video/115194017\" class=\"embed-responsive-item\"></iframe>",
" </div>",
" <p class='large-p'>Here are the technologies we used here:</p>",
" <p class='large-p'>",
" <ul>",
" <li class='large-li'><a href='http://www.atom.io/'>atom.io</a> - a free code editor</li>",
" <li class='large-li'><a href='http://www.startbootstrap.com/'>startbootstrap.com</a> - a collection of free responsive (Bootstrap) templates</li>",
" <li class='large-li'><a href='http://www.powr.io/'>powr.io</a> - a collection of free JavaScript plugins</li>",
" <li class='large-li'><a href='http://www.bitballoon.com/'>bitballoon.com</a> - a tool for drag and drop website deployment</li>",
" </ul>",
" </p>",
" <p class='large-p'>You will quickly reach the limits of what you can do without actually coding, but it's nice to be able to rapidly build working prototype websites like this.</p>",
"</div>"
]
},
{
"id": "bd7158d9c447eddfaeb5bdef",
"name": "How do I install Screenhero?",
"dashedName": "how-do-i-install-screenhero",
"category": "FYI",
"description": [
"<div class='col-xs-12 col-sm-10 col-sm-offset-1'>",
" <h3><a href=\"http://links.screenhero.com/e/c/eyJlbWFpbF9pZCI6Ik1qQTNNem9XQkNJQ1pBQUNjd0FYQVZrVEdnRkxNamtfX0JWZEdGVEpSZkVCWlRwbFpXRTBNamM0WVMxaE56SmlMVEV4WlRRdE9HUXpZUzFpWXpVNE1HRTJNalkxTldNNk1UUTJNVEEyQUE9PSIsInBvc2l0aW9uIjowLCJocmVmIjoiaHR0cDovL2RsLnNjcmVlbmhlcm8uY29tL3NtYXJ0ZG93bmxvYWQvZklYQU1UUUJBTEtQQkhQTC9TY3JlZW5oZXJvLnppcD9zb3VyY2U9d2ViIn0=\">Download for Mac</a></h3>",
" <h3><a href=\"http://links.screenhero.com/e/c/eyJlbWFpbF9pZCI6Ik1qQTNNem9XQkNJQ1pBQUNjd0FYQVZrVEdnRkxNamtfX0JWZEdGVEpSZkVCWlRwbFpXRTBNamM0WVMxaE56SmlMVEV4WlRRdE9HUXpZUzFpWXpVNE1HRTJNalkxTldNNk1UUTJNVEEyQUE9PSIsInBvc2l0aW9uIjoxLCJocmVmIjoiaHR0cDovL2RsLnNjcmVlbmhlcm8uY29tL3NtYXJ0ZG93bmxvYWQvZklYQU1UUUJBTEtQQkhQTC9TY3JlZW5oZXJvLXNldHVwLmV4ZSJ9\"> Download for Windows</a></h3>",
" <p class='large-p'>You'll use Screenhero to pair program starting with <a href='/challenges/pair-program-on-bonfires'>http://freecodecamp.com/challenges/pair-program-on-bonfires</a></p>",
"</div>"
]
},
{
"id": "bd7158d9c436eddfaeb5dd3b",
"name": "What other resources does Free Code Camp recommend to nonprofits?",
"dashedName": "what-other-resources-does-free-code-camp-recommend-to-nonprofits",
"category": "FYI",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h2>Here are some excellent resources for nonprofits.</h2>",
" <h3>Please note that Free Code Camp is not partnered with, nor do we receive a referral fee from, any of the following providers. We simply want to help guide you towards a solution for your organization.</h3>",
" <h3>Skills-based Volunteer Organizations:</h3>",
" <p class='large-p'><a href='http://www.volunteermatch.com'>http://www.volunteermatch.com</a></p>",
" <p class='large-p'><a href='http://www.catchafire.org'>http://www.catchafire.org</a></p>",
" <h3>Building a website:</h3>",
" <p class='large-p'><a href='http://www.wix.com/'>http://www.wix.com/</p>",
" <p class='large-p'><a href='https://wordpress.com/'>https://wordpress.com/</p>",
" <p class='large-p'><a href='http://www.freecodecamp.com/field-guide/how-can-i-deploy-a-website-without-writing-any-code-at-all'>Build it yourself for free with no code</a></p>",
" <h3>Donor and Volunteer Management Systems</h3>",
" <p class='large-p'><a href='https://www.thedatabank.com/'>https://www.thedatabank.com/</a></p>",
" <p class='large-p'><a href='http://www.donorsnap.com/'>http://www.donorsnap.com/</a></p>",
" <p class='large-p'><a href='http://www.donorperfect.com/'>http://www.donorperfect.com/</a></p>",
" <p class='large-p'><a href='https://www.blackbaud.com/fundraising-crm/etapestry-donor-management'>https://www.blackbaud.com/fundraising-crm/etapestry-donor-management</a></p>",
" <p class='large-p'><a href='http://www.z2systems.com/'>http://www.z2systems.com</a></p>",
" <p class='large-p'><a href='http://www.regpacks.com/volunteer-management/'</a>http://www.regpacks.com/volunteer-management</a></p>",
" <p class='large-p'><a href='http://sumac.com/'>http://sumac.com</a></p>",
" <p class='large-p'><a href='http://www.volgistics.com'>http://www.volgistics.com</a></p>",
" <h3>Inventory Management Systems</h3>",
" <p class='large-p'><a href='https://www.ezofficeinventory.com/industries/non-profits'>https://www.ezofficeinventory.com/industries/non-profits</a></p>",
" <p class='large-p'><a href='https://www.ordoro.com'>https://www.ordoro.com</a></p>",
" <p class='large-p'><a href='http://www.unleashedsoftware.com'>http://www.unleashedsoftware.com</a></p>",
" <h3>E-Learning platforms</h3>",
" <p class='large-p'><a href='http://www.dokeos.com/'>http://www.dokeos.com</a></p>",
" <p class='large-p'><a href='http://www.efrontlearning.net/'>http://www.efrontlearning.net/</a></p>",
" <p class='large-p'><a href='https://moodle.org/'>https://moodle.org/</a></p>",
" <p class='large-p'><a href='https://sakaiproject.org/'>https://sakaiproject.org/</a></p>",
" <h3>Community Management</h3>",
" <p class='large-p'><a href='https://civicrm.org/'>https://civicrm.org/</a></p>",
" <p class='large-p'><a href='http://tcmgr.com/'>http://tcmgr.com/</a></p>",
" <h3>Electronic Forms</h3>",
" <p class='large-p'><a href='http://www.google.com/forms'>http://www.google.com/forms</a></p>",
" <p class='large-p'><a href='http://www.typeform.com'>http://www.typeform.com</a></p>",
"</div>"
]
}
]

22
field-guides/contact.json Normal file
View File

@ -0,0 +1,22 @@
[
{
"id": "bd7158d9c436eddfaeb5bd3c",
"name": "How can I reach the Free Code Camp team to interview them for my publication?",
"dashedName": "how-can-i-reach-the-free-code-camp-team-to-interview-them-for-my-publication",
"category": "contact",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>We're happy to do a quick interview for your publication or show. Here's whom you should contact about what, and how to best reach them:</h3>",
" <p class='large-p'>",
" <ol>",
" <li class='large-li'>Want to talk to about Free Code Camp's curriculum or long-term vision? Reach out to Quincy Larson. He's <a href='https://twitter.com/ossia' target='_blank'>@ossia</a> on Twitter and @quincylarson on Gitter.</li>",
" <li class='large-li'>Want to talk about Free Code Camp's open source codebase, infrastructure, or JavaScript in general? Talk to Nathan Leniz. He's <a href='https://twitter.com/terakilobyte' target='_blank'>@terakilobyte</a> on Twitter and @terakilobyte on Gitter.</li>",
" <li class='large-li'>Want to explore our efforts to empower nonprofits with code? Michael D. Johnson eats, sleeps and breathes that. He's <a href='https://twitter.com/figitalboy' target='_blank'>@figitalboy</a> on Twitter and @codenonprofit on Gitter.</li>",
" <li class='large-li'>Want to get a camper's perspective on our community? Talk with Bianca Mihai (@biancamihai on Gitter and <a href='https://twitter.com/bubuslubu' target='_blank'>@bubuslubu</a> on Twitter) or Suzanne Atkinson (@adventurebear on Gitter and <a href='https://twitter.com/SteelCityCoach' target='_blank'>@steelcitycoach</a> on Twitter).",
" </ol>",
" </p>",
" <p class='large-p'>We strive to be helpful and transparent in everything we do. We'll do what we can to help you share our community with your audience.</p>",
"</div>"
]
}
]

View File

@ -3,6 +3,7 @@
"id": "bd7158d9c441eddfaeb5bdef",
"name": "How do I use this guide?",
"dashedName": "how-do-i-use-this-guide",
"category": "orientation",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>This guide strives to provide clear answers to common questions about Free Code Camp, learning to code, and getting a coding job.</h3>",
@ -15,6 +16,7 @@
"id": "bd7158d9c441eddfaeb5bdff",
"name": "What exactly is Free Code Camp?",
"dashedName": "what-exactly-is-free-code-camp",
"category": "orientation",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>We're a community of busy people who learn to code by building projects for nonprofits.</h3>",
@ -33,6 +35,7 @@
"id": "bd7158d9c441eddfaeb5bd1f",
"name": "Why do I need Free Code Camp?",
"dashedName": "why-do-i-need-free-code-camp",
"category": "orientation",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>Learning to code is hard.</h3>",
@ -51,6 +54,7 @@
"id": "bd7158d9c441eddfaeb5bd2f",
"name": "What are the main advantages of Free Code Camp?",
"dashedName": "what-are-the-main-advantages-of-free-code-camp",
"category": "orientation",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>Our main advantage is that we're accessible to busy adults who want to change careers. Specifically, we're:</h3>",
@ -68,6 +72,7 @@
"id": "bd7158d9c441eddfaeb5bd3f",
"name": "How does Free Code Camp work?",
"dashedName": "how-does-free-code-camp-work",
"category": "orientation",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>Our free, self-paced, browser-based program takes about 1,600 hours to complete.",
@ -90,6 +95,7 @@
"id": "bd7158d9c441eddfaeb5bd4f",
"name": "Will I really be able to get software engineering job after Free Code Camp?",
"dashedName": "will-i-really-be-able-to-get-a-software-engineering-job-after-free-code-camp",
"category": "orientation",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3 class='text-left'>If you complete this program, <span class='text-info'>you will be able to get a coding job</span>. Many of our campers have already gotten coding jobs.</h3>",
@ -110,6 +116,7 @@
"id": "bd7158d9c440eddfaeb5bdef",
"name": "What will I learn, and in what sequence?",
"dashedName": "what-will-i-learn-and-in-what-sequence",
"category": "orientation",
"description": [
"<div class=\"text-left col-xs-12 col-md-10 col-md-offset-1\">",
" <h3>First, you'll learn basic web design tools like:</h3>",
@ -147,6 +154,7 @@
"id": "bd7158d9c434eddfaeb5bdef",
"name": "How long does Free Code Camp take?",
"dashedName": "how-long-does-free-code-camp-take",
"category": "orientation",
"description": [
"<div class=\"text-left col-xs-12 col-md-10 col-md-offset-1\">",
" <h3>It takes about 1,600 hours of coding to develop the skills you'll need to get an entry level software engineering job.</h3>",
@ -185,6 +193,7 @@
"id": "bd7158d9c438eddfaeb5bdef",
"name": "Why does Free Code Camp use JavaScript instead of Ruby or Python?",
"dashedName": "why-does-free-code-camp-use-javascript-instead-of-ruby-or-python",
"category": "orientation",
"description": [
"<div class=\"text-left col-xs-12 col-md-10 col-md-offset-1\">",
" <p class='large-p'>Like JavaScript, Ruby and Python are high-level scripting languages that can be used for full stack web development.</p>",
@ -199,6 +208,7 @@
"id": "bd7158d9c437eddfaeb5bdef",
"name": "What is pair programming, and why is it special?",
"dashedName": "what-is-pair-programming-and-why-is-it-special",
"category": "orientation",
"description": [
"<div class=\"text-left col-xs-12 col-md-10 col-md-offset-1\">",
" <h3>Pair programming is where two people code together on one computer.</h3>",
@ -212,6 +222,7 @@
"id": "bd7158d9c436eddfaeb5bd2f",
"name": "How do I get help when I get stuck?",
"dashedName": "how-do-i-get-help-when-i-get-stuck",
"category": "orientation",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>When you get stuck, remember: RSAP.</h3>",
@ -235,6 +246,7 @@
"id": "bd7158d9c435eddfaeb5bdcf",
"name": "What are the Official Free Code Camp Chat Rooms?",
"dashedName": "what-are-the-official-free-code-camp-chat-rooms",
"category": "orientation",
"description": [
"<div class=\"text-left col-xs-12 col-md-10 col-md-offset-1\">",
" <h3>We have 4 official chat rooms:</h3>",
@ -260,22 +272,11 @@
"</div>"
]
},
{
"id": "bd7158d9c436eddfaeb5bd3f",
"name": "Can I jump around in this guide?",
"dashedName": "can-i-jump-around-in-this-guide",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>This guide was designed as a reference for you. You shouldn't try to read it all today.</h3>",
" <p class='large-p'>Feel free to come back any time and jump around, reading any articles that seem interesting to you at the time.</p>",
" <p class='large-p'>If you're currently doing our \"Browse our Field Guide\" Waypoint, go ahead and mark that challenge complete and move on to your next Waypoint.</p>",
"</div>"
]
},
{
"id": "bd7158d9c436eddfaeb5bdef",
"name": "If Free Code Camp is free, how does it make money?",
"dashedName": "if-free-code-camp-is-free-how-does-it-make-money",
"category": "orientation",
"description": [
"<div class=\"text-left col-xs-12 col-md-10 col-md-offset-1\">",
" <h3>We are completely free for both students and for nonprofits.</h3>",
@ -285,168 +286,11 @@
"</div>"
]
},
{
"id": "bd7159d9c436eddfaeb5bdef",
"name": "Can I Calculate the True Cost of a Bootcamp with a Coding Bootcamp Cost Calculator?",
"dashedName": "can-i-calculate-the-true-cost-of-a-bootcamp-with-a-coding-bootcamp-cost-calculator",
"description": [
"<script src=\"/js/calculator.js\"></script>",
"<div class=\"row\">",
" <div class=\"col-xs-12 col-sm-10 col-md-8 col-lg-6 col-sm-offset-1 col-md-offset-2 col-lg-offset-3\">",
" <h1 class=\"text-center\">Coding Bootcamp Cost Calculator</h1>",
" <h3 id=\"chosen\" class=\"text-center text-primary\">Coming from _______, and making $_______, your true costs will be:</h3>",
" <div id=\"city-buttons\">",
" <div class=\"spacer\"></div>",
" <h2 class=\"text-center\">Where do you live?</h2>",
" <div class=\"spacer\"></div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"atlanta\" class=\"btn btn-primary btn-block btn-lg\">Atlanta</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"austin\" class=\"btn btn-primary btn-block btn-lg\">Austin</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"brisbane\" class=\"btn btn-primary btn-block btn-lg\">Brisbane</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"boulder\" class=\"btn btn-primary btn-block btn-lg\">Boulder</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"chicago\" class=\"btn btn-primary btn-block btn-lg\">Chicago</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"denver\" class=\"btn btn-primary btn-block btn-lg\">Denver</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"hong-kong\" class=\"btn btn-primary btn-block btn-lg\">Hong Kong</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"london\" class=\"btn btn-primary btn-block btn-lg\">London</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"los-angeles\" class=\"btn btn-primary btn-block btn-lg\">Los Angeles</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"manchester\" class=\"btn btn-primary btn-block btn-lg\">Manchester</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"melbourne\" class=\"btn btn-primary btn-block btn-lg\">Melbourne</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"new-york-city\" class=\"btn btn-primary btn-block btn-lg\">New York City</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"portland\" class=\"btn btn-primary btn-block btn-lg\">Portland</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"raleigh-durham\" class=\"btn btn-primary btn-block btn-lg\">Raleigh-Durham</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"san-francisco\" class=\"btn btn-primary btn-block btn-lg\">San Fransisco</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"seattle\" class=\"btn btn-primary btn-block btn-lg\">Seattle</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"singapore\" class=\"btn btn-primary btn-block btn-lg\">Singapore</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"toronto\" class=\"btn btn-primary btn-block btn-lg\">Toronto</button>",
" </div>",
" <div class=\"col-xs-12 btn-nav\">",
" <button id=\"other\" class=\"btn btn-primary btn-block btn-lg\">Other</button>",
" <div class=\"spacer\"></div>",
" </div>",
" </div>",
" <div id=\"income\" class=\"initially-hidden\">",
" <div class=\"spacer\"></div>",
" <h2 class=\"text-center\">How much money did you make last year (in USD)?</h2>",
" <div class=\"spacer\"></div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"0\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$0</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"20000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$20,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"30000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$30,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"40000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$40,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"50000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$50,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"60000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$60,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"70000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$70,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"80000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$80,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"90000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$90,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"100000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$100,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"120000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$120,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"140000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$140,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"160000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$160,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"180000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$180,000</button>",
" </div>",
" <div class=\"col-xs-12 col-sm-12 col-md-4 btn-nav\">",
" <button id=\"200000\" href=\"#\" class=\"btn btn-primary btn-block btn-lg\">$200,000</button>",
" <div class=\"spacer\"></div>",
" </div>",
" </div>",
" <div id=\"chart\" class=\"initially-hidden\">",
" <div class=\"d3-centered\">",
" <svg class=\"chart\"></svg>",
" </div>",
" </div>",
" <div id=\"explanation\" class=\"initially-hidden\">",
" <div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <div class=\"text-center\">",
" <button id=\"transform\" class=\"btn btn-primary btn-lg\">Transform</button>",
" <div class=\"button-spacer\"></div><a href=\"/json/bootcamps.json\">View Data Source JSON</a><span>&nbsp; &bullet; &nbsp;</span><a href=\"/coding-bootcamp-cost-calculator\">Recalculate</a>",
" </div>",
" <h3>Notes:</h3>",
" <ol>",
" <li class=\"large-li\">For cash-up-front bootcamps, we assumed an APR of 6% and a term of 3 years.</li>",
" <li class=\"large-li\">For wage-garnishing bootcamps, we assume 18% of first year wages at their advertised starting annual salary of around $100,000.</li>",
" <li class=\"large-li\">We assume a cost of living of $500 for cities like San Francisco and New York City, and $400 per week for everywhere else.</li>",
" <li class=\"large-li\">The most substantial cost for most people is lost wages. A 40-hour-per-week job at the US Federal minimum wage would pay at least $15,000 per year. You can read more about economic cost<a href=\"https://en.wikipedia.org/wiki/Economic_cost\" target=\"_blank\"> here</a>.</li>",
" <li class=\"large-li\">Free Code Camp. We don't charge tuition or garnish wages. We're fully online so you don't have to move. We're self-paced so you don't have to quit your job. Thus, your true cost of attending Free Code Camp will be $0.</li>",
" </ol>",
" <div class=\"spacer\"></div>",
" <div class=\"row\">",
" <div class=\"col-xs-12 col-sm-4 col-md-3\"><img src=\"https://www.evernote.com/l/AHRIBndcq-5GwZVnSy1_D7lskpH4OcJcUKUB/image.png\" class=\"img-responsive testimonial-image\"/></div>",
" <div class=\"col-xs-12 col-sm-8 col-md-9\">",
" <h3>Built by Suzanne Atkinson</h3>",
" <p class=\"large-p\">Suzanne is an emergency medicine physician, triathlon coach and web developer from Pittsburgh. You should &thinsp;<a href=\"https://twitter.com/intent/user?screen_name=SteelCityCoach\" target=\"_blank\">follow her on Twitter</a>.</p>",
" </div>",
" </div>",
" <div class=\"spacer\"></div>",
" </div>",
" </div>",
" </div>",
"</div>"
]
},
{
"id": "bd7158d9c435eddfaeb5bdef",
"name": "Does Free Code Camp have an application process?",
"dashedName": "does-free-code-camp-have-an-application-process",
"category": "orientation",
"description": [
"<div class=\"text-left col-xs-12 col-md-10 col-md-offset-1\">",
" <h3>Unlike coding bootcamps, anyone can study at Free Code Camp.</h3>",
@ -455,31 +299,11 @@
"</div>"
]
},
{
"id": "bd7158d9c436eddfaeb5bd3b",
"name": "How can I stream my live coding sessions on Free Code Camp's Twitch.tv channel?",
"dashedName": "how-can-i-stream-my-live-coding-sessions-on-free-code-camps-twitch-tv-channel",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>If you're interested in coding JavaScript live in front of dozens of people on our popular <a href='http://twitch.tv/freecodecamp' target='_blank'>twitch.tv channel</a>, we'd love to have you.</h3>",
"<p class='large-p'>Please follow these steps to get started:</p>",
" <p class='large-p'>",
" <ol>",
" <li class='large-li'>Follow <a href='http://www.hdpvrcapture.com/wordpress/?p=5951' target='_blank'>this tutorial</a> to set up your computer for streaming.</li>",
" <li class='large-li'>Contact Jason Ruekert - he's @jsonify in Gitter. He's in charge of our Twitch.tv channel. Tell him what you'd like to stream, and when you're available to stream.</li>",
" <li class='large-li'>Jason will pair with you using Screenhero to verify your computer is configured properly to stream.</li>",
" </ol>",
" </p>",
" <p class='large-p'>Be respectful of your audience. Everything you stream should be related to coding JavaScript, and should be acceptable for children. (Yes, children do sometimes watch our Twitch stream to learn to code).</p>",
" <p class='large-p'>While you're streaming, keep the chat room open so you can respond to questions from your viewers. If someone follows Free Code Camp on Twitch, try to thank them.</p>",
" <p class='large-p'>If you do a good job, we'll invite you back to stream some more. Who knows, you might become one of our regular streamers!</p>",
"</div>"
]
},
{
"id": "bd7158d9c436eddfaeb5bd3d",
"name": "How can I find other Free Code Camp campers in my city?",
"dashedName": "how-can-i-find-other-free-code-camp-campers-in-my-city",
"category": "orientation",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>Find your city below and join their Facebook group and Gitter Chat. This is a great way to hang out with other coders, share insights, and pair program.</h3>",
@ -742,174 +566,11 @@
"</div>"
]
},
{
"id": "bd7158d9c442eddfaeb5bdef",
"name": "How do I best use the Global Control Shortcuts for Mac?",
"dashedName": "how-do-i-best-use-the-global-control-shortcuts-for-mac",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>These Global Control Shortcuts for Mac will save you hours by speeding up your typing.</h3><br>",
" <div class=\"embed-responsive embed-responsive-16by9\"><iframe src=\"//player.vimeo.com/video/107073108\" class=\"embed-responsive-item\"></iframe></div>",
" <p class='large-p'>These global shortcuts work everywhere on a Mac:</p>",
" <p class='large-p'>",
" <ul>",
" <li class='large-li'>Control + F = Forward</li>",
" <li class='large-li'>Control + B = Backward</li>",
" <li class='large-li'>Control + N = Next Line</li>",
" <li class='large-li'>Control + P = Previous Line</li>",
" <li class='large-li'>Control + H = Backspace</li>",
" <li class='large-li'>Control + D = Delete</li>",
" <li class='large-li'>Control + A = Beginning of Line</li>",
" <li class='large-li'>Control + E = End of Line</li>",
" <li class='large-li'>Control + K = Kill line</li>",
" </ul>",
" </p>",
"</div>"
]
},
{
"id": "bd7158d9c445eddfaeb5bdef",
"name": "How can I get to Inbox Zero with Gmail shortcuts?",
"dashedName": "how-can-i-get-to-inbox-zero-with-gmail-shortcuts",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>These Gmail Shortcuts will save you hours and help you get to Inbox Zero.</h3><br/>",
" <div class=\"embed-responsive embed-responsive-16by9\">",
" <iframe src=\"//player.vimeo.com/video/115194016\" class=\"embed-responsive-item\"></iframe>",
" </div>",
" <p class='large-p'>The shortcuts:</p>",
" <p class='large-p'>",
" <ul>",
" <li class='large-li'>j - move down</li>",
" <li class='large-li'>k - move up</li>",
" <li class='large-li'>o - open</li>",
" <li class='large-li'>r - reply</li>",
" <li class='large-li'>a - reply all</li>",
" <li class='large-li'>f - forward</li>",
" <li class='large-li'>c - compose</li>",
" <li class='large-li'>x - select</li>",
" <li class='large-li'>e - archive</li>",
" <li class='large-li'>! - mark spam</li>",
" <li class='large-li'>z - undo</li>",
" </ul>",
" </p>",
"</div>"
]
},
{
"id": "bd7158d9c445eddfaeb5bdff",
"name": "How can I deploy a website without writing any code at all?",
"dashedName": "how-can-i-deploy-a-website-without-writing-any-code-at-all",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>It's possible to build dynamic, mobile-responsive websites without writing any code at all, in just a few minutes.</h3><br/>",
" <div class=\"embed-responsive embed-responsive-16by9\">",
" <iframe src=\"//player.vimeo.com/video/115194017\" class=\"embed-responsive-item\"></iframe>",
" </div>",
" <p class='large-p'>Here are the technologies we used here:</p>",
" <p class='large-p'>",
" <ul>",
" <li class='large-li'><a href='http://www.atom.io/'>atom.io</a> - a free code editor</li>",
" <li class='large-li'><a href='http://www.startbootstrap.com/'>startbootstrap.com</a> - a collection of free responsive (Bootstrap) templates</li>",
" <li class='large-li'><a href='http://www.powr.io/'>powr.io</a> - a collection of free JavaScript plugins</li>",
" <li class='large-li'><a href='http://www.bitballoon.com/'>bitballoon.com</a> - a tool for drag and drop website deployment</li>",
" </ul>",
" </p>",
" <p class='large-p'>You will quickly reach the limits of what you can do without actually coding, but it's nice to be able to rapidly build working prototype websites like this.</p>",
"</div>"
]
},
{
"id": "bd7158d9c446eddfaeb5bdef",
"name": "How do Free Code Camp's Nonprofit Projects work?",
"dashedName": "how-do-free-code-camps-nonprofit-projects-work",
"description": [
"<div class='col-xs-12 col-sm-10 col-sm-offset-1'>",
" <p class='large-p'>Building nonprofit projects is the main way that our campers learn full stack JavaScript and agile software development. Once you complete the Free Code Camp Waypoints, Bonfires, Ziplines and Basejumps, you'll begin this process.</p>",
" <h3>Starting with the end in mind</h3>",
" <p class='large-p'>Our goal at Free Code Camp is to help you land a job as a junior software developer (or, if you prefer, a 'pivot job' that leads your current career in a more technical direction).</p>",
" <p class='large-p'>You'll continue to work on nonprofit projects until you've built a sufficiently impressive portfolio and references to start your job search. Your portfolio will ultimately have three to five nonprofit projects. We estimate that the 900 hours of nonprofit projects you're going to complete, in addition to the 100 hours of challenges you've already completed, will be enough to qualify you for your first coding job. This will produce a much broader portfolio than a traditional coding bootcamp, which generally only has one or two capstone projects.</p>",
" <h3>Choosing your first Nonprofit Project</h3>",
" <p class='large-p'>We've categorized all the nonprofit projects by estimated time investment per camper: 100 hours, 200 hours, and 300 hours. These are only rough estimates.</p>",
" <p class='large-p'>Example: if you and the camper you're paired up with (your pair) each stated you could work 20 hours per week. If the project is a 100 hour per camper project, you should be able to complete it in about 5 weeks.</p>",
" <p class='large-p'>Our Nonprofit Project team will match you and your pair based on:</p>",
" <p class='large-p'>",
" <ol>",
" <li class='large-li'>Your estimated time commitment (10, 20 or 40 hours per week)</li>",
" <li class='large-li'>Your time zone</li>",
" <li class='large-li'>The nonprofit projects you've chosen</li>",
" <li class='large-li'>Prior coding experience (we'd like both campers to be able to contribute equally)</li>",
" </ol>",
" </p>",
" <p class='large-p'>We won't take age or gender into account. This will provide you with valuable experience in meshing with diverse teams, which is a reality of the contemporary workplace.</p>",
" <p class='large-p'>You'll only work on one project at a time. Once you start a nonprofit project, we'll remove you from all other nonprofit project you've expressed interest in. There's a good chance those projects will no longer be available when you finish your current project, anyway. Don't worry, though - we get new nonprofit project requests every day, so there will be plenty more projects for you to consider after you finish your current one.</p>",
" <h3>Finalizing the Project</h3>",
" <p class='large-p'>Before you can start working on the project, our team of Nonprofit Project Coordinators will go through the following process:</p>",
" <p class='large-p'>",
" <ol>",
" <li class='large-li'>We'll wait until there are two campers who have chosen the same project and look like they're a good match for one another based on the factors mentioned above.</li>",
" <li class='large-li'>We'll call the stakeholder to confirm once again that he or she agrees with our &thinsp;<a href=\"freecodecamp.com/nonprofits\">terms &thinsp;</a>and has signed our &thinsp;<a href=\"http://goo.gl/forms/0YKkd9bpcR\">Nonprofit Project Stakeholder Pledge</a>.</li>",
" <li class='large-li'>We'll set an initial meeting with representatives from Free Code Camp, the two campers, and the stakeholder.</li>",
" <li class='large-li'>If the stakeholder and both campers shows up promptly, and seem enthusiastic and professional, we'll start the project.</li>",
" </ol>",
" </p>",
" <p class='large-p'>This lengthy process serves an important purpose: it reduces the likelihood that any of our campers or stakeholders will waste their precious time.</p>",
" <h3>Nonprofit Stakeholders</h3>",
" <p class='large-p'>Each nonprofit project was submitted by a nonprofit. A representative from this nonprofit has agreed to serve as a \"stakeholder\" - an authorative person who understands the organization and its needs for this particular project.</p>",
" <p class='large-p'>Stakeholders have a deep understanding of their organizations' needs. Campers will work with them to figure out the best solutions to these needs.</p>",
" <p class='large-p'>When you and your pair first speak with your nonprofit stakeholder, you'll:</p>",
" <p class='large-p'>",
" <ul>",
" <li class='large-li'>talk at length to better understand their needs.</li>",
" <li class='large-li'>create a new Trello board and use it to prioritize what needs to be built.</li>",
" <li class='large-li'>and establish deadlines based on your weekly time commitment, and how long you think each task will take.</li>",
" </ul>",
" </p>",
" <p class='large-p'>It's notoriously difficult to estimate how long building software projects will take, so feel free to ask our volunteer team for help.</p>",
" <p class='large-p'>You'll continue to meet with your stakeholder at least twice a month in your project's Gitter or Slack channel.</p>",
" <p class='large-p'>You should also ask questions in your project's Gitter or Slack channel as they come up throughout the week, and your stakeholder can answer them asynchronously.</p>",
" <p class='large-p'>Getting \"blocked\" on a task can take away your sense of forward momentum, so be sure to proactively seek answers to any ambiguities you encounter.</p>",
" <p class='large-p'>Ultimately, the project will be considered complete once both the stakeholder's needs have been met, and you and your pair are happy with the project. Then you can add it to your portfolio!</p>",
" <h3>Working with your Pair</h3>",
" <p class='large-p'>You and your pair will pair program (code together on the same computer virtually) about half of the time, and work independently the other half of the time.</p>",
" <p class='large-p'>Here are our recommended ways of collaborating:</p>",
" <p class='large-p'>",
" <ul>",
" <li class='large-li'>&#8226; Gitter has robust private messaging functionality. It's the main way our team communicates, and we recommend it over email.</li>",
" <li class='large-li'>&#8226; Trello is great for managing projects. Work with your stakeholder to create Trello cards, and update these cards regularly as you make progress on them.</li>",
" <li class='large-li'>&#8226; Screenhero or Team Viewer - These are the ideal way to pair program. Tools like TMUX are good, but difficult to use. We discourage you from using screen sharing tools where only one person has control of the keyboard and mouse - that isn't real pair programming.</li>",
" <li class='large-li'>&#8226; Write clear and readable code, commit messages, branch names, and pull request messages.</li>",
" </ul>",
" </p>",
" <h3>Hosting Apps</h3>",
" <p class='large-p'>Unless your stakeholder has an existing modern host (AWS, Digital Ocean), you'll need to transition them over to a new platform. We believe Heroku is the best choice for a vast majority of web projects. It's free, easy to use, and has both browser and command line interfaces. It's owned by Salesforce and used by a ton of companies, so it's accountable and unlikely to go away.</p>",
" <p class='large-p'>If you need help convincing your stakeholder that Heroku is the ideal platform, we'll be happy to talk with them.</p>",
" <h3>Maintaining Apps</h3>",
" <p class='large-p'>Once you complete a nonprofit project, your obligation to its stakeholder is finished. Your goal is to leave behind a well documented solution that can be easily maintained by a contract JavaScript developer (or even a less-technical \"super user\").</p>",
" <p class='large-p'>While you will no longer need to help with feature development, we encourage you to consider helping your stakeholder with occasional patches down the road. After all, this project will be an important piece of your portfolio, and you'll want it to remain in good shape for curious future employers.</p>",
" <h3>Pledging to finish the project</h3>",
" <p class='large-p'>Your nonprofit stakeholder, your pair, and our volunteer team are all counting on you to finish your nonprofit project. If you walk away from an unfinished nonprofit project, you'll become ineligible to ever be assigned another one.</p>",
" <p class='large-p'>To confirm that you understand the seriousness of this commitment, we require that all campers &thinsp;<a href=\"http://goo.gl/forms/ZMn96z2QqY\">sign this pledge &thinsp;</a>before starting on their nonprofit projects.</p>",
" <p class='large-p'>There will likely be times of confusion or frustration. This is normal in software development. The most important thing is that you do not give up and instead persevere through these setbacks. As Steve Jobs famously said, \"Real artists ship.\" And you are going to ship one successful nonprofit project after another until you feel ready to take the next step in your promising career.</p>",
"</div>"
]
},
{
"id": "bd7158d9c447eddfaeb5bdef",
"name": "How do I install Screenhero?",
"dashedName": "how-do-i-install-screenhero",
"description": [
"<div class='col-xs-12 col-sm-10 col-sm-offset-1'>",
" <h3><a href=\"http://links.screenhero.com/e/c/eyJlbWFpbF9pZCI6Ik1qQTNNem9XQkNJQ1pBQUNjd0FYQVZrVEdnRkxNamtfX0JWZEdGVEpSZkVCWlRwbFpXRTBNamM0WVMxaE56SmlMVEV4WlRRdE9HUXpZUzFpWXpVNE1HRTJNalkxTldNNk1UUTJNVEEyQUE9PSIsInBvc2l0aW9uIjowLCJocmVmIjoiaHR0cDovL2RsLnNjcmVlbmhlcm8uY29tL3NtYXJ0ZG93bmxvYWQvZklYQU1UUUJBTEtQQkhQTC9TY3JlZW5oZXJvLnppcD9zb3VyY2U9d2ViIn0=\">Download for Mac</a></h3>",
" <h3><a href=\"http://links.screenhero.com/e/c/eyJlbWFpbF9pZCI6Ik1qQTNNem9XQkNJQ1pBQUNjd0FYQVZrVEdnRkxNamtfX0JWZEdGVEpSZkVCWlRwbFpXRTBNamM0WVMxaE56SmlMVEV4WlRRdE9HUXpZUzFpWXpVNE1HRTJNalkxTldNNk1UUTJNVEEyQUE9PSIsInBvc2l0aW9uIjoxLCJocmVmIjoiaHR0cDovL2RsLnNjcmVlbmhlcm8uY29tL3NtYXJ0ZG93bmxvYWQvZklYQU1UUUJBTEtQQkhQTC9TY3JlZW5oZXJvLXNldHVwLmV4ZSJ9\"> Download for Windows</a></h3>",
" <p class='large-p'>You'll use Screenhero to pair program starting with <a href='/challenges/pair-program-on-bonfires'>http://freecodecamp.com/challenges/pair-program-on-bonfires</a></p>",
"</div>"
]
},
{
"id": "bd7158d9c451eddfaeb5bded",
"name": "What is the style guide for Bonfires?",
"dashedName": "what-is-the-style-guide-for-bonfires",
"category": "orientation",
"description": [
"<div class='col-xs-12 col-sm-10 col-sm-offset-1'>",
" <h3>Writing Bonfire challenges is a great way to exercise your own problem solving and testing abilities. Follow this process closely to maximize the chances of us accepting your bonfire.</h3>",
@ -946,6 +607,7 @@
"id": "bd7158d9c451eddfaeb5bdee",
"name": "What is the Free Code Camp Code of Conduct?",
"dashedName": "what-is-the-free-code-camp-code-of-conduct",
"category": "orientation",
"description": [
"<div class='col-xs-12 col-sm-10 col-sm-offset-1'>",
" <h3>Free Code Camp is friendly place to learn to code. We're committed to keeping it that way.</h3>",
@ -971,6 +633,7 @@
"id": "bd7158d9c451eddfaeb5bdef",
"name": "What is the Free Code Camp Privacy Policy?",
"dashedName": "what-is-the-free-code-camp-privacy-policy",
"category": "orientation",
"description": [
"<div class='col-xs-12 col-sm-10 col-sm-offset-1'>",
" <p class='large-p'>Free Code Camp is committed to respecting the privacy of visitors to our websites and web applications. The guidelines below explain how we protect the privacy of visitors to FreeCodeCamp.com and its features.</p>",
@ -1009,111 +672,11 @@
"</div>"
]
},
{
"id": "bd7158d9c436eddfaeb5bd3c",
"name": "How can I reach the Free Code Camp team to interview them for my publication?",
"dashedName": "how-can-i-reach-the-free-code-camp-team-to-interview-them-for-my-publication",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>We're happy to do a quick interview for your publication or show. Here's whom you should contact about what, and how to best reach them:</h3>",
" <p class='large-p'>",
" <ol>",
" <li class='large-li'>Want to talk to about Free Code Camp's curriculum or long-term vision? Reach out to Quincy Larson. He's <a href='https://twitter.com/ossia' target='_blank'>@ossia</a> on Twitter and @quincylarson on Gitter.</li>",
" <li class='large-li'>Want to talk about Free Code Camp's open source codebase, infrastructure, or JavaScript in general? Talk to Nathan Leniz. He's <a href='https://twitter.com/terakilobyte' target='_blank'>@terakilobyte</a> on Twitter and @terakilobyte on Gitter.</li>",
" <li class='large-li'>Want to explore our efforts to empower nonprofits with code? Michael D. Johnson eats, sleeps and breathes that. He's <a href='https://twitter.com/figitalboy' target='_blank'>@figitalboy</a> on Twitter and @codenonprofit on Gitter.</li>",
" <li class='large-li'>Want to get a camper's perspective on our community? Talk with Bianca Mihai (@biancamihai on Gitter and <a href='https://twitter.com/bubuslubu' target='_blank'>@bubuslubu</a> on Twitter) or Suzanne Atkinson (@adventurebear on Gitter and <a href='https://twitter.com/SteelCityCoach' target='_blank'>@steelcitycoach</a> on Twitter).",
" </ol>",
" </p>",
" <p class='large-p'>We strive to be helpful and transparent in everything we do. We'll do what we can to help you share our community with your audience.</p>",
"</div>"
]
},
{
"id": "bd7158d9c436eddfaeb5dd3b",
"name": "What other resources does Free Code Camp recommend to nonprofits?",
"dashedName": "what-other-resources-does-free-code-camp-recommend-to-nonprofits",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h2>Here are some excellent resources for nonprofits.</h2>",
" <h3>Please note that Free Code Camp is not partnered with, nor do we receive a referral fee from, any of the following providers. We simply want to help guide you towards a solution for your organization.</h3>",
" <h3>Skills-based Volunteer Organizations:</h3>",
" <p class='large-p'><a href='http://www.volunteermatch.com'>http://www.volunteermatch.com</a></p>",
" <p class='large-p'><a href='http://www.catchafire.org'>http://www.catchafire.org</a></p>",
" <h3>Building a website:</h3>",
" <p class='large-p'><a href='http://www.wix.com/'>http://www.wix.com/</p>",
" <p class='large-p'><a href='https://wordpress.com/'>https://wordpress.com/</p>",
" <p class='large-p'><a href='http://www.freecodecamp.com/field-guide/how-can-i-deploy-a-website-without-writing-any-code-at-all'>Build it yourself for free with no code</a></p>",
" <h3>Donor and Volunteer Management Systems</h3>",
" <p class='large-p'><a href='https://www.thedatabank.com/'>https://www.thedatabank.com/</a></p>",
" <p class='large-p'><a href='http://www.donorsnap.com/'>http://www.donorsnap.com/</a></p>",
" <p class='large-p'><a href='http://www.donorperfect.com/'>http://www.donorperfect.com/</a></p>",
" <p class='large-p'><a href='https://www.blackbaud.com/fundraising-crm/etapestry-donor-management'>https://www.blackbaud.com/fundraising-crm/etapestry-donor-management</a></p>",
" <p class='large-p'><a href='http://www.z2systems.com/'>http://www.z2systems.com</a></p>",
" <p class='large-p'><a href='http://www.regpacks.com/volunteer-management/'</a>http://www.regpacks.com/volunteer-management</a></p>",
" <p class='large-p'><a href='http://sumac.com/'>http://sumac.com</a></p>",
" <p class='large-p'><a href='http://www.volgistics.com'>http://www.volgistics.com</a></p>",
" <h3>Inventory Management Systems</h3>",
" <p class='large-p'><a href='https://www.ezofficeinventory.com/industries/non-profits'>https://www.ezofficeinventory.com/industries/non-profits</a></p>",
" <p class='large-p'><a href='https://www.ordoro.com'>https://www.ordoro.com</a></p>",
" <p class='large-p'><a href='http://www.unleashedsoftware.com'>http://www.unleashedsoftware.com</a></p>",
" <h3>E-Learning platforms</h3>",
" <p class='large-p'><a href='http://www.dokeos.com/'>http://www.dokeos.com</a></p>",
" <p class='large-p'><a href='http://www.efrontlearning.net/'>http://www.efrontlearning.net/</a></p>",
" <p class='large-p'><a href='https://moodle.org/'>https://moodle.org/</a></p>",
" <p class='large-p'><a href='https://sakaiproject.org/'>https://sakaiproject.org/</a></p>",
" <h3>Community Management</h3>",
" <p class='large-p'><a href='https://civicrm.org/'>https://civicrm.org/</a></p>",
" <p class='large-p'><a href='http://tcmgr.com/'>http://tcmgr.com/</a></p>",
" <h3>Electronic Forms</h3>",
" <p class='large-p'><a href='http://www.google.com/forms'>http://www.google.com/forms</a></p>",
" <p class='large-p'><a href='http://www.typeform.com'>http://www.typeform.com</a></p>",
"</div>"
]
},
{
"id": "bd7158d9c436eddfadb5bd3e",
"name": "How can I contribute to this guide?",
"dashedName": "how-can-i-contribute-to-this-guide",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <p class='large-p'>Contributing to our field guide is a great way to establish your history on GitHub, add to your portfolio, and help other campers. If you have a question about JavaScript or programming in general that you'd like us to add to the field guide, here are two ways to get it into the guide:</p>",
" <p class='large-p'>",
" <ol>",
" <li class='large-li'>You can message @danraley on Gitter with your question.</li>",
" <li class='large-li'>You can also contribute to this field guide directly via GitHub pull request, by cloning Free Code Camp's <a href='https://github.com/FreeCodeCamp/freecodecamp'>main repository</a> and modifying <a href='https://github.com/FreeCodeCamp/freecodecamp/blob/master/seed_data/field-guides.json'>field-guides.json</a>.</li>",
" </ol>",
" </p>",
"</div>"
]
},
{
"id": "bd7158d9c436eddfadb5bd32",
"name": "How can I help the Free Code Camp translation effort?",
"dashedName": "how-can-i-help-the-free-code-camp-translation-effort",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <p class='h2'>Our translation effort is driven by bilingual campers like you.</h2>",
" <p class='large-p'>If you're able to help us, you can join our <a href='https://trello.com/b/m7zhwXka/fcc-translation' target='_blank'>Trello board</a> by sending @quincylarson your email address on Gitter.</p>",
"</div>"
]
},
{
"id": "bd7158d9c436eddfadb5bd31",
"name": "What if I speak a language that Free Code Camp does not yet support?",
"dashedName": "what-if-i-speak-a-language-that-free-code-camp-does-not-yet-support",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <p class='h2'>Translation is an all-or-nothing proposal.</h2>",
" <p class='large-p'>We won't be able to add new languages to Free Code Camp until all of our challenges are translated into that language.</p>",
" <p class='large-p'>In addition to translating these initially, we'll also need to maintain the translation as the challenges are gradually updated.</p>",
" <p class='large-p'>If you're able to help us, you can join our <a href='https://trello.com/b/m7zhwXka/fcc-translation' target='_blank'>Trello board</a> by sending @quincylarson your email address on Gitter.</p>",
"</div>"
]
},
{
"id": "bd7158d9c436eddfadb5bd30",
"name": "Can I do Free Code Camp completely in my native language?",
"dashedName": "can-i-do-free-code-camp-completely-in-my-native-language",
"category": "orientation",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <p class='large-p'>The last 800 hours of free code camp involve building projects for nonprofits. These nonprofit projects will involve lots of meetings, correspondence, and pair programming, all of which will be conducted in English.</p>",
@ -1127,6 +690,7 @@
"id": "bd7158d9c436eddfadb5bd3c",
"name": "What is the new Free Code Camp Mobile Experience?",
"dashedName": "what-is-the-new-free-code-camp-mobile-experience",
"category": "orientation",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h2>We're building an on-the-go version of Free Code Camp.</h2>",
@ -1144,6 +708,7 @@
"id": "bd7158d9c436eddfadb5bd3b",
"name": "What is the Free Code Camp Front End Development Certificate?",
"dashedName": "what-is-the-free-code-camp-front-end-development-certificate",
"category": "orientation",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h2>We're creating a free Front End Development Certificate.</h2>",
@ -1162,5 +727,88 @@
" <p class='large-p'>All campers who have already completed these challenges are retroactively eligible for the certificate!</p>",
"</div>"
]
},
{
"id": "bd7156d9c436eddfadb5bd3b",
"name": "How can I watch Live Coding on the Free Code Camp Twitch.tv Channel?",
"dashedName": "how-can-i-watch-live-coding-on-the-free-code-camp-twitch-tv-channel",
"description": [
"<div class='row text-center'>",
" <div class='col-xs-12 col-sm-10 col-sm-offset-1'>",
" <h2>Watch the live stream below or on our &thinsp;<a href='http://twitch.tv/freecodecamp' target='_blank'>Twitch.tv channel</a>.</h2>",
" <div class='spacer'></div>",
" <div class='row'>",
" <div class='col-md-8 col-xs-12'>",
" <div class='embed-responsive embed-responsive-16by9'>",
" <iframe src='http://www.twitch.tv/freecodecamp/embed' frameborder='0' scrolling='no'></iframe>",
" </div>",
" </div>",
" <div class='col-md-4 col-xs-12'>",
" <div class='visible-sm visible-xs'>",
" <div class='embed-responsive embed-responsive-16by9'>",
" <iframe src='http://www.twitch.tv/freecodecamp/chat?popout=' frameborder='0' scrolling='no'></iframe>",
" </div>",
" </div>",
" <div class='visible-md visible-lg'>",
" <div class='embed-responsive embed-responsive-twitch-chat'>",
" <iframe src='http://www.twitch.tv/freecodecamp/chat?popout=' frameborder='0' scrolling='no'></iframe>",
" </div>",
" </div>",
" </div>",
" </div>",
" <div class='row'>",
" <div class='col-xs-12'>",
" <h2>Check out our scheduled shows. You can add them to your calendar.</h2>",
" <div class='embed-responsive embed-responsive-16by9'>",
" <iframe src='https://www.google.com/calendar/embed?src=freecodecamp.com_r06116ile3o6ucpif7s0g281tc%40group.calendar.google.com&amp;ctz=America/New_York&amp;mode=AGENDA' style='border: 0' width='800' height='600' frameborder='0' scrolling='no' class='embed-responsive-item'></iframe>",
" </div>",
" </div>",
" </div><br/>",
" <div class='row'>",
" <div class='col-xs-12'>",
" <h2>Here are some of our previous shows (you can full-screen them):</h2>",
" <div class='row negative-20'>",
" <div class='col-xs-12 col-sm-12 col-md-6'>",
" <div class='embed-responsive embed-responsive-16by9 big-break'>",
" <iframe src='//www.youtube.com/embed/Z_43xApGB9Y' class='embed-responsive-item'></iframe>",
" </div>",
" <p class='wrappable negative-30'>link: &thinsp;<a href='http://www.youtube.com/watch/Fn9HMn79KH0'>http://www.youtube.com/watch/Z_43xApGB9Y</a></p>",
" </div>",
" <div class='col-xs-12 col-sm-12 col-md-6'>",
" <div class='embed-responsive embed-responsive-16by9 big-break'>",
" <iframe src='//www.youtube.com/embed/PvWHzcebjjQ' class='embed-responsive-item'></iframe>",
" </div>",
" <p class='wrappable negative-30'>link: &thinsp;<a href='http://www.youtube.com/watch/Fn9HMn79KH0'>http://www.youtube.com/watch/PvWHzcebjjQ</a></p>",
" </div>",
" <div class='col-xs-12 col-sm-12 col-md-6'>",
" <div class='embed-responsive embed-responsive-16by9 big-break'>",
" <iframe src='//www.youtube.com/embed/yHL6mEr-LGY' class='embed-responsive-item'></iframe>",
" </div>",
" <p class='wrappable negative-30'>link: &thinsp;<a href='http://www.youtube.com/watch/Fn9HMn79KH0'>http://www.youtube.com/watch/yHL6mEr-LGY</a></p>",
" </div>",
" <div class='col-xs-12 col-sm-12 col-md-6'>",
" <div class='embed-responsive embed-responsive-16by9 big-break'>",
" <iframe src='//www.youtube.com/embed/dolG-yRMcPs' class='embed-responsive-item'></iframe>",
" </div>",
" <p class='wrappable negative-30'>link: &thinsp;<a href='http://www.youtube.com/watch/Fn9HMn79KH0'>http://www.youtube.com/watch/dolG-yRMcPs</a></p>",
" </div>",
" <div class='col-xs-12 col-sm-12 col-md-6'>",
" <div class='embed-responsive embed-responsive-16by9 big-break'>",
" <iframe src='//www.youtube.com/embed/YMz_vrK_KlQ' class='embed-responsive-item'></iframe>",
" </div>",
" <p class='wrappable negative-30'>link: &thinsp;<a href='http://www.youtube.com/watch/_BErpDdmBOw'>http://www.youtube.com/watch/YMz_vrK_KlQ</a></p>",
" </div>",
" <div class='col-xs-12 col-sm-12 col-md-6'>",
" <div class='embed-responsive embed-responsive-16by9 big-break'>",
" <iframe src='//www.youtube.com/embed/bbFVxaza8Ik' class='embed-responsive-item'></iframe>",
" </div>",
" <p class='wrappable negative-30'>link: &thinsp;<a href='http://www.youtube.com/watch/S7iRBZJwOAs'>http://www.youtube.com/watch/bbFVxaza8Ik</a></p>",
" </div>",
" </div>",
" </div>",
" </div>",
" </div>",
"</div>"
]
}
]

143
field-guides/outreach.json Normal file
View File

@ -0,0 +1,143 @@
[
{
"id": "bd7158d9c436eddfaeb5bd3b",
"name": "How can I stream my live coding sessions on Free Code Camp's Twitch.tv channel?",
"dashedName": "how-can-i-stream-my-live-coding-sessions-on-free-code-camps-twitch-tv-channel",
"category": "outreach",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <h3>If you're interested in coding JavaScript live in front of dozens of people on our popular <a href='http://twitch.tv/freecodecamp' target='_blank'>twitch.tv channel</a>, we'd love to have you.</h3>",
"<p class='large-p'>Please follow these steps to get started:</p>",
" <p class='large-p'>",
" <ol>",
" <li class='large-li'>Follow <a href='http://www.hdpvrcapture.com/wordpress/?p=5951' target='_blank'>this tutorial</a> to set up your computer for streaming.</li>",
" <li class='large-li'>Contact Jason Ruekert - he's @jsonify in Gitter. He's in charge of our Twitch.tv channel. Tell him what you'd like to stream, and when you're available to stream.</li>",
" <li class='large-li'>Jason will pair with you using Screenhero to verify your computer is configured properly to stream.</li>",
" </ol>",
" </p>",
" <p class='large-p'>Be respectful of your audience. Everything you stream should be related to coding JavaScript, and should be acceptable for children. (Yes, children do sometimes watch our Twitch stream to learn to code).</p>",
" <p class='large-p'>While you're streaming, keep the chat room open so you can respond to questions from your viewers. If someone follows Free Code Camp on Twitch, try to thank them.</p>",
" <p class='large-p'>If you do a good job, we'll invite you back to stream some more. Who knows, you might become one of our regular streamers!</p>",
"</div>"
]
},
{
"id": "bd7158d9c446eddfaeb5bdef",
"name": "How do Free Code Camp's Nonprofit Projects work?",
"dashedName": "how-do-free-code-camps-nonprofit-projects-work",
"category": "outreach",
"description": [
"<div class='col-xs-12 col-sm-10 col-sm-offset-1'>",
" <p class='large-p'>Building nonprofit projects is the main way that our campers learn full stack JavaScript and agile software development. Once you complete the Free Code Camp Waypoints, Bonfires, Ziplines and Basejumps, you'll begin this process.</p>",
" <h3>Starting with the end in mind</h3>",
" <p class='large-p'>Our goal at Free Code Camp is to help you land a job as a junior software developer (or, if you prefer, a 'pivot job' that leads your current career in a more technical direction).</p>",
" <p class='large-p'>You'll continue to work on nonprofit projects until you've built a sufficiently impressive portfolio and references to start your job search. Your portfolio will ultimately have three to five nonprofit projects. We estimate that the 900 hours of nonprofit projects you're going to complete, in addition to the 100 hours of challenges you've already completed, will be enough to qualify you for your first coding job. This will produce a much broader portfolio than a traditional coding bootcamp, which generally only has one or two capstone projects.</p>",
" <h3>Choosing your first Nonprofit Project</h3>",
" <p class='large-p'>We've categorized all the nonprofit projects by estimated time investment per camper: 100 hours, 200 hours, and 300 hours. These are only rough estimates.</p>",
" <p class='large-p'>Example: if you and the camper you're paired up with (your pair) each stated you could work 20 hours per week. If the project is a 100 hour per camper project, you should be able to complete it in about 5 weeks.</p>",
" <p class='large-p'>Our Nonprofit Project team will match you and your pair based on:</p>",
" <p class='large-p'>",
" <ol>",
" <li class='large-li'>Your estimated time commitment (10, 20 or 40 hours per week)</li>",
" <li class='large-li'>Your time zone</li>",
" <li class='large-li'>The nonprofit projects you've chosen</li>",
" <li class='large-li'>Prior coding experience (we'd like both campers to be able to contribute equally)</li>",
" </ol>",
" </p>",
" <p class='large-p'>We won't take age or gender into account. This will provide you with valuable experience in meshing with diverse teams, which is a reality of the contemporary workplace.</p>",
" <p class='large-p'>You'll only work on one project at a time. Once you start a nonprofit project, we'll remove you from all other nonprofit project you've expressed interest in. There's a good chance those projects will no longer be available when you finish your current project, anyway. Don't worry, though - we get new nonprofit project requests every day, so there will be plenty more projects for you to consider after you finish your current one.</p>",
" <h3>Finalizing the Project</h3>",
" <p class='large-p'>Before you can start working on the project, our team of Nonprofit Project Coordinators will go through the following process:</p>",
" <p class='large-p'>",
" <ol>",
" <li class='large-li'>We'll wait until there are two campers who have chosen the same project and look like they're a good match for one another based on the factors mentioned above.</li>",
" <li class='large-li'>We'll call the stakeholder to confirm once again that he or she agrees with our &thinsp;<a href=\"freecodecamp.com/nonprofits\">terms &thinsp;</a>and has signed our &thinsp;<a href=\"http://goo.gl/forms/0YKkd9bpcR\">Nonprofit Project Stakeholder Pledge</a>.</li>",
" <li class='large-li'>We'll set an initial meeting with representatives from Free Code Camp, the two campers, and the stakeholder.</li>",
" <li class='large-li'>If the stakeholder and both campers shows up promptly, and seem enthusiastic and professional, we'll start the project.</li>",
" </ol>",
" </p>",
" <p class='large-p'>This lengthy process serves an important purpose: it reduces the likelihood that any of our campers or stakeholders will waste their precious time.</p>",
" <h3>Nonprofit Stakeholders</h3>",
" <p class='large-p'>Each nonprofit project was submitted by a nonprofit. A representative from this nonprofit has agreed to serve as a \"stakeholder\" - an authorative person who understands the organization and its needs for this particular project.</p>",
" <p class='large-p'>Stakeholders have a deep understanding of their organizations' needs. Campers will work with them to figure out the best solutions to these needs.</p>",
" <p class='large-p'>When you and your pair first speak with your nonprofit stakeholder, you'll:</p>",
" <p class='large-p'>",
" <ul>",
" <li class='large-li'>talk at length to better understand their needs.</li>",
" <li class='large-li'>create a new Trello board and use it to prioritize what needs to be built.</li>",
" <li class='large-li'>and establish deadlines based on your weekly time commitment, and how long you think each task will take.</li>",
" </ul>",
" </p>",
" <p class='large-p'>It's notoriously difficult to estimate how long building software projects will take, so feel free to ask our volunteer team for help.</p>",
" <p class='large-p'>You'll continue to meet with your stakeholder at least twice a month in your project's Gitter or Slack channel.</p>",
" <p class='large-p'>You should also ask questions in your project's Gitter or Slack channel as they come up throughout the week, and your stakeholder can answer them asynchronously.</p>",
" <p class='large-p'>Getting \"blocked\" on a task can take away your sense of forward momentum, so be sure to proactively seek answers to any ambiguities you encounter.</p>",
" <p class='large-p'>Ultimately, the project will be considered complete once both the stakeholder's needs have been met, and you and your pair are happy with the project. Then you can add it to your portfolio!</p>",
" <h3>Working with your Pair</h3>",
" <p class='large-p'>You and your pair will pair program (code together on the same computer virtually) about half of the time, and work independently the other half of the time.</p>",
" <p class='large-p'>Here are our recommended ways of collaborating:</p>",
" <p class='large-p'>",
" <ul>",
" <li class='large-li'>&#8226; Gitter has robust private messaging functionality. It's the main way our team communicates, and we recommend it over email.</li>",
" <li class='large-li'>&#8226; Trello is great for managing projects. Work with your stakeholder to create Trello cards, and update these cards regularly as you make progress on them.</li>",
" <li class='large-li'>&#8226; Screenhero or Team Viewer - These are the ideal way to pair program. Tools like TMUX are good, but difficult to use. We discourage you from using screen sharing tools where only one person has control of the keyboard and mouse - that isn't real pair programming.</li>",
" <li class='large-li'>&#8226; Write clear and readable code, commit messages, branch names, and pull request messages.</li>",
" </ul>",
" </p>",
" <h3>Hosting Apps</h3>",
" <p class='large-p'>Unless your stakeholder has an existing modern host (AWS, Digital Ocean), you'll need to transition them over to a new platform. We believe Heroku is the best choice for a vast majority of web projects. It's free, easy to use, and has both browser and command line interfaces. It's owned by Salesforce and used by a ton of companies, so it's accountable and unlikely to go away.</p>",
" <p class='large-p'>If you need help convincing your stakeholder that Heroku is the ideal platform, we'll be happy to talk with them.</p>",
" <h3>Maintaining Apps</h3>",
" <p class='large-p'>Once you complete a nonprofit project, your obligation to its stakeholder is finished. Your goal is to leave behind a well documented solution that can be easily maintained by a contract JavaScript developer (or even a less-technical \"super user\").</p>",
" <p class='large-p'>While you will no longer need to help with feature development, we encourage you to consider helping your stakeholder with occasional patches down the road. After all, this project will be an important piece of your portfolio, and you'll want it to remain in good shape for curious future employers.</p>",
" <h3>Pledging to finish the project</h3>",
" <p class='large-p'>Your nonprofit stakeholder, your pair, and our volunteer team are all counting on you to finish your nonprofit project. If you walk away from an unfinished nonprofit project, you'll become ineligible to ever be assigned another one.</p>",
" <p class='large-p'>To confirm that you understand the seriousness of this commitment, we require that all campers &thinsp;<a href=\"http://goo.gl/forms/ZMn96z2QqY\">sign this pledge &thinsp;</a>before starting on their nonprofit projects.</p>",
" <p class='large-p'>There will likely be times of confusion or frustration. This is normal in software development. The most important thing is that you do not give up and instead persevere through these setbacks. As Steve Jobs famously said, \"Real artists ship.\" And you are going to ship one successful nonprofit project after another until you feel ready to take the next step in your promising career.</p>",
"</div>"
]
},
{
"id": "bd7158d9c436eddfadb5bd3e",
"name": "How can I contribute to this guide?",
"dashedName": "how-can-i-contribute-to-this-guide",
"category": "outreach",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <p class='large-p'>Contributing to our field guide is a great way to establish your history on GitHub, add to your portfolio, and help other campers. If you have a question about JavaScript or programming in general that you'd like us to add to the field guide, here are two ways to get it into the guide:</p>",
" <p class='large-p'>",
" <ol>",
" <li class='large-li'>You can message @danraley on Gitter with your question.</li>",
" <li class='large-li'>You can also contribute to this field guide directly via GitHub pull request, by cloning Free Code Camp's <a href='https://github.com/FreeCodeCamp/freecodecamp'>main repository</a> and modifying <a href='https://github.com/FreeCodeCamp/freecodecamp/blob/master/seed_data/field-guides.json'>field-guides.json</a>.</li>",
" </ol>",
" </p>",
"</div>"
]
},
{
"id": "bd7158d9c436eddfadb5bd32",
"name": "How can I help the Free Code Camp translation effort?",
"dashedName": "how-can-i-help-the-free-code-camp-translation-effort",
"category": "outreach",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <p class='h2'>Our translation effort is driven by bilingual campers like you.</h2>",
" <p class='large-p'>If you're able to help us, you can join our <a href='https://trello.com/b/m7zhwXka/fcc-translation' target='_blank'>Trello board</a> by sending @quincylarson your email address on Gitter.</p>",
"</div>"
]
},
{
"id": "bd7158d9c436eddfadb5bd31",
"name": "What if I speak a language that Free Code Camp does not yet support?",
"dashedName": "what-if-i-speak-a-language-that-free-code-camp-does-not-yet-support",
"category": "outreach",
"description": [
"<div class=\"col-xs-12 col-sm-10 col-sm-offset-1\">",
" <p class='h2'>Translation is an all-or-nothing proposal.</h2>",
" <p class='large-p'>We won't be able to add new languages to Free Code Camp until all of our challenges are translated into that language.</p>",
" <p class='large-p'>In addition to translating these initially, we'll also need to maintain the translation as the challenges are gradually updated.</p>",
" <p class='large-p'>If you're able to help us, you can join our <a href='https://trello.com/b/m7zhwXka/fcc-translation' target='_blank'>Trello board</a> by sending @quincylarson your email address on Gitter.</p>",
"</div>"
]
}
]

View File

@ -1,18 +1,25 @@
/* eslint-disable no-process-exit */
require('babel/register');
require('dotenv').load();
var fs = require('fs'),
path = require('path'),
app = require('../server/server'),
fieldGuides = require('./field-guides.json'),
nonprofits = require('./nonprofits.json'),
jobs = require('./jobs.json');
var challangesRegex = /^(bonfire:|waypoint:|zipline:|basejump:|hike:)/i;
function getFilesFor(dir) {
return fs.readdirSync(path.join(__dirname, '/' + dir));
}
var Challenge = app.models.Challenge;
var FieldGuide = app.models.FieldGuide;
var Nonprofit = app.models.Nonprofit;
var Job = app.models.Job;
var counter = 0;
var challenges = fs.readdirSync(path.join(__dirname, '/challenges'));
var challenges = getFilesFor('challenges');
var fieldGuides = getFilesFor('field-guides');
var offerings = 3 + challenges.length;
var CompletionMonitor = function() {
@ -32,10 +39,17 @@ Challenge.destroyAll(function(err, info) {
} else {
console.log('Deleted ', info);
}
challenges.forEach(function (file) {
challenges.forEach(function(file) {
var challenges = require('./challenges/' + file).challenges
.map(function(challenge) {
// NOTE(berks): add title for displaying in views
challenge.title = challenge.name.replace(challangesRegex, '').trim();
return challenge;
});
Challenge.create(
require('./challenges/' + file).challenges,
function (err) {
challenges,
function(err) {
if (err) {
console.log(err);
} else {
@ -53,14 +67,16 @@ FieldGuide.destroyAll(function(err, info) {
} else {
console.log('Deleted ', info);
}
FieldGuide.create(fieldGuides, function(err, data) {
if (err) {
console.log(err);
} else {
console.log('Saved ', data);
}
CompletionMonitor();
console.log('field guides');
fieldGuides.forEach(function(file) {
FieldGuide.create(require('./field-guides/' + file), function(err, data) {
if (err) {
console.log(err);
} else {
console.log('Saved ', data);
}
CompletionMonitor();
console.log('field guides');
});
});
});