Merge pull request #7108 from QuincyLarson/fix/update-github-codepen-onboarding
Fix/update GitHub codepen onboarding
This commit is contained in:
Berkeley Martinez
@ -169,19 +169,19 @@
|
||||
[
|
||||
"http://i.imgur.com/EAR7Lvh.jpg",
|
||||
"A screenshot of our one of our Gitter chat rooms.",
|
||||
"Now let's join Free Code Camp's chat rooms. You can come here any time of day to hang out, ask questions, or find another camper to pair program with. First you'll need a GitHub account.",
|
||||
"Before we start coding, let's join Free Code Camp's chat rooms. You can come here any time of day to hang out, ask questions, or find another camper to pair program with. First you'll need a GitHub account.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"http://i.imgur.com/FEImaEN.gif",
|
||||
"A gif showing you to click the link below to go to GitHub. Fill in the necessary fields and click submit.",
|
||||
"Create an account with GitHub. Be sure to use your real email address - GitHub will keep this private.",
|
||||
"http://i.imgur.com/n6GeSEm.gif",
|
||||
"A gif showing you to click the link below to go to GitHub. Fill in the necessary fields and click submit. Then check your email inbox for an email from GitHub so you can verify your account.",
|
||||
"Click the \"Open link in new tab\" button below to open up GitHub. Create a GitHub account by filling in the form. Be sure to use your real email address - GitHub will keep this private. Then check your email inbox for an email from GitHub. Open it and click the \"verify email address\" button inside it. <br><div class=\"small\">Note: If you already have a GitHub 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>",
|
||||
"https://github.com/join"
|
||||
],
|
||||
[
|
||||
"http://i.imgur.com/ALN6zPK.gif",
|
||||
"http://i.imgur.com/hFqAEr8.gif",
|
||||
"A gif showing you how to click the profile image in the upper right hand corner of GitHub. Upload a photo of yourself or you will continue to use the automatically generated pixel art. Then fill in the remaining form fields and click submit.",
|
||||
"Click the pixel art in the upper right hand corner of GitHub, then choose settings. Upload a picture of yourself. A picture of your face works best. This is how your fellow campers will see you in our chat rooms, so put your best foot forward. You can add your city and your name if you want.",
|
||||
"Click the pixel art in the upper right hand corner of GitHub, then choose settings. Upload a picture of yourself. A picture of your face works best. This is how your fellow campers will see you in our chat rooms, so look your best. You can add your city and your name if you want.",
|
||||
"https://github.com/settings/profile"
|
||||
],
|
||||
[
|
||||
@ -191,9 +191,9 @@
|
||||
"https://github.com/freecodecamp/freecodecamp"
|
||||
],
|
||||
[
|
||||
"http://i.imgur.com/zwYPeQT.gif",
|
||||
"http://i.imgur.com/OmRmLB4.gif",
|
||||
"A gif showing you how to click the link below to go to our chat room and click the \"sign in with GitHub\" button. Then you can click into the text input field and type a message to your fellow campers.",
|
||||
"Now that you have a GitHub account, you can join our main chat room by logging in with GitHub. Introduce yourself by saying \"Hello world!\". Tell your fellow campers how you found Free Code Camp. Also tell us why you want to learn to code.",
|
||||
"Now that you have a GitHub account, you can join our main chat room by logging in with GitHub. Introduce yourself by saying \"Hello world!\" Tell your fellow campers how you found Free Code Camp. Also tell us why you want to learn to code.",
|
||||
"https://gitter.im/FreeCodeCamp/FreeCodeCamp"
|
||||
],
|
||||
[
|
||||
@ -234,13 +234,13 @@
|
||||
""
|
||||
],
|
||||
[
|
||||
"http://i.imgur.com/FEImaEN.gif",
|
||||
"http://i.imgur.com/n6GeSEm.gif",
|
||||
"Una imagen mostrándote como pulsar en el enlace inferior para ir a GitHub, llenar los campos necesarios y enviarlos.",
|
||||
"Crea una cuenta en GitHub. Asegúrate de usar tu dirección de correo real - GitHub mantendrá esto en privado.",
|
||||
"https://github.com/join"
|
||||
],
|
||||
[
|
||||
"http://i.imgur.com/ALN6zPK.gif",
|
||||
"http://i.imgur.com/hFqAEr8.gif",
|
||||
"Un gif mostrándote como pulsar en la imagen de perfil en la esquina superior derecha de GitHub. Sube una foto tuya o continuaras usando la imagen de píxeles generada automáticamente. Entonces llena los campos restantes y haz clic en enviar.",
|
||||
"En la esquina superior derecha pulsa sobre la imagen de píxeles, entonces selecciona configuraciones. Sube una imagen tuya. Una foto de tu cara es mejor. Así es como tus compañeros campistas te verán en nuestras salas de chat, así que toma tu mejor ángulo. Puedes añadir tu ciudad y tu nombre si lo deseas.",
|
||||
"https://github.com/settings/profile"
|
||||
@ -253,9 +253,9 @@
|
||||
"https://github.com/freecodecamp/freecodecamp"
|
||||
],
|
||||
[
|
||||
"http://i.imgur.com/zwYPeQT.gif",
|
||||
"http://i.imgur.com/OmRmLB4.gif",
|
||||
"Un gif mostrándote como pulsar en el enlace inferior para ir a nuestra sala de chat y pulsar en el botón de \"iniciar sesión con GitHub\". Entonces puedes pulsar en el próximo campo de texto y escribir un mensaje a tus compañeros campistas.",
|
||||
"Ahora que tienes una cuenta de GitHub, puedes unirte a nuestro chat principal al iniciar sesión con GitHub. Preséntate diciendo \"Hello world!\". Cuéntales a los tus compañeros campistas como encontraste Free Code Camp. Además cuéntanos porque deseas aprender a programar.",
|
||||
"Ahora que tienes una cuenta de GitHub, puedes unirte a nuestro chat principal al iniciar sesión con GitHub. Preséntate diciendo \"Hello world!\" Cuéntales a los tus compañeros campistas como encontraste Free Code Camp. Además cuéntanos porque deseas aprender a programar.",
|
||||
"https://gitter.im/FreeCodeCamp/FreeCodeCamp"
|
||||
],
|
||||
[
|
||||
|
||||
@ -23,14 +23,14 @@
|
||||
[
|
||||
"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.<br>Don't worry - you've got this.",
|
||||
"When you get stuck, just use the Read-Search-Ask methodology. Don't worry - you've got this.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"http://i.imgur.com/6WLULsC.gif",
|
||||
"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. 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"
|
||||
"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",
|
||||
@ -43,18 +43,6 @@
|
||||
"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: <code>$(document).ready(function(){ $(\"h1\").addClass(\"animated bounce\"); });</code>.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"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.",
|
||||
""
|
||||
]
|
||||
],
|
||||
"challengeSeed": [],
|
||||
@ -78,14 +66,14 @@
|
||||
[
|
||||
"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.<br>No te preocupes - ya lo has entendido.",
|
||||
"Cuando te atasques, usa la metodología Leer-Buscar-Preguntar. No te preocupes - ya lo has entendido.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"http://i.imgur.com/6WLULsC.gif",
|
||||
"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"
|
||||
"http://codepen.io/signup/free"
|
||||
],
|
||||
[
|
||||
"http://i.imgur.com/U4y9RJ1.gif",
|
||||
@ -98,18 +86,6 @@
|
||||
"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.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"http://i.imgur.com/Gi3aig0.gif",
|
||||
"Un gif que muestra el proceso de agregar Animate.css y jQuery 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 Animate.css. Haz clic en el engrane en la esquina superior izquierda de la ventana de JS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige jQuery. Comprobemos que Animate.css y jQuery se cargaron propiamente. En la ventana de JS, agrega el siguiente código para hacer rebotar tu elemento <code>h1</code>: <code>$(document).ready(function(){ $(\"h1\").addClass(\"animated bounce\"); });</code>.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"http://i.imgur.com/Wzt6Y9Y.gif",
|
||||
"Un gif que muestra el proceso de guardar y bifurcar un proyecto.",
|
||||
"Guarda tu proyecto con el botón \"Save\". Luego pulsa el botón de \"Fork\". Esto crea una bifurcación (copia) de tu proyecto con la que puedes experimentar.",
|
||||
""
|
||||
]
|
||||
],
|
||||
"isRequired": false
|
||||
@ -117,6 +93,7 @@
|
||||
{
|
||||
"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.",
|
||||
|
||||
@ -3,31 +3,6 @@
|
||||
"order": 4,
|
||||
"time": "20 minutes",
|
||||
"challenges": [
|
||||
{
|
||||
"id": "560add65cb82ac38a17513c1",
|
||||
"title": "Reference our Wiki",
|
||||
"description": [
|
||||
[
|
||||
"http://i.imgur.com/4GO4zcI.gif",
|
||||
"A gif showing how you can click the \"Wiki\" button in your upper-right corner to access the wiki.",
|
||||
"Click the \"Wiki\" button in your upper right hand corner. <br>Our community has contributed lots of useful information to this searchable wiki.",
|
||||
""
|
||||
]
|
||||
],
|
||||
"challengeSeed": [],
|
||||
"tests": [],
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7,
|
||||
"nameEs": "Referencía nuestra Wiki",
|
||||
"descriptionEs": [
|
||||
[
|
||||
"http://i.imgur.com/4GO4zcI.gif",
|
||||
"Un gif mostrando como puedes pulsar el botón de \"Wiki\" en tu esquina superior derecha para acceder a la wiki.",
|
||||
"Pulsa el botón de \"Wiki\" en tu esquina superior derecha. <br>Nuestra comunidad ha contribuido información bastante útil en esta wiki.",
|
||||
""
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "570add8ccb82ac38a17513c3",
|
||||
"title": "Join our LinkedIn Alumni Network",
|
||||
@ -35,7 +10,7 @@
|
||||
[
|
||||
"http://i.imgur.com/vJyiXzU.gif",
|
||||
"A gif showing how you can click the link below and fill in the necessary fields to add your Free Code Camp studies to your LinkedIn profile.",
|
||||
"LinkedIn recognizes Free Code Camp as a university. You can gain access to our large alumni network by adding Free Code Camp to your LinkedIn profile's education section. <br>Set your graduation date as next year. <br>For \"Degree\", type \"Full Stack Web Development Certification\". <br>For \"Field of study\", type \"Computer Software Engineering\". <br>Then click \"Save Changes\".",
|
||||
"LinkedIn recognizes Free Code Camp as a university. You can gain access to our large alumni network by adding Free Code Camp to your LinkedIn profile's education section. Set your graduation date as next year. For \"Degree\", type \"Full Stack Web Development Certification\". For \"Field of study\", type \"Computer Software Engineering\". Then click \"Save Changes\".",
|
||||
"https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp"
|
||||
]
|
||||
],
|
||||
@ -48,7 +23,7 @@
|
||||
[
|
||||
"http://i.imgur.com/vJyiXzU.gif",
|
||||
"Un gif mostrando como puedes pulsar el enlace que está más adelante y llenar todos los campos necesarios para agregar los estudios de Free Code Camp a tu perfil de LinkedIn",
|
||||
"LinkedIn reconoce a Free Code Camp como una universidad. Puedes obtener acceso a nuestra larga red de alumnos agregando Free Code Camp a la sección de educación de tu LinkedIn. <br>Define tu fecha de graduación para el siguiente año. <br> En el campo \"Grado\", escribe \"Certificación de Desarrollo Web Full Stack\". <br> En \"Campo de estudio\", escribe \"Ingeniería de Software\". <br>Después pulsa \"Guardar Cambios\".",
|
||||
"LinkedIn reconoce a Free Code Camp como una universidad. Puedes obtener acceso a nuestra larga red de alumnos agregando Free Code Camp a la sección de educación de tu LinkedIn. Define tu fecha de graduación para el siguiente año. En el campo \"Grado\", escribe \"Certificación de Desarrollo Web Full Stack\". En \"Campo de estudio\", escribe \"Ingeniería de Software\". Después pulsa \"Guardar Cambios\".",
|
||||
"https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp"
|
||||
]
|
||||
]
|
||||
@ -150,7 +125,7 @@
|
||||
[
|
||||
"http://i.imgur.com/Og1ifsn.gif",
|
||||
"A gif showing how you can commit to a goal for your Free Code Camp studies and pledge a monthly donation to a nonprofit to give you external motivation to reach that goal.",
|
||||
"You can set a goal and pledge to donate to a nonprofit each month until you achieve that goal. <br>This will give you external motivation in your quest to learn to code, as well as an opportunity to help nonprofits right away. <br>Choose your goal, then choose a monthly donation. When you click \"commit\", the nonprofit's donation page will open in a new tab. <br>This is completely optional, and you can change your commitment or stop it at any time.",
|
||||
"You can set a goal and pledge to donate to a nonprofit each month until you achieve that goal. This will give you external motivation in your quest to learn to code, as well as an opportunity to help nonprofits right away. Choose your goal, then choose a monthly donation. When you click \"commit\", the nonprofit's donation page will open in a new tab. This is completely optional, and you can change your commitment or stop it at any time.",
|
||||
"/commit"
|
||||
]
|
||||
],
|
||||
@ -163,7 +138,7 @@
|
||||
[
|
||||
"http://i.imgur.com/Og1ifsn.gif",
|
||||
"Un gif mostrando como te puedes comprometer con una meta para tus estudios de Free Code Camp y prometer una donación mensual a una organización sin fines de lucro para darte motivación externa de alcanzar esa meta.",
|
||||
"Puedes poner una meta y prometer donar mensualmente a una organización sin fines de lucro hasta que alcances tu meta. <br>Esto te dará motivación externa en tu aventura de aprender a programar, así como una oportunidad para ayudar inmediatamente a organizaciones sin fines de lucro. <br>Elige tu meta, después elige tu donativo mensual. Cuando pulses en \"comprometerse\", la página de donación de la organización sin fines de lucro se abrirá en una nueva pestaña. <br>Esto es completamente opcional, y puedes cambiar tu compromiso o detenerlo en cualquier momento.",
|
||||
"Puedes poner una meta y prometer donar mensualmente a una organización sin fines de lucro hasta que alcances tu meta. Esto te dará motivación externa en tu aventura de aprender a programar, así como una oportunidad para ayudar inmediatamente a organizaciones sin fines de lucro. Elige tu meta, después elige tu donativo mensual. Cuando pulses en \"comprometerse\", la página de donación de la organización sin fines de lucro se abrirá en una nueva pestaña. Esto es completamente opcional, y puedes cambiar tu compromiso o detenerlo en cualquier momento.",
|
||||
"/comprometerse"
|
||||
]
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user