Skip to content

Instantly share code, notes, and snippets.

@KaylaLawson

KaylaLawson/KaylaLawson_Prework.md

Last active November 7, 2018 23:16
Show Gist options
  • Save KaylaLawson/34b282c82f106de452f795a019bbc381 to your computer and use it in GitHub Desktop.
Save KaylaLawson/34b282c82f106de452f795a019bbc381 to your computer and use it in GitHub Desktop.
Download ZIP
Prework 1811-FE
Raw
KaylaLawson_Prework.md

Day One

  1. The purpose of HTML is to provide a foundation for the visuals and functions of a website. It's equal to the frame work of a building or home. You dont really notice it, cause it underneath all the other layers of what makes a building but its all right ther in front of you.
  2. An element is how you want a web server to communicate the instuctions of the page, examples are <titles>,<headers>, <body> etc. A tag surrounds the characters of elements, the characters that are communicating what you want displayed on the page. There are open tags and close tags. Tags can be looked at as containers.
  3. Attributes give us more information about the element. Attributes have two parts a name and a value. Attributes are extra information for the element. Instead of just a

    you can have ask for more <p lang="en-us">This will show english</p>
  4. The <head>, <title> and <body> of HTML is a basic path in which you want the user to journey through a site. Moving from point A to point B with a lot inbetween.
  5. Hold down option + command + U this opens up the source code of a webpage.
  6. <title></title> : is the title of the web page. This will appear on the webpage tab.
  • h1 <h1></h1> is seen as header one its a heading option for introducing a content.
  • <p></p> : is the paragraph element of an article. It helps break up the body content.
  • <body></body> : is the main content on your web page. Fitting headers, parapgraphs, all within the body of the web page for your viewers.
  • <html></html> : is expressing that anything inbetween these tags is html code and will be the sent to the web server to build out into a website for the user to interact with.
  1. Empty elements are tags wiht not words between an open or close tag. They are things like a linebreak <br /> or <hr />.
  2. Semantic markups work within the structure of the web page. They dont affect the layout but add to how the layout can feel. Meaning making words bold, italic, or building out quotes, etc.
  3. <nav>, <aside>, <header> are new HTML5 elements.

