The client found a few issues with the webpage and, whilst getting those fixed wanted the backend code to be tidied up, and both documents made easier to navigate.
My motivation was to maintain consistency on the UI but try to re-work the back end to simplify it as much as possible. In addition to this I added comments throughout the HTML and CSS to provide easier navigation for myself and future developers.
The problems solved were:
- No project README
- No page tab title
- No favicon
- Non-semantic elements in the HTML
- A broken navigation link
- Lack of accessability alt= attributes on images/icons
I was able to practice the input of HTML semantic elements instead of a code relying on the div element. From this formatting I was then able to further my knowledge on how to format/consolidate HTML elements via the stylesheet.
Will work on most browsers (if not all).
No specific additional programs needed for it to run.
To use the navigation simply hover your cursor over the spaced titles and click. You will then be taken to the relevant box. Refer to the screenshot below for what the navigation bar looks like:
To view the deployed website visit the link below:
https://rosemaryjf.github.io/horiseon-refactor/
I used the following sites to ensure my HTML and CSS files used appropriate structure and commenting:
- https://developer.mozilla.org/en-US/docs/Web/HTML
- https://coding-boot-camp.github.io/full-stack/html/html-cheatsheet
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
- https://developer.mozilla.org/en-US/docs/Learn/Accessibility
The used the below sites for my README template and learning how to format it:
- https://coding-boot-camp.github.io/full-stack/github/professional-readme-guide
- https://commonmark.org/help/
- https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md#smileys--emotion
Unsure about anything? Feel free to contact me through GitHub for any questions about my process 🙂