212 lines
18 KiB
JSON
212 lines
18 KiB
JSON
{
|
|
"name": "Basic Front End Development Projects",
|
|
"order": 0.008,
|
|
"challenges": [
|
|
{
|
|
"id": "bd7158d8c442eddfbeb5bd1f",
|
|
"title": "Get Set for Ziplines",
|
|
"difficulty": 1.00,
|
|
"challengeSeed": ["125658022"],
|
|
"description": [
|
|
"Now you're ready to start our Zipline challenges. These front-end development challenges will give you many opportunities to apply the HTML, CSS, jQuery and JavaScript you've learned to build static (database-less) applications.",
|
|
"Whatever you do, don't get discouraged! Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck.",
|
|
"We'll build these challenges using CodePen, a popular tool for creating, sharing, and discovering static web applications.",
|
|
"Go to <a href='http://codepen.io' target='_blank'>http://codepen.io</a> and create an account.",
|
|
"Click your user image in the top right corner, then click the \"New pen\" button that drops down.",
|
|
"Drag the windows around and press the buttons in the lower-right hand corner to change the orientation to suit your preference.",
|
|
"Click the gear next to CSS. Then under the \"Add External CSS\" section, use the \"Quick-add\" select box to select Bootstrap. Then click \"Save & Close\".",
|
|
"Verify that bootstrap is active by adding the following code to your HTML: <code><h1 class='text-primary'>Hello CodePen!</h1></code>. The text's color should be Bootstrap blue.",
|
|
"Click the gear next to JavaScript. Click the \"Quick-add\" select box and choose jQuery (not jQuery UI).",
|
|
"Click the \"Quick-add\" select box again and choose Bootstrap. Then click \"Save & Close\".",
|
|
"Now add the following code to your JavaScript: <code>$(document).ready(function() { $('.text-primary').text('Hi CodePen!') });</code>. Click the \"Save\" button at the top. Your \"Hello CodePen!\" should change to \"Hi CodePen!\". This means that jQuery is working.",
|
|
"You can use this CodePen that you've just created as a starting point for your Ziplines. Just click the \"fork\" button at the top of your CodePen and it will create a duplicate CodePen.",
|
|
"Now you're ready for your first Zipline. Click the \"I've completed this challenge\" button."
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 2,
|
|
"tests": [],
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bd7158d8c242eddfaeb5bd13",
|
|
"title": "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.",
|
|
"<span class='text-info'>Hint:</span> If you don't want to start from scratch, you can fork this simple Bootstrap portfolio template on CodePen: <a href='http://codepen.io/FreeCodeCamp/pen/mJNqQj/' target='_blank'>http://codepen.io/FreeCodeCamp/pen/mJNqQj</a>.",
|
|
"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 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><a target='_blank'></a></code>.",
|
|
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</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 from fellow campers, click this button and paste in a link to your CodePen project. <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:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
|
],
|
|
"type": "zipline",
|
|
"challengeType": 3,
|
|
"tests": [],
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bd7158d8c442eddfaeb5bd13",
|
|
"title": "Build a Random Quote Machine",
|
|
"difficulty": 1.02,
|
|
"challengeSeed": ["126415122"],
|
|
"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/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.",
|
|
"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='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</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 from fellow campers, click this button and paste in a link to your CodePen project. <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:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
|
],
|
|
"type": "zipline",
|
|
"challengeType": 3,
|
|
"tests": [],
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bd7158d8c442eddfaeb5bd10",
|
|
"title": "Show the Local Weather",
|
|
"difficulty": 1.03,
|
|
"challengeSeed": ["126415127"],
|
|
"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/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:",
|
|
"<span class='text-info'>User Story:</span> As a user, I can see the weather in my current location.",
|
|
"<span class='text-info'>Bonus User Story:</span> As a user, I can see an icon depending on the weather.",
|
|
"<span class='text-info'>Bonus User Story:</span> As a user, I see a different background image (e.g. snowy mountain, hot desert) depending on the weather.",
|
|
"<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='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</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 from fellow campers, click this button and paste in a link to your CodePen project. <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:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
|
],
|
|
"type": "zipline",
|
|
"challengeType": 3,
|
|
"tests": [],
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bd7158d8c442eddfaeb5bd0f",
|
|
"title": "Build a Pomodoro Clock",
|
|
"difficulty": 1.04,
|
|
"challengeSeed": ["126411567"],
|
|
"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/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:",
|
|
"<span class='text-info'>User Story:</span> As a user, I can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.",
|
|
"<span class='text-info'>Bonus User Story:</span> As a user, I can reset the clock for my next pomodoro.",
|
|
"<span class='text-info'>Bonus User Story:</span> As a user, I can customize the length of each pomodoro.",
|
|
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</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 from fellow campers, click this button and paste in a link to your CodePen project. <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:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
|
],
|
|
"type": "zipline",
|
|
"challengeType": 3,
|
|
"tests": [],
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"id": "bd7158d8c442eddfaeb5bd1f",
|
|
"title": "Use the Twitch.tv 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> 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 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'>Bonus User Story:</span> As a user, I will see a placeholder notification if a streamer has closed their Twitch account. You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.",
|
|
"<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\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]</code>",
|
|
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</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 from fellow campers, click this button and paste in a link to your CodePen project. <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:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
|
],
|
|
"type": "zipline",
|
|
"challengeType": 3,
|
|
"tests": [],
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
}
|
|
]
|
|
}
|