# data[].attributes.body
control click to contact

# data[].attributes.body
so cute!

# data[].attributes.body
This was not photoshopped

# data[].attributes.body
Why fish people are weird.

# data[].attributes.body
not really

# data[].attributes.attachment_link.readable_text
Some useful HTML/CSS Code Snippets:
HTML Challenges:
1. Write a word and make it red.
2. Make a numbered list of 5 items.
3. Make a bulleted list of 5 items.
4. Create a header and paragraph.
5. Make a really big word and a really small word.
6. Create a hyperlink
7. Add an image
8. Write some text like "I am aqua with a black background." Then make the text aqua with a black background.
9. Make a word in bold.
10. Make a word in italics.
11. Create header text (like a title of a page) and use header tags to display it at five different sizes.
12. Make a hyperlink of the color of your choice.
13. Align a word left.
14. Align a word center.
15. Align a word right.
16. Create underlined text.
17. Make a word in the Arial font.
18. Make a word in the Georgia font.
19. Create text with a strikethrough.
20. Make a page with 3 paragraphs.
21. Write the same sentence in bold and in italics.
22. Add an image and make the image link to a web page.
23. Make a table with two rows and two columns.
24. Wrap text around an image.
25. Create a header and a subheader.
26. Write a paragraph in lowercase and transform it to uppercase using code.
27. Make a header and a subheader with a paragraph of text under it.
28. Make 3 sentences 3 different colors.
29. Make the smallest word you can still see.
30. Make the biggest word you can.
HTML/CSS Cheatsheet:

1. Do your work here: https://thimble.webmaker.org/en-US/editor

2. Put everything between the <body></body> tags. (advanced: or, put all your CSS tags between <style></style> between the <head> tags)

3. To save, click "Publish".

To make a paragraph:
Enclose your paragraph in the <p></p> tag.
Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
To make a line break:
Use the <br> tag
Example:
There is a break between this line...

...and this line.
Change the color of text:
<span style="color:red;">CoderDojo is awesome!</span>
Example:
CoderDojo is awesome!

Color reference - find more colors:
http://www.w3schools.com/cssref/css_colornames.asp Change the background color of text:
<h2 style="color:green; background-color: pink;">I am green with a pink background!</h2>
Example:
I am green with a pink background!
Change text size:
<span style="font-size:48px;">CoderDojo is awesome!</span>
Example:
CoderDojo is awesome!
Use bold text:
<strong>bold text</strong>

I can <strong>hear</strong> you.
Example: Use italics:
<em>italicized text</em>

I can <em>hear</em> you.
Example:
I can hear you.
Change the font of your text:
<span style="font-family:arial;">CoderDojo is awesome!</span>
Example:
CoderDojo is awesome!

CoderDojo is awesome!
More on font families... Google fonts Align text left, center, right:
<span style="text-align:left;">CoderDojo</span>

<span style="text-align:center;">CoderDojo</span>

<span style="text-align:right;">CoderDojo</span>
Example: Underline text:
<p style="text-decoration:underline;">this should be underlined</p>
Example:
This should be underlined.
Create text with a line through it:
<p style="text-decoration:line-through;">this should have a line through it</p>
Example:
this should have a line through it
Use headers:
Use <h1>Main Header</h1> for the main header, and <h2>, <h3>, <h4>, and <h5> for the subheaders.
Example:
H2 Header

H3 Header

H4 Header

H5 Header
Add an image:
<img src="http://www.coderdojola.com/wp-content/uploads/2012/06/Screen-Shot-2012-06-18-at-12.24.34-PM1.png">
Example: Find more images anywhere on the web or at: http://www.coderdojola.com/caa/
(right click on an image & then copy its URL)
Add a hyperlink
<a href="http://www.wikipedia.com/">Wikipedia is cool</a>
Example: Wikipedia is cool Change color of hyperlink
<a style="color:green;" href="http://www.google.com">Go to Google!</a>
Example: Go to Google! Make an ordered (numbered) list
<ol>

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

</ol>
Example: Make an unordered (bulleted) list
<ul>

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

</ul>
Example: Link an image
<a href="http://en.wikipedia.org/wiki/lolcat"><img src="http://seriouscat.com/serious_cat_is_serious.jpg"></a>
Example: Wrap text around an image:
<img src="http://www.coderdojola.com/wp-content/uploads/2013/03/Screen-Shot-2013-03-20-at-3.41.25-PM.png" style="float:left;margin:10px;">

<p>The images are contained within the paragraph tag. The image has floated to the left because we used the float attribute. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. The images are contained within the paragraph tag. The image has floated to the left because we used the float attribute. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. </p>
Example:
The images are contained within the paragraph tag. The image has floated to the left because we used the float attribute. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. The images are contained within the paragraph tag. The image has floated to the left because we used the float attribute. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely. Notice how the text wraps around the image quite nicely.
Make a table: Example: Change lowercase to uppercase:
<p style="text-transform:uppercase;">This is a paragraph that shows how to change lowercase to uppercase. This is a paragraph that shows how to change lowercase to uppercase. This is a paragraph that shows how to change lowercase to uppercase. </p>
Example:
This is a paragraph that shows how to change lowercase to uppercase. This is a paragraph that shows how to change lowercase to uppercase. This is a paragraph that shows how to change lowercase to uppercase.
Also see:
http://www.w3schools.com/html/html_quick.asp
Kids Coding Resources

# data[].attributes.attachment_link.title
HTML Challenges & Cheatsheet | CoderDojo LA

# data[].attributes.attachment_link.description
Some useful HTML/CSS Code Snippets: HTML Challenges: 1. Write a word and make it red. 2. Make a numbered list of 5 items. 3. Make a bulleted list of 5 items. 4. Create a header and paragraph. 5. Make a really big word and a really small word. 6.

# data[].attributes.body
What really happens when we're turned around....

# data[].attributes.attachment_link.title
Western snowy plover, Beaches & Dunes, Birds, Charadrius nivosus nivosus at the Monterey Bay Aquarium

# data[].attributes.attachment_link.description
As one of the main rehabilitation sites for shorebirds in northern California, the Aquarium works hard to make a difference to the threatened western snowy plover population. We collaborate with local and regional parks, avian conservation groups and local biologists to rescue injured adults, injured chicks and abandoned eggs.

# data[].attributes.body
BY: ava scaturro