Click here to find my technical prework codepen
1. On a website, what is the purpose of HTML code?
HTML code provides the structure to the content of a website. It tells the browser how to display the text.
2. What is the difference between an element and a tag?
An element consists of two tags and a piece of text or content while a tag is only a part of the element which tells the browser how to display the content in the element.
3. Why do we use attributes in HTML elements?
Attributes tell the browser additional information about the text such as the language of the text or any other information you want to provide about the text or content.
4. Describe the purpose of the head, title, and body HTML elements.
The Head contains information about the page but is not displayed in the body of the browser window. The Title shows up in the top bar or tab of the browser and is contained within the Head. The Body contains the text and markup that shows up in the browser window. It is the content of the webpage.
5. In your browser (Chrome), how do you view the source of a website?
If you 'right click' you can click on view page source and it will appear in a new window or tab. (or go to view>developer>view source from the chome menu bar.)
6. 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 to denote the main heading of a web page (increasing the number up to 6 will get you smaller and smaller headings).
- <em></em> will put an emphasis on the text and will typically appear as italicized. This is a semantic element.
- <s></s> will put a line striking through the text within the element.
- <blockquote></blockquote> denotes that the text is a quotation. It is typically used for longer quotations and will indent the text in most browsers (although that is not its main job as it is semantic element). It can also contain additional information about the quote.
- <sup></sup> and <sub></sub> will add superscript and subscript such as the 4th of July or H2O.
7. What are empty elements?
Empty elements are elements that do not contain content and are typically only one tag. They are used to add a structural element to the space rather than the text. for example the tags used for images or a line break.
8. What is semantic markup?
Semantic markup is not used to add structure to the text but rather to add meaning and extra information for the web browser (although they do sometimes add structure such as blockquote or em). Semantic markup can be very helpful to text reading software.
9. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
aside, footer, and article are three new HTML 5 semantic elements.
1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?An ordered list is a numbered list. You can use an attribute to tell the browser what type of numbers to use (numbers, roman numerals, letters, etc.) but this is better to do with CSS. An unordered list is a bullet pointed list. A definition list is a list of terms with a definition below the term.
2. What is the basic structure of an element used to link to another website?
You would use the "a" tag with the href attribute with the full URL to link to an outside website. For example:<a href="turning.io">Turing</a>.
3. What attribute should you include in a link to open a new tab when the link is clicked?
You should use the target attribute with the value of _blank.
4. How do you link to a specific part of the same page?
To link to a specific part of your page you first need to assign an id attribute to the point on the page where you want to link to. from there you create the linked text using the a element with the href attribute with a value of the id that you added before with a # symbol before the attribute value.
1. What is the purpose of CSS?The purpose of CSS is to give your website some style without having to style every individual HTML element.
2. What does CSS stand for? What does cascading mean in this case?
CSS stands for Casscading Style Sheets. Casscading in this instance means that when you create a CSS rule for an element it will roll down to all of the folders for your website.
3. What is the basic structure of a CSS rule?
selector, selctor2 {declaration property: declaration value; declaration 2 property: declaration 2 value;}
4. How do you link a CSS stylesheet to your HTML document?
To link to a CSS stylesheet you would use the Link element (an empty element) with the attributes of href (the path to find the stylesheet), type (specifies the type of document you are linking to), and rel (specifies the relationship to the HTML document). This element would live in the Head element of your HTML Document.
5. When is it useful to use external stylesheets as opposed to using interal CSS?
It is useful to use external stylesheets when your webpage has more than one page. This will mean that you do not need to repeat the style formatting in each HTML page or change it for every page should the style change in future.
6. Describe what a color hex code is.
A hex code is a six diget code that is preceded by a hash tag symbol # that denotes a specific color. The six digets specifiy how much red, green, and blue should appear in a color.
7. What are the three parts of an HSL color property?
Hue, Saturation and Lightness (or Luminosity). Hue (or color) is represented as a number from 0 to 360 which will indicate an angle which corisponds to a position on a color wheel. Saturation is the amount of gray in the color and is represented by a presentage from 0% (no color, only grey) and 100% (no grey, only color). Lightness is the amount of white or black in a color and is represented by a presentage from 0% (no white and would show as black) and 100% (all white), with 50% being 'normal'.
8. In the world of typeface, what are the three main categories of fonts? What are the differences between them?
Serif, which has an extra little flair to the ends of the letters; Sans-Serif, which has straight ends to the letters providing a clean design; Monospace, which has a fixed width for the letters so every letter has the same width.
9. When specifiying font-size, what are the main three units used?
pixels (px), Percentages, EMS (which is equivalent to the width of a letter m).
1. If you're using an input element in a form, what attribute controls the behavior of that input?The Type attribue.
2. What element is used to create a dropdown list?
The select element is used to create a dropdown box.
3. If you're using an input element to send form data to a server, what should the type attribute be set to?
It would depend on what kind of information you are gathering. If you want them to fill in information such as their username then the type would be set to "text" (or possibly "password"). If you want them to select a piece of informaiton from pre-determined choices, then the type would be either "checkbox" or "radio".
4. What element is used to group similar form items together?
The Fieldset element is used to group similar items together on a form.
1. Describe the differences between border, margin, and padding:The border is the line that surrounds a box while the margin is the space outside of that border to the edge of the box and the padding is the space between the content of the box and the border.
2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
The top would be 1px, the right side would be 2px, the bottom 5px and the left 10px.
3. Describe the difference between block-level and inline elements:
Block-level elements start on a new line and inline elements flow in between the surrounding text.
4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Fixed positioning allows an element to maintain a fixed position on the page regardless of how the other elements in the containing block element are scrolled or viewed. The z-index insures that you can bring the fixed element to the "top" visually so the other elements would move behind it and text visibility would be maintained.
5. What is the difference between a fixed and liquid layout?
A fixed layout has a set pixel width for the page, regardless of where the page is being viwed. A liquid layout will change to fill the space on your browser window regardless of the size of monitor or device screen.
1. In an image element, why is the alt attribute important?
The alt attribute is important for two reasons. First if the image is not able to load, the alt text will show, describing what was supposed to be seen. Secondly, screen reading software will use the alt text to help the visually impaired understand your site.
2. What determines if an image element is inline or block?
Typically an image element is an inline element but can be treated as a block element by using the display property in CSS. Also, more simply, an image element that is placed outside of a block element (so above a p for example) will appear as a block element.
3. What are the benefits of jpg or png image file formats?
jpg images are good if there are many variations in color. IF the image is one color (or simple blocks of color), a png image is more appropriate.
1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
Using CSS will allow you to only add the dimentions once in CSS for each size of image, rather than ensuring that every image has the right size. If the sizes ever change, you will only need to change it once.
2. What is an image sprite, and why is it useful?
An image sprite is when a single image is used for several different parts of an interface like a button or link. This makes the button or link change appearance from when it is first visable, to when the user is hovering over it to when the user clicks it. An image sprite is useful because the web browser only needs to request one image rather than many images which can load faster.
1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
Numbers are, well, numbers. They are a numberical value and are written without any quatation marks. There are two special numbers which are Infinity (inlcuding both + and - infinity) and NaN which stands for "Not a Number" Strings are used to represent text and are written between two quotation marks. You can use either " or ' but must start and end with the same mark. A numberical value written between two quotation marks would be a string in most cases. Booleans are just two values: True and False. They are used to distinguish between two possibilities like yes and no or on and off.
2. What are the three logical operators that JavaScript supports?
"And" (written like &&), which is true only if both values are true; "Or" (written like ||), which is true if either of the values given to it is true; "Not" (writen like !) and this operator flips the value given to it so !true would be false and !false would be true.
3. What is the naming convention used for variables?
A variable can be any word that is not already a keyword and is written simply as that word. If your variable name has more than one word in it, there are three ways to write it. For example the variable which you want to call "My Red Boat" could be written myredboat, my_red_boat, or myRedBoat. The third way is most common and it is best to stick with one nameing convention within your program.
4. What is the difference between an expression and a statement?
An expression is basically a value which can be written out simply as a value or as a fragment of code that produces a value. A statement is made up of expressions and is only really useful if it, in someway, changes the world (whether that is simply displaying something on the screen or changing the internal state of the machine).
5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
var, break, for, null, alert, while are all examples of words that are keywords and should not be used as variable names. It is important to avoid these as they already have meaning within JavaScript and could disrupt the statement's function (break your program).
6. What is control flow, and why is it useful for programming?
Control Flow tells the program in which order to execute each statement. This can be important because, just like in mathmatics, if you do not do things in the correct order, you could get a drastically different result than intended.
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() you are calling the function and will get the result of that function. In this case that would be the console outputting Hello!. If you put in sayHello, with no parentheses, it will return the funciton itself.
2. What is the keyword return used for?
The return keyword causes the code to jump out of the current function and retun the value that function produced to the piece of code that called the function.
3. What are function parameters?
Function parameters act like variables but their initial values are given by the caller of the function, no tthe code in the function itself.
4. What is the naming convention used for function names?
The nameing convention for function names is typically the same as for variables. A function can be any word that is not already a keyword and is written simply as that word. If your function name has more than one word in it, there are three ways to write it. For example the function which you want to call "My Red Boat" could be written myredboat, my_red_boat, or myRedBoat. The third, called camel case, way is most common and it is best to stick with one nameing convention within your program.
Psychology: How much work does the user have to do to get what they want?Montage book and Shutterfly are a good illustration of this. Both sites allow you to create a photo book using your own photos however they are very different experiences. Montage takes the user two clicks to start uploading photos to start a photo book. Shutterfly is more a more complicated site where the user must first find the book section, then decide if they want to make the book or have them make it for an extra fee, then decide on the "simple" or "custom" path if you make it yourself, then decide on the size and shape of the book, then the user can finally start uploadling photos. While both sites get you a book and might even take the same amount of steps to actually make the book, to start the process seems much more frustrating at Shutterfly.
Usability: Are you being clear and direct, or is this a little too clever? Vitals.com and Healthgrades.com, two medical provider review sites, are good examples of this. While Healthgrades has their search bar as the biggest most obvious thing, you actually have to click a second link on Vitals to get to their search area (or realize that the very dark bar at the bottom with hard to read text is a search bar). Vitals definitley has a 'cuter' look with an interesting looking page, but healthgrades gets to the point of the site much faster.
Design: Does the design lead the user’s eyes to the right places? How do you know?
Do a google search for "Owls" and you will find lots of sites, with allaboutbirds.com and theowlpages.com among them. All About Birds is a site which has a very visual design, immediately giving you images and giant arrows that invite your click to learn more about those types of owls. The Owl Pages on the other hand, gives you lots of text with some more cryptic symbols and too many links. While The Owl Pages might have more resources and information about owls in general, All About Birds is all about design. (sorry for that)
Copywriting: Does it reduce anxiety?
If you were to loose a button off your faveorite shirt and aren't real handy with a needle and thread you might look to the web to find out what to do next. If you run into the Real Simple article on how to sew a button, you will most likely have a calm time flipping through the slideshow that is clear and informative with short, simple steps on this repair. However, if you find the Guardian article first, you may start to stress out as you look at the wall of text and chaotic design of the site that refers to the rise of mending and gives you way to many options to match the other buttons!
Analysis: Are you looking for subjective opinions or objective facts?
While these two websites don't necessarily exemplify this question themselves, the advice they give does. When you do a search for Website design analysis, two sites that come up are Straightnorth.com and linchpinseo.com. The Straight North article gives you more general questions to ask such as "What category is my business, and is that obvious on my website?", a relatively subjective question. The Linch Pin SEO article on the other hand is really a straight yes or no question checklist giving you a more objective way to analyse your site. (Really both articles have a bit of both objective and subjective but I wasn't sure how to best illustrate this rather "behind the scenes" concept.)