1. On a website, what is the purpose of HTML code? The purpose of HTML code is to put your text in a text document essential. It's for the core content (words).
2. What is the difference between an element and a tag? An element is something that you use in order to manipulate the text or information. Tags are similar, but there is usually an opening and closing 'tag' to represent the start and end.
3. Why do we use attributes in HTML elements? Attributes are used in HTML elements in order to categorize the specific text and add additional information (for example, to specify language).
4. Describe the purpose of the head, title, and body HTML elements. The head is in order to use heading and make certain parts of the HTML file more prominent. The title is the part that will show up on the tab or the top of the web browser when when accessing the website. The body of the HTML is the core content of the HTML document.
5. In your browser (Chrome), how do you view the source of a website? Currently, I am able to click 'ctrl + click' and then in the menu I would press 'inspect.' This will bring up the source code. If I am in a CMS, I would click to the 'Code' tab instead of the 'Visual' tab.
6. 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. -creates a horizontal line (it doesn't need an open and closing tag) -
creates a break in the line/paragraph (also doesn't need an open and closing tag) - this creates the largest type of header - this is used for a character that will be superscripted (like E = MC2 - would be used to show the importance of a text (it will default to bold)
7. What are empty elements? This is an element that doesn't have words in between the opening and closings tags (sometimes it only has one tag)
8. What is semantic markup? A semantic markup is one that adds extra information (that is not just structural). Some examples would be or to show why a word is bolded or italicized.
9. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements. - strong (default bold), emphasis (default italicized), and q (quotes) are semantic elements introduced
After reading the articles above, create a gist on Github and reflect (4-6 sentences) on the following prompts.
- What role does empathy play in your life and how has it helped you? In my life, empathy plays a large role in how I act, respond, and work. I have been an teacher and I always ensure to create lessons and teach in a way that keeps students at the center. When I taught an entrepreneurship course, I always pushed my students to go out and figured out who their customer is and what they actually would want. This is important in making decisions and ensuring that people have what they really want/need.
- How does empathy help you build better software? Empathy helps to build better software by being able to understand the customer and their needs. One of the articles talked about walking in the shoes of a customer that needed a zoom in application for visually impairment. There was a perceived customer that did not actually end up being the real customer. Situations like this are how empathy can help to build better software. At the end of the day, the software will be used by people so it's important to understand the people that it's serving.
- Why is empathy important for working on a team? Empathy is vital for working on a team. Building empathy helps to understand who you're working with on a team, what their workstyle is and how to best work together. When building teams, I have found that it's important to understand how members deal with stress and what triggers/pet peeves each other have. By building this relationship and empathy with how each other operate, it is easier to work together effectively and efficiently. Overall, empathy is important for working on a team because it helps you understand each other in order to work together.
- Describe a situation in which your ability to empathize with a colleague or teammate was helpful. Over the summer, I was working as an Operations Director that was in charge of Communication and Events. Another one of the Operations Directors was in charge of Housing and Dining with her team. A situation arose where I was notified of something that happened in Dining and needed to be communicated quickly and effectively to the staff and community that we were working with. Monica and I had already had a solid working relationship so that I was able to empathize and understand the best way she would want me to communicate to the community regarding her workstream. After a few emails back and forth editing our wording and a few phone calls, we were able to send out a positive and timely response to some of the community members getting sick from the food. By empathizing with my peer (and also the community we served), I was able to act effectively and efficiently.
- 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 is most difficult to be empathetic in a professional setting when there's a mindset that I don't understand/normally wouldn't think about. For example, when I see others that 'don't want to do something' or complain about their job a lot I find it hard to put myself in their shoes and truly understand where they're coming from. I've found that I can improve my skills in this area by approaching these pepole from a place of curiosity and inquiry. I know that although I don't understand their perspective, I could learn more about their experience and why they feel the way that they feel.
Answer these questions about the reading in your mod 0 capstone gist:
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences? Ordered lists are for things that are numbered (and where ordered matters - think of a step by step list), where unordered lists are ones that order doesn't matter (usually bullet points - think of a grocery list), and the final type: definition lists are for a set of terms (think of a vocabulary list).
- What is the basic structure of an element used to link to another website? The basic structure of an element used to link to another website will start with " and have the link in the middle followed by ." There are different types of links that fall into the absolute and relative URL categories.
- What attribute should you include in a link to open a new tab when the link is clicked? In order to open a link in a new tab you would have target = "_blank" within the brackets, right after the link.
- How do you link to a specific part of the same page? In order to link a specific part of the same page you'll want to first identify the part that you want to link to by putting id = "top" within the tag (like a heading tag). Once you've identified the part, you can then put the link in the href link with the # symbol - example: href = "#top" would be what's included to link it.
Answer these questions about the reading in your mod 0 capstone gist:
- What is the purpose of CSS? CSS is used to make the core content (HTML) look better and easier to read/navigate.
- What does CSS stand for? What does cascading mean in this case? CSS stands for Cascasing Style Sheets. Cascading means that the style flows down from the web page and also the code (the rules of CSS 'cascade' down and have an order to what takes priority)
- What is the basic structure of a CSS rule? The basic structure of a CSS rule is a 'selector' and a 'declaration.' Within that declaration is a 'property' and a 'value.'
- How do you link a CSS stylesheet to your HTML document? You can link a CSS document either internally or externally. Internally would mean that you reference the style type ("text/css") and then put in the css within the "head" code. Externally would mean that there's a separate document that you will simply link in the "head" of the HTML code.
- When is it useful to use external stylesheets as opposed to using interal CSS? It is useful to use external stylesheets when there is more than one webpage. This is extremely useful because then you are able to format and change visuals from one central CSS document as opposed to on every single page of an HTML code.
- Describe what a color hex code is. A color hex code is a 6 character code that will bring back that specified color (visually on the web page). The code is the amount of red, green, and blue to use.
- What are the three parts of an HSL color property? The three parts of an HSL color property are Hue (the color circle with values from 0 to 360), Saturation (the amount of gray in a color), and the lightness (the 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 font are serif (extra details for longer written passages), sans-serif (straight ends to letters and more smooth when there's less pixels), and monospace (each letter takes up the same amount of space).
- When specifiying font-size, what are the main three units used? The three main units used when specifying font-size are pixels (literally how many pixels it uses), percentages (a percentage from the default amount of pixels), and ems (which is the equivalent to the width of the letter m).
Answer these questions about the reading in your mod 0 capstone gist:
- If you're using an input element in a form, what attribute controls the behavior of that input? The method attribute will control if the form will 'get'(retrieve data, good for search bars) or 'post' (for larger files or forms). Once the form is setup, the input 'type' will be able to control how the information is collected (text, checkbox, file upload, etc.).
- What element is used to create a dropdown list? The 'select' element is used to create a dropdown list. Once set up, you will use 'option' elements before closing the 'select' element tag.
- If you're using an input element to send form data to a server, what should the type attribute be set to? If you want to send form data to a server (for example, uploading a file), you should use the 'post' method.
- What element is used to group similar form items together? The 'fieldset' element is used to group similar form items together (and you can use the 'legend' element as the first element in the 'fieldset' in order to caption/label it).
Answer these questions about the reading in your mod 0 capstone gist:
- Describe the differences between border, margin, and padding. A border is the line that goes around the text or element, while the margin is the space from the outside elements to the border, and finally, the padding is the space between the text of the element and the border (from outside in, it would go margin, border, then padding).
- For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to? The pixels would start with top (then go clockwise). So 1px would be top, 2px would be right, 5px would be bottom, and 10px would be left.
- Describe the difference between block-level and inline elements. A block-level element is something that creates a new line or 'box' when it closes its tag as an element (so a heading or paragraph), whereas an inline element does not create a new line or 'box' when it closes its tag as an element (so this would be bold or italicizing something).
- What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning? Fixed positioning is the act of making something stick exactly where it is (even if the user scrolls). The z-index is important because it acts as the 'bring to the front' or 'send to the back' so that overlapping elements don't look bad when the user scrolls.
- What is the difference between a fixed and liquid layout? A fixed layout will have something stay in the same pixels and proportions no matter what size the screen is, where a liquid layout will stretch or adjust based on the screen size (uses a percentage on width size, while a fixed layout will use 960px usually).
Answer these questions about the reading in your mod 0 capstone gist:
- In an image element, why is the alt attribute important? The alt attribute is important because it describes the image. This is important to software developers because as we look at the code the picture itself does not pop up (so without alt you'd need to flip between the code and the website to know which picture is which).
- What determines if an image element is inline or block? An image element is usually an inline element (by default). However, if the img element is followed by a block element, then there will be a line or space separating the two elements.
- What are the benefits of jpg or png image file formats? Jpg is used when there are a lot of different colors in an image (usually photographs or things like that), where a png file is used for 'flat colors' and logos (photos with a lot of the same color or few colors overall).
Answer these questions about the reading in your mod 0 capstone gist:
- 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 heigh and width of images in CSS is to create an easier flow of sizes. It is also recommended to have a few sizes of images so that you can simply use a 'class' for the size of each photo (small, medium, large).
- What is an image sprite, and why is it useful? An image sprite is when one element/image is able to interacted with. The way you do this is to just have one 'button' on HTML and then have it have different types of the element in CSS (normal, hover, and active). The reason this is useful is to make elements interactive for the user and it also only has one HTML element which means it will load faster (as opposed to manually putting three different elements in HTML).
Chapter 2 - Statements, Variables, Data Types, Arrays (JavaScript and jQuery: Interactive Front-End Web Development):
Answer these questions about the reading in your mod 0 capstone gist:
- How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript? In order to declare a variable in JavaScript, you must use the 'var' keyword and then name it. The equals sign is an operator and it assigns a value to a variable (it doesn't mean that it's equal to). In JavaScript it is called an 'assignment operation.'
- There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are. Numbers are numerical characters that can be used with Arithmetic operators, while strings are a combination of letters/characters that are usually words and phrases, while a boolean data is a simple true or false data type.
- What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?
- Variables must start with letters, $, or _ (they cannot start with a number)
- They can contain letters, numbers, $, or _ (but cannot contain - or .)
- Variables cannot use keywords or reserved words
- Variables are case sensitive, so don't be a jerk and make var Cash and var cash
- Variables should be named based on what they do and make sense
- Variables should be named with camelCase (first letter is lowercase and each subsequent word is capitalized). You can also use _ or . to separate.
- How can an array be useful when dealing with multiple related values? How do you access/change a value in an array? An array can be useful when dealing with multiple related values because you are able to manipulate them and add or subtract items in these 'lists.' You can access/change a value in an array by knowing its index number (which starts at 0 and goes up), and then adjusting based on this index number (if an item is index number 2, then you can use itemList[2] and change it that way).
- What is the difference between an expression and a statement? An expression is something that results in a single value, while a statement is each step in the process that the computer will take.
- What are three types of operators and how are they used? The three types of operators (that were discussed in this chapter) are assignment operators (simply giving value to a variable), arithmetic operators (which are mathematical operators for numerical characters), and string operators (which is just + and can add two strings together).
Chapter 3 (Pages 85-99) - Functions and Scope (JavaScript and jQuery: Interactive Front-End Web Development):
Answer these questions about the reading in your mod 0 capstone gist:
- If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console? sayHello() is the actual calling of the function, which means that the message "Hello!" will be returned when it is typed into the console. When sayHello without parenthesis is entered, it simply shows that there is a function with this name and shows what's inside of it. Overall, sayHello shows the function whereas sayHello() actually performs the function.
- What is the difference between function parameters and arguments? A function parameter is the information that a function needs in order to, well, function. An argument is a value that already exists or that you are plugging in for the parameters (you can have an argument as a variable and an argument as a value. A short way would be that parameters are not yet defined values (or will be defined when the function is called) where an argument is a value (that we already know - or will know).
- What is the keyword return used for? The keyword return is used to give back a result or information based on the data that was manipulated in the function.
- 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 are better than global variables because they are used and then forgotten about (which uses less memory and also does not run the risk and name conflicts). Global variables might want to be used for things that will not conflict and will be used a lot throughout the run of the website (something that would be foundational to a website, like calculating the total in the McDonald's app or something - that would be used a lot and wouldn't have name conflicts).
- Psychology: What is the user’s motivation to be here in the first place? Good at it: Amazon
- Usability: If your user doesn't read the fine print, does it still make sense? Good at it: Puls
- Design: Does it communicate the purpose and function without words? Good at it: Color Hex
- Copywriting: Is the Biggest Text the most important? Why not? Good at it: Asana
- Analysis: How will you measure this/are you measuring the right things? Good at it: Grammarly
Not so good at it: Yahoo!
Not so good at it: NPR (That's also kind of the purpose of NPR though)
Not so good at it: University of Advancing Technology
Not so good at it: Blinkee
Not so good at it: ARNGREN