DAY 1

HTML code gives a website it's structure, content, and important information about how it should be displayed and understood.
An element includes the opening and closing tags, as well as all of the information between them.
Attributes are included to give fuller information about the element, such as the language the text is meant to be read in.
The head section includes information about a site that is not meant to be displayed in the browser, including the title (which will appear on the top of the browser or in the tabs). The body section contains all of the info to be displayed by the browser.
In Chrome, right click or two-finger click to open the menu. Select 'View Page Source".
Five HTML elements:
1. <h1></h1> Text marked as the H1 is the most important heading on the page, the highest in the hierarchy.
2. <p></p> Text marked as a paragraph is low in the hierarchy, and is used for large chunks of information, like full sentences.
3. <b></b> The bold element draws attention to a piece of information, by displaying it with a bolder typeface.
4. <strong></strong> A strong element tells the browser that a small piece of information is very important, and will display it in bold to the reader.
5. <hr /> The horizontal rule is an empty element. It tells the browser to display a line to create a visual break, often to indicate a change in topics.
Empty elements, like the line break <br />, do not require any further information between the tags.
Semantic markup gives the browser contextual information. It helps the browser understand what is important and choose how to display content.
HTML5 gives clarity to divs with new header, nav, article, footer, and aside elements.

CodePen HTML exercise
CodePen link https://codepen.io/kawilliams8/pen/QYmawv
GearUp reading and Qs

Empathy is deeply important to all of our relationships and I believe we would be a better society if empathy were a more heralded emotion. I've been following politics very closely for a handful of years. I'm keenly interested in the messaging of our political leaders and their faithful supporters, and the demonstration -- or complete fabrication -- of empathy in their voices. I can't remember what sparked looking at them with an eye for empathy, but have been watching intently for that specific emotion for some time. By exercising our skills of observation and recognition, we become better empathizers ourselves. When we are in tune with our own emotions, we are more compassionate to those of others.
Software is a reflection of its creator. When a developer writes any emotion into their code, they should do so intentionally and with awareness of their blindspots. An empathic developer understands that their life experience is not the same as others', and that their project will be experienced differently by everyone who uses it. The goal should always be inclusivity.
Empathy is important for teamwork as it improves understanding, problem solving, patience and the overall result of a project. It is not appropriate, helpful or sometimes even legal to devalue the experiences and suggestions of others based on their perceived differences. Teams are stronger when they acknowledge differences and appreciate them.
I have worked with many people who are not interested or skilled in emotional awareness. Many wrote off any mention of the idea as silly, weak or useless. Instead of becoming complacent or frustrated immediately, I try to remind myself that their upbringing, education and life experiences might not have valued emotional intelligence, so they are only doing as they were told. It is hard for people to change those beliefs if they do not see any value. That said, I can be a small influence in their awareness. If I freely discuss my emotions and ask people about theirs, I can help normalize the conversation and learn more about how others think and approach their tasks and goals at work.
I find it difficult to be empathetic when it appears others aren't making any effort to be more empathetic. I generally find it hard to watch people lack desire to learn about the world and seek improvement in themselves. I must remember that the entire world does not need to share my values. We all follow long, different paths that lead us to who we are each day, and the goal is not to hold everyone else to the standards I learned on my path. Variety is good!

DAY 2

Daily warm up
Chapters 3 and 4, HTML and CSS book
4 Qs

Ordered lists have list items displayed with increasing numerical characters. Unordered lists' items all use the same character, like a dot or bullet point. Definition lists display a list of words and their definition, like a dictionary or index of terms might require.
An element that links to another site will have anchor tags <a></a> that wrap around an href attribute and some text. The href attribute's value is the site you're linking to. The text is the link that will be displayed on your site.
Include target="_blank" inside the element to open in a new tab.
To link to a specific part of the same page, add id attributes to various elements on the chosen parts of your page, including the top. You can then add <a></a> elements to navigate to each id. The id's need to start with the # character.

Add to CodePen
Chapters 10, 11, 12, HTML and CSS book
9 Qs

