Skip to content

Latest commit

 

History

History
33 lines (23 loc) · 2.38 KB

README.md

File metadata and controls

33 lines (23 loc) · 2.38 KB
Raw

Implementation Summary

The created website consists of 10 pages, consisting of a:

  • Home,
  • Products, Tissue Foil Product, Elephant Hide Product and, Kraft Paper Product,
  • Bases selection, Simple Folds base, Dog Folding Demonstration,
  • Contact Us, and
  • ‘Error 404 Page not found’ page

Within these pages, a number of CSS and JS features were implemented, such as

  • Height changing, and sticky header
  • Navigation dropdown arrows, and information and class toggling
  • CSS @media and variable use for changing font, and other sizes
  • CSS enabled re-sizing map
  • Application of 3D CSS transitions to SVG elements
  • JS enabled SVG origami demonstration
  • Custom Carousel

Conclusion

The website created was successful in providing the main functionality of the origami website as designed. Although lacking some aspects, such as additional origami bases, the functionality of these missing aspects are all demonstrated through other pages. I am happy with the website as a whole, and especially proud of the origami dog demonstration and simple fold transitions.

Through completing this assignment I particularly learnt about, and tried to practice the concept of clean CSS. In a lot of past projects I have had a bad practice of debugging by putting in random CSS code, and when something works, leaving it. In this project I especially tried to clean up unnecessary CSS and ensure that if this source code was to be used in the future, styling could be applied to elements with a confidence that unintended changes to external elements was minimal.

This site could still be developed further, and a number of features ideated in the design were not included because of time constraints. Features like product filters, utilising Flexbox order and JavaScript sorting, or additional CSS transition base pages could be implemented.

For more information about the design process, see the Design Report.

For more information about the technical aspects of the product, see the Website Implementation Report.

The Website Implementation Report is provided as was submitted.

The copyrights or trademarks of any origami designs, and/or images remain the owner/s' as referenced. Any infringements, please contact me, and I will take it down. This project was submitted for educational purposes.