mod-0-capstone-3-day.md

Tracking Technical Module 0 Capstone Progress

Day 3

Reading Chapter 7 on Forms from HTML and CSS: Design and Build Websites

1. If you're using an input element in a form, what attribute controls the behavior of that input?

   The <input> element is used to create several different form controls. The value of the type attribute determines what kind of input they will be creating.

2. What element is used to create a dropdown list?

   The <select> element is used to create a drop down list box. It contains two or more <option> elements.

3. If you're using an input element to send form data to a server, what should the type attribute be set to?

   With using attribute method="" forms can be sent using one of two methods: get or post.

4. What element is used to group similar form items together?

   Related form controls can be grouped together inside the <fieldset> element.

Reading Chapters 13 and 15 on Boxes and Layout from HTML and CSS: Design and Build Websites

1. Describe the differences between border, margin, and padding.

   The border separates the edge of one box from another.

   Margins sit outside the edge of the border.

   Padding is the space between the border of a box and any content contained within it.

2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?

   padding top = 1 px; 
   padding right = 2px;
   padding bottom = 5px; 
   padding left = 10px;
   

3. Describe the difference between block-level and inline elements.

   CSS display: inline property determines that an element can be displayed in the middle of another element.

   CSS display: block *property determines that an element will always appear in a new line.

4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?

   Fixed positioning is a type of absolute positioning that requires the position property to have a value of fixed.

   When using relative, fixed, or absolute positioning, boxes can overlap. For control which element sits on top, you can use the z-index property. Its value is a number, and the higher the number the closer that element is to the front.

5. What is the difference between a fixed and liquid layout?

   Fixed width layout designs do not change size as the user increases or decreases the size of their browser window.

   Liquid layout designs stretch and contract as the user increases or decreases the size of their browser window.

Practice tasks

HTML

• Text boxes for each artist (three artists total).
• Labels for each text box.
• Dropdowns for the genre of each artist.
• Submit button.

CSS

• Add a border and background color to your headings. Pay attention to the contrast between the text and background colors.
• Divide your paragraph text into two vertical columns.

Third Day Practice by Primerova Raisa