diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index fccfd77800..f077376656 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -51,47 +51,21 @@ npm install -g bower # Install Bower dependencies bower install - -# Create a .env file and populate it with the necessary API keys and secrets: -touch .env +``` +*Private Environment Variables (API Keys)* +```bash +# Create a copy of the "sample.env" and name it as ".env". +# Populate it with the necessary API keys and secrets: +cp sample.env .env ``` -Edit your `.env` file with the following API keys accordingly. If you only use email login, only the `MONGOHQ_URL`, `SESSION_SECRET`, `MANDRILL_USER` and `MANDRILL_PASSWORD` fields are necessary. Keep in mind if you want to use more services you'll have to get your own API keys for those services. If you only use a subset or no OAuth2 authentication methods, you may want to remove them from ```server/passport-providers.js``` - otherwise the server will complain about missing clientIDs at launch. +Edit your `.env` file and modify the API keys only for services that you will use. -``` -MONGOHQ_URL='mongodb://localhost:27017/freecodecamp' +Note : Not all keys are required, to run the app locally, however `MONGOHQ_URL` is the most important one. -FACEBOOK_ID=stuff -FACEBOOK_SECRET=stuff +If you only use email login, in addition to `MONGOHQ_URL`, `SESSION_SECRET`, add the `MANDRILL_USER` and `MANDRILL_PASSWORD` API Keys. Not setting these keys will throw an exception when you sign up which you can ignore, you will still be able to login, however you may get these keys [here](https://www.mandrill.com/signup/). Sign up and create a new pair of keys. -GITHUB_ID=stuff -GITHUB_SECRET=stuff - -GOOGLE_ID=stuff -GOOGLE_SECRET=stuff - -LINKEDIN_ID=stuff -LINKEDIN_SECRET=stuff - -MANDRILL_PASSWORD=stuff -MANDRILL_USER=stuff - -TRELLO_KEY=stuff -TRELLO_SECRET=stuff - -TWITTER_KEY=stuff -TWITTER_SECRET=stuff -TWITTER_TOKEN=stuff -TWITTER_TOKEN_SECRET=stuff - -BLOGGER_KEY=stuff - -SESSION_SECRET=secretstuff -COOKIE_SECRET='this is a secret' - -PEER=stuff -DEBUG=true -``` +You can leave the other keys as they are. Keep in mind if you want to use more services you'll have to get your own API keys for those services and edit those entries accordingly in the `.env` file. ```bash # Start the mongo server in a separate terminal @@ -174,7 +148,7 @@ Read the [Wiki article](https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/How-To 2. By default, all pull requests should be against the FCC main repo, `staging` branch. 3. Submit a [pull request](https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Pull-Request-Contribute) from your branch to Free Code Camp's `staging` branch. 3. The title (also called the subject) of your PR should be descriptive of your changes and succinctly indicates what is being fixed. - - **Do not add the issue number in the PR title**. + - **Do not add the issue number in the PR title**. - Examples: `Add Test Cases to Bonfire Drop It` `Correct typo in Waypoint Size Your Images` 4. In the body of your PR include a more detailed summary of the changes you made and why. - If the PR is meant to fix an existing bug/issue, then, at the end of your PR's commit message, append the keyword `closes` and #xxxx (where xxxx is the issue number). Example: `closes #1337`. diff --git a/README.md b/README.md index c4f3652ff3..a023668dfd 100644 --- a/README.md +++ b/README.md @@ -7,21 +7,41 @@ Welcome to Free Code Camp's open source codebase and curriculum! ======================= -Free Code Camp is an open-source community where you learn to code and help nonprofits. - -You start by working through our self-paced, browser-based full stack JavaScript curriculum. - -After you complete the first 400 hours worth of challenges (which involves building 10 single-page apps), you'll earn your Front End Development Certification. - -After you complete the second 400 hours worth of challenges (which involves building and deploying 5 full stack apps), you'll earn your Full Stack Development Certification. - -Then we'll pair you with another camper, an agile project manager, and a stakeholder from a nonprofit organization. Together, you'll plan and build an app that helps that nonprofit carry out its mission more effectively. +Free Code Camp is a friendly open-source community where you learn to code and help nonprofits. **We help our campers build job-worthy portfolios of real apps used by real people, while helping nonprofits.** +You start by working through our self-paced, browser-based full stack JavaScript curriculum. + +### By working through our curriculum, you can earn four certifications: +##### 1. Front End Certification +The first section will teach you the basics of how webpages work and also introduce you to JavaScript programming. + +Skills you'll practice include `HTML, CSS, JavaScript, jQuery` and `Bootstrap`. + +To earn this certification, you'll build **10 front-end projects** and implement many **JavaScript algorithms**. + +##### 2. Data Visualization Certification +The second section builds upon the first and introduces you to more advanced topics such as `Sass, React` and `D3`. + +To earn this certification, you'll build **5 React-apps** and **5 Data visualization apps** using `D3.js`. + +##### 3. Back End Certification +The third section introduces you to back end development using `Node.js, Express,` and `MongoDB`. It also teaches you about the important concept of source control using `Git`. + +To earn this certification, you'll build **5 APIs** and **5 full stack JavaScript apps**. + +##### 4. Full Stack Certification +The fourth section is where you'll get **real-world experience** by working on projects for **nonprofits**. +We'll pair you with another camper, an agile project manager, and a stakeholder from a nonprofit organization. Together, you'll plan, build and maintain apps that help that nonprofit carry out its mission more effectively. + +For this certification, you'll work on **two projects from scratch** and then **maintain/upgrade two existing projects**. + +--- + This code is running live at [FreeCodeCamp.com](http://www.FreeCodeCamp.com). We also have [Gitter](https://gitter.im/FreeCodeCamp/FreeCodeCamp), a [Medium publication](http://medium.freecodecamp.com), and even a [Twitch.tv channel](http://twitch.tv/freecodecamp). -[Join our community here](http://www.freecodecamp.com/signin). +### [Join our community here](http://www.freecodecamp.com/signin). Wiki ------------ @@ -34,13 +54,13 @@ Found a bug? Do not file an issue until you have followed these steps: 1. Read [Help I've Found a Bug](https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Help-I've-Found-a-Bug) wiki page and follow the instructions there. -2. Asked for confirmation in the appropriate [Help Room](https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Help-Rooms) +2. Ask for confirmation in the appropriate [Help Room](https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Help-Rooms). 3. Please *do not* open an issue without a 3rd party confirmation of your problem. Contributing ------------ -We welcome pull requests from Free Code Camp campers (our students) and seasoned JavaScript developers alike! Please, follow [these steps](CONTRIBUTING.md) to contribute. +We welcome pull requests from Free Code Camp campers (our students) and seasoned JavaScript developers alike! Please follow [these steps](CONTRIBUTING.md) to contribute. License ------- diff --git a/client/commonFramework/output-display.js b/client/commonFramework/output-display.js index 77bbf4c49c..9f96908a1f 100644 --- a/client/commonFramework/output-display.js +++ b/client/commonFramework/output-display.js @@ -30,9 +30,10 @@ window.common = (function(global) { codeOutput.setValue(`/** * Your output will go here. - * Console.log() -type statements - * will appear in your browser\'s - * DevTools JavaScript console. + * Any console.log() -type + * statements will appear in + * your browser\'s DevTools + * JavaScript console. */`); codeOutput.setSize('100%', '100%'); diff --git a/client/less/main.less b/client/less/main.less index c1755b2c16..8ce2c43f63 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -606,10 +606,10 @@ thead { margin-left: 20px; margin-right: 20px; @media (min-width: 991px) and (max-width: 1199px) { - height: 450px; + height: 300px !important; } @media (min-width: 1200px) { - height: 300px; + height: 200px !important; } } diff --git a/common/app/routes/Jobs/components/NewJob.jsx b/common/app/routes/Jobs/components/NewJob.jsx index 3683895f71..83aba5ee5b 100644 --- a/common/app/routes/Jobs/components/NewJob.jsx +++ b/common/app/routes/Jobs/components/NewJob.jsx @@ -61,15 +61,15 @@ const checkboxClass = dedent` `; function formatValue(value, validator, type = 'string') { - const formated = getDefaults(type); - if (validator && type === 'string') { - formated.valid = validator(value); + const formatted = getDefaults(type); + if (validator && type === 'string' && typeof value === 'string') { + formatted.valid = validator(value); } if (value) { - formated.value = value; - formated.bsStyle = formated.valid ? 'success' : 'error'; + formatted.value = value; + formatted.bsStyle = formatted.valid ? 'success' : 'error'; } - return formated; + return formatted; } const normalizeOptions = { diff --git a/package.json b/package.json index 11c553c7fe..8efd96aab2 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "errorhandler": "^1.4.2", "es6-map": "~0.1.1", "eslint": "~1.10.2", - "eslint-plugin-react": "^3.7.1", + "eslint-plugin-react": "^4.1.0", "express": "^4.13.3", "express-flash": "~0.0.2", "express-session": "^1.12.1", @@ -119,7 +119,7 @@ "thundercats": "^3.1.0", "thundercats-react": "~0.5.1", "url-regex": "^3.0.0", - "validator": "^4.2.1", + "validator": "^5.0.0", "webpack": "^1.9.12", "webpack-stream": "^3.1.0", "xss-filters": "^1.2.6", diff --git a/sample.env b/sample.env new file mode 100644 index 0000000000..352d994ff5 --- /dev/null +++ b/sample.env @@ -0,0 +1,32 @@ +MONGOHQ_URL='mongodb://localhost:27017/freecodecamp' + +FACEBOOK_ID=stuff +FACEBOOK_SECRET=stuff + +GITHUB_ID=stuff +GITHUB_SECRET=stuff + +GOOGLE_ID=stuff +GOOGLE_SECRET=stuff + +LINKEDIN_ID=stuff +LINKEDIN_SECRET=stuff + +MANDRILL_PASSWORD=stuff +MANDRILL_USER=stuff + +TRELLO_KEY=stuff +TRELLO_SECRET=stuff + +TWITTER_KEY=stuff +TWITTER_SECRET=stuff +TWITTER_TOKEN=stuff +TWITTER_TOKEN_SECRET=stuff + +BLOGGER_KEY=stuff + +SESSION_SECRET=secretstuff +COOKIE_SECRET='this is a secret' + +PEER=stuff +DEBUG=true diff --git a/seed/challenges/00-getting-started/getting-started.json b/seed/challenges/00-getting-started/getting-started.json index 53021d7b75..c63fe3dd2a 100644 --- a/seed/challenges/00-getting-started/getting-started.json +++ b/seed/challenges/00-getting-started/getting-started.json @@ -160,6 +160,81 @@ "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.", "" ] + ], + "nameFr": "Apprenez comment FreeCodeCamp fonctionne", + "descriptionFr": [ + [ + "http://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", + "Une capture d'écran de certains de nos développeurs réunis à Toronto.", + "Apprendre à code est dur. 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", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "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", + "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.", + "" + ] ] }, { @@ -282,6 +357,63 @@ "También puedes descargar la aplicación de chat para tu computadora o teléfono móvil.", "https://gitter.im/apps" ] + ], + "nameFr": "Créer un compte GitHub et rejoignez nos Salons de chat", + "descriptionFr": [ + [ + "http://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", + "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.
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.
", + "https://github.com/join" + ], + [ + "http://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", + "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", + "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", + "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", + "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", + "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", + "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" + ] ] }, { @@ -344,6 +476,15 @@ "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" ] + ], + "nameFr": "Configurer votre code portefeuille", + "descriptionFr": [ + [ + "http://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.", + "" + ] ] }, { @@ -453,6 +594,57 @@ "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\".", "" ] + ], + "nameFr": "Apprenez quoi faire quand vous êtes bloqué ?", + "descriptionFr": [ + [ + "http://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", + "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", + "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", + "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", + "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", + "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", + "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", + "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\".", + "" + ] ] } ] diff --git a/seed/challenges/01-front-end-development-certification/advanced-bonfires.json b/seed/challenges/01-front-end-development-certification/advanced-bonfires.json index b4e11573b7..57b1e76c08 100644 --- a/seed/challenges/01-front-end-development-certification/advanced-bonfires.json +++ b/seed/challenges/01-front-end-development-certification/advanced-bonfires.json @@ -412,7 +412,7 @@ "title": "Pairwise", "description": [ "Return the sum of all indices of elements of 'arr' that can be paired with one other element to form a sum that equals the value in the second argument 'arg'. If multiple sums are possible, return the smallest sum. Once an element has been used, it cannot be reused to pair with another.", - "For example, pairwise([1, 4, 2, 3, 0, 5], 7) should return 11 because 4, 2, 3 and 5 can be paired with each other to equal 7.", + "For example, pairwise([1, 4, 2, 3, 0, 5], 7) should return 11 because 4, 2, 3 and 5 can be paired with each other to equal 7 and their indices (1, 2, 3, and 5) sum to 11.", "pairwise([1, 3, 2, 4], 4) would only equal 1, because only the first two elements can be paired to equal 4, and the first element has an index of 0!", "Remember to use Read-Search-Ask if you get stuck. Try to pair program. Write your own code." ], diff --git a/seed/challenges/01-front-end-development-certification/bootstrap.json b/seed/challenges/01-front-end-development-certification/bootstrap.json index 4539156219..e5c56f5850 100644 --- a/seed/challenges/01-front-end-development-certification/bootstrap.json +++ b/seed/challenges/01-front-end-development-certification/bootstrap.json @@ -943,7 +943,7 @@ "Al usar el elemento span, 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 span. Luego, asigna a ese elemento span la clase text-danger para hacer que el texto sea rojo.", "Así es como lo harías con el elemento \"Top 3 things cats hate\":", - "<p>Top 3 things cats <span class = \"text-danger\">hate</span></p>" + "<p>Top 3 things cats <span class = \"text-danger\">hate:</span></p>" ] }, { @@ -1025,7 +1025,7 @@ "challengeType": 0, "nameEs": "Crea un encabezado personalizado", "descriptionEs": [ - "Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniéndolos en la misma línea.", + "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 div.", "Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:", "\"una", @@ -1117,6 +1117,11 @@ "nameEs": "Agrega iconos de Font Awesome a los botones", "descriptionEs": [ "Font Awesome es una librería de iconos muy conveniente. Estos iconos son imágenes vectoriales, almacenadas en formato .svg, y son tratados como si fueran fuentes. Puedes especificar su tamaño usando pixeles, y tomarán el tamaño de fuente de su elemento HTML padre.", + "Puedes añadir Font Awesome a cualquier aplicación sólo incluyendo y agregando el siguiente código al comienzo de tu HTML:", + "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/>", + "En este caso, ya lo hemos agregado por tí a esta página tras bambalinas.", + "El elemento i originalmente era usado para hacer textos en itálicas, pero ahora comunmente se usa para iconos. Le agregas clases de Font Awesome al elemento i para convertirlo en un ícono, por ejemplo:", + "<i class=\"fa fa-info-circle\"></i>", "Usa Font Awesome para agregar un icono de \"pulgar arriba\" thumbs-up a tu botón de like dándole un elemento i con las clases fa y fa-thumbs-up." ] }, @@ -1866,7 +1871,7 @@ "Vamos a darle un id único a cada uno de nuestros elementos div que tienen la clase well.", "Recuerda que puedes darle a un elemento un id como el siguiente:", "<div class=\"well\" id=\"center-well\">", - "Dale al pozo de la izquireda el id left-well. Al pozo de la derecha, dale un id de right-well." + "Dale al pozo de la izquireda el id left-well. Al pozo de la derecha, dale un id right-well." ] }, { @@ -1959,7 +1964,8 @@ "nameEs": "Dale a cada elemento un ID único", "descriptionEs": [ "También quisiéramos referirnos a cada botón por su id utilizando jQuery.", - "Dale a cada uno de tus botones un id único, comenzando con target1 y terminando con target6." + "Dale a cada uno de tus botones un id único, comenzando con target1 y terminando con target6.", + "Asegúrate que target1 a target3 queden en #left-well, mientras que target4 a target6 queden en #right-well." ] }, { diff --git a/seed/challenges/01-front-end-development-certification/html5-and-css.json b/seed/challenges/01-front-end-development-certification/html5-and-css.json index 5baa909e72..2df303dd55 100644 --- a/seed/challenges/01-front-end-development-certification/html5-and-css.json +++ b/seed/challenges/01-front-end-development-certification/html5-and-css.json @@ -32,9 +32,14 @@ "¡Bienvenido/a al primer desafío de programación de Free Code Camp!", "Puedes editar tu código en tu editor de texto, que hemos incrustado en esta página web.", "¿Ves el código en tu editor de texto que dice <h1>Hello</h1>? Ese es un elemento HTML.", - "La mayoría de los elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre. Las etiquetas de apertura se ven como: <h1>. Las etiquetas de cierre se ven como: </h1>. Fíjate que la única diferencia entre las etiquetas de apertura y de cierre es que estas últimas tienen un / después de su signo de apertura (<).", - "Cada desafio tiene pruebas que puedes ejecutar en cualquier momento presionado el botón \"Ejecutar pruebas\". Una vez logres pasar todas las pruebas, podrás avanzar al siguiente desafio.", - "Para pasar la prueba en este desafio, cambia tu texto de la etiqueta h1 para que diga \"Hello World\" en lugar de \"Hello\". Entonces presiona el botón \"Ejecutar pruebas\"." + "La mayoría de los elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre.", + "Las etiquetas de apertura se ven como:", + "<h1>", + " Las etiquetas de cierre se ven como:", + "</h1>", + "Fíjate que la única diferencia entre las etiquetas de apertura y de cierre es que estas últimas tienen un / después de su signo de apertura (<).", + "Cada desafío tiene pruebas que puedes ejecutar en cualquier momento presionado el botón \"Run tests\". Una vez logres pasar todas las pruebas, podrás avanzar al siguiente desafío.", + "Para pasar la prueba en este desafío, cambia tu texto de la etiqueta h1 para que diga \"Hello World\" en lugar de \"Hello\". Entonces presiona el botón \"Ejecutar pruebas\"." ], "nameDe": "Waypoint: Begrüße die HTML Elemente", "descriptionDe": [ @@ -46,6 +51,17 @@ "Sobald du eine Challenge abgeschlossen hast und alle Tests erfolgreich sind, wird der Button \"Go to my next challenge\" aktiv. Klicke auf diesen – oder drücke Steuerung (Control) und gleichzeitig Enter – um zur nächsten Challenge zu gehen.", "Um den Button \"Go to my next challenge\" dieser Lektion zu aktivieren, ändere den Inhalt des h1 Tags von \"Hello\" zu \"Hello World\"." ], + "namePtBR": "Diga Olá aos Elementos HTML", + "descriptionPtBR": [ + "Seja bem vindo ao primeiro desafio de programação do Free Code Camp!", + "Você pode editar o seu código em seu editor de texto, que embutimos aqui nesta página da web.", + "Consegue ver o código que diz <h1>Hello</h1> no seu editor de texto? Esse é um elemento HTML.", + "A maioria dos elementos HTML tem uma tag de abertura e uma tag de fechamento.", + "As tags de abertura são assim: <h1>. E as tags de fechamento são assim: </h1>.", + "Note que a única diferença entre as tags de abertura e fechamento é que as de fechamento possuem uma barra (/) depois do sinal de abertura (<).", + "Cada desafio possui testes que você pode executar a qualquer momento ao clicar no botão \"Executar testes\". Quando você conseguir passar em todos os testes, poderá avançar para o próximo desafio.", + "Para passar nos testes deste desafio, mude o texto do elemento h1 para que diga \"Hello World\" no lugar de \"Hello\". Depois, clique no botão \"Executar testes\"." + ], "type": "waypoint" }, { @@ -71,7 +87,7 @@ "challengeType": 0, "nameEs": "Encabezado con el elemento h2", "descriptionEs": [ - "Durante los siguientes desafios, construiremos una aplicación HTML que lucirá como la siguiente:", + "Durante los siguientes desafíos, construiremos una aplicación HTML5 que lucirá como la siguiente:", "\"Pantallazo", "El elemento h2 que ingreses creará un elemento h2 en el sitio web.", "Este elemento le dice al navegador cómo mostrar el texto que contiene.", @@ -85,6 +101,15 @@ "Dieses Element sagt dem Browser, wie der darin enthaltene Text gerendert wird.", "h2 Elemente sind ein wenig kleiner als h2 Elemente. Es gibt auch h3, h4, h5 und h6 Elemente." ], + "namePtBR": "Cabeçalho com o Elemento h2", + "descriptionPtBR": [ + "Durante os próximos desafios, construiremos um aplicativo em HTML que se parecerá como este:", + "\"Imagem", + "O elemento h2 que você criar gerará um elemento h2 na página da web.", + "Este elemento indica ao navegador a forma de mostrar o texto que contém.", + "Os elementos h2 são ligeiramente menores que os elementos h1. Há também os elementos h3, h4, h5 e h6.", + "Adicione uma tag h2 que diga \"CatPhotoApp\" para criar um segundo elemento HTML abaixo de seu elemento h1 chamado \"Hello World\"." + ], "type": "waypoint" }, { @@ -109,7 +134,8 @@ "nameEs": "Informa con el Elemento Párrafo", "descriptionEs": [ "Los elementos p son los elementos preferidos en los sitios web para los párrafos de texto en tamaño normal. La P es abreviatura de \"párrafo\".", - "Tú puedes crear un elemento párrafo como éste: <p>¡Soy una etiqueta p!</p>", + "Tú puedes crear un elemento párrafo de esta forma:", + "<p>¡Soy una etiqueta p!</p>", "Crea un elemento p debajo de tu elemento h2, y ponle el texto \"Hello Paragraph\"." ], "nameDe": "Waypoint: Informiere mit dem Paragraph Element", @@ -118,6 +144,13 @@ "p Elemente sind das bevorzugte Element für normalen Paragraphen-Text auf einer Website. P ist die Abkürzung für \"Paragraph\".", "Du kannst ein p Element so erzeugen: <p>Ich bin ein p Element!</p>" ], + "namePtBR": "Informe com o Elemento Parágrafo", + "descriptionPtBR": [ + "Os elementos p são os preferenciais para criar parágrafos de texto com tamanho normal nas páginas da web. P significa a abreviatura de \"parágrafo\".", + "Você pode criar um elemento p assim:", + "<p>Sou uma tag p!</p>", + "Crie um elemento p abaixo de seu elemento h2, e dê a ele o texto \"Hello Paragraph\"." + ], "type": "waypoint" }, { @@ -159,6 +192,13 @@ "Dies ist auch ein guter Weg, um Code inaktiv zu machen ohne diesen komplett löschen zu müssen.", "Du kannst einen Kommentar mit <!-- starten und ihn mit --> wieder beenden." ], + "namePtBR": "Descomente o HTML", + "descriptionPtBR": [ + "\"Comentar\" é uma forma de deixar anotações em seu código sem afetá-lo.", + "Comentar também é um jeito conveniente de deixar seu código inativo sem precisar apagá-lo por completo.", + "Você pode iniciar um comentário com <!-- e terminar seu comentário com -->.", + "Remova o comentário dos elementos h1, h2 e p." + ], "type": "waypoint" }, { @@ -197,6 +237,12 @@ "Denk daran, dass du einen Kommentar mit <!-- anfangen und mit --> wieder beenden kannst.", "Hier wirst du deinen Kommentar vor dem h2 Element beenden müssen." ], + "namePtBR": "Comente o HTML", + "descriptionPtBR": [ + "Lembre-se que para iniciar um comentário você precisa utilizar <!--, e para terminar um comentário é necessário usar -->.", + "Aqui, você deverá terminar o comentário antes que seu elemento h2 inicie.", + "Comente o elemento h1 e o elemento p, e deixe o elemento h2 sem nenhum comentário." + ], "type": "waypoint" }, { @@ -223,8 +269,8 @@ "descriptionEs": [ "Los desarrolladores web tradicionalmente usan Lorem Ipsum como texto de relleno. Se llama texto Lorem Ipsum porque esas son las primeras dos palabras de una cita famosa de Cicerón de la Roma Antigua.", "El texto Lorem Ipsum ha sido usado como texto de relleno en las imprentas desde el siglo 16, y esta tradición continúa en la web.", - "Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos algo llamado Kitty Ipsum!", - "Remplaza el texto dentro de tu elemento p con las primeras palabras de este texto kitty ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + "Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos un texto llamado Kitty Ipsum!", + "Reemplaza el texto dentro de tu elemento p con las primeras palabras de este texto kitty ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], "nameDe": "Waypoint: Fülle die Lücken mit Platzhalter-Text", "descriptionDe": [ @@ -234,6 +280,13 @@ "Nun gut, fünf Jahrhunderte sind lange genug. Da wir eine CatPhotoApp entwickeln, lass uns stattdessen lieber \"Kitty Ipsum\" nutzen!", "Hier sind die ersten paar Wörter von \"Kitty Ipsum\", die du kopieren und an die richtige Stelle einfügen kannst: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], + "namePtBR": "Preencha Espaços com Texto de Espaço Reservado", + "descriptionPtBR": [ + "Desenvolvedores web tradicionalmente usam Lorem Ipsum como texto de preenchimento. Lorem Ipsum é chamado assim pois essas são as duas primeiras palavras de uma passagem famosa de Cícero da Roma Antiga.", + "O texto Lorem Ipsum tem sido utilizado como texto de espaço reservado por compositores desde o século 16, e esta tradição continua na web.", + "Bem, 5 séculos é um tempo longo o bastante. Já que estamos desenvolvendo um aplicativo sobre fotos de gatos (CatPhotoApp), vamos usar algo chamado Kitty Ipsum.", + "Substitua o texto dentro do seu elemento p pelas primeiras palavras deste texto Kitty Ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + ], "type": "waypoint" }, { @@ -269,6 +322,12 @@ "Unser Smartphone hat nicht sehr viel vertikalen Raum.", "Lass uns die unwichtigen Elemente entfernen, damit wir unsere CatPhotoApp bauen können." ], + "namePtBR": "Apague Elementos HTML", + "descriptionPtBR": [ + "Nosso celular não possui muito espaço vertical.", + "Vamos eliminar os elementos desnecessários para começar a construir nosso CatPhotoApp.", + "Apague o elemento h1 para simplificar o nosso espaço." + ], "type": "waypoint" }, { @@ -306,6 +365,15 @@ "Wir können das bewerkstelligen, indem wir den \"style\" des h2 Elements ändern.", "So könntest du die Textfarbe des h2 Elements in Blau ändern: <h2 style=\"color: blue\">CatPhotoApp</h2>" ], + "namePtBR": "Substitua a Cor do Texto", + "descriptionPtBR": [ + "Agora vamos substituir a cor de parte do nosso texto.", + "Podemos fazer isso mudando o style do elemento h2.", + "A propriedade de estilo responsável pela cor do texto se chama \"color\".", + "Você pode mudar a cor do texto de seu elemento h2 para azul assim:", + "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "Mude o estilo do elemento h2 para que seu texto fique com a cor vermelha." + ], "type": "waypoint" }, { @@ -340,13 +408,12 @@ "Con CSS, hay cientos de propiedades CSS que puedes usar para cambiar como un elemento se ve en una página web.", "Cuando ingresaste <h2 style=\"color: red\">CatPhotoApp<h2>, le estuviste dando al elemento h2 un estilo en línea", "Esa es una forma de agregar estilo a un elemento, pero una manera mejor es usando Hojas de Estilo en Cascada (Cascading Style Sheets, CSS).", - "Al principio de tu código, crea un elemento style como este: <style></style>", + "Al principio de tu código, crea un elemento style como este:", + "
<style>
</style>
", "Dentro de ese elemento style, puedes crear un selector CSS para todos los elementos h2. Por ejemplo, si quisieras que todos los elementos h2 fueran rojos, tu elemento style se vería así:", - "<style>", - "  h2 {color: red;}", - "</style>", + "
<style>
  h2 {color: red;}
