Skip to content

Instantly share code, notes, and snippets.

@danielafcarey

danielafcarey/DanielaCarey_Prework.md

Last active January 12, 2018 02:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save danielafcarey/19222e258e8c144545fc860b09d9555b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save danielafcarey/19222e258e8c144545fc860b09d9555b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
DanielaCarey_Prework.md

Day 1 Prework

Questions

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

    HTML describes the structure of pages.

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

    Elements are made up of tags. Elements tell the browser about the information between the tags. Tags are elements of the element.

  3. Why do we use attributes in HTML elements?

    Attributes provide additional info about the contents of the element.

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

    • Body element is where you put everything inside the main browser window - info on the page
    • Head element contains information about the page
    • Title element is what shows at the top of the browser

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

    Right-click, click "view page source"

  6. List five different HTML elements and what they are used for.

    • Heading tags (<h1></h1>, etc.) are used to organize sections of your page into sections and subsections.
    • Bold tags (<b></b>) are used to make bold-styled text.
    • Italic tags (<i></i>) are used to make italic-styled text.
    • Superscript tags (<sup></sup>) are used to make superscript text.
    • Subscript tags (<sub></sub>) are used to make subscript text.

  7. What are empty elements?

    Emtpy elements usually only have one tag such as line breaks <br /> and horizontal rules <hr />

  8. What is semantic markup?

    Semantic markup are elements that are not intended to affect the structure of your web pages, but add extra info to the page. They are often used in other programs such as screen readers. Example: <abbr title="Professor">Prof</abbr> Stephen Hawking is a...

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

    • <header> and <footer> can be used for the main heater or footer that appears at the top or bottom of every page of a site.
    • <nav> is used to contain the major navigational blocks on the site
    • <article> is a container for any section of a page that could stand alone and potentially be syndicated.

CodePen

Prework Pen

Day 2 Prework

Lists & Links Questions

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

    • Ordered Lists are lists where each item in the list is numbered.
    • Unordered Lists are lists don't have a specific order and use bullet points.
    • Definition Lists are a set of terms and the definition of those terms.

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

    <a href="http://website.com">This is a link.</a>

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

    target="_blank"

    Question from page 86: It says you should avoid opening links in a new window - why? As a user, I prefer all links to be opened in a new window.

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

    First, you have to assign id attributes to the elements you want to link using id="idname" inside the element tag. Then you can use the <a href= element and include the tag name inside the href quotes preceeded by a # (<a href="idname">ID Name</a>

CSS, Color, and Test Questions

  1. What is the purpose of CSS?

    CSS allows you to specify how the content of an element should appear.

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

    CSS stands for Cascading Style Sheet. Cascading means that styles can cascade from one style sheet to another, enabling multiple style sheets to be used on one HTML document.

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

    CSS rules contain a selector and a declaration. The selector indicates which element the rule applies to. The declaration indicates how the elements in the selector should be styled. Declarations have 2 parts: the property and the value. You can have multiple declarations in each selector.

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

    Use the <link> element to link to the CSS file used to style the page. It should have href to indicate the location, type to indicate the type of document being linked to, and rel to specify the relationship between the HTML page and file it is linked to.

  5. Why is it useful to use external stylesheets as opposed to using interal CSS?

    Using external stylesheets allows you to have all your webpages to share the same stylesheet, resulting in less code, easier to read code, and smaller HTML pages. It also allows the site to load faster for the user once they have downloaded the CSS stylesheet.

  6. Describe what a color hex code is.

    These are 6-digit clodes that represent the amount of red, green, and blue in a color. Preceded by a #

  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: have extra details at the ends of the main strokes of the letters
    • Sans-serif: straight ends to letters
    • Monospace: every letter in the font is the same width.

  9. When specifiying font-size, what are the main three units used?

    Pixels, Percentages (a percentage of the default 16px), or Ems (the width of a letter m)

Day 3 Prework

Forms 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 of the input.

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

    The select element is used to create a dropdown list. The option element is used to spcify the options in the dropdown list.

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

    Use the submit button to send form to a server with <input type="submit"

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

    Use the fieldset element to group related controls together.

Boxes & Layout Questions

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

    • The border separates the edge of one box from another. Every box has a border.
    • The margins sit outside the edge of the border. Set a width of the margin to create a gap between the borders of two adjacent boxes.
    • The padding is the space between the border of a box and the content inside the box. Add padding to increase the readability of the box contents.

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

    Pixel sizes are given in clock-wise order starting at the top: top (1px), right (2px), bottom, (5px), left (10px)

  3. Describe the difference between block-level and inline elements.

    • Block-level elements start on a new line and are the main building blocks of a layout. Examples are: <h1> <p> <ul> <li>
    • Inline elements flow between surrounding text. Examples are: <img> <b> <i>

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

    Fixed positioning positions elements in relation to the browser window. This positioning does not affect the position of the surrounding elements and these fixed elements do not move when the user scrolls up or down. When you move any element from normal flow, the boxes can overlap (elements that come later in your code will be on top) so you use the z-index property to control which box appears on top.

  5. What is the difference between a fixed and liquid layout?

    Fixed layouts do not change sizes when the user browser-window-size changes. Liquid layouts stretch and contract as the user changes browswer-window-size.

