Skip to content

Instantly share code, notes, and snippets.

@foxwellm

foxwellm/foxwellm_prework.md

Last active September 2, 2018 22:58
Show Gist options
  • Save foxwellm/8d8290ee012cdb762f3568721756bfe0 to your computer and use it in GitHub Desktop.
Save foxwellm/8d8290ee012cdb762f3568721756bfe0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
foxwellm_prework.md

Day 1

Chapters 1 and 2

  1. On a website, what is the purpose of HTML code? HTML describes the structure of pages on a website
  2. What is the difference between an element and a tag? Elements are made up of two tags, an opening and closing tag. The element tells the browser something about the information that sits between the opening and closing tag.
  3. Why do we use attributes in HTML elements? Attributes provide additional information about the contents of an element.
  4. Describe the purpose of the head, title, and body HTML elements. Head - Contains information about the page. Title - Displays title on top of browser or on the tab for that page. Body - Everything to be shown inside the main browser window.
  5. In your browser (Chrome), how do you view the source of a website? Right click on webpage and select 'View page source'
  6. List five different HTML elements and what they are used for. For example,

    is a paragraph element, and it is used to represent a paragraph of text. <h#></h#> are heading tags, where # is the number that defines the type of heading, the lower the number, the larger the heading. Numbers range from 1-6. bold tags are used to make characters inside the element bold. italic tags are used to make characters inside the element italic.
    A way to add a line break inside the middle of a paragraph.
Adds a horizontal line between sections 7. What are empty elements? An element that doesn't have any words between opening and closing tags. 8. What is semantic markup? A text element that adds extra information without affecting the structure of the webpage. 9. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements. , , .

CodePen Prework https://codepen.io/fox84/pen/oMroep

Day 2

Chapter 3 and 4

  1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences? Ordered lists use numbers to clarify the order in which each item in the list comes. Unordered lists use bullet points to mark each item as the don't need to be in any specific order. Definition lists have the definition of each item of the list tabbed under them.
  2. What is the basic structure of an element used to link to another website? Turing Website
  3. What attribute should you include in a link to open a new tab when the link is clicked? Change the target 4.How do you link to a specific part of the same page? By giving the id attribute a name and then linking back to that attribute using the href element but adding a # symbol in front of the given name.

Chapters 10,11, and 12

  1. What is the purpose of CSS? CSS allows you to create rules that specify how the content of an element should appear.
  2. What does CSS stand for? What does cascading mean in this case? Cascading Style Sheet. "Cascading" means that because more than one stylesheet rule could apply to the HTML, there must be a way of determining which specific stylesheet rule applies to which piece of HTML. The rule used is chosen by cascading down from the more general rules to the specific rule required. The most specific rule is chosen.
  3. What is the basic structure of a CSS rule? A selector and a declaration. The selector indicates which element the rule applies to, and the declaration refers to how it should be styled.
  4. How do you link a CSS stylesheet to your HTML document? Inside the element, using 3 attributes (href, type, and rel)
  5. When is it useful to use external stylesheets as opposed to using internal CSS? When you have more than one page on the website. This allows you to use the same style rules across all pages (rather than repeating each page), keeps content separate from how the page looks, and you can change the styles used across all pages at once.
  6. Describe what a color hex code is. Six different codes that represent the amount of red, green, and blue in a color, proceeded by a pound sign.
  7. What are the three parts of an HSL color property? Hue, saturation, and lightness.
  8. In the world of typeface, what are the three main categories of fonts? What are the differences between them? Serif - They have extra details on the ends of the main strokes of the letters. Sans-serif - Have straight ends to letters, therefore a much cleaner design. Monospace - Every letter is the same width.
  9. When specifying font-size, what are the main three units used? Weight, Style, and Stretch.

Day 3

Chapter 7

  1. If you're using an input element in a form, what attribute controls the behavior of that input? Type.
  2. What element is used to create a dropdown list? Select.
  3. If you're using an input element to send form data to a server, what should the type attribute be set to? Submit.
  4. What element is used to group similar form items together? Fieldset.

