##Day 1
####Questions from reading:
-1. On a website, what is the purpose of HTML code? HTML code is the structure on which websites are built.
-2. What is the difference between an element and a tag?
Every element has a start tag and an end tag. The element is the word, such as "article". The tag is the syntax that the element is wrapped in: <article></article>
-3. Why do we use attributes in HTML elements?
We use attributes to define the element further. For example adding an id attribute to a section can help us find that specific element with javascript. <section id="corner-stone"></section>
-4. Describe the purpose of the head, title, and body HTML elements. head: this is where the meta information for the page is put. The items in the head section are not displayed. title: the title is inside the head section and is displayed in the tab in the browser. The title is also used by search engines to discover the subject of the page. body: this is where the visible website structure is placed.
-5. In your browser (Chrome), how do you view the source of a website? Right click and select 'view page source'.
-6. List five different HTML elements and what they are used for. For example, <p></p> is a paragraph element, and it is used to represent a paragraph of text.
<h1></h1> is a top level header element. It is used for the most important headlines.
<select></select> is a selector element that creates a dropdown menu.
<article></article> is a semantic element to indicate that the enclosed text is an article.
<button></button> is an input element that has the styling of a button.
<main></main> it a semantic element that indicates the main section of the web page.
-7. What are empty elements?
Empty elements are HTML elements with nothing in them. An empty element does not have seperate opening and closing elements, they can be opened and closed in the same tag. For example the image tag: <img src="blue.png" alt="blue pig"/>
-8. What is semantic markup? Semantic markup is html markup that is used to convey the meaning of the page using elements that are named to tell you what part of the page they represent.
-9. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
<footer>, <header>, <main>, <nav>, <article>, <aside>, <section>, <hgroup>, <figure>, <figcaption>.
##Day 2 ###Read Chapters 3 and 4 on Lists and Links from HTML and CSS: Design and Build Websites
####Answer these questions about the reading in your prework gist:
-1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
ordered lists: <ol></ol> are lists that are numbered (or labeled with letters or roman numerals).
unordered lists: <ul></ul> are lists that are not numbered, they often have bullet points at the begining of each new list item.
definition lists: <dl></dl> are for lists of definitions using <dt></dt> term and <dd></dd> definition tags to separate the different parts.
-2. What is the basic structure of an element used to link to another website?
<a href="https://www.turing.io/programs" title="link to turing school"></a>
-3. What attribute should you include in a link to open a new tab when the link is clicked? target="_blank" For example:
<a href="https://www.turing.io/programs" target="_blank" title="link to turing school"></a>
-4. How do you link to a specific part of the same page?
<a href="#footer">link to footer on this page that has an id="footer"</a>
###Read Chapters 10, 11, and 12 on What is CSS, Color, and Text from HTML and CSS: Design and Build Websites
####Answer these questions about the reading in your prework gist:
-What is the purpose of CSS? CSS adds styling to a website.
-What does CSS stand for? What does cascading mean in this case? Cascading Style Sheet. The cascade refers to how the style rules are applied. A style written later in the cascade will overwrite the style that was above it in the cascade.
-What is the basic structure of a CSS rule?
selector {
property: value;
}
-How do you link a CSS stylesheet to your HTML document?
<link href="style.css" rel="stylesheet">
Put this link tag in the head section.
-What is it useful to use external stylesheets as opposed to using interal CSS? You can apply the styles to many different pages if you use an external CSS file. And you can change that one style sheet to effect the entire website.
-Describe what a color hex code is. A hex color is a 6 digit hexadecimal number used to represent the color.
-What are the three parts of an HSL color property? Hue, Saturation, Lightness.
-In the world of typeface, what are the three main categories of fonts? What are the differences between them? serif, san-serif, and script. Serif fonts have small feet and expensions on the ends of the letterforms. San-serif fonts have no extensions on the letterforms. Script fonts are similar to hand written letterforms.
-When specifiying font-size, what are the main three units used? pixels (px), ems (em), and points (pt).
##Day 3 ###Read Chapter 7 on Forms from HTML and CSS: Design and Build Websites
Answer these questions about the reading in your prework gist:
-If you're using an input element in a form, what attribute controls the behavior of that input?
the type="submit" attribute.
-What element is used to create a dropdown list?
<select>
</select>
-If you're using an input element to send form data to a server, what should the type attribute be set to?
"submit"
-What element is used to group similar form items together?
the form element
###Read Chapters 13 and 15 on Boxes and Layout from HTML and CSS: Design and Build Websites
Answer these questions about the reading in your prework gist:
-Describe the differences between border, margin, and padding.
BORDER- separates the edge of one box from another. can be set to zero.
MARGIN- sits outside the border. gives you a gap between one box and another.
PADDING- space between the box border and the content inside the box.
-For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
padding: top right bottom left;
-Describe the difference between block-level and inline elements.
block level elements take up the entire width of the page, they block out the space. inline elements only take up the space that they fill with theircontent and margins, they stack next to each other in line.
-What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Fixed positioning allows you to put an element in a fixed position relative to the window. The fixed element will not move when the user scrolls. Using a z-index will allow the fixed element to sit on top of the other elements on the page. It is great for when you want a fixed navigation bar at the top of your page.
-What is the difference between a fixed and liquid layout?
Fixed layouts do not change size when the user adjusts the size of their browser window, or they view the pave on a different size phone. A liquid layour adjusts to the screen size.
##Day 4 ####Read Chapter 5 on Images HTML from HTML and CSS: Design and Build Websites
In an image element, why is the alt attribute important?
The alt attribute is important because it describes the image to someone using a screen reader. It gives the image accessibility.
What determines if an image element is inline or block?
Image elements are inline elements unless they areplaced before and outside of a block level element, then they act as a block level element.
What are the benefits of jpg or png image file formats?
jpg image files are good for multi color images (photos) and png are good for single color images (icons, logos).
####Read Chapter 16 on Images CSS from HTML and CSS: Design and Build Websites
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
If you specity the height and width in the css, it is easier to change. You won't have to go to each and every image to change the size in the html, you can just change the css properties.
What is an image sprite, and why is it useful? An image sprite is an image with several different images in one file. You can select the proper picture for your use in the css using it as a background image.