Skip to content

Instantly share code, notes, and snippets.

@andrew-t-james

andrew-t-james/AndrewJames_Prework.md

Created February 4, 2018 19:17
Show Gist options
  • Save andrew-t-james/a8e20718c56bb144a9b4b7be7d3a8b2c to your computer and use it in GitHub Desktop.
Save andrew-t-james/a8e20718c56bb144a9b4b7be7d3a8b2c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
AndrewJames_Prework.md

Day 1 Prework

Codepen

Pre Work Codepen

  1. On a website, what is the purpose of HTML code?

    HTML's purpose on a website is to define the page structure.

  2. What is the difference between an element and a tag?

    HTML tag is just opening or closing entity <p></p>. HTML element consist of opening tag, closing tag, content (optional for content-less tags). <p>I am an element</p>

  3. Why do we use attributes in HTML elements?

    The purpose of attributes is to provide additional information about the contents of an element.

  4. Describe the purpose of the head, title, and body HTML elements.

    The head element contains information that is relevant to the page such as the title element.

    The title defines a websites title and is displayed at the top of the browser.

    The body element is where all visible on the page HTML mark up will be placed

    HTML elements indicate that anything held between the opening and closing tag is HTML code.

  5. In your browser (Chrome), how do you view the source of a website?

    By right clicking and selecting view source or by opening devtools and navigating to the source.

  6. List five different HTML elements and what they are used for. For example, <p></p>.

    <html></html> Holds all visible html markup to be displayed in the browser. <h1> is a top level heading used to display titles. <a> is a link tag for creating links. <p> is a paragraph tag and used to display text. <ul> is an unordered list used to display lists without a particular order.

  1. What are empty elements?

    Empty elements that do not have any words between an opening and closing tag.

  2. What is semantic markup?

    Semantic markup provides extra information about the HTML page.

  3. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.

    <header>, <section>, and <aside> are all new HTML5 elements.

Day 2 Prework

Section 1

  1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?

    The main differences ordered lists are lists where each item in the list is numbered, unordered lists are lists that begin with a bullet point rather than a character, and definition are made up of a set of terms along with the definitions for each of those terms.

Eamples of orderd, unordered, and definition lists.

  <ol>
    <li>Steps in a recipe</li>
    <li>Steps in a recipe</li>
    <li>Steps in a recipe</li>
  </ol>

  <ul>
    <li><a href="#">Link to somewhere</a></li>
    <li><a href="#">Link to somewhere</a></li>
    <li><a href="#">Link to somewhere</a></li>
  </ul>

  <dl>
    <dt>Term to be defined</dt>
    <dd>Definition of term/.</dd>
  </dl>

  1. What is the basic structure of an element used to link to another website?

    The basic structure of the <a> element is <a href"link_here">LINK_TEXT</a>.

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

    You should include the target attribute to open a new tab when a link is clicked.

  3. How do you link to a specific part of the same page?

    You can link to a specific part of a page by using an id attribute.

Section 2

  1. What is the purpose of CSS?

    The purpose of CSS is to style HTML.

  2. What does CSS stand for? What does cascading mean in this case?

    CSS stands for Cascading Style Sheets.

  3. What is the basic structure of a CSS rule?

    The structure of a CSS rule contains a selector h1and a deceleration color: red. This will result in all h1's being the color red.

  h1 {
    color: red
  }

  1. How do you link a CSS stylesheet to your HTML document?

    You can link a CSS stylesheet to an HTLM file with a link element and the path to your stylesheet.

<link rel="stylesheet" href="styles.css">

  1. What is it useful to use external stylesheets as opposed to using internal CSS?

    It is user to use external stylesheets to separate concerns and to keep with using the DRY method. HTLM files for HTML, CSS for CSS and so on.

  2. Describe what a color hex code is.

    These are six-digit codes that represent the amount of red, green and blue in a color, preceded by a pound or hash # sign.

  3. What are the three parts of an HSL color property?

    HUE is expressed as an angle (between 0 and 360 degrees). SATURATION is expressed as a percentage. LIGHTNESS is expressed as a percentage with 0% being white, 50% being normal, and 100% being black.

  4. In the world of typeface, what are the three main categories of fonts? What are the differences between them?

    Serif fonts have extra details on the ends of the main strokes of the letters. These details are known as serifs. Sans-serif fonts have straight ends to letters, and therefore have a much cleaner design. Monospace (or fixed-width) font is the same width. (Non-monospace fonts have different widths.)

  5. When specifying font-size, what are the main three units used?

    The three main units user are Pixels, Percentages, and Ems.

