D4DME – HTML Forms (Part One)

Whilst I was waiting to hear back from Simon, I put my time to good use and started to build the form(s) using HTML (and later on PHP for form validation). For the time being I used some of my own CSS so that I could see everything clearly on the page, though once everything is working, I will be able to integrate my coding into the CSS that Chace is making. Starting with the sign-up form, I coded a basic page and form  that linked to a table in PHPMyAdmin, which looked like this:


Screenshot of my initial Website

The table within my database that the form submitted to looks like this (as based on my ERD):


Screenshot of PHPMyAdmin

Once my PHP were working together with my database, it looked like this:


Screenshot of my code in Brackets

Last but not least, my HTML (which at this point was just the form and it’s containing div(s)) looked like this:


Screenshot of my code in Brackets

At this point, anything inputted into the form fields would be sent to my ‘user’ table in my database (only if there is something in every form, however, thanks to the first step of form validation I conducted). My next step is going to be validating the form properly.


D4DME – Meet the Team (Part Two)

Today was our first group meeting as a team. One of the things that we decided to cover was further changes to our ‘Meet the Team’ page. Chace and Kyle suggested a few things that we could add to make the pages look a bit more efficient (aside from content).



We asked Rob if he could take a couple of photos of us working together as a group to go in our ‘Group Photos’ section.



On our ‘About Us’ page I created some similar buttons to the navigation that linked externally to our individual blogs.



All that is left to do is add our individual bios to the ‘About Us’ page and possibly some more group photos. Aside from that, our ‘Meet the Team’ page is mostly finished.

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:



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.



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:





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.

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.


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.


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.


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




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