Skip to content

Instantly share code, notes, and snippets.

@rburnette3

rburnette3/RalphBurnette_Prework.md

Last active March 13, 2017 20:10
Show Gist options
  • Save rburnette3/ba942655220ed52eaf0036a4ca069e52 to your computer and use it in GitHub Desktop.
Save rburnette3/ba942655220ed52eaf0036a4ca069e52 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
RalphBurnette_Prework.md

##Prework Day 1

  1. On a website, what is the purpose of HTML code? HTML code describes the structure of the web pages.

  2. What is the difference between an element and a tag? Elements are made of characters (tags) that are inside angled brackets < > which tell the browser about the information of the tags. Tags act as key words whcih define how a browser will format and display the content.

  3. Why do we use attributes in HTML elements? Attributes give more information on an element. They will appear with the openeing tag and contain a name and a value seprated by an = sign. Attribute name indicates what kind of info while value found in "" will specify how much or what.

  4. Describe the purpose of the head, title, and body HTML elements. Head- usually shown before body will contain info about page. Body- Everything contained with in will display in main browser window. Title- will appear in title bar at top of browser window.

  5. In your browser (Chrome), how do you view the source of a website? Right Click then 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. <HTML>- denotes all bewteen tags is HTML code. <Body>- encapsulates all shown on web page. <h1> main header, largest font size. <h2>- sub header slightly smaller than <h1>. paragraph, shows info and text withing body. <title>contents that are shown at the top of th browser.

  7. What are empty elements? elements that do not contain words in them. hr /

  8. What is semantic markup? Text elements that do not affect the structure of page but do provide info to page.

  9. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements. nav, article and aside.

http://codepen.io/rburnette3/pen/evWNEw

##Prework Day 2

  1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences? Ordered lists will be numbered, Unordered are noted with bullet points and definition lists are made up of defined terms.

  2. What is the basic structure of an element used to link to another website? <a href="link" Site name </a > (clickable text)

  3. What attribute should you include in a link to open a new tab when the link is clicked? href

  4. How do you link to a specific part of the same page? Identify the part of the page you want to link to by using the id attribute ( id= top ) Use the <a> element and start the href attribute with the # symbol. <a href ="#top"/>

  5. What is the purpose of CSS? CSS adds style to the webpage by creating and applying rules that work with HTML elements

  6. What does CSS stand for? What does cascading mean in this case? Cascading Style Sheets, in this case cascading means each rule can follow another and be appled to the same section of html.

  7. What is the basic structure of a CSS rule? selector and declaration

  8. How do you link a CSS stylesheet to your HTML document? <link href="css/styles.css" type="text/css" rel="stylesheet" /> this tells the browser where to find the css file used to style the page. the attribute href inside the link element specifies the path to the css file.

  9. What is it useful to use external stylesheets as opposed to using interal CSS? External sheets allow the same style rules to be used, keeps the content seperated from how the page looks. It also allows styles to be interchangeable by altering only one file.

  10. Describe what a color hex code is. 6 character alpha numeric code that denotes the levels respectively of red, green, blue. These codes are preceeded by a #ee3e80

  11. What are the three parts of an HSL color property? hue, saturation and lightness.

12.In the world of typeface, what are the three main categories of fonts? What are the differences between them? serif, sans-serif, monospace

13.When specifiying font-size, what are the main three units used? pixels (px0 percentages (%) and EMS

##Prework Day 3

  1. Describe the differences between border, margin, and padding.
    Borders seperate the edges of boxes from each other. Margins Define the space outside the edge of the border. Padding describes the space between the border of the box and and its contained content.

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

  3. Descirbe the different between block-level and inline elements.
    Block level elements occupy the entire space with in the parent element, each block element will start on a new line. Inline elements continue on the same line as the neighboring elements. They do not start a new line.

  4. What is the role of fixed positioning, and why is z-index important in the scenario of using foxed positioning?
    Fixed positioning will position the element at a specified place and will not move as the user scrolls through the page. In fixed positioning, boxes can overlap. The Z-index property allows you to control which elements sit on top.

  5. What is the difference between a fixed and liquid layout?
    Fixed width Layouts do not change sizes as with the change in size of a browser window configured in pixels. Liquid layouts will adapt to screen size, configured in percentages and ems.

##Prework Day 4

  1. In an image element, why is the alt attribute important?
    The alt tribute is a descrition of the image and can be read in the event the user cannot see the image.

  2. What determines if an image element is inline or block? Block level elements will sit on a new line where as inline elements flow around the iamge.
    Block images sit on top of the element and inline images are within the element.

  3. What are the benefits of jpg or png image file formats?
    JPG imgages are best suited for multi colored complex images and PNG are best used for simple single color images.

  4. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? In CSS it allows you to make any needed changes in one spot as opposed to many in HTML

  5. What is an image sprite, and why is it useful? A sprite is . single image used over multiple areas of an interface. This is useful because it asks the browser to request a single image rather than many and allow the page to load faster.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment