{
"name": "Basic Front End Development Projects",
"order": 9,
"time": "100h",
"challenges": [
{
"id": "bd7158d8c442eddfbeb5bd1f",
"title": "Get Set for Ziplines",
"challengeSeed": [],
"description": [
[
"http://i.imgur.com/6WLULsC.gif",
"A gif showing how to create a Codepen account.",
"For our front end Zipline challenges, we'll use a popular browser-based code editor called CodePen. Open CodePen and click \"Sign up\" in the upper right hand corner, then scroll down to the free plan and click \"Sign up\" again. Click the \"Use info from GitHub button\", then add your email address and create a password. Click the \"Sign up\" button. Then in the upper right hand corner, click \"New pen\".",
"http://codepen.io"
],
[
"http://i.imgur.com/U4y9RJ1.gif",
"A gif showing that you can type \"hello world\" will output \"hello world\" in the preview window. You can also drag windows to resize them, and change their orientation.",
"In the HTML box, create an h1 element with the text \"Hello World\". You can drag the frames around to resize them. You can also click the \"Change View\" button and change the orientation of the frames.",
""
],
[
"http://i.imgur.com/G9KFQDL.gif",
"A gif showing the process of adding Bootstrap to your pen.",
"Click the gear in the upper left hand corner of the CSS box, then scroll down to \"Quick add\" and choose Bootstrap. Now give your h1 element the class of \"text-primary\" to change its color and prove that Bootstrap is now available.",
""
],
[
"http://i.imgur.com/Gi3aig0.gif",
"A gif showing the process of adding Animate.css and jQuery to pen.",
"Click the gear in the upper left hand corner of the CSS box, then scroll down to \"Quick add\" and choose Animate.css. Click the gear in the upper left hand corner of the JS box, then scroll down to \"Quick add\" and choose jQuery. Let's prove that Animate.css and jQuery are loaded properly. In the JS box, add the following code to make your h1 element bounce: $(document).ready(function(){ $(\"h1\").addClass(\"animated bounce\"); });.",
""
],
[
"http://i.imgur.com/Wzt6Y9Y.gif",
"A gif showing the process of saving and forking a pen.",
"Save your pen with the \"Save\" button. Then click the \"Fork\" button. This will create a fork (copy) of your pen that you can experiment with.",
""
]
],
"type": "Waypoint",
"challengeType": 7,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c242eddfaeb5bd13",
"title": "Build a Personal Portfolio Webpage",
"challengeSeed": ["133315782"],
"description": [
"Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/ThiagoFerreir4/full/eNMxEp.",
"Rule #1: Don't look at the example project's code on CodePen. Figure it out for yourself.",
"Rule #2: You may use whichever libraries or APIs you need.",
"Rule #3: Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Hint: If you don't want to start from scratch, you can fork this simple Bootstrap portfolio template on CodePen: http://codepen.io/FreeCodeCamp/pen/mJNqQj.",
"Here are the user stories you must enable, and optional bonus user stories:",
"User Story: As a user, I can access all of the portfolio webpage's content just by scrolling.",
"User Story: As a user, I can click different buttons that will take me to the portfolio creator's different social media pages.",
"User Story: 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.)",
"Bonus User Story: 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 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: <a target='_blank'>.",
"Remember to use Read-Search-Ask 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.
Click here then add your link to your tweet's text"
],
"type": "zipline",
"challengeType": 3,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "Создайте сайт-портфолио",
"descriptionRu": [
"Задание: Создайте CodePen.io который успешно копирует вот этот: http://codepen.io/ThiagoFerreir4/full/eNMxEp.",
"Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
"Правило #2: Можете использовать любые библиотеки или API, которые потребуются.",
"Правило #3: Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
"Подсказка: Если вы не хотите создавать портфолио с нуля, можете взять за основу этот простой Bootstrap шаблон: http://codepen.io/FreeCodeCamp/pen/mJNqQj.",
"Реализуйте следующие пользовательские истории, сделайте также бонусные по желанию:",
"Пользовательская история: В качестве пользователя, я могу получить доступ ко всей информации на странице просто прокрутив ее сверху вниз.",
"Пользовательская история: В качестве пользователя, я могу нажать на различные кнопки и перейти к социальным страницам владельца портфолио.",
"Пользовательская история: В качестве пользователя, я могу увидеть эскизы проектов, которые были созданы владельцем портфолио (используйте временную картинку если у вас пока нету собственных веб-страниц).",
"Бонусная пользовательская история: В качестве пользователя, я могу перемещаться к различным частям страницы нажимая на соответствующие навигационные кнопки.",
"Не переживайте если вам пока нечего показать в портфолио - вы создадите несколько веб приложений в следующих заданиях, а затем вернетесь и обновите портфолио.",
"В сети существует много шаблонов для портфолио, но в этом задании вам необходимо создать собственную уникальную страницу. Использование Bootstrap сделает этот процесс намного проще.",
"Обратите внимание, что CodePen.io переопределяет функцию Window.open(), поэтому, если вы хотите открывать окна используя jQuery, необходимо будет адресовать невидимые якорные элементы, такие как этот: <a target='_blank'&rt;.",
"Если что-то не получается, воспользуйтесь Read-Search-Ask.",
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
"Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.
Click here then add your link to your tweet's text"
],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c442eddfaeb5bd13",
"title": "Build a Random Quote Machine",
"challengeSeed": ["126415122"],
"description": [
"Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/AdventureBear/full/vEoVMw.",
"Rule #1: Don't look at the example project's code on CodePen. Figure it out for yourself.",
"Rule #2: You may use whichever libraries or APIs you need.",
"Rule #3: Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the user stories you must enable, and optional bonus user stories:",
"User Story: As a user, I can click a button to show me a new random quote.",
"Bonus User Story: As a user, I can press a button to tweet out a quote.",
"Remember to use Read-Search-Ask 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.
Click here then add your link to your tweet's text"
],
"type": "zipline",
"challengeType": 3,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "Создайте генератор случайных цитат",
"descriptionRu": [
"Задание: Создайте CodePen.io который успешно копирует вот этот: http://codepen.io/AdventureBear/full/vEoVMw.",
"Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
"Правило #2: Можете использовать любые библиотеки или API, которые потребуются.",
"Правило #3: Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
"Реализуйте следующие пользовательские истории, сделайте также бонусные по желанию:",
"Пользовательская история: В качестве пользователя, я могу нажать на кнопку и получить случайную цитату.",
"Бонусная пользовательская история: В качестве пользователя, я могу нажать на кнопку и опубликовать цитату в Twitter'e.",
"Цитаты можно добавить в массив и случайным образом выводить одну из них, либо можно воспользоваться соответствующим API, например http://forismatic.com/en/api/.",
"Если что-то не получается, воспользуйтесь Read-Search-Ask.",
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
"Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.
Click here then add your link to your tweet's text"
],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c442eddfaeb5bd0f",
"title": "Build a Pomodoro Clock",
"challengeSeed": ["126411567"],
"description": [
"Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/GeoffStorbeck/full/RPbGxZ/.",
"Rule #1: Don't look at the example project's code on CodePen. Figure it out for yourself.",
"Rule #2: You may use whichever libraries or APIs you need.",
"Rule #3: Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the user stories you must enable, and optional bonus user stories:",
"User Story: As a user, I can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.",
"Bonus User Story: As a user, I can reset the clock for my next pomodoro.",
"Bonus User Story: As a user, I can customize the length of each pomodoro.",
"Remember to use Read-Search-Ask 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.
Click here then add your link to your tweet's text"
],
"type": "zipline",
"challengeType": 3,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "Создайте таймер Pomodoro",
"descriptionRu": [
"Задание: Создайте CodePen.io который успешно копирует вот этот: http://codepen.io/GeoffStorbeck/full/RPbGxZ/.",
"Правило #1: Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
"Правило #2: Можете использовать любые библиотеки или API, которые потребуются.",
"Правило #3: Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
"Реализуйте следующие пользовательские истории, сделайте также бонусные по желанию:",
"Пользовательская история: В качестве пользователя, я могу запустить 25 минутную 'помидорку', по истечении которой таймер выключится.",
"Бонусная пользовательская история: В качестве пользователя, я могу сбросить таймер для установки следующей 'помидорки'.",
"Бонусная пользовательская история: В качестве пользователя, я могу выбирать длительность 'помидорки'.",
"Если что-то не получается, воспользуйтесь Read-Search-Ask.",
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
"Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.
Click here then add your link to your tweet's text"
],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bd7158d8c442eddfaeb5bd17",
"title": "Build a JavaScript Calculator",
"challengeSeed": ["126411565"],
"description": [
"Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/GeoffStorbeck/full/zxgaqw.",
"Rule #1: Don't look at the example project's code on CodePen. Figure it out for yourself.",
"Rule #2: You may use whichever libraries or APIs you need.",
"Rule #3: Reverse engineer the example project's functionality, and also feel free to personalize it.",
"Here are the user stories you must enable, and optional bonus user stories:",
"User Story: As a user, I can add, subtract, multiply and divide two numbers.",
"Bonus User Story: I can clear the input field with a clear button.",
"Bonus User Story: I can keep chaining mathematical operations together until I hit the equal button, and the calculator will tell me the correct output.",
"Remember to use Read-Search-Ask 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.
Click here then add your link to your tweet's text"
],
"type": "zipline",
"challengeType": 3,
"tests": [],
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
}
]
}