Description | Installation | Usage | Credits | License
This project was meant to fulfill an on-the-job ticket. The task was to improve accessibility standards by adding HTML semantic elements so that the client's site is optimized for search engines (i.e. search engine optimization or SEO) and for disabled accessibility.
For in-depth details on changes and new additions. See the HTML and CSS document comments. In general, most elements were changed from non-semantic elements (e.g. <div>
) to semantic elements (e.g. <header>
, <nav>
, <article>
, <aside>
, <footer>
) for improved accessibility.
I learned a great deal in the importance of semantic elements and the ability to establish clear elements not only for the user, but for the developer as well. I also had the opportunity to work more with class
and id
elements, and ustilizing those to better optimize or consolidate code.
No installation is required. See the following link to access the website: https://itsa-me-dea.github.io/01-Challenge/
To view changes, you can review the code comments in in the HTML and CSS documents or review the comments within the Chrome DevTools. To view the website accessibility, you can utilize the Inspect Element tool within the Chrome DevTools.
The following is a screenshot of what the website should look like on full-screen display:
- Adding HTML Semantic Elements: https://www.w3schools.com/html/html5_semantic_elements.asp
- Adding a Navigation Menu: https://www.w3schools.com/html//tryit.asp?filename=tryhtml_lists_menu
Please refer to the LICENSE within the repository.