HTML defines the structure of web pages.
An element is usually made up of tags. An element tells the browser about the information that lives between the tags.
Attributes provide additional information about the element.
The <head> element contains information about the page rather than information that is shown in the main part of the browser window. This often includes the <title> element, which appears on top of the page above the URL.
The <body> element includes everything shown in the main browser window.
In Chrome, you can find the source under: View>Developer>View Source
6. List five different HTML elements and what they are used for. For example, <p></p> is a paragraph element, and it is used to represent a paragraph of text.
<h1></h1> is the most important heading for a page.
<b></b> tells the browser to make the text inside the element bold.
<i></i> tells the browser to make the text inside the element appear italic.
<br /> is a line break. In other words, the browser will go on to the next line.
<hr /> is a horizontal rule, or a horizontal line.
Empty elements don't have an opening and closing tag. They just have one tag with a space and a forward slash. Examples include: <hr /> and <br />.
Semantic markup does not affect the structure of pages. Rather, it is a way of adding information to pages, so that it is easy to understand how it is structured. It's important to name elements accurately using the correct tags so that you or someone else can find specific elements and easily see how a page is structured.
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> <nav> and <aside>
Link to CodePen: Why am I doing this? https://codepen.io/rmorgan323/pen/YxpWpz
For over 7 years I led a young adults group at a church in Albuquerque. It was a constant and rewarding pursuit to empathize with any new person who visited our group. I could remember the day when I first showed up. I was no different then them--just looking for a place to belong. So we had a rule: Never let someone new walk out the door without inviting them to one of our outside-of-church activities. Those were the times and places where people felt more comfortable telling you their story.
The dividends were massive. We regularly added talented, interesting, intelligent, friendly, and fun new people to our number. Everyone benefitted.
Empathy in software really means listening to your customers. Often, in order to even listen, you have to search your customers out, and get to know them. It means finding out what makes them tick. It means finding out what makes them happy and what drives them crazy. In the end, empathy leads to software built around the needs and desires of the user.
Empathy on a team brings about a cohesiveness that can't be achieved without it.
4. Describe a situation in which your ability to empathize with a colleague or teammate was helpful.
Years ago a coworker was really upset with me. We're talking spitting mad. He was also more than 30 years older than I was. When I asked him why he was so upset, he told me about something I had said to him in front of a customer. I realized then that he had misunderstood what I said and why I said it. However, I could also see that pointing out why he had this situation wrong wasn't going to make him feel any better. He was a valuable component of our team and personally, I liked him.
So instead of listing off the reasons why he was wrong, I just apologized the best way I knew how. It was amazing how quickly the anger evaporated. We were back to normal within minutes.
5. When do you find it most difficult to be empathetic in professional settings? How can you improve your skills when faced with these scenarios?
For me, it's most difficult to be empathetic if I perceive someone as being lazy. I find laziness to be incredibly frustrating. When I observe it in myself, I hate it even more. That said, my perception can be wrong. What appears to be laziness could be illness, depression, inability to sleep, or something I hadn't even considered.
Improving my skills means giving others the benefit of the doubt. I'll assume there's a good reason they haven't gotten something finished rather than assume they are just being lazy.
1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
Ordered lists <ol> are lists that are numbered. They contain list items <li>.
Unordered lists <ul> are not numbered. They are bulleted instead. They also contain list items <li>.
Definition lists <dl> are set up like a dictionary--terms with definitions. Inside of the <dl>, you'll find the definition term <dt> and the definition <dd>.
A link is an anchor <a><a/> tag that contains an attribute called href. The value of the href is the page being linked to. It also contains clickable text or a clickable image. Together, it looks like this: <a href="http://www.example.com/link">Click here</a>
target="_blank"
Note: This is generally considered bad practice unless absolutely necessary. When necessary to open a new window, it's good to inform users that this will happen.
In this case, you are linking to a part of the page that has an ID, so you just link to that specific ID. So, for example, it might look like this: <a href="#section_4">Section 4</a>
CSS allows you to style your page by creating rules that specify how content should appear.
CSS stands for Cascading Style Sheets. They are cascading in that a more specific rule takes precedence over a more general one. Also a more recent rule takes precedence over a less recent rule (when selectors are identical).
The result is the ability to style things generally with general selectors and then gradually get more specific to individual parts of the page when necessary.
A CSS rule contains a selector and a declaration. The selector identifies what element you want to style and the declaration tells the browser how to style it. The declaration also contains two things: property and value. The property identifies what aspects of the element you want to style and the value specifies the settings for the chosen property.
An example of all of this put together looks like this:
h1 {
font-family: Helvetica;
}
In this case, I want to style all <h1> headings so that they appear in the Helvetica font.
A CSS stylesheet is linked to an HTML document in the <head>.
The format looks like this: <link href="css/my_site_stylesheet.css" type="text/css" rel="stylesheet" />
This type of link has three attributes.
- href - specifies the path to the CSS file
- type - tells the browser the type of docutment being linked to. For linking a CSS file, it should be:
text/css - rel - specifies the relationship between the HTML page and the file it is linked to. For linking a CSS file, it should be:
stylesheet
It can be useful at least a few reasons:
- You may want your CSS rules to apply to more than one HTML document.
- Since one external CSS file can style several HTML documents, you will only have to load the CSS file once, even when other HTML documents load. So, loading times are improved.
- It's more organized to link them externally. For example, you may want to separate your CSS between presentation and layout.
A hex color code is a six-digit code that represents how much red, green, and blue, the color contains. It is preceded by a # sign. It looks like this: #ef3d4a
HSL stands for: Hue, saturation, and lightness. Hue is expressed by a value between 0 and 360, represented on a color wheel. Saturation and lightness are expressed as percentages.
HSLA is an option as well, where the A stands for alpha and represents transparency.
An example of an HSLA color declaration looks like this:
color: hsla(127,90%,100%,0.8);
8. In the world of typeface, what are the three main categories of fonts? What are the differences between them?
The three main categories are:
- Serif - They have serifs on the ends of the strokes.
- Sans-serif - They don't have serifs.
- Monospace - Every letter takes up the same amount of space
The three units used to specify font-size are:
- Pixels - This is the most common way to do it. It's precise and predictable.
- Percentages - Default text size in browsers is 16px. So 100% = 16px, 50% = 8px, and so on. (This might be a nice way to do it when adjusting for screen sizes)
- Ems - One em is equivalent to the width of the letter m. Ems allow you to change the size of the text relative to the size of the text in the parent element.
Note when using ems: Users can change the default text size in their own browser. If they do this, then it will appear differently on their browser.
I think this question is asking how that information is delivered to the server. If so, then it's the method attribute. The method attribute has just two possible values: get and post. If method="get", then the input values are added to the end of the URL. get can be used to retrieve information but not to modify a database. If values are part of the URL, they are unsecured. If method="post", then the values are sent via HTTP headers. Values can be secured that way and also it is possible to add to or delete from a database using post.
You create a dropdown list with <select>. The dropdown box will contain <option> elements.
3. If you're using an input element to send form data to a server, what should the type attribute be set to?
To send all of the form's data to the server, you use type="submit".
Similar items can be grouped inside a <fieldset> element. The browser will even draw a box around the group. To label the <fieldset> box, use the <legend> element.
Border, margin, and padding all surround elements. Padding is the space inside the border and outside of the element. Then comes the border, outside of the padding. Margin surrounds the border. So there are many ways to create space around elements.
2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
- 1px = Top
- 2px = Right
- 5px = Bottom
- 10px = Left
A block-level element well take up an entire row within its parent element. An inline element will take no more space left and right than is needed to fit.
4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
When an element is set to fixed positioning, that means it never moves in relation to the browser window. It's common for nav bars, headers, titles, logos, footers, etc. When an element is in a fixed position, it can overlap with scrolling content. So you have to decide what goes in front. That's where z-index becomes important. Using z-index, you can decide which element goes in front of the other.
A fixed layout does not change size as you change screen size. All that could be added is scroll bars so you can see everything.
A liquid layout expands and contracts depending on screen size in order to fill the available space.
An alt attribute will describes the image in case it doesn't display. Also, in the case of a user visiting your web page with a screen-reader, they will know what the image is.
An image element is inline if it is placed within a <p> or other block element. It is block if it is placed on its own within your code.
JPG image formats are best for images with a wide range of colors. Photographs are often best displayed as JPGs. They compress pretty easiy in this case and still look sharp. PNG image formats are better for images that have lots of solid colors. Examples are logos and illustrations. A PNG will be sharper-looking for these kinds of images and will still maintain a small file size.
1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
To start, specifying image heights and widths in CSS keeps presentation and style rules in your CSS, where it belongs. HTML, as we said before, is best used for structure. Also, putting image presentation rules within CSS allows you to reuse those rules for multiple images or adjust easily for screen sizes. CSS is much more flexible and easy to use for presentation rules.
An image sprite is one combined image that includes several images that can be displayed separately, depending on which part of the combined image you choose to display. The advantage of this is that you only have to call one image and it can lower load times as a result.
1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
Numbers are just what you'd expect--they are numerical values that can be added, subtracted. multiplied, etc. Strings are usually text but can be just about anything. You can't do arithmetic with strings. Booleans are very simple: They have can be either true or false. A comparison will often yield a boolean value.
The three logical operators are and, or, and not.
The && operator represents and. It is binary and its result is true only if both values given to it are true.
The || operator represents or. It is also binary and it produces true if either of the values given to it are true.
The ! operator represents not. It is a unary operator that flips the value given to it. !true produces false and !false produces true.
Variables are named with the keyword var. So a statement that declares a variable might look like this: var x = 12;
An expression is a fragment of code that produces a value. Every value that is written literally is an expression. A statement is a completed thought and ends with a semicolon. An expression is like a phrase or sentence fragment, while a statement is like a completed sentence. Lastly, a program is a group of statements.
5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
JavaScript reserved words are words that already have a defined use. As a result, you can't use them as variable names. If you did, your program would do things you don't expect. A few examples are: delete, do, else, false, function, if, true, var, while, etc.
Control flow is the order at which a program is executed. Normally, a program just goes from top to bottom. However, boolean expressions can cause a program to execute in a non-linear way. The point is for the programmer to understand the order that things are being accomplished.
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?
Only with sayHello() does the computer know we are calling a function and giving it the value of "Hello!", which has been passed to it. With just sayHello, the browser doesn't know to pass the word "Hello" into the functino.
return ends a function and when paired with an expression, tells the function what to return. If return is used without an expression, it will cause the function to return undefined.
Parameters are like variables but their initial values are passed into the function by the called of the function, not the code in the function itself. Parameters are local to the function itself.
Function names are named just like variables, beginning with a lowercase and capitalizing any subsequent words. Spaces are not allowed and underscores are not considered conventional.
Good Site: https://www.surveymonkey.com/
Bad Site: https://www.cloudflare.com/dns/
Surveymonkey talks about the user. Cloudflare talks about themselves.
Good Site: https://authrocket.com/plans
Bad Site: https://auth0.com/pricing
Here I compared two pricing pages. One is extremely simple and one is mind-numbingly complicated. They are in the same business.
Good Site: https://mailchimp.com/
Bad Site: https://dyn.com/dns/managed-dns/
Mailchimp looks modern and likeable, even for a small business. Dyn might look reliable to a large company. But to a smaller customer they look bland and look like their service won't be very good. I imagine waiting on hold while trying to get tech support.
Good Site: https://www.crazyegg.com/
Bad Site: https://www.intercom.com/
Crazyegg is easy to understand what they do. Intercom shows a graphic that is meant to illustrate simple but they don't give you any upfront detail as to what they actual do. It takes a lot of reading to figure it out.
I'm not really sure how to point out sites that do or don't do this. That seems like something they would keep to themselves. However, there are loads of ways to do this, including a bunch of SAAS companies that provide some of these services. Examples of good ones include:
There are many more.
To develop your strengths, start by looking at the top 5 talent themes that came up for you in your StrengthsFinder assessment. Which of them best describe your greatest talents — the ways in which you most consistently and productively think, feel, and behave?
My top 5 talent themes:
- Learner
- Relator
- Intellection
- Analytical
- Responsibility
My resume begins with "Life learner...", so I've always felt that way about myself. I believe I'm able to learn how to do things and enjoy doing so. The benefit of this is it has enabled me to be versatile at home and at work, so that I can take on a variety of roles, repair things I haven't seen before, and learn new skills when necessary. The thing I have to be careful of is a tendency stop learning about a subject when I get decent at it--in other words, to never arrive at the master level of something.
Intellection, for me, is the belief that history, both mine and the history of others and the world, has something to teach me. I love to learn from the past, think about things I have done in the past and where that is taking me, and have studied history extensively, particularly American history.
I'm very analytical as well. Sometimes I don't like that about myself but it's unavoidable. I'm a thinker who has been guilty of over-thinking at times. However, the ability to analyze is also very import for making decisions and having good judgment. So, I'd like to be able to use my analytical nature for the benefit of myself and others--in other words, I'd like that to actually be a strength.
1. What words or phrases stick out to you? How would you define each of your top 5 talents in your own words?
My top 5 talent themes:
- Learner - the ability to learn new things quickly, as well as the desire to do so
- Relator - I understood this as someone who is (sometimes) painfully honest, but is easy to talk to as a result--relatable
- Intellection - a thinker--someone who thinks a lot and learns from the past
- Analytical - similar to intellection, someone who thinks and analyzes and uses sound reasoning to make choices
- Responsibility - someone who takes ownership of what they say and do--similar to relator in terms of honesty
My resume begins with "Life learner...", so I've always felt that way about myself. I believe I'm able to learn how to do things and enjoy doing so. The benefit of this is it has enabled me to be versatile at home and at work, so that I can take on a variety of roles, repair things I haven't seen before, and learn new skills when necessary. The thing I have to be careful of is a tendency stop learning about a subject when I get decent at it--in other words, to never arrive at the master level of something.
Intellection, for me, is the belief that history, both mine and the history of others and the world, has something to teach me. I love to learn from the past, think about things I have done in the past and where that is taking me, and have studied history extensively, particularly American history.
I'm very analytical as well. Sometimes I don't like that about myself but it's unavoidable. I'm a thinker who has been guilty of over-thinking at times. However, the ability to analyze is also very import for making decisions and having good judgment. So, I'd like to be able to use my analytical nature for the benefit of myself and others--in other words, I'd like that to actually be a strength.
3. How have you seen yourself using each of these talents? How often do you see yourself using these talents?
I've actually used all of this stuff. I can't disagree with any of it. The only one that I need to consider is how to you analysis as a positive instead of a negative.
When I'm doing something particularly difficult I can struggly to be aware of the talent to learn things. There have been times when I've become discouraged when trying to learn something.
5. What talents could you develop further that would help you in your growth at Turing and in your new career as a software developer?
I'd like to develop the relator strength. In the past, I've done very well working in small groups. This is very much encouraged at Turing and is common in the industry as well. I believe I'd enjoy the process a lot more and be able to help someone else become more productive as well as become more productive myself.
I've been aware of all of these in the past already, but haven't put in the thought about how to develop these or better use them to my advantage. A lot of life is simply about being intentional every day about the things you do and why you do them. This applies to uses my strengths as well.
Developing strengths is beneficial everywhere, whether you're at a party meeting new people, writing software, interviewing, or simply interacting with people you already know.
8. When might you overuse any of these themes? How might you benefit from dialing it down in a certain situation?
Analysis. See above.
I can struggle in bigger groups, but finding a few people that I can relate well to can make a big group seem much easier to navigate.
Study lots, learn from others, help others as they learn.
Don't be afraid of learning difficult things--it's how you avoid plateauing. Sign up for difficult stuff and go for it. Teaching/helping others as a way to connect. Find others to relate to and partner with. Choose those who are best at things I struggle with. That way we can help each other.
I haven't been that careful in who I've chosen as friends/work buddies in the past. I've usually gone with people who were more similar to myself because they seemed easy to relate to. However, I'll do better if I chose those who are different.
Fear? There really aren't too many obstacles. Just have to get on it.
14. Shortterm: What is an action step you'd like to commit to help you develop your themes further today? Next week?
Interact with others as much as possible to learn where they are coming from. Find out what they are best at and how they struggle.
15. Longterm: What do you want to learn this module to turn your talents into greater strengths? How will this help you with your professional or personal goals?
I want to push through any initial struggles with this class to avoid plateauing. And I want to find relatable people who can help me get through this--and who I can help out as well.
If you've reflected on your StrengthsFinder results previously, here are some additional questions you may want to consider during this second module:
- How did you see yourself using your strengths last module?
- When did you overuse any of your strengths? When did you underuse them?
- What did you realize about yourself both in your struggles and in your wins last module?
- How could you capitalize on your strengths more effectively this time through the module?
- How did working with others last module affect how you understand your strengths?
- What goals for your personal development do you want to make for this module? How will you know if you've achieved them?
This reflection is for your own growth, and you do not need to turn this in.
However, if you would like to have a follow-up coaching session with Allison, please DM this gist to her when you set up your 1-on-1 with her. You can schedule that here or by sending her a DM.