Website Design & Development
The Total Garage Concepts project features a fully responsive design built on CSS Grid Layout, with Flexbox as a backup. This approach eliminates the need for external code libraries like Bootstrap for responsiveness. The project began with the HTML5 Boilerplate to ensure adherence to modern best practices, and browser styling was standardized using Normalize.css. Instead of using templates, all coding was performed manually using the Brackets code editor. The Total Garage Concepts team can add blog posts and manage content and images on the site through Perch, the content management system. All pages were validated for W3C compliance, except for lazy-loaded images and Cloudflare script optimizations, which were implemented to improve page load speed. The CSS files are modular, and Gulp was employed to merge and minimize them in the final build for enhanced loading performance. The website achieves an impressive load time of approximately 1.2 to 1.4 seconds per page, outperforming over 90% of websites in terms of speed. CSS and JavaScript animations were created using libraries such as Animate.css, Hover.css, and T-scroll. Additional tools and libraries included Modernizr, jQuery, Akismet, Google Fonts, MagnificPop, Vanilla Lazy Load (Verlock), Cloudflare CDN, and Google Analytics. Software utilized for this project comprised Brackets, Photoshop, Perch CMS, VectorMagic.com, and CompressPNG.com.