189 lines
19 KiB
JSON
189 lines
19 KiB
JSON
{
|
||
"name": "Basic Front End Development Projects",
|
||
"order": 5.5,
|
||
"time": "50 hours",
|
||
"helpRoom": "HelpFrontEnd",
|
||
"challenges": [
|
||
{
|
||
"id": "bd7158d8c442eddfbeb5bd1f",
|
||
"title": "Get Set for our Front End Development Projects",
|
||
"description": [
|
||
[
|
||
"http://i.imgur.com/OAD6SJz.png",
|
||
"An image of a Simon game, one our front end projects.",
|
||
"Our front end development projects will give you a chance to apply the front end skills you've developed up to this point. We'll use a popular browser-based code editor called CodePen.",
|
||
""
|
||
],
|
||
[
|
||
"http://i.imgur.com/WBetuBa.jpg",
|
||
"A programmer punching through his laptop screen in frustration.",
|
||
"These projects are hard. It takes most campers several days to build each project. You will get frustrated. But don't quit. This gets easier with practice.",
|
||
""
|
||
],
|
||
[
|
||
"http://i.imgur.com/p2TpOQd.jpg",
|
||
"A cute dog jumping over a hurdle and winking and pointing his paw at you.",
|
||
"When you get stuck, just use the Read-Search-Ask methodology. Don't worry - you've got this.",
|
||
""
|
||
],
|
||
[
|
||
"http://i.imgur.com/G1saeDt.gif",
|
||
"A gif showing how to create a Codepen account.",
|
||
"For our front end project challenges, we'll use a popular browser-based code editor called CodePen. Click the \"Open link in new tab\" button below to open CodePen's signup page. Fill out the form and click \"Sign up\". <br><div class=\"small\">Note: If you already have a CodePen account, you can skip this step by clicking \"Open link in new tab\", closing the new tab that opens, then clicking \"go to my next step\". We removed our \"skip step\" button because many people would just click it repeatedly without doing these important steps.</div>",
|
||
"http://codepen.io/signup/free"
|
||
],
|
||
[
|
||
"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.",
|
||
""
|
||
]
|
||
],
|
||
"challengeSeed": [],
|
||
"tests": [],
|
||
"type": "Waypoint",
|
||
"challengeType": 7,
|
||
"nameEs": "Prepárate para los Proyectos de Desarrollo de Interfaces",
|
||
"descriptionEs": [
|
||
[
|
||
"http://i.imgur.com/OAD6SJz.png",
|
||
"Una imagen del juego Simón, uno de nuestros proyectos de interfaz.",
|
||
"Nuestros proyectos de desarrollo de interfaces te darán oportunidad de aplicar las habilidades con interfaces que has desarrollado hasta este momento. Usaremos un editor de código basado en el navegador llamado CodePen.",
|
||
""
|
||
],
|
||
[
|
||
"http://i.imgur.com/WBetuBa.jpg",
|
||
"Un programador frustado golpeando la pantalla de su computador.",
|
||
"Nuestros desafíos sobre algoritmos son difíciles. Algunos pueden requerir muchas horas para resolverse. Podrás frustarte, pero no te rindas.",
|
||
""
|
||
],
|
||
[
|
||
"http://i.imgur.com/p2TpOQd.jpg",
|
||
"Un tierno perro que salta sobre un obstáculo, pica el ojo y te apunta con su pata.",
|
||
"Cuando te atasques, usa la metodología Leer-Buscar-Preguntar. No te preocupes - ya lo has entendido.",
|
||
""
|
||
],
|
||
[
|
||
"http://i.imgur.com/G1saeDt.gif",
|
||
"Un gif que muestra cómo crear una cuenta en Codepen.",
|
||
"Para nuestros desafíos de interfaces, usaremos un editor muy famoso llamado Codepen, el cual es completamente basado en el navegador. Abre CodePen y pulsa en \"Sign up\" en la esquina superior derecha, luego ve hacia abajo donde se encuentra el plan gratuito (free plan) y pulsa en \"Sign up\". Da clic en el botón que dice \"Use info from GitHub\", luego agrega tu dirección de correo electrónico y crea una contraseña. Pulsa el botón que dice \"Sign up\". Luego, en la esquina superior derecha , da clic en \"New pen\".",
|
||
"http://codepen.io/signup/free"
|
||
],
|
||
[
|
||
"http://i.imgur.com/U4y9RJ1.gif",
|
||
"Un gif que muestra que puedes escribir \"hello world\" en el editor, lo cual escribirá \"hello world\" en la ventana de vista previa. También puedes mover las ventanas para cambiar su tamaño, y cambiar su orientación.",
|
||
"En la ventana de HTML, crea un elemento <code>h1</code> con el texto \"Hola mundo\". Puedes arrastrar los bordes de las ventanas para cambiar su tamaño. También puedes pulsar el botón de \"Change View\" para cambiar la orientación de las ventanas.",
|
||
""
|
||
],
|
||
[
|
||
"http://i.imgur.com/G9KFQDL.gif",
|
||
"Un gif que muestra el proceso de agregar Bootstrap a tu proyecto.",
|
||
"Pulsa el engrane en la esquina superior izquierda de la ventana de CSS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige Bootstrap. Ahora dale a tu elemento <code>h1</code> la clase \"text-primary\" para cambiar su color y verificar que Bootstrap está activado.",
|
||
""
|
||
]
|
||
],
|
||
"isRequired": false
|
||
},
|
||
{
|
||
"id": "bd7158d8c442eddfaeb5bd18",
|
||
"title": "Build a Tribute Page",
|
||
"releasedOn": "January 1, 2016",
|
||
"description": [
|
||
"<strong>Objective:</strong> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/FreeCodeCamp/full/wMQrXV' target='_blank'>http://codepen.io/FreeCodeCamp/full/wMQrXV</a>.",
|
||
"<strong>Rule #1:</strong> Don't look at the example project's code. Figure it out for yourself.",
|
||
"<strong>Rule #2:</strong> Fulfill the below <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries you need. Give it your own personal style.",
|
||
"<strong>User Story:</strong> I can view a tribute page with an image and text.",
|
||
"<strong>User Story:</strong> I can click on a link that will take me to an external website with further information on the topic.",
|
||
"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.",
|
||
"You can get feedback on your project from fellow campers by sharing it in our <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Code Review Chatroom</a>. You can also share it on Twitter and your city's Campsite (on Facebook)."
|
||
],
|
||
"challengeSeed": [
|
||
"154927651"
|
||
],
|
||
"tests": [],
|
||
"type": "zipline",
|
||
"challengeType": 3,
|
||
"nameEs": "Construye una página Tributo",
|
||
"descriptionEs": [
|
||
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='http://codepen.io' target='_blank'>CodePen.io</a> que funcionalmente sea similar a esta: <a href='http://codepen.io/FreeCodeCamp/full/wMQrXV' target='_blank'>http://codepen.io/FreeCodeCamp/full/wMQrXV</a>",
|
||
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
|
||
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería que necesites. Dale tu estilo personal.",
|
||
"<span class='text-info'>Historia de usuario:</span> Puedo ver una página tributo con una imagen y un texto.",
|
||
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar un enlace que me llevará a un sitio web externo con mayor información sobre el tema.",
|
||
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
|
||
"Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un link a tu CodePen. ",
|
||
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
||
],
|
||
"isRequired": true
|
||
},
|
||
{
|
||
"id": "bd7158d8c242eddfaeb5bd13",
|
||
"title": "Build a Personal Portfolio Webpage",
|
||
"description": [
|
||
"<strong>Objective:</strong> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/FreeCodeCamp/full/VemmoX/' target='_blank'>http://codepen.io/FreeCodeCamp/full/VemmoX/</a>.",
|
||
"<strong>Rule #1:</strong> Don't look at the example project's code. Figure it out for yourself.",
|
||
"<strong>Rule #2:</strong> Fulfill the below <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries you need. Give it your own personal style.",
|
||
"<strong>User Story:</strong> I can access all of the portfolio webpage's content just by scrolling.",
|
||
"<strong>User Story:</strong> I can click different buttons that will take me to the portfolio creator's different social media pages.",
|
||
"<strong>User Story:</strong> I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)",
|
||
"<strong>User Story:</strong> 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: <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. ",
|
||
"You can get feedback on your project from fellow campers by sharing it in our <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Code Review Chatroom</a>. You can also share it on Twitter and your city's Campsite (on Facebook)."
|
||
],
|
||
"challengeSeed": [
|
||
"133315782"
|
||
],
|
||
"tests": [],
|
||
"type": "zipline",
|
||
"nameRu": "Создайте сайт-портфолио",
|
||
"descriptionRu": [
|
||
"<span class='text-info'>Задание:</span> Создайте <a href='http://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='http://codepen.io/FreeCodeCamp/full/VemmoX/' target='_blank'>http://codepen.io/FreeCodeCamp/full/VemmoX/</a>.",
|
||
"<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
|
||
"<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
|
||
"<span class='text-info'>Правило #3:</span> Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
|
||
"<span class='text-info'>Подсказка:</span> Если вы не хотите создавать портфолио с нуля, можете взять за основу этот простой Bootstrap шаблон: <a href='http://codepen.io/FreeCodeCamp/pen/mJNqQj/' target='_blank'>http://codepen.io/FreeCodeCamp/pen/mJNqQj</a>.",
|
||
"Реализуйте следующие <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>, сделайте также бонусные по желанию:",
|
||
"<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу получить доступ ко всей информации на странице просто прокрутив ее сверху вниз.",
|
||
"<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу нажать на различные кнопки и перейти к социальным страницам владельца портфолио.",
|
||
"<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу увидеть эскизы проектов, которые были созданы владельцем портфолио (используйте временную картинку если у вас пока нету собственных веб-страниц).",
|
||
"<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу перемещаться к различным частям страницы нажимая на соответствующие навигационные кнопки.",
|
||
"Не переживайте если вам пока нечего показать в портфолио - вы создадите несколько веб приложений в следующих заданиях, а затем вернетесь и обновите портфолио.",
|
||
"В сети существует много шаблонов для портфолио, но в этом задании вам необходимо создать собственную уникальную страницу. Использование Bootstrap сделает этот процесс намного проще.",
|
||
"Обратите внимание, что CodePen.io переопределяет функцию Window.open(), поэтому, если вы хотите открывать окна используя jQuery, необходимо будет адресовать невидимые якорные элементы, такие как этот: <code><a target='_blank'&rt;</a></code>.",
|
||
"Если что-то не получается, воспользуйтесь <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a>.",
|
||
"Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
|
||
"Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<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>"
|
||
],
|
||
"nameEs": "Construye una página web para tu portafolio",
|
||
"descriptionEs": [
|
||
"<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='http://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='http://codepen.io/FreeCodeCamp/full/VemmoX/' target='_blank'>http://codepen.io/FreeCodeCamp/full/VemmoX/</a>.",
|
||
"<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
|
||
"<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería que necesites. Dale tu estilo personal.",
|
||
"<span class='text-info'>Historia de usuario:</span> Puedo acceder a todo el contenido de la página del portafolio con sólo desplazarme en la ventana.",
|
||
"<span class='text-info'>Historia de usuario:</span> Puedo pulsar diferentes botones que me llevarán a las páginas de las diferentes cuentas de redes sociales del creador del portafolio.",
|
||
"<span class='text-info'>Historia de usuario:</span> Puedo ver una imagen de los diferentes proyectos que el creador del portafolio ha construido (si no has construido ningún sitio web antes, usa plantillas.)",
|
||
"<span class='text-info'>Historia de usuario opcional:</span> Puedo navegar a las diferentes secciones de la página web pulsando botones de navegación.",
|
||
"No te preocupes si no tienes nada que mostrar en tu portafolio todavía - en los siguientes desafíos crearás varias apps en CodePen, así que puedes regresar luego para actualizar tu portafolio.",
|
||
"Hay varias buenas plantillas, pero para este desafío, tendrás que construir la página web de tu portafolio completamente por tu cuenta. Usar Bootstrap hará el trabajo mucho más fácil para ti.",
|
||
"Ten en mente que CodePen.io ignora la función Window.open(), así que si quieres abrir alguna ventana usando jQuery, necesitarás utilizar como objetivo un elemento de ancla invisible como el siguiente: <code><a target='_blank'></a></code>.",
|
||
"Recuerda utilizar <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
|
||
"Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un link a tu CodePen. ",
|
||
"Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
|
||
],
|
||
"isRequired": true,
|
||
"challengeType": 3
|
||
}
|
||
]
|
||
}
|