Day 1
- On a website, what is the purpose of HTML code? To layout the basic structure and content of the website, the skeleton of the web page.
- What is the difference between an element and a tag? Tags are used to begin and end an html element. An element describes the information between the opening and closing tags.
- Why do we use attributes in HTML elements? Attributes provide us with additional information about the content of an element.
- Describe the purpose of the head, title, and body HTML elements. The “head” element describes the information outside of the body of the webpage. The “title” describes the webpage which is displayed on the browser tabs above the URL or the title you read in a web search. The “body” element is used to contain the information that is to be displayed in the main body of the website.
- In your browser (Chrome), how do you view the source of a website? While using Chrome in the browser “menu” select view then “development” then “view source”.
- 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. <h1></h1> is used for large headings. <h5></h5> is used for smaller heading. <b></b> is used for bolding text. <i></i> is used for italic. <br></br> create a line break in the content of an element.
- What are empty elements? Elements without any content in them.
- What is semantic markup? Semantic markup provides extra information on the content in an element.
- What are three new semantic elements introduced in HTML 5? <header></header>, <nav></nav>, and <article></article> are all new semantic elements of HTML 5.
Here is the URL to My First Pen check it out for a bit of information about me. https://codepen.io/Clo4/full/JpNppm
Day 2
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences? Ordered lists use numbers to describe a list item. Unordered list use bullet points to start a list item. Definition lists use a term as the start of a list.
- What is the basic structure of an element used to link to another website? <a href="http://www.abcd.com"> ABCD </a>
- What attribute should you include in a link to open a new tab when the link is clicked? You need to include the "href" along with the absolute URL of the site desired to link to.
- How do you link to a specific part of the same page? This is accomplished by using the href code which is then accompanied by the relative URL. This link will connect you to another portion of the same site.
- What is the purpose of CSS? CSS allows you to create rules that specify how the content of an element should appear.
- What does CSS stand for? Cascading Style Sheets. What does cascading mean in this case? The rules cascade, so when there are two rules the later rule will take precedence.
- What is the basic structure of a CSS rule? CSS rule contains two parts a Selector and a Declaration. The Declaration is also made of two parts a Property and a Value.
- How do you link a CSS stylesheet to your HTML document? Within the Head tags at the beginning of your HTML code you will use a Link element to reference the CSS file you wish to use to style your HTML.
- When is it useful to use external stylesheets as opposed to using internal CSS? When you are building a site with multiple pages.
- Describe what a color hex code is. Hex codes are six-digit codes that represent the amount of red, green, and blue are in a color.
- What are the three parts of an HSL color property? Hue, Saturation, and Lightness are the three parts of HSL.
- In the world of typeface, what are the three main categories of fonts? What are the differences between them? The three main categories are Serif, Sans-Serif, and Monospace. Serif has extra detail on the end of the main strokes of the letter. It is considered to be easier to read and is often used for long portions of text. Sans-Serif has strait ends on the letters which is useful for low resolution and small text. Monospace font has text that are all the same width and align well, because of this it is often used for code as it is easier to follow.
- When specifying font-size, what are the main three units used? The Three units used are 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 is used to control the behavior of the input. Additional information may be used to specify parameters of the input requirements. Such as maxlength ext.
- What element is used to create a dropdown list? The “select” 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? The “type” attribute should be set to “submit”. This will send the form data to the server.
- What element is used to group similar form items together? You can group related form controls together inside the “feildset” element.
- Describe the differences between border, margin, and padding. Border separates the edge of one box from another. Margin sits outside the edge of the border, often used to create space between boxes. Padding is the space between the border of a box and the content contained within it.
- For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to? The padding will be set with the values provided in this order; top, right, bottom, left.
- Describe the different between block-level and inline elements. Block-level indicates that each element is to be listed on its own line. Inline elements will display the elements in a line one next to another.
- What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning? Fixed positioning positions the element in relation to the browser window and not the other elements. Fixed positioning also does not affect the other elements on the page as things move. Z-index allows you to determine when elements overlap which is on top of the other.
- What is the difference between a fixed and liquid layout? Fixed layouts have a set size that will not increase or decrease with the change of browser window. Liquid layouts will stretch and contract as the browser window adjusts in size.
Day 4
- In an image element, why is the alt attribute important? The alt attribute provides a description of the image and is visible if the image cannot be seen.
- What determines if an image element is inline or block? If the image element is placed outside of other elements then it will be treated as a block and have its own line on a page. If the image element is placed inside of an element it will be treated as inline and placed according to its position in the element.
- What are the benefits of jpg or png image file formats? jpg image files will store an image with many shades of color much better than a png. png image files are better for saving logos or images that are made of few colors. The image quality will be sharper and display crisper edges.
- What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? If you specify the size of an image in CSS it allows you to set the size of multiple images across a whole site.
- What is an image sprite, and why is it useful? An image sprite is an image that is used for several different parts of an interface.
Day 5
- There are three big data types in JavaScript: numbers, strings, and Booleans. Describe what each of them are. Numbers are numerical values, Strings are used to represent text, and Booleans are used for distinguishing between true and false.
- What are the three logical operators that JavaScript supports? The logical operators that JavaScript supports are “And, Or, Not”.
- What is the naming convention used for variables? To name a variable you will simply abbreviate variable to “var” then follow it with the desired name.
- What is the difference between an expression and a statement? A fragment of code that produces a value is called an expression. A statement is a full sentence in its entirety.
- What are a few JavaScript reserved words, and why are they important to avoid using them for variable names? A few reserved words are “var, break, case, catch, class, const, and debugger” to name a few. It is important to not use reserved words for variable names as this would cause an error in your code.
- What is control flow, and why is it useful for programming? Control flow is a set of instructions that determine the order of execution. It is useful in applications where you have undefined information that needs to be provided and used to further understand previously defined statements.
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? Entering sayHello will display the function sayHello, whereas entering sayHello() will instruct the function sayHello to run in the console.
- What is the keyword return used for? The keyword return is used to determine the value a function will return.
- What are function parameters? Parameters in a function behave like regular variables, but their initial values are given by the caller of the function, not the code in the function itself.
- What is the naming convention used for function names? A function definition is just a regular variable definition where the value given to the variable happens to be a function.
Day 7
- Psychology - Are you thinking of the user’s wants and needs, or your own? Lamborghini, The site makes you feel comfortable and happy to be where you are, emotional needs met which also align with companies. Yale University Art Page, This site is terrible, it makes you feel lost and confused. No one’s needs are met.
- Usability - Are you working with the user’s assumptions, or against them? Amazon, The site is intuitive and navigating could be done simply by someone who has never been to the site. Some nonsense, This site is confusing to use and is hard to interpret what is a link what is just text or how to use the site in general.
- Design - Does it communicate the purpose and function without words? Monster.com, The site uses words to display some functionality but most isn't directly explained but still works appropriately. A sales site or something, ... No, just no. I don't think there could be a poorer design.
- Copywriting - Does it reduce anxiety? Google Search, The site is simple, clean, and makes you confident that you are in the right location. Fences, If this site doesn't make your anxiety spike just a little then nothing will.
- Analysis - Do you know why users do that, or are you interpreting their behavior? Wells Fargo, It is clear what the users goal is when you first get on the site. I think its a power company in China, I think this website was made as an afterthought. They might have interpreted the users behavior wrong or not at all. Just seems like an info site.