Day 4 Prework

HMTL Images Questions

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

    Alt provides a text description of the element if you cannot see it, to be used by screen reader software and search engines.

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

    If the <img> is followed by a block level element (<p> or <h1>) then the block level element will sit on a new line after the image (block). If it is inside the block level element, any text or other elements will flow around the image (inline).

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

    JPEG is good for images that have many different colors. PNG is good for images with few colors or large areas of the same color.

CSS Images Questions

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

    This helps keep your images sizes consistent across the page instead of having to put the dimensions for every image in the HTML.

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

    A Sprite is when a single image is used for several different parts of an interface. This is useful because the browser only needs to request one image, which makes the page load faster.

Day 5 Prework

Javascript questions

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

    • Numbers are data with numeric value.
    • Strings are data used to represent text.
    • Booleans are data that have either a true or false value.

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

    and &&, or ||, and not !

  3. What is the naming convention used for variables?

    • can be any word that isn’t a reserved word (var)
    • no spaces
    • can include digits but can't start with a digit
    • can't include punctuation, except for the characters $ and _
    • if using multiple words, all-lowercase the first word and capitalize the first letter of the following words. i.e. thisIsAVariable

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

    An expression is a fragment of code that produces a value and a statement is more like a "full sentence" - a full program is made up of statements which are made up of expressions.

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

    These words are reserved for future JavaScript versions and if used will cause an error in your code. Examples are: else float package

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

    Control flow is the order in which the statements are executed in your code. This allows you to control the path in which your code executes (if you don't want the default top-to-bottom).

Day 6 Prework

Javascript (functions) 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?

    sayHello calls the function without the value of the function. sayHello() actually calls the value of the function.

  2. What is the keyword return used for?

    It determines the value that the function returns.

  3. What are function parameters?

    Parameters are pieces of info passed to a function.

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

    Same conventions as variables, but best practice is to use concise, obvious names that will be clear to someone else reading your code.

Day 7 Prework

UX Examples

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

    • Good example: Squarespace - I've used Squarespace to create multiple websites and I am able to highly recommend it to those without technical experience because it's so simple to use.
    • Bad example: JIRA/Confluence - In my experience, neither JIRA nor Confluence are very intuitive and it takes way too much work to figure out what I want to do.

  • Usability: Are there any user mistakes you could prevent?

    • Good example: Gusto - I may be biased because I worked there, but Gusto does a great job of making a complicated process (payroll & benefits) simple and easy-to-do for the user. Typically the user is not a payroll professional and Gusto crafts their website/product in a way that prevents users from making mistakes that could cost them $$$.
    • Bad example: Waze - User mistake they could prevent: crashing their car while trying to navigate the Waze app. There is so much unnecessary clutter on the app. An app that people will use while driving should aim to be as simple as possible while still providing everything the user needs.

  • Design: Do the colours, shapes, and typography help people find what they want and improve usability of the details?

    • Good example: Square Cash - specifically their mobile app, but the website is good, too. The design is so simple and functional. I am using the app to make or request a payment and that's the first thing that pops up when I log in. I don't have to see a lot of other junk (like a feed of what my friends are doing).
    • Bad example: Venmo - Unlike Square Cash, the design of Venmo does not make it instantly visually clear where to go to do what you want. It's a tiny button in the top right.

  • Copywriting: Is it clear, direct, simple, and functional?

    • Good example: Airbnb - the copy is clear and direct when you first open the site to find a place.
    • Bad example: LinkedIn - LinkedIn is way too clutered and clunky and it makes me not enjoy my experience using it. Because of that, I essentially view it as a "necessary evil" at this point.

  • Analysis: How can you use this analysis to make improvements?

    • Good example: Amazon - analyzing every click and every product I look at to make better product suggestions to me.
    • Bad example: Facebook - I feel a little sheepish giving them as a bad example because I'm positive Facebook collects & analyzes more user data than most and my guess is that there's an intelligent reason they are showing me certain content, but, I have never been impressed with the content that shows up in my feed. With all the data Facebook gets (not only from their site but every other site linked to it), I feel they could a better job tailoring my feed to things I actually want to see.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment