Demo Page - Front End Develop Reference

Goals

  • Build easy-to-use interfaces between the user and the product.
  • Implement the requested design based on the requirements provided on the specified devices (computer, phone, tablet) for the supported browsers.
  • Get familiar with SEO tools and have a deep understanding of how to improve a website’s performance in mainstream search engines.
  • Keep yourself updated with the latest tools, strive to use the best tools for the job. 
  • All code must validate with ZERO errors.
  • All code must be ‘semantically correct’ and ‘developer friendly’. 


    “Semantically correct” means the markups need to represent what it is since there are a number of advantages to coding semantically correct code, including SEO considerations, page load considerations, and accessibility considerations, among others.


    "Developer friendly" means that the code is ready to be handed off to others. That is, the code must be clean, the code must have sensible commenting, and the code must have sensible indenting. When another developer looks at your code, they should be able to understand how it works with minimal thinking.


  • Pages must be optimised for fast loading. Make the best use of Foundation and minimize the file size of your stylesheet and HTML files.
  • A front-end developer may not necessarily be doing the testing or the design work, but you should definitely be responsible for the faithful implementation of the final design.

Front End Develop File System

Front End Develop File System demonstrates front end related file structure and related features for frontend development. When we initialise a new project, we should follow the file system to increase development efficiency and make the project easier to maintain.

UI Elements

UI Elements list all UI elements template related to web UI developemnt. Demonstrations and usage will be illustrated in each UI element show page.