HTML and CSS

Question 1

Golden Rule- Separation of Concerns

Answer 1

HTML - Content / Structure
CSS - Style
Javascript - Behavior / Interaction

Don’t want to mix any of these up at all to help with organization and making future changes.

Question 2

Exception for Writing Inline Style

Answer 2

Email … might be the only option to style

Question 3

Exception for Writing CSS in HTML’s head

Answer 3

Amazon does this to save a very small amount of time on loading. This saves them millions of dollars. Don’t do this unless you work for Amazon. :P

Question 4

Explain with correct terminology:
p {
color: red;
font-weight: bold;
}

Answer 4

The whole thing is a rule.
{ ... } is the declaration block
each line within is a declaration
color / font-weight = properties
red / bold = values

: = colon ; = semicolon. lol…

Question 5

What does CSS stand for? What does the C specifically mean?

Answer 5

CSS = Cascading Style Sheet

CSS is used for styling HTML

Cascade means that “What comes below, can override what came above.” This is how rules are applied in CSS, tied in with specificity weight/value/points

Question 6

CSS Colors - what types of values can be used?

Answer 6

color: red;
color: #FF0000;
color: rgba (255, 0 , 0 ,1 )

color keyword (red)
hexadecimal 
rgb or rgba values (Leon's favorite. goes well with digital color meter; and nice to have the alpha channel)

Question 7

Fonts - how to set in CSS and backup to other fonts?

Answer 7

CSS declaration would look like:
font-family: ‘Source Sans Pro’, ‘Helvetica’, sans-serif;

need to link to external sources in the HTML:
find the necessary link in fonts.google.com

Question 8

Specificity

Answer 8

A value applied to CSS selectors that helps determine which declarations apply. the more specific you are, the more points it gets.

id = 100
class = 10
element = 1

!important = 1000 (AVOID)

Question 9

IDs

Answer 9

IDs are used for selecting distinct elements. only one id with the same value per document.

HTML: <p>Hey youtube</p> (TAGS - see edit mode)

CSS:
#zebra {
color:green;
}

Question 10

Classes

Answer 10

Classes are for selecting multiple elements.
Multiple with same value allowed per document.

best practice is to name classes based on content, and avoid naming them off of style. for example “alert” instead of “red” (because what if you want to change the alert color?)

HTML:

<p>Goodbye</p>

(TAGS - see edit mode)

CSS:
.bob{
color:red;
}

Question 11

Containing Elements

Answer 11

elements that contain other stuff. sections, articles, headers, footers

Question 12

what’s the difference between these selectors?

section. blue > p
section. blue p
section. blue + p
section. blue ~ p

section .blue p

Answer 12

section. blue > p = selects p’s that are direct children of sections with the class “blue”
section. blue p = selects any p’s that are descendants of sections with the class “blue”
section. blue + p = selects p’s that are the IMMEDIATE siblings after sections with the class “blue”.
section. blue ~ p = select *p’s that are ANY siblings after sections with class “blue” .

section .blue p = selects p’s that are descendants of elements with the class “blue”, where the element with class “blue” is a descendent of a section

Question 13

CSS Box Model

Answer 13

Every single thing is a box. The Box Model is concerned with how the element takes up space.

description from outside to inside:
margin -> border -> padding -> height/width

margin can be viewed more as “pushing” the box around.

Question 14

Padding

Answer 14

pushes the border away from the element

Question 15

Margins

Answer 15

push our box around… add margin-left then the box will be pushed to the right

Question 16

how do you handle layout in CSS? (like keeping an element at top of screen, keeping a section to the right)

Answer 16

floats, flexbox, and css-grid

floats is outdated - avoid but need to know!

Question 17

Floats

Answer 17

when this property is assigned to an element, it will try to fight to get to a corner, and the side effect is that things sit next to each other.

so floating left - element will try to go up as much as possible and then left as much as possible

think of it as literally floating it off the page. elements not floating won’t be effected.

Question 18

How many decimal points can you have in CSS?

Answer 18

4. for example: 33.3333%

Question 19

What does this declaration do?

clear: both;

Answer 19

tells the element to look around it for floating elements and stay in order with them (instead of getting pushed up underneath, for example)

Question 20

What declaration is used to have an element to “look” for floating elements all around it and attempt to stay in order with them (instead of allowing overlap)?

Answer 20

clear: both;

Question 21

What rule is used to tell the browser to ignore borders when calculating width?

Answer 21

