A nice-looking styled form that looks great on devices of any sizes.

• Creation of a simple HTML form
• using different form elements such as lists, inputs, ragiobuttons, checkbuttons and others
• styling the webpage to make it look great and responsinve.

1. Create the project folder, add files, and include all links. The most detailed instructions on how to start any project can be found in Step 1 of the first project. 
2. Think out which form you want to create, find the assets (pictures), think about the style. For inspiration, you may visit Dribbble, the community for graphic design. But keep in mind, most projects there are based on very customized elements that are far out of the scope of this exercise.
3. To make the process easier you may want to draw the layout of your future form on paper, or in your favorite prototyping tool.
4. Create a simple form, add the elements.
5. In our example project, we wrap any new line in a specific block (the div tag), which makes it easier to work with rows.
6. Add the style to the whole form, style the separate elements.
7. If you use images, it's a good practice to work with images of different sizes. In our example, all the images are different but we set up the following rules that keep all of them the same size:
   

       max-width: 100%;
       height: 100%;
       object-fit: cover;

8. Note that if you set up both height and width, the images may be stretch what is not the desired behavior.
9. If you use radiobuttons, make sure if you click one, others will reset.
10. Make sure the text and elements are aligned well. It's a good practice to set up the size as a percentage of the total available width. 
    Note. If you are struggling to set up the width as a percentage for text input, try to add the following rule to their class:
    box-sizing: border-box;

    This rule tells the browser to calculate the width taking into account border and padding, see the full explanation here.
11. Add the media queries, play with your webpage in different modes for different sizes to make sure it looks great everywhere.

• Find some interesting ideas of forms; for inspiration, visit online services for generating the forms like jotforms or others;
• play with colors, sizes, images, controls.

1. The page has a form with at least 4 form elements (in our example they are: radiobuttons, text input, date, time, select) and text input, select, and radiobuttons are mandatory elements.
2. When you click on one of the radio buttons, others should reset.
3. All the rows and columns should have enough space between them and inner elements. No a "butt-to-butt" joints allowed.
4. The page should look great on any device!