HTML Flashcards

1
Q

Where do you put non-visible content about the HTML document?
Where do you put visible content about the HTML document?
Where do the and tags go in a valid HTML document?
What is the purpose of a declaration?

A
  1. Within the head element
  2. Within the body element
  3. Within the html element and they are siblings
  4. Declare what type of HTML it will use
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Give five examples of HTML element tags.
What is the purpose of HTML attributes?
Give an example of an HTML entity (escape character).

A
  1. h1, p, body, article, span
  2. Give more information of the content
  3. $reg;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is the difference between an ordered list and an unordered list in HTML?
What three HTML elements do you use to build a description list?

A
  1. ordered are numbered and unordered are bulleted

2. <dl><dd></dd><dt></dt></dl>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is an absolute URL?
What is a relative URL?
What other ways can we use an anchor tag?

A
  1. absolute - full web address
  2. relative - linking to a page on own website, don’t need to specify domain name
  3. going to id (jumping to page)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

How do you indicate the parent folder in a path?
How do you indicate the child folder in a path?
How do you indicate the grand parent folder in a path?
How do you indicate the current folder in a path?

A
  1. ../
  2. name of child folder / file name
  3. ../../
  4. .
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are the six primary HTML elements for creating tables?
What purpose do the thead and tbody elements serve?
Give two examples of data that would lend itself well to being displayed in a table.

A
  1. table, tr, td, th, thead, tbody, tfoot
  2. screen readers and allow us to style these sections in a different manner
  3. stock reports, train timetables
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Why are forms useful?
What attribute do you have to match between a label and an input?
What type of input allows you to select multiple items in a dropdown?
What is the action of a form?

A
  1. Forms allow users to enter data
  2. for and id
  3. and child elements
  4. where and how to send the data
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the purpose of an HTML form element?
Give five examples of form control elements.
Give three examples of type attributes for HTML elements.

A
  1. enter data
  2. text input, password input, radio buttons, submit buttons, file upload, drop-down boxes
  3. type, name, id
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Why would we choose specific element types when we have elements such as div and span which can be used for anything?
What factors contribute to a well-designed HTML document?

A
  1. HTML is coded to represent the data

2. Readability, SEO, Screen readers

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Name three different types of values you can use to specify colors in CSS.

A
  1. RGB values. Hex codes, color names
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What CSS properties make up the box model?
Which CSS property pushes boxes away from each other?
Which CSS property pushes box content away from its border?

A
  1. Border, Margin, Padding
  2. Margin
  3. Padding
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What are three important considerations for choosing fonts?

Why must you have backup fonts assigned when selecting custom fonts?

A
  1. Readability, Popularity of fonts on browsers, matching theme of browser
  2. In case the first font is unavailable
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What purpose does the CSS Cascade serve?
What is source order?
In what situations might you need to apply styling to a single element multiple times in one stylesheet?

A
  1. Determining which css rule should be applied.
  2. the order that your CSS rules are written in your stylesheet
  3. Mobile responsiveness
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is inheritance?
Why might CSS include this feature?
Is inheritance a good tool to use for styling? If so, on what occasions?

A
  1. inheritance controls what happens when no value is specified for a property on an element.
  2. readability, efficiency, functionality
  3. it is, to apply one rule to multiple elements.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is the purpose of !important?

When is !important a good tool to use?

A
  1. increasing specificity

2. Never

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is specificity?

A
  1. Specificity is a weight (strength) that is applied to a given CSS declaration
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What are CSS pseudo-classes useful for?

A

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What does the transform property do?

A
  1. lets you rotate, scale, skew or translate
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is the difference between the :first-child pseudo selector and the :last-child pseudo selector?

A

first “” and last child selects the last of what the pseudo class is with.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

How is specificity calculated?

A

Determined by the number of each selector type in the matching selector.

21
Q

Why might CSS include specificity feature?

A

Helps outside of focusing on source order

22
Q

What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?

A

inline style, ID, class, element

23
Q

What is the CSS Cascade?

A

factors that decide where styling is applied

24
Q

How do block-level elements affect the document flow?

A

Will start on a new line in the browser window. takes available width.

25
Q

How do inline elements affect the document flow?

A

Continues on the same line of the elements.

26
Q

What are the default width and height of a block-level element?

A

Default takes up the entire space of the content. height: auto. width: 100%

27
Q

What are the default width and height of an inline element?

A

takes up enough space to accommodate it’s contents. Height: auto, Width: auto.

28
Q

What accessibility considerations must be considered when choosing HTML elements?

A

screen readers.

29
Q

What is the difference between the block, inline block, and inline display properties?

A

block - starts on a new line
inline-block - starts on same line but can edit width and height
inline - starts on same line

30
Q

What are 3 examples of what can be done with CSS transitions?

A

Change colors, grow and shrink, rotate

31
Q

Why might transitions be a helpful effect for styling?

A

Makes the UI more comfortable for users

32
Q

Are all properties able to be transitioned?

A

No, only the ones that are animatable

33
Q

Why are CSS resets helpful for cross browser compatibility?

A

reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on

34
Q

Why is it important to be mindful of what you reset with your CSS resets?

A

Might reset things that have underlying cause and effect

35
Q

What is an argument against using CSS resets?

A

Delays loading time for website

36
Q

What is the default value for the position property of HTML elements?

A

Static

37
Q

How does setting position relative on an element affect document flow and where the element appears on the page?

A

moves an element from the position in normal flow (top, right, bottom, left) does not affect the position of surrounding elements

38
Q

How does setting position absolute on an element affect document flow and where the element appears on the page?

A

Positions the element in relation to it’s containing element. does not move as it scrolls up and down

39
Q

How does setting position relative on an element affect document flow and where the element appears on the page?

A

the positioned element has taken its place in the normal layout flow, you can then modify its final position, (top, right, bottom, left) does not affect the position of surrounding elements

40
Q

What are the box offset properties?

A

top right bottom left

41
Q

What are the three core parts of a grid system?

A

container, row, column

42
Q

Why is it important to use a grid system for CSS layouts?

A

Maintains proper sizing, makes it easier to work in a team because a team member will understand the code.

43
Q

What is the default flex-direction of a flex container?

A

row ( left to right).

44
Q

What is the default flex-wrap of a flex container?

A

nowrap (fit all on one line)

45
Q

Why should flexbox not be used for building complete web page layouts?

A

While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

46
Q

What is the default flex-wrap of a flex container?

A

nowrap (fit all on one line)

47
Q

What are clears for with floats?

A

clears allow you to say that no element within the same container should touch the left or right hand side of the box

48
Q

What were floats originally designed for?

A

Newspapers, magazines - allows you to take element out of normal flow and position far left or right in container