• {
  box-sizing: border-box;
  }

Recommended from reading because "box-sizing is pretty new, [so] you should use the -webkit- and -moz- prefixes for now, as I have in these examples. This technique enables experimental features in specific browsers. Also, keep in mind that this one is IE8+.":
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Question 22

What does HTML stand for?

Answer 22

HyperText Markup Language - gives content structure and meaning

Question 23

Name the three parts of this:

<a>Shay Howe</a> (TAGS - see edit mode)

Answer 23

a : elementhref=”…” : attribute
: tag (TAGS - keeps deleting :( )

Question 24

What declaration and elements are required to structure an HTML document?

Answer 24

• document type declaration
• html element signifying the beginning of the document
• head element identifies top of document including metadata (never displays content to web page itself)
• body element contains all visible content on web page.

Question 25

what are two main elements included in the head element?

Answer 25

meta element with the charset attribute (often set to utf-8) - sets the character encoding of the page

title element - displays the title on the browser window

Question 26

code validation

Answer 26

The W3C has built both HTML and CSS validators that will scan code for mistakes. Validating our code helps it render properly across all browsers and teaches us the best practices for writing code.

Question 27

Best practices for naming classes and IDs?

Answer 27

try to choose a value that refers to the CONTENT of the element, not it’s appearance.

For example “social” instead of “orange”. if the color changes later then the class will no longer make sense. it’s better to pertain to content instead of style.

Question 28

What inline elements can be used to signify the importance of specific text?

Answer 28

strong - gives strong importance to text

em - gives stressed emphasis on text

Question 29

what is a pre tag?

Answer 29

abomination. this is for fixed-width font, and only css should be used for styling.

Question 30

When would you use an aside tag? An article tag?

Answer 30

Both should have the ability to be standalone from the rest of the site.

Use an aside tag for content that could just be pulled out of the website and it wouldn’t really matter. Like for ads.

Use an article tag for a section of your site that you want to be sharable on it’s own.

Question 31

Why should inline styling be avoided?

Answer 31

It takes up too much specificity (1000). It gets really hard to override it in the actual CSS file.

Question 32

Normalize vs Reset

Answer 32

normalize gives you styling defaults that will be the same across all browsers.

reset will remove all defaults that each browser has, and start completely from scratch

Question 33

What is responsive design and how do you do it?

Answer 33

when you want things to look good on all screens/devices.

need to use media queries in CSS:

@media screen and (max-width: 800px) {
(add CSS rules here)
}

Question 34

If you know how many px long you’d like something to be, but want to make it responsive, how do you calculate the percentage of the width?

Answer 34

take the width of the target element, divide it by the width of it’s parent element. this will be the percentage you should set your target element width to.

“The formula is based around taking the target width of an element and dividing it by the width of it’s parent element. The result is the relative width of the target element.

target ÷ context = result

e.g.
section {
  float: left;
  width: 63.197026%;    /* 340px ÷ 538px = .63197026 */   
}"

Question 35

What should you base media query breakpoints off of? what does a media query look like?

Answer 35

responsive websites should adjust to any size, so break points should be introduced when your content starts to break, not based on device sizes.

@media screen and (min-width:600px){
/*add rules for elements you want to change here*/
}

Question 36

what is clearfix?

Answer 36

clearfix is a template rule that selects class “clearfix” to help with layout involving floats. you can assign this class to an element so that it wraps as expected around the floating content within it (instead of collapsing).

it does this by putting a little invisible dot in the container to prevent it from collapsing.

Question 37

3 factors of responsive websites

Answer 37

fluidity - elements based on %s so they adjust with screensize
elasticity -using relative font size so its easy to adjust (em and rem)
content decisions - what to do with certain elements; should some be removed on smaller screens?

Question 38

em vs rem

Answer 38

em - font size relative to parent container

rem - font size relative to html element.

NOTE: browsers by default are 16px font, so you can set font-size under html to 63.5% so that (for browsers in default) 1rem = 10px …. easy to work with…. 1.6rem = 16px … etc

Question 39

what tag is required for media queries to work on phones?

Answer 39

meta viewport tag

meta name=”viewport” content=”width=device-width, initial-scale=1”

Question 40

what is the only real thing to continue using floats for?

Answer 40

newspaper style images, where text wraps around image… may need to know just for legacy code too :(

Question 41

how do you make items flex?

Answer 41

add declaration to parent container: display: flex

then, its children elements become flex items automatically.