The purpose of HTML code is to provide the structure for a website. It dictates what information is displayed and how that information is organized.
Elements are different parts of an HTML document, such as headers and paragraphs, that are made up of an opening tag, a closing tag, and some content. Tags are enclosed in angled brackets (with a forward slash for the closing tag) and describe the style and structure of the inside content.
Attributes are used in the opening tag to provide additional information about an element beyond just the element type. This might include a class name, ID, or source, to name a few. Attributes include a name followed by an equals sign and a value.
The head of an HTML document is where information about the document that will not be displayed on the page is written. This will often include links to other files (ex. CSS files) and will usually include a title element, which is shown at the top of the browser or on the tab for that page. The body element contains all of the HTML that will be displayed on the page itself.
In Chrome, to view the source of a given page, you go View, and then under the Developer dropdown menu select Veiw Source.
<h1> This element is a header and is used to denote a larger title, or header, on the page. These tags go from h1 to h6, with h6 being the smallest.
<p> - This is a paragraph element, which is used to denote a paragraph of text.
<div> - This is a content division element, which is often used to isolate part of a page. This can be used for styling / formatting a certain part of the page and will often contain other HTML elements.
<strong> - This is a strong element, which is used to designate sections of text that will appear more important. This is one way to make text appear in bold.
<sup> This is a superscript element, which contains text that should be superscript.
Empty elements are elements that require no internal content, only an element tag. Examples of empty elements include a break element, which moves the text after the break to a new line, and horizontal rule elements, which creates a line across the page.
Semantic markup includes text elements that don't directly affect the structure of your page, but that describe the content, which may be displayed in different ways by different browsers. This can be helpful for screen reader softwares as well, as it may allow them to more accurately convey the information on the page.
<header> This element is a type of <div> element. But rather than just create a container for the inside content, it specifically denotes that the content is a header.
<em> This is an emphasis element. This can be used to designate text in italics, but it generally designates text that should have emphasis on it.
<article> This is an article element, and is also a type of <div> element. This element indicates an article, for example on a blog or new site. This may be used by search engines to place more importance on a certain section of content from a page.
I think that emapthy is something that I have not always been the best at. I do feel though that working with groups in various settings (music and routesetting especially) has helped me to develop this skill a lot in the past few years though. I think that it is a really important skill to have on teams like a setting crew or a band since they are both partly creative ventures and require a lot of personal creative input. This can make it easy to get attached to and emotionally invested in the product sometimes. And to some degree this is good, but to be able to work well and with empathy on a team, you need to be able to understand this and the place that other people might be approaching the product (a route or song) from. Given how it has helped me with this the past few years, I hope that as I continue with music and as I bring software development into my life more I will be able to further develop this skill.
As a software developer, having empathy can help you to create software with the user in mind that will better suit their needs and give them what they want out of a product. Rather than assuming the features, design, etc. that a user will want, having an idea of how they actaully use the software in context and what they want out of it will give you as a developer a better idea of what needs to go into a successful product. Knowing the real world context in which people are using the product and the ways in which it might help them can also give the people developing the product more human attachment and incentive to make a better product for the people using it.
As I mentioned above, I have found that having a better sense of empathy can be particularly helpful and important in a team or group setting. Teams are made up of different people who will have different ideas, experiences, and opinions. And being able to identify and understand this is key to making the dynamics of a team work, so that everyone feels like they play an equal part in the team and that they can trust and rely on the other members of that team. This doesn't necessarily mean that everyone will be as good at everything as everyone else. But team members understanding this and helping each other work through situations where they might need help will lead to better work overall and a better sense of team cohesion.
One of the aspects of my life in which I would say empathy is most important is music. I play in a band and writing and playing music with the other members requires a great deal of collaboration. We certainly don't always hear things or think about parts of songs the same way, and so to get to a place with a song or a section that we are all satisfied with, it means that we have to be able to take a step back, look at the song as a whole, where the other members are coming from with their ideas, and try to work out what sounds and feels best for the song. And usually this leads to even better and more meaningful music, as we all feel that we have more of ourselves and more of a stake in the music and the process it took to get there.
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 think that when I have the most difficulty being empathetic in professional settings is when I (usually unintentionally) project my own experiences and competencies onto others that I am working with, especially in cases where this means I am waiting for someone else to do something. I think that in some ways it is a natural thing to do since often your experience with a task may be your own. And if you are particularly competent with that task it may not always register that someone else might have different experiences and competency with that task. That said, being able to understand that other team members have different experiences and skills is important to working well on a team, and in this sort of situation it is important not to lose patience with a team member just because they may not have as much experience with a task as you do. And sometimes, if they are looking for it, this could even be an opportunity to help them so that they feel more comfortable with that task going forward. And I think that keeping this in mind going forward is something that I can certainly do better with in the future.
An ordered list is a list of items that are each preceded by a number (1, 2, 3, etc...). An unordered list is a list of items that are each preceded by a bullet point. And a definition list is is a list of terms and their definitions. Ordered and unordered lists both use list elements tags for each item, while a definition list uses a definition term tag and a definition description tag.
To link to another website, an anchor tag <a> is used. In the opening tag, a link is given as a value for the href attribute. This is the page you want to link to. Text within the anchor element is displayed as a hyperlink that can be clicked on to go to the site.
To open a link in a new tab or window (depending on the browser and settings) you can use the "target" attribute with the value "_blank".
You can link to a specific section by using id tags for different sections or headers on the page, then linking to those id tags with anchor tags. For example if the id is "top": <a href = "#top">Top<a>
The purpose of CSS is to outline rules for how different elements of an HTML document should appear. This is what gives a page style, such as color, fonts, borders, etc.
CSS stands for Cascading Style Sheets. "Cascading" refers to the fact that more than one style may exist for a particular element at different levels of specificity, and that there is a heirarchy to determine which rule should apply.
CSS rules are made up of selectors and declarations. The selector refers to a part of the HTML document, while the declaration indicates how that part of the HTML document should be styled. Within a declaration there are properties and values, which indicate exactly what it is about an element that is to be styled and how it is to be styled.
h1 {
font-family: Arial;
font-size: 2.0 em;
color: blue;
}
A CSS stylesheet is linked to an HTML document using a <link> tag in the head of the document. This tag will include an href attribute which will have the file destination and name of the file being linked. It will also include attributes which describe the type of file and its relationship to the HTML document.
<link href = "example.css" type = "text/css" rel = "stylesheet" />
External stylesheets can be useful as they allow you to apply the same styles to many different HTML documents on the same stylesheet. This means that, on a website, if you were to want to change some of the styling you would only need to go to one place to make changes, rather than multiple documents. Sometimes it can be useful to use internal CSS though, for example when there is only one page or when there are a few additional styles beyond the main stylesheet that only apply to a few elements in a given HTML document.
A hex color code is a system of color naming that uses a hexidecimal scale to describe the amount of red, blue, and green in a color. On this scale, black is written as #000000 (which can be abbreviated to #000), and white is written as #ffffff (which can be abbreviated to #fff). The first two digits refer to amount of red, the second two to green, and the last two to blue.
An HSL color property is made up of hue, saturation, and lightness. Hue is described as a value from 0 to 360, as if the color were a position on a color circle. Saturation is given as a percentage, with 100% being the given color and 0% being gray. And lightness is also given as a percentage, but with the given color being 50%. This means that 0% is black and 100% is white.
The three main categories of fonts are serif, sans-serif, and monospace. Serif fonts have extra details on the ends of letters, while sans-serif fonts do not. Sans-serif fonts are generally clearer to read, but serif fonts are considered easier to read in long paragraphs or passages. Monospace fonts use letters that all take up the same amount of space.
The different units used to specify font size are pixels, percentage, and ems. Pixels (px) are used when you want precise control over exactly how big the font is on a page. Percentage are used to control the relative size of sections of a page. Default text size is 16px, so if you set a paragraph to be 50% of this it will be 8px. But if you change the default text size, then the relative sizing of that paragaph will change with it. Ems are similar to percentage in that they are a scalable measure of font size, where 1 em is equivalent to the current default font size for the page. So if the default is 16px, 2.0 em will be 32px.
When using input elements on a form, the type attribute is what determines what sort of input will be displayed and what sort of information it will collect. Some examples include: text, password, radio, and submit.
The <select> element is used to creat a dropdown list. Within this element, <option> elements are used to display the different choices on a dropdown list. They are nested in a similar way to lists and list items.
If you're using an input element to send form data to a server, what should the type attribute be set to?
To send data from a form to a server, the type should be set to "submit". This will give the user a button to push to send the form data.
Related form elements can be grouped together inside of the <fieldset> element, the appearance of which can be changed with CSS.
The border is the box around a given element / piece of content. It can be displayed or not but it always has a size associated with either the element or the CSS rule that dictates its size. Padding is the space between the content, for example the words in a paragraph, and the border. And margin is the space between the border of an element and the surrounding elements or sides of the page. All of these can be adjusted to fine tune the spacing of elements on the page.
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
When there are four values given for padding or margin they are always given clockwise from the top: top, right, bottom, left.
Inline elements will line up left to right on the page, whereas block-level elements will "stack" on top of each other down the page.
What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Fixed positioning is a type of absolute positioning that allows you to take an element out of the flow of the page and position it relative to the browser window, rather than the containing element. When using this, z-index can be important as it allows you to change the position (back to front) of different elements so that you are able to control how they overlap.
Fixed layouts will not change size as the user changes the size of the browser window, the elements are typically fixed sizes (in px). Liquid layouts typically use percentages so that the layout will shift as the user changes the size of the window. These layouts can still have certains constraints though so that, for example, a block of text can only become so small so that you don't end up with lines of text that are too short.
The alt attribute gives a description of the image that will not appear on the page itself. This can be helpful for the developer, or anyone else reading the code, as it tells you what this picture is beyong just the file name. The title attribute can also be used for this purpose, but will usually display on the page when the picture is hovered above.
If an image is followed by or preceded by a block-level element, such as a <p> or <h2>, then it will sit on a separate line above that element (block). The image element is itself an inline element, so if it sits within one of the above listed elements, it will appear inline.
JPEG (jpg) files are generally suited better to images with many different colors and a lot of detail. These are often photographs, since even photographs with large areas of grey sky, white snow, etc. contain many different colors that make up those shades. png files are better for images with large areas of the same colors, such as logos or graphics.
What is the benefit of specifying the height and width of images in CSS compated to specifying in HTML?
Specifying image sizes in CSS allows you to create size classes for many different images on a site in the HTML and give them all the same size in CSS. This will allow the page to load faster since the browser already knows how much space to leave for an image before it is downloaded.
An image sprite is an image that is used for multiple parts of an interface, such as a logo. These can be helpful becuase the browser only needs to load them once, meaning the page can load more quickly.
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
Numbers are numerical values, this includes whole numbers, decimals, negative numbers, and some special numbers like NaN ("Not a number"). Strings are sections of text enclosed in quotations. These can be concatenated by using the + sign: "Hello " + "world". Boolean values are either true or false. Logical expressions such as the following will return Boolean values.
console.log( 3 < 2 )
// -> false
The three logical operators in JavaScrips are and or and not. and is given as && and will only evaluate to true if both expressions are true. or is given as || and will evaluate to true is at least one of the expressions is true. And not, which is shown with !, flips the returned value of the expression:
console.log( !(3 < 2) )
// -> true
Variables are named using the following format (both let and var can be used to define a variable:
let number = 14
var name = "Tony"
number = number + 13
console.log( number );
// -> 27
An expression is anything from a value to a combination of values, for example: 34 < 72. But, it will not do anything of consequence within a program until it is included in a statement, which is a full direction or line of code within a program. It is like a sentence within a paragraph. Statements are followed by a semicolon ;.
What are a few JavaScript reserved words, and why are they important to avoid using for variable names?
There are quite a few words that are reserved for use in JavaScript and cannot be used as variable names. Some of these include: if false class and function. Since these names are reserved, trying to use them as variable names will return errors in your program.
Control flow describes how the execution of statements flows within a program with many statements. This can be useful because, for one, it is important as a programmer to understand how your program is working. But also, control flow can run in many different ways beyond just a straight line as you start to include conditional statements and loops, and knowing how to manipulate the flow of a program is important and very useful in creating more complex programs.
If we have a function defined as shown below, what is the difference between entering sayHello and sayHello() in the console?
function sayHello() {
console.log( "Hello!" );
}
sayHello will return undefined. But when the parentheses are included at the end of the function name: sayHello(), the function will run.
The return keyword is used to define what the function will return as an answer or output.
Function parameters are the statements to be executed within a function. A given function does not necessarily need any parameters, or it can have one or two, or many. An example of a function parameter might be return x*x if you are creating a function that returns the square of a given number.
Functions are named starting with either const or function followed by a space and the same you want to give your function. The syntax following that depends on which method you are using:
const add = function (a , b) {
return a + b;
}
function add(a , b) {
return a + b;
}
These two functions will do the same thing, they will return the sum of input a and input b.
YouTube is obviously a very well known example. But, it allows the user to do very little to get to where they want to be. The first example of this is that when the page loads, the user doesn't even need to click into the Search bar, they can just start typing in what they are looking for. Beyond that, the page shows lots of different videos on the home page based on what is popular and what the user has watched and liked previously.
This site has a very visually appealing design. It has lots of beautiful pictures of travel destinations and smooth, pleasing transitions between the pages. But for the purpose of wanting to look at beautiful pictures of travel destinations there is a little too much going on for the user. I think the animations/transitions could be dialed down a bit and quicker, and to see more information or pictures there is an option to click/spacebar and hold while a loading animation takes you to the page. This loading animation isn't necessarily bad, but the fact that you have to hold the mouse rather than just clicking and having the animation run isn't very intuitive. A lot of these aspects just seem like a bit much for the user to have to do or sit through just to get what they want on the site, which is essentially to look at pictures.
Cultivated Wit has a clever bit to the landing page, but it is not essential to the user experience. And in terms of the user actually interacting with the site to get information and move through the flow of the site, it is very well designed.
Bolden has a clever idea on the landing page. But it is a bit overwhelming to look at and not necessarily clear enough about what the user is supposed to do with the page.
Rover is good at immediately creating an atmosphere that encourages comfort and trust. It looks clean and professional, but also blends in comforting images and pleasing fonts and graphics.
This site is not exactly the sort of quality of website that you would expect for a university. The images and contrasts on the page are super overwhelming and it just doesn't look professional or trustworthy.
Airbnb does a good job of including little bits of copy to reduce anxiety and increase trust and confidence in the site. One example is the message under the "Request to Book" button which informs the user that they will not be charged any money or be committed to anything just because they push the button. Little features like this are important for user experience, especially on sites where users are spending money.
8a.nu is in part a news site for rock climbing, so it is to be expected that it will try to include a lot of information. But this page has too much going on and too many similar formats, which can be stressful. It becomes very hard to tell what is what without looking carefully at the site. There is also not much instruction on how to use or navigate the site.
Netflix does a good job of providing very simple user feedback, in the form of a thumbs up or thumbs down, that they can use to help make the selection and experience of browsing better for each individual user. They have even simplified the feedback from the star scale used previously. All that users have to do to give them feedback is push one of two simple buttons.
Verizon has a feedback tab that, first off, is not very easy to find if you were looking to leave feedback. Then, when you click on it, it creates a new window with a relatively long, complicated feedback form. If a user is just looking to give them one small piece of feedback, they will likely be deterred by this form. They are trying to get too much information at once.