🔥 Aim is to build a website that displays a random quote from a database of quotes, people can upvote and downvote each quote.
e.g. Humans share 50% of the same DNA as bananas.
Using icons from font-awesome (like Windings but better!) - https://fortawesome.github.io/Font-Awesome/icons/ - give each fact an icon
e.g. my human banana fact = male
Also come up with a unique background colour, or text colour e.g. text colour = #e9e9e9, background colour = #283593
You can use Google's site to come up with some nice hex colours - https://www.google.com/design/spec/style/color.html#color-color-palette
Now we need to make it so our facts can be understood by the computer. We're going to use a thing called JSON which stands for JavaScript Object Notation. This is how we can express "things" to the computer.
e.g. If I wanted to express me (I'm a person) I could do something like this:
{
"name" : "danielle emma vass",
"dob" : "21st October",
"location" : "Bath",
"colour" : "#ffcc00"
}🌟 Have a go at representing yourself before moving on! What other "properties" could you add?
Next we can look at representing our facts like this, with properties such as fact, and icon etc. Make sure each fact is surrounded by it's own { } and add a comma between each thing.
Next, download bootstrap from - http://getbootstrap.com/ and move the css, fonts, and js folders into your GitHub project.
Then you want to create an index.html page and make it the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>🌟 spend an hour making your website look pretty. It must have:
- text for the icon
- text for the fact
- button for upvoting
- button for downvoting
Make sure you make a website that human people can actually use!!! An image of mine is at the top of this page as an example.