Created
January 14, 2018 03:59
-
-
Save kmarler2/2ae83f20b91c3aab98a750dba81cb3ad to your computer and use it in GitHub Desktop.
Keeliana.Marler_TechnicalPrework
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Day 1: | |
1. The purpose of HTML code is to structure and customize websites. | |
2. An element consists of two tags, and everything in between them, and are used to structure pages. Tags are pieces of an element, | |
and are used to signal the beginning and end of an element. | |
3. Attributes can be used to give more detail to an element. | |
4. The purpose of the head element is to give more information about the page, but does not necessarily show up on the main browser | |
window. The purpose of the title element is to give the page a name, and is typically displayed at the top of the webpage of on the tab. | |
The purpose of the body element is to signal which parts of the code should be displayed on the browser window. Everything within the | |
body element will be displayed. | |
5. CTRL + Shift + I | |
6. <body></body> elements contain everything that will be shown in the browser display window. <h1></h1> is the main heading of a page. | |
<p></p> is the paragraph element, it contains the main text of a page. <i></i> is an element which causes all of the contained text to be | |
in italics. <b></b> is an element which will cause any contained text to be bold. | |
7. Empty element are elements that do not contain anyy content, such as the <br> element. They are self-closing and only require one tag. | |
8. Semantic markups don't add extra informantion through the page, rather they add more detail to the pre-existing information. | |
9. <s><s/> element is used to cross out certain lines of text. <address><address/> gives the page user contact info for the creator of | |
the page. <em><em/> elemetn is used to subtly emphasize one portion of text, and typically changes the included text to italics. | |
Day 2: | |
1. An ordered lists organizes data with numbers, and unordered list organizes data with bullet points, and a definition list gives the word | |
to be defined, which is then followed by a set of terms used to define the item. | |
2. Links can be created using the <a><a/> element. The <a> element has the href attribute. To link to a website, you must include the <a>, | |
the attribute href, the URL, and the link name that you want to display to the user. | |
3. To create a link which opens a link in a new tab, you must include the target attribute. The value of target is _blank. | |
4. To create a relative link, you must include the <a> element, the href attribute, the relative url, and the name you want to give the link. | |
Pt. 2(Chapters 10, 11, 12) | |
1. The purpose of CSS is to visually enhance webpages. | |
2. CSS stands for cascading stlye sheets. The word cascading is used because there are protocols in place is the case that multiple rules are | |
applied to the same element. | |
3. There are two parts to a CSS rule, a selector and a declaration. The selector shows which elements the rule applies to. The declaration | |
indicates how the selected elements will be styled. | |
4. We can link style sheets to the HTML document buy using the <link> element on the HTML code page. | |
5. Using internal css is best used when there is only one page to style. When there are multiple pages it is advantageous to use external | |
style sheets because the modifications will apply to the entire web page, so that the creator does not have to individually style each page. | |
6.Color hex codes are codes which specify the amount of primary colors to make a specific shade. Color hex codes follow a pound sign. | |
7. The three parts of HSL colors are hue, saturation, and lightness. | |
8. The three main typeface fonts are Serif, which add extra details to the letters, Sans-serif, which provide a more straightforward design, | |
and monospace, which is the most uniform. | |
9. The three main units of font-size are pixels, percentages, and EMS. | |
https://codepen.io/Keeliana99/pen/MrrMMM | |
Day 3: | |
1. The type attribute controls the beahvior of an input. | |
2. The <select> element is used to create dropdown lists. | |
3. The type or action attribute should be set to the absolute URL of the page that will collect the data inputted by the user. | |
4. The <Fieldset> element should be used to group similar element types. | |
-------- | |
1. Border seperates the edges of different boxes. Margins are found outside of the border, and create a barrier between the inner edge of | |
the border and the outer edge of any other boxes. Padding is used to control the distance between the inner border of the box and the | |
content of the box(text, pictures, etc). | |
2. The values 1px 2px 5px 10px correspond to the box starting at the top and moving clockwise. So respectively top, right, bottom, left. | |
3. Block-line elements start on a new line, while inline elements can be inserted in the middle of text. | |
4. Fixed positioning centers the element in line with the browser window instead of the website layout. When using non-standard box layout, | |
it is necessary to implement the z-line property in order to ensure that higher priority boxes appear on top of lower priority boxes. | |
5. Fixed layouts use pixels to determine the width and stay the same size no matter the browser size. A liquid layout uses percentages to | |
determine box placement and adjust the size of the boxes depending on the size of the browser window. | |
Day 4: | |
1. The alt attribute is really important because it gives a text description of the picture in the case that the person is unable to see | |
the photo either because of connectivity issues or disability. | |
2. Block elements appear on a new line, while inline elements can appear in the middle of text and do not necessarily begin on a new line. | |
3. A jpg file is best for pictures with a wide variety of colors, while png files are useful for pictures with less color or if large areas | |
of the photo are similar or the same color. | |
1. It is better to use css to add pictures because it is easier to size pictures throughout the document rather than size each picture | |
individually with html. | |
2. Image sprites are multiple pictures set as a collage. Loading one collage will cause the picture to load faster, saving on bandwidth | |
and allowing the website to load much faster. | |
Day 5: | |
1. Numbers are a numeric value, strings are usually used to represent text values, and boolean values are used for true/false, yes/no, or | |
on/off instances. | |
2. There are three operators that JavaScript supports. These include and, or, or not. | |
3. Variable can be anything except reserved words, and can include numbers but cannot include spaces. | |
4. An expression produces a code, and includes any literal statements. A statement is a full sentence in the human language. A computer | |
program is a collection of statements. | |
5. Break, Interface, Null and For are all reserved words. Its important to not use these words because Javascript does not allow it | |
because doing so would complicate the program. | |
6. Control flow causes the complier to read the statements from top to bottom, and is very useful because it helps us to keep code | |
organized. | |
Day 6: | |
1. sayHello is not a function but sayHello() is. | |
2. A return statement is the value that the function will return. | |
3. Unlike regular paramenters, the initial values of function parameters are given by the caller of the function, instead of the code. | |
4. Functions should be named precisely to keep code organized. | |
Day 7: | |
1. Psychology | |
"Is this something they want to do again? Why? How often?" | |
Facebook is a good example of a a website that people like to go to often. People are compelled to come back often because of status | |
updates from friends. A website that is not great is the suzanne collins' book website. The website is not laid well out, and also has | |
little interesting information on it. | |
2. Usability | |
"Are there any user mistakes you could prevent?" | |
A good example of a preventable user mistake would be when you add more than one of the same item on amazon. The website tells you that you | |
have more than one item, and offers you an option to change the quantity. A website that is confusing for users would be microcenter.com. | |
It is very hard to navigate and offers little extras to help customers. | |
3. Design | |
"Do users think it looks good? Do they trust it immediately?" | |
A good example of website design would be the main google site. The website looks good, is very easy to use. A bad example would be the | |
costco site. The site is very unattractive, is improperly sized, and very hard to use. | |
4. Copywriting | |
"Does it sound confident and tell the user what to do?" | |
A good example of a website that is very easy for the user to know what to do is the apple website. The site gives lots of information but | |
also is interesting enough for people to browse through multiple products. A website that is not very directive to the user would be the | |
jcpenney website. The jcpenney website is an example that does not direct people to a specific place and also is rather hard to navigate. | |
5. Analysis | |
"Are you using data to prove that you are right, or to learn the truth?" | |
A good example of a website that tries to force an opinion on people are opinion news sources such as cnn or fox. A website that looks for | |
the unbiased truth would be the American Association for the Advancement of Science (AAAS) website. This website lays out data, and lets | |
people make their own opinions. | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment