Skip to content

Instantly share code, notes, and snippets.

@hsanchez7934
Last active April 28, 2017 00:27
Show Gist options
  • Select an option

  • Save hsanchez7934/767ea3828f0edf3a551adf2efb870aac to your computer and use it in GitHub Desktop.

Select an option

Save hsanchez7934/767ea3828f0edf3a551adf2efb870aac to your computer and use it in GitHub Desktop.
HectorSanchez_Prework
#DAY 1 CHAPTERS 1 & 2
On a website, what is the purpose of HTML code?
HTML code is a standard for descrbring the stucture and presentation of information of a web page.
What is the difference between an element and a tag?
Tags are characters that sit inside angled brackets. They act like containers and tell you something about the information
that lies between them. These containers are elements. Each HTML element tells the browser something about the information
that sits between its opening and closing tags.
Why do we use attributes in HTML elements?
We use attributes to modify the default functionality of an element or to provide functionality to certain element types
that that would be unable to correctly without them.
Describe the purpose of the head, title, and body HTML elements.
The body element contains what will be shown in the main browser. The head element contains information about the page.
The title element is contained within the head element. The contents of the title element are either shown in the top of the
broswer or the URL of the page you want to visit.
In your browser (Chrome), how do you view the source of a website?
You look at the URL address.
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.
<h></h> tags: The <h></h> tags are used to contain text that is to be used as headings. The importance of the subject matter determines which
h tag to use. H1 being the most important down to h6 being the least important.
<section></section> tags: The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
<div></div> tags: the <div> tag is used to group block-elements to format them with CSS.
<article></article> tags: the <article> tag represents a self-contained composition in a document, page, application, or site, which is intended to be independently
distributable or reusable (e.g., in syndication).
<img> tags: the <img> tag is used to contain the an image in a web document.
What are empty elements?
These elements are called empty or void and only have a start tag since they can't have any content. They must not have an end tag in HTML.
What is semantic markup?
Semantic markup is the use of a markup language such as HTML to convey information about the meaning of each element in a document through
proper selection of markup elements, and to maintain complete separation between the markup and the visual presentation of the elements
contained in the document.
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> <header> These new elements were created to help web page authors to describe the structure of the page.
#DAY 2 CHAPTERS 3 & 4
1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
<ol> tag is used to define that a list will be numbered in order from 1 to however many items the list has.
<ul> tag is used to define that a list will have bullet points. No specific order is established.
<li> tag is used to contain the content that the list will contain. Each <li> is a line contained within a <ul> or <ol> list.
2. What is the basic structure of an element used to link to another website?
The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
3. What attribute should you include in a link to open a new tab when the link is clicked?
The target attribute should be used within the <a> tag and it should have a value of _blank. This allows
the link to open in a new window.
4. How do you link to a specific part of the same page?
When linking to a specific part of the same page, you can reference the id attributes of the elements that you want to link
to. Within the <a> tag, you use the # followed by the name of the id attribute of the element that you want the link to.
######CHAPTERS 10, 11, & 12.
1.What is the purpose of CSS?
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language.
2. What does CSS stand for? What does cascading mean in this case?
CSS stands for Cascading Style Sheets. "Cascading" means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to be used on one HTML document.
3. What is the basic structure of a CSS rule?
You specifiy the element that you want to target, via element name, id, or class. Then follow with opening and closing curly
brackets. e.g. h1 {}
4.How do you link a CSS stylesheet to your HTML document?
<link href="style.css" type="css/text" rel="stylesheet">
href specifies the path to the CSS file. Type specifies the type of document being linked to. rel specifies the relationship
between the HTML page and the fil it is linked to.
5.What is it useful to use external stylesheets as opposed to using interal CSS?
It is much more useful to use externa stylesheets because you can organize your code better. You can use one file to control presentation, one to control layout. It can get hectic and it can be difficult to read and understand css code if it is all used in an internal style tag within an html page.
6.Describe what a color hex code is.
A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications to represent colors. The bytes represent the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation.
7.What are the three parts of an HSL color property?
An HSL color value is specified with: hsl(hue, saturation, lightness). Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
8.In the world of typeface, what are the three main categories of fonts? What are the differences between them?
Serif: have extra details n the ends of the main strokes of the letters. These details are known as serifs.
Sans-serif: Have straight ends to letters and therefore have a much cleaner design.
Monospace: every letter in a monospace font is the same width.
9.When specifiying font-size, what are the main three units used?
pixels: commonly used because they allow web designers very precise control over how much space their text takes up.
percentages: the default size of text in a web beroswer is 16 pixels. Using percentages of this amount, you can create a
scale where the default text size is 12 pixels, and headings are sized in relation to this.
ems: ems allow you to change the size of text relative to the size of the text in the parent element. Since
the default size of text in web browsers is 16 pxs, you can use similar rules to those shown for percentages.
#DAY 3 CHAPTER 7
1. 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.
2. What element is used to create a dropdown list?
the <select> tag
3. 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. the submit button is used to send a form to the server.
4. What element is used to group similar form items together?
The <fieldset> element is used to group related form controls together.
######CHAPTERS 13 & 15
1. Describe the differences between border, margin, and padding.
border: The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color.
margin: The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left.
padding: The padding property sets the padding space on all sides of an element. It is a shorthand to avoid setting each side separately (padding-top, padding-right, padding-bottom, padding-left).
2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
1 refers to the top, 2 refers to the right, 5 refers to the bottom, and 10 refers to the left.
3. Descirbe the different between block-level and inline elements.
block-level elements stack up on top of each others, horizontally. inline elements line up next to each other.
4. What is the role of fixed positioning, and why is z-index important in the scenario of using foxed positioning?
This is form of absolute positioning that positions the elemtn in relation to the browser window, as opposed to the containing element. Elements with fixed positioning do not affect the position of surrounding elements and they do not move when the user scrolls up or down the page. When you move any element from normal flow, boxes can overlap. The z-index property allows you to control which box appears on top.
5. What is the difference between a fixed and liquid layout?
Fixed width layout deigns do not change size as the user increases or decreases the size of their browser window.
Measurements tend to be given in pixels. Liquid layout designs stretch and contract as the user increases or decreases the size of their browser window. They tend to use percentages.
#DAY 4 CHAPTER 5
1. In an image element, why is the alt attribute important?
The image element is used to contain an image that will be displayed on a web page. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
2. What determines if an image element is inline or block?
If the image is followed by a block level element then the block level element will sit on a new line after the image. Inline elements sit within a block level element and do not start on a new line.
3. What are the benefits of jpg or png image file formats?
Whenever you have many different colors in a picture you should use a JPEG. A photograph that features snow or an overcast sky ight look like it has large areas tha tare just white or gray, but the picture is usually made up of many different colors that re subtly different. When a picture has an area that is filled with exactly the same color, it is known as flat color. logos, illustrations, and diagrams often use flat colors. Use PNG of gif format when saving images with few colors or large areas of the same color.
######CHAPTER 16
1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
Specifying image sizes helps pages to load more smoothly because the HTML and CSS code will often load before the images, and telling the browser how much space to lave for an image allows it to render the rest of the page without waiting for the image to download.
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 multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.
#DAY 5
1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
Numbers: number data, integers and decimals.
Strings: contain letters or number, they're wrapped inside of quotation marks. single or double.
booleans: true or false.
2. What are the three logical operators that JavaScript supports?
&& and || or ! not
3. What is the naming convention used for variables?
Declare the var keyword, followed by the name of the variable, followed by the value assigned to that variable, ended by a semi-colon.
e.g. var sum = 1 + 2;
4. What is the difference between an expression and a statement?
An expression is any valid set of literals, variables, operators, and expressions that evaluates to a single value. The value may be a number, a string, or a logical value. Conceptually, there are two types of expressions: those that assign a value to a variable, and those that simply have a value.
A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.
5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
class, continute, debugger,function, final, if, else, return. They cannot be used as variable names because the they can be intrepeted in the incorrect manner.
6. What is control flow, and why is it useful for programming?
Control Flow is a fundamental concept in programming that allows you to dictate how your code runs under different conditions or until a certain condition is met.
#DAY 6
1. If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
By entering sayHello, the console will give us back the function itself. By entering sayHello(), we are actually calling the function and it will return to us the statement within the function, which is "Hello!"
2. What is the keyword return used for?
The return keyword is used to give us a value that we the function to return.
3. What are function parameters?
Parameters are used when you need to pass in arguments that are needed in order for the function to return a value.
4. What is the naming convention used for function names?
The function name should correlate with what the function's purpose is. e.g.
function sum(x,y) {
return x + y;
};
this function returns the sum of x and y, it is called sum because it is a function that returns a value which is the sum of x and y.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment