As a dilettante with HTML and css I have enrolled on a course that I hope will add some structure, system and rigour to my knowlege.
This is the first assessed excercise, refactoring the code of an existing web document with which the client is dissatisfied. To refactor in this context means to improve the functioning of the site without making changes to content or appearance.
The client story is that they want the code to follow accessibility standards, making it better for search engines as well as users with accessibility needs.
The cues given in class and documentation for this refactor include:
- Semantic HTML elements should be used where possible. These allow screen readers and search engines to identify types of content.
- HTML elements should be logically structured and clear in function without excess or repeated code.
- Semantically significant images and icons should have alt attributes.
- Heading attributes should run from a single h1 downwards by importance.
- An SEO company with a website titled "website" is unikely to get much business, so change to a descriptive title!
- That relating css to HTML is not trivial. Especially if the order of items in the files doesn't at least broadly match. I need to look further at the cascading mechanism and hierachy/scopes.
- Adding semantic elements was easier than I expected. I shall make very limited use of div elements in future.
- Looking for repetitive HTML and css can lead to refactoring into much more compact and easy to follow code.
- Git is a git. I had three false starts that were partly due to my making errors with git and GitHub. I broke off an practiced git for a while and then restarted. I didn't use branches in this project, I know they are best practice but with no collaborators I felt I could safely do that for now.
- I started the job (fourth time) by going through the code and commenting with my thoughts about what needed fixing. This worked well for me.
- I removed most of those comments; on reflecton I should have modified them into brief comments about what I'd done and why.
- Learning editor short cuts can really help speed work and reduce errors.
This project does not require installation, it is available as a website online to view.
Navigate to the site at https://SirLesP.github.io/horiseon-code-refactor.
You will see a page similar to this image. Note that the document is not responsive so best viewed with a screen width of at least 768px.
!
Using a screen reader to try out the page before and after the refactor could be a good way to quality control the refactor.