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

PROPER FORMATTING!!!!

Advertisements

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

Variables

width

height

mouseX

mouseY

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

Loops

For loop:

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

//do whatever we want repeated

}

Arrays

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 ( );

Colour

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 ‘processing.org’ to gain confidence and skill.