Workshop Compilation (Building the dummy website)

Over the last ten or so weeks, Kyle (workshop tutor) has been teaching us how to create a website from scratch. This post contains a compilation of screenshots from each step in the process with highlights over the new content added to each stage. (This is mostly here for my reference to go over what we covered but it is still relevant to the unit). 


Continue reading

D4DME Workshop (Project folder/files hierarchy)

For the first official workshop of the D4DME unit, Kyle (workshop tutor) got us to set up an example project folder to use as a starting point for any website project.

3

Screenshot of Project Folder

The layout was fairly straightforward, as we had setup a similar folder for our dummy website in the past series of workshops. The only new element to the above example was the addition of the templates folder, which allows for cleaner HTML/PHP files (as you can make separate files such as a ‘navigation’ to be included at the top of every file rather than having the same code on every page).

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].