Chapters 13 and 15

  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 and creates a gap between the two adjacent boxes. The padding is the space between the border of the box and any content inside of it.
  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. Describe the different between block-level and inline elements. Using the block level element will make the elements act as a block if they are naturally inline, so they will be displayed top to bottom. Using the inline element will do the opposite, making the elements display horizontally.
  4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning? Fixed positioning allows an element to stay in the same position while the user scrolls down the page. The z-axis is important because this determines is the element that is fixed will be in front or behind the elements it is passing over as the user scrolls down. The higher the value (1-10), the larger the priority to be in front of the other element.
  5. What is the difference between a fixed and liquid layout? Fixed layouts do not change the size or design of the layout as the user changes the size of their browsing window. A liquid layout will change the layout by stretching or contracting to match the size the user is browsing on.

Day 4

Chapter 5

  1. In an image element, why is the alt attribute important? Because it provides a text description incase the image cannot be seen.
  2. What determines if an image element is inline or block? It depends on whether or not it was placed within an element that is naturally an inline or block element.
  3. What are the benefits of jpg or png image file formats? They match the same formatting and dimensions that are displayed on a webpage, therefore not wasting any memory in file size that would slow down the speed that the page loads.

Chapter 16

  1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? Since the size of your photos across the site are likely to not vary much, putting the size in CSS makes sure you don't have to keep putting in the dimensions for each individual page like you would if you put it in the HTML each time.
  2. What is an image sprite, and why is it useful? An image that is used for several different parts of an interface, this means the browser only has to request one image instead of many making the web page load faster.

Day 5

Chapters 1 and 2

  1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are. Numerical values, text, and a value that distinguishes between "true" and "false".
  2. What are the three logical operators that JavaScript supports? "&&", "||", and "==".
  3. What is the naming convention used for variables? No spaces, with only $ and _ allowed as special characters. Usually the first word is not capitalized and then the following words are.
  4. What is the difference between an expression and a statement? An expression is a fragment of code that produces a value, a statement produces something that changes the world around it.
  5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names? Break, case, catch, and class. They are used in the logic of the programming and therefore would confuse JavaScript if used as a variable.
  6. What is control flow, and why is it useful for programming? Control flow tells the program what lines of code to read in which order, this is useful because otherwise the code would not know which logic is being compared to what.

Day 6

Chapter 3

  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? sayHello will call to display the function, sayHello() will call to run the function in this case displaying "Hello!".
  2. What is the keyword return used for? To tell the function to exit the current function and return the value immediately after 'return'.
  3. What are function parameters? They are variables that the caller of the function inputs for the function to use.
  4. What is the naming convention used for function names? No spaces, the first word not being capitalized, but every subsequent word being capitalized.

Day 7

User Interface/User Experience

Psychology What is the user’s motivation to be here in the first place? Reddit.com vs failblog.cheezburger.com
Both are sites that have user submitted information that is promoted based on user interest. Reddit has its articles and different information streamlined so that users can skim through them and find something interesting to them. Failblog has larger areas for each article that take up half a page each, which takes longer to find something the user is interested in.

Usability Could you get the job done with less input from the user? Craigslist.org vs Buysaleandtrade.com Both are places to buy and sell things online. Buysaleandtrade has an easy search function where you can attach a zip code and search from the home page. Craigslist makes you find your location with no help of a search function before you can search for an item. Much more hassle for someone looking for something quickly.

Design Do users think it looks good? Do they trust it immediately? KLLM.com vs Thornford.com KLLM trucking company website that looks clean, well laid out, and professional. It’s exactly what you would expect from a company website. Thornford.com is bulky, has overly large buttons and doesn’t even scroll down to the bottom of the page properly. It would be hard to take them seriously after visiting this website.

Copywriting Is it clear, direct, simple, and functional? Wikipedia.org vs Uncyclopedia.wikia.com/wiki/Main_Page Both are free encyclopedias. Wikipedia has minimal clutter and gets straight to the point. Uncyclopedia is cluttered and the search function which is most likely the first thing visitors are looking for is hidden among the other header topics, same color, and you must click on it before it opens up to allow you to type in the search bar.

Analysis Are you using data to prove you are right, or to learn the truth? Sciencenews.org vs tfes.org Both are sites that are writing articles that make scientific claims. Sciencenews has citations from scientific research at the end of every article that supports the authors topic. Tfes.org makes scientific claims, uses mathematical equations, but never cites anything, leaving the user to have to trust the author implicitly.

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