Web Development
Unit Reflection
Introduction
I am going to reflect on the WEB14105 (Web Development Unit) that I have completed. This is going to show my learning process of the unit and greater understanding of web development. By listing my learning objectives that I listed at the beginning of the unit, I can see if I have followed and met themes objectives and to what extend.
This will also be a great way to list any problems that I found during the process and how i came to resolving them and the problem solving can be used in future projects to better myself and become more efficient and productive.
Meeting the Learning Objectives
Towards the beginning of the project, I listed in a Markdown (.md) document on my Github, some learning objectives that I hoped to achieve throughout the duration of the project. These were:
- Improve organisational skills.
- Develop technical ability.
- Further understanding of the processes of Web development.
The first learning objective was to Improve my organisational skills. At the start of the project I created a Trello board called UNI. This allowed me to list any task that I was assigned during lectures such as Blog posts, and thing related to the website, but also for me to give myself tasks and deadlines outside of the unit to ensure that my time is well spent and that I am productive. This learning objective has been met and using various features on Trello such as Due dates and Checklists I have organised my work in an efficient way.
Read my article about using Trello for this project in more detail here.
Another way In which I began organise my work was to upload all the code into GitHub so it is open source and available to the public. This is also a way to back up any code that may be lost. I used the software, SourceTree to manage files on GitHub and commit and push any files to it. A problem I found with this was that as I kept moving from different files such as static HTML and CSS files, to PHP Wordpress themes on a local server, the location changed and I forgot to upload them.
This would have ensured that the website was regularly backed up consistently. I have failed to organise myself using GitHub but overall my consistent organisation on Trello has meant that I felt I met the learning objective to become more organised.
Another learning objective that I have was to develop my technical abilities within coding languages such as HTML, CSS and PHP. Previous to starting this unit I had only a very basic knowledge of HTML & CSS which I had gained from outside freelance work and previous units. The knowledge was basic and I didn’t feel confident in creating a website from scratch (Previously only template with changes to few HTML and CSS).
I had previously had no experience in using PHP other than making a Wordpress Website. I aimed to try and learn the basics throughout this unit so that I could create a Wordpress site using a custom theme. This has been achieved using the LearnPress starter theme which gave the very basic components of a theme and then used my knowledge gained over the unit to make a dynamic site. The PHP learnt has met my beyond my aim and I feel confident to use it for other projects and have even applied it to a freelance project that I have been doing alongside.
The final learning objective that I set was to gain a further understanding of the processes of Web development. When setting myself this learning objective I had in mind to learning practises such as Debugging a website using the Inspect Element feature on Google Chrome as I had no previous experience prior to the unit.
In the duration of this unit is surpassed my expectations for meeting this objective and learnt in depth the process of web development such as creating a local copy of Wordpress on a server using MAMP. This is a process I didn’t even know was industry practise and never considered, however was very useful and meant that I could work offline (When travelling etc). This was a fairly easy process due to the large amount of in-depth tutorials online which were easy to follow.
Another process that I learnt was to use Skeleton, a lightweight grid CSS boilerplate. This made my website responsive and resizable with a mobile-first approach which is a necessity now with the introduction to Google’s recent changes to its Algorithm (Mobilegeddon). This was an integral part of the styling of the website and gave me a reference to use from. Previous to this, any styling I had done using CSS was editing templates. This allowed me to use the 960px grid and understand it’s importance in web design.
I also learnt about the process of creating a PHP Wordpress template. This is a process that I had never done before and found to be a really interesting process that I can use in other project and freelance web design on a regualr basis.
Originally I was going to edit the Wordpress default theme “TwentyFiftenn”, however this had far too many unnecessary components was far too complex that was needed for my website. I then tried using Bones which I had looked into before. This also proved difficult and felt dated with unnecessary features also and had various problems with linking to my CSS and conflicted with their versions. I then used LearnPress, a minimal theme for Wordpress that only contained the minimal features. From this, I learnt how It is formatted and created the site using this theme.
Another process related to the learning objective of gain knowledge of the web development process was to migrate from a Local Wordpress to a Remote Wordpress hosted by a server. This was a new process and found it very useful and easy using online tutorials and documentation to do so. This skill is transferrable in future projects and essential for creating a Wordpress website for freelance clients in the future.
I went beyond the objective and actually learnt a few basics of jQuery and Javascript, something I didn’t even consider I would learn during this unit. Therefore I feel pleased with what I have achieved and can use these techniques and skills in my career.
Problems and Resolutions
There were a number of problems that occurred during the process of creating a website due to the number of new skills and techniques that were necessary to learn and the complexity of the website that I wanted to achieve. Using various techniques I managed to resolve some of these issues and create a good site that I am proud of.
One problem that I found was how to make the jQuery function of muting the video when loaded but when clicked, its un-muted from where the video left off. To begin, I started to use my newly learned knowledge to try this for myself however after many tries did not succeed. I then used Google to try and gain some more knowledge. I used StackOverflow, which had a vast community of developers to try and see if anyone else had the same issue and if it was resolved. I found similar ones and used this to start to create the function. Finally, I managed to resolve it with the help of my peers to make the function work properly. I think that a fresh pair of eyes helped to identity the tiny issues that were causing it to not work.
Another problem that I found was with the styling (CSS). As I have been using Skeleton Boilerplate with some custom changes, I found a few issues with its positioning and padding. This was an easy fix and used the inspect element to allow for a live preview and then once changed to the correct position, I implemented it into my CSS code.
I had a problem with using the Advanced Custom Field repeater field plugin in which It wouldn’t display properly unlike the usual Advanced Custom Fields would. I googled the issue and it led me to a few websites such as the official plugin website. This had documentation about how to implement repeater fields into php to display dynamic content onto the site. Unfortunately I still could not get it to work and had to get the help of my peers and lecturer to try and fix this issue.
As I have been using Skeleton, It’s CSS is built to be responsive. However, in the changes I had made and the content I had used, there were some issues with resizing to mobile devices. Such as it did not flow due to the positioning and I needed the navigation to fall below the logo image to make it easily accessible when viewing from a mobile. These issues were tedious changes to the CSS to position it correct and was resolved using the Inspect Element tool on Google Chrome to make the changed with the ability of live preview, then implementing them into the CSS file.
A big problem that occurred was that when migrating the site locally to remote (Offline to Online), it appeared with lots of errors on the page displaying that console log failed. To fix this issue I looked online to see if anyone had the same issue. There were similar and they suggested deactivating plugins and then updating them and reactivating them. I did this and it still did not work. I then decided to try delete the bits that the error said on the code by removing all lines with Console.Log in. This removed the issue.
The final issue was when uploading the code to Github. I accidentily uploaded a video (.mp4 file) to my repository that was over 100MB. This then failed to let me commit any new changes. Myself and Matteo (Lecturer) then tried to look online and fix this issue and got no where. As a result, I then creaetd a new GitHub repository and had to reupload the nodes and commits to fix this issue.
Project Improvements
There are a number of changes that I would wish to make if I were to do this again.
The main improvement that would have been made was to build and design and internal e-commerce feature for when users wanted to purchase tickets on the site. This would also fit in with my project aims mentioned in my formative presentation of increasing ticket sales. A problem I find with the current website is that although it’s a very good feature and meets the aims myself and the client had, it takes users away from the use externally onto other sites. By creating an internal service would ensure that users are kept on the site and could increase views and interactivity that they have with our site and improve their experience.
One thing I really liked about the website was it’s use of ‘Interactive’ features such as clicking on the video to change the mute or the video player functionality. I feel that these give my website a unique feel so them and provide the user with a better experience. I would like to try and test my abilities to create better functions that allow for more interactivity on the website and a better user experience.
Originally when first doing the wireframes for the website, I had an idea to add a heart system in place similar to Instagram and Pinterest where users can like and view later. This was planned to be used for the look book feature to ‘save’ their favourite images to view quickly and easily at a later date. It wasn’t until I got further into the process that I realised the complexity that this would be and sadly did not have the time and knowledge to do so. However, I still feel that this is a great feature to the site and would love to implement it at a further date for the client.
Personal and Professional Skill Improvements
There are a number of Skill that I learnt throughout this process to better myself as a person.
One skill that I felt I learnt from this was organisation and time management. As previously discussed, my regular usage of Trello and Sunrise Calendar to manage my tasks with internal deadlines was a key to ensuring that the work-load was consistant and I could achieve everything that I wanted to do so. This is a great skill that I can continue forward into everyday life and also Freelance work when working with clients to ensure that I meet their needs and deadlines.
Another skill I learnt was my technical abilities with learning how to code in HTML, CSS, jQuery and PHP. Most of these were new to me and I had very little knowledge. However, throughout this unit I have learnt many skills and programming languages which have enabled me to follow through with this project and create a dynamic website. This skill is essential for my career path and great as the world continues to head digital in every aspect of life.
Since I am designing for a client, I have had to communicate on both a formal and informal occasion to discuss the websites progress and the features that both he and I wanted. This allowed me to develop my communication skills further. This is a transferrable skill across both my personal and professional life. This could be used in my professional life to further talk to clients in the correct professional manor giving me a good reputation needed for working freelance.
When creating a presentation for my formative of the unit, It allowed me to better develop my presentation skills further when presenting to the class. From this I also gained good feedback to better the project and define it. This allowed me to learn the skill of listening to feedback and taking it on board rather than refusing it. These skills will be used both in my personal and professional life.
Tom.
Web Media Level 1. Ravensbourne.
WEB14104
Tom Sharman.
