Horiseon-Semantic-Refactor

Refactoring the code to make Horiseon more accessible and search engine friendly.

User Requirements

Taking the original site and improve the code

1. Make the HTML follow a Semantic structure
2. CSS refactor using the DRY method to reduce the amount of code

Problems solved

1. The HTML has been refactored, changing <div> to the appropriate semantic tag.
2. The CSS file has been reduced from 200+ lines of code to 139.
3. Original code contained multiple classes with identical styles. These have been moved to one class and the appropriate class applied in HTML
4. Title Tag now holds a suitable title.
5. Also added to HTML the Viewport meta tag to help with screen display sizes.
6. Commented both the HTML and CSS
7. All Images and Icons given alt tage descriptions

Hosted Site:

https://deanw77.github.io/Horiseon-Semantic-Refactor/

Project Overview

This project has provide a great opportunity to to both practice my use of GitHub and Branches as well as providing experience on editing a clients code. It was interesting to see how much code could be removed from the original CSS without impacting the actuasl appearance of the site.

Final Result Mock Up