Browse Source

write README

master
hoschi-it 2 years ago
commit
b560c69d86
  1. 16
      .editorconfig
  2. 70
      README.md

16
.editorconfig

@ -0,0 +1,16 @@
root = true
[*]
max_line_length = 80
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = true
[*.py]
indent_style = tab

70
README.md

@ -0,0 +1,70 @@
# Responsive Web Design Projects - Build a Product Landing Page
Objective: Build a [CodePen.io][codepen] app that is functionally similar to
[this][example].
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 techno logies (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!
1. My product landing page should have a header element with a
corresponding id="header".
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.
3. Within the #header element I can see a nav element with a
corresponding id="nav-bar".
4. I can see at least three clickable elements inside the nav
element, each with the class nav-link.
5. When I click a .nav-link button in the nav element, 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 a corresponding
id="submit".
12. When I click the #submit element, the email is submitted to a
static page (use [this mock URL][submitUrl].
13. The navbar should always be at the top of the viewport.
14. My product landing page should have at least one media query.
15. My product landing page should utilize CSS flexbox at least
once.
You can build your project by forking [this CodePen pen][forkMe]. Or you can use
[this CDN link][tests] to run the tests in any environment you like.
[codepen]: https://codepen.io
[example]: https://codepen.io/freeCodeCamp/full/RKRbwL.
[submitUrl]: https://www.freecodecamp.com/email-submit
[forkMe]: https://codepen.io/freeCodeCamp/pen/MJjpwO
[tests]: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Loading…
Cancel
Save