On a website, what is the purpose of HTML code?
- Hypertext markup language is used to establish the scaffolding of the webpage, the skeletal elements that structure and format the foundations of our content so that it may be read as intended by the creator. HTML code allows us to fundamentally portray our page contents in formatted fashion rather than as a messy block - which was historically an obstacle in the sharing of documents via the internet. To summarize, HTML allows us to instruct browsers on how to appropriately display our page contents.
What is the difference between an element and a tag?
- They are interchangeable terms for the most part. To be more specific, tags represent the specific text or prompts contained within the <> that we use while using HTML. Elements include the tag (typically both an opening and closing tag) and all content encapsulated within it. So an element is basically the entire apparatus involved within specific tag "containers".
Why do we use attributes in HTML elements?
- Attributes allow us to get more high resolution with our instructions. They provide more information on top of the basic element and thus allow for greater specificity or modification of the element's function.
Describe the purpose of the head, title, and body HTML elements.
- The core obstacle of properly organizing web page content is in part addressed with such segregation. Compartmentalizing our content into segments with with differential viewability (what we want displayed vs what we want noted but hidden) is a form of basic organizational hygiene. To be more specific, the body element is for aspects of the code that we want displayed in the main browser window, the head is for a variety of significant behind-the-scenes content that often contains information about the web page rather than what is shown to the user, and the title element allows us to specify a heading that appears standardly on the top of the webpage in the browser tab.
In your browser (Chrome), how do you view the source of a website?
- Option + Cmd + U allows you to view source. You can also navigate there from the View tab.
List five different HTML elements and what they are used for. For example,
is a paragraph element, and it is used to represent a paragraph of text.- The (sup) tag allows you to specify text as a superscript
- The (b) tag allows to bold segments of text
- The (br /) tag allows you to indicate a line break (and is a self-contained tag lacking a closing </>)
- The (em) element allows you to choose text to be isolated as being of different importance, to emphasize something as somewhat unique often for screen readers, etc.
- The (ins) tag allows to demonstrate that certain text has been inserted into a document.
What are empty elements?
- The majority of tags have explicit opening and closing segments with content in between. Empty elements contain no words between opening and closing tags, perhaps entirely lacking a closing tag as with the line break element.
What is semantic markup?
- Semantic markup, as opposed to structural markup, provides deeper detail beyond the structuring of paragraphs, headers, etc. With semantic markup we can define citations or various other types of emphases.
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
- The article tag allows for greater specificity in structuring and chunking text.
- The header and footer tags appear to surprisingly be new.
- The nav element is also a fresh feature.
Codepen Link https://codepen.io/Austend/pen/NQNqLN
Readings: Chapters 3 & 4
There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- The first two types of lists here, ordered (ol) and unordered (ul), are the most similar. They only vary in whether they respectively offer a number or a bullet point at the start of each line of list content and are the same in that they both follow the same format using a common element (li). The definition list (dl) is a little bit different by being a little bit more specific in its purpose. It is a tool for displaying listed terms along with their definitions and in using it we employ the elements (dt for term) and (dd for definition) rather than the (li) tag.
What is the basic structure of an element used to link to another website?
- Page links are installed by using the (a) tag and then specifying the destination URL via the (href) attribute. It appears as follows: (a href="absoluteURL")Example(/a). The text between the opening and closing tagas comprises the text of the link.
What attribute should you include in a link to open a new tab when the link is clicked?
- Linking to a page in a new tab is accomplished by using the (target) attribute and by specifically employing "_blank" as the target text. It looks like this:
(a href="URL" target="_blank")LinkText(/a)
How do you link to a specific part of the same page?
- The (id) attribute allows us to navigate in this way. By designating points on the page with specific id attributes, we can return to precisely those locations by referencing them with links. It's required that we use a (#) sign prior to the id references in the link elements. We specify the locations with (id="name") and target them via (a href="#name").
Readings: Chapters 10, 11, and 12
What is the purpose of CSS?
- It seems like it's common to refer to HTML as the skeleton of a structure and CSS as the sort of skin. Where HTML is the scaffolding - CSS is about the style, the rules that govern appearance. CSS allows us to take the relatively drab formatting of HTML and to dress it up in myriad ways that allow for more effective presentation: fonts, colors, borders, etc.
What does CSS stand for? What does cascading mean in this case?
- The acronym is for Cascading Style Sheets and the cascading refers to the ordering of the effects for competing CSS rules. Each rule has a weight and when an element is acted on by more than one rule, those weights help to establish the precedence and determine which of the stylistic imprints gets the go-ahead.
What is the basic structure of a CSS rule?
- Aside from curly brackets, semi-colons, and colons, CSS rules include a selector portion which specifies the element to be acted upon as well as a declaration segment that governs how the selected element(s) will be styled. The declaration is comprised of two parts, a property and a value, both of which combine to specify the alteration to the selected element. It looks a little something like this: h1 {color: blue;}
How do you link a CSS stylesheet to your HTML document?
- By attaching a (link) element with a particular set of attributes to the (head) content of the html document, we can link both the CSS and html files together. It looks like this: (link href="css/style.com" type="text/css" rel="stylesheet"/)
When is it useful to use external stylesheets as opposed to using internal CSS?
- It appears to be best practice to avoid including the css code within the html document at all. It is specifically suggested to link an external css file rather than employing the (style) element when building a site with more than one page.
Describe what a color hex code is.
- It's one of a few ways of indicating a specific color shade with CSS and it does so using the hexadecimal system where the integers, 0-9, as well as the letters, a-f, are used to represent 0-16. Hex codes can be used as the value for various color-related properties in CSS rules and appear in the format #ffffff with each hex pair of integers/letters corresponding to particular levels of red, green, and blue respectively. In the hex code I used before, #ffffff, the component levels of red, green, and blue combine to yield white.
What are the three parts of an HSL color property?
- Hue (measured from 0 - 360 degrees, saturation (measured as a percentage of "grayness"), and lightness (measured as a percentage of "whiteness") comprise the HSL acronym.
In the world of typeface, what are the three main categories of fonts? What are the differences between them?
- Serif, sans-serif, and monospace are the main three. Serif letters have flowery tips with extra bits at the end of the strokes whereas sans-serif letters are characterized by straight ends. Monospace fonts differentiate themselves by having uniform spacing for each letter.
When specifiying font-size, what are the main three units used?
- Pixels(16px is standard), percentages(%), and ems (a measure relative to the parent element) are the three.
Readings: Chapter 7
If you're using an input element in a form, what attribute controls the behavior of that input?
- The type attribute.
What element is used to create a dropdown list?
- The (select) element.
If you're using an input element to send form data to a server, what should the type attribute be set to?
- We'd want the attribute to appear as follows: (type="submit").
What element is used to group similar form items together?
- The (fieldset) element.
Readings: Chapters 13 & 15
Describe the differences between border, margin, and padding.
- Moving outward from the content we find the padding which fills the space from the boundary of the content to the border. Outside the border is another space that represents the margin. This can be readily manipulated to control gaps between separate items. As far as other differences, it
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
- In order, the pixel values correspond to the top, right, bottom, and left sides. This also applies to the margin and border properties.
Describe the difference between block-level and inline elements.
- An block-level element starts on a new line, sort of like you've used the linebreak element. Inline elements stay or flow within the original box rather than establishing a new one on a new line.v
What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
- Fixed positioning lets us freeze an element relative to its browser window so it stays on screen while the user scrolls the page. Adjusting elements out of normal flow like this can cause sort of element conflicts where boxes overlap. The z-index property gives us the ability to specific which of overlapping elements stacks and shows on top.
What is the difference between a fixed and liquid layout?
- These layouts are significant in the context of the varying screen and page sizes available to users. Accomodating a web page to fit more than just one potential page width results in a liquid layout, which is programmed to stretch or shorten according to a browser's momentary size. A fixed width layout does not respond to the changing size of the browser window.
Readings: Chapter 5
In an image element, why is the alt attribute important?
- Mostly to accomodate users that rely on screen readers. The alt text allows us to describe the image if it cannot be viewed.
What determines if an image element is inline or block?
- The (img) element's location relative to neighboring block level elements determines whether our picture appears on its own line or on a shared line. If the we place our (img) tag within a block level element, then we'll see a shared effect.
What are the benefits of jpg or png image file formats?
- The main difference involves image colors. We use jpg for images with a large color variety, whereas png or gif files are more appropriate when we have few colors or images with large monochrome swaths.
Readings: Chapter 16
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
- Its a cleaner general practice that keeps the HTML from being cluttered.
What is an image sprite, and why is it useful?
- Sprites occur when we use one image in various places on a page. Each additional image places a burden on the work and time required to by the browser to display them. Sprites reduce loading time.
Readings Chapter 2 (JS)
How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?
- The (=) is referred to as the assignment operator and is used to assign a value to a variable
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
- Numbers are straight forward, they are literal numeric values. The string data type includes text: letters and characters within quotation marks, and boolean values are one of either true or false.
What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?
- The variable name must begin with either &, _, or a letter, and cannot begin with a number.
- The name can include letters, numbers, $ or _, but cannot include . or -.
- Specific keywords cannot be used as variable names. Examples include var, break, case, catch.
- All variables are case sensitive.
- Variable names should be descriptive of the kind of information they store.
- When multiple words make up the variable name, they should be written in camelCase.
How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?
- Changes can be made to arrrays by targeting specific locations in the array using index numbers. Arrays are useful in that they are more efficient than tediously setting up multiple variables
What is the difference between an expression and a statement?
- An expression is always part of a statement. They differ in what they achieve. Statements are phrases that describe a series of actions, but they do not return a value. Expressions, rather than being descriptive, return a value.
What are three types of operators and how are they used?
- (+) represents the string operator, which is used to concatenate separate strings.
- Arithmetic operators like (-, %, ++, etc) are used for mathematical calculations.
- Comparison operators compare two values and then return a boolean value.
Chapter 3 Readings (JS)
If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
- Entering sayHello would return an undefined message since we haven't set a value for that specific variable. By entering sayHello(), we would be calling a function that indeed has been defined and and its single statement would then be executed, returning a hello message in the console.
What is the difference between function parameters and arguments?
- Arguments represent the specific data that you dial into the parameters while calling a function whereas the parameter is a variable in the function declaration.
What is the keyword return used for?
- The return keyword stops the function and determines a value to be returned to the initial code that called it.
How are local variables better than global variables? Are there instances you can think of where you might want to use a variable that is globally scoped over local?
- Local variables take up less memory and have less margin for error with naming conflicts especially during instances of collaborative work with others. Global variables might be the better option in some cases when working independently.
UX Readings
Psychology Question: How does this make them feel?
-
I've included two links below. Both involve fencing businesses in the state of Florida. The first website invokes a sense of claustrophobia and cramped disorganization. The overwhelming amount of dense text and squeezed together buttons makes navigating the website somewhat of a chore. In terms of considering user feelings and comfort in the design of a fencing website, the second link conveys a cleaner and more professional relative appearance with much more thoughtfully arranged spacing as well as some humanizing images of the employees rather than swaths of cold, compressed text. If I'm a Floridian looking online for where to buy some fence, I might find myself turned off by the amateurish displays of the former option by subconsciously conflating website appearance quality with expected service quality. In contrast, the second website summons a sense of relative ease and maybe even trust.
Usability Questions: Are there any user mistakes you could prevent? AND Could you get the job done with less input from the user?
-
The first website I've included leads to an article that details how Expedia attributed a loss of $12 million a year to a design decision which unnecessarily included a field for "Company" during their online checkout process. I hope this suffices as evidence for how considering possible points of user confusion could be impactful for programmers. Expedia's mistake represents my example of a "violation" in designing websites according to the two related Usability questions I've selected. The second website is an example of a site with a minimal and streamlined design where user mistakes with input can be reduced by asking for less.
-
https://www.zdnet.com/article/expedia-on-how-one-extra-data-field-can-cost-12m/
Design Question: Do the colours, shapes, and typography help people find what they want and improve usability of the details?
-
I've included links below to two ecommerce pages. In one we see a hodge-podge mess of randomly colored listings. In the other we see a cleaner page with a more tasteful and selective application of colors, shapes, etc. The contrast in the ease of navigation is telling.
Copywriting Question: Does it reduce anxiety?
-
The Domino's pizza website produces a delivery tracker. This bit of design consideration caters to users' concerns regarding the state of their food and likely reduces the amount of anxious calls from waiting customers. The second webpage is seemingly built to inspire anxiety. The page presentation might fit the "crazy" brand of the business owner, but is not very direct and simple.
-
https://www.dominos.com/en/pages/tracker/?lang=en#!/track/order/
Analysis Question: How can you use this analysis to make improvements?
- I've really been struggling with this task because I'm not entirely sure what I'm supposed to precisely do. So we're looking at UX principles and there are specific questions involved and we're supposed to, I think, use our research abilities to find individual websites that show a clear example of good UX practice following the specific logic of the question we choose? So I pick a question and sort of convert it into a rule and then kind of just wander the internet looking for how I can find a website that somehow shows that the developer took into consideration whether analyzing user data was valuable or not? I'm not sure how to find a webpage that demonstrates this. I understand how analytics is valuable for UX design and how feedback can be contaminated by personal assumptions, but I don't know how to encapsulate that by providing yin and yang links for example webpages. I've pasted the same Expedia article from before that talks about how the company was able to identify negative consequences involved with confusing design. This was accomplished by using data analysis. I fear I've fundamentally misunderstood the instructions for this assignment though I did my best to creatively execute.
https://www.zdnet.com/article/expedia-on-how-one-extra-data-field-can-cost-12m/