- 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.
- < html > lets the text editor know html code is being written
- < h1 > is used for headers
- < body > is used to make text be shown within the browser window
- < b > is used to make words bold
- < i > is used to make words italicized
- What are empty elements?
- What is semantic markup?
- What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
--"HTML describes the structure of pages"
--elements are the peices of code that differentiate the structure on the page, the tags are the opening and closing brackets that make up the elements. "Stricly speaking an element comprises the opening, tag is the closing and everything in between"
--Attributes tell us more about elements by providing addition information, appearing on the opening tag
--head contains information about the page, title contains text that will be shown in the tab or the top of the webpage, information written inside of the body will be shown on the page itself
--option+command+U
--empty elements are elements that do not have any words in between them
--elements that dont affect the structure of the webpage but provides extra info for the page
--< abbr > < cite > < dfn > page 431 was about layout in my book which seems like it wouldnt fall under semantic elements
- What role does empathy play in your life and how has it helped you?
- How does empathy help you build better software?
- Why is empathy important for working on a team?
- Describe a situation in which your ability to empathize with a colleague or teammate was helpful.
- When do you find it most difficult to be empathetic in professional settings?
- How can you improve your skills when faced with these scenarios?
--Empathy has played an enormous role in how I interact with others and how they interact with me. It is safe to say that without empathy I would not be who I am today. From a young age, my parents practiced empathy with me and helped foster an understanding that I was not alone in my feelings. Empathy has allowed me to make life-long friends, build community, and expand my understanding of the the world.
--Empathy can put you into a mindset that you dont occupy on a day to day basis, one that may face challenges you have never had to deal with before. For example as a programer you could add a function that allows color blind people to see the page better, or making it so that people with poor vision can zoom in on the photos on the website.
--Empathy can help you understand strengths, weaknesses and problems others have on your team. Maybe someone is strong at multiple things however has too large of a workload because of it or that a team member is struggling with something at home, the rest of the team can help that team member who needs help.
--in college I had a partner on a project who was an EMT, the night before he had to spend all night saving a homeless mans life who was struck by a car. Unfortunatly the next day was the day we had to present our project, I worked hard that morning to learn his part because he didnt know if he could adequately present his share of the work.
--It is hard to empathize when you feel like you have been contributing more than the other person for a considerable amount of time, or whe . you feel they havent been carrying there own weight even when they should have.
--I think I could be more patient at times especially when I am tired or stressed out
- 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?
--Ordered list use numbers, Unordered lists use bullets, and defined list are used to define terminology
--the < a > element using the href attribute
--target="_blank"
--use an id attribute to label points on a page then use an href with a # and the value of the id attribute
- 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 interal 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?
- Serif
- Sans-Serif
- Monospace
- When specifiying font-size, what are the main three units used?
--CSS makes web pages more attractive and allows you to create rules that specify how the content of an element should appear
--Cascading Styles Sheets. cascading has a few meanings, if there are two identical selectors the second takes the priority, however if one is more specific than the others that takes priority alternativly if one is tagged with !important it takes the priority.
--CSS rules contain a selector and a declaration. The selector indicates which element(s) the rule will apply to, the declaration indicates how the selector should be styled.
--To link to an external CSS sheet you use the link element inside of the HTML document. Along side the link element you use the href to specify the path, a type attribute whose value should be "text/css", and rel whose value should be "stylesheet". in the end it should look like "< link href="----folder name for CSS file----" type="text/css" rel="stylesheet" />"
--Its better to use an external stylesheet when you are building a site with more than one page so that the style applies to all pages rather than each seperate page.
--Hex values represent values for red, green, and blue in hexadecimal code.
--Hue, saturation, and lightness
--serif fonts have extra details on the ends of the main strokes on the letters
--these fonts have straight ends to letters making them cleaner in design
--every letter in this font is the same width
--Pixels, Percentages, and EMS
- 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?
--type
--select
--submit
--fieldset
- 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 different 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?
--the border seperates the edge of one box from another, the margin sits outside the border, the padding sits inside the border and is in between the content and the border.
--1px=top 2px=right 5px=bottom 10px=left
--block level elements appear on new lines while inline elements sit along side each other
--it positions elements such as a heading in relation to the browser window. like when a heading stays at the top of a page when you scroll. Z index is important because it controls the layers of elements and decides which one sits on top.
--fixed layouts do not change size depending on the size of the browser window, liquid layouts stretch and contract depending on the size of the window.
- 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?
--It describes what the image is if the image fails to load properly, it also helps people with disabilities who use screen reading software
--block elements always apear on a new line while inline elements sit within a block level element.
--using the right format is crucial for faster load times and sharpness. JPEGis best for images with a bunch of colors and PNG is best for images with only a few colors or areas with large amounts of the same color.
- 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?
--it is useful when you have multiple images with the same sizes on multipul pages.
--it reduces the number of images that have to load making the browsing experience faster
- There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
- What are the three logical operators that JavaScript supports?
- What is the naming convention used for variables?
- What is the difference between an expression and a statement?
- What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
- What is control flow, and why is it useful for programming?
--Numbers are in fact numbers and the things that are made up of numbers such as arithmetic.
--Strings are used to represent text and are contained inside of quotation marks
--booleans have only two values such as "on or off" and "true or faulse"
--and, or, not
--Bindings
--an expression is a fragment of code that produces a value and that value affects the code where as a statment affects the code on its own.
--let, break, case, catch. they are reserved for functions.
--its like an order of operations that controls how the information is interprated from top to bottom.
- 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 keyword return used for?
- What are function parameters?
- What is the naming convention used for function names?
--sayHello just returns the functions but sayHello() returns the value of Hello!
--a return statement determines the value the function returns
--function peramiters are listed in the () of a function and are given by the caller of the function not the code
--you want it to be as all encompassing and clear as possible so you dont have to write the same code for things that are essentially the same, it also makes it easier for others to read and understand it.
- Phsychology---How much work does the user have to do to get what they want?
- usability---If the user doesn’t read the fine print, does it still work/make sense?
- Design---Do users think it looks good? Do they trust it immediately?
- Copywriting---Does it reduce anxiety?
- Analysis---How can you use this analysis to make improvements?
https://www.reddit.com/ this time I am looking at reddits new site which made it easier to see the pictures/videos from the "get go" allowing new users to get to the content without downloading an extension or something else. they knew they had a problem and they fixed it.
Snapchat while it is an app and not a website I feel like is an example of not analyzing the feedback they were receiving. Many users have a hard figuring the app out and instead of giving good tutorials in app they have been adding more features which people haven't been asking for. Such as the ability to send money to friends, this is something I know the app can do but I have no idea how to do it and another feature that further complicates the user experience.
https://www.rottentomatoes.com/ this website is a good example of giving you what you want as soon as the page loads. you want to see how good that new movie is? the score is immediatly available.
https://www.cnet.com/ on the other hand I look at as a tech review site, (maybe I look at it wrong but oh well.) lately it has been more of an article based. for instance at the time of writing this the top article is "The best Amazon Prime perk? The terrible, terrible movies, of course" when I just want to know how good the new onePlus phone is and to find that I had to scroll down the whole homepage. (the Horror)
https://www.google.com/ google is about the most simple website a box and a search button, you hit go and it gives results. the result is no consfusion.
https://old.reddit.com/ on the other hand the old reddit may have been one of the more confusing sites on the web, each subreddit a different style, sometimes you can hit a box and the picture/video would load, sometimes it would link to a new site and othertimes it would just open a text post. many people had to resort to downloading a chrome extension to help navigate the site.
https://www.facebook.com/ is an inviting website that has a good color palet and is easy to use, my mom even navigates this site at the speed of light.
http://s.quickmeme.com/img/de/deddab25491b95acc9b0e5fce7549b27789ae5b1e63c4019072a003e5d92a298.jpg this is a picture from google of an old myspace profile, this site was dropped because people moved to the more inviting facebook platform. while it had more customizable profiles it caused confusion and certain profiles were not to the taste of everone.
https://www.apple.com/ is a good example of reducing anxiety it is clear and concise as to what it wants. Here is the new Iphone, do you want to learn about it or buy it?
https://www.amazon.com/ while I do beleive amazon reduces the need to do things in public so it does reduce anxiety for some people I think it could cause anxiety for a first time user. many times on my home page it show pictures of products with no discription or price making you click more info or going to the product page itself.
P.S. all of these websites that I feel like I bashed are actually pretty great dispite my "nit picking"