feat: enable new curriculum (#44183)
* feat: use legacy flag chore: reorder challenges fix: linter revert: server change feat: unblock new editor fix: proper order fix: 0-based order fix: broke the order feat: move tribute certification to its own block feat: split the old projects block into 4 fix: put all blocks in order chore: add intro text refactor: use block, not blockName in query fix: project progress indicator * fix: reorder new challenges/certs * fix: reorder legacy challenges * fix: reintroduce legacy certs * feat: add showNewCurriculum flag to env * chore: forgot sample.env * feat: use feature flag for display * fix: rename meta + dirs to match new blocks * fix: add new blocks to help-category-map * fix: update completion-modal for new GQL schema * test: duplicate title/id errors -> warnings * fix: update completion-modal to new GQL schema Mk2 * chore: re-order metas (again) * fix: revert super-block-intro changes The intro needs to show both legacy and new content. We need to decide which pages are created, rather than than what a page shows when rendered. * feat: move upcoming curriculum into own superblock * fix: handle one certification with two superBlocks * fix: remove duplicated intros * fix: remove duplicate projects from /settings * fix: drop 'two' from Responsive Web Design Two * chore: rename slug suffix from two to v2 * feat: control display of new curriculum * feat: control project paths shown on /settings * fix: use new project order for /settings This does mean that /settings will change before the release, but I don't think it's serious. All the projects are there, just not in the legacy order. * fix: claim/show cert button * chore: remove isLegacy Since we have legacy superblocks, we don't currently need individual blocks to be legacy * test: fix utils.test * fix: verifyCanClaim needs certification If Shaun removes the cert claim cards, maybe we can remove this entirely * fix: add hasEditableBoundaries flags where needed * chore: remove isUpcomingChange * chore: v2 -> 22 Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
304773d62b
commit
8614db7a32
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "Build a Personal Portfolio Webpage Project",
|
||||
"isUpcomingChange": false,
|
||||
"order": 19,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"challengeOrder": [
|
||||
[
|
||||
"bd7158d8c242eddfaeb5bd13",
|
||||
"Build a Personal Portfolio Webpage"
|
||||
]
|
||||
]}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "Build a Product Landing Page Project",
|
||||
"isUpcomingChange": false,
|
||||
"order": 16,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"challengeOrder": [
|
||||
[
|
||||
"587d78af367417b2b2512b04",
|
||||
"Build a Product Landing Page"
|
||||
]
|
||||
]}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "Build a Survey Form Project",
|
||||
"isUpcomingChange": false,
|
||||
"order": 4,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"challengeOrder": [
|
||||
[
|
||||
"587d78af367417b2b2512b03",
|
||||
"Build a Survey Form"
|
||||
]
|
||||
]}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "Build a Technical Documentation Page Project",
|
||||
"isUpcomingChange": false,
|
||||
"order": 13,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"challengeOrder": [
|
||||
[
|
||||
"587d78b0367417b2b2512b05",
|
||||
"Build a Technical Documentation Page"
|
||||
]
|
||||
]}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "Build a Tribute Page Project",
|
||||
"isUpcomingChange": false,
|
||||
"order": 9,
|
||||
"time": "30 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"challengeOrder": [
|
||||
[
|
||||
"bd7158d8c442eddfaeb5bd18",
|
||||
"Build a Tribute Page"
|
||||
]
|
||||
]}
|
||||
@@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn Accessibility by Building a Quiz",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-accessibility-by-building-a-quiz",
|
||||
"order": 42,
|
||||
"order": 8,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"614ccc21ea91ef1736b9b578",
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "Learn Basic CSS by Building a Cafe Menu",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-basic-css-by-building-a-cafe-menu",
|
||||
"order": 10,
|
||||
"order": 1,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn CSS Animation by Building a Ferris Wheel",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-css-animation-by-building-a-ferris-wheel",
|
||||
"order": 15,
|
||||
"order": 18,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"6140c7e645d8e905819f1dd4",
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn CSS Flexbox by Building a Photo Gallery",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-css-flexbox-by-building-a-photo-gallery",
|
||||
"order": 20,
|
||||
"order": 6,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"61537485c4f2a624f18d7794",
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn CSS Grid by Building a Magazine",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-css-grid-by-building-a-magazine",
|
||||
"order": 16,
|
||||
"order": 15,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"61437d575fb98f57fa8f7f36",
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
{
|
||||
"name": "Learn CSS Transforms by Building a Penguin",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-css-transforms-by-building-a-penguin",
|
||||
"order": 47,
|
||||
"order": 17,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"619665c9abd72906f3ad30f9",
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "Learn CSS Variables by Building a City Skyline",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-css-variables-by-building-a-city-skyline",
|
||||
"order": 8,
|
||||
"order": 14,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn HTML by Building a Cat Photo App",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-html-by-building-a-cat-photo-app",
|
||||
"order": 9,
|
||||
"order": 0,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"5dc174fcf86c76b9248c6eb2",
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn HTML Forms by Building a Registration Form",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-html-forms-by-building-a-registration-form",
|
||||
"order": 23,
|
||||
"order": 3,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"60eebd07ea685b0e777b5583",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "Learn Intermediate CSS by Building a Picasso Painting",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-intermediate-css-by-building-a-picasso-painting",
|
||||
@@ -9,7 +9,6 @@
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"60b69a66b6ddb80858c51578",
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
{
|
||||
"name": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet",
|
||||
"order": 43,
|
||||
"order": 10,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"6193d8081ec2531581ea7b98",
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn Responsive Web Design by Building a Piano",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-responsive-web-design-by-building-a-piano",
|
||||
"order": 13,
|
||||
"order": 12,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"612e6afc009b450a437940a1",
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn the CSS Box Model by Building a Rothko Painting",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-the-css-box-model-by-building-a-rothko-painting",
|
||||
"order": 12,
|
||||
"order": 5,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"60a3e3396c7b40068ad6996a",
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
{
|
||||
"name": "Learn Typography by Building a Nutrition Label",
|
||||
"isUpcomingChange": true,
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-typography-by-building-a-nutrition-label",
|
||||
"order": 25,
|
||||
"order": 7,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"615f2abbe7d18d49a1e0e1c8",
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17523bc
|
||||
title: Back End Development and APIs Certification
|
||||
certification: back-end-development-and-apis
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
id: 5e46fc95ac417301a38fb934
|
||||
title: Data Analysis with Python Certification
|
||||
certification: data-analysis-with-python
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
id: 5a553ca864b52e1d8bceea14
|
||||
title: Data Visualization Certification
|
||||
certification: data-visualization
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
id: 561acd10cb82ac38a17513bc
|
||||
title: Front End Development Libraries Certification
|
||||
certification: front-end-development-libraries
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
id: 5e6021435ac9d0ecd8b94b00
|
||||
title: Information Security Certification
|
||||
certification: information-security
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
id: 561abd10cb81ac38a17513bc
|
||||
title: JavaScript Algorithms and Data Structures Certification
|
||||
certification: javascript-algorithms-and-data-structures
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
id: 660add10cb82ac38a17513be
|
||||
title: Legacy Back End Certification
|
||||
certification: legacy-back-end
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
id: 561add10cb82ac39a17513bc
|
||||
title: Legacy Data Visualization Certification
|
||||
certification: legacy-data-visualization
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
id: 561add10cb82ac38a17513be
|
||||
title: Legacy Front End Certification
|
||||
certification: legacy-front-end
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
id: 561add10cb82ac38a17213bd
|
||||
title: Legacy Full Stack Certification
|
||||
certification: legacy-full-stack
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
id: 561add10cb82ac38a17213bc
|
||||
title: Legacy Information Security and Quality Assurance Certification
|
||||
certification: legacy-information-security-and-quality-assurance
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
id: 5e46fc95ac417301a38fb935
|
||||
title: Machine Learning with Python Certification
|
||||
certification: machine-learning-with-python
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
id: 5e611829481575a52dc59c0e
|
||||
title: Quality Assurance Certification
|
||||
certification: quality-assurance
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
id: 606243f50267e718b1e755f4
|
||||
title: Relational Databases Certification
|
||||
certification: relational-databases
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
id: 561add10cb82ac38a17513bc
|
||||
title: Responsive Web Design Certification
|
||||
certification: responsive-web-design
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
id: 5e44431b903586ffb414c951
|
||||
title: Scientific Computing with Python Certification
|
||||
certification: scientific-computing-with-python
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
id: bd7158d8c242eddfaeb5bd13
|
||||
title: Build a Personal Portfolio Webpage
|
||||
challengeType: 3
|
||||
forumTopicId: 301143
|
||||
dashedName: build-a-personal-portfolio-webpage
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/zNBOYG>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) 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 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b04
|
||||
title: Build a Product Landing Page
|
||||
challengeType: 3
|
||||
forumTopicId: 301144
|
||||
dashedName: build-a-product-landing-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/RKRbwL>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) 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>).
|
||||
|
||||
**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 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b03
|
||||
title: Build a Survey Form
|
||||
challengeType: 3
|
||||
forumTopicId: 301145
|
||||
dashedName: build-a-survey-form
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/VPaoNP>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) 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, which are defined by the `min` and `max` attributes, 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 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b05
|
||||
title: Build a Technical Documentation Page
|
||||
challengeType: 3
|
||||
forumTopicId: 301146
|
||||
dashedName: build-a-technical-documentation-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/NdrKKL>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) 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 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd18
|
||||
title: Build a Tribute Page
|
||||
challengeType: 3
|
||||
forumTopicId: 301147
|
||||
dashedName: build-a-tribute-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/zNqgVx>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) 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 either a `figure` or 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.
|
||||
|
||||
**User Story #9:** The `img` element should be centered within its parent element.
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user