Link to CodePen work: https://codepen.io/emeldrum/pen/MdMNZO
Day 1
HTML and CSS Chapters 1 and 2: Structure and Text
On a website, what is the purpose of HTML code? HTML is used to give structure to the contents of a web page.
What is the difference between an element and a tag? Sometimes the terms are used interchangeably, but more accurately, an element consists of an opening tag, a closing tag, and all the content contained by the tags.
Why do we use attributes in HTML elements? Attributes provide additional information about elements. Each attribute has a name and a value. For example, an element might have an attribute named class, with a value of "intro" to distinguish the intro paragraph from other paragraphs.
Describe the purpose of the head, title, and body HTML elements. The "body" element contains everything that is shown in the main browser window. The "head" element contains information about the page that is not shown on the page. The "title" element appears in the title above the URL bar, or in the window/tab header.
In your browser (Chrome), how do you view the source of a website? Ctrl-click (or right-click) and select "View page source"
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. 6 different levels of headers h1-h6, each progressively smaller. = bold, = italics, = superscript, = subscript, = list item,What are empty elements? Empty elements do not have a closing tag, only an opening tag. Examples would be br/, a line break, or hr/, a horizontal rule.
What is semantic markup? Elements that don't affect the structure or content of text, but provide extra info about the text, often to help programs such as search engines or screen readers to work better.
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements. Header, footer, nav, article, aside (these all used to be div class="article" etc., in previous versions of HTML.
Day 2
HTML and CSS Chapters 3 and 4: Lists and Links
There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences? Ordered = numbered lists. Unordered = bullet points. Definition lists: lists of terms to be defined and definitions to match.
What is the basic structure of an element used to link to another website? a href="URL" (full URL, including HTTPS) >TextYouWantToAppearAsHyperlink</a.
What attribute should you include in a link to open a new tab when the link is clicked? target="blank" (with an underscore in front of the word "blank") inside the opening tag for a link element will open a new tab.
How do you link to a specific part of the same page? First you need to use the ID attribute to identify points in the page you can link to. Then, use the href attribute with a # in front of the value. a href="top_of_page"
HTML and CSS Chapters 10, 11, and 12: What is CSS, Color, and Text What is the purpose of CSS? CSS allows you to make your webpage look better by creating rules for how the contents of various elements should appear.
What does CSS stand for? What does cascading mean in this case? Cascading - means that, like a waterfall, the rules flow downhill. Any rule you create will apply to all elements in the page unless superseded by something below it.
What is the basic structure of a CSS rule? selector {property: value;...} <---everything inside the curly braces is called the "declaration"
How do you link a CSS stylesheet to your HTML document? link href="css/styles.css" type="text/css" rel="stylesheet /> The first "css" in the "css/styles.css" refers to a directory named css, and styles.css is a css file saved within that directory.
When is it useful to use external stylesheets as opposed to using interal CSS? Almost always! There are very few cases where it's beneficial to use internal rather than external CSS.
Describe what a color hex code is. A color hex code uses six digits to represent values (between 0 and 256) for red, green and blue.
What are the three parts of an HSL color property? Hue, saturation (amount of gray), and lightness (amount of white and black).
In the world of typeface, what are the three main categories of fonts? What are the differences between them? Serif - has small lines at the top and bottom of most characters, to facilitate reading long passages of relatively small text. Sans-serif - does not have serifs. Monospace - every character takes up the same width (as in Courier New).
When specifiying font-size, what are the main three units used? Pixels, percentages (based on 16px font), or ems (a decimal based on the width of the letter m in 16px font)
Day 3
HTML and CSS Chapter 7: Forms
If you're using an input element in a form, what attribute controls the behavior of that input? input type="text"
What element is used to create a dropdown list? select name="gender", for example
If you're using an input element to send form data to a server, what should the type attribute be set to? input type="submit"
What element is used to group similar form items together? fieldset>AllElementsInField<fieldset/
HTML and CSS Chapters 13 and 15: Boxes and Layout
Describe the differences between border, margin, and padding. Border = separates the edge of one box from another. Margin = space between the outside edge of the border and the next box. Padding = space between the text and the border within a box.
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to? 1px=top, 2px=right, 5px=bottom, 10px=left.
Describe the difference between block-level and inline elements. Block-level = each element appears on its own line. Inline = elements continue one after another on the same line.
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 relative to the browser window. Sometimes this causes elements to overlap, which is why the z-index is important. It specifies which element should appear in front.
What is the difference between a fixed and liquid layout? Fixed layouts do not change as the user changes the browser window size. Liquid layouts expand or contract to fill the space of a browser window.
Day 4
HTML and CSS Chapter 5: Images HTML
In an image element, why is the alt attribute important? The alt attribute is important because it describes the image in a way that can be understood by search engines, screen readers, and other software.
What determines if an image element is inline or block? If the image element is followed by a block level element, the block level will appear on a new line. If the image is within a block level element, it will appear inline.
What are the benefits of jpg or png image file formats? JPEGs are best for photographs or other images that show many different shades and colors - the subtle differences between colors will be more visible. PNGs are better for illustrations or logos that use just a few colors, especially flat colors.
HTML and CSS Chapter 16: Images CSS
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? It helps the page load more smoothly - the code will load before the images, and the browser won't have to wait for the images to load before rendering the rest of the page. It will already leave room.
What is an image sprite, and why is it useful? A sprite is a single image that is used for several different parts of an interface. For example, a button image sprite may have multiple versions of the button on one image (hover, click, etc.)
Day 5
JavaScript & jQuery Chapter 2: Statements, Variables, Data Types & Arrays
How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript? To declare a variable, you use the keyword var and the name you want to give it: var lastName = . The equals sign is called an assignment operator. It is used to assign values to the variable (tells the variable what info to store).
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are. Numbers are any kind of numerical data (can include negatives and decimals, which are called "floats" in JS). Strings are letters and characters, such as names or county. Booleans are true/false data.
What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?
- Var names must begin with a letter, $ or underscore. Cannot start with a number.
- Can contain letters, numbers, dollar signs, or underscores. No dashes or periods.
- No keywords or reserved words. Here's a list of reserved words and keywords: abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface let long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var void volatile while with yield.
- Variables are case sensitive, but it's bad practice to create two variables of the same name, just with different cases.
- Variable names should describe the data they're storing.
- If the var name is more than one word, the first word should be lowercase, and every word after that should be capitalized.
How can an array be useful when dealing with multiple related values? How do you access/change a value in an array? Arrays are useful for lists or sets of values that are related, especially when you don't know how many values the list or set will hold. To access or change a specific value, you would use the variable name, followed by the index number in square brackets.
What is the difference between an expression and a statement? Statements are any kind of specific instructions that a computer can follow. Expressions are a specific type of statement that use one or more operators to combine multiple variables into one.
What are three types of operators and how are they used? Assignment operators = assigns a value to an operator. Arithmetic operators = perform basic arithmetic operations. String operators = combines two strings. Comparison operators = compares two values and returns true or false (i.e., 3>4 would return false) Logical operators = combines expressions and then returns true or false.
Day 6
JavaScript & jQuery Chapter 3: Functions & Scope
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 would tell you what the function sayHello is defined as, whereas sayHello() actually calls the function.
What is the difference between function parameters and arguments? Parameters are the information the function needs to work. The parameters are included in parentheses after the name of the function when the function is declared. The parameter information needs to be included inside the curly braces of the function, and they are used like variables. Arguments are the specific values the function should use in a specific instance of calling the function, rather than in every instance.
What is the keyword return used for? Return is used to return a value to the code that called 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 require less memory than global variables, and they can be easier to test and debug. They run into fewer naming collisions. A global variable might be advantageous in a circumstance where multiple functions have to call the same variable, and the variable is constant and unchanging, but in general, it's best to avoid global variables.
