The Horiseon Website Refactor project aimed to improve the accessibility and maintainability of the existing Horiseon website code. The primary motivations behind this refactoring were to enhance the user experience for all visitors, particularly those using assistive technologies, and to make the codebase more organized and easier to maintain.
-
Accessibility: The original code lacked proper semantic HTML elements and meaningful alt text for images, which made it less accessible to users with disabilities. By improving accessibility, the aim was to ensure that all users could access and navigate the website effectively.
-
Code Organization: The original code had CSS classes and IDs with inconsistent naming conventions, making it challenging to understand and modify. The updated code refactored the CSS and HTML to improve code readability and maintainability.
-
Semantic HTML Elements: Replaced non-semantic elements like
<div>
with more appropriate semantic elements such as<header>
,<nav>
,<section>
,<article>
,<aside>
, and<footer>
to provide clearer structure and meaning to the content. -
Descriptive Alt Text: Provided meaningful alt text for images to describe their purpose or content. This was especially important for images that conveyed information.
-
CSS Refactoring: Reorganized and refactored the CSS code to follow a more logical structure, with comments for clarity. Class and ID names were made consistent and descriptive.
-
Improved Readability: Removed unnecessary CSS styles, clarified class and ID names, and separated concerns within the CSS stylesheet.
-
Documentation: Added comments in both HTML and CSS files to explain the purpose and functionality of various sections.
-
Accessibility: The project addressed accessibility issues, making the website more inclusive and user-friendly for individuals with disabilities, including those using screen readers or keyboard navigation.
-
Code Maintainability: By restructuring the code and improving naming conventions, the codebase became more organized and easier to maintain, reducing the likelihood of errors and making future updates simpler.
Through this project, I learned the importance of writing clean, semantic, and accessible code. I gained experience in refactoring code to meet best practices, improving the user experience, and making it easier for developers to collaborate and maintain the codebase. I also learned how to create a README file to document project changes and provide context for future developers. Finally, I learned the importance of commiting and pushing code to git for efficient version control.
To use the refactored code, follow these steps:
- Clone this repository to your local machine.
- Open the
index.html
file in your web browser to view the Horiseon website.
This project was refactored by Dimitris Giannoulis.
This project is licensed under the MIT License.
- Deployed application: https://jimmygian.github.io/horiseonRefactoring/
- Repository: https://github.com/jimmygian/horiseonRefactoring