Open the prework gist you created earlier, and answer these questions about the reading in your gist:
On a website, what is the purpose of HTML code? The purpose is to tell the browser about the information that sits between the HTML elements. Or essentially provides some format and structure to basic text that the browser translates into a coherent webpage
What is the difference between an element and a tag? An element is a container and the tag is what comprises and forms said container.
Why do we use attributes in HTML elements? Attributes provide additional information and utility on the element, such as with links, forms, images, etc.
Describe the purpose of the head, title, and body HTML elements. They provide specific formatting to different areas of the webpage. Head provides information about the webpage and usually includes the title, Title will provide information to the top of a browser window and/or window tabs, and Body comprises what is displayed on the page itself.
In your browser (Chrome), how do you view the source of a website? By right clicking and selecting source, view source or inspect accordingly
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. Headings provide a way to control font sizing of the headings to different paragraphs, Paragraphs allow you to break up and cluster information neatly in chunks, Bold allows you to bring attention to specific words or phrases selectively, Italic also allows for a different way to bring attention to words or phrases, Break allows for a single line break (carriage return), Horizontal Rules (hr) inserts a line to divide information.What are empty elements? They are ones which usually do not contain information between two tags, and simply stand alone as a single tag. They would have a specific focus, like horizontal rules (hr).
What is semantic markup? Instead of changing the webpage, they offer contextual information like quotes and abbreviations to certain pieces of information on the webpage.
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements. header, nav, article, aside, etc.
TG_prework1 https://codepen.io/geet084/pen/pOgVga via @CodePen
Answer these questions about the reading in your prework gist:
There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences? Ordered lists are numbered, Unordered lists are bulleted, and Definition lists are similar to nested lists without either numbers or bullets to denote each item
What is the basic structure of an element used to link to another website? Google Home Page ...."a" tag including the absolute URL for the website, a meaningful name to this site, closing "a" tag
What attribute should you include in a link to open a new tab when the link is clicked? target = "_blank"
How do you link to a specific part of the same page? Go Back To Top...you use ID to name a section of the page in a heading, id="bottom", and then you create a link to it, href="#bottom".
Answer these questions about the reading in your prework gist:
What is the purpose of CSS? To improve the look or appearance of a website without the need to duplicate code across all HTML pages
What does CSS stand for? What does cascading mean in this case? Cascading Style Sheets. Styling is checked in a cascading fashion from generic to specific (sometimes top to bottom), being overridden as needed
What is the basic structure of a CSS rule? A selector and a declaration, within a declaration a property and value ... p { color: red; }
How do you link a CSS stylesheet to your HTML document? By using a link element and specifying where the CSS file is located...
When is it useful to use external stylesheets as opposed to using interal CSS? It is useful for whenever you have a website with more than one page, it allows for sharing of styles and less duplicated code
Describe what a color hex code is. They are a 6 digit code that begins with a # which represents 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
In the world of typeface, what are the three main categories of fonts? What are the differences between them? Serif, Sans-Serif, Monospace. Serif font includes extra details on the letters, Sans-Serif fonts do not have extra details and are cleaner in design, Monospace is a fixed width font style.
When specifiying font-size, what are the main three units used? Pixels, percentages, and EMS.
Answer these questions about the reading in your prework gist:
If you're using an input element in a form, what attribute controls the behavior of that input? The attribute TYPE controls what the input will actually be
What element is used to create a dropdown list? The SELECT element, rather than input
If you're using an input element to send form data to a server, what should the type attribute be set to? Submit
What element is used to group similar form items together? Fieldset
Answer these questions about the reading in your prework gist:
Describe the differences between border, margin, and padding. The border is the box around the content, margin is the spacing between that box and other boxes, and padding is the spacing between the content in the box and the box itself.
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to? Top is 1px, then right is 2px, then bottom is 5px, then left is 10px
Describe the different between block-level and inline elements. A block-level element has line breaks before and after the element, also taking up the full width of the page. An inline element does not have breaks and will only take up as much space as indicated by the tags used.
What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning? It allows you to take an element out of normal flow, letting it become its own block level element and the rest of the content would flow around it. Z-index would allow you to control which box appears on top when the element is taken out
What is the difference between a fixed and liquid layout? Fixed layouts do not change based on where it is viewed while liquid layouts accomodate the screen & settings on which they are viewed
Answer these questions about the reading in your prework gist:
In an image element, why is the alt attribute important? The alt element allows the user to know what the image was supposed to be if it does not load
What determines if an image element is inline or block? Where the image element is placed within the code: within a block element and it will be treated inline, outside a block element and it will be treated like a block
What are the benefits of jpg or png image file formats? Using JPG is better for full color range photographs while PNG is better suited to more monotone style pictures
Answer these questions about the reading in your prework gist:
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? It helps the page to load more smoothly, allotting space for the images before they load
What is an image sprite, and why is it useful? A sprite is a single image for an interface rather than multiple, and it is useful because it helps the web page to load faster
Answer these questions about the reading in your prework gist:
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are. Numbers are just numbers and be used to store values or do calculations, Strings can be anything but are only treated as text, and Booleans are true/false values typically used to check states of code or other things.
What are the three logical operators that JavaScript supports? Or (||), And (&&), and Not (!)
What is the naming convention used for variables? Bottom style, though I think camelcase is more known as the convention?
What is the difference between an expression and a statement? An expression typically produces a value while a statement is performs an action, generally speaking.
What are a few JavaScript reserved words, and why are they important to avoid using them for variable names? Var, char, new, this, if, else, etc. They are important to avoid for variable names because not only will the code not work properly, it will be confusing to look at as well.
What is control flow, and why is it useful for programming? Control flow is how the program runs, top to bottom, and is useful in that it details the order in which events will happen
Answer these questions about the reading in your prework gist:
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() will call the function and print out ..."Hello!"... on the console. depending on the program, sayHello may be a variable or may return as undefined.
What is the keyword return used for? It determines the value the function returns, thus after an if/else ladder or loop would return the correct value
What are function parameters? They are the names listed in the function definition, or what would be passed to the function on which it can execute
What is the naming convention used for function names? Camelcase with parentheses for passed variables: aFunctionNameLikeThis()
After you're done reading the third post, read through the each section of questions again: Psychology, Usability, Design, Copywriting, and Analysis. Choose one question from each of these sections (so 5 total questions), and find one site that is good at supporting that question, and find another site that violates that question.
Post links to the sites and brief descriptions in your prework gist.
- Psychology
How does this make them feel?
good: https://denver.craigslist.org/ Organized even with a lot of information present bad: http://arngren.net/ Unorganized and haphazard looking
- Usability
Are you being clear and direct, or is this a little too clever?
good: https://www.national.ca/en/ More straightforward in it's presentation bad: http://prismgirl.org/ Somewhat clever, harder to navigate
- Design
Do users think it looks good? Do they trust it immediately?
good: https://www.wsj.com/ Plain and yet simplistically appealing bad: http://www.berkshirehathaway.com/ Very plain, bordering on unhelpful
- Copywriting
Is it clear, direct, simple, and functional?
good: http://zervice.com/ Simple and uncluttered even with the animation bad: http://www.jamilin.com/ Cluttered and no real purpose is easily indentifiable
- Analysis
Are you looking for subjective opinions or objective facts?
good: https://www.cnet.com/ Generally get more solid reviews on products based on more scientific testing bad: https://www.facebook.com/ or https://www.yelp.com/ Get opinions based on what people believe *not bad per se, just more opinion than subjective fact