</style>
", "Fíjate que es importante tener llaves de apertura y de cierre ({ y }) alrededor del estilo para cada elemento. También necesitas asegurarte que el estilo para tu elemento esté entre las etiquetas style de apertura y cierre. Finalmente, asegúrate de agregar el punto y coma al final de cada uno de los estilos de tu elemento.", - "Borra el atributo style de tu elemento h2 y a cambio escribe un elemento style CSS. Agrea el CSS necesario para hacer todos los elementos h2 de color azul." + "Borra el atributo style de tu elemento h2 y a cambio escribe un elemento style CSS. Agrega el CSS necesario para hacer todos los elementos h2 de color azul." ], "nameDe": "Waypoint: Nutze CSS Selektoren um Elemente zu gestalten", "descriptionDe": [ @@ -358,6 +425,19 @@ "Innerhalb des Style Elements kannst du einen CSS Selektor oder \"selector\" für alle h2 Elemente erstellen. Wenn du zum Beispiel alle h2 Elemente Rot färben willst, schreibst du: <style>h2 {color: red;}</style>", "Beachte, dass du öffnende und schließende geschwungene Klammern ({ und }) um jeden Style setzen solltest. Außerdem sollten deine Styles innerhalb dieser Klammern stehen. Zum Schluss benötigst du am Ende jedes Styles ein Semikolon." ], + "namePtBR": "Use Seletores CSS para Estilizar Elementos", + "descriptionPtBR": [ + "Com o CSS, existem centenas de propriedades que você pode utilizar para modificar a forma de como um elemento pode ser visto em uma página da internet.", + "Quando você usou o <h2 style=\"color: red\">CatPhotoApp<h2>, você deu ao elemento h2 um estilo inline.", + "Essa é uma forma de adicionar estilos a um elemento, mas o jeito recomendado para isso é utilizar Folhas de Estilo em Cascata (Cascading Style Sheets, CSS).", + "Acima de seu código, crie um elemento style como esse: <style></style>", + "Dentro do elemento style, é possível criar um seletor CSS para todos os elementos h2. Por exemplo, se você quiser que todos os elementos h2 tenham a cor vermelha, seu elemento style será assim:", + "<style>", + "  h2 {color: red;}", + "</style>", + "Observe que é importante utilizar as chaves de abertura e de fechamento ({ e }) ao redor do estilo de cada elemento. Também é necessário que o estilo de seu elemento esteja entre as tags de abertura e fechamento. Por fim, não se esqueça de adicionar o ponto-e-vírgula no final de cada um dos estilos de seu elemento.", + "Apague o atributo style de seu elemento h2 e então crie um elemento style CSS. Adicione o CSS necessário para fazer com que todos os elementos h2 tenham a cor azul." + ], "type": "waypoint" }, { @@ -396,17 +476,13 @@ "descriptionEs": [ "Las clases son estilos reutilizables que pueden añadirse a elementos HTML.", "Aquí esta un ejemplo de una declaración de una clase CSS:", - "<style>", - "  .blue-text {", - "    color: blue;", - "  }", - "</style>", + "
<style>
  .blue-text {
    color: blue;
  }
</style>
", "Puedes ver que hemos creado una clase CSS llamada \"blue-text\" dentro de la etiqueta <style>", "Puedes aplicar una clase a un elemento HTML de esta manera:", "<h2 class=\"blue-text\">CatPhotoApp</h2>", "Nota que en tu elemento style CSS, las clases deben comenzar con un punto. En los elementos HTML, las declaraciones de clase, NO deben comenzar con punto. ", - "En vez de de crear un nuevo elemento style, intenta eliminar la declaración de estilo de h2 de tus elementos de estilo existentes y reemplazala por la declaración de clase .red-text.", - "Crea una clase CSS llamada red-text y aplicala a tu elemento h2" + "Dentro de tu elemento style, cambia el selector h2 por .red-text y cambia el valor del color de blue a red.", + "Dale a tu elemento h2 el atributo class con el valor de 'red-text'." ], "nameDe": "Waypoint: Nutze eine CSS Klasse um ein Element zu gestalten", "descriptionDe": [ @@ -419,6 +495,22 @@ "Beachte, dass Klassen in deinem CSS style Element mit einem Punkt beginngen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.", "Anstatt ein neues style Element zu erstellen, versuche die h2 Style-Deklaration von deinem bereits bestehenden Style Element zu entfernen und sie mit der Klassen-Deklaration \".red-text\" zu ersetzen." ], + "namePtBR": "Use Classes CSS para Estilizar Elementos", + "descriptionPtBR": [ + "As classes são estilos reutilizáveis que podem ser adicionadas a elementos HTML.", + "Aqui está um exemplo de como declarar uma classe com CSS:", + "<style>", + "  .blue-text {", + "    color: blue;", + "  }", + "</style>", + "Veja que criamos uma classe CSS chamada \"blue-text\" no interior da tag <style>.", + "Você pode aplicar uma classe a um elemento HTML assim:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Note que em seu elemento style CSS, as classes devem começar com um ponto. Já nos elementos HTML, as declarações de classes não devem começar com o ponto.", + "Ao invés de criar um novo elemento style, tente eliminar a declaração de estilo de h2 dos elementos de estilo existentes, e troque ela pela declaração de classe .red-text.", + "Crie uma classe CSS chamada red-text e então a aplique em seu elemento h2." + ], "type": "waypoint" }, { @@ -454,9 +546,7 @@ "descriptionEs": [ "Recuerda que puedes adjuntar clases a elementos HTML utilizando class=\"tu-clase-aqui\" dentro de la etiqueta de apertura del elemento mismo.", "Recuerda que los selectores de clase CSS requieren un punto al principio, así:", - ".blue-text {", - "  color: blue;", - "}", + "
.blue-text {
  color: blue;
}
", "Pero recuerda también que las declaraciones de clase en elementos NO llevan punto:", "<h2 class=\"blue-text\">CatPhotoApp<h2>", "Aplica la clase red-text a tus elementos h2 y p" @@ -467,6 +557,17 @@ "Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel class=\"deine-klasse\" innerhalb des öffnenden Tags schreibst.", "Du weißt, es gehört ein Punkt vor CSS Klassen: .red-text { color: blue; }. Aber diese Klassen-Deklarationen brauchen keinen Punkt: <h2 class=\"blue-text\">CatPhotoApp<h2>" ], + "namePtBR": "Estilize Múltiplos Elementos com uma Classe CSS", + "descriptionPtBR": [ + "Lembre-se que é possível adicionar classes a elementos HTML ao utilizar class=\"sua-classe-aqui\" dentro da tag de abertura do elemento.", + "Relembre também que os seletores de classes CSS exigem um ponto em seu início, assim:", + ".blue-text {", + "  color: blue;", + "}", + "Contudo, não se esqueça que as declarações de classes em elementos não utilizam ponto, assim:", + "<h2 class=\"blue-text\">CatPhotoApp<h2>", + "Adicione a classe red-text aos seus elementos h2 e p." + ], "type": "waypoint" }, { @@ -495,18 +596,18 @@ "assert($(\"p\").length > 1, 'message: You need 2 p elements with Kitty Ipsum text.');", "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p elements has a closing tag.');", "assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'message: Your p element should contain the first few words of the provided additional kitty ipsum text.');", - "assert($(\"p:not([class])\").length === 1, 'message: Do not add a class attribute to your new p element.');", + "assert($(\"p:not([class])\").length === 1, 'message: Do not add a class attribute to the second p element, without removing it from the first one.');", "assert(parseInt($(\"p:not([class])\").css(\"font-size\"), 10) > 15, 'message: Give elements with the p tag a font-size of 16px. Browser and Text zoom should be at 100%.');" ], "challengeType": 0, "nameEs": "Cambia el tamaño de fuente de un elemento.", "descriptionEs": [ "El tamaño de fuente es controlado por la propiedad CSS \"font-size\", como aquí:", - "h1 {", - "  font-size: 30px;", - "}", + "

h1 {
  font-size: 30px;
}
", "Crea un segundo elemento p con el siguiente texto kitty ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", - "Dentro de la misma etiqueta <style> que creamos para tu clase red-text, pon el font-size de los elementos p a 16 pixeles (16px)." + "Dentro de la misma etiqueta <style> que creamos para tu clase red-text, pon el font-size de los elementos p a 16 pixeles (16px).", + "Nota
Debido a diferencias en los navegadores, es posible que tengas que establecer el zoom en 100% para pasar las pruebas en este desafío.", + "Además, no agregues ningún atributo de clase a tu elemento p." ], "nameDe": "Waypoint: Ändere die Schriftgröße eines Elements", "descriptionDe": [ @@ -515,6 +616,15 @@ "Zuerst erstellst du ein zweites p Element mit dem folgenden Kitty Ipsum Text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", "Versuche nun beiden p Elementen die Schriftgröße von 16 Pixeln (16px) zu geben. Du kannst das innerhalb des selben <style> Tags machen, welches wir für deine \"red-text\" Klasse erstellt haben." ], + "namePtBR": "Mude o Tamanho da Fonte de um Elemento", + "descriptionPtBR": [ + "O tamanho da fonte é controlado pela propriedade CSS \"font-size\", como aqui:", + "h1 {", + "  font-size: 30px;", + "}", + "Crie um segundo elemento p que tenha o seguinte texto Kitty Ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "Dentro da mesma tag <style> que criamos para sua classe red-text, modifique o font-size dos elementos p para que tenha um tamanho de 16 pixels (16px)." + ], "type": "waypoint" }, { @@ -550,10 +660,8 @@ "descriptionEs": [ "Puedes establecer el tipo de letra de un elemento usando la propiedad font-family.", "Por ejemplo, si quieres establecer el tipo de letra de tu elemento h2 como Sans-serif, usa el siguiente CSS:", - "h2 {", - "  font-family: Sans-serif;", - "}", - "Haga que todos sus elementos p utilicen el tipo de letra Monospace." + "
h2 {
  font-family: Sans-serif;
}
", + "Haz que todos tus elementos p utilicen el tipo de letra Monospace." ], "nameDe": "Waypoint: Definiere die Schriftart eines Elements", "descriptionDe": [ @@ -561,6 +669,15 @@ "Du kannst einem Element mit \"font-family\" eine Schriftart zuweisen.", "Wenn du zum Beispiel deinem h2 Element die Schriftart \"Sans-serif\" zuweisen willst, kannst du das mit dem folgenden CSS tun: h2 { font-family: Sans-serif; }" ], + "namePtBR": "Defina a Fonte para um Elemento", + "descriptionPtBR": [ + "Você pode estabelecer o estilo de fonte para um elemento ao utilizar a propriedade font-family.", + "Por exemplo, se você quiser estabelecer o estilo de fonte de seu elemento h2 como Sans-serif, você poderá utilizar o seguinte código em CSS:", + "h2 {", + "  font-family: Sans-serif;", + "}", + "Faça com que todos os elementos p utilizem o estilo de fonte Monospace." + ], "type": "waypoint" }, { @@ -599,12 +716,12 @@ "challengeType": 0, "nameEs": "Importar un tipo de letra de Google", "descriptionEs": [ - "Ahora, importemos y apliquemos un tipo de letra de Google (tenga en cuenta que si Google es bloqueado en su país, debera saltarse este desafio).", - "Primero, haga un llamado a Google para tomar el tipo de letra Lobster y para cargarlo en su HTML.", - "Copie la siguiente porción de código y péguela en la parte superior de su editor de texto:", + "Ahora, importemos y apliquemos un tipo de letra de Google (ten en cuenta que si Google está bloqueado en tu país, deberás saltarte este desafío).", + "Primero, haz un llamado a Google para obtener el tipo de letra Lobster y para cargarlo en tu HTML.", + "Copia la siguiente porción de código y pégala en la parte superior de tu editor de texto:", "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", - "Ahora establezca Lobster como valor de font-family en su elemento h2.", - "Aplique la familia de fuente (font-family) Lobster a su elemento h2." + "Ahora puedes establecer Lobster como valor de font-family de tu elemento h2.", + "Aplica el tipo de letra (font-family) Lobster a tu elemento h2." ], "nameDe": "Waypoint: Importiere eine Google Font", "descriptionDe": [ @@ -614,6 +731,14 @@ "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem h2 Element hinzufügen." ], + "namePtBR": "Importe uma Fonte a Partir do Google Fonts", + "descriptionPtBR": [ + "Agora, vamos importar e aplicar um estilo de fonte por meio do Google Fonts.", + "Primeiro, faça um chamado ao Google Fonts para poder utilizar a fonte chamada Lobster e carregá-la em seu HTML.", + "Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:", + "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", + "Agora, estableça Lobster como o valor para font-family em seu elemento h2." + ], "type": "waypoint" }, { @@ -655,15 +780,13 @@ "assert(new RegExp(\"-->\", \"gi\").test(code), 'message: Be sure to close your comment by adding -->.');" ], "challengeType": 0, - "nameEs": "Especifique como deben degradarse los tipos de letra", + "nameEs": "Especifica cómo deben degradarse los tipos de letra", "descriptionEs": [ - "Hay diversos tipos de letra disponibles por omisión en todos los navegadores. Estos incluyend Monospace, Serif y Sans-Serif", + "Hay diversos tipos de letra disponibles por omisión en todos los navegadores. Estos incluyen Monospace, Serif y Sans-Serif", "Cuando un tipo de letra no está disponible, puedes decirle al navegador que \"degrade\" a otro tipo de letra.", "Por ejemplo, si quieres que un elemento use el tipo Helvetica, o que se degrade a Sans-Serif cuando Helvetica no esté disponible, puedes usar el siguiente estilo CSS:", - "p {", - "  font-family: Helvetica, Sans-Serif;", - "}", - "Ahora ponga como comentarios sus llamadas a tipos de letra de Google, de forma que el tipo Lobster no esté disponible. Note como se degrada al tipo Monospace." + "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "Ahora pon en forma de comentario tu llamada a tipos de letra de Google, de forma que el tipo Lobster no esté disponible. Nota cómo se degrada al tipo Monospace." ], "nameDe": "Waypoint: Spezifiziere die Rangfolge von Schriftarten", "descriptionDe": [ @@ -673,6 +796,16 @@ "Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem \"Monospace\", \"Serif\" und \"Sans-Serif\". Probiere deinem h2 Element gleichzeitig die Schriftart \"Lobster\" und als Alternative \"Monospace\" zu geben.", "Jetzt versuche den Aufruf von Google Fonts in deinem HTML auszukommentieren, sodass \"Lobster\" nicht zur Verfügung steht. Beachte, wie nun die Schriftart \"Monospace\" geladen wird." ], + "namePtBR": "Especifique como as Fontes Devem se Degradar", + "descriptionPtBR": [ + "Existem diversas fontes que estão disponíveis por padrão nos navegadores de internet, incluindo Monospace, Serif e Sans-Serif.", + "No entanto, quando uma fonte não está disponível, podemos dizer ao navegador que \"degrade\" a outro tipo de fonte.", + "Por exemplo, se você deseja que um elemento use a fonte Helvetica, e que degrade para a fonte Sans-Serif quando a Helvetica não estiver disponível, você pode utilizar o seguinte CSS:", + "p {", + "  font-family: Helvetica, Sans-Serif;", + "}", + "Agora, comente o seu chamado para a fonte do Google, para que a fonte Lobster não esteja disponível. Note como a fonte degrada para Monospace." + ], "type": "waypoint" }, { @@ -717,7 +850,7 @@ "descriptionEs": [ "Puedes agregar imágenes a tu sitio web mediante el uso del elemento img, y apuntar a la URL específica de una imagen utilizando el atributo src.", "Un ejemplo de esto sería:", - "<img src=\"http://www.your-image-source.com/your-image.jpg\">", + "<img src=\"http://www.origen-de-tu-imagen.com/tu-imagen.jpg\">", "Ten en cuenta que en la mayoría de los casos, los elementos img son de cierre automático.", "Prueba con esta imagen:", "https://bit.ly/fcc-relaxing-cat" @@ -729,6 +862,15 @@ "Ein Beispiel dafür wäre <img src=\"www.bild-quelle.com/bild.jpg\"/>. Beachte, dass img Elemente in den meisten Fällen selbstschließend sind.", "Versuche es mit diesem Bild: https://bit.ly/fcc-relaxing-cat" ], + "namePtBR": "Adicione Imagens em sua Página Web", + "descriptionPtBR": [ + "Você pode adicionar imagens à sua página da internet com o uso do elemento img, e apontar para a URL específica de uma imagem utilizando o atributo src.", + "Um exemplo para isso seria:", + "<img src=\"http://www.your-image-source.com/your-image.jpg\">", + "Observe que na maior parte dos casos, os elementos img são de fechamento automático.", + "Agora, tente fazer isso com essa imagem:", + "https://bit.ly/fcc-relaxing-cat" + ], "type": "waypoint" }, { @@ -772,14 +914,11 @@ "challengeType": 0, "nameEs": "Da tamaño a tus imágenes", "descriptionEs": [ - "CSS tiene una propiedad llamada width que controla el ancho de un elemento. Al igual que con los tipos de letra, usaremos px (píxeles) para especificar el ancho de la imagen. ", + "CSS tiene una propiedad llamada width que controla el ancho de un elemento. Al igual que con las fuentes de letra, usaremos px (píxeles) para especificar el ancho de la imagen. ", "Por ejemplo, si queremos crear una clase CSS llamada larger-image que le de a los elementos HTML un ancho de 500 píxeles, usaríamos:", - "<estilo>", - "  .larger-image{", - "    width: 500px;", - "  }", - "</style>", - "Crea una clase llamada smaller-image y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho." + "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "Crea una clase llamada smaller-image y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho.", + "Nota
Debido a diferencias en los navegadores, es posible que tengas que establecer el zoom en 100% para pasar las pruebas en este desafío." ], "nameDe": "Waypoint: Skaliere deine Bilder", "descriptionDe": [ @@ -787,6 +926,17 @@ "Die Breite eines Elements wird mit dem CSS Attribut width kontrolliert. Wie bei Schriftarten verwenden wir Pixel (px) um die Größe zu definieren.", "Wenn wir also die CSS Klasse \"larger-image\" erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir: <style> .larger-image { width: 500px; } </style>" ], + "namePtBR": "Dê um Tamanho para suas Imagens", + "descriptionPtBR": [ + "O CSS possui uma propriedade chamada width, que controla a largura de um elemento. Da mesma forma que com as fontes, vamos utilizar px (pixels) como medida para especificar a largura de nossa imagem.", + "Por exemplo, se queremos criar uma classe CSS chamada larger-image que dê aos elementos HTML uma largura de 500px, vamos usar:", + "<estilo>", + "  .larger-image{", + "    width: 500px;", + "  }", + "</style>", + "Crie uma classe chamada smaller-image e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura." + ], "type": "waypoint" }, { @@ -839,16 +989,10 @@ "nameEs": "Añade bordes alrededor de tus elementos", "descriptionEs": [ "Los bordes CSS tienen propiedades como style, color y width", - "Por ejemplo, si queremos crear un borde de 5 píxeles rojo alrededor de un elemento HTML, podríamos utilizar esta clase:", - "<style>", - "  .thin-red-border {", - "    border-color: red;", - "    border-width: 5px;", - "    border-style: solid;", - "  }", - "</style>", - "Crea una clase llamada thick-green-border que ponga un borde verde de 10 píxeles de ancho con un estilo de solid en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ", - "Recuerda que puedes aplicar múltiples clases a un elemento separando una clase de otra con un espacio. Haces esto dentro de tu atributo class. Por ejemplo:", + "Por ejemplo, si queremos crear un borde rojo de 5 píxeles alrededor de un elemento HTML, podríamos utilizar esta clase:", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "Crea una clase llamada thick-green-border que ponga un borde verde de 10 píxeles de ancho con un estilo solid en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ", + "Recuerda que puedes aplicar clases múltiples a un elemento separando cada clase con un espacio dentro del atributo class. Por ejemplo:", "<img class=\"clase1 clase2\">" ], "nameDe": "Waypoint: Füge Rahmen zu deinen Elementen hinzu", @@ -857,6 +1001,21 @@ "CSS Rahmen haben Attribute wie Style, Color und Width.", "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, würden wir so vorgehen: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>" ], + "namePtBR": "Adicione Bordas ao Redor de seus Elementos", + "descriptionPtBR": [ + "As bordas em CSS possuem propriedades como style, color e width", + "Por exemplo, se queremos criar uma borda com tamanho de 5 pixels de cor vermelha ao redor de um elemento HTML, podemos utilizar esta classe:", + "<style>", + "  .thin-red-border {", + "    border-color: red;", + "    border-width: 5px;", + "    border-style: solid;", + "  }", + "</style>", + "Crie uma classe chamada thick-green-border que insira uma borda verde de 10 pixels de largura com um estilo solid ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.", + "Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo class. Por exemplo:", + "<img class=\"clase1 clase2\">" + ], "type": "waypoint" }, { @@ -906,20 +1065,11 @@ "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'message: Your image should have a border radius of 10px');" ], "challengeType": 0, - "nameEs": "Añade bordes alrededor de tus elementos", + "nameEs": "Agrega esquinas redondeadas usando Border Radius", "descriptionEs": [ - "Los bordes CSS tienen propiedades como style, color y width", - "Por ejemplo, si queremos crear un borde de 5 píxeles rojo alrededor de un elemento HTML, podríamos utilizar esta clase:", - "<style>", - "  .thin-red-border {", - "    border-color: red;", - "    border-width: 5px;", - "    border-style: solid;", - "  }", - "</style>", - "Crea una clase llamada thick-green-border que ponga un borde verde de 10 píxeles de ancho con un estilo de solid en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ", - "Recuerda que puedes aplicar múltiples clases a un elemento separando una clase de otra con un espacio. Haces esto dentro de tu atributo class. Por ejemplo:", - "<img class=\"class1 class2\">" + "Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius.", + "Puedes especificar border-radius usando pixeles. Dale a tu foto del gato un border-radius de 10px.", + "Nota: este desafío acepta múltiples soluciones. Por ejemplo, puedes agregar border-radius ya sea a la clase .thick-green-border o a la clase .smaller-image." ], "nameDe": "Waypoint: Füge abgerundete Ecken mit Border Radius hinzu", "descriptionDe": [ @@ -927,6 +1077,12 @@ "Das Bild hat nun spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.", "Du kannst einen border-radius mit Pixeln deklarieren. Das beeinflusst die Rundung der Ecken. Füge dieses Attribut zu deiner thick-green-border Klasse hinzu und setze es auf 10 Pixel." ], + "namePtBR": "Insira Bordas Arredondadas com o Border Radius", + "descriptionPtBR": [ + "Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado border-radius.", + "Você pode especificar um border-radius com pixels. Adicione um border-radius de 10px para a sua foto.", + "Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o border-radius tanto para a classe .thick-green-border como para a classe .smaller-image." + ], "type": "waypoint" }, { @@ -976,17 +1132,21 @@ "assert(code.match(/50%/g), 'message: Be sure to use a percentage instead of a pixel value.');" ], "challengeType": 0, - "nameEs": "Añade esquinas redondeadas con un radio de borde", + "nameEs": "Crea imágenes circulares usando Border Radius", "descriptionEs": [ - "Tu foto del gato actualmente tiene esquinas cuadradas. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius. ", - "Puedes especificar un border-radius en píxeles. Esto afectará lo redondeadas de las esquinas. Añade esta propiedad a tu clase thick-green-border y establecela a 10px. ", - "Dale a tu foto del gato un border-radius de 10px." + "Además de pixeles, puedes especificar un border-radius usando porcentajes.", + "Dale a tu foto del gato un border-radius de 50%." ], "nameDe": "Waypoint: Erstelle runde Bilder mit einem Border Radius", "descriptionDe": [ "Gib deinem Katzenfoto einen border-radius von 50 %.", "Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen." ], + "namePtBR": "Deixe as Imagens Circulares com o Border Radius", + "descriptionPtBR": [ + "Assim como pixels, você também pode usar o border-radius com porcentagens.", + "Dê para a sua foto de gato um border-radius de 50%." + ], "type": "waypoint" }, { @@ -1043,12 +1203,12 @@ "challengeType": 0, "nameEs": "Enlaza páginas externas con elementos ancla", "descriptionEs": [ - "Los elementos a, también conocido como elementos ancla, se utilizan para enlazar a contenido fuera de la página actual.", + "Los elementos a, también conocidos como elementos ancla, se utilizan para enlazar a contenido fuera de la página actual.", "Aquí está un diagrama de un elemento a. En este caso, el elemento a se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ", - " \"un ", + " \"un ", "He aquí un ejemplo:", - "<p>Aquí está un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo siga.</p>", - "Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de anclaje \"fotos de gatos\"." + "<p>Aquí está un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>", + "Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de ancla \"fotos de gatos\"." ], "nameDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen", "descriptionDe": [ @@ -1057,6 +1217,15 @@ "\"Ein", "Hier ist ein Beispiel: <p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>" ], + "namePtBR": "Ligue Páginas Externas com o Elemento Âncora", + "descriptionPtBR": [ + "Os elementos a, também conhecidos como elementos âncora, são utilizados para ligar conteúdo fora da página atual.", + "Aqui está um diagrama de um elemento a. Neste caso, o elemento a é utilizado no meio de um elemento de parágrafo, o que significa que o link externo aparecerá no meio de uma frase.", + " \"diagrama", + "Veja um exemplo:", + "<p>Aqui está um <a href=\"http://freecodecamp.com\"> link ligado ao Free Code Camp</a> para que você o siga.</p>", + "Crie um elemento a que esteja ligado ao site http://freecatphotoapp.com e tenha como texto de âncora \"fotos de gatos\"." + ], "type": "waypoint" }, { @@ -1118,14 +1287,14 @@ "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');" ], "challengeType": 0, - "nameEs": "Anida un elemento de anclaje dentro de un párrafo", + "nameEs": "Anida un elemento de ancla dentro de un párrafo", "descriptionEs": [ "Una vez más, aquí está un diagrama de un elemento a para tu referencia:", "\"un", "He aquí un ejemplo:", - "<p>Aquí un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>", - "anidamiento significa poner un elemento dentro de otro elemento.", - "Ahora anida el elemento a existente dentro de un nuevo elemento p para que el párrafo que lo rodee diga \"View more cat photos\", pero donde sólo \"cat photos\" sea un enlace, y el resto sea texto plano ." + "<p>Aquí hay un <a href=\"http://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>", + "Anidamiento simplemente significa poner un elemento dentro de otro elemento.", + "Ahora anida el elemento a existente dentro de un nuevo elemento p (justo después del elemento h2 que ya tienes) de tal forma que el párrafo que lo rodee diga \"View more cat photos\", pero que sólo \"cat photos\" sea un enlace, y el resto sea texto plano ." ], "nameDe": "Waypoint Umschließe ein Anker Element mit einem Paragraphen", "descriptionDe": [ @@ -1133,6 +1302,15 @@ "Hier ist nochmal ein Beispiel für ein a Element: \"Ein", "So könnte es aussehen: <p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>" ], + "namePtBR": "Aninhe o Elemento Âncora no Interior de um Parágrafo", + "descriptionPtBR": [ + "Outra vez, aqui está um diagrama de um elemento a para você usar como referência.", + "\"diagrama", + "Veja um exemplo:", + "<p>Este é um <a href=\"http://freecodecamp.com\"> link ligado ao Free Code Camp</a> para que você o siga.</p>", + "Aninhamento significa ter um elemento no interior de outro elemento.", + "Agora, aninhe o elemento a existente dentro de um novo elemento p de forma que o parágrafo diga \"View more cat photos\", mas onde apenas \"cat photos\" seja um link, e o resto seja texto comum." + ], "type": "waypoint" }, { @@ -1187,7 +1365,7 @@ "nameEs": "Haz vínculos muertos utilizando el símbolo de numero", "descriptionEs": [ "A veces quieres agregar elementos a a tu sitio web antes de saber qué enlazarán.", - "Esto también es útil cuando estás cambiando el comportamiento de un enlace usando jQuery, que aprenderemos más adelante.", + "Esto también es útil cuando estás cambiando el comportamiento de un enlace usando jQuery, lo cual aprenderemos más adelante.", "Reemplaza el atributo href de tu elemento a con un #, también conocido como un símbolo de número o de hash, para convertirlo en un vínculo muerto." ], "nameDe": "Waypoint: Erstelle tote Links mit dem Hash Symbol", @@ -1197,6 +1375,12 @@ "Das ist auch nützlich, wenn du die Funktion eines Links mit jQuery verändern willst. Das werden wir noch behandeln.", "Ersetze den Inhalt des href Attributs deines a Elements mit einem Hash Symbol um einen toten Link zu erzeugen." ], + "namePtBR": "Crie Links Inativos com o Símbolo Cerquilha", + "descriptionPtBR": [ + "As vezes você pode querer adicionar elementos a em sua página web antes de saber o link que as ligará.", + "Isso também é útil quando você desejar mudar o comportamento de um link utilizando jQuery, o que vamos aprender mais adiante.", + "Substitua o atributo href de seu elemento a por um #, também conhecido como símbolo de hash ou hashtag. Isso o transformará em um link inativo." + ], "type": "waypoint" }, { @@ -1254,7 +1438,7 @@ "challengeType": 0, "nameEs": "Convierte una imagen en un vínculo", "descriptionEs": [ - "Puedes convertir elementos en enlaces al anidarlos con un elemento a.", + "Puedes convertir elementos en enlaces al anidarlos dentro de un elemento a.", "Anida tu imagen dentro de un elemento a. He aquí un ejemplo: ", "<a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a>", "Recuerda usar # como atributo href de tu elemento a con el fin de convertirlo en un vínculo muerto.", @@ -1268,6 +1452,13 @@ "Vergewissere dich, dass du ein Hash Symbol (#) innerhalb des href Attributs des a Elements nutzt, um daraus einen toten Link zu machen.", "Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link." ], + "namePtBR": "Transforme uma Imagem em um Link", + "descriptionPtBR": [ + "Você pode transformar elementos em links ao aninhá-los com um elemento a.", + "Aninhe sua imagem dentro de um elemento a. Temos aqui um exemplo.", + "<a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a>", + "Lembre de usar # como atributo href de seu elemento a para tornar o link inativo." + ], "type": "waypoint" }, { @@ -1323,10 +1514,10 @@ "challengeType": 0, "nameEs": "Agrega texto alternativo a una imagen para dar Accesibilidad", "descriptionEs": [ - "Los atributos alt también conocidos como texto alternativo, son lo que se presentarán en caso que el navegador no puede mostrar la imagen. Los atributos alt también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Y los motores de búsqueda también examinan los atributos alt. ", + "Los atributos alt también conocidos como texto alternativo, son lo que se presentarán en caso que el navegador no pueda mostrar la imagen. Los atributos alt también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Los motores de búsqueda también examinan los atributos alt. ", "En resumen, ¡cada imagen debe tener un atributo alt!", "Puedes agregar un atributo alt justo en el elemento img así:", - "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"tu texto alternativo\">", + "<img src=\"www.fuente-de-tu-imagen.com/tu-imagen.jpg\" alt=\"tu texto alternativo\">", "Añade un atributo alt con el texto A cute orange cat lying on its back a nuestra foto del gato." ], "nameDe": "Waypoint: Füge Alt Text für mehr Barrierefreiheit hinzu", @@ -1337,6 +1528,14 @@ "alt Attribute sind nützlich um Personen – und Web Crawlers wie Google – zu sagen was in einem Foto abgebildet wird. Das ist extrem wichtig, damit blinde oder visuell eingeschränkte Menschen den Inhalt der Website verstehen.", "Du kannst das alt Attribut direkt in das Img Element einfügen: <img src=\"www.bild-quelle.com/bild.jpg\" alt=\"Dein Alt Text.\"/>" ], + "namePtBR": "Dê Acessibilidade a uma Imagem com Texto Alternativo", + "descriptionPtBR": [ + "Os atributos alt, também conhecidos como texto alternativo, serão apresentados caso se por qualquer motivo o navegador não possa mostrar a imagem. Os atributos alt também são importantes para que usuários cegos ou com alguma deficiência visual possam entender o que uma imagem retrata. Além disso, os motores de busca também examinam os atributos alt.", + "Em resumo: Todas as imagem devem ter um atributo alt!", + "Você pode adicionar um atributo alt já no elemento img assim:", + "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"seu texto alternativo\">", + "Adicione um atributo alt com o texto A cute orange cat lying on its back para a nossa foto com o gato." + ], "type": "waypoint" }, { @@ -1399,10 +1598,7 @@ "HTML tiene un elemento especial para la creación de listas no ordenadas, o listas con estilo viñeta.", "Las listas no ordenadas comienzan con un elemento <ul>. A continuación contienen una cantidad de elementos <li>.", "Por ejemplo: ", - "<ul>", - "  <li>leche</li>", - "  <li>queso</li>", - "</ul>", + "
<ul>
  <li>leche</li>
  <li>queso</li>
</ul>
", "creará una lista con viñetas y con elementos \"leche\" y \"queso\".", "Elimina los dos últimos elementos p y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman." ], @@ -1413,6 +1609,18 @@ "ungeordnete Listen starten mit einem <ul> Element. Dann beinhalten sie eine gewisse Anzahl an <li> Elementen.", "Als Beispiel: <ul><li>Milch</li><li>Käse</li></ul> würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen." ], + "namePtBR": "Crie uma Lista Não Ordenada com Marcadores", + "descriptionPtBR": [ + "O HTML possui um elemento especial para a criação de listas não ordenadas, ou listas com marcadores.", + "As listas não ordenadas iniciam com um elemento <ul>. Logo após, possuem uma série de elementos <li>.", + "Por exemplo:", + "<ul>", + "  <li>leite</li>", + "  <li>queijo</li>", + "</ul>", + "Isso criará uma lista com marcadores que tem como elementos \"leite\" e \"queijo\".", + "Apague os dois últimos elementos p e no final da página crie uma lista não ordenada com três coisas que os gatos adoram." + ], "type": "waypoint" }, { @@ -1483,10 +1691,7 @@ "HTML tiene un elemento especial para la creación de listas ordenadas, o listas de estilo numerado.", "Las listas ordenadas comienzan con un elemento <ol>. Luego contienen un número de elementos <li>.", "Por ejemplo:", - "<ol>", - "  <li>Garfield</li>", - "  <li>Sylvester</li>", - "</ol>", + "
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>
", "creará una lista numerada con \"Garfield\" y \"Sylvester\".", "Crea una lista ordenada de los 3 cosas que más odian los gatos." ], @@ -1497,6 +1702,18 @@ "Geordnete Listen starten mit einem <ol> Element. Dann enthalten sie eine gewisse Anzahl an <li> Elementen.", "Als beispiel: <ol><li>hydrogen</li><li>Helium</li></ol> würde eine nummerierte Liste aus \"Hydrogen\" und \"Helium\" erstellen." ], + "namePtBR": "Crie uma Lista Ordenada", + "descriptionPtBR": [ + "O HTML possui um elemento especial para a criação de listas ordenadas, ou listas numeradas.", + "As listas ordenadas iniciam com um elemento <ol>. Logo após, contém uma série de elementos <li>.", + "Por exemplo:", + "<ol>", + "  <li>Garfield</li>", + "  <li>Sylvester</li>", + "</ol>", + "Isso criará uma lista numerada com \"Garfield\" e \"Sylvester\".", + "Crie uma lista ordenada com as três coisas que os gatos mais odeiam." + ], "type": "waypoint" }, { @@ -1564,7 +1781,7 @@ "nameEs": "Crea un campo de texto", "descriptionEs": [ "Ahora vamos a crear un formulario web.", - "Los campos de texto son una manera conveniente de obtener retroalimentación de su usuario.", + "Los campos de texto son una manera conveniente de obtener retroalimentación de tu usuario.", "Puedes crear uno como este:", "<input type=\"text\">", "Ten en cuenta que los elementos input son de cierre automático.", @@ -1576,6 +1793,15 @@ "Eingabefelder sind ein guter Weg, um Daten von Nutzern zu erhalten.", "So kannst du eines erstellen: <input type=\"text\">. Beachte, dass input Elemente selbstschließend sind." ], + "namePtBR": "Crie um Campo de Texto", + "descriptionPtBR": [ + "Agora vamos criar um formulário web.", + "Os campos de texto são uma forma conveniente de obter uma resposta do usuário.", + "Você pode criar um assim:", + "<input type=\"text\">", + "Note que os elementos input são de fechamento automático.", + "Crie um elemento input de tipo text abaixo de suas listas." + ], "type": "waypoint" }, { @@ -1637,7 +1863,8 @@ ], "tests": [ "assert($(\"input[placeholder]\").length > 0, 'message: Add a placeholder attribute text input element.');", - "assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'message: Set the value of your placeholder attribute to \"cat photo URL\".');" + "assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'message: Set the value of your placeholder attribute to \"cat photo URL\".');", + "assert($(\"input[type=text]\").length > 0 && code.match(/URL\\s*[\"\\']\\s*\\/?>/gi), 'message: The finished input element should have valid syntax.');" ], "challengeType": 0, "nameEs": "Agrega un texto de relleno a un campo de texto", @@ -1653,6 +1880,13 @@ "Platzhalter erscheinen in input Feldern, bevor der Nutzer etwas eingibt.", "Du kannst Platzhalter auf folgende Weise erstellen: <input type=\"text\" placeholder=\"Das ist ein Platzhalter.\">" ], + "namePtBR": "Adicione Texto Indicativo a um Campo de Texto", + "descriptionPtBR": [ + "O texto indicativo é o que aparece em um campo de texto antes que um usuário tenha escrito algo.", + "Você pode criar um texto indicativo assim:", + "<input type=\"text\" placeholder=\"isso é um texto indicativo\">", + "Estabeleça o valor do texto indicativo do seu campo de texto como \"cat photo URL\"." + ], "type": "waypoint" }, { @@ -1731,6 +1965,13 @@ "Du kannst Web Formulare bauen, die Daten zu einem Server übertragen – und das nur mit HTML. Das wird möglich, indem du eine Aktion für dein form Element bestimmst.", "Zum Beispiel: <form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"></form>" ], + "namePtBR": "Crie um Elemento de Formulário", + "descriptionPtBR": [ + "É possível construir formulários web que realmente enviem dados a um servidor utilizando nada além de HTML puro. Você pode fazer isso especificando uma ação em seu elemento form.", + "Por exemplo:", + "<form action=\"/url-para-onde-você-quer-enviar-os-dados-do-formulário\"></form>", + "Aninhe seu campo de texto em um elemento form. Adicione o atributo action=\"/submit-cat-photo\" para este elemento de formulário." + ], "type": "waypoint" }, { @@ -1795,7 +2036,7 @@ "tests": [ "assert($(\"form\").children(\"button\").length > 0, 'message: Your form should have a button inside it.');", "assert($(\"button\").attr(\"type\") === \"submit\", 'message: Your submit button should have the attribute type set to submit.');", - "assert($(\"button\").text().match(/submit/gi), 'message: Your submit button should have the text \"Submit\".');", + "assert($(\"button\").text().match(/^\\s*submit\\s*$/gi), 'message: Your submit button should only have the text \"Submit\".');", "assert(code.match(/<\\/button>/g) && code.match(/