INFO 3776 Lab 3 & 4 Criteria

Lab 3: Forms

For this assignment, you will create a simple form to add to your existing site from lab 1 & 2. This short form can be contained in an aside like the example from class.

Using the formmail echo response script I have provided (http://jwdittrich.people.ysu.edu/INFO_3776/formmail.php), test your form submissions using the POST method (note that the GET method will not work because it is not implemented).

Using semantically-correct HTML5 (use the W3C validator), include the following elements:

1. text input
2. text input with default value
3. textarea input
4. select list with default option set
5. radio group
6. checkboxes
7. submit button

Lab 4: Intro to Bootstrap Framework and Flexbox Layout

Continue customizing your site's appearance by using the Bootstrap framework to enhance your site. Use the code-along examples from class and the Bootstrap Docs for reference. Don't underestimate the difficulty even though it is mostly copy-paste!

Use Bootstrap classes to implement the following:

1. Grid layouts specifying column widths at 3 different resolutions: small, medium, and large. Use a 1, 2, and 3-column layout for content, at whatever widths that are pleasing to you and provide a good user experience (UX).
2. Responsive, collapsible primary navigation with hamburger menu.
3. Use the carousel template to replace the main page header and have at least two separate slider containers that alternate.

Additionally, implement CSS3 Flexbox attributes to have self-organizing child elements like the example we wrote in class. Be careful to choose attributes that work well together.

BONUS:

Create a gradient that is 1-pixel wide or high and implement the background-repeat directive to make a lightweight background for a header, footer, or div.