Day 3 Prework

Section 1

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

    The type attribute controls the behavior the input.

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

    The select element is used to create a dropdown list.

<form action="http://www.example.com/"*
  <p*Please choose an option</p*
  <select name="devices"*
    <option value="ipod"*iPod</option*
    <option value="radio"*Radio</option*
    <option value="computer"*Computer</option*
  </select*
</form*

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

    The form should have an action, and a method and the type should correspond with what ever kind of input is being used.

<form action="/signup" method="post"*
  First name: <input type="text" name="first-name"*
  <input type="submit" value="Submit"*
</form*

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

    The fieldset element is used to group similar form items together.

Section 2

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

    The border separates the edge of one box from another. The margin sits outside the edge of the border. You can set the width of a margin to create a gap between the borders of two adjacent boxes. The 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?

    The rule padding: 1px 2px 5px 10px is the same as writing

.my-styled-div {
  padding-top: 1px;
  padding-right: 2px;
  padding-bottom: 5px;
  padding-left: 10px;
}

  1. Describe the different between block-level and inline elements.

    Block-level boxes take up a new line, while inline boxes fit between surrounding text.

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

    By setting a position: fixed; on an element that element will not scroll with the rest of the page. When you move any element from normal flow, boxes can overlap. The z-index property allows you to control which box appears on top.

  3. 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. They tend to use percentages.

Day 4 Prework

Section 1

  1. In an image element, why is the alt attribute important?

    The alt attributed is important to assist screen reading tech in describing a picture to a user, and provides a text description of the image which describes the image if you cannot see it.

  2. What determines if an image element is inline or block?

    An image's display is affected by the surrounding elements. If the <img> element is inside a block level element, any text or other inline elements will flow around the image. If the <img> is followed by a block level element (such as a paragraph) then the block level element will sit on a new line.

    <!-- Image inline -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos <img src="image.src" alt="I am an image">iste quaerat distinctio veritatis at debitis excepturi, nostrum </p>

<!-- New Link for an Image -->
<h1>Image Heading</h1>
<img src="image.src" alt="I am an image">

  1. What are the benefits of jpg or png image file formats?

    The benefits of using jpg or png can help the browser display the image correctly. png is best for flat color and jpg is best for images with many colors .

Section 2

  1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?

    You can specify many different img sizes in your CSS to show different sized images based on screen size, also you maintain separation of concernse by using CSS for styling purposes and HTML for markup purposes.

  2. What is an image sprite, and why is it useful?

    When a single image is used for several different parts of an interface it is known as sprite The advantage of using sprites is that the web browser only needs to request one image rather than many images, which can make the web page load faster.

Day 5 Prework

  1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.

    Values of the number type are numeric values such as 1. Values of the type string are used to represent text an is the text/numbers between single/double quotes "Andrew" === 'Andrew'. Values of the type of booleans are represented with true or false.

  2. What are the three logical operators that JavaScript supports?

    The three logical operators are and &&, or ||, and not !.

  3. What is the naming convention used for variables?

    Camel case is used for naming variables in JavaScript.

    const firstName = "Andrew"

  4. What is the difference between an expression and a statement?

    A fragment of code that produces a value is called an expression 1. A statement is an expression with a semicolon after it 1;.

  5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?

    It is important to never use reserved words as variables as they are officially not allowed to be used in that sense, and will cause a program to fail or cause unwanted side effects.

    break case catch class const continue debugger
default delete do else enum export extends false
finally for function if implements import in
instanceof interface let new null package private
protected public return static super switch this
throw true try typeof var void while with yield

  6. What is control flow, and why is it useful for programming?

    Control flow allows the programmer to control how a program will run by introducing disturbances through the use of conditional (if, else, and switch) and looping (while, do, and for) statements.

Day 6 Prework

Section 1

  1. If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?

Entering sayHello will in the console will display what sayHello is, as opposed to sayHello() will call the function sayHello.

sayHello;
ƒ sayHello(){console.log('hello')}

sayHello();
hello
undefined
  1. What is the keyword return used for?

A return statement determines the value the function returns.

  1. What are function parameters?

Parameters are like regular variables, but their values are given by the caller of the function, not the code in the function itself.

  1. What is the naming convention used for function names?

The naming convention for functions is camelCase.

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