The End of Level C

Now that the Level C year of Digital Media Design is over, I have decided to take a closer look at some of the Level I and H blogs from the older students on this course in order to develop a more professional blogging style.

I am very pleased to say that I passed the level C year with a Distinction (and a letter of commendation). Although the first year of our degree makes up 0% of our overall grade, I feel that I have been able to prepare myself for level I and look forward to the challenges that it will present in the next academic year.

Blog Post System

We were set a homework task this week to create a post system for our blogs. I decided to keep mine simple and colour co-ordinated with my blog theme (teals and greys). All paragraph text will be aligned ‘justify’ like this block of text here so that it touches either side o the blog post and lines up with the images.

The width of my blog posts is 440 pixels wide. As I want the images to align with the text, I set them to full size and align them to the center.

01

Screenshot of ____

Every image will open in a new page to be viewed in full. They also have a reference beneath them briefly explaining what they are and (if applicable) linking to the appropriate source.

0

Screenshot of ____

Any image that is smaller than 440px wide will be placed into a template image on Photoshop and padded out either side with a colour that matched my blog. That way all images will reach the same width as the text.

Links look like this.

References

References will be formatted in the BU Harvard Referencing style in this section beneath a h2 tag.

D4DME – The GitHub

During today’s group meeting, I decided that it was about time I understood how to use GitHub properly. Luckily enough, Rob decided to drop by the lab whilst we were having our meeting, so I asked him to give me a quick tutorial on how to use the command line function.

12

Screenshot of the GitHub Command Line Function

He showed me how to commit files to the repository using simple commands, as well as how to push and pull files to the website without needing to upload anything manually. I gave this a try with the project folder from our ‘Meet the Team’ page to see what would happen. After pushing the folder to GitHub, I made some changes to the colour scheme before committing again and taking a look at the files on the website.

Untitled3

Screenshot of GitHub

Now that I understand how to use GitHub (and see why it is a practical way of working) I intend to make sure that my group understand how to use it.

Infographic Poster – The Design (Part Two)

SAM_1215Once I was happy with the general design for the title, I started to think about how I could represent more of the symbols that I had drawn earlier. Having already attempted to make the mountain, I went back to improve it with my new design strategy of using gradients, as well as having a shot at making the sun.

UntitledAfter applying gradients to the mountain, it looks more like a complete design rather than a flat triangle. The addition of darker tones also helps make it more obvious that it is a mountain (though I understand that it could still be mistaken for something else). The sun was fun to make; I layered different shapes on top of each other until I resembles the shape I had sketched in my book. The gradients helped to blur the different shapes together.

Untitled-2Next came the three states of water scale that I sketched at the top of the page. I figured that if I am going to be showing how water is cycled throughout the states without the use of words then I would need some form of scale to represent these changes in a simplistic way. After showing the symbols to my friends, one of them remarked how the ‘gas’ symbol wasn’t obvious at first and that I should change it to look more like a cloud of water vapour or smoke.

UntitltdyjedI was quick to change the gas symbol, as well as adding in the arrows to represent the changes between hot and cold.

Personal Project (Practicing HTML/CSS)

After completing the Codecademy course for HTML/CSS, I decided to start making my own code using ‘Brackets’. I have known about ‘Brackets’ for a while and think it is a good place to start, as it is easy to link in CSS stylesheets and JS scripts.

blogpost1

I decided to use a monochrome colour scheme for my first try, as it is much easier to make the CSS look ‘nice’ if everything works harmoniously (as opposed to ugly hues). I found a basic pattern background on a website called ‘Color Lovers’, which is a nice site to find colour schemes on.

blogpost2

The ‘Nav’ bar on the side is functional and links to a separate page for each list item link (For example, the picture above is the page that ‘LINK ONE’ directs to).

blogpost3

blogpost4


Bibliography:

Thiess, P., (Adobe Systems), Unknown date. Brackets [online]. Available from http://brackets.io/ [4th October 2014]

Codecadamy HTML/CSS (Part Two)

blog post4

I managed to complete the HTML/CSS course on Codecadamy today. Whilst I knew most of the basics that it covered, there were a few things that I picked up along the way that were new to me. The last task on the course was to create a page following loose instructions.

blog post1

Mine ended up looking like this. It’s very basic, though the idea was to show everything that the course had taught you to prove that you understood. I am now going to go use ‘Brackets’ to play around with my own coding and try to create something a bit more adventurous.

 blog post2 blog post3

Codecadamy HTML/CSS

After I had finished my workshop today, I started the Codecademy course on HTML/CSS. Needless to say, I haven’t finished the course completely yet, though I have made it over 3/4 of the way. Most of the content is stuff that I am already familiar with, though there have been a few parts that have been completely new to me and were fun to figure out.

blog post

To be brief, the few specific things that I didn’t understand before (but now do) are:

  • How to make tables properly (I was bad at this before)
  • How to use a border radius to curve edges
  • The actual different between class/ID
  • What pseudo class actually means

I will hopefully finish the course 100% tomorrow, as I want to move on to some more complicated wed design and possible start designing things for practice.


Bibliography:

Sims, Z. and Bubinski, R., 2011. Codecademy [online]. Available from: http://www.codecademy.com/ %5B2nd October 2014].