greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #7582 from jacobbearden/fix/image-protocol 

fix image protocol
pull/18182/head
Berkeley Martinez 2016-03-16 21:23:16 -07:00
parent 67999239ca 020632962b
commit 972711653f
11 changed files with 214 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
challenges/00-getting-started/getting-started.json
View File

@ -9,73 +9,73 @@
"title": "Learn how Free Code Camp Works",
"description": [
[
"http://i.imgur.com/6ibIavQ.jpg",
"//i.imgur.com/6ibIavQ.jpg",
"A picture of Free Code Camp's 4 benefits: Get connected, Learn JavaScript, Build your Portfolio, Help nonprofits",
"Welcome to Free Code Camp. We're an open source community of busy people who learn to code and help nonprofits.",
""
],
[
"http://i.imgur.com/Elb3dfj.jpg",
"//i.imgur.com/Elb3dfj.jpg",
"A screenshot of some of our campers coding together in Toronto.",
"<bold>Learning to code is hard.</bold> To succeed, you'll need lots of practice and support. That's why we've created a rigorous curriculum and supportive community.",
""
],
[
"http://i.imgur.com/D7Y5luw.jpg",
"//i.imgur.com/D7Y5luw.jpg",
"A graph of the rate of job growth against growth in computer science degree graduates. There are 1.4 million jobs and only 400 thousand people to fill them.",
"There are thousands of coding jobs currently going unfilled, and the demand for coders grows every year.",
""
],
[
"http://i.imgur.com/WD3STY6.jpg",
"//i.imgur.com/WD3STY6.jpg",
"Photos of three campers who've gotten jobs after learning to code at Free Code Camp.",
"Free Code Camp is a proven path to your first coding job. In fact, no one has actually completed our entire program, because campers get jobs before they're able to.",
""
],
[
"http://i.imgur.com/vLNso6h.jpg",
"//i.imgur.com/vLNso6h.jpg",
"An illustration showing that you will learn HTML5, CSS3, JavaScript, Databases, Git, Node.js, React and D3.",
"We have hundreds of optional coding challenges that will teach you fundamental web development technologies like HTML5, Node.js and databases.",
""
],
[
"http://i.imgur.com/UVB9hxp.jpg",
"//i.imgur.com/UVB9hxp.jpg",
"An image of a camper at a cafe building projects on Free Code Camp.",
"We believe humans learn best by doing. So you'll spend most of your time actually building projects. We'll give you a list of specifications (agile user stories), and you'll figure out how to build apps that fulfill those specifications.",
""
],
[
"http://i.imgur.com/pbW7K5S.jpg",
"//i.imgur.com/pbW7K5S.jpg",
"An image of showing our front end, back end, and data visualization certifications (400 hours each), our nonprofit projects (800 hours), and interview prep (80 hours) for a total of 2,080 hours of coding experience.",
"Our curriculum is divided into 4 certifications. These certifications are standardized, and instantly verifiable by your freelance clients and future employers. Like everything else at Free Code Camp, these certifications are free. We recommend doing them in order, but you are free to jump around. The first three certifications take 400 hours each, and the final certification takes 800 hours, and involves building real-life projects for nonprofits.",
""
],
[
"http://i.imgur.com/k8btNUB.jpg",
"//i.imgur.com/k8btNUB.jpg",
"A screenshot of our Front End Development Certificate",
"To earn our verified Front End Development Certification, you'll build 10 projects using HTML, CSS, jQuery, and JavaScript.",
""
],
[
"http://i.imgur.com/Et3iD74.jpg",
"//i.imgur.com/Et3iD74.jpg",
"A screenshot of our Data Visualization Certificate",
"To earn our Data Visualization Certification, you'll build 10 projects using React, Sass and D3.js.",
""
],
[
"http://i.imgur.com/8v3t84p.jpg",
"//i.imgur.com/8v3t84p.jpg",
"A screenshot of our Back End Development Certificate",
"To earn our Back End Development Certification, you'll build 10 projects using Node.js, Express, and MongoDB. You'll use Git and Heroku to deploy them to the cloud.",
""
],
[
"http://i.imgur.com/yXyxbDd.jpg",
"//i.imgur.com/yXyxbDd.jpg",
"A screen shot of our nonprofit project directory.",
"After you complete all three of these certificates, you'll team up with another camper and use agile software development methodologies to build two real-life projects for nonprofits. You'll also add functionality to two legacy code nonprofit projects. By the time you finish, you'll have a portfolio of real apps that people use every day.",
""
],
[
"http://i.imgur.com/PDGQ9ZM.jpg",
"//i.imgur.com/PDGQ9ZM.jpg",
"An image of campers building projects together in a cafe in Seoul.",
"If you complete all 2,080 hours worth of challenges and projects, you'll earn our Full Stack Development Certification. We'll offer you free coding interview practice. We even offer a job board where employers specifically hire campers who've earned Free Code Camp certifications.",
""
@ -88,73 +88,73 @@
"titleFr": "Apprenez comment FreeCodeCamp fonctionne",
"descriptionFr": [
[
"http://i.imgur.com/6ibIavQ.jpg",
"//i.imgur.com/6ibIavQ.jpg",
"Une idée des avantages de Free Code Camp: restez connecté , apprenez le JavaScript , construisez votre portfolio , Aidez les organismes sans but lucratif",
"Bienvenue sur Free Code Camp . Nous sommes une communauté opensource de gens passionnés qui apprend à coder et aide les organisations à but non lucratif.",
""
],
[
"http://i.imgur.com/Elb3dfj.jpg",
"//i.imgur.com/Elb3dfj.jpg",
"Une capture d'écran de certains de nos développeurs réunis à Toronto.",
"<bold>Apprendre à code est dur.</bold> Pour réussir, vous aurez besoin de beaucoup de pratique et de soutien. Voilà pourquoi nous avons créé un programme rigoureux et une communauté de soutien.",
""
],
[
"http://i.imgur.com/D7Y5luw.jpg",
"//i.imgur.com/D7Y5luw.jpg",
"Un graphique de la vitesse de croissance de l'emploi face à la croissance du nombre de diplômés en études d'informatique . Il y a 1,4 million d'emplois et seulement 400 000 personnes pour les occuper.",
"Il y a des milliers d'emplois de développeurs actuellement vacants, et la demande pour les développeurs augmente chaque année.",
""
],
[
"http://i.imgur.com/WD3STY6.jpg",
"//i.imgur.com/WD3STY6.jpg",
"Photos de trois développeurs qui ont obtenu un emploi après l'apprentissage de code au Free Code Camp.",
"Free Code Camp est une voie éprouvée pour obtenir votre premier job de développeur. En fait , personne n'a jamais accompli l'ensemble de notre programme , car nos développeurs ont trouvé un emploi avant qu'ils ne soient en mesure de le finir notre parcours.",
""
],
[
"http://i.imgur.com/vLNso6h.jpg",
"//i.imgur.com/vLNso6h.jpg",
"Une illustration montrant que vous allez apprendre HTML5 , CSS3 , JavaScript , bases de données , Git , Node.js , React et D3.",
"Nous avons des centaines de défis de codage optionnels qui vous apprendront les fondamentaux du développement web comme HTML5 , Node.js et les bases de données.",
""
],
[
"http://i.imgur.com/UVB9hxp.jpg",
"//i.imgur.com/UVB9hxp.jpg",
"Une image d'un développeur dans un café projets sur Camp Code Free.",
"Nous croyons que les êtres humains apprennent mieux par la pratique . De sorte que vous passerez la plupart de votre temps à construire efficacement des projets. Nous allons vous donner une liste de spécifications ( des témoignages d'utilisateurs agiles ) , et vous allez comprendre comment construire des applications qui répondent à ces spécifications.",
""
],
[
"http://i.imgur.com/pbW7K5S.jpg",
"//i.imgur.com/pbW7K5S.jpg",
"Une image pour montrer notre front-end, back end, et data visualisation certificat ( 400 heures chacun) , nos projets à but non lucratif (800 heures) , et l'interview de préparation ( 80 heures ) pour un total de 2080 heures d'expérience de codage.",
"Notre programme est divisé en 4 certifications . Ces certifications sont standardisés , et immédiatement vérifiable par vos clients indépendants et les futurs employeurs . Comme tout le reste au Code Camp gratuit, ces certifications sont gratuits. Nous vous recommandons de les faire dans l'ordre, mais vous êtes libre d'en sauter . Les trois premièrs certifications prennent 400 heures chacune , et la certification finale prend 800 heures , et implique la construction de projets concrets pour les organisations caritatives.",
""
],
[
"http://i.imgur.com/k8btNUB.jpg",
"//i.imgur.com/k8btNUB.jpg",
"Une capture d'écran de notre certificat développeur Front-End",
"Pour réussir notre certificat Front-End vérifié, vous allez construire 10 projets utilisant HTML , CSS , jQuery et JavaScript.",
""
],
[
"http://i.imgur.com/Et3iD74.jpg",
"//i.imgur.com/Et3iD74.jpg",
"Une capture d'écran de notre certificat de visualisation de données",
"Pour gagner notre certification de visualisation de données , vous allez construire 10 projets utilisant Réagir, Sass et D3.js.",
""
],
[
"http://i.imgur.com/8v3t84p.jpg",
"//i.imgur.com/8v3t84p.jpg",
"Une capture d'écran de notre certificat Back-End",
"Pour gagner notre certification de développeur Back-End, vous allez construire 10 projets utilisant Node.js , Express, et MongoDB . Vous allez utiliser Git et Heroku de les déployer dans le cloud.",
""
],
[
"http://i.imgur.com/yXyxbDd.jpg",
"//i.imgur.com/yXyxbDd.jpg",
"Une capture d'écran de notre répertoire de projet à but non lucratif.",
"Après avoir effectué tous les trois de ces certificats , vous faites équipe avec un autre développeur et utilisez agiles méthodologies de développement de logiciel pour construire deux projets de la vie réelle pour les organismes sans but lucratif . Vous aurez également d'ajouter des fonctionnalités à deux projets à but non lucratif de code hérité. Au moment où vous avez terminé, vous aurez un portefeuille de véritables applications que les gens utilisent tous les jours.",
""
],
[
"http://i.imgur.com/PDGQ9ZM.jpg",
"//i.imgur.com/PDGQ9ZM.jpg",
"Une image de campeurs construction des projets ensemble dans un café de Séoul ",
"Si vous finissez les 2.080 heures de défis et projets, vous gagnerez notre certification complète Stack développement . Nous vous offrons gratuitement la pratique d'entrevue de codage . Nous offrons même un accès à notre si d'emploi où les employeurs embauchent spécifiquement les développeurs qui ont obtenu des certificats de Free Code Camp.",
""
@ -163,73 +163,73 @@
"titleEs": "Aprende como funciona Free Code Camp",
"descriptionEs": [
[
"http://i.imgur.com/6ibIavQ.jpg",
"//i.imgur.com/6ibIavQ.jpg",
"Una imagen de los 4 beneficios de Free Code Camp: Conéctate, Aprende JavaScript, Construye tu Portafolio, Ayuda organizaciones sin ánimo de lucro",
"Bienvenido a Free Code Camp. Somos una comunidad de código abierto formada por personas ocupadas quienes aprenden a programar y ayudan a organizaciones sin ánimo de lucro.",
""
],
[
"http://i.imgur.com/Elb3dfj.jpg",
"//i.imgur.com/Elb3dfj.jpg",
"Una imagen de algunos de nuestros campistas programando juntos en Toronto.",
"<bold>Aprender a programar es difícil.</bold> Para tener éxito, necesitarás mucha práctica y apoyo. Por eso es que hemos creado un riguroso currículo y una comunidad de apoyo.",
""
],
[
"http://i.imgur.com/D7Y5luw.jpg",
"//i.imgur.com/D7Y5luw.jpg",
"Una gráfica del crecimiento de trabajos en comparación con los graduados en un pregrado de ciencias de la computación. Hay 1.4 millones de empleos y solo 400 mil personas para ocuparlos.",
"Actualmente, hay miles de trabajos de programación sin ocupar, y la demanda de programadores crece cada año.",
""
],
[
"http://i.imgur.com/WD3STY6.jpg",
"//i.imgur.com/WD3STY6.jpg",
"Fotos de tres campistas quienes obtuvieron trabajos después de aprender a programar en Free Code Camp.",
"Free Code Camp es un camino probado para que obtengas tu primer trabajo de programación. De hecho, nadie actualmente ha completado nuestro programa entero, porque los campistas obtienen trabajos antes de poder hacerlo.",
""
],
[
"http://i.imgur.com/vLNso6h.jpg",
"//i.imgur.com/vLNso6h.jpg",
"Una ilustración mostrando que aprenderás HTML5, CSS3, JavaScript, Bases de Datos, Git, Node.js, react y D3.",
"Tenemos cientos de desafíos de programación opcionales que te enseñarán las tecnologías fundamentales para el desarrollo web como HTML5, Node.js y bases de datos.",
""
],
[
"http://i.imgur.com/UVB9hxp.jpg",
"//i.imgur.com/UVB9hxp.jpg",
"Una foto de un campista en un café construyendo proyectos con Free Code Camp.",
"Creemos que los humanos aprender mejor haciendo. Así que en realidad emplearás la mayoría de tu tiempo construyendo proyectos. Te daremos una lista de especificaciones (historias de usuario ágiles), y te las ingeniarás para construir aplicaciones que cumplan esas especificaciones.",
""
],
[
"http://i.imgur.com/pbW7K5S.jpgk",
"//i.imgur.com/pbW7K5S.jpgk",
"Una imagen de los tiempos de nuestras certificaciones para desarrollo de interfaces, desarrollo al lado del servidor y visualización de datos (400 horas cada uno), para nuestros proyectos sin ánimo de lucro (800 horas) y preparación para entrevistas (80 horas) que dan un total de 2,080 horas e experiencia programando.",
"Nuestro currículo se divide en 4 certificaciones. Estas certificaciones están estandarizadas, y son verificables al instante por sus clientes como trabajador independiente y por sus futuros empleadores. Tal como todo lo demás en Free Code Camp, estas certificaciones son gratuitas. Recomendamos hacerlas en orden, pero usted es libre de saltar de una a otra. Las primeras tres certificaciones requieren 400 horas cada una, y la certificación final requiere 800 horas, e involucra construir proyectos de la vida real para organizaciones sin ánimo de lucro.",
""
],
[
"http://i.imgur.com/k8btNUB.jpg",
"//i.imgur.com/k8btNUB.jpg",
"Una imagen de nuestro Certificado de Desarrollo de Interfaces",
"Para obtener nuestra certificación verificada de Desarrollo de Interfaces, construirás 10 proyectos usando HTML, CSS, jQuery y JavaScript.",
""
],
[
"http://i.imgur.com/Et3iD74.jpg",
"//i.imgur.com/Et3iD74.jpg",
"Una imagen de nuestro Certificado de Visualización de Datos",
"Para obtener nuestra certificación en Visualización de Datos, construirás 10 proyectos usando React, Sass y D3.js.",
""
],
[
"http://i.imgur.com/8v3t84p.jpg",
"//i.imgur.com/8v3t84p.jpg",
"Una imagen de nuestro Certificado de Desarrollo al Lado del Servidor",
"Para obtener nuestro Certificado de Desarrollo al Lado del Servidor, construirás 10 proyectos empleando Node.js, Express y MongoDB. Usarás Git y Heroku para desplegarlos en la nube.",
""
],
[
"http://i.imgur.com/yXyxbDd.jpg",
"//i.imgur.com/yXyxbDd.jpg",
"Una imagen de nuestro directorio de organizaciones sin ánimo de lucro.",
"Después de completar todos los tres certificados, harás equipo con otro campista y usarás metodologías de desarrollo ágil para construir dos proyectos de la vida real para organizaciones sin ánimo de lucro. También añadirás funcionalidad a dos proyectos de fuentes legadas de organizaciones sin ánimo de lucro. Cuando termines esto, tendrás un portafolio de aplicaciones reales que la gente usa a diario. ",
""
],
[
"http://i.imgur.com/PDGQ9ZM.jpg",
"//i.imgur.com/PDGQ9ZM.jpg",
"Una imagen de nuestros campistas construyendo proyectos juntos en un café en Seoul.",
"Si completas todas las 2,080 horas de desafíos y proyectos, obtendrás un Certificado de Desarrollo de Pila Completa. Te ofreceremos gratuitamente una práctica en entrevistas para desarrolladores. Incluso ofrecemos un directorio de trabajos donde los empleadores contratan específicamente campistas que han recibido certificaciones de Free Code Camp.",
""
@ -240,55 +240,55 @@
"id": "560add37cb82ac38a17513bf",
"descriptionJa": [
[
"http://i.imgur.com/EAR7Lvh.jpg",
"//i.imgur.com/EAR7Lvh.jpg",
"Gitterチャットルームの一場面です。",
"コーディングを始める前に、Free Code Camp のチャットルームに参加してください。いつでも、雑談や質問ができたりペアプログラミングをするための仲間を見つけ流ことができます。最初に Github アカウントが必要です。",
""
],
[
"http://i.imgur.com/n6GeSEm.gif",
"//i.imgur.com/n6GeSEm.gif",
"この gif は Github を開始するまでの流れを表しています。必要な欄に情報を入れて登録をしてください。そして Github からあなたのメールアドレス宛にメールが届きますのでアカウントを承認してください。",
"\"Open link in new tab\"をクリックして Github を開いてください。 必要な欄に情報を入力して GitHub アカウントを作ってください。実際に使われている email アドレスかを確認してください( GitHub にはこの情報が保存されます )。メールアドレス宛に GitHub からメールが来たことを確認してください。 メールにある\"verify email address\"をクリックして開いてください。<br><div class=\"small\">注意： もしすでに GitHub アカウントを持っていたら、あなたは \"Open link in new tab\" をクリックすることでこのステップを飛ばすことができます、新しく開かれたタブを閉じて \"go to my next step\" をクリックしてください。私たちはこの大事なステップが飛ばされてしまうのを防ぐために \"このステップを飛ばす\" ボタンは削除してあります。</div>",
"https://github.com/join"
],
[
"http://i.imgur.com/hFqAEr8.gif",
"//i.imgur.com/hFqAEr8.gif",
"この gif は Github の右上にあるプロフィール画像をクリックする方法です。あなたの写真をアップロードするか、自動で生成されるピクセルアートを利用してください。そして、残りの欄に情報を入力し submit ボタンを押してください。",
"GitHub の右上に表示されているピクセルアートをクリックしてください、そして settings を選んでください。あなたの画像をアップロードしてください。画像はあなたの顔が写っていると良いです。他のキャンパーズの仲間たちがチャットルームであなたを見かけるようになります。住んでいる場所や名前を登録することもできます",
"https://github.com/settings/profile"
],
[
"http://i.imgur.com/pYk0wOk.gif",
"//i.imgur.com/pYk0wOk.gif",
"この gif は GitHub のレポジトリへのスターをつける方法です。",
"オープンソースの Free Code Camp のレポジトリを開いてください。これは私たちボランティアチームの協力者が Free Code Camp で作っているものです。あなたは \"star\" を私たちのリポジトリに付けることができます。\"star を付けること\"は GitHub での \"いいね\" と一緒です。",
"https://github.com/freecodecamp/freecodecamp"
],
[
"http://i.imgur.com/OmRmLB4.gif",
"//i.imgur.com/OmRmLB4.gif",
"この git は私たちのチャットルームへのリンクをクリックして、\"sign in with GitHub\" ボタンをクリックしています。そして、テキストを入力してキャンパーズの仲間へメッセージを送る方法を表しています。",
"あなたは Github のアカウントを持っているので、私たちのチャットルームへ GitHub を利用してログインできます。\"Hellow world!\" と言って自己紹介をし、あなたがどうやって Free Code Camp を見つけたかや何故プログラミングを学びたいのかを私たちに話してください。",
"https://gitter.im/FreeCodeCamp/FreeCodeCamp"
],
[
"http://i.imgur.com/Ecs5XAd.gif",
"//i.imgur.com/Ecs5XAd.gif",
"この gif は右上の settings ボタンを押すことで、通知の設定を変更する方法を表しています。",
"私たちのチャットルームはとても活発です。あなたは誰かがあなたに対してメンションを送った時にだけ通知してもらうように設定を変更した方が良いでしょう。",
""
],
[
"http://i.imgur.com/T0bGJPe.gif",
"//i.imgur.com/T0bGJPe.gif",
"この gif はどうやって該当するユーザに向けて個人的なメーッセージを送れるようにするかを表しています。",
"私たちのチャットルームは全て公開されているので、もしあなたが個人的な情報(メールアドレスや電話番号)を共有したい場合には、プライベートメッセージを利用してください。",
""
],
[
"http://i.imgur.com/vDTMJSh.gif",
"//i.imgur.com/vDTMJSh.gif",
"この gif はチャレンジとチャットルームへの行き来がタブを戻すことでできることを表しています。",
"私たちのチャレンジを通して作業をしている間はチャットルームを開いておくと良いでしょう。そうすることで、必要な時に助けを求めることができます。あなたは休憩をしているかのように他のキャンパーズと関わりを持てるでしょう。",
""
],
[
"http://i.imgur.com/WvQvNGN.gif",
"//i.imgur.com/WvQvNGN.gif",
"この gif は、チャットルームアプリをあなたのコンピュータに直接インストールするためにダウンロードする方法を表しています。",
"チャットルームのアプリをスマホや自分のパソコンにダウンロードして使うことができます。",
"https://gitter.im/apps"
@ -297,55 +297,55 @@
"title": "Create a GitHub Account and Join our Chat Rooms",
"description": [
[
"http://i.imgur.com/EAR7Lvh.jpg",
"//i.imgur.com/EAR7Lvh.jpg",
"A screenshot of our one of our Gitter chat rooms.",
"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/n6GeSEm.gif",
"//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/hFqAEr8.gif",
"//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 look your best. You can add your city and your name if you want.",
"https://github.com/settings/profile"
],
[
"http://i.imgur.com/pYk0wOk.gif",
"//i.imgur.com/pYk0wOk.gif",
"A gif showing how you can star a GitHub repo.",
"Open Free Code Camp's open-source repository. This is where our volunteer team collaborates on building Free Code Camp. You can \"star\" our repository. \"Starring\" is the GitHub equivalent of \"liking\" something.",
"https://github.com/freecodecamp/freecodecamp"
],
[
"http://i.imgur.com/OmRmLB4.gif",
"//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.",
"https://gitter.im/FreeCodeCamp/FreeCodeCamp"
],
[
"http://i.imgur.com/Ecs5XAd.gif",
"//i.imgur.com/Ecs5XAd.gif",
"A gif showing you how you can click the settings button in the upper right hand corner and modify your notification settings.",
"Our chat rooms are extremely active. You should change your settings so you're only notified if someone mentions you.",
""
],
[
"http://i.imgur.com/T0bGJPe.gif",
"//i.imgur.com/T0bGJPe.gif",
"A gif showing how you can click on a user profile image to initiate a private message with that user.",
"Please note that all of our chat rooms are visible to the public. If you need to share sensitive information, such as an email address or phone number, do it in a private message.",
""
],
[
"http://i.imgur.com/vDTMJSh.gif",
"//i.imgur.com/vDTMJSh.gif",
"A gif showing that you can tab back and forth between challenges and our chat rooms.",
"Keep our chat room open while you work through our challenges. That way, you can ask for help if you get stuck. You can also socialize with other campers when you feel like taking a break.",
""
],
[
"http://i.imgur.com/WvQvNGN.gif",
"//i.imgur.com/WvQvNGN.gif",
"A gif showing how you can click the link below to download a native chat room app for your computer.",
"You can also download the chat room app to your computer or phone.",
"https://gitter.im/apps"
@ -357,55 +357,55 @@
"titleFr": "Créer un compte GitHub et rejoignez nos Salons de chat",
"descriptionFr": [
[
"http://i.imgur.com/EAR7Lvh.jpg",
"//i.imgur.com/EAR7Lvh.jpg",
"Une capture d'écran de notre l'un de nos Gitter salles de chat.",
"Avant de commencer à coder, nous allons rejoindre les salles de chat de Camp Code Free . Vous pouvez venir ici tout moment de la journée pour se détendre , poser des questions , ou trouver un autre camping de jumeler programme avec. D'abord, vous aurez besoin d'un compte GitHub.",
""
],
[
"http://i.imgur.com/n6GeSEm.gif",
"//i.imgur.com/n6GeSEm.gif",
"Un gif vous montrant à cliquer sur le lien ci-dessous pour aller à GitHub . Remplissez les champs nécessaires et cliquez sur soumettre . Ensuite, vérifiez votre boîte de réception pour un courriel de GitHub sorte que vous pouvez vérifier votre compte.",
"Cliquez sur le \"lien Ouvrir dans une nouvelle touche de tabulation\" ci-dessous pour ouvrir GitHub. Créer un compte GitHub en remplissant le formulaire . Assurez-vous d'utiliser votre adresse email réelle - GitHub gardera cette privé. Ensuite, vérifiez votre boîte de réception pour un courriel de GitHub. Ouvrez-le et cliquez sur \"l'adresse email sur vérifier\" l'intérieur. <br><div class=\"small\">Remarque: Si vous avez déjà un compte GitHub , vous pouvez sauter cette étape en cliquant sur \"Ouvrir le lien dans un nouvel onglet\", fermeture le nouvel onglet qui ouvre, puis en cliquant \"aller à ma prochaine étape\". Nous avons retiré notre bouton de \"l'étape de saut\" , car beaucoup de gens il suffit de cliquer à plusieurs reprises sans faire ces étapes importantes.</div>",
"https://github.com/join"
],
[
"http://i.imgur.com/hFqAEr8.gif",
"//i.imgur.com/hFqAEr8.gif",
"Un gif vous montrant comment cliquez sur l' image de profil dans le coin supérieur droit de GitHub. Télécharger une photo de vous-même ou vous allez continuer à utiliser l'art de pixel généré automatiquement . Ensuite, remplissez les champs du formulaire restants et cliquez sur soumettre.",
"Cliquez sur le pixel art dans le coin supérieur droit de GitHub , puis choisissez les paramètres . Télécharger une photo de vous-même. Une photo de votre visage qui fonctionne le mieux . Voici comment les autres campeurs vous voir dans nos salles de chat , donc regarder votre meilleur . Vous pouvez ajouter votre ville et votre nom si vous voulez.",
"https://github.com/settings/profile"
],
[
"http://i.imgur.com/pYk0wOk.gif",
"//i.imgur.com/pYk0wOk.gif",
"Un gif montrant comment vous pouvez activer un repo GitHub.",
"Ouvrez open-source du dépôt central de Camp Code Free . Ceci est où notre équipe de bénévoles collabore à la construction de Camp Code Free. Vous pouvez \"star\" notre référentiel. Mettant en \"vedette\" est la GitHub équivalent de \"goût\" quelque chose.",
"https://github.com/freecodecamp/freecodecamp"
],
[
"http://i.imgur.com/OmRmLB4.gif",
"//i.imgur.com/OmRmLB4.gif",
"Un gif vous montrant comment Cliquez sur le lien ci-dessous pour accéder à notre salle de chat et cliquez sur \"Se connecter avec\" bouton GitHub. Puis vous pouvez cliquer dans le champ de saisie de texte et saisissez un message à vos amis campeurs.",
"Maintenant que vous avez une GitHub compte, vous pouvez vous joindre à notre principale salle de chat en vous connectant à GitHub. Présentez-vous en disant \"Hello World!\" avertissez votre amis campeurs comment vous avez trouvé Libre Code Camp. Aussi nous dire pourquoi vous voulez apprendre à code.",
"https://gitter.im/FreeCodeCamp/FreeCodeCamp"
],
[
"http://i.imgur.com/Ecs5XAd.gif",
"//i.imgur.com/Ecs5XAd.gif",
"Un gif vous montrant comment vous pouvez cliquez sur le bouton Réglages dans le coin supérieur droit et modifier vos paramètres de notification.",
"Nos salles de chat sont extrêmement actifs. Vous devez modifier vos paramètres pour vous're notifié que si quelqu'un vous mentionne.",
""
],
[
"http://i.imgur.com/T0bGJPe.gif",
"//i.imgur.com/T0bGJPe.gif",
"Un gif montrant comment vous pouvez cliquer sur une image de profil utilisateur pour lancer un message privé avec cet utilisateur.",
"Veuillez noter que tous nos salons de chat sont visibles pour le public. Si vous avez besoin de partager des informations sensibles, comme un numéro de téléphone ou l'adresse e-mail, faites-le dans un message privé.",
""
],
[
"http://i.imgur.com/vDTMJSh.gif",
"//i.imgur.com/vDTMJSh.gif",
"Un gif montrant que vous pouvez Tab et retour entre défis et nos salles de chat.",
"Garder notre salle de discussion ouverte pendant que vous travaillez à travers nos défis. De cette façon, vous pouvez demander de l'aide si vous êtes coincé. Vous pouvez également socialiser avec d'autres campeurs lorsque vous sentez comme prendre une pause.",
""
],
[
"http://i.imgur.com/WvQvNGN.gif",
"//i.imgur.com/WvQvNGN.gif",
"Un gif montrant comment vous pouvez cliquer sur le lien ci-dessous pour télécharger un natif salle de chat app pour votre ordinateur.",
"Vous pouvez également télécharger la salle de chat app pour votre ordinateur ou votre téléphone.",
"https://gitter.im/apps"
@ -414,56 +414,56 @@
"titleEs": "Crea una Cuenta de GitHub y Únete a nuestras Salas de Chat",
"descriptionEs": [
[
"http://i.imgur.com/EAR7Lvh.jpg",
"//i.imgur.com/EAR7Lvh.jpg",
"Una imagen de una de nuestras salas de chat en Gitter.",
"Ahora únete a las salas de chat de Free Code Camp. Puedes venir aquí en cualquier momento para charlar, hacer preguntas, o encontrar otro campista para programar juntos. Primero necesitarás una cuenta de GitHub.",
""
],
[
"http://i.imgur.com/n6GeSEm.gif",
"//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/hFqAEr8.gif",
"//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"
],
[
"http://i.imgur.com/pYk0wOk.gif",
"//i.imgur.com/pYk0wOk.gif",
"Un gif mostrándote como puedes dar una estrella a un repositorio de GitHub.",
"Ve al repositorio de código libre de Free Code Camp y dale una \"estrella\". Las \"estrellas\" son el equivalente en GitHub de los \"me gusta\".",
"Si quieres, ve al repositorio de código libre de Free Code Camp y dale una \"estrella\". Las \"estrellas\" son el equivalente en GitHub de los \"me gusta\".",
"https://github.com/freecodecamp/freecodecamp"
],
[
"http://i.imgur.com/OmRmLB4.gif",
"//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.",
"https://gitter.im/FreeCodeCamp/FreeCodeCamp"
],
[
"http://i.imgur.com/Ecs5XAd.gif",
"//i.imgur.com/Ecs5XAd.gif",
"Un gif mostrándote como puedes pulsar en el botón de configuraciones en la esquina superior derecha y modificar tus configuraciones de notificaciones.",
"Nuestras salas de chat son extremadamente activas. Deberías cambiar tus configuraciones para ser notificado únicamente si alguien te menciona.",
""
],
[
"http://i.imgur.com/T0bGJPe.gif",
"//i.imgur.com/T0bGJPe.gif",
"Un gif mostrándote como puedes pulsar en la imagen de perfil de un usuario para iniciar una conversación privada con ese usuario.",
"Por favor nota que todas nuestras salas de chat son visibles para el público. Si necesitas compartir información privada, como una dirección de correo o un número de teléfono, hazlo en un mensaje privado.",
""
],
[
"http://i.imgur.com/vDTMJSh.gif",
"//i.imgur.com/vDTMJSh.gif",
"Un gif mostrándote que puedes cambiar entre desafíos y nuestras salas de chat.",
"Mantén nuestra sala de chat abierta mientras trabajas en nuestros desafíos. De esta manera, puedes pedir ayuda si quedas atascado. Además puedes socializar con otros campistas cuando quieras tomar un descanso.",
""
],
[
"http://i.imgur.com/WvQvNGN.gif",
"//i.imgur.com/WvQvNGN.gif",
"Un gif mostrándote como puedes pulsar abajo para descargar una aplicación de chat nativa para tu computadora.",
"También puedes descargar la aplicación de chat para tu computadora o teléfono móvil.",
"https://gitter.im/apps"
@ -477,7 +477,7 @@
"title": "Configure your Code Portfolio",
"description": [
[
"http://i.imgur.com/tP2ccTE.gif",
"//i.imgur.com/tP2ccTE.gif",
"A gif showing how you can click your profile image in your upper right hand corner to your code portfolio and connect GitHub.",
"Check out your code portfolio. Click your picture in your upper right hand corner. To activate your code portfolio, you'll need to link your GitHub account with Free Code Camp. Your code portfolio shows your progress and how many Brownie Points you have. You can get Brownie Points by completing challenges and by helping other campers in our chat rooms. If you get Brownie Points on several days in a row, you'll get a streak.",
""
@ -490,7 +490,7 @@
"titleEs": "Configura tu portafolio de código",
"descriptionEs": [
[
"http://i.imgur.com/tP2ccTE.gif",
"//i.imgur.com/tP2ccTE.gif",
"Un gif mostrándote como puedes pulsar en tu imagen de perfil en la esquina superior derecha conectar tu portafolio y GitHub.",
"Dale un vistazo de tu portafolio de código. Pulsa en tu imagen en la esquina superior derecha. Para activar tu portafolio de código, necesitaras conectar tu cuenta de GitHub con Free Code Camp. Tu portafolio de código muestra tu progreso y cuantos Puntos Cafés tienes. Puedes obtener Puntos Cafés completando desafíos y ayudando a otros campistas en nuestras salas de chat. Si obtienes Puntos Cafés varios días consecutivos, obtendrás una racha.",
""
@ -502,13 +502,13 @@
"title": "Join a Campsite in Your City",
"description": [
[
"http://i.imgur.com/XugIMb4.jpg",
"//i.imgur.com/XugIMb4.jpg",
"A picture of some of our campers meeting in a local cafe.",
"Our Campsites are Facebook groups that help you meet other campers in your city. You can use these groups to plan and attend casual \"coffee-and-code\" events, where you meet other campers at a café and code together.",
""
],
[
"http://i.imgur.com/fTFMjwf.gif",
"//i.imgur.com/fTFMjwf.gif",
"A gif showing how you can click the link below, find your city on the list of Campsites, then click on the Facebook link for your city and join your city's Facebook group.",
"Find your city on this list and click it. This will take you to your city's Campsite's Facebook group. Click the \"Join group\" button to apply to join your city's Facebook group. Someone from the campsite should approve you shortly. If your city isn't on this list, scroll to the bottom of the wiki article for instructions for how you can create your city's Campsite.",
"https://github.com/FreeCodeCamp/freecodecamp/wiki/List-of-Free-Code-Camp-city-based-Campsites"
@ -521,7 +521,7 @@
"titleFr": "Configurer votre code portefeuille",
"descriptionFr": [
[
"http://i.imgur.com/tP2ccTE.gif",
"//i.imgur.com/tP2ccTE.gif",
"Un gif montrant comment vous pouvez cliquez sur l'image de votre profil dans votre coin supérieur droit à votre code portefeuille et connectez GitHub.",
"Vérifiez votre code portefeuille. Cliquez sur votre photo dans votre coin supérieur droit. Pour activer votre code portefeuille, vous'll nécessité de lier votre compte avec code sans GitHub Camp. Votre code portefeuille affiche votre progression et combien de bons points vous avez. Vous pouvez obtenir de bons points par remplir les défis et en aidant d'autres campeurs dans nos salles de chat. Si vous obtenez Brownie Points sur plusieurs jours d'affilée, vous'll obtenez une rayure.",
""
@ -530,13 +530,13 @@
"titleEs": "Únete a un Campamento en Tu Ciudad",
"descriptionEs": [
[
"http://i.imgur.com/NAOFJWN.jpg",
"//i.imgur.com/NAOFJWN.jpg",
"Una imagen de algunos de nuestros campistas compartiendo en un café local. 3 hombres y 3 mujeres están sentados alrededor de una mesa con portátiles afuera, y están sonriendo y programando.",
"Nuestros Campamentos te ayudan a programar con otros campistas en tu ciudad. Puedes coordinar grupos de estudio o atender eventos de programación locales juntos.",
""
],
[
"http://i.imgur.com/fTFMjwf.gif",
"//i.imgur.com/fTFMjwf.gif",
"Un gif mostrándote como puedes pulsar en el enlace inferior, encontrar tu ciudad en la lista de Campamentos, entonces haz clic en el enlace de Facebook para tu ciudad y unirte al grupo de Facebook de tu ciudad.",
"Encuentra tu ciudad en esta lista y haz clic en esta. Esto te llevara al grupo de Facebook del Campamento de tu ciudad. Da clic en el botón de \"Unirse al grupo\" para unirte a el grupo. Alguien del mismo campamento debería aprobarte en breve. Si tu ciudad no esta en esta lista, ve al final del articulo de la wiki para ver instrucciones de como crear un campamento para tu ciudad.",
"https://github.com/FreeCodeCamp/freecodecamp/wiki/List-of-Free-Code-Camp-city-based-Campsites"
@ -548,49 +548,49 @@
"title": "Learn What to Do If You Get Stuck",
"description": [
[
"http://i.imgur.com/lzKvwU2.jpg",
"//i.imgur.com/lzKvwU2.jpg",
"The text \"Coding is hard.\"",
"Coding is hard. You will get stuck. Even experienced coders get stuck. The key is knowing how to get unstuck.",
""
],
[
"http://i.imgur.com/sfsidp6.jpg",
"//i.imgur.com/sfsidp6.jpg",
"The text \"It takes time to get good at coding.\"",
"It takes time to get good at coding. You wouldn't expect to beat a chess master after playing for 3 months. Don't expect to build the next Facebook after coding for 3 months.",
""
],
[
"http://i.imgur.com/EoTfOyC.jpg",
"//i.imgur.com/EoTfOyC.jpg",
"An image of some of our campers coding together in Montreal.",
"Keep practicing coding every day and hanging out with other people who code, and you will become a job-ready coder.",
""
],
[
"http://i.imgur.com/EWWZBag.jpg",
"//i.imgur.com/EWWZBag.jpg",
"An image with the text \"1. Read the error 2. Search Google 3. Ask for help.",
"Any time you get stuck or don't know what to do next: Read-Search-Ask.",
""
],
[
"http://i.imgur.com/99BfAcK.jpg",
"//i.imgur.com/99BfAcK.jpg",
"An image showing jQuery documentation",
"First, read the documentation or error message. A key skill that good coders have is the ability to interpret and then follow instructions.",
""
],
[
"http://i.imgur.com/GxvrsFb.gif",
"//i.imgur.com/GxvrsFb.gif",
"A gif showing you how to do an advanced Google search. First, we enter the query \"jquery doesn't run when my page loads\". Then we click search tools button and change the \"Any time\" select box to \"within the last year\". Then we click on a result and read through the article and find our answer.",
"If that didn't help, search Google. Good Google queries take a lot of practice. When you search Google, you usually want to include the language or framework you're using. You also want to limit the results to a recent period.",
""
],
[
"http://i.imgur.com/LZYU7p2.gif",
"//i.imgur.com/LZYU7p2.gif",
"A gif showing us following the link below to go to the help chat room and ask \"jquery doesn't run when my page loads\".",
"If that didn't help, ask your friends. If you have trouble, you can ask your fellow campers in our help chat room.",
"https://gitter.im/FreeCodeCamp/Help"
],
[
"http://i.imgur.com/ZRgXraT.gif",
"//i.imgur.com/ZRgXraT.gif",
"A gif showing us scrolling through our challenge map.",
"Now you're ready to start coding. The \"Map\" button in your upper right hand corner will show you our challenge map. We recommend that you complete these from top to bottom, at a sustainable pace. Our open source community is constantly improving our challenges, so don't be surprised if they change or move around. Don't worry about going back - just keep moving forward. You can always go to your most recent challenge by clicking the \"Learn\" button.",
""
@ -603,49 +603,49 @@
"titleFr": "Apprenez quoi faire quand vous êtes bloqué ?",
"descriptionFr": [
[
"http://i.imgur.com/lzKvwU2.jpg",
"//i.imgur.com/lzKvwU2.jpg",
"Le texte \"Coder est difficile.\"",
"Coder est difficile. Vous serez bloqué un jour ou l'autre. Même les développeurs expérimentés peuvent être bloqués. La solution est de savoir comment se débloquer.",
""
],
[
"http://i.imgur.com/sfsidp6.jpg",
"//i.imgur.com/sfsidp6.jpg",
"Le texte \"Etre un bon développeur prend du temps.\"",
"Etre un bon développeur prend du temps. Vous ne pouvez pas vous attendre à battre un maitre des echecs aprés 3 mois d'apprentissage. Ne vous attendez pas de construire le prochain Facebook aprés 3 mois de coding.",
""
],
[
"http://i.imgur.com/EoTfOyC.jpg",
"//i.imgur.com/EoTfOyC.jpg",
"Une image de quelques uns de nos développeurs codant ensemble à Montreal.",
"Continuez de développer tous les jours et fréquentez d'autres développeurs et vous deviendrez un développeur prêt à l'emploi.",
""
],
[
"http://i.imgur.com/EWWZBag.jpg",
"//i.imgur.com/EWWZBag.jpg",
"Une image avec le texte \"1. Lisez l'erreur 2. Cherchez sur Google 3. Demandez de l'aide.",
"Chaque fois que vous êtes bloqué ou que vous ne savez pas quoi faire : Lisez-Cherchez-Demandez.",
""
],
[
"http://i.imgur.com/99BfAcK.jpg",
"//i.imgur.com/99BfAcK.jpg",
"Une image montrant la document jQuery",
"Lisez d'abord la documentation ou les messages d'erreurs. Le principal atout que les bon développeurs ont est la capacité d'interpréter et ensuite de suivre les instructions.",
""
],
[
"http://i.imgur.com/GxvrsFb.gif",
"//i.imgur.com/GxvrsFb.gif",
"Une image vous montrant comment fiare des recherches avancées sur Google. On commence par rentrer la requète \"jquery ne fonctionne pas lors du chargement de ma page\". Puis nous cliquons sur la barre de recherche et changeons la case à cocher \"Any time\" cochons la case \"au cours de l'année précédente\". Puis nous cliquons sur le résultat et lisons l'article et trouvons notre réponse.",
"Si cela ne vous aide pas, recherchez sur Google. De bonnes recherches sur Google demande pas mal de pratique. Quand vous recherchez sur Google, vous devez inclure le langage ou le framework que vous utilisez. Vous voulez aussi limiter vos résultats a une période récente.",
""
],
[
"http://i.imgur.com/LZYU7p2.gif",
"//i.imgur.com/LZYU7p2.gif",
"Une image vous montrant le lien ci-dessous pour rejoindre le char et demander \"jquery ne fonctionne pas lors du chargement de ma page\".",
"Si cela ne vous aide pas, demande à vos amis. Si vous avez des difficultés, vous pouvez demander aux autres développeurs sur le chat.",
"https://gitter.im/FreeCodeCamp/Help"
],
[
"http://i.imgur.com/ZRgXraT.gif",
"//i.imgur.com/ZRgXraT.gif",
"Une image vous montrant le cursus de notre carte des défis.",
"Maintenant vous être prêt pour commencer à coder. Le boutton \"Map\" situé en haut à droite de votre écran vous montrera notre carte des défis. Nous vous recommandons de les completer du début jusqu'à la fin, régulièrement. Notre communauté open source continue de d'améliorer nos défis, ne soyez donc pas surpris si ils changent ou évoluent. Ce n'est pas la peine de revenir en arrière, continuez à progresser. Vous pouvez toujours accéder à nos derniers défis juste en cliquant sur le boutton \"Learn\".",
""
@ -654,49 +654,49 @@
"titleEs": "Aprende que hacer si te quedas atascado",
"descriptionEs": [
[
"http://i.imgur.com/lzKvwU2.jpg",
"//i.imgur.com/lzKvwU2.jpg",
"El texto \"Programar es difícil.\"",
"Programar es difícil. Quedarás atascado. Incluso programadores experimentados quedan atascados. La clave es saber como desatascarse.",
""
],
[
"http://i.imgur.com/sfsidp6.jpg",
"//i.imgur.com/sfsidp6.jpg",
"El texto \"Volverse bueno programando requiere tiempo.\"",
"Volverse bueno programando requiere tiempo. No esperarías derrotar a un maestro del ajedrez después de jugar por 3 meses. No esperes crear el próximo Facebook después de programar 3 meses.",
""
],
[
"http://i.imgur.com/EoTfOyC.jpg",
"//i.imgur.com/EoTfOyC.jpg",
"Una imagen de algunos de nuestros campistas programando juntos en Montreal.",
"Sigue practicando programación cada día y sal con otras personas que programen, y te volverás un programador listo para un trabajo.",
""
],
[
"http://i.imgur.com/EWWZBag.jpg",
"//i.imgur.com/EWWZBag.jpg",
"Una imagen con el texto \"1. Lee el error 2. Busca en Google 3. Pide ayuda.",
"En cualquier momento en el que te quedes atascado o no sepas que hacer a continuación: Lee-Busca-Pregunta.",
""
],
[
"http://i.imgur.com/99BfAcK.jpg",
"//i.imgur.com/99BfAcK.jpg",
"Una imagen mostrando la documentación de jQuery",
"Primero, lee la documentación o el mensaje de error. Una habilidad clave que los buenos programadores poseen es el poder interpretar y seguir instrucciones.",
""
],
[
"http://i.imgur.com/GxvrsFb.gif",
"//i.imgur.com/GxvrsFb.gif",
"Un gif mostrándote como hacer una búsqueda avanzada en Google. Primero, escribimos la consulta \"jquery no corre cuando mi página carga\". Entonces damos clic en el botón de herramientas y cambiamos la selección de \"En cualquier momento\" a \"en el último año\". Entonces hacemos clic en un resultado o leemos a través del artículo y encontramos nuestra respuesta.",
"Si eso no ayudo, busca en Google. Realizar buenas búsquedas en Google requiere mucha práctica. Cuando buscas en Google, usualmente querrás incluir el lenguaje o entorno (framework) que estás usando. También querrás limitar los resultados a un período reciente.",
""
],
[
"http://i.imgur.com/LZYU7p2.gif",
"//i.imgur.com/LZYU7p2.gif",
"Un gif mostrándonos como seguir el enlace inferior para ir a nuestra sala de chat de ayuda y preguntar \"jquery no corre cuando mi página carga\".",
"Si eso no te ayudó, pregúntale a tus amigos. Si tienes problemas, puedes preguntar a tus compañeros campistas en nuestra sala de chat.",
"https://gitter.im/FreeCodeCamp/Help"
],
[
"http://i.imgur.com/ZRgXraT.gif",
"//i.imgur.com/ZRgXraT.gif",
"Un gif mostrándonos nuestro mapa de desafíos.",
"Ahora estas listo para empezar a programar. El botón de \"Mapa\" en tu esquina superior derecha te mostrará nuestro mapa de desafíos. Te recomendaos que completes los desafíos de arriba hacía abajo, a un ritmo sostenible. Nuestra comunidad de código abierto esta constantemente mejorando nuestros desafíos, así que no te sorprendas si cambian o se mueven alrededor. No te preocupes por volver hacia atrás - solo continúa avanzando. Siempre puedes ir a tu desafío más reciente pulsando el botón de \"Aprender\".",
""

16
challenges/01-front-end-development-certification/basic-bonfires.json
View File

@ -9,25 +9,25 @@
"title": "Get Set for our Algorithm Challenges",
"description": [
[
"http://i.imgur.com/sJkp30a.png",
"//i.imgur.com/sJkp30a.png",
"An image of a algorithm challenge showing directions, tests, and the code editor.",
"Our algorithm challenges will teach you how to think like a programmer.",
""
],
[
"http://i.imgur.com/d8LuRNh.png",
"//i.imgur.com/d8LuRNh.png",
"A mother bird kicks a baby bird out of her nest.",
"Our previous challenges introduced you to programming concepts. But for these algorithm challenges, you'll now need to apply what you learned to solve open-ended problems.",
""
],
[
"http://i.imgur.com/WBetuBa.jpg",
"//i.imgur.com/WBetuBa.jpg",
"A programmer punching through his laptop screen in frustration.",
"Our algorithm challenges are hard. Some of them may take you several hours to solve. You will get frustrated. But don't quit.",
""
],
[
"http://i.imgur.com/p2TpOQd.jpg",
"//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.",
""
@ -39,25 +39,25 @@
"challengeType": 7,
"descriptionEs": [
[
"http://i.imgur.com/sJkp30a.png",
"//i.imgur.com/sJkp30a.png",
"Una imagen de un desafio sobre algoritmos que presenta instrucciones, pruebas y el editor de código.",
"Nuestros desafios sobre algoritmos te enseñarán como pensar como un programador.",
""
],
[
"http://i.imgur.com/d8LuRNh.png",
"//i.imgur.com/d8LuRNh.png",
"Una mamá pájaro saca un bebé pájaro fuer de su nido.",
"Nuestros desafios anteriores te introdujeron a los conceptos de programación. Pero para estos desafios sobre algoritmos, ahora necesitarás aplicar lo que has aprendido y resolver problemas de respuesta abierta",
""
],
[
"http://i.imgur.com/WBetuBa.jpg",
"//i.imgur.com/WBetuBa.jpg",
"Un programador frustado golpeando la pantalla de su computador.",
"Nuestros desafíos sobre algortimos son difíciles. Algunos pueden requerir muchas horas para resolverse. Podrás frustarte, pero no te rindas.",
""
],
[
"http://i.imgur.com/p2TpOQd.jpg",
"//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.",
""

8
challenges/01-front-end-development-certification/basic-javascript.json
View File

@ -5332,7 +5332,7 @@
" var slotTwo;",
" var slotThree;",
" ",
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
" var images = [\"//i.imgur.com/9H17QFk.png\", \"//i.imgur.com/9RmpXTy.png\", \"//i.imgur.com/VJnmtt5.png\"];",
" ",
" // Only change code below this line.",
" ",
@ -5502,7 +5502,7 @@
" var slotTwo;",
" var slotThree;",
" ",
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
" var images = [\"//i.imgur.com/9H17QFk.png\", \"//i.imgur.com/9RmpXTy.png\", \"//i.imgur.com/VJnmtt5.png\"];",
" ",
" slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
" slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
@ -5674,7 +5674,7 @@
" var slotTwo;",
" var slotThree;",
" ",
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
" var images = [\"//i.imgur.com/9H17QFk.png\", \"//i.imgur.com/9RmpXTy.png\", \"//i.imgur.com/VJnmtt5.png\"];",
" ",
" slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
" slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
@ -5851,7 +5851,7 @@
" var slotTwo;",
" var slotThree;",
" ",
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
" var images = [\"//i.imgur.com/9H17QFk.png\", \"//i.imgur.com/9RmpXTy.png\", \"//i.imgur.com/VJnmtt5.png\"];",
" ",
" slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
" slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",

36
challenges/01-front-end-development-certification/basic-ziplines.json
View File

@ -9,37 +9,37 @@
"title": "Get Set for our Front End Development Projects",
"description": [
[
"http://i.imgur.com/OAD6SJz.png",
"//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",
"//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",
"//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",
"//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",
"//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",
"//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.",
""
@ -53,37 +53,37 @@
"titleRu": "Приготовьтесь к разработке фронтенд проектов",
"descriptionRu": [
[
"http://i.imgur.com/OAD6SJz.png",
"//i.imgur.com/OAD6SJz.png",
"Игра Саймона - один из фронтенд проектов.",
"Наши фронтенд проекты дадут вам шанс применить полученные к этому моменту знания по фронтенд разработке. Мы будем использовать популярный браузерный редактор кода - CodePen.",
""
],
[
"http://i.imgur.com/WBetuBa.jpg",
"//i.imgur.com/WBetuBa.jpg",
"Программист от отчаяния кулаком пробивает экран своего ноутбука.",
"Это трудные проекты. Разработка каждого занимает у большинства кэмперов несколько дней. У вас может возникнуть чувство отчаяния. Несмотря на это не сдавайтесь. С практикой этот процесс станет проще.",
""
],
[
"http://i.imgur.com/p2TpOQd.jpg",
"//i.imgur.com/p2TpOQd.jpg",
"Милый пес, прыгающий через препятствие, указывает на вас лапой и подмигивает.",
"Если что-то не получается, воспользуйтесь Read-Search-Ask. Не волнуйтесь - вы сможете это сделать.",
""
],
[
"http://i.imgur.com/G1saeDt.gif",
"//i.imgur.com/G1saeDt.gif",
"Гифка показывающая как зарегистрироваться на CodePen.",
"Для заданий по фронтенд разработке, мы будем использовать популярный браузерный редактор кода под названием CodePen. Откройте страницу регистрации на сайте CodePen, нажав на расположенную чуть ниже кнопку \"Open link in new tab\". Заполните форму и нажмите \"Sign up\". <br><div class=\"small\">Замечание: Если у вас уже есть аккаунт CodePen, то этот шаг можно пропустить: нажмите на кнопку \"Open link in new tab\", закройте появившуюся вкладку и затем кликните \"go to my next step\". Мы убрали кнопку \"skip step\", ввиду того что большинство людей просто нажимали бы ее несколько раз подряд и пропускали бы эти важные инструкции.</div>",
"http://codepen.io/signup/free"
],
[
"http://i.imgur.com/U4y9RJ1.gif",
"//i.imgur.com/U4y9RJ1.gif",
"Гифка показывающая набор в редакторе заголовка с текстом \"hello world\", который затем отображается в окошке предпросмотра. А также указывающая как изменить размер окон редактора или поменять их расположение.",
"В окошке HTML создайте элемент h1 с текстом \"Hello World\". Ухватив края окон можно изменить их размер. А нажав на кнопку \"Change View\" поменять их расположение.",
""
],
[
"http://i.imgur.com/G9KFQDL.gif",
"//i.imgur.com/G9KFQDL.gif",
"Гифка показывающая как в CodePen добавить к проекту Bootstrap.",
"Нажмите на звездочку в левом верхнем углу окошка CSS, найдите внизу поле \"Quick add\" и выберите в нем Bootstrap. Добавьте к элементу h1 класс \"text-primary\", чтобы изменить его цвет и удостовериться, что Bootstrap подключен.",
""
@ -92,37 +92,37 @@
"titleEs": "Prepárate para los Proyectos de Desarrollo de Interfaces",
"descriptionEs": [
[
"http://i.imgur.com/OAD6SJz.png",
"//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",
"//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. Se vuelve fácil con práctica.",
""
],
[
"http://i.imgur.com/p2TpOQd.jpg",
"//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 - lo tienes resuelto.",
""
],
[
"http://i.imgur.com/G1saeDt.gif",
"//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 de código basado en el navegador que es muy famoso llamado Codepen. Pulsa en el botón de abajo \"Open link in new tab\" para abrir la página de registro de CodePen. Rellena el formulario y pulsa \"Sign up\". <br><div class=\"small\">Nota: Si ya tienes una cuenta de CodePen, puedes omitir este paso pulsando \"Open link in new tab\", cierra la nueva pestaña que se abre, entonces pulsa \"go to my next step\". Eliminamos nuestro botón \"skip step\" porque mucha gente solamente pulsa el botón sin realizar estos importantes pasos.</div>",
"http://codepen.io/signup/free"
],
[
"http://i.imgur.com/U4y9RJ1.gif",
"//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 h1 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",
"//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 h1 la clase \"text-primary\" para cambiar su color y verificar que Bootstrap está activado.",
""

16
challenges/01-front-end-development-certification/bootstrap.json
View File

@ -338,7 +338,7 @@
"description": [
"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 and any elements following it will flow onto a \"new line\" below the block.",
"This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Click to enlarge\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'></a>",
"<a href=\"//i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/O32cDWE.png\" title=\"Click to enlarge\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'></a>",
"Note that these buttons still need the <code>btn</code> class.",
"Add Bootstrap's <code>btn-block</code> class to your Bootstrap button."
],
@ -413,7 +413,7 @@
"descriptionEs": [
"Normalmente, tus elementos <code>button</code> son sólo tan anchos como el texto que contienen. Al convertir un botón en elemento a nivel de bloque, este se estirará para llenar todo el espacio horizontal y cualquier elemento que lo siga se desplazará a una \"nueva línea\" debajo del bloque.",
"Esta imagen es un ejemplo de la diferencia entre elementos en línea (<code>inline</code>) y elementos a nivel de bloque (<code>block-level</code>):",
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Pulsa para agrandar\" alt=\"Un botón \"en línea\" es tan pequeño como el texto que contiene. En esta imagen, está centrado. Debajo de este hay un botón \"a nivel de bloque\", que se estira hasta llenar todo el espacio horizontal.'></a>",
"<a href=\"//i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/O32cDWE.png\" title=\"Pulsa para agrandar\" alt=\"Un botón \"en línea\" es tan pequeño como el texto que contiene. En esta imagen, está centrado. Debajo de este hay un botón \"a nivel de bloque\", que se estira hasta llenar todo el espacio horizontal.'></a>",
"Ten en cuenta que estos botones todavía necesitan la clase <code>btn</code>.",
"Agrega la clase de Bootstrap <code>btn-block</code> a tu botón Bootstrap."
]
@ -673,7 +673,7 @@
"description": [
"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.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
"<a href=\"//i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
"Put the <code>Like</code>, <code>Info</code> and <code>Delete</code> buttons side-by-side by nesting 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.",
@ -753,7 +753,7 @@
"descriptionEs": [
"Bootstrap utiliza un sistema de cuadrícula adaptativa que facilita el poner elementos en fila y especificar la anchura relativa de cada elemento. La mayoría de las clases de Bootstrap pueden ser aplicadas a un elemento <code>div</code>.",
"Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:",
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"una imagen que muestra el sistema de cuadrícula de Bootstrap\"></a>",
"<a href=\"//i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"una imagen que muestra el sistema de cuadrícula de Bootstrap\"></a>",
"En esta ilustración se está utilizando la clase <code>col-md-*</code>. Aquí, <code>md</code> significa mediano, y <code>*</code> es un número que especifica la cantidad de columnas debe tomar el ancho del elemento. En este caso, se especifica el ancho de columna de un elemento en una pantalla de tamaño mediano, como una laptop.",
"En la aplicación de fotos de gatos que estamos construyendo, usaremos <code>col-xs-*</code>, donde <code>xs</code> significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y <code>*</code> especifica el número de columnas que debe tomar el ancho del elemento.",
"Pon los botones de <code>Like</code>, <code>Info</code> y <code>Delete</code> lado a lado. Esto se hace anidando los tres botones dentro de un elemento <code>&#60;div class=\"row\"&#62;</code>, y luego cada uno de ellos dentro de un elemento <code>&#60;div class=\"col-xs-4\"&#62;</code>.",
@ -864,7 +864,7 @@
"description": [
"You can use spans to create inline elements. Remember when we used the <code>btn-block</code> class to make the button fill the entire row?",
"This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Click to enlarge\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'></a>",
"<a href=\"//i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/O32cDWE.png\" title=\"Click to enlarge\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'></a>",
"By using the <code>span</code> element, you can put several elements together, and even style different parts of the same element differently.",
"Nest the word \"love\" in your \"Things cats love\" element below within a <code>span</code> element. Then give that <code>span</code> the class <code>text-danger</code> to make the text red.",
"Here's how you would do this with the \"Top 3 things cats hate\" element:",
@ -939,7 +939,7 @@
"descriptionEs": [
"Puedes utilizar span para crear elementos en línea. ¿Recuerdas cuando usamos la clase <code>btn-block</code> para hacer que el botón llenara toda la línea?",
"Esta imagen ilustra la diferencia entre elementos en línea (<code>inline</code>) y elementos a nivel de bloque (<code>block-level</code>):",
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Pulsa para agrandar\" alt=\"Un botón \"en línea\" es tan pequeño como el texto que contiene. En esta imagen, está centrado. Debajo de este hay un botón \"a nivel de bloque\", que se estira para llenar todo el espacio horizontal.'></a>",
"<a href=\"//i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/O32cDWE.png\" title=\"Pulsa para agrandar\" alt=\"Un botón \"en línea\" es tan pequeño como el texto que contiene. En esta imagen, está centrado. Debajo de este hay un botón \"a nivel de bloque\", que se estira para llenar todo el espacio horizontal.'></a>",
"Al usar el elemento <code>span</code>, puedes poner varios elementos juntos, e incluso darle diferentes estilos a partes diferentes del mismo elemento.",
"Anida la palabra \"love\" en tu elemento \"Things cats love\" dentro de un elemento <code>span</code>. Luego, asigna a ese elemento <code>span</code> la clase <code>text-danger</code> para hacer que el texto sea rojo.",
"Así es como lo harías con el elemento \"Top 3 things cats hate\":",
@ -953,7 +953,7 @@
"We will make a simple heading for our Cat Photo App by putting the title and relaxing cat image in the same row.",
"Remember, 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.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
"<a href=\"//i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
"Nest your first image and your <code>h2</code> element within a single <code>&#60;div class=\"row\"&#62;</code> element. Nest your <code>h2</code> element 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.",
@ -1028,7 +1028,7 @@
"Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniendo el título y la relajante imagen del gato en la misma línea.",
"Recuerda, Bootstrap usa un sistema de cuadrícula adaptativo, el cual facilita poner elementos en filas y especificar el ancho relativo de cada elemento. La mayoría de las clases de Bootstrap pueden aplicarse a un elemento <code>div</code>.",
"Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:",
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Pulsa para agrandar\" alt=\"una imagen que muestra el sistema de cuadrícula de Bootstrap\"></a>",
"<a href=\"//i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/FaYuui8.png\" title=\"Pulsa para agrandar\" alt=\"una imagen que muestra el sistema de cuadrícula de Bootstrap\"></a>",
"En esta ilustración se está utilizando la clase <code>col-md-*</code>. Aquí, <code>md</code> significa mediano, y <code>*</code> es un número que especifica el número de columnas que debe tomar el ancho del elemento. En este caso, se especifica el ancho de columna de un elemento en una pantalla de tamaño mediano, como un computador portátil.",
"En la aplicación de fotos de gatos que estamos construyendo, usaremos <code>col-xs-*</code>, donde <code>xs</code> significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y <code>*</code> especifica el número de columnas que debe tomar el ancho del elemento.",
"Anida tu primera imagen y tu elemento <code>h2</code> dentro de un solo elemento <code>&#60;div class=\"row\"&#62;</code>. Anida tu texto <code>h2</code> dentro de un <code>&#60;div class=\"col-xs-8\"&#62;</code> y tu imagen en un <code>&#60;div class=\"col-xs-4\"&#62;</code> de tal forma que estén en la misma línea.",

16
challenges/01-front-end-development-certification/front-end-development-certificate.json
View File

@ -8,25 +8,25 @@
"title": "Claim Your Front End Development Certificate",
"description": [
[
"http://i.imgur.com/k8btNUB.jpg",
"//i.imgur.com/k8btNUB.jpg",
"An image of our Front End Development Certificate",
"This challenge will give you your verified Front End Development Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
""
],
[
"http://i.imgur.com/HArFfMN.jpg",
"//i.imgur.com/HArFfMN.jpg",
"The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
"By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
"#"
],
[
"http://i.imgur.com/14F2Van.jpg",
"//i.imgur.com/14F2Van.jpg",
"An image of the text \"Front End Development Certificate requirements\"",
"Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
"#"
],
[
"http://i.imgur.com/16SIhHO.jpg",
"//i.imgur.com/16SIhHO.jpg",
"An image of the word \"Congratulations\"",
"Congratulations! We've added your Front End Development Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
""
@ -242,25 +242,25 @@
"challengeType": 7,
"descriptionEs": [
[
"http://i.imgur.com/k8btNUB.jpg",
"//i.imgur.com/k8btNUB.jpg",
"Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
"Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
""
],
[
"http://i.imgur.com/HArFfMN.jpg",
"//i.imgur.com/HArFfMN.jpg",
"Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
"Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
"#"
],
[
"http://i.imgur.com/14F2Van.jpg",
"//i.imgur.com/14F2Van.jpg",
"Una imagen del texto \"Front End Development Certificate requirements\"",
"Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
"#"
],
[
"http://i.imgur.com/16SIhHO.jpg",
"//i.imgur.com/16SIhHO.jpg",
"Una imagen de la palabra \"Congratulations\"",
"¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
""

24
challenges/01-front-end-development-certification/gear-up-for-success.json
View File

@ -8,7 +8,7 @@
"title": "Join our LinkedIn Alumni Network",
"description": [
[
"http://i.imgur.com/vJyiXzU.gif",
"//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. 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"
@ -21,7 +21,7 @@
"titleEs": "Únete a nuestra red de alumnos en LinkedIn",
"descriptionEs": [
[
"http://i.imgur.com/vJyiXzU.gif",
"//i.imgur.com/vJyiXzU.gif",
"Un gif mostrando como puedes pulsar el enlace de abajo 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. 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"
@ -33,7 +33,7 @@
"title": "Join our Subreddit",
"description": [
[
"http://i.imgur.com/DYjJuCG.gif",
"//i.imgur.com/DYjJuCG.gif",
"A gif showing how you can create a Reddit account and join Free Code Camp's subreddit.",
"Our community has its own subreddit on Reddit. This is a convenient way to ask questions and share links with our entire community. If you don't already have a Reddit account, you can create one in a few seconds - you don't even need an email address. Then you can click the \"subscribe\" button to join our subreddit. You may also want to subscribe to some of the other subreddits listed in our sidebar.",
"https://reddit.com/r/freecodecamp"
@ -47,7 +47,7 @@
"titleEs": "Unete a nuestro Subreddit",
"descriptionEs": [
[
"http://i.imgur.com/DYjJuCG.gif",
"//i.imgur.com/DYjJuCG.gif",
"Un gif mostrando como puedes crear una cuenta de Reddit y unirte a Free Code Camp subreddit.",
"Nuestra comunidad tiene su propio subreddit en Reddit. Esta es una manera conveniente de hacer preguntas y compartir enlaces con toda nuestra comunidad. Si aún no dispones de una cuenta de Reddit, puedes crear una en unos segundos - ni siquiera necesitas una dirección de correo electrónico. A continuación, puedes pulsar el botón \"subscribe\" para unirte a nuestro subreddit. También puedes suscribirte a otros subreddits que estan listados en la barra lateral.",
"https://reddit.com/r/freecodecamp"
@ -59,13 +59,13 @@
"title": "Read Coding News on our Medium Publication",
"description": [
[
"http://i.imgur.com/FxSOL4a.gif",
"//i.imgur.com/FxSOL4a.gif",
"A gif showing how you can create a Medium account.",
"Our community has a Medium publication where we write lots of articles about software development. If you don't already have a Medium account, you can follow the link and either sign in using social network, or by entering an email (they'll send you an email that you can click-through to create your account.) Once you select a topic of interest, you can continue through the steps.",
"https://www.medium.com"
],
[
"http://i.imgur.com/zhhywSX.gif",
"//i.imgur.com/zhhywSX.gif",
"A gif showing how you can click the \"follow\" button to follow Free Code Camp's publication.",
"Once you're logged in, you can go to Free Code Camp's Medium publication and click \"follow\". Our campers publish several articles each week.",
"https://medium.freecodecamp.com"
@ -79,13 +79,13 @@
"titleEs": "Lee noticias de codificación en nuestros canal de publicaciones Medium",
"descriptionEs": [
[
"http://i.imgur.com/FxSOL4a.gif",
"//i.imgur.com/FxSOL4a.gif",
"Un gif mostrando cómo crear una cuenta en Medium.",
"Nuestra comunidad tiene un canal de publicaciones Medium, donde escribimos un montón de artículos sobre desarrollo de software. Si aún no dispones de una cuenta Medium, puedes seguir el enlace y registrarte usando una red social o ingresando un correo electrónico (enviarán un correo electrónico que debes abrirlo para crear tu cuenta.) Selecciona un tema de interés, puedes continuar a través de los pasos.",
"https://www.medium.com"
],
[
"http://i.imgur.com/zhhywSX.gif",
"//i.imgur.com/zhhywSX.gif",
"Un gif mostrando cómo puedes pulsar el botón \"follow\" para seguir las publicaciones de Free Code Camp.",
"Una vez que inicias sesión, puedes ir al canal de publicaciones de Free Code Camp Medium y pulsar \"follow\". Nuestros campistas publican varios artículos cada semana.",
"https://medium.freecodecamp.com"
@ -97,7 +97,7 @@
"title": "Watch us Code Live on Twitch.tv",
"description": [
[
"http://i.imgur.com/8rtyRY1.gif",
"//i.imgur.com/8rtyRY1.gif",
"A gif showing how you can sign up for Twitch.tv and follow our channel.",
"Our campers frequently code live on Twitch.tv, a popular streaming website. You can create an account in less than a minute, then follow Free Code Camp's channel. When you follow, you'll get the option of receiving an email notification each time one of our campers goes live. You can then join dozens of other campers and watch them code, and interact in a chat room. This is a fun, casual way to learn by watching people build projects.",
"https://twitch.tv/freecodecamp"
@ -111,7 +111,7 @@
"titleEs": "Miranos programar en vivo por Twitch.tv",
"descriptionEs": [
[
"http://i.imgur.com/8rtyRY1.gif",
"//i.imgur.com/8rtyRY1.gif",
"Un gif mostrando cómo resgistrarse en Twitch.tv y seguir nuestro canal.",
"Nuestros campistas programan en vivo con frecuencia en Twitch.tv, un sitio web popular de streaming. Puedes crear una cuenta en menos de un minuto, luego, sigue al canal de Free Code Camp. Cuando sigas al canal, verás la opción de recibir una notificación por correo electrónico cada vez que uno de nuestros campistas esté en vivo. Puedes unirte a docenas de otros campistas y verlos programar, e interactuar en una sala de chat. Esta es una manera divertida e informal de aprender observando a las personas a construir proyectos.",
"https://twitch.tv/freecodecamp"
@ -123,7 +123,7 @@
"title": "Commit to a Goal and a Nonprofit",
"description": [
[
"http://i.imgur.com/Og1ifsn.gif",
"//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. 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"
@ -136,7 +136,7 @@
"titleEs": "Comprométete con una meta y con una organización sin fines de lucro",
"descriptionEs": [
[
"http://i.imgur.com/Og1ifsn.gif",
"//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. 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 \"commit\", 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"

18
challenges/01-front-end-development-certification/html5-and-css.json
View File

@ -68,7 +68,7 @@
"id": "bad87fee1348bd9aedf0887a",
"descriptionPtBR": [
"Durante os próximos desafios, construiremos um aplicativo em HTML que se parecerá como este:",
"<a href=\"http://i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/jOc1JF1.png\" title=\"Clique para aumentar\" alt=\"Imagem do aplicativo CatPhotoApp finalizado\"></a>",
"<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Clique para aumentar\" alt=\"Imagem do aplicativo CatPhotoApp finalizado\"></a>",
"O elemento <code>h2</code> que você criar gerará um elemento <code>h2</code> na página da web.",
"Este elemento indica ao navegador a forma de mostrar o texto que contém.",
"Os elementos <code>h2</code> são ligeiramente menores que os elementos <code>h1</code>. Há também os elementos <code>h3</code>, <code>h4</code>, <code>h5</code> e <code>h6</code>.",
@ -84,7 +84,7 @@
"title": "Headline with the h2 Element",
"description": [
"Over the next few challenges, we'll build an HTML5 app that will look something like this:",
"<a href=\"http://i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/jOc1JF1.png\" title=\"Click to enlarge\" alt=\"A screen shot of our finished Cat Photo App\"></a>",
"<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Click to enlarge\" alt=\"A screen shot of our finished Cat Photo App\"></a>",
"The <code>h2</code> element you enter will create an <code>h2</code> element on the website.",
"This element tells the browser how to render the text that it contains.",
"<code>h2</code> elements are slightly smaller than <code>h1</code> elements. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements.",
@ -103,7 +103,7 @@
"titleEs": "Encabezado con el elemento h2",
"descriptionEs": [
"Durante los siguientes desafíos, construiremos una aplicación HTML5 que lucirá como la siguiente:",
"<a href=\"http://i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/jOc1JF1.png\" title=\"Pulsa para agrandar\" alt=\"Pantallazo de la aplicación Cat Photo terminada\"></a>",
"<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Pulsa para agrandar\" alt=\"Pantallazo de la aplicación Cat Photo terminada\"></a>",
"El elemento <code>h2</code> que ingreses creará un elemento <code>h2</code> en el sitio web.",
"Este elemento le dice al navegador cómo mostrar el texto que contiene.",
"Los elementos <code>h2</code> son ligeramente más pequeños que los elementos <code>h1</code>. También hay elementos <code>h3</code>, <code>h4</code>, <code>h5</code> y <code>h6</code>",
@ -1154,7 +1154,7 @@
"descriptionPtBR": [
"Os elementos <code>a</code>, também conhecidos como elementos <code>âncora</code>, são utilizados para ligar conteúdo fora da página atual.",
"Aqui está um diagrama de um elemento <code>a</code>. Neste caso, o elemento <code>a</code> é utilizado no meio de um elemento de parágrafo, o que significa que o link externo aparecerá no meio de uma frase.",
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"diagrama de como as tags de âncora se compõem com o texto, como na próxima linha\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
"<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"diagrama de como as tags de âncora se compõem com o texto, como na próxima linha\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
"Veja um exemplo:",
"<code>&#60;p&#62;Aqui está um &#60;a href=\"http://freecodecamp.com\"&#62; link ligado ao Free Code Camp&#60;/a&#62; para que você o siga.&#60;/p&#62;</code>",
"Crie um elemento <code>a</code> que esteja ligado ao site <code>http://freecatphotoapp.com</code> e tenha como <code>texto de âncora</code> \"fotos de gatos\"."
@ -1170,7 +1170,7 @@
"description": [
"<code>a</code> elements, also known as <code>anchor</code> 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.",
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
"<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
"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://freecatphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
@ -1220,7 +1220,7 @@
"descriptionEs": [
"Los elementos <code>a</code>, también conocidos como elementos <code>ancla</code>, se utilizan para enlazar a contenido fuera de la página actual.",
"Aquí está un diagrama de un elemento <code>a</code>. En este caso, el elemento <code>a</code> se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ",
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Haz clic para ampliar\" alt=\"un diagrama de cómo las etiquetas de ancla se componen con el mismo texto, como en la siguiente línea\" src=\"http://i.imgur.com/hviuZwe.png\"></a> ",
"<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Haz clic para ampliar\" alt=\"un diagrama de cómo las etiquetas de ancla se componen con el mismo texto, como en la siguiente línea\" src=\"//i.imgur.com/hviuZwe.png\"></a> ",
"He aquí un ejemplo:",
"<code>&#60;p&#62;Aquí está un &#60;a href=\"http://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo sigas.&#60;/p&#62;</code>",
"Crea un elemento <code>a</code> que se vincule a <code>http://freecatphotoapp.com</code> y tenga como <code>texto de ancla</code> \"fotos de gatos\"."
@ -1232,7 +1232,7 @@
"id": "bad87fee1348bd9aede08817",
"descriptionPtBR": [
"Outra vez, aqui está um diagrama de um elemento <code>a</code> para você usar como referência.",
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"diagrama de como são as tags de âncora com o texto como na linha seguinte\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
"<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"diagrama de como são as tags de âncora com o texto como na linha seguinte\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
"Veja um exemplo:",
"<code>&#60;p&#62;Este é um &#60;a href=\"http://freecodecamp.com\"&#62; link ligado ao Free Code Camp&#60;/a&#62; para que você o siga.&#60;/p&#62;</code>",
"<code>Aninhamento</code> significa ter um elemento no interior de outro elemento.",
@ -1247,7 +1247,7 @@
"title": "Nest an Anchor Element within a Paragraph",
"description": [
"Again, here's a diagram of an <code>a</code> element for your reference:",
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
"<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
"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>",
"<code>Nesting</code> just means putting one element inside of another element.",
@ -1304,7 +1304,7 @@
"titleEs": "Anida un elemento de ancla dentro de un párrafo",
"descriptionEs": [
"Una vez más, aquí está un diagrama de un elemento <code>a</code> para tu referencia:",
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Pulse para ampliar\" alt=\"un diagrama de como se componen las etiquetas de anclaje con el texto como en la siguiente línea\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
"<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Pulse para ampliar\" alt=\"un diagrama de como se componen las etiquetas de anclaje con el texto como en la siguiente línea\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
"He aquí un ejemplo:",
"<code>&#60;p&#62;Aquí hay un &#60;a href=\"http://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo sigas.&#60;/p&#62;</code>",
"<code>Anidamiento</code> simplemente significa poner un elemento dentro de otro elemento.",

16
challenges/02-data-visualization-certification/data-visualization-certificate.json
View File

@ -8,25 +8,25 @@
"title": "Claim Your Data Visualization Certificate",
"description": [
[
"http://i.imgur.com/Et3iD74.jpg",
"//i.imgur.com/Et3iD74.jpg",
"An image of our Data Visualization Certificate",
"This challenge will give you your verified Data Visualization Certificate. Before we issue your certificate, we must verify that you have completed all of our React and D3.js projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
""
],
[
"http://i.imgur.com/HArFfMN.jpg",
"//i.imgur.com/HArFfMN.jpg",
"The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
"By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
"#"
],
[
"http://i.imgur.com/14F2Van.jpg",
"//i.imgur.com/14F2Van.jpg",
"An image of the text \"Data Visualization Certificate requirements\"",
"Let's confirm that you have completed our React and D3.js projects. Click the button below to verify this.",
"#"
],
[
"http://i.imgur.com/16SIhHO.jpg",
"//i.imgur.com/16SIhHO.jpg",
"An image of the word \"Congratulations\"",
"Congratulations! We've added your Data Visualization Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
""
@ -94,25 +94,25 @@
"challengeType": 7,
"descriptionEs": [
[
"http://i.imgur.com/Et3iD74.jpg",
"//i.imgur.com/Et3iD74.jpg",
"Una imagen que muestra nuestro certificado de Visualización de datos",
"Este desafío te otorga tu certificado autenticado de Visualización de datos. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los proyectos con React y D3.js. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
""
],
[
"http://i.imgur.com/HArFfMN.jpg",
"//i.imgur.com/HArFfMN.jpg",
"Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
"Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
"#"
],
[
"http://i.imgur.com/14F2Van.jpg",
"//i.imgur.com/14F2Van.jpg",
"Una imagen del texto \"Data Visualization Certificate requirements\"",
"Confirmemos que has completado todos nuestros proyectos en React y D3.js. Pulsa el botón siguiente para hacer la verificación.",
"#"
],
[
"http://i.imgur.com/16SIhHO.jpg",
"//i.imgur.com/16SIhHO.jpg",
"Una imagen de la palabra \"Congratulations\"",
"¡Felicitaciones! Hemos agregado tu certificado de Visualización de datos a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
""

56
challenges/03-back-end-development-certification/api-projects.json
View File

@ -9,85 +9,85 @@
"title": "Get Set for our Back End Development Projects",
"description": [
[
"http://i.imgur.com/4IZjWZ3.gif",
"//i.imgur.com/4IZjWZ3.gif",
"A gif showing how to create a c9.io account.",
"We recommend building our full stack Basejump challenges on c9.io, a powerful browser-based development environment. This will save you hours of time that you would spend configuring your local computer to run Node.js and MongoDB - time you could instead spend coding. <br>Create a c9.io account by clicking the GitHub symbol in the upper right hand corner of the c9.io page. Click the big plus symbol to create a new workspace. Enter your email address when prompted.",
"http://c9.io"
],
[
"http://i.imgur.com/F7i5Hhi.gif",
"//i.imgur.com/F7i5Hhi.gif",
"A gif showing how to fill out the new workspace form",
"Instead of starting from scratch, we recommend using Clementine.js, a full stack JavaScript \"boilerplate\" that already has some basic code written for you. Clementine.js has a detailed tutorial you can go through to build it yourself, but for now let's just clone its code. On c9.io, give your workspace a name, then leave \"Template\" as custom and create your workspace from this GitHub url: <code>https://github.com/johnstonbl01/clementinejs-fcc.git</code>",
""
],
[
"http://i.imgur.com/42m1vyr.gif",
"//i.imgur.com/42m1vyr.gif",
"A gif showing you how to show hidden files.",
"Click the gear in the upper right corner of c9.io's file structure. Select \"show hidden files\".",
""
],
[
"http://i.imgur.com/qrE8xaK.gif",
"//i.imgur.com/qrE8xaK.gif",
"A gif showing you how to create a new file.",
"Right click and create a new file called <code>.env</code>.",
""
],
[
"http://i.imgur.com/jkQX9SQ.gif",
"//i.imgur.com/jkQX9SQ.gif",
"A gif showing you how to prep your environmental variables in your .env file.",
"Open your .env file and paste this into it, then save it: <br><code>GITHUB_KEY=<br>GITHUB_SECRET=<br>MONGO_URI=mongodb://localhost:27017/clementinejs<br>PORT=8080<br>APP_URL=http://localhost:8080/</code>",
""
],
[
"http://i.imgur.com/f3DE7zB.gif",
"//i.imgur.com/f3DE7zB.gif",
"A gif showing you how to open c9.io's preview window.",
"Open up your application in a preview tab by clicking window > share > application > open.",
""
],
[
"http://i.imgur.com/Ip0qUdQ.gif",
"//i.imgur.com/Ip0qUdQ.gif",
"A gif showing you how to create a GitHub app using c9.io's preview URL.",
"Create a GitHub app for authentication and choose an \"Application name\". For the homepage URL, paste the URL from your preview tab. You'll also paste the URL from your preview tab into \"Authorization callback URL\", then add to it: <code>auth/github/callback</code>",
"https://github.com/settings/applications/new"
],
[
"http://i.imgur.com/qCUVRFb.gif",
"//i.imgur.com/qCUVRFb.gif",
"A gif showing you how to transfer GitHub's key and secret over to your .env file, as well as your c9.io URL.",
"GitHub will create an app and present you with a Client ID and a Client Secret. Set your .env file's GITHUB_KEY equal to the Client ID, and set your .env file's GITHUB_SECRET equal to the Client Secret. Copy the URL from your preview tab and paste it into your .env file as your APP_URL.",
""
],
[
"http://i.imgur.com/2a20Vah.gif",
"//i.imgur.com/2a20Vah.gif",
"A gif showing you how to start mongoDB in c9.io's terminal.",
"In your terminal, start MongoDB by entering <code>mongod --smallfiles</code>",
""
],
[
"http://i.imgur.com/dC55pWk.gif",
"//i.imgur.com/dC55pWk.gif",
"A gif showing you how to open a new tab in c9.io's terminal.",
"Open a new terminal tab with the + button above your terminal, then run <code>npm install</code>",
""
],
[
"http://i.imgur.com/54OC2Ro.gif",
"//i.imgur.com/54OC2Ro.gif",
"A gif showing you how to navigate to your preview tab and sign in to your new Clementine.js app.",
"Run <code>node server.js</code> to start the server. Refresh your preview tab. You should see the Clementine.js logo. Click \"sign in\" and accept GitHub's prompt to authorize the application.",
""
],
[
"http://i.imgur.com/2IJfyvN.gif",
"//i.imgur.com/2IJfyvN.gif",
"A gif showing you how to click the button to trigger an AJAX action with Clementine.js and how to look at your user profile from the GitHub authentication data.",
"Click the \"click me\" button and you'll see that it increments the number clicks. Click the profile button and you'll see that it has your GitHub information.",
""
],
[
"http://i.imgur.com/bjO5pnq.gif",
"//i.imgur.com/bjO5pnq.gif",
"A gif showing you how to create a new GitHub repository and push your code up to it.",
"Create a new GitHub repository. Then copy its .git URL. <br>Return to c9.io's terminal and set your GitHub remote URL: <code>git remote set-url origin</code> followed by the URL you copied from GitHub. <br>Run <code>git push origin master</code>. <br>Now tab back to GitHub and refresh, and you'll see that your code is now on GitHub.",
"https://github.com/new"
],
[
"http://i.imgur.com/Qn0K65B.gif",
"//i.imgur.com/Qn0K65B.gif",
"A gif showing you how to add add-ons to Heroku.",
"We will soon add instructions for getting Clementine running on Heroku. For now, develop your Basejumps right on c9.io.",
""
@ -101,85 +101,85 @@
"titleEs": "Prepárate para nuestros Proyectos de Desarrollo en el lado del servidor",
"descriptionEs": [
[
"http://i.imgur.com/4IZjWZ3.gif",
"//i.imgur.com/4IZjWZ3.gif",
"Una imagen gif que te muestra cómo crear una cuenta en c9.io.",
"Te recomendamos resolver nuestros desafíos de pila completa (full stack) en c9.io, un poderoso ambiente de desarrollo basado en tu navegador. Esto te ahorrará muchas horas que utilizarías configurando tu computadora para correr Node.js y MongoDB - tiempo que podrías utilizar escribiendo código. <br>Crea una cuenta en c9.io pulsando el símbolo de GitHub en la esquina superior derecha de la página de c9.io. Pulsa el botón con el símbolo de suma para crear una área de trabajo nueva. Introduce tu dirección de correo electrónico cuando se te solicite.",
"http://c9.io"
],
[
"http://i.imgur.com/F7i5Hhi.gif",
"//i.imgur.com/F7i5Hhi.gif",
"Una imagen gif que te muestra cómo llenar el formulario para crear un área de trabajo nueva",
"En vez de iniciar desde cero, recomendamos utilizar Clementine.js, un modelo (<em>bolierplate</em>) de JavaScript pila completa (full stack) que viene con código básico ya escrito para ti. Clementine.js tiene un tutorial detallado que puedes seguir para construirlo por ti mismo, pero por ahora simplemente vamos a clonarlo. En c9.io, dale un nombre a tu área de trabajo, luego deja \"Plantilla\" (\"Template\") como personalizado y crea tu espacio de trabajo usando el siguiente url de Github: <code>https://github.com/johnstonbl01/clementinejs-fcc.git</code>",
""
],
[
"http://i.imgur.com/42m1vyr.gif",
"//i.imgur.com/42m1vyr.gif",
"Una imagen gif que te muestra cómo mostrar los archivos ocultos.",
"Pulsa el engrane en la esquina superior derecha del árbol de archivos de c9.io. Selecciona \"show hidden files\".",
""
],
[
"http://i.imgur.com/qrE8xaK.gif",
"//i.imgur.com/qrE8xaK.gif",
"Una imagen gif que te muestra cómo crear un archivo nuevo.",
"Haciendo clic derecho, crea un nuevo archivo llamado <code>.env</code>.",
""
],
[
"http://i.imgur.com/jkQX9SQ.gif",
"//i.imgur.com/jkQX9SQ.gif",
"Una imagen gif que te muestra cómo preparar tus variables de ambiente en tu archivo .env.",
"Abre tu archivo .env pega el siguiente código, y luego guárdalo: <br><code>GITHUB_KEY=<br>GITHUB_SECRET=<br>MONGO_URI=mongodb://localhost:27017/clementinejs<br>PORT=8080<br>APP_URL=http://localhost:8080/</code>",
""
],
[
"http://i.imgur.com/f3DE7zB.gif",
"//i.imgur.com/f3DE7zB.gif",
"Una imagen gif que te muestra cómo abir la vista previa de la ventana de c9.io.",
"Abre tu aplicación en una pestaña de vista previa pulsando window > share > application > open.",
""
],
[
"http://i.imgur.com/Ip0qUdQ.gif",
"//i.imgur.com/Ip0qUdQ.gif",
"Una imagen gif que te muestra cómo crear una aplicación de GitHub usando la URL de vista previa de c9.io.",
"Crea una aplicación de GitHub para autenticación y elige un \"Nombre de aplicación\". Para la URL de inicio (homepage), pega la URL de tu pestaña de vista previa. También debes pegar la URL de tu pestaña de vista previa en <code>Authorization callback URL</code>, agrégale: <code>auth/github/callback</code>",
"https://github.com/settings/applications/new"
],
[
"http://i.imgur.com/qCUVRFb.gif",
"//i.imgur.com/qCUVRFb.gif",
"Una imagen gif que te muestra cómo transferir tu llave (key) y tu código secreto (secret) de GitHub a tu archivo .env, así como tu URL de c9.io.",
"GitHub creará una aplicación y te entregará un ID de cliente (Client ID) y un Código secreto de cliente (Client Secret). Haz que el GITHUB_KEY en tu archivo .env sea igual al ID de cliente, y haz que tu GITHUB_SECRET en el archivo .env sea igual al Código secreto de cliente. Copia la URL de tu pestaña de vista previa y pégala en tu archivo .env como tu APP_URL.",
""
],
[
"http://i.imgur.com/2a20Vah.gif",
"//i.imgur.com/2a20Vah.gif",
"Una imagen gif que te muestra cómo iniciar mongoDB en la terminal de c9.io.",
"En tu terminal, inicia MongoDB con el siguiente comando: <code>mongod --smallfiles</code>",
""
],
[
"http://i.imgur.com/dC55pWk.gif",
"//i.imgur.com/dC55pWk.gif",
"Una imagen gif que te muestra cómo abrir una nueva pestaña en la terminal de c9.io.",
"Abre una nueva pestaña de terminal pulsando el botón de + sobre tu terminal, luego ejecuta <code>npm install</code>",
""
],
[
"http://i.imgur.com/54OC2Ro.gif",
"//i.imgur.com/54OC2Ro.gif",
"Una imagen gif que te muestra cómo navegar a tu pestaña de vista previa e ingresar a tu nueva aplicación Clementine.js.",
"Ejecuta <code>node server.js</code> para iniciar el servidor. Actualiza tu pestaña de vista previa. Deberías poder ver el logo de Clementine.js. Pulsa \"sign in\" y acepta la solicitud de GitHub para autorizar la aplicación.",
""
],
[
"http://i.imgur.com/2IJfyvN.gif",
"//i.imgur.com/2IJfyvN.gif",
"Una imagen gif que te muestra cómo pulsar un botón para desencadenar una acción AJAX con Clementine.js y cómo ver tu perfil de usuario en los datos de autenticación provistos por GitHub.",
"Pulsa el botón que dice \"click me\" y verás que se incrementa el número de clics. Pulsa el botón de perfil (profile) y verás la información de tu perfil de GitHub.",
""
],
[
"http://i.imgur.com/bjO5pnq.gif",
"//i.imgur.com/bjO5pnq.gif",
"Una imagen gif que te muestra cómo crear un nuevo repositorio de GitHub GitHub y empujar allí tu código.",
"Crea un nuevo repositorio en GitHub. Luego copia su ULR .git. <br>Regresa a tu terminal de c9.io y establece tu URL remota de GitHub: <code>git remote set-url origin</code> seguido de la URL que copiaste de GitHub. <br>Ejecuta <code>git push origin master</code>. <br>Ahora ve de regreso a la página de GitHub y actualízala. Verás que tu código ahora está ahora en GitHub.",
"https://github.com/new"
],
[
"http://i.imgur.com/Qn0K65B.gif",
"//i.imgur.com/Qn0K65B.gif",
"Una imagen gif que te muestra cómo agregar complementos a Heroku.",
"Pronto agregaremos instrucciones para hacer que Clementine corra en Heroku. Por ahora, desarrolla tus Basejumps en c9.io.",
""

16
challenges/03-back-end-development-certification/back-end-development-certificate.json
View File

@ -8,25 +8,25 @@
"title": "Claim Your Back End Development Certificate",
"description": [
[
"http://i.imgur.com/8v3t84p.jpg",
"//i.imgur.com/8v3t84p.jpg",
"An image of our Back End Development Certificate",
"This challenge will give you your verified Back End Development Certificate. Before we issue your certificate, we must verify that you have completed all of the back end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
""
],
[
"http://i.imgur.com/HArFfMN.jpg",
"//i.imgur.com/HArFfMN.jpg",
"The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
"By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
"#"
],
[
"http://i.imgur.com/2qn7tHp.jpg",
"//i.imgur.com/2qn7tHp.jpg",
"An image of the text \"Back End Development Certificate requirements\"",
"Let's confirm that you have completed our back end development projects. Click the button below to verify this.",
"#"
],
[
"http://i.imgur.com/16SIhHO.jpg",
"//i.imgur.com/16SIhHO.jpg",
"An image of the word \"Congratulations\"",
"Congratulations! We've added your Back End Development Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
""
@ -94,25 +94,25 @@
"challengeType": 7,
"descriptionEs": [
[
"http://i.imgur.com/8v3t84p.jpg",
"//i.imgur.com/8v3t84p.jpg",
"Una imagen que muestra nuestro certificado de desarrollo del lado del servidor",
"Este desafío te otorga tu certificado autenticado de desarrollo del lado del servidor. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los proyectos de desarrollo del lado del servidor. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
""
],
[
"http://i.imgur.com/HArFfMN.jpg",
"//i.imgur.com/HArFfMN.jpg",
"Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
"Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
"#"
],
[
"http://i.imgur.com/2qn7tHp.jpg",
"//i.imgur.com/2qn7tHp.jpg",
"Una imagen del texto \"Back End Development Certificate requirements\"",
"Confirmemos que has completado todos nuestros proyectos de desarrollo del lado del servidor. Pulsa el botón siguiente para hacer la verificación.",
"#"
],
[
"http://i.imgur.com/16SIhHO.jpg",
"//i.imgur.com/16SIhHO.jpg",
"Una imagen de la palabra \"Congratulations\"",
"¡Felicitaciones! Hemos agregado tu certificado de desarrollo del lado del servidor. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
""