Browse Source

write README

hoschi-it 3 years ago
  1. 16
  2. 70


@ -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
trim_trailing_whitespace = true
indent_style = tab


@ -0,0 +1,70 @@
# Responsive Web Design Projects - Build a Product Landing Page
Objective: Build a [][codepen] app that is functionally similar to
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
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
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
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.