Skip to content

Instantly share code, notes, and snippets.

@trbachmann

trbachmann/TiffanyBachmann_Prework.md

Last active September 18, 2018 23:38
Show Gist options
  • Save trbachmann/b13479f8f695dea08ff9387a013cf505 to your computer and use it in GitHub Desktop.
Save trbachmann/b13479f8f695dea08ff9387a013cf505 to your computer and use it in GitHub Desktop.
Download ZIP
Prework for FE1810
Raw
TiffanyBachmann_Prework.md

Prework Day 1

Chapter 1 & 2 Questions

  1. On a website, what is the purpose of HTML code?
    It holds the content and describes the structure of a webpage
  2. What is the difference between an element and a tag?
    Elements are made up of two tags, an opening and closing tag. Elements explain to the browser something about the information enclosed between it's opening and closing tag.
  3. Why do we use attributes in HTML elements?
    To provide additional information about AN element.
  4. Describe the purpose of the head, title, and body HTML elements.
    The element contains information about the page. Within the element there is usually a <title> element. The <title> element contents are shown in the top of the browser (above the url) or on the tab for that page. The elment designates that everything within this element is shown in the main browser window.
  5. In your browser (Chrome), how do you view the source of a website?
    Select View from the browser menu, then Developer, then View Source
  6. List five different HTML elements and what they are used for.
    • b element makes the text within its tags bolded
    • i element makes the text within its tags italicized
    • h1 element is used for main headings
    • sup element is used to make characters within its tags superscript, such as the suffixes of dates
    • sub elements is used to make characters within its tags subscript, such as footnotes
  7. What are empty elements?
    A few elements that do not have any words between an opening and closing tag. They usually only have one tag.
  8. What is semantic markup?
    Elements that do not affect the structure of web pages, but add extra information to the pages. They provide the definition of acronym, show when a quote it given, etc.
  9. What are three new semantic elements introduced in HTML 5?
    • header element is used for the main header that appears at the top of the page
    • nav element contains the primary navigational content for the site
    • article element is used for any section of a page that should stand alone

Code Pen Link

Prework Day 2

Chapter 3 & 4 Questions

  1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
    • Ordered lists are where every item listed has a number, such as a list of steps.
    • Unordered lists begin with a bulletpoint instead of a number.
    • Definition lists are a set of terms along with their definitions.
  2. What is the basic structure of an element used to link to another website?
    The <a>element below is used to link to other websites. The href is the attribute that's value is the absolute URL of the page you want peopel to visit. The text in between the opening and closing tag is what users will click to visit the page in the href value. 
    <a href="http://50campfires.com/">Camping tips, recipes and more!"</a>
  3. What attribute should you include in a link to open a new tab when the link is clicked?
    You should include the target attribute and its value should be _blank
  4. How do you link to a specific part of the same page?
    First you use the id attribute to identify the section(s) of the page the link will go to. Then the href value in your <a> element will start with a # symbol followed by the id atrribute value. Below is an example. 
       <h1 id="top">Introduction</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit arcu elit, ac commodo sem venenatis mattis. Etiam imperdiet aliquam purus, a fermentum est laoreet a.</p>
   <h2>Chapter 1</h2>
   <p>Ut sagittis, velit tincidunt ullamcorper varius, massa nisl finibus felis, a aliquam nibh tellus tincidunt est.</p>
   <p><a href="#top">Back to the top</a></p>

