Product Landing Page Project with testable user stories - Guinea Pigs needed šŸ¹

As you may have heard, @no-stack-dub-sack, @Weezlo, @paycoguy, @Christian-Paul have been hard at work building projects with testable user stories. We are looking for a few volunteers to attempt to build these based on their automated tests.

The goal is for campers to be able to build these projects step by step following user stories. This will make the projects less intimidating and more fun. Oh, and donā€™t worry - weā€™ll still have plenty of optional projects where we donā€™t provide you with any tests. And if youā€™ve previously built these projects, you donā€™t need to build them again.

If youā€™re interested in attempting this, please reply to the thread and let us know youā€™ve started it. The more people who want to build this, the better, as we can start gathering feedback.

Thanks, and happy coding!

Here is the blank pen for campers to fork: http://codepen.io/freeCodeCamp/pen/MJjpwO

Here is the example project with passing tests: http://codepen.io/freeCodeCamp/pen/RKRbwL

Here are the user stories for campers to reference:

Content:

  1. My product landing page should have a <header> element with corresponding id="header".
  2. I can see an image within the #header element with a corresponding id="header-img".
  3. Within the <header> element I can see a <nav> element with corresponding id="nav-bar".
  4. I can see at least three clickable elements inside the nav bar, each with a corresponding class of "nav-link".
  5. When I click a .nav-link button in the nav bar, I am taken to the corresponding section of the landing page.
  6. I can watch an embedded product video with id="video".
  7. My landing page has a <form> element with a corresponding id="form".
  8. Within the form, there is an <input> field with id="email" where I can enter an email address.
  9. The #email input field should have placeholder text to let the user know what the field is for.
  10. The #email input field uses HTML5 validation to confirm that the entered text is an email address.
  11. Within the form, there is a submit <input> with corresponding id="submit".
  12. When I click the #submit button, 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).

Layout:

  1. The <header> element with id="header" should always be at the top of the viewport.
  2. My product landing page should have at least one media query.
  3. My product landing page should utilize CSS flexbox at least once.

Oh, that one too ! Still the Xmas thing though.

I built it and it passes all tests except the 12th one. Iā€™m not sure if I did something wrong (I put the mockup link into the ā€œactionā€ attribute on ā€œformā€ element, is there something else I shouldā€™ve done?) of it itā€™s a bug. Hereā€™s my pen: http://codepen.io/enk/pen/RKjNJK
(Also, youtube video sometimes just donā€™t show. Itā€™s there, the test passes, but itā€™s invisible; however, if you click the place in the page where itā€™s supposed to be it becomes visible and plays. I suppose itā€™s either codepenā€™s or youtubeā€™s own bug which has nothing to do with tests, but still wanted to mention that. If anybody knows why it happens - please let me know!

Hi @Enikol,

if you take a close look at the error message, it will tell you whatā€™s missing/wrong:

AssertionError: The #email input should have a name attribute

Could you please try if adding

name="email"

to the input field makes the test pass?

Yeah, that was did it! Thank you.

Thanks for your feedback so far, everyone!

Iā€™m thrilled to announce that our testable challenges now feature a link you can click to report a bug or submit feedback.

Iā€™m closing this topic. We can continue discussing specific issues as they come up over on the testable-projects-fcc repo. Happy coding and QAā€™ing! :slight_smile: