The purpose of HTML code on a website is to describe the structure of pages.
The terms element and tag are often used interchangeably. An element tells the browser something about the information that sits between its opening and closing tags. Elements are generally considered to have two tags (opening and closing).
Attributes are used in HTML elements to provide additional information about the contents of the element. For example, the language. They are made up of two parts -- a name and a value -- and are separated by an equals sign.
The head contains information about the page, while the body is what is shown inside the main browser window. The title is placed within the head and is shown at the top of the browser window to describe the page.
To view the source of a website in Chrome you go to View > Developer > View Source. You can also do this by right-clicking and selecting View Page Source.
List five different HTML elements and what they are used for (spaces added in tags to show elements).
< p >< /p > is a paragraph element and used to indicate a paragraph of text.
< h1 >< h1 > is the main heading element and is used to show a section of the page.
<title></title> is a title tag and placed within the head element to display the page title at the top of the browser window.< br /> is used to place a line break within a paragraph element.
< strong >< /strong > is used to show the content has strong importance, and will appear as bold.
Empty elements do not have any words between an opening and closing tag. Usually they are only one tag, and often have a space and forward slash before the closing bracket.
Semantic markup is text elements that are not intended to affect the structure of the page, but add extra information to the page. It can be used by other programs such as screen readers or search engines.
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
Three new semantic elements introduced in HTML 5 are the header, nav and article. They were created to help authors describe the structure of the page.
https://codepen.io/bfarestadrittel/pen/YxGZrY
Empathy should apply to all areas of your life in your interactions with others. In any line of work, you have many different people from different walks of life. There is a mutual give and take in these relationships, and being open to understanding others points of view can lead to greater success when all the pieces come together. It's important not only to develop the technical skills, but also the interpersonal skills.
I was surprised to learn about the ways to develop the skill of empathy. I had always thought it was a basic human function, people just had varying degrees. One of the easiest ways to develop empathy is through listening. Not just hearing what people are saying, but reflecting back your understanding through active listening. You should also give others the space they need to get their point across without interruptions. Another way to develop empathy is through considering the human impact behind everything you do. One example was when you put on a shirt in the morning, consider everyone who was involved to make that possible. Who cut the fabric, who sewed the buttons, who packaged it to ship, etc.
Empathy is essential to productive relationships. If you're only focused on yourself, you lose many powerful connections you can make with others. Similarly, if everyone was so self absorbed into their own lives, it would be very hard to ever accomplish anything. Being unwilling to understand other perspectives and embrace them is very limiting both personally and professionally.
Empathy has been critical to my success in life, and I try to always treat others how I'd hope to be treated. This has been especially helpful in a team setting where you have to rely on others. If I didn't understand their pressures from additional workloads or personal situations outside of our project, it would lead to a huge amount of frustration. Along the same lines, sometimes you have a blind spot where others can help. If I was not receptive to feedback and insight, it would limit what I personally would be able to accomplish, as well as what the team would accomplish.
The scale and scope of software requires large teams, and without empathy a lot of bridges would be burned. In the modern workplace you work with people all around the world from different walks of life, and the combined life experiences and worldviews are critical to accomplishing something great. While you may only know a person behind a photo or computer screen, trying to place yourself in their shoes leads to a more well-rounded experience. Asking questions and hearing other perspectives might help you enhance your user experience or core features in a way you never would've considered otherwise.
Empathy is important for working on a team because giving a receiving feedback is essential to the process. Hearing how people with other perspectives view things can add a lot of value to your projects. Additionally, if you are not self aware and cannot handle feedback, it will lead to personal frustration, as well as frustration of the team. Because each person is going through something different in their life, having all members work to step in each others shoes helps things keep running smooth. For example, I may not have kids, but there's no reason to get frustrated if someone needs to leave a little early to pick their kids up from daycare. Not being open to this would greatly hinder what could be accomplished.
In my most recent job I was the go-to tech guy for a lot of the employees. When tasked with something like building an internal communication blog, they were very intimidated. If I had bragged about how easy it was, or made them feel stupid for not understanding, it would never have been accomplished successfully. Instead, I looked at how I could take the more technical components that come easier to me off their plate, and leave things they're confident in such as organization and research for them to tackle. By having that perspective, it makes the whole process run smoothly. Additionally, it greatly reduces frustration by all parties when each person feels like their set of skills is making an important contribution to a greater success.
When do you find it most difficult to be empathetic in professional settings? How can you improve your skills when faced with these scenarios?
I find it hardest to be empathetic is a professional setting when others are unprepared. I believe I can improve this by looking outside the work, and considering what else may be impacting their life. Sometimes I could ask more questions or become more personally engaged in actively listening to them to get this information. No one enjoys being unprepared, so it's important to have persepctive that something else led to the situation. By hearing what they're going through, it would likely ease my frustrations and make them feel less self-conscious about the situation.
There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
Ordered lists < ol > are usually for a set of steps or process, and each item in the list is numbered. Unordered lists < ul > look similar, but instead of being numbered they begin with bullet points. Definition lists < dl > include a set of terms with the definitions of those terms.
Linking uses the < a > element and href attribute. The basic structure is: < a href="LINK URL" >LINK TEXT< /a >
The attribute to use to open a link in a new tab is target with the value of blank. < a href="LINKURL" target="_blank" >LINK TEXT< /a >
You link to a specific part of the same page using the id attribute. They should start with a letter or underscore, and there should not be two of the same on one page. You would use id like this: < h1 id="top" >TOP OF LIST< /h1 > then to link back like this: < a href="#top" >RETURN TO TOP< /a >
CSS is used to create rules that specify how the content of an element should appear. For example, colors, typeface, etc.
CSS stands for cascading style sheets. Cascading means that the rules move down the page, with certain ones taking precedence. For example, if two selectors are identical, the latter will take precedence. If one is more specific, that one will take precedence over more general. Also, !important is used to indicate that rule should be considered more important than others that apply to the same element.
The basic structure of a CSS rule contains a selector a declaration. The selector tells which element(s) the rule applies to, while the declaration tells how the elements in the selector should be styled. Declarations are in curly brackets, and contain a property and a value. p {font-family: Arial;}
A CSS stylesheet is added to an HTML document using the link element. This is placed in the head section of the page. It contains an href attribute which specifies the path to the CSS file, a type attribute which shows what type of document is being linked to, and a rel attribute which shows the relationship between the HTML and the linked file.
It is best to use external stylesheets when you have a site with more than one page. By doing this you allow all pages to use the same rules instead of having to repeat them on every single page. This makes it easier to change the styles across all pages because you only need to change one file vs every single page.
A hex code is a six-digit code that starts with a hash sign and shows the amount of red, green and blue in the color.
The three parts of an HSL property are hue, saturation and lightness. Hue is expressed as an angle, while saturation and lightness are a percentage of gray in the color and amount of white or black in a color.
In the world of typeface, what are the three main categories of fonts? What are the differences between them?
The three main categories of fonts are serif, sans-serif and monospace. Serif fonts have extra details on the ends of the main strokes of letters. Sans-serif fonts have straight ends to letters for a cleaner design. Monospace fonts use the same width for every letter.
The three main units used to specify font-size are pixels, percentages and ems. The default size of text in a browser is 16px.
When using an input element, the attribute that controls the behavior is the type. For example, passwords, radio buttons, checkboxes, etc.
The element used to create a dropdown list is < select >. Then for each item in the dropdown you would use the < option > element.
If you're using an input element to send form data to a server, what should the type attribute be set to?
To send form data to a server you should set the type attribute to "submit".
The < fieldset > element is used to group similar form items together. It generally shows a line around the group to show how they are related. To name the area, use the < legend > element.
Every box has a border, and the border separates one box from another. The margin is outside the edge of the border and creates gaps between adjacent boxes. The padding is the space between the content of the box and the border of the box.
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
The order goes top, right, bottom, left. 1 = top, 2 = right, 5 = bottom, 10 = left
Block-level elements always start on a new line in the browser. This includes elements like p, h1, ul, li. Inline elements continue on the same line as their neighboring elements including em, strong, a, img.
What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Fixed positioning positions an element in relation to the browser instead of the containing element. They do not affect the position of other surrounding elements and do not move when the user scrolls. The z-index allows you to control which box appears on the top and prevent overlap.
A fixed width layout does not change size when the user changes the size of their browser window. Fixed layouts also use pixels as measurement. Liquid layouts change size as the user changes the size of the window. Liquid measurements are typically done in percentages.
The alt attribute is important in an image because it provides a text description if you can't see it. This is good for visually impared users or if the images are prevented from loading.
An image element is inline or block, depending on where you place it in the code. If the image is placed inside a block level element, the inline elements will flow around it. If it's outside a block element, the block element will be on a new line after the image.
The benefits of jpg are that they can contain a large mix of subtly different colors, and are good for photographs. The benefits of png are that they can be used for flat or large areas of the same color, and png files can also be saved with a transparent background.
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
The benefit of specifying the height and width of images in CSS is that you can specify how much space for the browser to leave if the code loads before the image. Additionally, it helps provide consistency to control the dimensions sitewide instead of each individual image.
An image sprite is when a single image is used for several different parts of an interface. This means the browser only has to request one image and will improve loading times.
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
Numbers are a type of value, and are simple numeric values (13) written like normal. When used they cause a bit pattern for the number to come into existence in the computer's memory. Fractional numbers are written with a dot (9.25), and exponents can be used for large numbers. The main function of numbers is arithmetic.
Strings are used to represent text and the contents are closed in quotes ("this is a string"). Both double and single quotes can be used as long as they are the same at start and end. Strings must stay in a single line. Backslashes are used to denote a special character within a string. The + can also be used to tie strings together.
A Boolean value helps distinguish between two possibilities, and only has two values of true and false. They can use the greater than and less than symbols to compare, as well as equal (==) or not equal(!=).
The three logical operators JavaScript supports are and (&&), or (||) and not (!). For and, the result is only true if both values are true. Or produces true only if one of the values given is true. Not flips the value given to it.
Variable names can be any word that isn't a reserved word. The cannot use spaces, but can have digits in them. However, they cannot start with digits. Variable names also cannot include punctuation except for $ and _.
An expression is a fragment of code that produces a value. Expressions are written litereally. A statement stands on its own, and only amounts to something if it affects the world. For example, displaying something on the screen.
What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
A few examples of reserved words are class, continue, export, return, switch and var. They have special meaning and using them may cause variable definitions not to function as you expect.
The control flow is the order in which your statements are executed. Programs with more than one statement move from top to bottom. It is useful in programming because it can be used to build on itself, for example picking a number and then providing the square root of that number.
If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
The difference is that the one without brackets does not have any parameters. Functions don't always have to have a parameter, but the body needs to be wrapped in brackets.
The keyword return is used for determining the value the function returns. When it comes across a return statement it will jump out of the current function and give the current value. If a return doesn't have an expression after it, the function will return undefined.
Function parameters behave like values, but the values are given by the caller of the function, not the code in the function. Parameters inside the function are local to the function. They are newly created each time the function is called and do not interfere with each other. If parameters are outside the function, they are global. They are also visible throughout the program.
The naming convention used for functions is to keep them simple and obvious so it's easy to figure out what the code does. If it does multiple things in a single function, focus on the single concept it represents. It also follows similar capitalization with the first word lowercase and the others uppercase.
Good example: https://www.couponsherpa.com/ This site knows people are looking for deals, so they get as much of that information up front as possible. They make it known their coupons are ones you can trust, and list the number and type of coupons available.
Bad example: http://web.mit.edu/ For being a very highly regarded school, their website leaves a lot to the imagination. Nothing really stands out, and even if you're looking for common things they have listed, you have to look hard to find them. Users want to know something about MIT, but the site doesn't seem to be steering them in the popular directions.
Good example: https://www.amazon.com/ As far as usability goes, Amazon makes it incredibly easy to spend your money and find a good price. They have tons of trust symbols with ratings, Amazon choice, Prime, etc. And they make placing your order as easy as one click with a common button.
Bad example: https://www.forbes.com It has always bothered me that for every page you visit on Forbes from an outside link, they put up the quote of the day page. While I can see they want to get an advertisement in front of you, lots of websites do this in subtle and likely effective ways. This just feels very clunky.
Good example: https://www.charitywater.org/ Working at a nonprofit I learned how important it is to have your site be trustworthy. This site was always an example people looked to. It looks good, with clear pictures of people they help. The trust level is also high because they have lots of stats and information about the work they're doing, as well as clear statements about their motivation for doing it.
Bad example: http://drudgereport.com/ Political views aside, Drudge Report still has a terrible website design. It looks like something from the 90's, and it's not easy to find what you're looking for. While it has built a reputation, if I wasn't aware of that reputation I wouldn't trust anything from that site based on the way it looks.
Good example: https://www.moosejaw.com/ Moosejaw has always been a brand that's been great at reducing anxiety with their clever, funny copy. It can be stressful to make a purchase of outdoor gear with all the options and prices, but their copywriting makes it seem fun and easy. It creates something that you want to be a part of.
Bad example: http://www.mines.edu/ This site gives me more anxiety with all of the scattered design, weird URLs and way too much copy. There are areas of the site that have too much copy and still have a link to read more. As a user I would find it somewhat overwhelming and would likely move on.
Good example: https://www.youtube.com/ This was cited in the article, but I think they incorporate lots of these elements. If you're logged in, they give you videos you might be intereted in right away. They also send you down the hole of more and more related videos that play automatically. It seems they have examined how users watch videos, and make it as easy as possible for them to find what they want and keep watching.
Bad example: https://www.bradsdeals.com/ This site doesn't really seem to know what users want, so they've just thrown everything out there and hoped for the best. Perhaps their top categories have been determined by analytics, but it seems more likely to me they've just targeted popular keywords they wanted to rank well for. There is also way too much copy with each item that users will never read.