This project refactors the code for an existing website, Horiseon, to make it more accessible to clients. The refactored code responds to the user story by meeting the acceptance criteria. Here is the user story, acceptance criteria, and the mock-up of the website for background.
AS A marketing agency
I WANT a codebase that follows accessibility standards
SO THAT our own site is optimized for search engines
GIVEN a webpage meets accessibility standards
WHEN I view the source code
THEN I find semantic HTML elements
WHEN I view the structure of the HTML elements
THEN I find that the elements follow a logical structure independent of styling and positioning
WHEN I view the icon and image elements
THEN I find accessible alt attributes
WHEN I view the heading attributes
THEN they fall in sequential order
WHEN I view the title element
THEN I find a concise, descriptive title
This is the mock-up of the website that needed its code to be refactored.
Essentially, refactored code fixes the source code by:
- renaming website's title as
Horiseonto be more specific and relevant to user - replacing
<div>with proper semantic HTML elements such as<main>,<header>,<nav>,<figure>,<section>,<article>,<aside>, and<footer> - adding alternate text to all images
- creating
classandidtags to remove redundant codes instyle.css - reorganizing
style.cssin top-down format - inserting quality comments to describe certain sections of the code
This screenshot is an example of the before-and-after refactored code within the index.html.
Note: All of the fixes does not alter the website's appearance in any way.
- Go to this respository on GitHub.
- Clone it to your computer.
- Find the
index.htmlwithin therefactoring-horiseonfolder and open it with Visual Studio Code. - Then launch the
index.htmlfile to see the website, which should look like this.