Chapter 10, 11 & 12 Questions

  1. What is the purpose of CSS?
    CSS allows you to stlye elements within an HTML document.
  2. What does CSS stand for? What does cascading mean in this case?
    It stands for Cascading Style Sheet. Cascading is referring to the CSS rules and how precidence is determined when more than one rule applies to an element.
  3. What is the basic structure of a CSS rule?
    Rules are made up of two parts, a selector and declaration. The selector indicates which element the rule will apply to and the declaration explains how the element should be styled. h1 is the selector and color: blue is the declaration.
    h1 { color: blue;}
  4. How do you link a CSS stylesheet to your HTML document?
    <link href="css/styles.css" type="text/css" rel="stylesheet" />
  5. When is it useful to use external stylesheets as opposed to using interal CSS?
    It is useful to use external stylesheets when you have more than one page. It allows you to not have to write all of the CSS code on every HTML page, which keeps the code shorter. Also if you need to make a change to the CSS, for example to all <h3> elements you only have to do it in one location instead of every page.
  6. Describe what a color hex code is.
    It is a six-digit code. The digits are describing the red, blue and green amounts that make up the color.
  7. What are the three parts of an HSL color property?
    1. Hue
    2. Saturation
    3. Lightness
  8. In the world of typeface, what are the three main categories of fonts? What are the differences between them?
    1. Sans - has extra details on the ends of the main strokes of the letters
    2. Sans-Serif - has straight ends to the letters
    3. Monotype - every letter is the same width
  9. When specifiying font-size, what are the main three units used?
    1. Pixels
    2. Percentages
    3. Ems

Prework Day 3

Chapter 7 Questions

  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. For example type="text"
  2. What element is used to create a dropdown list?
    The select element <select>
  3. If you're using an input element to send form data to a server, what should the type attribute be set to?
    It depends on the type of data you are collecting, i.e. email address type="email" vs. name type="text" vs. password type="password" vs. answer to a question type="radio" or type="checkbox"
  4. What element is used to group similar form items together?
    The fieldset element <fieldset>

