# Prerequisite Knowledge

## Basic HTML/CSS/JS Programming Concepts <a href="#basic-html-css-js-programming-concepts" id="basic-html-css-js-programming-concepts"></a>

*Familiarity* with the following concepts are highly recommended before programming the trivia game. But *mastery* is NOT required.

#### HTML <a href="#html" id="html"></a>

* Common HTML Elements and the basic tag syntax `<div>`, `<h1>`, `<h2>` (etc.), `<button>`, `<span>`
* Nesting elements
* *id* and *class* attributes

**CSS**

* Selectors for elements, classes, and ids
* Common properties used in styles: background-color, color, font-size, margin, padding, height, width, display, border, etc.

**JavaScript**

* Variables - numbers, strings, objects
* Functions
* Conditionals -- if, else
* jQuery selectors for elements, classes, and ids
* Basic jQuery functions: $.show(), $.hide(), $.html()

## Options to Learn or Revisit Concepts <a href="#resources-to-learn-or-revisit-concepts" id="resources-to-learn-or-revisit-concepts"></a>

### Intro to Informatics and Web Development (Recommended)

The [**Intro to Informatics and Web Development**](https://docs.idew.org/intro-to-learning/) series of exercises covers HTML/CSS/JS and some informatics practices.

### A Quick Dive <a href="#a-quick-dive" id="a-quick-dive"></a>

1. ​[HTML](https://docs.idew.org/principles-and-practices/principles/programming-principles/html)​
2. ​[CSS](https://docs.idew.org/principles-and-practices/principles/programming-principles/css)​
3. ​[Classes and id's](https://docs.idew.org/principles-and-practices/principles/programming-principles/classes-and-ids-html-css-js)​
4. ​[HTML Nesting](https://docs.idew.org/principles-and-practices/principles/programming-principles/html-nesting)​
5. [jQuery Basics](https://docs.idew.org/principles-and-practices/principles/programming-principles/jquery)
6. [JS Variables](https://docs.idew.org/principles-and-practices/principles/programming-principles/js-variables)
7. [JS Functions](https://docs.idew.org/principles-and-practices/principles/programming-principles/js-functions)
8. [JS Conditionals](https://docs.idew.org/principles-and-practices/principles/programming-principles/js-conditionals)

### Deeper Dive Options <a href="#deeper-dive-options" id="deeper-dive-options"></a>

* HTML - [W3Schools](https://www.w3schools.com/html/default.asp), [Khan Academy](https://www.khanacademy.org/computing/computer-programming/html-css), [Codecademy](https://www.codecademy.com/learn/learn-html)​
* CSS - [W3Schools](https://www.w3schools.com/css/default.asp), [Khan Academy](https://www.khanacademy.org/computing/computer-programming/html-css), [Codecademy](https://www.codecademy.com/learn/learn-css)​
* JavaScript - [W3Schools](https://www.w3schools.com/jS/default.asp) (JS) / [W3schools](https://www.w3schools.com/jquery/default.asp) (jQuery), [Khan Academy 1](https://www.khanacademy.org/computing/computer-programming/programming) (JS)/ [Khan Academy 2](https://www.khanacademy.org/computing/computer-programming/html-js-jquery) (jQuery), [Codecademy 1](https://www.codecademy.com/learn/introduction-to-javascript) (JS) / [Codecademy 2](https://www.codecademy.com/learn/learn-jquery) (jQuery)