D4DME – Meet the Team (Part One)

Today I was introduced to my team mates, Mongkol (Chace) and Kyle. The first task that we have been given in our new groups is to create a ‘Meet the Team’ page.  Chace decided to start work on the design of the page(s) with HTML/CSS. The page initially looked like this:

Untitled

Screenshot

To get used to the collaborative side of this project, I asked Chase to send me his project files so that I could have a look at his code and make some additions. We identified that it would be a good idea to comment our coding so that we don’t get confused by each other’s work. I suggested that we preface each comment with an initial so that we know who has said what, e.g. /* V: verity made this comment */, <!– V: verity has made this comment –>

Chace had initially created three separate stylesheets for the three pages (Home, About, Contact). To make the coding process easier for everyone in the group, I decided to refine this down to one stylesheet that applied to all of the pages. Whilst it was a nice idea to have different coloured headers on each page, it would make it more time consuming to make changes to all three of the stylesheets, so I suggested that we compile them into one. After this I made a few changes to the HTML to make editing easier in the long run.
One of these was to move the navigation to a separate file and link it in using PHP at the top of each page.

Untitled1

Screenshot

This means that we can make a change to one of the links without having to change it on each individual page.
Aside from this, I had a look at Chace’s CSS and made some additions such as pseudo animations (by using generated code from http://matthewlein.com/ceaser/) and using the drop shadow effects that Chace had made on the main divs.

To save us some time in the long run, I added a few extra lines of CSS to make the website dynamic and scaleable with the browser. This made it so that the content of the page would adapt to fit the size of the window and wouldn’t cut anything out from view when scaled.

The final result of my additions ended up looking like this:

1

Screenshot

2

Screenshot

We agreed that it would be a good idea to wait until Wednesday, when we could all meet up, to add content to the page.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s