Jacob A.
Exploration entry#1:Gradient background colors
It is quite simple, the only challenging part is deciding which direction the gradient will be going. These actions are done in CSS.
In order to do this you first must tell the div to have a background image
#back
{
background-image....
}
Next we use the line of code that tells the colors to be gradient:
{
background-image: linear-gradient(.....)
}
Next is the most important and fun part, deciding colors and directions.
{
background-image: linear-gradient(to right, red , yellow);
/*This example shows a gradient from red to yellow starting at left and going to the right*/
}
The Same could be applied to any direction. Some of those include:
to right, to left, to top, to bottom,
And diagonals:
to bottom right(Starts top left), to bottom left (starts top right), to top right (starts bottom left) and to top left (starts bottom right)
All these phrases would replace the first part inside the parenthesis. You can use many colors not in a specific order
The first one seen below is :
background-image:linear-gradient(to top, red, yellow);
The second one is:
background-image: linear-gradient(to bottom left, red , yellow, green);
Exploration entry 2 : Adding emojis
Adding emoji is a fun way to add a little bit of character and fun to a site and/or sentence.
Initially what we already do with most of our projects is add <meta charset="UTF-8"> to our head section
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
each character has a unique character code, for example B is 66, D is 68 and so on. Emojis also have character codes. For example a smiley face with squinting eyes code is 128516. A full list of all the different codes can be found here.
In order to add these some special characters to our page (or just regular letters) we do inside of a paragraph, &# then followed by our number directly after and then a semicolon. 9917 seen below is a soccer ball.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>look at this soccer ball ⚽ wow very cool </p>
</body>
</html>
source code: https://www.w3schools.com/html/html_emojis.asp
below is the result of the soccer ball code above.
Exploration entry 3: Adding tables
Adding tables is very simple and important if you have to display lots of data in an organized manner.
In order to make a table you must use the table tag
<table>
</table>
Next, in order to get a new row you use the <tr> tag. If i want 3 rows my document would look like:
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
To add Bold text to the top as a header for a table, use the <th> tag. And use the <td> tag for the other stuff that goes inside the table.
<table>
<tr>
<th>shoe size</th>
<th>hat size</th>
<th>Name</th>
</tr>
<tr>
<td>10</td>
<td>Large</td>
<td>John Smith</td>
</tr>
<tr>
<td>23</td>
<td>Large</td>
<td>Shaquille O'Neal</td>
</tr>
<tr>
<td>5</td>
<td>Small</td>
<td>Billy Clark</td>
</tr>
</table>
Tables are also able styled, for example:
td, th {
border: 1px solid #000; <------- adds a line border around each square (black in this scenario)
text-align: left; <------------ aligns text to left side of column
padding: 8px; <-------------- gives a small padding around the content inside of the boxes
}
The Result is below:
