web_intro_emoji_1.md

1. JSFiddle or Repl.it

We're going to be using JSFiddle to create our own emojis. Firstly you need to open JSFiddle in a new tab (right click and open in new tab) https://repl.it/

You should then see a set of four squares - we're going to be working on the top left box "HTML"

There are two really important buttons in the top bar to focus on:

• Run = press this every time you want to see what your code does - this should then appear in the bottom right box "Result"

• Save = when you finish for the day - press save and JSFiddle will create you a unique URL - write this down somewhere so next week you can begin where you left off :-)

2. Coordinates

SVG uses a coordinate system, except the origin (0,0) is top left instead of the traditional bottom left.

If we draw a circle and want to work out what it's coordinates would be.

We'd need to count first how far away from the left edge of paper along the horizontal (x) axis it is - the higher the x number, the further right the shape is.

Finally, we need to count how far away from the top of the paper along the vertical (y) axis it is - the higher the y number, the further down the paper the shape is.

3. Paper

As we're going to be doing some drawing today - the first important thing to do is to create ourselves a piece of paper. We can do that by using a technology called SVG. Copy the following code and paste it into the HTML file in repl.it.

<svg height="600" width="600">



</svg>

Note - when you run you should see scroll bars appear - showing your paper is bigger than window.

4. Circles

Now the most important part of the emoji is the "face" - so we can draw a circle on our piece of paper.

Paste the following code inside your paper, after <svg height="600" width="600"> and before the </svg>

<circle cx="300" cy="300" r="200" fill="yellow"/>

The attributes mean :

• cx = center x value (how far right)
• cy = center y value (how far down)
• r = radius (how big the circle is)
• fill = what colour the shape will be

5. Polygons

Next we might want to add a background - we're going to make a "polygon" - which is just a shape with multiple "points". Firstly we need to look at what those coordinates might be :

• top left = 0,0
• top right = 600,0
• bottom right = 600,600
• bottom left = 0,600

Next we can make a string of the coordinates to visit = 0,0 600,0 600,600 0,600

Finally, we can subsitute our points into the polygon tag.

<polygon points="0,0 600,0 600,600 0,600" fill="red"/>

But Wait You have to be careful where abouts you paste your polygon. The ordering in SVG matters very much, much like if you had cut all your shapes out of paper and started sticking them on your paper, they would overlap (or even hide) earlier shapes.

Our polygon needs to go before our emoji face.

6. Colours

You probably wanted a more specific colour than "yellow" or "red". Computers have many different ways to represent colours, websites tend to use a thing called "Hex Colours" and they look like this:

• black #000000
• white #ffff00
• yellow = #ffcc00

instead of the word "yellow" write "#ffcc00" and see what happens?

Google have a great list of colours and their hex codes - check it out at https://www.google.com/design/spec/style/color.html#color-ui-color-palette

7. Finishing

Try and finish your emoji face - don't forget to add some eyes! We're going to be moving onto using gradients in the next worksheet, and then look at creating some harder shapes!

⭐ When you've finished - don't forget to save your JSFiddle and send us your link above. 🌟