Day 1 - Computer Setup & Gear up
- On a website, what is the purpose of HTML code?
Describes the structure of a webpage.
- What is the difference between an element and a tag?
Element is comprises the opening tag and the close tag and any content that lies in between them. Tag acts like containers. Can refer to the specific "< p >" item in question.
- Why do we use attributes in HTML elements?
provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a NAME and a VALUE, separated by an equals sign.
- Describe the purpose of the head, title, and body HTML elements.
Head = contains information about the page (rather than information that is shown within the main part of the browser window that is highlighted in blue on the opposing page). You will usually find <title> element inside the title = contents are either shown in the top of the browser, above where you usually type in the URL of the page you want to visit, or on the tab for that page (if your browser uses tabs to allow you to view multiple pages at the same time). body = everything inside this element is shown inside the main browser window. What's on the webpage.
- In your browser (Chrome), how do you view the source of a website?
Press CTRl+U (didn't work for me) or click on "Customize and control Google Chrome" on righthand side of browser window.From drop down menu, select more tools then click "developer tools"
- 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 > is used for the main headings < h2 > is used for sub-headlines < b > can make characters bold -< i > italic < sup > superscript or suffixes of dates or mathematical concepts like raising a number to the power of 10
- What are empty elements?
Elements that don't have any words between an opening and closing tag. Usually has only one tag.
- What is semantic markup?
Answer: provides extra information; such as where emphasis is placed in a sentence, that something you have written is a quotation (and who said it), the meaning of acronyms and so on.
- What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
< em > allows you tio indicate where emphasis should be placed on selected words. < blockquote > which indicates that a block of text is a quotation. indicates that it's content has strong importance. For example, the words contained in this element might be said with strong emphasis .
CodePen: https://codepen.io/HeavyKevy/pen/qpaaNX
Day 2 - HTML & CSS
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- ordered : each item in the list is numbered. Use case, steps in a recipe that must be performed in order
- Unordered : list that begin with a bullet point.
- - element /
- - term being defined /
- contains def: set of terms along with definitions for each of those terms.
- What is the basic structure of an element used to link to another website?
< a href="URL.com">
- What attribute should you include in a link to open a new tab when the link is clicked?
target="_blank" text user clicks on closing tag
- How do you link to a specific part of the same page?
relative URL: <a href="index.html" home
INTRODUCTION TO CSS:
5. What is the purpose of CSS?
to make webpages more attractive. provide rules that specify how the contents of an element should appear.
- What does CSS stand for? What does cascading mean in this case?
Cascading Style Sheet - "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.
- What is the basic structure of a CSS rule?
a selector "p" followed by a declaration inside {;}. Declarations are split into 2 parts. A property and a value.
- How do you link a CSS stylesheet to your HTML document?
the link element < link >
- When is it useful to use external stylesheets as opposed to using internal CSS?
If you're working on a site with a great number of pages. It's easier to organize things separately and if you need to make a change to one small section, you're not looking through hundreds of lines of code.
-
Describe what a color hex code is.
-
It's a way to specify color using hexadecimal values. The code itself is a hex triplet, represents three separate values that specify the levels of the component colors.
-
What are the three parts of an HSL color property?
- Hue - colloquial idea of color.
- Saturation - amount of gray in a color.
- lightness - amount of white or black in a color.
- In the world of typeface, what are the three main categories of fonts? What are the differences between them?
- Font-family - name of font
- SRC - path to the font
- format- format that the font is supplied in?
- When specifying font-size, what are the main three units used? Pixels, percentages, EMS.
Day 3 - HTML & CSS - Professional Development
- If you're using an input element in a form, what attribute controls the behavior of that input? The name and value.
2.What element is used to create a dropdown list?
< select name="dropdownlist"> ...
- If you're using an input element to send form data to a server, what should the type attribute be set to?
username=value or name/value pairs
- What element is used to group similar form items together?
< legend > and < fieldset >
- Describe the differences between border, margin, and padding.
- Border separates the edge of one box from another
- Margin sits outside the edge of the border. You can set the width of a margin to create a gap between the borders of two adjacent boxes
- padding space between the border of a box and any content contained within it. Adding padding can increase readability.
- For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
- 1px = top padding
- 2px = right
- 5px = bottom
- 10px = left
- Describe the different between block-level and inline elements.
- Block-Level Elements
- Block-level elements always start on a new line and take up the full width available (stretches out to the left and right as far as it can).
- Inline Elements
- Inline Elements do not start on a new line and only take up as much width as necessary
- What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Element with a fixed position stays in the designated place, even if you scroll up or down. Allows you to create sticky elements "like menus. The z-index property allows you to control which box appears on top and at which level it will appear on the screen.
- What is the difference between a fixed and liquid layout?
- A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. The important thing is that the container (wrapper) element is set to not move. No matter the screen resolution the visitor has. They will see the same width as other visitors.
- Fluid layout have percentage widths and thus adjust to the users screen resolution.
Day 4: HTML, CSS, and Javascript
- Provides a text description of the image which describes the image if you cannot see it - helps vision impaired
- if the img is followed by a block level element (such as a paragraph) it'll appear on a new line. If img is inside a block level element, or other inline elements will flow around the image.
- Benefits of JPEG - when using images with a number of different colors. Photograph that features snow or an overcast sky might look like it has large areas that just white or gray but the picture is usually made up of many different colors that subtly different.
- Benefits of PNG - best used when saving images with few colors or large areas of the same color (think logo).
Chapter 16
- The benefit of specifying the height and width of images in CSS is that you keep rules that affect the presentation of your page in CSS and out of the HTML markup. Basically, your code is much cleaner.
- An Image Sprite is when a single image is used for several different parts of an interface. The advantage of using Sprites is that the web browser only needs to request one image rather than many images, which can make the web page load faster.
- Numbers: Numeric values expressed in numbers, not written out (whole numbers like "8", fractional numbers like "2.84" and scientific notiation like "2.34e10"
- Strings: are used to represent text. Written by enclosing their content in quotes.
- Booleans: has just two values: true and false. Often, you'll need a value that simply distinguishes between two possibilities, like "yes and no" or "on or off".
- And - &&
- Or - ||
- Not - !
- var = x;
- An expression produces a value and can be written wherever a value is expected, for example as an argument in a funtion call.
- Roughly, a statement performs an action. Loops and "if" statements are examples of statements. A program is basically a sequence of statements.
- Examples of reserve words: break, case, catch, class, const, continue, debugger, default, delete, do, else.
-
What is control flow, and why is it useful for programming?
- When your program contains more than one statement, the statements are executed, predictably, from top to bottom.
Eloquent - Chapter 3 (FUNctions)
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 is defined
- sayHello() is undefined
What is the keyword return used for?
- return statement ends function excution and specifies a value to be returned to the function caller.
- The names listed in the function definition. They are statements that are to be called
What is the naming convention used for function names?
- names should be formed from the 26 upper and lower case letters.
- should follow the var statement.
- there should be no space between the name of a function and the (left parenthesis of it's paramater list)
- Avoid use of internatonal characters because they may not read well or be understood everywhere.
- Do not use $ or \ in names.
- Do not use the _ as first or last character of a name.
- Most varibales and functions should start with a lower case
- Global variables in browsers should be in all caps
Daily UX Crash Course work
- What is the user’s motivation to be here in the first place?
Good website: https://www.onepeloton.com
Motivation is to encourage people to be healthy and continue to push themselves
Bad Website: www.stackoverflow.com
Just a list of the most recent coding questions. That said, most people don't find Stack Overflow by searching their website. It comes from a google search. - Are you being clear and direct, or is this a little too clever?
Good website: www.patagonia.com
They are leading with their beliefs and speaking directly to buyers who believe like they do. Plus, they're encouraging people to give back.
Bad website: https://mcphee.com/
while it breaks my heart (grew up going to this store as a child), their website has zero organization when you hit their website. They stay true to who they are which is commendable but it's strange to see a rubber duck, finger puppet next to a cockroach pin... - Does it represent the brand?
Good Website: www.patagonia.com
Patagonia believes strongly in supporting environmental issues. It's literally the focal point of their front page. A link to get involved in supporting issues they care about.
bad website: www.xfinity.com
While they're advertising a lot to clear their image, they're still associated with a company that has donated a ton of money to repeal netnutrality. It's clear that they want positive PR but they're supporting legislation that the public doesn't want. #marketing. - Does it sound confident and tell the user what to do?
Good wesbite: www.patagonia.com
Yes. They want people to get out there and become involved.
Bad website: www.sears.com
It says to me, buy a bunch of unrelated tools! Heck, maybe even a washing machine. No structure to the website to funnel buyers into the right categories. - Are you using data to prove that you’re are right or to learn the truth?
Good website: classpass (technically, it’s an app but it also functions as a website)
After every class, you’re strongly encouraged to write a review whether or not it’s good or bad. It’s an awesome way to provide feedback for local gyms in order to help them improve or hear what customers are enjoying about their particular facilities.
Bad website: facebook, twitter, anyone else who contributed towards “FAKE NEWS” campaigns during the election.
As the world moves towards getting their news their information from social media sites, we need better safeguards in place to verify the information that is being spread in order to avoid having people wildly uninformed. There was no close to the feedback loop and they’re still struggling to solve this issue.
There are three big data types in JavaScript:
What are the three logical operators that JavaScript supports?
What is the naming convention used for variables?
What is the difference between an expression and a statement?
What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