CSS is used to add style or presentation to an HTML website. It targets elements, classes, and ids, or elements with specific relationships to other elements in the DOM, and gives rules of how those items should be displayed.
CSS stands for 'Cascading Style Sheets'. Here, the Cascade refers to the way conflicting rules are interpreted. When multiple rules apply to an element, the browser must interpret which one will win out.
A CSS rule must state which elements it is targeting (the selector), then how it wants to effect that item (with a property name and value).
CSS files are linked in the <head> element of the HTML file. It needs three attributes: the href (file path), type (type of document, or text/css, and rel (relationship to the HTMl file).
It's useful to use external CSS files when you have even a moderately complex site, usually with more than one template or page. This allows each page's CSS to be edited simultaneously. The site files are also smaller.
A hexidecimal code is one method of specifying a color choice. It is a six character code for a combination of red, blue, green (or three characters, if all the same).
HSL colors are described by hue, saturation, and lightness. The hue will be between 0 and 360, like degrees on a color wheel. The saturation indictates percentage of gray, 1-100. The lightness value is also 0-100%, from black to white.
The three main font categories are serif, sans serif, and monospace. Typefaces with serifs include decorative strokes on the ends of the main strokes that make up the character. Sans serif typefaces do not include serifs. Monospaced typefaces require that each character take up the same width.
The font-size property are usually described in pixels, percentages and ems.

Add to CodePen

DAY 3

Daily warm up
Chapter 7, HTML and CSS book
4 Qs

When using an input element in a form, the type attribute tells the browser what kind of behavior to set up.
The <select> element creates a drop down list/select box. A name attribute is given to the general list category, then individual <option> elements (with value attributes) are used for the selections.
When sending form data to a server, use method="post" instead of method="get".
A <fieldset> element can be used to group form inputs together, with a <legend> element if desired.

Add to CodePen
Chapters 13 and 15, HTML and CSS book
5 Qs

Each box has three adjustable rings around its edge: the margin on the outside of the border, the border itself, and the padding on the inside of the border. All surround any content in the box.
1 = top, 2 = right, 5 = bottom, 10 = left
Block level elements start on a new line and display with whitespace above and below. They will not have any elements to their right or left. Inline elements flow in between text from left to right, like words in a sentence.
Fixed positioning places an item it a specific relationship to the browser window, not its containing element. Scrolling does not move the fixed item. The item's z-index allows you to control which layer appears on "top" to the reader.
A fixed layout has a pre-determined page/px width. The design does not change with the size of the viewport. Liquid layouts adjust to the viewport's height and width, because the boxes are set in percentages of the viewport.

Add to CodePen
Professional Development tasks, new Gist: https://gist.github.com/kawilliams8/53695ffdc88b7f91e5b8bfebe50f6050

Day 4

Daily warm up
Chapter 5, HTML and CSS book
3 Qs

The alt attribute gives descriptive information about an image to screen readers and search engines.
An <img> element's position within the code, such as within a <p>, determines if it is displayed inline or block.
JPG files are best for photos that include numerous colors. PNG files can include transparency.

Chapter 16, HTML and CSS book
2 Qs

If image sizes are set in the CSS, as opposed to the HTML, less code is needed to keep numerous images consistent across a site. You can use CSS to create templates to manage standard sizes across many pages, like in an online store or gallery.
An sprite contains different versions of an image, such as a button, so it can change appearance without needing extra files downloaded. This saves server requests, bandwidth and time.

Add to CodePen
Intro and Chapter 1, JavaScript book
Chrome Developer Tools video

Day 5

Daily warm up
Chapter 2, JavaScript book
6 Qs

Variables are declared with specific keywords, usually var, let or const. The equals sign is an 'assignment operator', which means that you're giving the variable on the left the value of whatever is on the right. It doesn't necessarily mean any math occurred, just that the two things are now declared equal to each other.
Numberic data are integers or floats. Commas are not used, but decimal points are okay. Strings are combinations of all sorts of text characters, often to make words or sentences. They can include digits, punctuation, and mark up, too. Boolean data are either true/false, like an On/Off lightswitch. They are useful when writing a decision into the code.
Six rules for naming variables:
- The variable must start with a letter, $, or underscore, but never a number.
- The name can contain letters, $'s, underscores, and numbers, but never a dash or period.
- Variables can't be named any JavaScript keywords or reserved keywords. Reserved words include abstract, const, enum, function, interface and protected.
- Names are case sensitive. Pick a naming convention and stick with it.
- Name the variable something that represents its purpose, like firstName or lastName.
- Name variables with camelCase or an underscore between words.
An array can be used to hold a mixed variety of data types together. This combination uses less characters that writing everything individually, and makes it understand which details relate to each other at a glance. A value can be accessed/reassigned via the index number and an assignment operator. You do not need to redeclare the variable.
An expression involves evaluation of a variable into a single value. It might be that a variable is just assigned a nvalue, or might involve arithmetic (and the result is the value of the variable). A statement is one line, or one step of the instruction, within a script.
Arithmetic operators are used to perform calculations with numbers. The string operator, +, is used to concatenate strings together. Comparison operators are used to compare data, and result in a Boolean true/false.

Watch Chrome Console video
Console practice and examples

Day 6

Daily warm up
Chapter 3, pp 83-99, JavaScript book
4 Qs

SayHello will be treated as a new variable (without var), but fail because it isn't immediately assigned a value. SayHello() will just call the existing function.
A parameter is the variable used when the function is declared/described. An argument is the actual value of that variable. Parameters are broader than arguments.
The return keyword stops the function from executing (and describes the format of the value to be given back.)
Local variables are declared within a function and are only available to that function. They eliminate the risk of using the same variable name twice, if, for example, several people are writing chunks of code for the same file. The stored local variable is also removed once the function is done so the function can run again with the same variable name. Global variables, on the other hand, are available to all functions and are stored as long as the page is not refreshed. They require more attention to naming conventions but keep the values after the function is complete.

2 console exercises
Command line crash course and exercises
Read Git handbook
GitHub for Beginners blog

Day 7

Psychology: Are you assuming they know something that they haven’t learned yet?

GoogleNews / GitHub I chose these sites for the way they each treat their vocabulary. Google News is set up with the obvious and familiar vocab of a newspaper's sections. GitHub (and Git, too) has a steeper learning curve that prevents people from understanding the tool at first glance.

Usability: Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?

Reddit / Google I have always been bothered by the repetitive elements in Reddit's interface, yet inability to quickly find a subreddit that I know exists. (This is particularly bad on the app, when not logged into an account.) On the other hand, the Google homepage is so darn simple you can't mistake its purpose. "Search Google or type a URL" lives in the search bar. Basic instructions and extremely powerful.

Design: Do users think it looks good? Do they trust it immediately?

Wells Fargo / Upper Michigan Credit Union The Wells Fargo site has very concise and clear verbiage. The layout is very simple and intuitive, and the colors/graphics are obviously pulled from the well-known logo. There are subtle animations without feeling busy. Everything just feels intentional and well done. The Upper Michigan Credit Union isn't terrible, but has a few flaws in comparison. They have a calendar function that isn't working, the graphics aren't sized properly for the browser (text gets lost on the edge) and there's a spelling error in some copy.

Copywriting: Does it reduce anxiety?

TV Time Direct / Apple Store I was trying to think of a site that would create anxiety on purpose, and 'As Seen on TV' products came to mind right away. This site has immediate email list registration, other pop up links, and the products are all described as the newest, greatest technology. Apple, on the other hand, is also trying to sell their newest products. The design is much more simple and the sales are less frantic. Apple has been leading UX/UI practices for years.

Analysis: Are you using data to prove that you are right, or to learn the truth?

MailChimp / Twitter I've used MailChimp for email campaigns in the past. They have a lot of analytical options on the back end to understand how effective a campaign was and understand which readers engaged, and their main page's articles and posts give a lot of instruction to new users to get started quickly. Twitter (and Facebook, etc) is excellent at tapping into people's existing beliefs and serving up more of the same, under the guise of 'networking.'

Submit the three gist files/Mod 0 Capstone (by 5pm)

kawilliams8/KatieWilliams_prework.md

Select an option

No results found