Chapter 13 & 15 Questions

  1. Describe the differences between border, margin, and padding.
    Border - the border separates the edge of one box from another (every box has one, even if it isn't visible or set to 0px)
    Margin - it sits outside the edge of the border and can be set to create a gap between borders of two adjacent boxes . Padding - the space between any content within a box and the border of that box
  2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
    The values are in clockwise order. Top(1px), Right(2px), Bottom(5px), Left(10px)
  3. Describe the different between block-level and inline elements.
    Blocklevel elements look like they start on a new line, while inline elements flow witin the text and don't start on 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 position: fixed; positions the element in relation to the browser so when a user scrolls down the page the element with fixed positioning stays in the same place. When using fixed positioning boxes can overlap, which is where the z-index property z-index: 10; comes into play. The z-idex property controls which element sits on top.
  5. What is the difference between a fixed and liquid layout?
    Fixed layout designs do not change in size as the user changes the size (bigger/smaller) of their browser window, while liquid layout designs stretch or contract as the user changes the size of their browser window.

Prework Day 4

Chapter 5 Questions

  1. In an image element, why is the alt attribute important?
    The alt attribute is important because it gives text if you can't see this image. It is what screen readers will read to users who are visually impaired and explain what the image is on the page. It is also what will show up if the image does not load in the user's browser window.
  2. What determines if an image element is inline or block?
    An <img> element is an inline element. If it is placed before a block-level element, then it will also seem like a block-level element becase the other block element will start on the next line after the image. If an <img> element is placed within a block element any text or other inline elements will flow around the image.
  3. What are the benefits of jpg or png image file formats?
    The jpg file format best displays pictures with many different colors, while png file format best displays images with few colors or a large area of the same color. The png file format is also the right format to use with transparent images if the transparency of the image has rounded or diagonal edges or if you want a semi-opaque transparency or drop shadow.

Chapter 16 Questions

  1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
    When a page renders, the CSS and HTML usually loads before images do. If you specify the height and width in the CSS you are telling the brower how much space to leave for the image so that it can render the rest of the page while the image loads instead of waiting for the image to load first.
  2. What is an image sprite, and why is it useful?
    It is when a single image is used for several parts of an interface. This is useful because instead of the browser havinging to request many images, it only has to request one, which can make the page load faster.

Prework Day 5

Chapter 1 & 2 Questions

  1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
    1. The value of number data types are numeric, like 13
    2. The string data type represents text and are writen by enclosing contents in quotes. You can use single quotes, double quotes or backtics. "This is a string" .
    3. The boolean data type has only two values, true and false. You can produce boolean values through comparison like this, console.log(3 < 5)
  2. What are the three logical operators that JavaScript supports?
    These threee logical operators can be applied to Boolean values.
    1. The and operator && is binary and results in true only if both given values are true.
    2. The or operator || produces true if either value is true.
    3. The not operator ! is a unary operator and flips the value given to it. For example, !true produces false
  3. What is the naming convention used for variables?
    Binding names can be any word and digits can be part of the binding name, but they cannot start with a digit. A binding name can include $ or _ but can't include other puntuations, special charaters or spaces. Typically most follow capitalizing every word, but the first, which looks like firstBigName and is called camelCase.
  4. What is the difference between an expression and a statement?
    An expression is a fragment of code that results in a value, while a statement is a potion of a program that produces and action.
  5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
    let break switch and package are all keywords that are reseved because they have special meaning and do specific things in JavaScript.
  6. What is control flow, and why is it useful for programming?
    Control flow is the order that statements are executed in. Statements are executed from top to bottom, but this structure can be changed by using conditional and loop statements. Looping is useful because it lets us run a piece of code multiple times, instead of having to type it out multiple times. Condtional statements lets us create alternate paths so that pieces of code only run if certain conditions are met.

Prework Day 6

Chapter 3 Questions

  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() is calling the function, which means the function will execute wha inside its code block. So the output will be Hello! Entering sayHello is just entering the name of the function and not calling it into action. So the out put will be function sayHello(){console.log("Hello!")}
  2. What is the keyword return used for?
    The return keyword is used to return a value to the code that called the function.
  3. What are function parameters?
    parameters are pieces of information passed into the function. They act like variables within the function. The caller of the function provides the initial values. Example: 
    function getSum (a, b){
    return a + b;
   }
   getSum(2, 8);
  4. What is the naming convention used for function names?
    camelCase is the naming convention used for function names, like calculateSize .

Prework Day 7

UX/UI

  1. Psychology: How much work does the user have to do to get what they want?

    • Open Table's website is good at suportting this. When you arrive at their homepage the top of page is a quick form to find a restaurant, with most of the options already filled in (i.e. current date, user's current location city). The user can click Let's go or adjust a couple of options first and is quickly brought to search results for open tables at nearby restaurants.
    • Recreation.gov's website makes the user go through multiple steps in order to book a campground reservation. It is not a quick or simple process to complete.

  2. Usability: Are you being clear and direct, or is this a little too clever?

    • Progressive Insurance's website is clear and direct by asking users what they want to insure and then explaining that if they click one of the boxes below (labeled with words and images i.e. auto and a car) they can get a quote.
    • Little Owl Coffee's website doesn't provide a menu for users to move around and isn't very clear. There is a pink banner part way down the page with a mountain logo in the corner. If you click it, it takes you to Middle State Coffee's website, which is the brand of coffee they serve at Little Owl Coffe. If you recognize the logo you might deduce that, but I think this website is trying to be a little too clever and not being clear and direct.

  3. Design: Do users think it looks good? Do they trust it immediately?

    • BarkBox's website has an appealing design. The first image shows what BarkBox is and then explains in a brief graphic below. They also show customer's dogs with their BarkBoxs below, which helps build immediate trust.
    • Author, Suzanne Collin's website is not visually apealing. The images are not aligned and there is text in varying places across the website. It doesn't look like a well designed site, which can make it look untrustworthy to users visiting it.

  4. Copywriting: Does it inform the user or does it assume that they already know what its about?

    • Little Man Ice Cream does not assume the user already knows what the business is. The first part of the menu includes a link to Our Story where users can learn more and in addition there is a paragraph on the homepage explaining that Little Man Ice Cream has been open since 2008 serving ice cream, novelities and treats.
    • Carl's Pizza assumes the user already knows it is a pizza restaurant. The website doesn't include any information about the restaurant or what they serve.

  5. Analysis: Are you looking for subjective opinions or objective facts?

    • Sprouts' website asks to know your location when you visit their website. This information can be tracked as an objective fact to analize how many users visited the website from specific areas.
    • StitchFix's Get Started button takes users through a set of questions (i.e. Do you enjoy shopping? Do you like to experiment with different styles?) that is looking for their subjective opinion.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment