Skip to content

EdX's front-end bootcamp assignment. Showcasing my capability to refactor code and improve accessibility and maintainability.

License

Notifications You must be signed in to change notification settings

jimmygian/horiseonRefactoring

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Horiseon Website Refactor

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.


Motivations:

  1. 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.

  2. 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.

What Was Done:

  1. 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.

  2. Descriptive Alt Text: Provided meaningful alt text for images to describe their purpose or content. This was especially important for images that conveyed information.

  3. 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.

  4. Improved Readability: Removed unnecessary CSS styles, clarified class and ID names, and separated concerns within the CSS stylesheet.

  5. Documentation: Added comments in both HTML and CSS files to explain the purpose and functionality of various sections.

Problem Solved:

  1. 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.

  2. 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.

What Was Learned:

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.


Usage

To use the refactored code, follow these steps:

  1. Clone this repository to your local machine.
  2. Open the index.html file in your web browser to view the Horiseon website.

Credits

This project was refactored by Dimitris Giannoulis.


License

This project is licensed under the MIT License.


Links

About

EdX's front-end bootcamp assignment. Showcasing my capability to refactor code and improve accessibility and maintainability.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published