ian-1981 / 11056-project1

11056 project 1 work

11056-project1

11056 project 1 work

Reflection

I thoroughly enjoyed working with HTML again after many years. It was good to get back into problem solving through coding and tweaking the page to look right. There was a fun and fast learning curve for CSS which resulted in surprisingly good results, despite having never used CSS previously. I am generally happy with the page I produced, however given time the biggest take away is I would rebuild it again from scratch to significantly improve code neatness and clarity. The code I have produced is not as structured and clear as I would have liked, mostly because of tweaking, chopping and changing as a result of the learning process. Learning more about the Github process would also help the overall process. There seems to be a lot of intricacies in the git push/pull model that would help, particularly with submitting and maintaining the assignment.

What Worked Well

Completing this project was a great way of learning (and re-learning!) HTML and CSS. Quite lot has changed since the last time I have seriously coded in HTML *unsurprisingly!), so new functionality exists that makes life easier when creating complex sites. Some examples are: -Grid - I liked working with the grid elements, was a logical function to use, once understood and allowed for some really nice design elements to be included -flexibility with CSS – as a whole, CSS provides a level of flexibility and customisation that is welcome from the basic HTML stack. -Overall layout - I like the look and feel of the page design that I achieved, however there is always room to improve. Using CSS was powerful in designing pages that were dynamic and aesthetically pleasing. -Responsiveness - I was satisfying to see the page act responsively, this is not something that was easily achievable when I first wrote HTML code.

What I Would Improve

There are quite a few areas I would like to invest more time in across the site. As my knowledge and experience in HTML5 and CSS increases, there would be areas that would benefit from re-coding in a more efficient manner. Some specific points:

-Calendar - would look at embedding a google calendar with functionality to add events dynamically. The calendar I have built is significantly less than ideal and would not make the final cut. -code neatness - given the learning process, the code is not at neat as I would like. Building 1 element at a time means there is likely a lot of duplicate code or redundant code that I would be able to clean up if I re-wrote the page from scratch. -standardisation - -map page - I had plans to build a map page to direct people to points of interest around Canberra but would need to start looking at far more serious JS coding to make this happen. It will remain a nice to have for this body of work. -more work on images/logos - The images and logos from the existing Canberra Modern website require additional work to help them fit in the style of the new website. I chose to focus on coding the HTML and CSS rather than spend significant time editing these images. Again, in a professional context I would allocate additional resources to this task. -Footer - I’m not at all happy with the footer, I think it is too complicated for the page, but I wanted to have a go at a few functional elements, like the email subscribe function and text decoration elements. If I was to start again, I would build a footer with company details and social links only to keep it clean and neat. -There are still a few "placeholders" within the built webpage, this came down to a time issue.

Lo-fi prototype

This gave me a good sense of what I wanted to achieve; it then became a process of learning how to make it work in code. Overall, the lo-fi prototype gave me initial focus for the page, which I then modified and built on as my coding knowledge increased. This initial focus helped me get started and learn some basic coding functions to make it work. The deviations from the original design are mostly as a result of making the initial ideas happen. There are also a couple of examples of the capabilities in CSS exceeding the ideas in prototype, resulting in a better product. All images are linked in the Assets>images>prototype folder.