Show:
New HTML5 Features
CSS
Name the CSS Selectors
Advanced CSS & Syntax
HTML or CSS
100

Geolocation

Geo-location in HTML5 is used to share the location with some websites and be aware of the exact location of the user.

100

How many ways can styling be applied to an HTML document? What are they?

3. Inline styling. Internal Stylesheet. External stylesheet.

100

div > p {...}

Child selector

100

Property or Value: "none"

value

100

@keyframe

CSS

200

What is the difference between Canvas and SVG?

<canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript).

 SVG images and their related behaviors are defined in HTML text files.

200

Provide an example of a Pseudo Element.

::after

::before

::first-line

200

.fourth-grade {...}

Class selector

200

Property or value: "flex"

value

200

class="fourth-grade"

HTML

300

Why is it called Forms 2.0?

There are five new form elements in the HTML5 forms specification: datalist , output , keygen , progress , and meter . 

Forms 2.0 also accepts more input type values (such as email with built-in validation) to create more distinguishable input fields.

300

Provide an example of a Pseudo Class.

:hover

:visited

:disabled

: nth-child()

300

#imSpecial {...}

IDs

300

Can you create variables in CSS?

Yes.

300

let sandwiches = "sandwiches"

Neither

400

Previously, media could be only played on web pages using web plugins like Flash. What replaced this?

The <audo> and <video> tags for more easily embedded media content into  a web page.


400

What is the order of Specificity priority?

Inline styling >> 

ID >> 

Classes, attributes, pseudo-classes >>

elements, pseudo-elements

400

* {...}

Universal selector

400

Name some responsive units.

%, vh, vw, em, rem

400

#imSpecial

CSS

500

Name 5 semantic elements

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
500

What is the Box Model?

The Box Model allows us to define space between and within elements. The Box Model allows us to add borders around elements.


Its hierarchy is as follows: 

Margin (space between elements) > 

Border (outline of an element) > 

Padding (space defining content's start and end) > 

Content (itself)


500

h1, h2, h3 {...}

Multiple Selector

500

Which is 1-dimensional and which is 2-dimensional? Flexbox or Grid?

Flexbox: 1-dimensional

Grid: 2-dimensional

500

<style>

body {

display: flex;

justify-content: space-evenly;

}

</style>

BOTH!