TWO weeks of CODING

LEARN to CODE
TWO weeks of CODING   Choose an online programming site   Recommendations
1. https://www.khanacademy.org Intro to JS: Drawing & Animation I quite like this one. Work until you get past "Text and Strings".
2. https://www.codecademy.com Introduction to HTML Some of this code can be used on your blog!
3. http://drawingincode.com/ The Basic Cityscape Flappy Square looks a lot like Actionscript used by Adobe Animate- I like it.
How will you be marked? Each day - for 10 classes - you will make a BLOG post of what you did that day. This will include screen shots. You will also write about what you learnt that day. Then you will indicate what you will be doing the next day. What I DID today- What specific things I LEARNT - What I will do TOMORROW
opaque background in the table!  uses RGB colors the .8 is the opaqueness value between 0 and 1-where 0 is invisible  and 1 is a solid color <table border="1" bordercolor="yellow" style="background-color: rgba(111, 144, 211, .8);" >
background-image - get link to image off the internet <div style="background-image: url('https://images.pexels.com/photos/951240/pexels-photo-951240.jpeg');"> </div>

Photoshop LEVEL 2

Photoshop LEVEL 2

Do one of these or do your own tutorial. 

1. this exact tutorial

2. A different animal and skin

3. Multiple skins - write a tutorial

Post: Name of tutorial and the link - if YOUTUBE then embed the video too.

1.

SKIN change -ANIMAL -YOUTUBE

Photoshop Tutorial: Transform Animal Skin into Tiger Skin
https://www.youtube.com/watch?v=-l7M13OUQck

2.

SKIN change -CAR -TEXTED based Tutorial

ORANGE PORSCHE. FRUIT SKIN.
http://www.alfoart.com/gold-car-1.html

Photoshop LEVEL 1

Photoshop LEVEL 1 

Take EITHER the frog-crocodile tutorial or your own HYBRID ANIMAL tutorial - from the previous post and complete the tutorial 3x (Three Times) 

1x: Do as your are told in the tutorial - learn something new (possibly from your teacher) 

• make sure to add your BLOG ADDRESS with the text tool 

 (watermark it as your own - also worth marks) 

• EXPORT as a PNG file and post to your blog 
• post screenshot of your LAYERS 

 2x: Do AGAIN as your are told in the tutorial but employing some of the new strategies you have learnt. 

• Make sure use TWO DIFFERENT animals or or an animal and something else that is not an animal. 
•  add your BLOG ADDRESS with the text tool 

 (watermark it as your own - also worth marks) 

•  add comments in the blog post referring to some of the new ideas you have added to the tutorial EXPORT as a PNG file and post to your blog 
• add screenshot of your LAYERS 
• show original images

3x: DO again - 3 or more DIFFERENT ANIMALS

• Rewrite the original tutorial to reflect this version and all the new tools you have used. 
•  make sure to add your BLOG ADDRESS with the text tool 

(watermark it as your own - also worth marks) 

• EXPORT as a PNG file and post to your blog 
• add screenshot of your LAYERS
• show original images
• 
  

Photoshop POST -Hybrid/ morphing animal tutorials

PHOTOSHOP POST

SUBJECT: Hybrid/ morphing animal

FIND your own tutorials

DO NOT USE THE TUTORIALS BELOW

1. TEXT BASED TUTORIAL

Title:

Combine a Crocodile and a Frog in Photoshop

LINK:

https://design.tutsplus.com/tutorials/quick-tip-combine-a-crocodile-and-a-frog-in-photoshop--psd-22326

2. YOUTUBE BASED TUTORIAL

 Title:  Advance Photoshop Manipulation Tutorial Eagle Dog

LINK:

https://www.youtube.com/watch?v=XHQ5vJmgwtI

Embedded Video:

NOTE: background gradient : FOUND here

turn their code:

div {
    background: linear-gradient(to bottom, #cc00ff 0%, #ff0000 100%);}

into our code - note the difference using STYLE= 

<DIV style="background: linear-gradient(to bottom, #cc00ff 0%, #ff0000 100%);">

</DIV>

table EXAMPLE

Table Example

<table border="10" bordercolor="blue">
  <tr>
    <th colspan="3" bgcolor="red"></th>
  </tr>
  <tr>
    <td bgcolor="saddlebrown"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

My Predicted Grade

My Predicted Grade

Predicting your grade at interim 

• 4 transparent animated GIFs
• 2 numbers
• 1 % sign
• 1 letter

• Add a background colour

<div style="background: peru;">

</div>

Use the following CODE to fix the background issue behind the transparent images.

Go to:

Design - Layout - Template Designer - Advanced - (scroll down to) - Add CSS

then paste in the following:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {

  padding: 0 !important;

  border: none !important;

  background: none !important;

  -moz-box-shadow: 0px 0px 0px transparent !important;

  -webkit-box-shadow: 0px 0px 0px transparent !important;

  box-shadow: 0px 0px 0px transparent !important;

}

PLACE your ANIMATED gifs INTO a TABLE
place bgcolor ="red" behind all cells
choose your own colors
colour options

Predicted Grade