feat: Simplify production's onboarding (#15528)
* simplify onboarding * add hint button for all basic and algorithm challenges * update onboarding and settings * add chat room link to settings
This commit is contained in:
Quincy Larson
committed by
Berkeley Martinez
Berkeley Martinez
parent
b28d1b00db
commit
544f4b5de0
@ -1,10 +1,6 @@
|
||||
[{
|
||||
"content": "Map",
|
||||
"link": "/map"
|
||||
}, {
|
||||
"content": "Chat",
|
||||
"link": "//gitter.im/FreeCodeCamp/FreeCodeCamp",
|
||||
"target": "_blank"
|
||||
},{
|
||||
"content": "Forum",
|
||||
"link": "http://forum.freecodecamp.com/",
|
||||
@ -13,6 +9,6 @@
|
||||
"content": "About",
|
||||
"link": "/about"
|
||||
},{
|
||||
"content": "Shop",
|
||||
"link": "/shop"
|
||||
"content": "Donate",
|
||||
"link": "/donate"
|
||||
}]
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,103 +1,11 @@
|
||||
{
|
||||
"name": "Gear up for Success",
|
||||
"order": 3,
|
||||
"time": "20 minutes",
|
||||
"time": "5 minutes",
|
||||
"challenges": [
|
||||
{
|
||||
"id": "573c96eac9a6be092d7830c1",
|
||||
"title": "Join our Forum",
|
||||
"description": [
|
||||
[
|
||||
"//i.imgur.com/y0XxmxQ.gif",
|
||||
"A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.",
|
||||
"Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!",
|
||||
"http://forum.freecodecamp.com/"
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/GxCpl7x.gif",
|
||||
"A gif showing how you can upload your profile picture.",
|
||||
"We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/Gop2PmJ.gif",
|
||||
"A gif showing how you can introduce yourself on our self introduction forum thread.",
|
||||
"You can make your first forum post right now by clicking the button below to go to the introduction thread. You can reply to the original post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.",
|
||||
"https://forum.freecodecamp.com/t/welcome-to-freecodecamps-forum/92385"
|
||||
]
|
||||
],
|
||||
"releasedOn": "May 17, 2016",
|
||||
"challengeSeed": [],
|
||||
"tests": [],
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7,
|
||||
"titleEs": "Join our Forum",
|
||||
"descriptionEs": [
|
||||
[
|
||||
"//i.imgur.com/y0XxmxQ.gif",
|
||||
"A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.",
|
||||
"Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!",
|
||||
"http://forum.freecodecamp.com/"
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/GxCpl7x.gif",
|
||||
"A gif showing how you can upload your profile picture.",
|
||||
"We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/Gop2PmJ.gif",
|
||||
"A gif showing how you can introduce yourself on our self introduction forum thread.",
|
||||
"You can make your first forum post right now by clicking the button below to go to the introduction thread. You can reply to the original post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.",
|
||||
"https://forum.freecodecamp.com/t/welcome-to-freecodecamps-forum/92385"
|
||||
]
|
||||
],
|
||||
"titleFr": "Join our Forum",
|
||||
"descriptionFr": [
|
||||
[
|
||||
"//i.imgur.com/y0XxmxQ.gif",
|
||||
"A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.",
|
||||
"Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!",
|
||||
"http://forum.freecodecamp.com/"
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/GxCpl7x.gif",
|
||||
"A gif showing how you can upload your profile picture.",
|
||||
"We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/Gop2PmJ.gif",
|
||||
"A gif showing how you can introduce yourself on our self introduction forum thread.",
|
||||
"You can make your first forum post right now by clicking the button below to go to the introduction thread. You can reply to the original post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.",
|
||||
"https://forum.freecodecamp.com/t/welcome-to-freecodecamps-forum/92385"
|
||||
]
|
||||
],
|
||||
"titleDe": "Join our Forum",
|
||||
"descriptionDe": [
|
||||
[
|
||||
"//i.imgur.com/y0XxmxQ.gif",
|
||||
"A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.",
|
||||
"Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!",
|
||||
"http://forum.freecodecamp.com/"
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/GxCpl7x.gif",
|
||||
"A gif showing how you can upload your profile picture.",
|
||||
"We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/Gop2PmJ.gif",
|
||||
"A gif showing how you can introduce yourself on our self introduction forum thread.",
|
||||
"You can make your first forum post right now by clicking the button below to go to the introduction thread. You can reply to the original post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.",
|
||||
"https://forum.freecodecamp.com/t/welcome-to-freecodecamps-forum/92385"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "560add71cb82ac38a17513c2",
|
||||
"title": "Join a Free Code Camp Group in Your City",
|
||||
"title": "Join a freeCodeCamp Study Group in Your City",
|
||||
"description": [
|
||||
[
|
||||
"//i.imgur.com/WBVydfk.jpg",
|
||||
@ -107,8 +15,8 @@
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/IqBnnuFr.jpg",
|
||||
"A picture of some of our campers meeting in a local cafe.",
|
||||
"Find your local study group and click it. This will take you to its Facebook page. Click the \"Join group\" button. Someone from the group should approve you shortly.",
|
||||
"A picture of our study group directory.",
|
||||
"Click the button below to open our study group directory. <br><br>Find your local study group and click it. This will take you to their Facebook group. <br><br>Click the <bold>Join group</bold> button. Once someone from the group approves your join request, and you'll get a notification within Facebook, and can go back and introduce yourself.",
|
||||
"https://www.freecodecamp.com/study-group-directory/"
|
||||
]
|
||||
],
|
||||
@ -162,6 +70,50 @@
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "560ade65cb82ac38a17513c2",
|
||||
"title": "Watch Coding Videos on the freeCodeCamp YouTube Channel",
|
||||
"description": [
|
||||
[
|
||||
"//i.imgur.com/kA6uW8H.gif",
|
||||
"A gif showing that you should click the \"subscribe\" button on freeCodeCamp YouTube channel, then click the bell icon, the notification confirmation box, then the \"Save\" button.",
|
||||
"We publish new coding videos on YouTube every day. <br><br>Click the button below to open our YouTube channel. Then click the red <bold>subscribe</bold> button. Then click the <bold>bell</bold> that appears. Check the box in the message that pops up, then click <bold>save</bold>.",
|
||||
"https://www.youtube.com/freecodecamp"
|
||||
]
|
||||
],
|
||||
"releasedOn": "April 15, 2016",
|
||||
"challengeSeed": [],
|
||||
"tests": [],
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7,
|
||||
"titleEs": "Miranos programar en vivo por YouTube",
|
||||
"descriptionEs": [
|
||||
[
|
||||
"//i.imgur.com/4jUhEsb.jpg",
|
||||
"An image of Briana at the whiteboard teaching in a YouTube video.",
|
||||
"Our community's YouTube channel features video tutorials and demos of projects that campers have built for nonprofits. We add new videos every week. The button below will take you to our YouTube channel, where you can subscribe for free.",
|
||||
"https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ?sub_confirmation=1"
|
||||
]
|
||||
],
|
||||
"titleFr": "Regarde nous coder en direct sur Twitch.tv",
|
||||
"descriptionFr": [
|
||||
[
|
||||
"//i.imgur.com/8rtyRY1.gif",
|
||||
"Une gif montrant comment tu peux créer un compte sur Twitch.tv et suivre notre chaîne.",
|
||||
"Nos campers codent fréquemment en direct sur Twitch.tv, un site de streaming populaire. Tu peux créer un compte en moins d’une minute, et suivre la chaîne de Free Code Camp. Une fois suivi, tu auras l’option de recevoir un email à chaque fois qu’un de nos campers est en direct. Et donc tu peux rejoindre plusieurs campers pour regarder et interagir sur le salon de chat. C’est une façon d’apprendre en regardant les autres coder.",
|
||||
"https://twitch.tv/freecodecamp"
|
||||
]
|
||||
],
|
||||
"titleDe": "Schaue uns auf Twitch.tv Live beim Programmieren zu",
|
||||
"descriptionDe": [
|
||||
[
|
||||
"//i.imgur.com/8rtyRY1.gif",
|
||||
"Ein GIF, das dir zeigt, wie du dich bei Twitch.tv anmelden und unserem Kanal folgen kannst.",
|
||||
"Unsere Camper programmieren oft Live auf Twitch.tv, einer populären Streaming-Website. Du kannst in weniger als einer Minute einen Account anlegen und dann dem Kanal von Free Code Camp folgen. Wenn du dem Kanal folgst, hast du die Option E-Mail Benachrichtigungen zu bekommen, sobald einer unserer Camper live geht. Dann kannst du Dutzenden Campern folgen und ihnen beim Programmieren zusehen sowie in Chats interagieren. Das ist eine lustige und lockere Art und Weise, um von anderen Personen zu lernen, wie sie ihre Projekte umsetzen.",
|
||||
"https://twitch.tv/freecodecamp"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "58d9cc820ce2197370032a13",
|
||||
"title": "Become a Supporter",
|
||||
@ -177,49 +129,6 @@
|
||||
"tests": [],
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7
|
||||
},
|
||||
{
|
||||
"id": "570add8ccb82ac38a17513c3",
|
||||
"title": "Join our LinkedIn Alumni Network",
|
||||
"description": [
|
||||
[
|
||||
"//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"
|
||||
]
|
||||
],
|
||||
"challengeSeed": [],
|
||||
"tests": [],
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7,
|
||||
"titleEs": "Únete a nuestra red de alumnos en LinkedIn",
|
||||
"descriptionEs": [
|
||||
[
|
||||
"//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"
|
||||
]
|
||||
],
|
||||
"titleFr": "Rejoignez notre réseau de lauréats sur Linkedin",
|
||||
"descriptionFr": [
|
||||
[
|
||||
"//i.imgur.com/vJyiXzU.gif",
|
||||
"Une gif qui montre comment tu peux cliquer sur le lien ci-dessous et remplir les champs nécessaires pour ajouter le certificat de Free Code Camp à votre profil LinkedIn.",
|
||||
"LinkedIn reconnait Free Code Camp comme une université. Tu peux avoir accès à notre large réseau de lauréats en ajoutant Free Code Camp à la section éducation de ton profil LinkedIn. L’année d’obtention du diplôme est la prochaine année. Pour le \"Degré\", c’est \"Full Stack Web Development Certification\". Pour le \"Domaine d’études\", c’est \"Computer Software Engineering\". Puis sauvegardez les changements.",
|
||||
"https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp"
|
||||
]
|
||||
],
|
||||
"titleDe": "Tritt unserem LinkedIn Alumni Netzwerk bei",
|
||||
"descriptionDe": [
|
||||
[
|
||||
"//i.imgur.com/vJyiXzU.gif",
|
||||
"Ein GIF, das dir zeigt, wie du den unten stehenden Link anklicken kannst und welche Felder du ausfüllen musst, damit du Free Code Camp zu deinem LinkedIn Profil hinzufügst.",
|
||||
"LinkedIn erkennt Free Code Camp als Universität an. Du bekommst auf unser großes Alumni Netzwerk zugriff, indem du Free Code Camp zum Ausbildungsbereich deines LinkedIn Profils hinzufügst. Setze deinen Abschlusszeitpunkt auf das nächste Jahr. In das Feld \"Abschluss\" schreibe \"Full Stack Web Development Certification\". In das Feld \"Studienfach\" schreibe \"Computer Software Engineering\". Dann klicke auf den \"Speichern\" Button.",
|
||||
"https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp"
|
||||
]
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,9 +1,37 @@
|
||||
{
|
||||
"name": "HTML5 and CSS",
|
||||
"order": 2,
|
||||
"order": 1,
|
||||
"time": "5 hours",
|
||||
"helpRoom": "Help",
|
||||
"challenges": [
|
||||
{
|
||||
"id": "560add10cb82ac38a17513be",
|
||||
"title": "Learn How freeCodeCamp Works",
|
||||
"description": [
|
||||
[
|
||||
"//i.imgur.com/ZMOCvg9.jpg",
|
||||
"A picture of six freeCodeCamp campers sitting around a table coding together.",
|
||||
"Welcome. You're now part of a supportive coding community. You can code online or in-person with people in thousands of cities around the world.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/EUyHs60.jpg",
|
||||
"A picture of the technologies you'll learn: HTML5, CSS, JavaScript, Databases, Git & GitHub, Node.js, React.js, D3.js.",
|
||||
"You'll learn to code by completing coding challenges and building projects. You'll also earn verified certificates along the way.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/LRnNMU5.png",
|
||||
"An image of our open source projects on GitHub.",
|
||||
"Then you'll get experience by contributing to open source projects used by nonprofits. This will help prepare you for a coding job. Let's get started!",
|
||||
""
|
||||
]
|
||||
],
|
||||
"challengeSeed": [],
|
||||
"tests": [],
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7
|
||||
},
|
||||
{
|
||||
"id": "bd7123c8c441eddfaeb5bdef",
|
||||
"descriptionPtBR": [
|
||||
@ -651,7 +679,7 @@
|
||||
"Remarquez que nous avons créer une classe CSS nommée <code>blue-text</code> à l'intérieur de notre balise <code><style></code>.",
|
||||
"Vous pouvez appliquer une classe à un élément HTML comme ceci :",
|
||||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||||
"Prenez note que que dans votre élément CSS <code>style</code>, les classes doivent débuter par un point. Dans les déclarations de classes à l'intérieur des éléments HTML, on doit omettre le point du début.",
|
||||
"Prenez note que que dans votre élément CSS <code>style</code>, les classes doivent débuter par un point. Dans les déclarations de classes à l'intérieur des éléments HTML, on doit omettre le point du début.",
|
||||
"À l'intérieur de votre élément <code>style</code>, changez le sélecteur du <code>h2</code> pour <code>.red-text</code> et changez la couleur, passant de <code>blue</code> à <code>red</code>.",
|
||||
"Donnez à votre élément <code>h2</code> l'attribut de classe la valeur de <code>red-text</code>."
|
||||
],
|
||||
@ -731,14 +759,14 @@
|
||||
"Примените класс <code>red-text</code> к вашим элементам <code>h2</code> и <code>p</code>."
|
||||
],
|
||||
"titleFR": "Stylez plusieurs éléments avec une classe CSS",
|
||||
"descriptionFR": [
|
||||
"Souvenez-vous que vous pouvez ajouter des classes aux éléments HTML en utilisant <code>class=\"votre-classe-ici\"</code> à l'intérieur de la balise ouvrante correspondante.",
|
||||
"descriptionFR": [
|
||||
"Souvenez-vous que vous pouvez ajouter des classes aux éléments HTML en utilisant <code>class=\"votre-classe-ici\"</code> à l'intérieur de la balise ouvrante correspondante.",
|
||||
"Souvenez-vous que les sélecteurs CSS nécessitent un point au début comme ceci :",
|
||||
"<blockquote>.blue-text {<br> color: blue;<br>}</blockquote>",
|
||||
"<blockquote>.blue-text {<br> color: blue;<br>}</blockquote>",
|
||||
"Rappelez-vous également que les déclarations de classes n'ont pas de point, comme ceci :",
|
||||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||||
"Appliquez la classe <code>red-text</code> à vos éléments <code>h2</code> et <code>p</code>."
|
||||
],
|
||||
],
|
||||
"title": "Style Multiple Elements with a CSS Class",
|
||||
"description": [
|
||||
"Remember that you can attach classes to HTML elements by using <code>class=\"your-class-here\"</code> within the relevant element's opening tag.",
|
||||
@ -807,14 +835,14 @@
|
||||
"Также, пожалуйста, не добавляйте атрибут класс к вашему новому элементу <code>p</code>."
|
||||
],
|
||||
"titleFR": "Changez la taille de police d'un élément",
|
||||
"descriptionFR": [
|
||||
"descriptionFR": [
|
||||
"La taille de police est contrôlée par la propriété CSS <code>font-size</code>, comme ceci :",
|
||||
"<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>",
|
||||
"Créez un second élément <code>p</code> après l'élément <code>p</code> existant avec le texte kitty ipsum suivant : <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
|
||||
"À l'intérieur de la même balise <code><style></code> qui contiens votre classe <code>.red-text</code>, créez une nouvelle entrée pour les éléments <code>p</code> et paramétrer le <code>font-size</code> à 16 pixels (<code>16px</code>).",
|
||||
"<strong>Prenez note</strong><br>Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi.",
|
||||
"<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>",
|
||||
"Créez un second élément <code>p</code> après l'élément <code>p</code> existant avec le texte kitty ipsum suivant : <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
|
||||
"À l'intérieur de la même balise <code><style></code> qui contiens votre classe <code>.red-text</code>, créez une nouvelle entrée pour les éléments <code>p</code> et paramétrer le <code>font-size</code> à 16 pixels (<code>16px</code>).",
|
||||
"<strong>Prenez note</strong><br>Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi.",
|
||||
"Également, veuillez ne pas ajouter d'attributs de classe à votre nouvel élément <code>p</code>."
|
||||
],
|
||||
],
|
||||
"title": "Change the Font Size of an Element",
|
||||
"description": [
|
||||
"Font size is controlled by the <code>font-size</code> CSS property, like this:",
|
||||
@ -881,12 +909,12 @@
|
||||
"Присвойте шрифт <code>Monospace</code> всем вашим элементам <code>p</code>."
|
||||
],
|
||||
"titleFR": "Paramétrer la famille de police d'un élément",
|
||||
"descriptionFR": [
|
||||
"Vous pouvez paramétrer la police d'un élément en utilisant la propriété <code>font-family</code>.",
|
||||
"descriptionFR": [
|
||||
"Vous pouvez paramétrer la police d'un élément en utilisant la propriété <code>font-family</code>.",
|
||||
"Par exemple, si vous voulez paramétrer la police de votre élément <code>h2</code> à <code>Sans-serif</code>, vous devez utiliser le CSS suivant :",
|
||||
"<blockquote>h2 {<br> font-family: Sans-serif;<br>}</blockquote>",
|
||||
"<blockquote>h2 {<br> font-family: Sans-serif;<br>}</blockquote>",
|
||||
"Faites en sorte que tous vos éléments <code>p</code> aient la police <code>Monospace</code>."
|
||||
],
|
||||
],
|
||||
"title": "Set the Font Family of an Element",
|
||||
"description": [
|
||||
"You can set an element's font by using the <code>font-family</code> property.",
|
||||
@ -952,13 +980,13 @@
|
||||
"Примените свойство <code>font-family</code> со значением <code>Lobster</code> к вашему элементу <code>h2</code>."
|
||||
],
|
||||
"titleFR": "Importer une police de Google",
|
||||
"descriptionFR": [
|
||||
"Maintenant, importons et appliquons une police de Google (prenez note que si Google est interdit d'accès dans votre pays, vous devrez omettre ce défi).",
|
||||
"Premièrement, vous devrez faire un <code>appel</code> vers Google pour prendre la police <code>Lobster</code> et la charger dans votre HTML.",
|
||||
"Copier l'extrait de code suivant et coller le dans le haut de votre éditeur de code :",
|
||||
"Maintenant vous pouvez paramétrer <code>Lobster</code> comme valeur de police de votre élément <code>h2</code>.",
|
||||
"descriptionFR": [
|
||||
"Maintenant, importons et appliquons une police de Google (prenez note que si Google est interdit d'accès dans votre pays, vous devrez omettre ce défi).",
|
||||
"Premièrement, vous devrez faire un <code>appel</code> vers Google pour prendre la police <code>Lobster</code> et la charger dans votre HTML.",
|
||||
"Copier l'extrait de code suivant et coller le dans le haut de votre éditeur de code :",
|
||||
"Maintenant vous pouvez paramétrer <code>Lobster</code> comme valeur de police de votre élément <code>h2</code>.",
|
||||
"Appliquer la valeur <code>Lobster</code> à la <code>font-family</code> de votre élément <code>h2</code>."
|
||||
],
|
||||
],
|
||||
"title": "Import a Google Font",
|
||||
"description": [
|
||||
"Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).",
|
||||
@ -1031,13 +1059,13 @@
|
||||
"Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт <code>Lobster</code> становится недоступен. Обратите внимание как происходит деградация до шрифта <code>Monospace</code>."
|
||||
],
|
||||
"titleFR": "Spécifier comment vos polices devraient dégrader",
|
||||
"descriptionFR": [
|
||||
"Il y a plusieurs polices par défaut qui sont disponible dans tous les navigateurs Web. Ceci comprend <code>Monospace</code>, <code>Serif</code> et <code>Sans-Serif</code>.",
|
||||
"Quand une police n'est pas disponible, vous pouvez demander au navigateur de \"dégrader\" vers une autre police.",
|
||||
"descriptionFR": [
|
||||
"Il y a plusieurs polices par défaut qui sont disponible dans tous les navigateurs Web. Ceci comprend <code>Monospace</code>, <code>Serif</code> et <code>Sans-Serif</code>.",
|
||||
"Quand une police n'est pas disponible, vous pouvez demander au navigateur de \"dégrader\" vers une autre police.",
|
||||
"Par exemple, si vous voulez qu'un élément utilise la police <code>Helvetica</code>, mais également dégrader vers <code>Sans-Serif</code> lorsque la police <code>Helvetica</code> n'est pas disponible, vous pouvez utiliser le style CSS suivant :",
|
||||
"<blockquote>p {<br> font-family: Helvetica, Sans-Serif;<br>}</blockquote>",
|
||||
"<blockquote>p {<br> font-family: Helvetica, Sans-Serif;<br>}</blockquote>",
|
||||
"Maintenant, commenter votre appel vers les polices de Google, pour que la police <code>Lobster</code> ne soit pas disponible. Regardez comment la police se dégrade vers <code>Monospace</code>."
|
||||
],
|
||||
],
|
||||
"title": "Specify How Fonts Should Degrade",
|
||||
"description": [
|
||||
"There are several default fonts that are available in all browsers. These include <code>Monospace</code>, <code>Serif</code> and <code>Sans-Serif</code>",
|
||||
@ -1115,15 +1143,15 @@
|
||||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||||
],
|
||||
"titleFR": "Ajouter des images à votre site Web",
|
||||
"descriptionFR": [
|
||||
"Vous pouvez ajouter des images à votre site Web en utilisant l'élément <code>img</code> et pointer vers une URL d'image spécifique en utilisant l'attribut <code>src</code>.",
|
||||
"descriptionFR": [
|
||||
"Vous pouvez ajouter des images à votre site Web en utilisant l'élément <code>img</code> et pointer vers une URL d'image spécifique en utilisant l'attribut <code>src</code>.",
|
||||
"Un exemple de cette procédure serait :",
|
||||
"<code><img src=\"https://www.your-image-source.com/your-image.jpg\"></code>",
|
||||
"Note that in most cases, <code>img</code> elements are self-closing.",
|
||||
"Prenez note que dans la plupart des cas, les éléments <code>img</code> sont auto-fermants.",
|
||||
"Essayez avec cette image :",
|
||||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||||
],
|
||||
],
|
||||
"title": "Add Images to your Website",
|
||||
"description": [
|
||||
"You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.",
|
||||
@ -1205,13 +1233,13 @@
|
||||
"<strong>Внимание</strong><br>По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания."
|
||||
],
|
||||
"titleFR": "Redimensionner vos images",
|
||||
"descriptionFR": [
|
||||
"Le CSS a une propriété nommé <code>width</code> qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons <code>px</code> (pixels) pour déterminer la largeur d'une image.",
|
||||
"descriptionFR": [
|
||||
"Le CSS a une propriété nommé <code>width</code> qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons <code>px</code> (pixels) pour déterminer la largeur d'une image.",
|
||||
"Par exemple, si nous voulons créer une classe CSS nommée <code>larger-image</code> qui donnne aux éléments une largeur de 500 pixels, nous utilisons :",
|
||||
"<blockquote><style><br> .larger-image {<br> width: 500px;<br> }<br></style></blockquote>",
|
||||
"<blockquote><style><br> .larger-image {<br> width: 500px;<br> }<br></style></blockquote>",
|
||||
"Créez une classe nommée <code>smaller-image</code> et utilisez la pour redimensionner l'image pour qu'elle ai 100 pixels de large.",
|
||||
"<strong>Prenez note</strong><br>Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi."
|
||||
],
|
||||
"<strong>Prenez note</strong><br>Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi."
|
||||
],
|
||||
"title": "Size your Images",
|
||||
"description": [
|
||||
"CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
|
||||
@ -1295,14 +1323,14 @@
|
||||
"<code><img class=\"class1 class2\"></code>"
|
||||
],
|
||||
"titleFR": "Ajouter des bordures autour de vos éléments",
|
||||
"descriptionFR": [
|
||||
"Les bordures CSS ont des propriétés comme <code>style</code>, <code>color</code> et <code>width</code>",
|
||||
"descriptionFR": [
|
||||
"Les bordures CSS ont des propriétés comme <code>style</code>, <code>color</code> et <code>width</code>",
|
||||
"Par exemple, si nous voulons créer une bordure de 5 pixel rouge autour d'un élément HTML, nous pouvons utiliser cette classe :",
|
||||
"<blockquote><style><br> .thin-red-border {<br> border-color: red;<br> border-width: 5px;<br> border-style: solid;<br> }<br></style></blockquote>",
|
||||
"Créer une classe nommée <code>thick-green-border</code> qui ajoute une bordure verte de 10 pixel avec un style <code>solid</code> autour d'un élément HTML. Appliquez ensuite cette classe sur votre photo de chat.",
|
||||
"<blockquote><style><br> .thin-red-border {<br> border-color: red;<br> border-width: 5px;<br> border-style: solid;<br> }<br></style></blockquote>",
|
||||
"Créer une classe nommée <code>thick-green-border</code> qui ajoute une bordure verte de 10 pixel avec un style <code>solid</code> autour d'un élément HTML. Appliquez ensuite cette classe sur votre photo de chat.",
|
||||
"Souvenez-vous que vous pouvez appliquer plus d'une classe sur un élément en les séparant par un espace, le tout dans l'attribut <code>class</code> de l'élément. Par exemple :",
|
||||
"<code><img class=\"class1 class2\"></code>"
|
||||
],
|
||||
],
|
||||
"title": "Add Borders Around your Elements",
|
||||
"description": [
|
||||
"CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>",
|
||||
@ -4714,4 +4742,4 @@
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -3,33 +3,40 @@ block content
|
||||
h1.text-center Settings for your Account
|
||||
hr
|
||||
h2.text-center Actions
|
||||
.row
|
||||
.col-xs-12
|
||||
a#night-mode.btn.btn-lg.btn-block.btn-primary.btn-link-social Night Mode
|
||||
.row
|
||||
.col-xs-12
|
||||
if (!user.isGithubCool)
|
||||
a.btn.btn-lg.btn-block.btn-github.btn-link-social(href='/link/github')
|
||||
a.btn.btn-lg.btn-block.btn-github.btn-link-social(href='https://forum.freecodecamp.com/t/how-to-create-a-github-account-and-link-it-with-your-freecodecamp-account/132154' target='_blank')
|
||||
i.fa.fa-github
|
||||
| Link my GitHub to enable my public profile
|
||||
else
|
||||
a.btn.btn-lg.btn-block.btn-github.btn-link-social(href='/link/github')
|
||||
i.fa.fa-github
|
||||
| Update my portfolio from GitHub
|
||||
| Update my profile from GitHub
|
||||
if (!user.twitter)
|
||||
a.btn.btn-lg.btn-block.btn-twitter.btn-link-social(href='/link/twitter')
|
||||
i.fa.fa-twitter
|
||||
| Add my Twitter to my portfolio
|
||||
| Add my Twitter to my profile
|
||||
if (!user.linkedin)
|
||||
a.btn.btn-lg.btn-block.btn-linkedin.btn-link-social(href='/link/linkedin')
|
||||
i.fa.fa-linkedin
|
||||
| Add my LinkedIn to my portfolio
|
||||
| Add my LinkedIn to my profile
|
||||
a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='https://forum.freecodecamp.com/t/how-to-add-freecodecamp-to-your-linkedin-profile/132159' target='_blank')
|
||||
| Read thousands of coding articles
|
||||
a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='https://forum.freecodecamp.com/t/how-to-add-freecodecamp-to-your-linkedin-profile/132159' target='_blank')
|
||||
| Add freeCodeCamp to my LinkedIn
|
||||
a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='https://forum.freecodecamp.com/t/how-to-join-freecodecamps-chat-rooms-on-gitter/132177' target='_blank')
|
||||
| Chat with other campers in real time
|
||||
|
||||
.spacer
|
||||
h2.text-center Account Settings
|
||||
.row
|
||||
.col-xs-12
|
||||
a#night-mode.btn.btn-lg.btn-block.btn-primary.btn-link-social Night Mode
|
||||
.row
|
||||
.col-xs-12
|
||||
a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/commit')
|
||||
| Edit my pledge
|
||||
| Edit my commit pledge
|
||||
.spacer
|
||||
h2.text-center Privacy Settings
|
||||
.row
|
||||
|
||||
@ -30,19 +30,12 @@ block content
|
||||
ul: li: a(href=""+link, target="_blank") !{MDNkeys[index]}
|
||||
.button-spacer
|
||||
if (user)
|
||||
button.btn.btn-primary.btn-block.btn-lg#submitButton
|
||||
button.btn-big.btn.btn-primary.btn-block#submitButton
|
||||
| Run tests (ctrl + enter)
|
||||
.button-spacer
|
||||
.btn-group.input-group.btn-group-justified
|
||||
.btn-group
|
||||
button.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-reset-modal
|
||||
| Reset
|
||||
.btn-group
|
||||
button.btn.btn-primary.btn-primary-ghost.btn-lg#challenge-help-btn
|
||||
| Help
|
||||
.btn-group
|
||||
button.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-issue-modal
|
||||
| Bug
|
||||
button.btn-big.btn.btn-primary.btn-block#trigger-reset-modal Reset your code
|
||||
.button-spacer
|
||||
a.btn-big.btn.btn-primary.btn-block(href="https://forum.freecodecamp.com/t/freecodecamp-algorithm-challenge-guide-" + dashedName target="_blank") Get a hint
|
||||
if (!user)
|
||||
.button-spacer
|
||||
a.btn.signup-btn.btn-block.btn-block(href='/login') Sign in so you can save your progress
|
||||
|
||||
@ -27,13 +27,9 @@ block content
|
||||
button.btn-big.btn.btn-primary.btn-block#submitButton
|
||||
| Run tests (ctrl + enter)
|
||||
.button-spacer
|
||||
.btn-group.btn-group-justified
|
||||
.btn-group
|
||||
button.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-reset-modal Reset
|
||||
.btn-group
|
||||
button.btn.btn-primary.btn-primary-ghost.btn-lg#challenge-help-btn Help
|
||||
.btn-group
|
||||
button.btn.btn-primary.btn-primary-ghost.btn-lg#trigger-issue-modal Bug
|
||||
button.btn-big.btn.btn-primary.btn-block#trigger-reset-modal Reset your code
|
||||
.button-spacer
|
||||
a.btn-big.btn.btn-primary.btn-block(href="https://forum.freecodecamp.com/t/freecodecamp-challenge-guide-" + dashedName target="_blank") Get a hint
|
||||
script.
|
||||
var userLoggedIn = true;
|
||||
if (!user)
|
||||
|
||||
@ -35,15 +35,12 @@ block content
|
||||
.form-group.text-center
|
||||
.col-xs-12
|
||||
// extra field to distract password tools like lastpass from injecting css into our username field
|
||||
button.btn.btn-primary.btn-big.btn-block#submitButton Run tests (ctrl + enter)
|
||||
button.btn-big.btn.btn-primary.btn-block#submitButton
|
||||
| Run tests (ctrl + enter)
|
||||
.button-spacer
|
||||
.btn-group.input-group.btn-group-justified
|
||||
.btn-group
|
||||
button.btn.btn-primary.btn-lg#trigger-reset-modal Reset
|
||||
.btn-group
|
||||
button.btn.btn-primary.btn-lg#challenge-help-btn Help
|
||||
.btn-group
|
||||
button.btn.btn-primary.btn-lg#trigger-issue-modal Bug
|
||||
button.btn-big.btn.btn-primary.btn-block#trigger-reset-modal Reset your code
|
||||
.button-spacer
|
||||
a.btn-big.btn.btn-primary.btn-block(href="https://forum.freecodecamp.com/t/freecodecamp-challenge-guide-" + dashedName target="_blank") Get a hint
|
||||
if (!user)
|
||||
.button-spacer
|
||||
a.btn.signup-btn.btn-block.btn-block(href='/signin') Sign in so you can save your progress
|
||||
|
||||
@ -25,10 +25,6 @@ block content
|
||||
a.btn.btn-big.btn-primary.btn-block(href='/challenges/next-challenge?id=' + id) I've completed this challenge (ctrl + enter)
|
||||
script.
|
||||
var userLoggedIn = true;
|
||||
.button-spacer
|
||||
.btn-group.input-group.btn-group-justified
|
||||
.btn.btn-primary.btn-big#challenge-help-btn Get help
|
||||
.btn.btn-primary.btn-big#trigger-issue-modal Report a bug
|
||||
if (!user)
|
||||
.button-spacer
|
||||
a.btn.btn-big.signup-btn.btn-block(href='/signin') Sign in so you can save your progress
|
||||
|
||||
@ -25,10 +25,6 @@ block content
|
||||
var userLoggedIn = true;
|
||||
else
|
||||
a.btn.btn-big.btn-primary.btn-block(href='/challenges/next-challenge?id=' + id) Go to my next challenge (ctrl + enter)
|
||||
.button-spacer
|
||||
.btn-group.input-group.btn-group-justified
|
||||
.btn.btn-primary.btn-primary-ghost.btn-big#challenge-help-btn Help
|
||||
.btn.btn-primary.btn-primary-ghost.btn-big#trigger-issue-modal Bug
|
||||
if (!user)
|
||||
.button-spacer
|
||||
a.btn.btn-big.signup-btn.btn-block(href='/signin') Sign in so you can save your progress
|
||||
|
||||
@ -13,10 +13,7 @@ Please verify your email by following the link below:
|
||||
Feel free to email us at this address if you have any questions about freeCodeCamp.
|
||||
<br>
|
||||
<br>
|
||||
And if you have a moment, check out our blog: https://medium.freecodecamp.com.
|
||||
<br>
|
||||
<br>
|
||||
Good luck with the challenges!
|
||||
Happy coding!
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
@ -12,9 +12,7 @@ nav.navbar.navbar-default.navbar-fixed-top.nav-height
|
||||
li.visible-xs
|
||||
a(href='/map') Map
|
||||
li
|
||||
a(href="//gitter.im/freecodecamp/home" target="_blank") Chat
|
||||
li
|
||||
a(href='http://forum.freecodecamp.com', target='_blank') Forum
|
||||
a(href='https://forum.freecodecamp.com', target='_blank') Forum
|
||||
li
|
||||
a(href='/about', target='_blank') About
|
||||
li
|
||||
|
||||
Reference in New Issue
Block a user