On a website, what is the purpose of HTML code?
- Creates structure to the information we want on a webpage
What is the difference between an element and a tag?
- An element communicates to the browser that we have some sort of information we want the browser to comprehend and adds structure to the pages. The tags hold the information we wish to convey, and tell the browser when our information starts and ends.
Why do we use attributes in HTML elements?
- To describe more about the elements we are using. Attributes have names to describe the type of information is in the element, and values to give settings to the attributes.
Describe the purpose of the head, title, and body HTML elements.
- The head has information about the page, and usually contains the title element. The title is the name of your webpage that shows in the bar at the top of a website page. The body contains all the information that you want to show in the main browser window.
In your browser (Chrome), how do you view the source of a website?
Right click and select "View Page Source" to see the code that was used to create the website you are viewing 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.- body holds information that is located on the webpage itself
- h contains headings and subheadings
- p creates paragraphs with your text in the webpage
- sup all the the text within these tags will show on the webpage as superscript
- hr /, /hr / creates a break in the text and adds a horizontal rule
What are empty elements?
- An empty element consists of only one tag without any information within it. Usually, before the tag is closed there is a space and a forward slash.
What is semantic markup?
- These are elements that are meant to input more information about the text in your code. These elements are not to be used to structure a webpage.
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
- article, aside, section.
CodePen: https://codepen.io/cdallava/pen/RZvMgW
Day 2
There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- Ordered: a list where each item is numbered ol, li, li, ol
- Unordered: an item in the list starts with a bullet point ul, li, li, ul
- Definition: a list that contains both a term and the definition of that term dl, dt, dt dd, dd, dl
What is the basic structure of an element used to link to another website?
- a href=”link” TEXT /a
- The a tag communicates that you are linking a URL to this webpage. The href specifies which link we are using. To link to another website, you must use an absolute URL in the href. The TEXT will be what appears on the webpage as a link.
What attribute should you include in a link to open a new tab when the link is clicked?
- You need to include a target attribute with the value of blank. I.e. a href=”link” target=”blank”
How do you link to a specific part of the same page?
- You must create specific id’s for the parts of the page you wish to link to. If you are linking to the first, second and third heading they must have their own individual id attributes, like so h1 id=”text”. Then instead of a URL as the value of href, you replace it with a # and the name of the specific id you wish the webpage to go to. I.e. a href=”#text” text /a
What is the purpose of CSS?
- To style your webpage.
What does CSS stand for? What does cascading mean in this case?
- Cascading Style Sheet. When using CSS to format your webpage, often different browsers do not have all the elements you are using. In order to counteract this issue, you can give your code multiple formatting options. When the browser reads your HTML, it will go to the option that you first prefer it to use, and if it cannot use it, read the second option, and third, and so on.
What is the basic structure of a CSS rule?
- The code must have a selector and a declaration. Selectors specify which code in the HTML the CSS will apply to, and the declaration is what style should be used on that code.
How do you link a CSS stylesheet to your HTML document?
-
Use the element to link an external CSS stylesheet to your HTML. In order to use the element, you need to include a href (telling HTML where the sheet is located), a type (indicating the type of document you are linking), and rel (specifying the relationship between the HTML and the file you’re linking to); link href=”css/style.css” type=”text/css” rel=”stylesheet”
-
To input CSS directly into your HTML, you can use the style element. Open the style element with the type element included. Then put all of your CSS code underneath, closing it with an end style tag.
What is it useful to use external stylesheets as opposed to using interal CSS?
- When building a website with more than one page, since that will allow you to use the same CSS rules across the pages & keep the all the content in one location.
Describe what a color hex code is.
- Six digit codes that indicate how much red, blue and green are in a color you are using for your webpage. They must be preceded with a # sign.
What are the three parts of an HSL color property?
- Hue (the color you select), Saturation (the amount of grey you want mixed in with the color), and Lightness (how much white or black you want mixed in with the color). Hue is indicated as an angle, between 0 and 360. Saturation and lightness are specified by percentages.
In the world of typeface, what are the three main categories of fonts? What are the differences between them?
- Serif, Sans-Serif, and monospace. Serif has extra details on the main font. Sans-serif has ends without any details. Monospace uses the same width for all strokes in the letter.
When specifiying font-size, what are the main three units used?
Pixels, Percentages, and EMS.
If you're using an input element in a form, what attribute controls the behavior of that input?
- The type attribute indicates the type of information the website is getting and how that information should be handled.
What element is used to create a dropdown list?
- select
If you're using an input element to send form data to a server, what should the type attribute be set to?
- type=”submit”
What element is used to group similar form items together?
- fieldset
Describe the differences between border, margin, and padding.
- Border: separates boxes
- Margin: the space outside of the border
- Padding: the space between the border of a box and the information contained in the box
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
- 1 – top, 2 – right, 5 – bottom, 10 – left.
Describe the different between block-level and inline elements.
- Inline elements sit alongside each other and between the text, while block elements appear on new lines and act as building blocks of the web page
What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
- Fixed positioning puts an element in a specific place in relation to the browser window. Those elements do not change the positioning of the elements around it and they do not move when a user scrolls up and down on the webpage. Z-index can be used to specify which elements, both in fixed position and other positions, will appear in the front. This can help you control the format of your webpage when using multiple positionings.
What is the difference between a fixed and liquid layout?
- Fixed layouts do not change the sizes of the elements. When a user visits the webpage, the page stays the same regardless of the screen sizes and display resolutions. Liquid layouts design elements to expand and contract with the size of the user’s browser.
In an image element, why is the alt attribute important?
- The alt attribute describes what your image is of, which will be read aloud when screen reader software is being used by those with visual impairments or search engines.
What determines if an image element is inline or block?
- Where in the code an image is placed. If an image follows a block element in the code, then the image will appear on a separate line. If an image is placed within a block element, then it will appear inline and don’t start on a new line.
What are the benefits of jpg or png image file formats?
- JPG is useful when you have an image full of a variety of different colors, like photographs. PNG is used for images that have some, but not complete, transparency, or the image has rounded or diagonal edges or a drop down shadow.
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
- CSS allows you to style images as a group, keeping your images consistent and easy to locate and change in the code.
What is an image sprite, and why is it useful?
- A sprite is a single image that is used in different parts of the interface. This allows the webpage to load much faster, since the browser only needs to fetch one image.
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
- Numbers are numeric values. Infinity, -Infinity and NaN are numbers but do not behave normally.
- Strings use quotations to signify that the content the quotes hold is text. The \ can be used to indicate to JavaScript that characters which could be interpreted in another way, should be represented as a text. The + operator can be used on strings to glue two or more different strings together.
- A Boolean has only two values; true or false. It is used to distinguish between two possibilities.
What are the three logical operators that JavaScript supports?
- And, or and not. And is represented by && and will only be true if the values given are equal to each other. Or is represented by || and will only be true if the one of the values given are true. Not is represented by !, and will flip the value given to it.
What is the naming convention used for variables?
- Variables cannot contain any spaces and may be any word that is not a reserved word. Also, variables must not start with digits and cannot contain any punctuation except for $ and _.
- It is useful to use multiple words when naming a variable. That way, we know exactly what that variable is representing. When multiple words are used to name a variable, most programmers all words but the first.
What is the difference between an expression and a statement?
- An expression is a small part of the code that produces a value. A statement is an entire sentence.
What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
- var, break, case, import, try, private. Javascript uses these words regularly to indicate that some sort of programming should happen. If they are used in naming , you may invoke a program to run that you had not intended.
What is control flow, and why is it useful for programming?
- Control flow is the way a program is executed. Programs can have many different types of flow, all of which are dictated by the code. This is important for programming, because control flow creates a pathway that your program will follow, and subsequently, how it will create a product.
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 show you what the function is, whereas sayHello() will give you the value of that function.
What is the keyword return used for?
-Figures out what value to give back to you when a function is completed
What are function parameters?
- Values that are given in the “caller” part of the function – function(value). They are local to the function, meaning they are newly used each time that specific function is called.
What is the naming convention used for function names?
- Like variables, the name of a function does not capitalize the first word, but does capitalize every word after the first. When naming a function, you should name it after what is the essential thing a function does. That way, when other programmers look at your code, they know what that function does and why it is in the code.
I have photographs of all of my Javascript exercises commented on my prework gist. They are at the bottom of my comments.
I have my website on GitHub, but I can't figure out how to share it. Anyway, here are some links that might be worth something. https://github.com/cbdallavalle/Bone-Histology/blob/master/index.html https://github.com/cbdallavalle/Bone-Histology/blob/master/style.css
If this doesn't work, or you need something else from me, let me know. Thanks!
Psychology - Are you thinking of the user’s wants and needs, or your own?
- Good example: http://www.dictionary.com/. People who visit this website want to know the definition of a word. When you type in a word you do not know, the definition of that word appears and extra information about that word.
- Bad example: http://volunteers.dmns.org/exhibits,-program,-rcd/health-sciences/. This website is for the volunteers for the Denver Nature & Science Museum. The wants and needs of the users of this website, the volunteers, are not clearly met. The webpage does not offer information in a clear and accessible way and does not highlight the benefits these volunteers can pursue.
Usability - Are you being clear and direct, or is this a little too clever?
- Good example: https://www.mychildsmuseum.org/. Right away when people visit this webpage, they know what events are happening at the museum currently and in the future, the hours the museum is open, the admission, and the address.
- Bad example: http://www.colorado.aaa.com/?zip=80203&devicecd=PC&referer=www.aaa.com. The Colorado TripleA assistance website does not have their customer service options readily apparent. This is particularly annoying when, say, your keys are locked in your card and you don't have your membership card on you...
Design - Do users think it looks good? Do they trust it immediately?
- Good example: https://www.denverzoo.org/. The Denver Zoo webpage has bright colors, inviting text, and, best of all, cute animals! Who wouldn't trust this website and want to go immediately?
- Bad example: Blinkee.com. They sell blinking and/or glow in the dark items. The webpage is black, which is not inviting or trustworthy.
Copywriting - Does it inform the user or does it assume that they already know what its about?
- Good example: https://www.amazon.com/. Whenever you want to buy something from Amazon, they tell you all the information you need upfront.
- Bad example: www.lingscars.com. This crazy website distracts you in every way possible from learning the information about leasing a car.
Analysis - Are you using data to prove that you are right, or to learn the truth?
- Good example: https://www.sciencenews.org/. They are using their own data to create open and informative articles about cool science happening in the world. They are not using the data to prove that they are right. Their articles are here to provide you with interesting new information.
- Bad example: https://theflatearthsociety.org/home/. This website uses their own fabricated data to prove that they are right. They completely disregard all data that is legitimate.
On a website, what is the purpose of HTML code?
What is the difference between an element and a tag?
Why do we use attributes in HTML elements?
Describe the purpose of the head, title, and body HTML elements.
In your browser (Chrome), how do you 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.What are empty elements?
What is semantic markup?
What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.