Explore the project page
View the github-pages
The focus of this project was on refactoring an existing codebase to increase the usage of semantic HTML, ultimately increasing the web accessibility of the resulting product. The existing code included an HTML and CSS file for a company webpage (i.e., Horiseon), along with a "User Story" and set of "Acceptance Criteria". The webpage outlines Horiseon's company offerings, along with the benefits associated with leveraging these offerings. There are a number of images and figures included to supplemnt the literary content.
- Updated the <title> to reflect the name of the company, more descriptive.
- Changed the <div> containing <h1> and <ul> to be a <header>, with the aria role of "banner".
- Changed the <div> containing the <ul> to be a <nav>
- Changed the <div> containing of the main content to be a <body>, and added the <main> tags.
- Added an role and aria-role to the <div> containing the background image.
- Added <section> tags in place of <div> tags for may content sections, and <header> tags fro titles.
- Added alt content for each image of the main section.
- Changed <div> of the right-hand content to be an <aside>, and added <figure> tags in place of divs for each benefit.
- Added alt content for each image of the aside section.
- Added <header> tags to contain the heading of each figure.
- Changed the bottom <div> to be a <footer>, and changed the <h2> to an <h4> to follow the logical flow of the document.
- Updated the relative paths of all nested CSS selectors based on changes above.
- Combined the individual classes for each section, header, and image of the main container as styling had been the same.
- Reordered classes and selectors to be in line with the HTML flow (ex., moved body selector down after the header).
- Combined classes for the aside headers, content, and images as the styling had been the same.
- No frameworks were used in the creation of this project.
To get a local copy up and running follow these simple steps.
None
- Clone the repo
git clone git@github.com:cynthiwu/code-refactoring-homework-9.8.20.gitCurrently no known issues, but track track open issues for proposed features (and known issues) in the future.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Unknown
Cynthia Wu - @cynthia21wu - cynthia21wu@gmail.com
Project Link: https://github.com/cynthiwu/code-refactoring-homework-9.8.20