HTML/CSS Workshop. 1 – Cheat Sheet

CSS, HTML, Programming, Workshop
Screen Shot 2014-10-23 at 11.27.56

Screenshot of what we went through in our workshop

In our first HTMl/ CSS workshop we went through some of the basics. Here is a list of things we learnt which will be beneficial when arriving to the second workshop.

<html></html> States that it’s a HTML document

<head></head> Keeps the information that isn’t displayed on the webpage itself

<body></body> Visible portion of the document

<title></title> Found in the head tags. What the document is called

<img src=”name”/> Adds an image. Self closing

<img class=”img-responsive/> Makes the image and document ‘responsive’ (Adjusts to screen size)

<div></div> Defines a section in a HTML document


Processing Workshop. 2 – Cheat Sheet

Programming, Workshop
Screen Shot 2014-11-09 at 15.06.48

Code for generating random circles 

Basic Structure

void setup ( ) { //runs once only


void draw ( ) { //runs repeatedly during the execution.


Variable Types

Int, positive and negative integer variables

Float, floating point positive and negative variables

Boolean, variables that can be true or false

Basic Functions

println ( )

size (width, height), sets main window size

background (colour), sets window background colour






Conditional Structure

if (condition1) {

} else if (condition2) {

} else {


< less than

<= less than or equal to

== equal

> greater than

>= greater than or equal to

!= not equal

&& and

|| or

! not


For loop:

for (int i=0; i<10; i++){

//do whatever we want repeated



Fill/ Stroke

fill (colour); sets the colour used to fill shapes

noFill ( );

stroke (colour); sets the colour used to draw strokes around the shapes

noStroke ( );


Value scale foes from 0 to 255

colour (grayscale);

colour (grayscale, alpha);

colour (red, green, blue);

colour (red, green, blue, alpha);

ellipse (posx, posy, width, height);

rect (posx, posy, width, height);

My First Programming Experience

Programming, Workshop

Today was our second workshop, this was our introduction to programming and Java. We started off by learning keywords and some common misconceptions about programming to ease us in. We then moved on to a practice task where i leant about the syntax of Java and how every programming language follows a similar structure. We worked in a program called ‘Processing’ which also supports both Javascript and Python. Here is a screenshot of some basic programming from the workshop.

Screen Shot 2014-10-06 at 23.47.21

I hope to carry on and practice¬†independently by looking at tutorials and examples on ‘’ to gain confidence and skill.