Day 1
On a website, what is the purpose of HTML code?
- Describes the structure of pages on a screen by adding code words we want to appear on those pages.
What is the difference between an element and a tag?
- Element: Tells the browser something about the information that sits between tags. It comprises the opening and closing tag and any content that lies between it
- Tags: Are the containers of the element and usually are in pairs (an opening and a closing tag accompanied with a forward slash to indidicate the closing).
Why do we use attributes in HTML elements?
- Attributes provide additional information about the contents of the element like language of the content.
Describe the purpose of the head, title, and body HTML elements. -Head: Information about the page rather than what is in the body of the page. -Title: Information about the page shown on top of the browser pr on the tab for that page. -Body: Everything that is shown in the main body of the browser window.
In your browser (Chrome), how do you view the source of a website? -View > Developer > View Source
List five different HTML elements and what they are used for.
- h1 is main headings element and is used for creating a main heading on a webpage.
- h2 is a sub headings element and is used for creating a sub heading to your main heading on a webpage.
- b is the bold element and allows you to visually see the content in it as bold.
- i is the italtic element and allows you to to visually see the content on a webpage as italic.
- u is the underline element and allows you to viually underline content.
What are empty elements? -HTML elements with no content and can be closed in the opening tag
What is semantic markup? -Add extra information to a webpage to allow for other programs or search engines.
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements. -nav, article, aside
CodePen HTML Link: https://codepen.io/pvinthemix/pen/yqXywj
Day 2
There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- Ordered lists are lists in numberical order
- Unordered lists are lists that just have bullet points
- Definition lists are sets are terms with the correlating definitions next to them.
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?
- The target attribute target="_blank">
How do you link to a specific part of the same page?
- Use a relative URL using the folder name
What is the purpose of CSS?
- CCS allows you to create rules that specify how the content of an element should appear
What does CSS stand for? What does cascading mean in this case?
- Cascading Style Sheets. Cascading means that there are more than one style sheet working on the same piece of HTML and one of them will take precedence
What is the basic structure of a CSS rule?
- It cointains 2 parts: a selector which indicates which element the rule applies to and a declaration which declares how it should be styled (a property and a value).
How do you link a CSS stylesheet to your HTML document?
- Using external style sheet, internal style sheet, and inline style
When is it useful to use external stylesheets as opposed to using interal CSS?
- When building a site with more than one page because it allows all the pages to use the same style rules rather than repeating them on each page, keeps the content separate from how the page looks, means you can change the styles used across all the pages by altering just one file rather an individual files.
Describe what a color hex code is.
- A color hex code is a way of specifying color using hexadecimal values. The code itself is a hex triplet, which represents three separate values that specify what types and shades of red, green, blue are to be used.
What are the three parts of an HSL color property?
- Hue, Saturation, and Lightness. Represented by respectively as an angle, a percentage, and percentage.
In the world of typeface, what are the three main categories of fonts? What are the differences between them?
- Serif: more detail at the ends of the letters
- Sans-Serif: straight ends at the ends of the letters
- Monospace: all the letters are the same font
When specifiying font-size, what are the main three units used?
- Pixels
- Percentages
- EMS
Day 3
If you're using an input element in a form, what attribute controls the behavior of that input?
- The 'type' attribute controls the behavior of the input element
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?
- the submit attribute
What element is used to group similar form items together?
- The fieldset attribute
Describe the differences between border, margin, and padding. -Every box has a border, the borders seperate one box from the other. Margins are the space between between 2 boxes which can be adjusted. Padding is the space between the border and the stuff inside the box.
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
- top, right, bottom, left
Describe the different between block-level and inline elements.
- An inline element does not cause a linke break and does not take up the full width of a page, only the space bounded by its opening and closing tag. A block level element always starts on a new line and takes up the full width of a page from left to right. Inline uses and block level uses .
What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
- Keeping a box at the same position no matter where you go on a page. The z-index is important because it gives ranking order to what box goes in front of one another and you do not want the fixed position box to go in front of something to where you cannot read it.
What is the difference between a fixed and liquid layout?
- Fixed layouts are where the width of the entire page is set with a specific numerical value. A liquid layout is based on percentages of the current browser window and adapts to it's size.
Day 4
In an image element, why is the alt attribute important?
- If for some reason the image does not show up it will give a description of what was supposed to be there. It also allows people using screen reader software to understand what is there.
What determines if an image element is inline or block?
- If the image sits on a new line it is a block element. If the image sits on the same line it is an inline element.
What are the benefits of jpg or png image file formats?
- JPEG is better for images with lots of colors, while PNG should be used for images that have diagonal or rounded edges or a drop shadow.
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
- Using CSS to adjust the height and width of an image allows the page to load more smoothly because it can render the other parts of the page based on the width
What is an image sprite, and why is it useful?
- An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates a lot of requests. If you use a sprite, it will reduce the number of requests and help the page load faster.
Day 5
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
- Numbers - Are numerical values represented in Javascript either integers or non whole numbers
- Strings - Are a sequence of characters that are treated as objects and used to represent text. They need to be enclosed in quotes.
- Boolean - a data type that has two values usually true or false or yes or no
What are the three logical operators that JavaScript supports?
- and, or, and not
What is the naming convention used for variables?
- can be any word that is not a keyword, digits can be part of it but it cannot start with a digit, and cannot have punctuation other than $ and _.
What is the difference between an expression and a statement?
- An expression becomes a value and a statement is similar to a command that does not become a value.
What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
- var, return, null, new, function...they have special meanings in javascript and cannot be used as variables, labels, or function names or they will produce unwanted results.
What is control flow, and why is it useful for programming?
- Enables javascript programs to make decisions by executing code based on some condition in order of whatever you set it.
myNewString Before you hit Enter, what do you expect to see in the console?
- Hello Turing
var myNum = 9; myNum Before you hit Enter, what do you expect to see in the console?
- 9 var anotherString = "How are You?" "Connect" + " " + "these" + " " + "strings." What happened? This is called string concatenation. Notice the strings with spaces.
- They combined
myNewString + anotherString This is also string concatenation using variables. 5 > 3 returns a boolean value of true. How could you change this expression to return false?
- 5 < 3
"2" === 2 and "2" == 2 Why does one of those expressions return true and one return false?
- Because one is looking for strict equality and one is a string and one is a number
if (8 < 9) {console.log("Hey!")} Before you enter this code in the console, what do you think will happen? Will it log Hey to the console?
- The statement will produce a hey. Yes.
Write an if/else statement where the code in the else block is executed. For example: if (3 < 1){console.log("if block")} else {console.log("else block")}
- if (3 > 1){console.log("Hello")} else {console.log("Goodbye")}
Day 6
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 a function that can be re-used anywhere in the program when called upon using the function()
What is the keyword return used for?
- The return keyword is used to end a functions execution and specifies a value to be returned to the function caller.
What are function parameters?
- They are variables listed as part of the function definition used to define the function.
What is the naming convention used for function names?
- Use camelCase when naming a function with the first word in lowercase and the second word in upper case.
Day 7
- Psychology - What do they expect when they click this?
- https://www.facebook.com/ - The facebook sign up page is very straightforward in letting the user know what they should expect upon signing up which is to be connected with friends and family and be able to share information with them.
- https://www.facebook.com/ - At the same time facebook doesn't do a great job at telling the user exactly all the detail that will be at their finger tips. They could do a better job at letting you know what you are really getting into once you sign up via their intro page.
- Usability - Have you provided everything the user needs to know?
- www.amazon.com - The amazon product page gives you all the information you need about the product on one page. Specs, reviews, shipping speed...etc. There is no need to navigate to another page. Everything is streamlined.
- www.ebay.comn - The ebay product page user experience provides too much information. The experience can vary based on the seller leaving you sometimes needing more information.
- Design - Does the design lead the user’s eyes to the right places? How do you know?
- www.netflix.com - The netflix website directs the users in the right direction based on previous viewing habits and stuff they make be interested in. There is very little effort when using the website in selecting what you will watch for the next several hours.
- https://denver.craigslist.org/ - While simple and effective. The craigslist website doesn't particularly lead the users eyes to one particular place since there are so many options.
- Copywriting - Does it inform the user or does it assume that they already know what its about?
- www.craigslist.com - Once again, craigslist assumes you know how to use it. It doesn't really promote itself anywhere as a classifieds site. If it was your first time using the site you pay be really unsure as to what it is. There are not many instructions and the simple tables of listings lead you to believe you should know exactly how to use it.
- www.google.com - Google also goes for a simple approach, but because it is a search engine it works. There is only one place to type and move forward from their homepage. They assume you already know how to us it.
- Analysis - Do you know why users do that, or are you interpreting their behaviour?
- www.amazon.com - Amazon uses data from clicks to promote and interpret users behavior. This allows users to spend less them searching for what they want when they are confronted with shopping history data recomendations. Their goal is to get people to purchase more items in these instances.
- https://www.yelp.com/ - Provides lists of restaurants or services in order. They know that customers come to their website looking for this and provide it in easy fashion based on other people's reviews. People then use this information to make their own selections of where to go and what services to use.