CodePen: https://codepen.io/hljacobs/pen/zReoXG Day 1 - Chapters 1 & 2 On a website, what is the purpose of HTML code? HTML code makes up HTML elements which send a message to the browser and provide it with information. What is the difference between an element and a tag? Tags are placed on the outside of elements. The opening tags have a left and right angle bracket around characters. The closing tag also has a forward slash before the characters and after the left angle bracket. The characters between them are the element. Why do we use attributes in HTML elements? Attributes provide additional information about HTML elements. They are placed inside of the first tag of an element, right after the left angle bracket. Attributes contain 2 parts: a name and a value. The name lets the browser know what kind of information to expect. The value is the information and it is written in quotes. Describe the purpose of the head, title, and body HTML elements. The head contains information about the page, the title element contents are shown at the top of the browser (in tabs), and the body contains the content shown within the main browser window. In your browser (Chrome), how do you view the source of a website? Command + Alt + U is a short cut to view the source of a website. 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. The element is used to indicate that the content has strong importance. The element indicates emphasis that subtly changes the meaning of a sentence. The element is used the first time someone explains new terminology.What is semantic markup? A tag that provides extra information. For example, if there is a place where you want to emphasize something, or if you want to put something in quotations. What are three new semantic elements introduced in HTML 5? Three new semantic elements are , , and are all new semantic elements. The element specifies a header for a document or section. A element defines a set of navigation links. The element specifies independent, self-contained content. Day 2 - Chapters 3 & 4 There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences? In ordered lists, each item in the list is numbered. The numbering can indicate the chronological order of the content or could be used to indicate something else. Unordered lists are lists that contain bullet points. Definition lists are terms and definitions of these terms. What is the basic structure of an element used to link to another website? The basic structure is text the user clicks. What attribute should you include in a link to open a new tab when the link is clicked? You should include the href attribute. The value of the href is the page you are trying to go to. How do you link to a specific part of the same page? If the page you are linking to has id attributes that identify specific parts of the page, you can simply add the same syntax to the end of the link for that page. So the href atribute will have the address for the page followed by the # symbol, then followed by the value of the id attribute that is used on the element you are linking to. Chapters 10, 11 & 12 What is the purpose of CSS? CSS allows us to make our web pages better looking. It includes colors, layouts, and fonts. It keeps information in the proper display format. What does CSS stand for? What does cascading mean in this case? CSS stands for cascading style sheet. In this case, cascading means that styles can fall from one style sheet to another. This means multiple style sheets can be used on one HTML document. What is the basic structure of a CSS rule? A CSS rule contains two parts: a selector and a declaration. The selector is first and it declares which sector of HTML the rule will apply to. A declaration indicates how the element referred to should be styles. How do you link a CSS stylesheet to your HTML document? Using a element in an HTML document will tell the browser where to find the CSS file used to style the page. When is it useful to use external stylesheets as opposed to using interal CSS? It allows all the web pages to use the same style sheet so that the same code does not need to be repeated in every page. Describe what a color hex code is. They are six digit codes that represent the amount of red, green and blue in a color. They begin with a pound (#) sign. What are the three parts of an HSL color property? The three parts are hue, saturation, and lightness. In the world of typeface, what are the three main categories of fonts? What are the differences between them? Serif fonts, sans-serif fonts, and monospace are the three main categories. THe differences are the way they appear on the page. When specifiying font-size, what are the main three units used? The main three units used are pixels, percentages, and ems. Day 3 - Chapter 7 If you're using an input element in a form, what attribute controls the behavior of that input? The type attribute determines what kind of input they will be creating. What element is used to create a dropdown list? The element is used to create a dropdown list. It contains two or more elements. 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". What element is used to group similar form items together? The element is used to group similiar form items together. Chapters 13 & 15 Describe the differences between border, margin, and padding. Border separates the edge of one box from another. Margins sit outside of the border and the width of the margin can be set to create the desired gap between boxes. Padding can help the user read text more easily. The padding sits between the border and content. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to? 1px corresponds to the left, 2px to the bottom, 5px to the right, and 10px to the top. Describe the different between block-level and inline elements. An inline element causes a block-level element to act like an inline element. A block-level may contain inline elements, block level elements create "larger" structures than inline elements. Block-level elements start on new lines, but inline elements can start anywhere in a line. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning? Fixed positioning requires the position property to have a value of fixed. When a user scrolls down the page, it stays in the exact same place. Z-index controls which element sits on top, the number determines which element appears on top with the highest number on top. What is the difference between a fixed and liquid layout? Liquid layouts use percentages so that the layout designs will stretch or contract as the user increases and decreases the browser window. Fixed layout measurements are given in pixels, the layout design does not change size as the user increases or decreases the browser window. Day 4 - Chapter 5 In an image element, why is the alt attribute important? The alt attribute gives the user a text description of an image which describes the image if you cannot see it. What determines if an image element is inline or block? Images are block elements if they have a width and a height. Otherwise, they are inline elements that flow horizontally with text and other inline elements. What are the benefits of jpg or png image file formats? The differences have to do with the coloring of the pictures. JPEG should be used whenever there are many different colors in a picture. PNG should be used when images have few colors or large areas with one color. Chapter 16 What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? You can use CSS to control the dimensions of all the images instead of putting them in to HTML. You can give all the images of certain dimensions a name in HTML, and apply that to multiple images in CSS. It saves time. What is an image sprite, and why is it useful? Image sprites are a means of combining multiple images into a single image file for use on a website, to help with performance. Day 5 - JavaScript Chapters 1 & 2 There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are. The number data type contains a numeric value. When you enter in a numeric value, it causes the bit pattern for that number to exist in the computers memory. Strings store the data of text, the content can be enclosed in single quotes, double quotes, or backticks. Boolean values are values that are either true or false. There are operators that are used to determine if boolean values are true or false such as > < (greater than, less than), || stands for or, && stands for and. These operators help the computer determine if the boolean is true or false. What are the three logical operators that JavaScript supports? The three logical operators are and, or and not. The && operator stands for logical and. It will return true if both values are true. The || operator stands for logical or. It was also return true if both values are true. The ! operator stands for logical not, and again it will return true if both values are true. What is the naming convention used for variables? A naming convention is a set of rules for choosing the character sequence to be used for identifiers which denote variables, types, functions, and other entities in source code and documentation. What is the difference between an expression and a statement? An expression is a fragment of code that produces a value. A program in JavaScript is a list of statements. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names? Break, case, catch, class, import, void, switch, and yield are a few of JavaScript's reserved words. These words are reserved for other purposes and therefore cannot be a valid bonding name. What is control flow, and why is it useful for programming? Control flow describes the way a program is executed, which is from top to bottom. Day 6 - Chapter 3 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 call the function and output Hello! to the console. Entering sayHello without () will result in an error. What is the keyword return used for? Return statements cease execution in a function and return a value to the caller What are function parameters? Function parameters are the names listed in the function definition. What is the naming convention used for function names? Function names should be verbs if the function changes the state of the program, and nouns if they're used to return a certain value.