Turing Prework

AHolt_Prework.md

Turing Pre-Work

Day 1:

HTML

1. HTML code holds all the content of a website. It provides structure. It's like the skeleton of the website!
2. An HTML tag is just an opening or closing entity such as </p>. An HTML element includes the opening and closing tags as well as any content <p>such as this</p>.
3. Attributes provide additional information about an element and are necessary to link pages to an HTML document.
4. The head element holds information about the HTML document that the browser needs - language, meta data for search engines, etc. This also holds links to CSS sheets. The title, within the head element is what appears on the tab of the browser when a user on on that site. It is not seen anywhere else on the website. The body element holds all content that appears on the website.
5. To view the source of a website, right click and select 'Inspect' to pull up the Chrome Developer Tools, or press command-option-I.
6. <h1></h1> is used to create the biggest header that is available. <h6></h6> is used to create the smallest header that is available. <div></div> is used to create a container that will hold headers, paragraphs, and more. <ul></ul> creates an unordered, or bulleted list, then an <li></li> is a list element within that unordered list.
7. Empty elements hold no content, for example <br> simply creates a page break (a word processor's equivalent of pressing enter).
8. Semantic markup provides extra information without changing the structure of a website. This includes quotes, citations, and definitions. The <strong> and <em> indicates importance/emphasis for the reader.
9. HTML introduced some new elements that allow the page to be divided up and organized. The <header></header> element holds information for the main header at the top of every page on the site, and can also be used for individual articles or sections. The <nav></nav> element holds the primary navigational blocks for a website. The <article></article> element is a place for article, blog entries, or any other independent piece of content. Figures, headers, and paragraphs are all nested inside of an article element.

Basic HTML on CodePen

Empathy

Empathy has played a big role in my career as an educator. Teaching is such an emotional profession - middle schoolers are confused about who they are and dealing with pressure from every directions, teachers are pouring their hearts into their work, and we're all working towards the same goal but sometimes have different ideas of how to get there. I've had to really work to put myself in the shoes of my kids and try to understand why they might be acting out and how to support them so they are in a place to learn. I have a student teacher that I give feedback to and evaluate, and it's really important that I don't make her feel judged or attacked, rather supported and empowered to grow. Empathy is key to understanding where someone is and what they need/don't need.

Empathy helps us understand others - their needs, wants, challenges, and persectives. To build the best software FOR people, it's important designers know what people need. It is essential to working on any team because every team brings some sort of diversity of thought, background, and experience. People are going to have different opinions and need to engage in conversations to problem solve, and empathy allows people to engage effectively to work together for the best solution.

We recently had a new teacher join the team late in the year who was clearly struggling. He appeared to be 'ok' but based on his classroom, I figured he was dying for help. I reached out to him and we had a long conversation - I learned that he wasn't getting regular coaching/feedback and didn't know how to improve. All the deadlines he had been missing were due to him not being on our email listserv yet so he didn't even know about them. I immediately did all I could to catch him up, I advocated that the admin provide coaching, and shared this with our grade-level leader who provided more context for items that were new to him as they came up in meetings and emails. It would have been easy to just get frustrated with him and do my own thing, but having empathy for how he was feeling allowed me to learn so much, which eventually impacted our students positively.

I find it most difficult to be empathetic when deadlines are missed or quality of work is low from a teammate when they have had plenty time and reminders to complete it, and/or when they have produced very high quality work like this before and I know they are capable of better. Everyone is human and you never know what someone else is going through. What I'd like to work on is making sure I don't assume, just ask if they are ok or need help. If something isn't going well or is out of the ordinary, I need to first come at it through a supportive lens.

Day 2

Lists & Links

1. Ordered lists are numbered, unordered lists are organized with bullet points, and definition lists usually have terms and definitions (you may see this on a restaurant menu). Both ordered and unordered lists contain <li> elements within them, which contain one list item. Definition lists contain <dt> (definition term) and <dd> (definition) elements.
2. Links are created using the <a> element, which comes from 'anchor'.The basic structure to link to another website is: <a href="www.google.com">Click here to go to Google<a>.The user clicks on the text and they are taken to the link.
3. Including target = "_blank" in the opening a tag will open a new tab when the link is clicked.
4. To link to a specific part of the same page, that 'part' that you would like your user to be taken to first needs and id. For example, <h2 id="signup">Sign Up Here</h2>. Then, the a element should note the id rather than a url. Using the same example, <p><a href="#signup">Sign Up</a></p>

Chapters 10-12

1. The purpose of CSS is to style elements in an HTML document.
2. CSS stands for Cascading Style Sheets. Cascading refers to how CSS rules are precedented. Generally, the last rule in the code will take precendence. In that case that one selector has conflicting rules, the rule that is written more specifically will take precedence. Adding !important after any property value indicates that should take the highest priority.
3. The basic structure of a CSS rule is as follows: p {font-size: 12px;}. In this example, p is called the selector and was taken directly from the <p> element in the HTML document. Any rules written inside the curly braces will be applied to all <p> elements unless other rules take precedence. The font-size: 12px; is called the delaration. The font-size: is the property and indicates which aspect of the element to change. The 12px; is the value which specifies the settings for it's property. It must be followed by a semi-colon.
4. To link a CSS stylesheet to an HTML document, a link element should be written inside of the head element. <link rel="stylesheet" type="text/css" href="style.css">.
5. It is preferred to use external stylesheets because it keeps code organized and easier to read and maintain.
6. A color hex code is a six-digit code that represents the amount of red, green, and blue in a color. In notation, the code is preceded with a # sign.
7. The three parts of an HSL color property are hue, saturation, and lightness.
8. The three main categories of fonts are serif, sans-serif, and monospace. Serif fonts have been considered easiery to read for long passages, with the details on the end of main strokes of letters. Sans-serif have straight ends to letter and have a lower resolution than print. Monospace fonts are usually used for code because they align nicely as every character is the same width.
9. The three main units used to specify font size are pixels (px), ems, and percentages.

Day 3

Forms

1. When using an input element in a form, the type attirbute controls the behavior (produce checkboxes, ask for a file and provide a place for the user to browse, password, etc.)
2. To create a dropdown list, the <select> element is used, which should contain two or more <option> elements.
3. The name attirbute needs to be used with an input element so that the server knows which form control each piece of data belongs to.
4. The <fieldset> element is used to group similar form items together.

Chapters 13 & 15

1. The border of an element marks the edges of it- really just like it sounds. The padding is the space between the content and the border. The margin is the space outside of the border.
2. 1px (top), 2px (right), 5px (bottom), 10px (left).
3. Block-level elements, like a <h1> may have little content, like a short title. But, they take up the entire width of the screen. They will always start on a new line. Inline elements only take up the width that they fill, and will not start on a new line.
4. The role of fixed positioning is to have a piece on content showing on your website at all times, regardless if the used scrolls. The z-index is important when using fixed positioning because it is imporant that the various elements on a page are layered or stacked correctly so everything can be seen when it should be and 'disappears' when it should.
5. Fixed layouts do not change size depending on the size of the browswer window, while fluid layouts stretch and contract. This is why fixed layouts can used pixels, but fluid layouts should use percentages.

Day 4

Chapter 5 - Images HTML

1. The alt attribute is important in an image element because it provides a description of the image if the image for screen readers for those who are visually impaired.
2. An image element will be block if it is placed before a paragraph. The image will appear, then on a new line the paragraph will appear. If an image element is placed inside the start of a paragraph of in the middle of a paragraph, it will be inline.
3. .jpeg and .jng file formats are preferred as they appear sharper and load on the page quicker than other formats.

Chapter 16 - Images CSS

1. Specifying height and width of images in CSS is preferred over doing so in HTML because if there are multiple images of the same size, they can all be controlled one line of CSS code rather than repeatedly writing it into the HTML document.
2. An image sprite is when a single image is used for several different parts of a website. it's useful because the browser only needs to request one image, making loading time faster.

Day 5

Eloquent Chapter 1 & 2

1. A number is value type with a numeric value. A string contains letters and other characters, and quotation marks (single or double) must surround the text for it to be identified as a string. A boolean only has two values - true or false.
2. The first logical operator is 'and' - indicated by condition && condition. Both conditions must be true for the statement to be considered true. The next is 'or' - indicated by condition || condition. Only one of the two conditions must be true for the statement to be considered true. The last is the conditional, or ternary operator. It takes three arguments - the first is a comparison , second is the result of a true comparison and third is a result of a false comparison.
3. To name a variable the keyword 'var' is used, then the variable is declared. For example: var name;. The variable can also be assigned a value while it is being defined using an = operator and an expression, which looks like: var name = "Amy";.
4. An expression is a fragment of code that produces a value, and could correspond to a sentence fragment in English. Expressions are evaluated to produce a value. A statement can correspond to a complete sentence in English and are separated by semicolons. Statements are executed to make something happen.
5. There is a long list of reserved keywords, but the common ones I have encountered so far are: var, true, for, while, if, else, class, return, new. It is important to avoid using these as variable names because they are reserved for keywords and this could confuse the computer and not ultimately get you what you want.
6. Control flow is the order in which statements are executed. It is useful for programming because it allows code to be written for certain situations, and only be executed upon the situation it's intended for.

Day 6

1. Entering sayHello in the console will result in a not defined error, while entering sayHello(); in the console will call the function and print: Hello!.
2. The keyword return is used to determine the value the function returns.
3. Function parameters are are lke variables within a function. Their values are assigned by the caller of the function, not the code. A function can have many parameters or none at all.
4. Function names should be written in camelCase.

Day 7

UI/UX

1 - Psychology What do they expect when they click this? https://www.netflix.com Netflix uses icons once a show is hovered over so the user can choose to immediately click to watch or click on a down arrow to get more information about a show. Non-example: http://connectforhealthco.com/ When I click 'Sign In/Shop', I expect to be taken to a sign in page. Instead I'm taken to another home page where I again have to click 'Sign In'.

2 - Usability Could you get the job done with less input from the user? https://www.virginamerica.com/ makes it about as easy as possible for the user to input information. Non-example: http://www.proactiv.com/ requires you to click every button on the main page to ultimately get all the info. It seems like an intentional over-information situation so the user just gives up and buys something.

3 - Design Do clickable things look different than non-clickable things? https://www.teachforamerica.org/ Clickable things are very clearly clickable things! Call to action button stands out more than most buttons. Non-example: I'm still looking...

4 - Copywriting Does it reduce anxiety? https://fondfolio.com/ is simple and clean, presenting everything clearly and only what is necessary. Non-example: http://mathbits.com/ is messy and full of text and boxes and overwhelming.