Horiseon page features a large hero banner followed by three main sections and a sidebar. The page is bookended with a navigational header and a footer. Semantic HTML and image alt attributes employed to increase Search Engine Optimization.
As a marketing agency, I want a codebase that follows accessibility standards so that our own site is optimized for search engines.
Semantic HTML elements can be found throughout the source code
HTML elements follow a logical structure independent of styling and positioning
Image and icon elements contain accessible alt attributes
Heading attributes fall in sequential order
Title elements contain a concise, descriptive title.
Q. What was your motivation
A. Our client 'Horiseon' is a SEO management company, we have been tasked to provide a codebase that follows accessibilty standards.
Q. Why did you build this project?
A. As a new front-end development company, we are growing our business and looking for new opportunities. We hope our client is happy with our work and be able to help 'Horiseon' in the future.
Q. What problems did you solve?
A. When looking at the Horiseon website for the first time, you may think that it is quite sleek and clean. However, when we looked at the HTML and CSS, we discovered that the coding was far from ideal. We have done a complete clean up of the code to make it more acessible, with the mindset of 'to leave it better than what we found it.
We have solved:
- Semantics HTML
- HTML now follow a logical structure, independent of styling and positioning.
- All images and icon elements contain accessible 'alt' attributes.
- All headings fall in sequential order
- All title elements now contain a concice, descriptive title.
Q. What did you learn?
A. This was a difficult challenge as I felt unprepared when first provided with the briefing. Several times, I found myself deleting all the code and starting again. I have learnt a lot about semantics and how to implelement them effectively.
Please upload the following to the deployed webserver:
The Horiseon can be deployed on web browsers such as Google Chrome, Safari and Firefox.
Challenge 1 was a task set by EdX, Skills for Life, Delivered by Trilogy Education Services Nov 2022.
https://www.educative.io/answers/what-are-the-semantic-and-non-semantic-elements-in-html
https://www.w3docs.com/learn-html/semantic-elements-in-html5.html
https://www.w3schools.com/html/html5_semantic_elements.asp
https://developer.mozilla.org/en-US/docs/Glossary/Semantics
https://www.youtube.com/watch?v=kX3TfdUqpuU
https://www.youtube.com/watch?v=kGW8Al_cga4
https://stackoverflow.com/questions/51388666/line-up-title-inside-navbar
Please see top of page