commit
b560c69d86
2 changed files with 86 additions and 0 deletions
-
16.editorconfig
-
70README.md
@ -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 |
@ -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 |
Write
Preview
Loading…
Cancel
Save
Reference in new issue