RaspberryPiFoundation · hounslowcodeclub · Jun 16, 2018 · Jun 16, 2018 · Jun 16, 2018 · Jun 16, 2018
diff --git a/en-GB/creating-patterns/index.md b/en-GB/creating-patterns/index.md
@@ -0,0 +1,23 @@
+---
+title: Creating patterns
+description: Using basic shapes creating geometric patterns.
+notes: "notes.md"
+layout: project
+new: true
+project-type: community
+---
+
+# Introduction { .intro }
+In this project, you'll create different geometric patterns without repeating code using loops. You'll be introduced the basics of JavaScript loops to make different geometrical patterns.
+
+<iframe src="https://trinket.io/embed/html/d196c4b355?outputOnly=true" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
+
+# Step 1: What is loop? { .activity }
+In programming, loops can be used to avoid repetition of same lines of code with slight variations. 
+
+## Activity Checklist { .check }
++ + You'll be using a website called Trinket to write HTML. Open this Trinket: <a href="https://trinket.io/embed/html/2c51554c41"  target="_blank">jumpto.cc/creatingpatterns-intro</a>.
+
+
+
+
diff --git a/en-GB/making-shapes/images/cam1.png b/en-GB/making-shapes/images/cam1.png
diff --git a/en-GB/making-shapes/images/coordinate.jpg b/en-GB/making-shapes/images/coordinate.jpg
diff --git a/en-GB/making-shapes/images/coordinate.png b/en-GB/making-shapes/images/coordinate.png
diff --git a/en-GB/making-shapes/images/ellipse.png b/en-GB/making-shapes/images/ellipse.png
diff --git a/en-GB/making-shapes/images/ellipse1.png b/en-GB/making-shapes/images/ellipse1.png
diff --git a/en-GB/making-shapes/images/fish.png b/en-GB/making-shapes/images/fish.png
diff --git a/en-GB/making-shapes/images/image.png b/en-GB/making-shapes/images/image.png
diff --git a/en-GB/making-shapes/images/java1.png b/en-GB/making-shapes/images/java1.png
diff --git a/en-GB/making-shapes/images/java2.png b/en-GB/making-shapes/images/java2.png
diff --git a/en-GB/making-shapes/images/javafunc.png b/en-GB/making-shapes/images/javafunc.png
diff --git a/en-GB/making-shapes/images/javafunc1.png b/en-GB/making-shapes/images/javafunc1.png
diff --git a/en-GB/making-shapes/images/line.png b/en-GB/making-shapes/images/line.png
diff --git a/en-GB/making-shapes/images/line2.png b/en-GB/making-shapes/images/line2.png
diff --git a/en-GB/making-shapes/images/radius.png b/en-GB/making-shapes/images/radius.png
diff --git a/en-GB/making-shapes/images/rect.png b/en-GB/making-shapes/images/rect.png
diff --git a/en-GB/making-shapes/images/tri.png b/en-GB/making-shapes/images/tri.png
diff --git a/en-GB/making-shapes/images/tri2.png b/en-GB/making-shapes/images/tri2.png
diff --git a/en-GB/making-shapes/index.md b/en-GB/making-shapes/index.md
@@ -0,0 +1,102 @@
+---
+title: Making shapes
+description: Using basic shapes creating objects.
+notes: "notes.md"
+layout: project
+new: true
+project-type: community
+---
+
+# Introduction { .intro }
+
+In this project, you'll create objects by combining simple shapes. You'll be introduced the basics of JavaScript to make different geometrical shapes using HTML Canvas.
+
+<iframe src="https://trinket.io/embed/html/cfe39e41f3?outputOnly=true" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
+
+# Step 1: What is Javascript? { .activity }
+
+Javascript is a programming language used to make webpages interactive.Let's have a look at an example!
+
+## Activity Checklist { .check }
++ You'll be using a website called Trinket to write HTML. Open this Trinket: <a href="https://trinket.io/embed/html/50ddc249a1"  target="_blank">jumpto.cc/makingshapes-intro</a>.
+	The project should look like this:
+	![screenshot](images/java1.png)
++ The code within the <script> </script> tag is the Javascript code.
++ Within the script tags their are two functions: 
+	1- function setup - where the canvas is created and background is set. 
+	2- function draw - where you can draw shapes.
+
++ Now , lets create the canvas and give it a background color.For creating canvas we have to write 'createCanvas',which is written in  CAMEL CASE meaning if you have to write 'car wash' it will be written as 'carWash'.Canvas can be as big as the size of the browser window.
+
+	![screenshot](images/javafunc1.png)
+
+ Here, Canvas is extending the whole width and height of the browser window.	
+ Background color for example red can be specified as 'red' or in RGB format as ('255, 0, 0') or HEX as ('#FF5733').
+
+   ![screenshot](images/java2.png)
+
++ Let's draw a rectangle  or square shapes.
+  For rectangle or square shapes the code is :
+  rect(x , y , width , height ) .
+  ![screenshot](images/coordinate.png) 
+
+ + The top left corner of the canvas corresponds to x=0 and y=0.The x-coordinates increases left to right ,while y-coordinates increases   downwards.So shapes can be made on different places on the canvas according to their x an y coordinates.
+
+  ![screenshot](images/rect.png)
+
+ + The difference between rectangle and square is that square has same width and height whereas rectanlge has different width and height .        
+ + For filing the shapes with color ,write the code " fill('color name or HEX or RGB') " . 'noFill' is used if you don't want any color.
+
+
++ Let's draw a ellipse or circle shapes.
+   ellipse(x , y, width and height ).
+
+  ![screenshot](images/ellipse1.png)
+
+   Ellipse just like a rectangle has different width and height , while circle has same width and height.
+
+   ![screenshot](images/ellipse.png)
+
+
+
+## Save Your Project {.save}
+
+__You don't need a Trinket account to save your projects!__ 
+
+If you don't have a Trinket account, click the down arrow and then click 'Link'. This will give you a link that you can save and come back to later. You'll need to do this every time you make changes, as the link will change!
+
+##Challenge: Make a camera.
+
+   ![screenshot](images/cam1.png)
+
+For making a camera use rect and ellipse code .
++ Hint  For making circles inside the circle use this code:
+
+    ![screenshot](images/radius.png).
+
+ellipseMode(RADIUS)  uses the  the x and y parameters of the first circle as the shape's center point, but uses the width and height parameters to change the size of the circle.
+
+## Save Your Project {.save}
+
++ Let's make some lines and triangles.
++ For lines you will be using : line(x1 , y1 , x2 , y2 )
+
+     ![screenshot](images/line.png)
+
+ Instead, of 'fill' ,here we've used 'stroke' .Stroke is used for making a line or borders of different shapes , while strokeWidth determines the thickness of the stroke.Use 'noStroke' if you don't need any borders.
+
+   ![screenshot](images/line2.png)
+
++ for triangles the code is: triangle(x1 , y1 , x2 , y2 , x3 , y3 )
+
+  ![screenshot](images/tri2.png)
+
+  ![screenshot](images/tri.png)
+
+##Challenge: Make a fish with trangles.
+
+   ![screenshot](images/fish.png)
+
+ ## Save Your Project {.save}
+
+
diff --git a/en-GB/making-shapes/materials.md b/en-GB/making-shapes/materials.md
@@ -0,0 +1,6 @@
+---
+title: ProjectName - Materials
+layout: project-materials
+volunteer-resources: 
+project-resources: 
+---
diff --git a/en-GB/making-shapes/notes.md b/en-GB/making-shapes/notes.md
@@ -0,0 +1,42 @@
+---
+title: ProjectName — Volunteer Notes
+---
+
+#Introduction:
+Explain the project, focusing on what children will learn. Remember that these notes will be read by club leaders and not children.
+
+#Online Resources
+
+We recommend using [trinket](https://trinket.io/) to write HTML & CSS online. This project contains the following trinkets:
+
++ ['ProjectName' starting point -- URL](URL)
+
+Children can also make use of this blank trinket [(jumpto.cc/html-blank)](http://jumpto.cc/html-blank) to write their own HTML & CSS, or alternatively they can use this template trinket [(jumpto.cc/html-template)](http://jumpto.cc/html-template).
+
+There is also a trinket containing a sample solution to the challenges:
+
++ ['ProjectName' Finished](URL)
+
+#Offline Resources
+This project can be [completed offline](https://www.codeclubprojects.org/en-GB/resources/webdev-working-offline/) if preferred. You can access the project resources by clicking the 'Project Materials' link for this project. This link contains a 'Project Resources' section, which includes resources that children will need to complete this project offline. Make sure that each child has access to a copy of these resources. This section includes the following files:
+
++ ...List files here
+
+You can also find a completed version of this project's challenges in the 'Volunteer Resources' section, which contains:
+
++ ...List files here
+
+(All of the resources above are also downloadable as project and volunteer `.zip` files.)
+
+#Learning Objectives
+List the skills taught in this project, for example:
++ Variables;
++ Lists.
+
+Link to Digital Making Curriculum.
+
+#Challenges
++ "Challenge name" - explain the aim of each challenge - what skills will be used, and what is the outcome?
+
+#Frequently Asked Questions
+You can also add answers to common questions here. This will help club leaders when undertaking your new project with children. This section can be removed if it is not necessary.