{ "name": "Applied Responsive Web Design Projects", "order": 7, "time": "150 hours", "helpRoom": "Help", "challenges": [ { "id": "587d78af367417b2b2512b02", "title": "Get Set for our Responsive Web Design Projects", "description": [ [ "", "", "Our front end development projects will give you a chance to apply the front end skills you've developed up to this point. We'll use a popular browser-based code editor called CodePen.", "" ], [ "", "", "These projects are hard. It takes most campers several days to build each project. You will get frustrated. But don't quit. This gets easier with practice.", "" ], [ "", "", "When you get stuck, just use the Read-Search-Ask methodology. Don't worry - you've got this.", "" ], [ "", "", "You can build these project challenges on your local computer or on a web-based code editor like CodePen.io. As long as your projects are publicly accessible online, you can submit their web addresses so you can claim your verified Responsive Web Design certificate.", "https://codepen.io/accounts/signup/user/free" ] ], "challengeSeed": [], "tests": [], "type": "Waypoint", "isRequired": false, "challengeType": 7, "translations": { "es": { "title": "Prepárate para los Proyectos de Desarrollo de Interfaces", "description": [ [ "https://i.imgur.com/OAD6SJz.png", "Una imagen del juego Simón, uno de nuestros proyectos de interfaz.", "Nuestros proyectos de desarrollo de interfaces te darán oportunidad de aplicar las habilidades con interfaces que has desarrollado hasta este momento. Usaremos un editor de código basado en el navegador llamado CodePen.", "" ], [ "https://i.imgur.com/WBetuBa.jpg", "Un programador frustado golpeando la pantalla de su computador.", "Nuestros desafíos sobre algoritmos son difíciles. Algunos pueden requerir muchas horas para resolverse. Podrás frustarte, pero no te rindas. Se vuelve fácil con práctica.", "" ], [ "https://i.imgur.com/p2TpOQd.jpg", "Un tierno perro que salta sobre un obstáculo, pica el ojo y te apunta con su pata.", "Cuando te atasques, usa la metodología Leer-Buscar-Preguntar. No te preocupes - lo tienes resuelto.", "" ], [ "https://i.imgur.com/G1saeDt.gif", "Un gif que muestra cómo crear una cuenta en Codepen.", "Para nuestros desafíos de interfaces, usaremos un editor de código basado en el navegador que es muy famoso llamado Codepen. Pulsa en el botón de abajo \"Open link in new tab\" para abrir la página de registro de CodePen. Rellena el formulario y pulsa \"Sign up\".
Nota: Si ya tienes una cuenta de CodePen, puedes omitir este paso pulsando \"Open link in new tab\", cierra la nueva pestaña que se abre, entonces pulsa \"go to my next step\". Eliminamos nuestro botón \"skip step\" porque mucha gente solamente pulsa el botón sin realizar estos importantes pasos.
", "https://codepen.io/accounts/signup/user/free" ], [ "https://i.imgur.com/U4y9RJ1.gif", "Un gif que muestra que puedes escribir \"hello world\" en el editor, lo cual escribirá \"hello world\" en la ventana de vista previa. También puedes mover las ventanas para cambiar su tamaño, y cambiar su orientación.", "En la ventana de HTML, crea un elemento h1 con el texto \"Hola mundo\". Puedes arrastrar los bordes de las ventanas para cambiar su tamaño. También puedes pulsar el botón de \"Change View\" para cambiar la orientación de las ventanas.", "" ], [ "https://i.imgur.com/G9KFQDL.gif", "Un gif que muestra el proceso de agregar Bootstrap a tu proyecto.", "Pulsa el engrane en la esquina superior izquierda de la ventana de CSS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige Bootstrap. Ahora dale a tu elemento h1 la clase \"text-primary\" para cambiar su color y verificar que Bootstrap está activado.", "" ] ] }, "pt-br": { "title": "Prepare-se para nossos Projetos de Desenvolvimento Front End", "description": [ [ "https://i.imgur.com/OAD6SJz.png", "A imagem de um jogo Simon, um de nossos projetos front end.", "Nossos projetos de Desenvolvimento front end vão dar a você a chance de aplicar as habilidades front end que você desenvolveu até esse ponto. Nós vamos usar um editor popular chamado CodePen que funciona direto no navegador.", "" ], [ "https://i.imgur.com/WBetuBa.jpg", "Um programador atravessando a tela de seu laptop com um soco em frustração.", "Esses projetos são difíceis. A maioria dos campistas leva alguns dias para contruir cada projeto. Você vai ficar frustrado. Mas não desista. Isso fica mais fácil com a prática.", "" ], [ "https://i.imgur.com/p2TpOQd.jpg", "Um cachorro fofo pulando sobre um obstáculo, piscando e apontando sua pata a você.", "Quando ficar travado, use a metodologia Ler-Buscar-Perguntar. Não se preocupe - você consegue.", "" ], [ "https://i.imgur.com/G1saeDt.gif", "Um gif mostrando com criar uma conta CodePen.", "Para nossos projetos front end, usaremos um popular editor de código baseado em navegador chamado CodePen. Clique no botão \"Open link in new tab\" abaixo para abrir a página de resgistro do CodePen. Preencha o formulário e clique em \"Sign up\".
Nota: Se você já tem uma conta CodePen, você pode pular esse passo clicando em \"Open link in new tab\", fechando a nova aba que abrir, e clicando em \"go to my next step\". Nós removemos nosso botão \"skip step\" pois muitas pessoas iam simplesmente clicar nele repetidamente sem passar por esses passos importantes.
", "https://codepen.io/accounts/signup/user/free" ], [ "https://i.imgur.com/U4y9RJ1.gif", "Um gif mostrando que você pode digitar \"hello world\" e será mostrado \"hello world\" na janela de visualização. Você também pode arrastar janelas para redimensioná-las e mudar a orientação das mesmas.", "Na caixa do HTML, crie um elemento h1 com o texto \"Hello World\". Você pode arrastar as bordas para redimensioná-las. Você pode também clicar no botão \"Change View\" e mudar a orientação das janelas.", "" ], [ "https://i.imgur.com/G9KFQDL.gif", "Um gif mostrando como adicionar o Bootstrap à sua pen.", "Clique na engrenagem no canto superior esquerdo da caixa do CSS, então role para baixo até \"Quick add\" e escolha Bootstrap. Agora adicione ao seu elemento h1 a classe text-primary para mudar sua cor e provar que o Bootstrap agora está disponível.", "" ], [ "https://i.imgur.com/m0pWik2.gif", "Um gif mostrando o processo de desativar o update automático da janela de visualização", "Ao usar CodePen e Ajax, é uma boa idea desativar o update automático da janela de visualização para que as chamadas para as APIs não sejam feitas a todo momento. Muitas chamadas para API pode levar à bloqueios temporários e podem requerer períodos de esperar para que possam ser usadas novamente.
Para desativar o update automático da janela de visualização clique no botão \"Settings\" no topo da página, então clique na aba \"Behavior\". No final da página, desmarque \"AUTO UPDATE PREVIEW\". Agora clique em \"Run\" no topo da página para atualizar a janela de visualização e clique \"Save\".
", "" ] ] }, "ru": { "title": "Приготовьтесь к разработке фронтенд проектов", "description": [ [ "https://i.imgur.com/OAD6SJz.png", "Игра Саймона - один из фронтенд проектов.", "Наши фронтенд проекты дадут вам шанс применить полученные к этому моменту знания по фронтенд разработке. Мы будем использовать популярный браузерный редактор кода - CodePen.", "" ], [ "https://i.imgur.com/WBetuBa.jpg", "Программист от отчаяния кулаком пробивает экран своего ноутбука.", "Это трудные проекты. Разработка каждого занимает у большинства кэмперов несколько дней. У вас может возникнуть чувство отчаяния. Несмотря на это не сдавайтесь. С практикой этот процесс станет проще.", "" ], [ "https://i.imgur.com/p2TpOQd.jpg", "Милый пес, прыгающий через препятствие, указывает на вас лапой и подмигивает.", "Если что-то не получается, воспользуйтесь Read-Search-Ask. Не волнуйтесь - вы сможете это сделать.", "" ], [ "https://i.imgur.com/G1saeDt.gif", "Гифка показывающая как зарегистрироваться на CodePen.", "Для заданий по фронтенд разработке, мы будем использовать популярный браузерный редактор кода под названием CodePen. Откройте страницу регистрации на сайте CodePen, нажав на расположенную чуть ниже кнопку \"Open link in new tab\". Заполните форму и нажмите \"Sign up\".
Замечание: Если у вас уже есть аккаунт CodePen, то этот шаг можно пропустить: нажмите на кнопку \"Open link in new tab\", закройте появившуюся вкладку и затем кликните \"go to my next step\". Мы убрали кнопку \"skip step\", ввиду того что большинство людей просто нажимали бы ее несколько раз подряд и пропускали бы эти важные инструкции.
", "https://codepen.io/accounts/signup/user/free" ], [ "https://i.imgur.com/U4y9RJ1.gif", "Гифка показывающая набор в редакторе заголовка с текстом \"hello world\", который затем отображается в окошке предпросмотра. А также указывающая как изменить размер окон редактора или поменять их расположение.", "В окошке HTML создайте элемент h1 с текстом \"Hello World\". Ухватив края окон можно изменить их размер. А нажав на кнопку \"Change View\" поменять их расположение.", "" ], [ "https://i.imgur.com/G9KFQDL.gif", "Гифка показывающая как в CodePen добавить к проекту Bootstrap.", "Нажмите на звездочку в левом верхнем углу окошка CSS, найдите внизу поле \"Quick add\" и выберите в нем Bootstrap. Добавьте к элементу h1 класс \"text-primary\", чтобы изменить его цвет и удостовериться, что Bootstrap подключен.", "" ] ] } } }, { "id": "bd7158d8c442eddfaeb5bd18", "title": "Build a Tribute Page", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/zNqgVx.", "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", "User Story #1: My tribute page should have an element with a corresponding id=\"main\", which contains all other elements.", "User Story #2: I should see an element with a corresponding id=\"title\", which contains a string (i.e. text) that describes the subject of the tribute page (e.g. \"Dr. Norman Borlaug\").", "User Story #3: I should see a div element with a corresponding id=\"img-div\".", "User Story #4: Within the img-div element, I should see an img> element with a corresponding id=\"image\".", "User Story #5: Within the img-div element, I should see an element with a corresponding id=\"img-caption\" that contains textual content describing the image shown in img-div.", "User Story #6: I should see an element with a corresponding id=\"tribute-info\", which contains textual content describing the subject of the tribute page.", "User Story #7: I should see an a element with a corresponding id=\"tribute-link\", which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab (i.e. target=\"_blank\").", "User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js.", "Once you're done, submit the URL to your working project with all its tests passing.", "Remember to use the Read-Search-Ask method if you get stuck." ], "releasedOn": "January 1, 2016", "challengeSeed": [], "tests": [], "type": "zipline", "isRequired": true, "challengeType": 3, "translations": { "es": { "title": "Construye una página Tributo" }, "pt-br": { "title": "Construa uma Página Tributo" }, "ru": { "title": "Создайте страницу посвященную тому что вас вдохновляет" } } }, { "id": "587d78af367417b2b2512b03", "title": "Build a Survey Form", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/VPaoNP.", "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", "User Story #1: I can see a title with id=\"title\" in H1 sized text.", "User Story #2: I can see a short explanation with id=\"description\" in P sized text.", "User Story #3: I can see a form with id=\"survey-form\".", "User Story #4: Inside the form element, I am required to enter my name in a field with id=\"name\".", "User Story #5: Inside the form element, I am required to enter an email in a field with id=\"email\".", "User Story #6: If I enter an email that is not formatted correctly, I will see an HTML5 validation error.", "User Story #7: Inside the form, I can enter a number in a field with id=\"number\".", "User Story #8: If I enter non-numbers in the number input, I will see an HTML5 validation error.", "User Story #9: If I enter numbers outside the range of the number input, I will see an HTML5 validation error.", "User Story #10: For the name, email, and number input fields inside the form I can see corresponding labels that describe the purpose of each field with the following ids: id=\"name-label\", id=\"email-label\", and id=\"number-label\".", "User Story #11: For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field.", "User Story #12: Inside the form element, I can select an option from a dropdown that has a corresponding id=\"dropdown\".", "User Story #13: Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute.", "User Story #14: Inside the form element, I can select several fields from a series of checkboxes, each of which must have a value attribute.", "User Story #15: Inside the form element, I am presented with a textarea at the end for additional comments.", "User Story #16: Inside the form element, I am presented with a button with id=\"submit\" to submit all my inputs.", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", "Remember to use the Read-Search-Ask method if you get stuck." ], "releasedOn": "January 15, 2017", "challengeSeed": [], "tests": [], "type": "zipline", "isRequired": true, "challengeType": 3, "translations": {} }, { "id": "587d78af367417b2b2512b04", "title": "Build a Product Landing Page", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/RKRbwL.", "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", "User Story #1: My product landing page should have a header element with a corresponding id=\"header\".", "User Story #2: I can see an image within the header element with a corresponding id=\"header-img\". A company logo would make a good image here.", "User Story #3: Within the #header element I can see a nav element with a corresponding id=\"nav-bar\".", "User Story #4: I can see at least three clickable elements inside the nav element, each with the class nav-link.", "User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.", "User Story #6: I can watch an embedded product video with id=\"video\".", "User Story #7: My landing page has a form element with a corresponding id=\"form\".", "User Story #8: Within the form, there is an input field with id=\"email\" where I can enter an email address.", "User Story #9: The #email input field should have placeholder text to let the user know what the field is for.", "User Story #10: The #email input field uses HTML5 validation to confirm that the entered text is an email address.", "User Story #11: Within the form, there is a submit input with a corresponding id=\"submit\".", "User Story #12: When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit) that confirms the email address was entered and that it posted successfully.", "User Story #13: The navbar should always be at the top of the viewport.", "User Story #14: My product landing page should have at least one media query.", "User Story #15: My product landing page should utilize CSS flexbox at least once.", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", "Remember to use the Read-Search-Ask method if you get stuck." ], "releasedOn": "January 15, 2017", "challengeSeed": [], "tests": [], "type": "zipline", "isRequired": true, "challengeType": 3, "translations": {} }, { "id": "587d78b0367417b2b2512b05", "title": "Build a Technical Documentation Page", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/NdrKKL.", "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", "User Story #1: I can see a main element with a corresponding id=\"main-doc\", which contains the page's main content (technical documentation).", "User Story #2: Within the #main-doc element, I can see several section elements, each with a class of main-section. There should be a minimum of 5.", "User Story #3: The first element within each .main-section should be a header element which contains text that describes the topic of that section.", "User Story #4: Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header \"Javascript and Java\" should have a corresponding id=\"Javascript_and_Java\").", "User Story #5: The .main-section elements should contain at least 10 p elements total (not each).", "User Story #6: The .main-section elements should contain at least 5 code elements total (not each).", "User Story #7: The .main-section elements should contain at least 5 li items total (not each).", "User Story #8: I can see a nav element with a corresponding id=\"navbar\".", "User Story #9: The navbar element should contain one header element which contains text that describes the topic of the technical documentation.", "User Story #10: Additionally, the navbar should contain link (a) elements with the class of nav-link. There should be one for every element with the class main-section.", "User Story #11: The header element in the navbar must come before any link (a) elements in the navbar.", "User Story #12: Each element with the class of nav-link should contain text that corresponds to the header text within each section (e.g. if you have a \"Hello world\" section/header, your navbar should have an element which contains the text \"Hello world\").", "User Story #13: When I click on a navbar element, the page should navigate to the corresponding section of the main-doc element (e.g. If I click on a nav-link element that contains the text \"Hello world\", the page navigates to a section element that has that id and contains the corresponding header.", "User Story #14: On regular sized devices (laptops, desktops), the element with id=\"navbar\" should be shown on the left side of the screen and should always be visible to the user.", "User Story #15: My Technical Documentation page should use at least one media query.", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", "Remember to use the Read-Search-Ask method if you get stuck." ], "releasedOn": "January 15, 2017", "challengeSeed": [], "tests": [], "type": "zipline", "isRequired": true, "challengeType": 3, "translations": {} }, { "id": "bd7158d8c242eddfaeb5bd13", "title": "Build a Personal Portfolio Webpage", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/zNBOYG.", "Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.", "You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!", "User Story #1: My portfolio should have a welcome section with an id of welcome-section.", "User Story #2: The welcome section should have an h1 element that contains text.", "User Story #3: My portfolio should have a projects section with an id of projects.", "User Story #4: The projects section should contain at least one element with a class of project-tile to hold a project.", "User Story #5: The projects section should contain at least one link to a project.", "User Story #6: My portfolio should have a navbar with an id of navbar.", "User Story #7: The navbar should contain at least one link that I can click on to navigate to different sections of the page.", "User Story #8: My portfolio should have a link with an id of profile-link, which opens my GitHub or FCC profile in a new tab.", "User Story #9: My portfolio should have at least one media query.", "User Story #10: The height of the welcome section should be equal to the height of the viewport.", "User Story #11: The navbar should always be at the top of the viewport.", "You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js", "Once you're done, submit the URL to your working project with all its tests passing.", "Remember to use the Read-Search-Ask method if you get stuck." ], "challengeSeed": [], "tests": [], "type": "zipline", "isRequired": true, "challengeType": 3, "translations": { "es": { "title": "Construye una página web para tu portafolio" }, "pt-br": { "title": "Construa uma Página de Portfólio Pessoal" }, "ru": { "title": "Создайте сайт-портфолио" } } } ] }