This is a Code Refactor made in HTML and CSS.
This particular module is to ensure people with special needs can have access with this website. This initial problem is that there were some inefficiency of the semantic tags and large image files. It would then make the machine harder to read and understand it. It would also take longer to load the page with big image files. In order to make the website to be fully optimized, I have to resize the image file and to communicate clearly and efficiently using these semantic HTML tags that I will need to divide the page content into its basic parts : header, nav, main, article, section, footer. The HTML5 tags can be used in the place of div tags to break the page content into identified parts, each of which fulfills a specific role since machines like Googlebot and Bingbot definitely love this.
The app is basically composed of 2 pages : index.html and style.css. This also has some images in the img folder.
- [VScode] (http://code.visualstudio.com/) - The editor of choice
- [Chrome DevTools] (https://developers.google.com/web/tools/chrome-devtools) - The editor pages on-the-fly and problem diagnostic
- [Adobe Photoshop] (https://www.adobe.com/au/products/photoshop.html?promoid=PC1PQQ5T&mv=other) - The image-editing software
WAI -ARIA Roles - MDN Web Docs
Semantic Tag - MDN Web Docs
Semantic HTML5 Guide - SEM Rush