Day Two

  1. The differences between the three main types of lists are the roles each list plays. <ul></ul> is an unordered list, the purpose is simple, list items wihtout no praticular order. <ol></ol> is and ordered list, great for tasks that need to be completed step by step. Finally a definition list <dl></dl> is for defining terms, like word definitions wihtin a document, parapgh, etc.
  2. The basic structure of an element for linking to another website can be setup like this: You use <a></a> to setup the link within that element you then use the href attribute to add the actual link. Within the <a></a> element you have freedom to type what you would like the link to say. For example click her would be the visual and the action to the href link you setup. <a href="https://example.com">Click Her</a>
  3. You should use the href attribute. When its a link to a new page you use the whole url making it an absolute link
  4. First you need to identify the points in the page you want to link to, you do so by using id attribute. You then add a value to the href attribute you start that value with the pound/hashtag symbol (#). This referred to as an anchor link. Example looks like this: <a href="#new">Example</a> the id here is id="new".

  1. The purpose of CSS is to make a website more attractive. Giving it style and a visual look. Going back to the analogy of a house: you have your frame and foundation (html) now its time to add paint to the walls, doors you like, widows you love etc (CSS).
  2. CSS stands for cascading style sheets. Cascade in this case means following a processs. The CSS rules are following the order of the HTMl code.
  3. You apply CSS by rules. You apply these rules to html elements. The layout of css has two parts selector & declaration. Selctors highlight the element you want the rule applied to. Declaration is the style you want added to the selcted elements. Example p {font-family: Arial;} p is the selector, inside the {} is the declaration.
  4. You link CSS style sheets by using the <link> element. Its placed inside the <head> element. There are three parts to the <link>, they are <href>, <type>, and <rel>. You must have the .css file here.
  5. You should use CSS external stylesheets when you are working with a site that has multiple pages. This helps you make changes to mulitple elements by just working off of one file.
  6. A color hex code is a six digit number combination that represents the RGB in a specific color. To apply the color you use # symbol in front of the sixdigit combination.
  7. The three parts of HSL are Hue, Saturation, and lightness.
  8. Three main categories of typefaces are regular, bold/italic, and size. The differences are the way each is displayed, regular is keeping the the type very simple and direct. Bold/italic add more to a word or a phrase by visually calling attention to it in an article. And Size is how small or large the text will appear.
  9. The three main units used for font size are pixels, percentages and EMS.

Day Three

  1. The value of the type attribute controls the behavior of the input.
  2. The <select> element is used to create dropdown lists.
  3. You would use the <submit> to send form data to a server.
  4. The <fieldset> attribute is used group form items together.

  1. The differences between border, margin and padding are they provide different elements to a box or boxes. Every box on a webpage has a border, you can adjust the width to fit the visual needs you want. The margin is outside the edges of a borders of a box. The padding is within the borders of a box.
  2. 1px = top, 2px = right, 5px = bottom, 10px = left
  3. Block level elements always appear to start on a new line. Inline elements appear to continue on the same line with the other elements. Examples of block level elements are; <h1>, <p>, <ol>. Examples of inline elements are; <a>, <b>, <em> and <img>.
  4. You use fixed positioning for where you want a box to be positioned, this is referred to as box offset. Fixed positioned elements do not affect the position of surrounding elements and will not disappear when scrolling. The z-index is important for fixed positiong because z-index allows you to control which box appears on top (the fixed postion element in this case).
  5. Fixed width layouts stick to one resolution, the layout does not change when your user changes resolutions. Liquid layouts work with the different resolutions of your user, moving from a desktop to a phone or tablet easier.

Day Four

  1. With a<img> element the alt attribute is important for accessibility reasons. So screen reading software can read what the image is for users who you need the description read to them.
  2. If the <img> element is follwed by a block level element like <p> this will make both block elements. If its placed inside a block level element or text, its an inline element.
  3. jpg is good to use for photographs or images that have mutlitple levels of color to them. png is good for logos, diagrams, illustrations, or items that have flat colors.

  1. When you specify the height x width of images it allows the webpage to load around the space of the image, if the image is taking a while to load, it wont affect the webpage from loading around the images pixels.
  2. A sprite gives you the ablitiy to use only one image for several different parts of an interface. This helps with load times for a webpage.

Day Five

  1. Numeric data type handles numbers. Numbers dont have to be used for calucations, they can be used for determining size of the screen, moving positions of and element, etc.

String data types are letters and other characters. They are enclosed in a pair of quotes, it doens't matter if you use single or double quoates as long as the opening quote matches the closed quote.

Boolean data types are true or false values. Using booleans helps javascript move onto different tasks.

  1. Javascript supports Logical AND && : tests more than one condition. Logical OR || : tests at least one condition. and Logical NOT ! : inverts a single boolean (true or false) and inverts it.
  2. There are six rules for naming a variable: 1. the name must begin with a letter,dollar sign, or an underscore. 2. They can contain letters, dollar signs, or underscores, you can not use a dash or period in the name. 3. You cannot use keywords or reserved words. 4. All variables are case sensitive example: hournow vs hourNow would be different variable names. 5. Use names that describe the info that the variable stores: firstName is used to store a person's first name. 6. If you have two words in a variable name you should use the camel case effect: firstName rather thatn firstname
  3. An expression is the result of a single value. ex: var color = 'purple'; the expression is the color being purple. A statement is an individual step or instruction, the statement is the ask for the interactive action taking place. An expression is within a statement.
  4. Reserved words: its wise to avoid these in your variable name for the potential use of them in future versions of Javascript. Some reversed words are let and yield
  5. Control flow is important cause its the information telling the program what to do with the value of the variable.

Day Six

  1. The difference between the sayHello and sayHello() in the console is the result sayHello produces the right way to ask the function, it tells you to include the () in order to get the console to respond with a Hello!. sayHello() produces the function correctly. 2.return is used to the provide the value of the function to the user.
  2. Function parameters are inside the function but act like variables. They provide the information that helps produce the result. Like a math equation: 4x2 = 8 (4,2) is the information needed to get you to 8.
  3. You use the function name followed by parentheses. A function name can sometimes be called an identifier.

Day Seven

  1. What is the user’s motivation to be here in the first place? Good: https://www.calm.com/
  • The motivation is clear with this site, its an app and network built around getting help meditating. Its very clear on what the user wants but also what the developers want the user to do.
  1. Have you provided everything the user needs to know? https://www.panthera.org/
  • Panthera really does a great job of this. You can learn the surface level of information but you have the opportunity to dive deeper.
  1. Does it communicate the purpose and function without words? https://www.allbirds.com/ -I think allbirds does a great job at this. All of the information is given to you visually.
  2. Does it reduce anxiety? http://connectforhealthco.com -This site does a good job of being clear with a messy subject. The dates are clear and the actions are clear.
  3. Are you looking for subjective opinions or objective facts? http://www.visualintelligencebook.com/ -I immediately thought of this book, not really the site for this question. It has truly opened my eyes.

Web site: https://codepen.io/kayrae7128/pen/YRwedZ

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