- On a website, what is the purpose of HTML code?
- What is the difference between an element and a tag?
- Why do we use attributes in HTML elements?
- Describe the purpose of the head, title, and body HTML elements.
- In your browser (Chrome), how do you view the source of a website?
- 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.
- What are empty elements?
- What is semantic markup?
- What are three new semantic elements introduced in HTML5? Use page 431 in the book to find more about these new elements.
The purpose of HTML code is to define the structure of a web page.
An "element" refers to the opening tag, the closing tag, and the content between them. A "tag" specifically refers to the characters within the angled brackets, which are used to mark the beginning or end of an element and instruct the browser on how the element should be formatted.
We use attributes in HTML elements so that we can add extra instructions and information to specific elements.
The "head" element is used to contain general information about the page. The "title" element is used to show the document's title in the title bar and tabs of the browser window. The "body" element is the primary container for content that is to be shown in the main browser.
To view the source of a website in my browser, I would drag my mouse to "View" in the menu bar, then scroll down to the "Developer" option, which opens a side bar with the option to "View Source".
<b> is a an element that is used to make the characters between the tags appear in a bold font.
<sub> is an element used to contain characters that should appear as subscript.
<h1> is an element used to contain text that is intend to serve as the primary heading (level-one heading).
<br /> is an element used to create a line break where inserted. This will appear when run in the browser.
<i> is an element used to make characters within the tags appear italicized.
An "empty element" is a singular tag that contains a left-angle bracket, character(s), a space, and a forward slash before closing itself with a right-angle bracket.
Semantic markup refers to the text elements that add additional information to the browser but do not affect structural formatting.
<section> is a semantic element introduced in HTML5 that groups together related content. This element is not to be confused with a <div> element, which is considered a container for an entire page.
<hgroup> is an element that is used to group together more than one heading element, while being treated as one heading (e.g., primary and a subheading).
<header> is an element introduced in HTML5 that contains information at the top of page, such as the name of the site, and also can be used to introduce individual posts and articles.
https://codepen.io/acerveny/pen/zeQObv
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- What is the basic structure of an element used to link to another website?
- What attribute should you include in a link to open a new tab when the link is clicked?
- How do you link to a specific part of the same page?
The difference between ordered, unordered, and definition lists lies in their functions and structure: an ordered list allocates a number to each item, such as a recipe; an unordered list allocates a bulletpoint to each listed item, and is generally used when order is not relevant; a definitions list is generally used to format terms and their respective definitions. Aside from the difference in usage, each list has their own unique start and end tags to initiate said list and account for each item.
When creating a link to another site, one must use the <a> element and include the href attribute. Between the opening and closing <a> tags, you may input text that will serve as a clickable link to the website for which you're wishing to direct the user.
The href attribute should be included in the opening tag of the <a> element, and it should contain the absolute URL of the webpage you'd like to link to.
When linking to a specific part of the same page, one must use the same <a> element and href attribute described above. However, instead of including an absolute URL in the href attribute, one could use a relative URL - a shorthand version of the absolute URL that doesn't specify the domain name.
Chapters 10, 11, and 12 on What is CSS, Color, and Text from HTML and CSS: Design and Build Websites
- What is the purpose of CSS?
- What does CSS stand for? What does cascading mean in this case?
- What is the basic structure of a CSS rule?
- How do you link a CSS stylesheet to your HTML document?
- When is it useful to use external stylesheets as opposed to using internal CSS?
- Describe what a color hex code is.
- What are the three parts of an HSL color property?
- In the world of typeface, what are the three main categories of fonts? What are the differences between them?
- When specifying font-size, what are the main three units used?
The purpose of CSS is to provide a way to create, manage, and consistently apply collective (or independent) style characteristics to pages.
The acronym "CSS" stands for "Cascading Style Sheets". In this case, "Cascading" refers to the ability to apply general rules and, at the same time, prioritize or override properties of independent elements.
The basic structure of a CSS rule involves two key components, the "selector" and the "declaration". The selector refers to the element that is to be affected by the applied rule. The declaration refers specifically to what style choices should be made for the respective element, and it is composed of two parts: a property (indicates the genre of trait you'd like to change) and a value (specifies the settings of the trait to be changed).
A CSS stylesheet is linked to an HTML document by adding the <link> element within the <head< element, and ensuring it is composed of three attributes: an href attribute, to specify the path to the CSS sheet; a type attribute, to specify the type of document being linked; and a rel attribute, to specify the relationship between the item being linked and the document itself.
It would be more useful to use external CSS stylesheets over internal CSS in situations where you have multiple web pages that can share the same stylesheet. This results in less code overall - which produces faster loading times for web pages -, expedites the process of updating multiple web pages at once - as you're only updating one sheet-, and allows for the HTML page to be clear of repeated, lengthy CSS rules.
A color hex code is a six-digit code that accounts for the values of red, green, and blue used in a singular color. It is preceded by an octothorpe (#).
The three components of an HSL color property are "Hue", "Saturation", and "Lightness". Hue is expressed as an angle between 0 and 360, as it pertains to the color circle. Saturation refers to the amount of gray in a given color and is expressed as a percentage between 0% (a shade of gray) and 100% (full saturation). Lightness refers to the amount of white or black in a color, and it is represented as a percentage: 100% being the color white, 50% being the initial color, and 0% being the color black.
The three main categories of fonts are "Serif", "Sans-Serif", and "Monospace". The differences between them pertain to their functionality: serif fonts have details (known as "serifs") added to the ends of main strokes of characters; sans-serif fonts have straight-edged letters; monospace fonts are fixed width and are preferred for code because the letters align.
When specifying font-size, the three main units used are pixels (px), percentages (text scaled based on percentage of default pixel size - 16px), and EMS (refers to the width of the letter "m").
- If you're using an input element in a form, what attribute controls the behavior of that input?
- What element is used to create a dropdown list?
- If you're using an input element to send form data to a server, what should the type attribute be set to?
- What element is used to group similar form items together?
In the input element of a form, the "type" attribute decides what variant of input will be used, and processes it accordingly.
To create a dropdown list, the <option> element is used is show the options available to a user.
When sending form data to a server, the "type" attribute should be set to "submit".
The <fieldset> element is used to group similar form items together.
- Describe the differences between border, margin, and padding.
- For a CSS rule padding: `1px 2px 5px 10px`, what sides of the content box does each pixel value correspond to?
- Describe the difference between block-level and inline elements.
- What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
- What is the difference between a fixed and liquid layout?
Borders, margins, and padding are alterable characteristics that pertain to the boxes, which hold content. The border itself refers to the boundary of an element, or box. The margin refers to space between boxes, and differs from the border in that it sits outside the parameter of the border. Padding refers to the space between the border and the content within it. Generally speaking, margins refer to the space immediately outside the border, and padding refers to the space immediately within the border and in relation to the content.
In the example above, which refers to the shorthand used for padding, the values apply to the box in a clockwise order (top, right, bottom, and left); therefore, 1px applies to the top of the box, 2px applies to the right side of the box, 5px refers to the bottom of the box, and 10px prefers to the left side of the box.
The primary difference between block-level and inline elements pertains to how they impact formatting. When used, a block-level element triggers the start of a new line in the browser, while inline elements will continue within the text on the same line.
The role of fixed positioning is to commit an element to a given position that will be maintained while a user navigates through a browser page. The z-index is important when considering instances like fixed, absolute, or relative positioning because, based on a given value, in ensures that the desired element appears where it is supposed to and mitigates overlapping boxes and text.
A fixed layout differs from a liquid layout in its inability to scale the appearance of a browser based on the increase or decrease of the size of the window, while the liquid layout is capable of adapting the layout design as the user adjusts their window. Additionally, a fixed layout measures in pixels, and a liquid layout uses percentages.
- In an image element, why is the alt attribute important?
- What determines if an image element is inline or block?
- What are the benefits of jpg or png image file formats?
The alt attribute is especially important in an image element because it is a place to provide a text description (alt text) of the image if a user is unable see it. Providing an accurate and concise description allows screen reader software and search engines to parse the image description and apply it for their purposes accordingly.
Where the image element is placed relative to a block-level element is what ultimately decides if the image is inline. If the element is placed before a block-level element (e.g., <h1> or <p>) then a new line of text will appear beneath the image. If the image element is placed within the block-level element, the image will appear inline among the text, relative to its exact placement. That is, the text will flow around the image.
When picking a file format to post an image, both jpg and png have their own respective benefits. JPG is best used with images that contain multiple colors, such as photographs, and is able to provide nuance and texture based on color differentiation. Also, it is a compressed file, which means that at the expense of some visual clarity, the file size will be smaller than a PNG and may help the browser load the image faster. A PNG file is best used for images that are largely composed of the same color (flat color), which makes it ideal for storing line drawings, logos, or images with text. Additionally, PNG files are lossless, and thus not compressible, so they are prefered for when small file sizes are a must.
- What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
- What is an image sprite, and why is it useful?
The benefit of using CSS over HTML, in the case of height and width of images, seems to come down to efficiency. Keeping the preferred dimensions of images in a singular space with other design-centric elements allows the developer to consolidate their data; using CSS also allows the developer to apply rules consistently across multiple pages, rather than clutter the HTML markup.
An image sprite is a singular image file that is composed of multiple images. Using a CSS stylesheet, a developer can specify the background position of one of the images to have it appear without displaying all of the images in the file at once. This is preferable to the alternative of creating several separate image files because using a sprite uses less memory and can load with a single browser request to the server.
Chapter 2 (Statements, Variables, Data Types, & Arrays) from JavaScript & jQuery: Interactive Front-End Web Development
- How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?
- There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
- What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?
- The name must begin with a letter, dollar sign, or an underscore; it must not start with a number.
- The name can contain letters, numbers, a dollar sign, or an underscore. A variable name cannot contain a dash or a period.
- Keywords, or "reserved" words, cannot be used as variable names. This is because keywords are specifically used to tell the interpreter what to do. A few examples of such reserved words include "byte", "finally", "public, and "this".
- Variables are case sensitive.
- When naming a variable, use a name that describes the information that the variable stores.
- If there are multiple words in a variable, use a capital letter for first letter of every word after the first word.
- How can an array be useful when dealing with multiple related values? How do you access/change a value in an array? An array is useful for dealing with multiple related values because it functions as a "collection", or container, for values that are typically of the same data type. To change a value in an array, assuming the variable(s) has already been declared, you must type the array name and then specify the index number of the corresponding value.
- What is the difference between an expression and a statement? The difference between an expression and a statement lies in their function; that is, a statement is an instruction that generally includes a keyword and a variable, whereas an expression is that which produces a value.
- What are three types of operators and how are they used?
To declare a variable in JavaScript, you must initiate creating the variable by typing the keyword "var". Following var, you name the variable (i.e., assign it an identifier) and then assign it a value. A value is assigned by listing the name of the variable, applying the equals sign - which functions in JavaScript as an "assignment operator" -, and following the equals sign with a value (i.e., a "variable value").
A number data type is used to assign value with integers and floating point numbers.
A string data type is used to represent literal text using characters (e.g., the alphabet, numbers, and special characters). Strings should be enclosed in quotes.
A boolean data type assigns value on the basis of either "true" or "false"
When naming variables, the following six rules must always be followed:
Three examples of operators include the following: assignment operators, which assign a value to a variable; arithmetic operators, which perform basic math; and string operators, which combine two or more strings.
Chapter 3 (Functions & Scope), pages 85-99, from JavaScript & jQuery: Interactive Front-End Web Development
- If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
- What is the difference between function parameters and arguments?
- What is the keyword return used for?
- 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?
The difference between entering "sayHello" and "sayHello()" in the console is that, if excluding parenthesis, JavaScript simply recalls and outputs the function. If including parentheses, the console returns "Hello!", because it identifies the exact input required to output "Hello!".
A parameter is the name used to apply to a variable in a function, whereas an argument is the actual value delegated to variable when running the function.
The keyword "return" is used to return a value to the code that called the function, and consequently stops the execution of any following statements.
Local variables are considered better than global variables because they can be reused between several functions, they can also change between functions as needed, and - because they are stored locally - they require much less memory than global variables when running a browser page. Additionally, when building a page, it is easier to isolate problematic local variable bugs, as the variables are specific to a given function and can be diagnosed quickly. If a bugs pops up when utilizing a global variable, it is more difficult to specify where the problem is, specifically, because the variable is consistent throughout the tenure of the code.
However, there are instances where global variables are preferable: if you are running a program that relies on a definitive variable consistently being the same, using a global variable would allow you consolidate your code and could be more effective.
After you're done reading the third post, read through the each section of questions again: Psychology, Usability, Design, Copywriting, and Analysis. Choose one question from each of these sections (so 5 total questions), and find one site that is good at supporting that question, and find another site that violates that question.
Post links to the sites and brief descriptions in your mod 0 capstone gist.
How are you rewarding good behaviour?
Good UX: https://www.facebook.com/
Description: Facebook uses social rewards, "likes", to reinforce validation and keep users returning to the platform. This can also be seen in the social media platform of "Instagram".
Lackluster UX: https://itunes.apple.com/us/app/quit-that-habit-tracker/id909400800?mt=8
Description: Quit That! Habit Tracker is an app that promotes solidarity in quitting something by logging the time since your quit date and the money you've saved (assuming what you're quitting has a monetary cost). While it is straightforward, it lacks notifications that could be used to keep users accountable and/or motived.
Are you being clear and direct, or is this a little too clever?
Good UX: www.google.com
Description: While Google contains multitudes of information, the simple, user-friendly interface of it's homepage is direct and easy to navigate.
Lackluster UX: https://scratch.mit.edu/projects/editor/?tutorial=getStarted
Description: Scratch is a tool intended to teach kids how to program. It intends to do this by running a browser page filled with instructions and arrows, which I find to be confusing. As an adult, the interface seems as difficult to understand as it was when I was a kid.
Does the design lead the user’s eyes to the right places? How do you know?
Good UX: https://www.amazon.com/
Description: The webpage for Amazon is clear and organized, and gracefully directs the user to the search bar, search suggestions, and/or their cart to check out.
Lackluster UX: https://www.ietf.org/
Description: This website is difficult to navigate because the navigation bar appears to have three separate sections, and it is unclear why fonts and color scheme do not align.
Does it motivate the user to complete their goal? Is that what we want?
Good UX: https://www.khanacademy.org/
Description: Khan Academy uses a point and badge system to keep the attention of users that may be waning in motivation. Scoreboards help you track your points relative to other users, and badges are intended to keep your momentum going as you move from one subject to the next.
Lackluster UX: https://www.ietf.org/
Description: This website is difficult to navigate because the navigation bar appears to have three separate sections, and it is unclear why fonts and color scheme do not align.
How can you use this analysis to make improvements?
Good UX: https://www.netflix.com/
Description: Netflix does an excellent job of accruing user data to make the best possible recommendations for content based on previously watched material, user's ratings of content, and material that has been left unfinished by users.
Lackluster UX: https://www.yelp.com/
Description: While I love and appreciate Yelp as a user, the app seems to avoid the use of intuitive opportunities to direct users to new options based on user analytics beyond their locations.