Uploading to Dakar

Uploading my work to dakar was a problem as i had a lot of issues using FileZilla and even after half an hour of trying different things with it, it was not showing up when I logged into my dakar account, the FileZilla client wasnt copying my files across properly. Due to this I had to store my files on Dropbox and get a link to send so that they could be viewed.

filezilla

Final HTML page with CSS

screenshot 8

I am quite happy with the finished thing, it is very simple but it shows off multiple CSS elements and in a more interactive way for the person viewing the website. The HTML coding was also quite well set out and I made sure to keep it neat so it was easy to edit as I went and if made any mistakes it wasn’t too difficult for me to spot them and correct them.

Creating a HTML page with simple CSS

Creating the HTML page was a little tricky as I am not that great at coding, I used the previous lessons on codecademy to help me create it. I decided to go with a page that explained the different thing you could do with CSS to change a HTML page while simultaneously showing them for each section referencing it. For instance the section describing how you can change the background colour on elements I changed the background colour on in.

screenshot 6 screenshot 7

Display and Bootstrap Tutorials

The next tutorials for creating a website were the Display and bootstrap tutorials. The display tutorial showed me about display and placement of the different aspects of the site, using the display, position and float classes to move around and position the titles and paragraphs. The bootstrap tutorial taught me a lot that I didn’t already know, especially using the rows to help organise the page. It is a really helpful framework to help improve sites, with lots of different classes you can add to change the design and functionality of your website.

Screenshot 3screenshot 5

CSS Tutorial

The CSS tutorial introduced me to CSS elements and how they could be used to change and influence all of the different HTML classes, for instance I could change everything included the in the ‘nav’ class div with .nav in the CSS file. Once in the CSS file I can change element like font size, colour and padding around the different aspects. As well as changing the colours and font I also changed the background to an image, which is one of the things I will be using when I create my own simple HTML page and use CSS to give it colour and change all the layout.

screenshot 2

HTML and CSS Codecademy Tutorials

I started my assignment with the HTML and CSS tutorial on codecademy.com, the first section was to write the HTML sections of the code which create the building blocks of a web page. It was essentially a refresher lesson for me as I remembered a lot of the things it went over like <div> tags, headings <h></h>, paragraph<p> tags and general tags for setting up the page.
Screenshot 1

This will help me to create my own simple HTML page, also using CSS to make it look a lot more aesthetically pleasing and more complex than just a base HTML page that only includes basic text.

Coding Workshop

Processing Workshop

This processing workshop was focused on using float a void commands, and the goal was to create a rectangle on the canvas that would change colour whenever you clicked it. This was different from the other workshop we had where we had to create the random circles because we went about a different, more compact method with the coding than before. I found this a little trickier than the other coding workshop as I had to make sure everything was correct with this method as I was trying not to get the rectangle to change colour by using a long winded method. Below are some screenshots of the code and then the canvas where the rectangle is being created.

Screen Shot 2014-10-16 at 11.24.31

Screen Shot 2014-10-16 at 11.24.37 Screen Shot 2014-10-16 at 11.24.39 Screen Shot 2014-10-16 at 11.24.40

General Introduction Workshop

Photoshop Intro

During our first workshop we were introduced to some of the programs that we will be using throughout the course and some of the basics. We looked and Adobe Photoshop, Camera Raw and Adobe Bridge. We were given a set of basic pictures and were taught about masking images and other simple things like that. I had previous knowledge of Photoshop from college so I decided to mess around with one of the images and you can see what I did below.

Screen Shot 2014-10-07 at 15.49.19 Screen Shot 2014-10-07 at 15.49.23

Screen Shot 2014-10-07 at 15.49.31

Processing Basics

In another of the workshops we went over some of the basics in Processing, which gave us a good introduction to coding with Java. During the workshop we were set the task to create a program that creates random circles of different sizes whenever you clicked the mouse.

Screen Shot 2014-10-09 at 11.49.28

I managed to figure out how to do it using floats and the ‘random’ command so I decided to try to make it look a bit more interesting by making the circles random different colours whenever the mouse was clicked aswell, below you can see some screenshots of the code when it was running and how the circles are all in random positions and are random colours and sizes.

Screen Shot 2014-10-09 at 11.49.38      Screen Shot 2014-10-09 at 11.49.35

I really enjoyed using processing and it was very satisfying once I figured out how to get the code to work properly and make it do exactly what I wanted it to do whenever I clicked the mouse button.